+ );
+}
diff --git a/src/components/charts/HiringFlow.jsx b/src/components/charts/HiringFlow.jsx
new file mode 100644
index 0000000..17ffa1b
--- /dev/null
+++ b/src/components/charts/HiringFlow.jsx
@@ -0,0 +1,114 @@
+import React from 'react';
+import { BarChart } from '@mui/x-charts';
+import { ChevronRight } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { chartSx, TONES, tooltipSx } from './muiChartTheme';
+
+/**
+ * The hiring flow — one surface, not six cards.
+ *
+ * A funnel is a shape before it is a set of numbers, so the magnitudes are drawn
+ * once as a bar series and the stage-by-stage reading sits underneath it as a
+ * connected strip: count, pass-through rate, and what was lost getting there.
+ * Reading down a column gives one stage; reading across gives the journey.
+ *
+ * The weakest transition is the only thing coloured differently, because on a
+ * funnel the one worth acting on is the one losing the most people.
+ *
+ * `stages` and `transitions` come from the page's own fact sheet — this
+ * component derives no figures of its own.
+ */
+export function HiringFlow({ stages = [], transitions = [], weakestKey, className }) {
+ if (!stages.length) return null;
+
+ const total = stages[0]?.count || 1;
+ const rateFor = (i) => (i === 0 ? 100 : transitions[i - 1]?.rate ?? 0);
+ const lostFor = (i) => (i === 0 ? 0 : transitions[i - 1]?.lost ?? 0);
+ const isWeak = (i) => i > 0 && transitions[i - 1] && transitions[i - 1].to === weakestKey;
+
+ return (
+
+ {/* The shape. Axis-free: the strip underneath carries every figure, so a
+ y-axis would repeat what is already written. */}
+
+ s.label),
+ categoryGapRatio: 0.5,
+ barGapRatio: 0,
+ /* Per-stage colour through the documented axis API rather than a
+ CSS nth-child guess at MUI's internal markup: the weakest
+ transition is amber, every other stage is brand blue. */
+ colorMap: {
+ type: 'ordinal',
+ values: stages.map((s) => s.label),
+ colors: stages.map((_, i) => (isWeak(i) ? TONES.warning : TONES.brand)),
+ },
+ }]}
+ /* Pinned to the data: MUI's automatic domain rounds up to roughly
+ double the top stage, which leaves the funnel occupying half the
+ plot and reading much flatter than it is. */
+ yAxis={[{ min: 0, max: Math.max(total, 1), tickNumber: 3 }]}
+ series={[{
+ data: stages.map((s) => s.count),
+ label: 'Candidates',
+ valueFormatter: (value, ctx) => {
+ const i = ctx?.dataIndex ?? 0;
+ const lost = lostFor(i);
+ return `${value} · ${rateFor(i)}% through${lost ? ` · ${lost} lost` : ''}`;
+ },
+ }]}
+ colors={[TONES.brand]}
+ borderRadius={6}
+ grid={{ horizontal: true }}
+ skipAnimation
+ sx={{
+ ...chartSx,
+ ...tooltipSx,
+ /* The weakest transition's bar picks up the warning tone; every
+ other bar stays brand blue. */
+ }}
+ />
+
+
+ {/* The reading. Scrolls rather than wraps on a phone, so the sequence
+ survives at any width. */}
+
+ );
+}
diff --git a/src/components/charts/HiringTrendChart.jsx b/src/components/charts/HiringTrendChart.jsx
new file mode 100644
index 0000000..d9073dc
--- /dev/null
+++ b/src/components/charts/HiringTrendChart.jsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import { LineChart } from '@mui/x-charts';
+import { cn } from '@/lib/utils';
+import { chartSx, TONES, tooltipSx } from './muiChartTheme';
+
+/**
+ * Cumulative hires over time.
+ *
+ * Deliberately does not draw a line through a single point: with one month of
+ * history there is no trend, and a chart that implies one is worse than a
+ * sentence saying there is not. The empty state is the page's own copy, kept
+ * intact and given the same container as the chart so the section holds its
+ * shape either way.
+ *
+ * `points: [{ label, hires, cumulative }]` — supplied by the page.
+ */
+export function HiringTrendChart({ points = [], emptyState, className }) {
+ const enough = points.length >= 2;
+
+ return (
+
+ );
+}
diff --git a/src/components/charts/muiChartTheme.js b/src/components/charts/muiChartTheme.js
new file mode 100644
index 0000000..ecdf87e
--- /dev/null
+++ b/src/components/charts/muiChartTheme.js
@@ -0,0 +1,86 @@
+/**
+ * KROW styling for MUI X Charts.
+ *
+ * MUI X is the drawing layer only — the surfaces, spacing and typography around
+ * a chart stay KROW's. This module is what stops the two from disagreeing: the
+ * palette is the same one the Recharts components already use (`CHART_TONES`),
+ * and the `sx` block restyles MUI's axes, grid and tooltip to the design
+ * system's hairlines and type scale rather than Material's defaults.
+ *
+ * Everything here is presentation. No chart in this folder computes a value.
+ */
+
+import { CHART_TONES } from '@/components/ds/ChartContainer';
+
+export const TONES = {
+ brand: CHART_TONES.brand,
+ brandSoft: 'rgba(10, 57, 223, 0.14)',
+ warning: '#D97706',
+ warningSoft: 'rgba(217, 119, 6, 0.16)',
+ success: '#16A34A',
+ grid: CHART_TONES.grid,
+ axis: CHART_TONES.axis,
+ ink: '#0F172A',
+ muted: '#64748B',
+};
+
+/** Type scale for chart text — matches the caption/overline sizes around it. */
+const LABEL_FONT = {
+ fontSize: 11,
+ fontFamily: 'var(--font-body)',
+};
+
+/**
+ * Shared `sx` for every KROW chart.
+ *
+ * Axis lines and ticks are removed rather than restyled: on a compact chart the
+ * value labels carry the reading, and a full axis frame is the "chart junk" the
+ * design language avoids. The grid stays as a hairline in the same colour the
+ * rest of the product uses for rules.
+ */
+export const chartSx = {
+ '& .MuiChartsAxis-line': { display: 'none' },
+ '& .MuiChartsAxis-tick': { display: 'none' },
+ '& .MuiChartsAxis-tickLabel': {
+ ...LABEL_FONT,
+ fill: `${TONES.muted} !important`,
+ },
+ '& .MuiChartsGrid-line': {
+ stroke: TONES.grid,
+ strokeDasharray: '3 3',
+ },
+ '& .MuiChartsLegend-root': { display: 'none' },
+ '& .MuiBarLabel-root': {
+ ...LABEL_FONT,
+ fontWeight: 600,
+ fill: `${TONES.ink} !important`,
+ },
+};
+
+/**
+ * Tooltip chrome matching `Surface`.
+ *
+ * Passed through `slotProps.tooltip` so MUI's popper carries the design
+ * system's radius, hairline border and shadow instead of Material elevation.
+ */
+export const tooltipSx = {
+ '& .MuiChartsTooltip-root, & .MuiPopper-root .MuiPaper-root': {
+ borderRadius: '10px',
+ border: `1px solid ${TONES.grid}`,
+ boxShadow: '0 8px 24px -12px rgba(15, 23, 42, 0.25)',
+ fontFamily: 'var(--font-body)',
+ fontSize: 12,
+ },
+ '& .MuiChartsTooltip-table': { fontSize: 12 },
+ '& .MuiChartsTooltip-labelCell, & .MuiChartsTooltip-valueCell': {
+ fontFamily: 'var(--font-body)',
+ },
+};
+
+/*
+ * Entry animation is switched off at every call site rather than gated on
+ * `prefers-reduced-motion`. Two reasons: a chart that grows out of the floor is
+ * the decorative motion this product avoids, and MUI's bar transition leaves
+ * every bar at zero height if the frame loop never advances — which is exactly
+ * what happens in an inactive tab or an automated browser.
+ */
diff --git a/src/components/forge/ChallengeDirectory.jsx b/src/components/forge/ChallengeDirectory.jsx
new file mode 100644
index 0000000..22e4587
--- /dev/null
+++ b/src/components/forge/ChallengeDirectory.jsx
@@ -0,0 +1,191 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { ArrowRight, Lock, Search, ShieldCheck } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { isUnlocked } from '@/lib/provingGround';
+import { DIFF_TONE, TYPE_ICON, TYPE_LABEL, typeOf } from './challengeMeta';
+
+/**
+ * Every other challenge, as a directory.
+ *
+ * Rows on hairlines rather than a wall of cards: these are secondary to the
+ * featured skill above, and a grid of bordered tiles would compete with it. The
+ * controls sit on the heading line so the section needs no toolbar surface of
+ * its own, and the row still carries everything a card did — skill, title,
+ * description, difficulty, proof type, duration, XP, reward, state and reason.
+ */
+export function ChallengeDirectory({
+ courses,
+ results,
+ search,
+ onSearch,
+ difficulty,
+ onDifficulty,
+ difficulties,
+ loading,
+ filtered,
+ onClear,
+ completedIds,
+ profile,
+}) {
+ return (
+
+
+
+
+ Other challenges
+
+
+ Practical challenges that turn a claim into verified evidence.
+
+ )}
+
+ );
+}
diff --git a/src/components/forge/ForgeHeader.jsx b/src/components/forge/ForgeHeader.jsx
new file mode 100644
index 0000000..1aa6c34
--- /dev/null
+++ b/src/components/forge/ForgeHeader.jsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { ArrowRight } from 'lucide-react';
+
+/**
+ * The Forge masthead.
+ *
+ * An editorial header rather than the marketing banner it replaces: an eyebrow
+ * that names the product category, the title, one line of standfirst, and the
+ * single action worth taking. The rule underneath is the only decoration, and
+ * the page reaches the actual skill work within one screen.
+ */
+export function ForgeHeader({ course, actionLabel = 'Continue challenge' }) {
+ return (
+
+
+
+ Workforce skill verification
+
+
+ KROW Forge
+
+
+ Prove real skills through real-world challenges and build a verified workforce reputation.
+
+
+
+ {course && (
+
+ {actionLabel}
+
+
+ )}
+
+ );
+}
diff --git a/src/components/forge/ForgeInsight.jsx b/src/components/forge/ForgeInsight.jsx
new file mode 100644
index 0000000..4760280
--- /dev/null
+++ b/src/components/forge/ForgeInsight.jsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { ArrowRight } from 'lucide-react';
+
+/**
+ * The page's closing remark.
+ *
+ * A rule and an accent rather than a filled panel: this is commentary on
+ * everything above it, and commentary that arrives in its own coloured card
+ * claims the same weight as the work.
+ */
+export function ForgeInsight({ headline, detail, highlight, actionLabel, onAction }) {
+ return (
+
+ );
+}
diff --git a/src/components/forge/ForgeProgress.jsx b/src/components/forge/ForgeProgress.jsx
new file mode 100644
index 0000000..250c939
--- /dev/null
+++ b/src/components/forge/ForgeProgress.jsx
@@ -0,0 +1,96 @@
+import React from 'react';
+import { cn } from '@/lib/utils';
+
+/**
+ * Forge progress — the four figures, and the journey they describe.
+ *
+ * The figures on their own were four disconnected numbers. Underneath them the
+ * same state is drawn as a single line: where the worker started, what they are
+ * proving now, the skill in front of them, and what is still gated. One rule,
+ * four nodes, no surfaces — competency progression rather than a scoreboard.
+ *
+ * Every node's state is derived from live counts by the page; this component
+ * only draws them.
+ */
+
+const NODE = {
+ done: 'border-krow-blue bg-krow-blue',
+ current: 'border-krow-blue bg-surface ring-4 ring-krow-blue/15',
+ upcoming: 'border-border bg-surface',
+ locked: 'border-warning/60 bg-surface',
+};
+
+const CAPTION_TONE = {
+ done: 'text-ink-2',
+ current: 'text-krow-blue',
+ upcoming: 'text-ink-4',
+ locked: 'text-warning',
+};
+
+export function ForgeProgress({ figures = [], stages = [], loading = false }) {
+ return (
+
+
+ ))}
+
+ )}
+
+ );
+}
diff --git a/src/components/forge/NextSkill.jsx b/src/components/forge/NextSkill.jsx
new file mode 100644
index 0000000..316be1c
--- /dev/null
+++ b/src/components/forge/NextSkill.jsx
@@ -0,0 +1,267 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { ArrowRight, Check, Lock } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import OwliverAvatar from '@/components/krow/OwliverAvatar';
+import { TYPE_HINT, TYPE_ICON, TYPE_LABEL, typeOf, proofSteps } from './challengeMeta';
+
+/**
+ * The next skill to prove — the focal point of the page and its only surface.
+ *
+ * It answers the four questions a worker actually has, in order: what the skill
+ * is, what they will be judged on, how the proof is submitted and who grades it,
+ * and what is standing in the way. Divided by rules rather than nested cards, so
+ * it reads as one workspace instead of a stack of tiles.
+ *
+ * "What you'll prove" is the challenge's own rubric — the criteria Owliver
+ * scores against — so the marking scheme is visible before the attempt.
+ */
+
+/** Progress toward a threshold: pips for a small count, a bar for a score. */
+function Progress({ have, need }) {
+ const done = Math.min(have, need);
+
+ if (need <= 8) {
+ return (
+
+ {Array.from({ length: need }, (_, i) => (
+
+ ))}
+
+ );
+ }
+
+ return (
+
+
+
+ );
+}
+
+export function NextSkill({ course, locked, requirements = [], actionLabel, index = 1 }) {
+ if (!course) return null;
+
+ const type = typeOf(course);
+ const Icon = TYPE_ICON[type] || TYPE_ICON.roleplay;
+ const steps = proofSteps(course);
+ const outstanding = requirements.filter((r) => !r.met).length;
+
+ return (
+
+ {/* Identity. */}
+
+ )}
+
+ {/* Quiet metadata, and the action. */}
+
+
+ {course.estimated_minutes} min · {course.xp} XP
+ {course.badge_reward && ` · Earns ${course.badge_reward}`}
+
+
+
+ {actionLabel}
+
+
+
+
+ );
+}
diff --git a/src/components/forge/YourForge.jsx b/src/components/forge/YourForge.jsx
new file mode 100644
index 0000000..a34fe55
--- /dev/null
+++ b/src/components/forge/YourForge.jsx
@@ -0,0 +1,128 @@
+import React from 'react';
+import { ArrowRight, Check } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+/**
+ * Your Forge — the record, or the process that creates it.
+ *
+ * With nothing verified yet this used to be the largest and emptiest object on
+ * the page. Here the empty state is the thing worth explaining instead: the four
+ * steps that turn a challenge into a verified skill, laid along one line. It is
+ * a process, not a placeholder, and it takes a fifth of the height.
+ *
+ * Once skills exist the same band lists them, so the section grows into a record
+ * rather than being swapped for a different component.
+ */
+
+const STEPS = ['Take a challenge', 'Submit proof', 'Owliver evaluates', 'Skill verified'];
+
+export function YourForge({ skills = [], evidenceCount = 0, onBrowse, formatDate }) {
+ const empty = skills.length === 0;
+
+ return (
+
+
+
+ Your Forge
+
+
+ {empty
+ ? 'Your first verified skill starts with a real-world challenge.'
+ : `${evidenceCount} ${evidenceCount === 1 ? 'piece' : 'pieces'} of evidence on file`}
+
- {/* 1. Page Hero & Progress Visualization */}
-
-
+ /* No max-width here: the Admin shell already supplies the gutters
+ (px-4 lg:px-6 on a flex-1 main), which is how every other Admin page is
+ sized. This div only owns vertical rhythm. */
+
+ {/* 1 ── What this is. */}
+
-
-
-
- KROW FORGE
-
-
- Prove what you can do.
-
-
- Build verified skills through real-world challenges, strengthen your workforce reputation, and unlock your next opportunities.
-
- {firstActiveCourse && (
-
-
- Continue a challenge
-
-
-
- )}
-
+ {/* 2 ── Where the worker stands, and where it leads. */}
+
- {/* Right Compact Progress Card */}
-
-
-
- FORGE PROGRESS
-
-
-
+ {/* 3 ── The record, or the process that creates it. */}
+
-
-
-
{verifiedCount}
-
Verified skills
-
-
-
{inProgressCount}
-
In progress
-
-
-
{nextUnlockCount}
-
Next unlock
-
-
+ {/* 4 ── The skill to prove now. The page's focus. */}
+
+
+
-
-
-
-
+ {/* 5 ── Everything else. */}
+
+
+
- {/* 2. Verified Skills Section */}
-
-
-
VERIFIED SKILLS
-
Skills you have already proven through KROW Forge.
-
-
- {verifiedSkills.length === 0 ? (
-
-
-
-
-
NO VERIFIED SKILLS YET
-
- Your Forge profile starts with your first proven skill. Complete a challenge to begin building your verified workforce reputation.
-
-
-
- ) : (
-
- {verifiedSkills.map((badge, idx) => (
-
-
-
-
-
-
{badge.name}
-
Verified · {badge.level || 'Standard'}
-
- Verified {badge.earned_date || 'Jul 2026'}
-
-
-
- ))}
-
- )}
-
-
- {/* 3. Next Skills to Unlock */}
-
-
-
NEXT SKILLS TO UNLOCK
-
KROW recommends these based on your current skills, experience, and workforce goals.
-
+ {/* The funnel takes the full width: it is a horizontal sequence, and in a
+ half-width column the stage strip truncates its own labels. */}
+
+
+
+
- {/* Score distribution — where the hireable pool actually sits. */}
-
-
-
-
-
-
-
- } />
-
- {scoreDistribution.map((d) => )}
-
-
-
-
-
+ {/* Score distribution — where the hireable pool actually sits. */}
+
+
+
+
+
+
+
+ } />
+
+ {scoreDistribution.map((d) => )}
+
+
+
+
{/* Velocity and screening efficiency. Both are ratios rather than shapes,
so they read better as figures with an explanation than as another
diff --git a/src/pages/admin/HiredHistory.jsx b/src/pages/admin/HiredHistory.jsx
index 4f4dd22..fb62c30 100644
--- a/src/pages/admin/HiredHistory.jsx
+++ b/src/pages/admin/HiredHistory.jsx
@@ -1,12 +1,10 @@
import React, { useMemo } from 'react';
-import { Area, AreaChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
import { ArrowRight, Award, Clock, TrendingUp, Users } from 'lucide-react';
import { cn } from '@/lib/utils';
-import {
- AXIS_PROPS, Avatar, Badge, CHART_TONES, ChartTooltip, DataTable, MetricStrip,
- ProgressBar, StatusBadge, Surface,
-} from '@/components/ds';
+import { Avatar, Badge, DataTable, MetricStrip, StatusBadge, Surface } from '@/components/ds';
import { useApplications, useJobPostings, useStaff } from '@/lib/krowHooks';
+import { DepartmentPerformance } from '@/components/charts/DepartmentPerformance';
+import { HiringTrendChart } from '@/components/charts/HiringTrendChart';
import { AdminPage, SectionTitle } from '@/pages/admin/_shell';
/**
@@ -65,8 +63,6 @@ export default function AdminHiredHistory() {
return [...map.values()].map((e) => ({ ...e, avgScore: avg(e.scores) })).sort((a, b) => b.count - a.count);
}, [hires]);
- const maxDept = Math.max(...byDepartment.map((d) => d.count), 1);
-
/**
* Outcomes per position: how many were hired, how fast, and how well they
* scored. This is the retrospective question Positions cannot answer, because
@@ -150,12 +146,13 @@ export default function AdminHiredHistory() {
-
- {/* A trend needs at least two points to be a trend. With one month of
- hires a line chart draws a single dot in an empty grid, which reads
- as broken rather than as "not enough history yet" — so say the
- latter, and give the figure that one month does support. */}
- {trend.length < 2 ? (
+ {/* A trend needs at least two points to be a trend. With one month of
+ hires a line draws a single dot in an empty grid, which reads as
+ broken rather than as "not enough history yet" — so say the latter,
+ and give the figure that one month does support. */}
+
Not enough history for a trend
@@ -166,46 +163,15 @@ export default function AdminHiredHistory() {
: 'No hires recorded yet. Hiring volume over time appears here once the first role closes.'}