CIAgent
810485ecc8
---ci--- phase: 7 milestone: v0.1 status: complete requirements: covered: [REQ-001, REQ-002, REQ-003, REQ-004, REQ-005, REQ-006, REQ-007, REQ-008, REQ-009, REQ-010, REQ-011, REQ-012, REQ-013, REQ-014, REQ-015, REQ-016, REQ-017, REQ-018, REQ-019, REQ-020, REQ-021, REQ-022, REQ-023, REQ-024, REQ-025, REQ-026, REQ-027, REQ-028] partial: [] ---/ci--- Milestone v0.1 (nextcraft-ui-prototype) complete. Summary: - 7 phases (P0 pre-execution + P1-P6 execution + P7 final review) - 28 requirements covered (all complete) - 4 surfaces: Learner (7 pages), Marketplace (5), Employer Dashboard (4), Admin (4) - 19 routes, 104 TypeScript files - Shared component library (5 primitives + design tokens) - Mock data: 5 competency stacks (70 competencies), 20 jobs, 15 candidates, 10 employers - Tech: Next.js 15, Tailwind CSS v4, lucide-react, recharts, @xyflow/react, Inter font - Storybook with 6 stories - Dark mode, breadcrumbs, role switcher, responsive design - Build passes, typecheck passes, Storybook build passes Phases: P0 pre-execution → v0.0.1 P1 project-scaffolding → v0.0.2 P2 learner-surface → v0.0.3 P3 marketplace-surface → v0.0.4 P4 employer-dashboard → v0.0.5 P5 admin-surface → v0.0.6 P6 polish-integration → v0.0.7 P7 final-review-ship → v0.1.0 (milestone release)
71 lines
1.9 KiB
TypeScript
71 lines
1.9 KiB
TypeScript
'use client';
|
|
|
|
import {
|
|
AreaChart,
|
|
Area,
|
|
XAxis,
|
|
YAxis,
|
|
CartesianGrid,
|
|
Tooltip,
|
|
ResponsiveContainer,
|
|
} from 'recharts';
|
|
import { colors } from '@nextcraft/ui';
|
|
|
|
const DATA = [
|
|
{ week: 'Week 1', mastery: 18 },
|
|
{ week: 'Week 2', mastery: 26 },
|
|
{ week: 'Week 3', mastery: 31 },
|
|
{ week: 'Week 4', mastery: 42 },
|
|
{ week: 'Week 5', mastery: 48 },
|
|
{ week: 'Week 6', mastery: 56 },
|
|
{ week: 'Week 7', mastery: 60 },
|
|
{ week: 'Week 8', mastery: 62 },
|
|
];
|
|
|
|
const tooltipStyle = {
|
|
borderRadius: 8,
|
|
border: `1px solid ${colors.neutral[200]}`,
|
|
fontSize: 12,
|
|
} as const;
|
|
|
|
const axisTick = { fontSize: 12, fill: colors.neutral[500] } as const;
|
|
|
|
export function ProgressGraph() {
|
|
return (
|
|
<div className="h-64 w-full">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<AreaChart data={DATA} margin={{ top: 10, right: 16, left: -8, bottom: 0 }}>
|
|
<defs>
|
|
<linearGradient id="masteryFill" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="0%" stopColor={colors.primary[500]} stopOpacity={0.35} />
|
|
<stop offset="100%" stopColor={colors.primary[500]} stopOpacity={0} />
|
|
</linearGradient>
|
|
</defs>
|
|
<CartesianGrid strokeDasharray="3 3" stroke={colors.neutral[200]} />
|
|
<XAxis
|
|
dataKey="week"
|
|
tick={axisTick}
|
|
stroke={colors.neutral[300]}
|
|
/>
|
|
<YAxis
|
|
domain={[0, 100]}
|
|
tick={axisTick}
|
|
stroke={colors.neutral[300]}
|
|
tickFormatter={(v) => `${v}%`}
|
|
/>
|
|
<Tooltip
|
|
contentStyle={tooltipStyle}
|
|
formatter={(v: number) => [`${v}%`, 'Mastery']}
|
|
/>
|
|
<Area
|
|
type="monotone"
|
|
dataKey="mastery"
|
|
stroke={colors.primary[600]}
|
|
strokeWidth={2}
|
|
fill="url(#masteryFill)"
|
|
/>
|
|
</AreaChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
);
|
|
} |