Compare commits
6 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 CIAgent
|
e9ba886dbb | ||
|
CIAgent
|
a38512f493 | ||
|
CIAgent
|
432049041c | ||
|
CIAgent
|
08923e89b4 | ||
|
CIAgent
|
c93aace56b | ||
|
CIAgent
|
9d530dd4d3 |
@@ -0,0 +1,136 @@
|
||||
# Nextcraft — ARCHITECTURE.md
|
||||
|
||||
## Overview
|
||||
|
||||
Nextcraft v0.1 is a high-fidelity UI/UX prototype built as a TypeScript monorepo using pnpm workspaces and turborepo. The prototype consists of a single Next.js application with route groups for each surface (Learner, Marketplace, Employer Dashboard, Admin), backed by a shared component library, typed mock data layer, and shared types package.
|
||||
|
||||
**No backend, no database, no authentication logic.** All data is static/mock. The architecture is designed to be replaced piece-by-piece with real backend services in future milestones.
|
||||
|
||||
### Confirmed Technology Stack (Research Findings)
|
||||
|
||||
| Technology | Version | Purpose |
|
||||
|------------|---------|---------|
|
||||
| Node.js | v24.15.0 | Runtime |
|
||||
| pnpm | 12.3.4 | Package manager + workspaces |
|
||||
| turborepo | latest | Build orchestration |
|
||||
| Next.js | latest (App Router) | Web application framework |
|
||||
| React | 19+ | UI library |
|
||||
| TypeScript | 5.x | Type system |
|
||||
| Tailwind CSS | v4 | Utility-first CSS framework |
|
||||
| lucide-react | latest | Icon system |
|
||||
| recharts | latest | Charts for employer/admin dashboards |
|
||||
| @xyflow/react (react-flow) | latest | Competency graph viewer in admin surface |
|
||||
| Inter font | via next/font | Typography |
|
||||
| ESLint | via Next.js | Linting |
|
||||
| Prettier | latest | Code formatting |
|
||||
|
||||
### Architecture Decisions from Research
|
||||
|
||||
1. **Next.js App Router with route groups** — `(learner)`, `(marketplace)`, `(employer)`, `(admin)` provide clean URL separation without affecting paths
|
||||
2. **Tailwind CSS v4** — Configured via `@theme` in CSS, no `tailwind.config.js` needed (v4 paradigm shift). Dark mode via `class` strategy.
|
||||
3. **Server components by default** — All pages are server components. Client components only for interactive elements (filters, search, chat, graph viewer, dark mode toggle)
|
||||
4. **Mock data as ES modules** — Typed TS files exported from `packages/mock-data`. No JSON files — all mock data is programmatically generated for richer structure.
|
||||
5. **react-flow (@xyflow/react)** — Confirmed for competency graph viewer. Provides interactive node/edge rendering with built-in controls.
|
||||
6. **recharts** — Confirmed for analytics dashboards. Responsive, composable, integrates well with React server components.
|
||||
7. **pnpm workspaces** — `apps/web` + `packages/ui` + `packages/mock-data` + `packages/types`. Shared deps hoisted.
|
||||
|
||||
---
|
||||
|
||||
## Components
|
||||
|
||||
### apps/web — Next.js Application
|
||||
|
||||
| Component | Description | Boundaries | Depends On |
|
||||
|-----------|-------------|------------|------------|
|
||||
| `app/(learner)/` | Learner surface route group: landing, catalog, competency stack, dashboard, byte viewer, sandbox mockup, assessment mockup | Learner-only routes and layouts | packages/ui, packages/mock-data, packages/types |
|
||||
| `app/(marketplace)/` | Marketplace surface route group: job board, job detail, employer profile, search/filter, pricing | Marketplace-only routes and layouts | packages/ui, packages/mock-data, packages/types |
|
||||
| `app/(employer)/` | Employer dashboard route group: overview, talent search, candidate profile, posting management | Employer-only routes and layouts | packages/ui, packages/mock-data, packages/types |
|
||||
| `app/(admin)/` | Admin surface route group: overview, learner management, competency graph viewer, moderation | Admin-only routes and layouts | packages/ui, packages/mock-data, packages/types |
|
||||
| `app/layout.tsx` | Root layout: theme provider, navigation shell, responsive container | All routes | packages/ui |
|
||||
| `components/` | Surface-specific components (not shared across surfaces) | Per-surface only | packages/ui |
|
||||
|
||||
### packages/ui — Shared Component Library
|
||||
|
||||
| Component | Description | Boundaries | Depends On |
|
||||
|-----------|-------------|------------|------------|
|
||||
| `design-tokens/` | CSS custom properties: color palette, typography scale, spacing system, breakpoints, shadows, radii | Foundation layer — no dependencies | None |
|
||||
| `primitives/` | Button, Input, Card, Badge, Avatar, Dialog, Tabs, Progress, Tooltip, Skeleton, Toast | Atomic UI components | design-tokens |
|
||||
| `composites/` | Navigation, Table, SearchBar, FilterPanel, ChatInterface, GraphViewer, ArtifactCard, CompetencyBadge, JobCard, CandidateCard, MetricCard | Composite components built from primitives | primitives, packages/types |
|
||||
| `layouts/` | Container, Grid, Sidebar, SplitPanel, DashboardLayout | Layout components | primitives, design-tokens |
|
||||
| `theme/` | Theme provider, CSS variable overrides per surface (learner, marketplace, employer, admin) | Theme context | design-tokens |
|
||||
|
||||
### packages/mock-data — Mock Data Layer
|
||||
|
||||
| Component | Description | Boundaries | Depends On |
|
||||
|-----------|-------------|------------|------------|
|
||||
| `competency-stacks.ts` | 5 competency stacks (AI Orchestration Engineer, AI Safety & Governance, Human-AI Product Designer, AI-Augmented Field Operator, Computational Sciences), each with 12-18 competencies | Typed mock data | packages/types |
|
||||
| `jobs.ts` | 20+ mock AI-era job listings with skills, seniority, salary, match scores | Typed mock data | packages/types |
|
||||
| `candidates.ts` | 15+ mock candidate profiles with artifacts, process traces, defense scores, microcredentials | Typed mock data | packages/types |
|
||||
| `employers.ts` | 10+ mock employer profiles with logos, descriptions, open positions | Typed mock data | packages/types |
|
||||
| `learner-progress.ts` | Mock learner progress data: active competencies, completion percentages, recent artifacts | Typed mock data | packages/types |
|
||||
| `ai-tutor-responses.ts` | Pre-scripted AI tutor chat responses for Coach and Tutor agent mockups | Typed mock data | packages/types |
|
||||
|
||||
### packages/types — Shared Types
|
||||
|
||||
| Component | Description | Boundaries | Depends On |
|
||||
|-----------|-------------|------------|------------|
|
||||
| `domain.ts` | Competency, CompetencyStack, Microcredential, Artifact, ProcessTrace, OralDefense, AssessmentRubric | Domain types | None |
|
||||
| `marketplace.ts` | Job, Employer, Candidate, JobPosting, TalentMatch, SearchFilter | Marketplace types | None |
|
||||
| `user.ts` | Learner, Admin, EmployerUser, AgeGroup, Role | User types | None |
|
||||
| `ui.ts` | Component props, theme config, breakpoint definitions | UI types | None |
|
||||
|
||||
---
|
||||
|
||||
## Data Flow
|
||||
|
||||
```
|
||||
[Mock Data Layer] ──typed──> [Shared Types] <──typed──> [UI Components]
|
||||
│ │
|
||||
│ │
|
||||
▼ ▼
|
||||
[Next.js Route Groups] [Surface Components]
|
||||
(learner)/ (marketplace)/ (employer)/ (admin)/
|
||||
│ │ │ │
|
||||
└──────────────────┴─────────────────┴───────────────┘
|
||||
│
|
||||
▼
|
||||
[Root Layout + Theme Provider]
|
||||
│
|
||||
▼
|
||||
[Responsive Navigation Shell]
|
||||
```
|
||||
|
||||
All data flows from the mock data layer through typed imports into Next.js route handlers / server components, which pass data as props to UI components. No client-side data fetching, no API routes, no server actions in v0.1.
|
||||
|
||||
---
|
||||
|
||||
## Build Order
|
||||
|
||||
1. **Monorepo scaffolding** — pnpm-workspace.yaml, turbo.json, tsconfig.json, package.json, Next.js app initialization
|
||||
2. **Shared types** — packages/types with all domain, marketplace, user, and UI type definitions
|
||||
3. **Mock data layer** — packages/mock-data with typed mock data for all surfaces
|
||||
4. **Design tokens** — packages/ui/design-tokens with CSS custom properties
|
||||
5. **UI primitives** — Button, Input, Card, Badge, Avatar, Dialog, Tabs, Progress, Tooltip, Skeleton, Toast
|
||||
6. **Root layout + navigation shell** — Root layout with theme provider, responsive navigation, role switcher
|
||||
7. **UI composites** — Navigation, Table, SearchBar, FilterPanel, ChatInterface, GraphViewer, ArtifactCard, CompetencyBadge, JobCard, CandidateCard, MetricCard
|
||||
8. **Learner surface routes** — Landing, catalog, competency stack, dashboard, byte viewer, sandbox mockup, assessment mockup
|
||||
9. **Marketplace surface routes** — Job board, job detail, employer profile, search/filter, pricing
|
||||
10. **Employer dashboard routes** — Overview, talent search, candidate profile, posting management
|
||||
11. **Admin surface routes** — Overview, learner management, competency graph viewer, moderation
|
||||
12. **Polish + integration** — Cross-surface navigation, responsive QA, visual consistency, Storybook
|
||||
|
||||
---
|
||||
|
||||
## Future Architecture (Post-v0.1, for reference)
|
||||
|
||||
The v0.1 prototype is designed to be replaced piece-by-piece with real backend services:
|
||||
|
||||
- **Mock data → PostgreSQL + Drizzle ORM** — mock data files replaced with database queries via repository layer
|
||||
- **Static routes → Fastify API + Next.js SSR** — API routes replaced with Fastify backend services
|
||||
- **Mock AI tutor → Python FastAPI AI services** — Chat interface mockup replaced with real AI agent microservices
|
||||
- **Mock assessment → Assessment engine** — Assessment mockup replaced with process-trace grading + oral defense engine
|
||||
- **No auth → Identity verification + age-gating** — Registration flow mockup replaced with real KYC and age verification
|
||||
- **No search → Semantic vector search (pgvector)** — Filter UI replaced with vector similarity search
|
||||
- **No payments → Payment processing** — Pricing page replaced with real subscription/payment flows
|
||||
|
||||
The monorepo structure (apps/web + packages/*) is designed to accommodate additional apps (e.g., apps/api, apps/ai-service) in future milestones without restructuring.
|
||||
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"phase": 5,
|
||||
"stage": "execute",
|
||||
"milestone": "v0.1",
|
||||
"phase_role": "execution",
|
||||
"attempts": 0,
|
||||
"updated_at": "2026-09-10T22:20:00Z"
|
||||
}
|
||||
@@ -0,0 +1,124 @@
|
||||
# Nextcraft — PERSONAS.md
|
||||
|
||||
## Persona Roster
|
||||
|
||||
### lead-developer
|
||||
```yaml
|
||||
active: true
|
||||
phase_specific: false
|
||||
reason: Coordinates task decomposition across surfaces, resolves conflicts between frontend and data personas
|
||||
domain: coordination
|
||||
frameworks:
|
||||
- next.js
|
||||
- turborepo
|
||||
- pnpm
|
||||
constraints:
|
||||
- pragmatic
|
||||
- battle-tested defaults
|
||||
- monorepo-architecture
|
||||
territory:
|
||||
- "**/package.json"
|
||||
- "**/turbo.json"
|
||||
- "**/pnpm-workspace.yaml"
|
||||
- "**/tsconfig.json"
|
||||
```
|
||||
|
||||
### frontend-engineer
|
||||
```yaml
|
||||
active: true
|
||||
phase_specific: false
|
||||
reason: Primary persona for v0.1 — all 28 REQ-IDs are UI/frontend work. Owns all page components, layouts, and surface-specific UI.
|
||||
domain: frontend
|
||||
frameworks:
|
||||
- react
|
||||
- next.js
|
||||
- tailwindcss
|
||||
- lucide-react
|
||||
- recharts
|
||||
- react-flow
|
||||
constraints:
|
||||
- component-first
|
||||
- server-components-default
|
||||
- minimal-client-js
|
||||
- mock-data-only
|
||||
- responsive-all-breakpoints
|
||||
- dark-mode-support
|
||||
territory:
|
||||
- "apps/web/**"
|
||||
- "packages/ui/**"
|
||||
- "packages/mock-data/**"
|
||||
- "packages/types/**"
|
||||
```
|
||||
|
||||
### data-engineer
|
||||
```yaml
|
||||
active: true
|
||||
phase_specific: false
|
||||
reason: Owns mock data layer schema and typed definitions. No real database in v0.1, but data structures must be well-typed for future migration.
|
||||
domain: data
|
||||
frameworks:
|
||||
- typescript
|
||||
constraints:
|
||||
- schema-first
|
||||
- type-safe
|
||||
- migration-ready
|
||||
- mock-data-only
|
||||
territory:
|
||||
- "packages/types/**"
|
||||
- "packages/mock-data/**"
|
||||
```
|
||||
|
||||
### backend-engineer
|
||||
```yaml
|
||||
active: false
|
||||
phase_specific: false
|
||||
reason: No backend in v0.1. All data is mock/static. Backend persona deactivated until v0.2+ when API services are needed.
|
||||
domain: backend
|
||||
frameworks: []
|
||||
constraints: []
|
||||
territory: []
|
||||
```
|
||||
|
||||
### security-auditor
|
||||
```yaml
|
||||
active: false
|
||||
phase_specific: false
|
||||
reason: No auth, no API, no real data in v0.1. Security review handled by verifier's STRIDE analysis layer. No dedicated security persona needed for UI prototype.
|
||||
domain: security
|
||||
frameworks: []
|
||||
constraints: []
|
||||
territory: []
|
||||
```
|
||||
|
||||
## Custom Personas
|
||||
|
||||
### design-system-engineer
|
||||
```yaml
|
||||
active: true
|
||||
phase_specific: false
|
||||
reason: Custom persona for v0.1 — owns the shared component library, design tokens, and visual consistency. Combines frontend expertise with design system ownership.
|
||||
domain: frontend
|
||||
frameworks:
|
||||
- tailwindcss
|
||||
- storybook
|
||||
- lucide-react
|
||||
constraints:
|
||||
- design-token-driven
|
||||
- wcag-aa-contrast
|
||||
- dark-mode-required
|
||||
- consistent-across-surfaces
|
||||
territory:
|
||||
- "packages/ui/**"
|
||||
```
|
||||
|
||||
## Phase-Specific Personas
|
||||
|
||||
None for v0.1. All active personas span the entire milestone.
|
||||
|
||||
## Territory Conflict Resolution
|
||||
|
||||
| Conflict | Resolution |
|
||||
|----------|-----------|
|
||||
| frontend-engineer vs data-engineer (packages/types, packages/mock-data) | data-engineer owns type definitions and mock data schema; frontend-engineer consumes them. If changes needed, data-engineer updates types first. |
|
||||
| frontend-engineer vs design-system-engineer (packages/ui) | design-system-engineer owns design tokens and primitive components; frontend-engineer owns composite components and page-level UI. |
|
||||
| lead-developer vs any | lead-developer coordinates only, does not directly modify code files. |
|
||||
@@ -0,0 +1,398 @@
|
||||
# Nextcraft v0.1 — PLAN.md
|
||||
|
||||
## Overview
|
||||
|
||||
This plan covers execution phases 1-6 of milestone v0.1 (UI/UX Prototype). Each phase is a vertical slice that produces a demoable milestone. Phases are ordered by dependency — later phases build on earlier ones.
|
||||
|
||||
---
|
||||
|
||||
## Phase 1: Project Scaffolding
|
||||
|
||||
**Requirements:** REQ-001, REQ-002, REQ-003, REQ-004, REQ-005
|
||||
**Persona:** design-system-engineer (Wave 1), data-engineer (Wave 1), frontend-engineer (Wave 2)
|
||||
**Goal:** Monorepo builds, dev server starts, component library has all primitives, mock data typed, routing works
|
||||
|
||||
### Wave 1: Foundation (parallel — no shared file conflicts)
|
||||
|
||||
#### Task 1-1-01: Monorepo scaffolding
|
||||
- **Persona:** design-system-engineer
|
||||
- **Files:** `package.json`, `pnpm-workspace.yaml`, `turbo.json`, `tsconfig.json`, `.npmrc`
|
||||
- **Action:** Create root monorepo config. pnpm workspaces pointing to `apps/*` and `packages/*`. Turborepo with build/dev/lint/typecheck pipelines. Root tsconfig with path aliases.
|
||||
- **Verify:** `pnpm install` succeeds; workspace packages detected
|
||||
- **Done:** `pnpm list -r` shows all workspace packages
|
||||
|
||||
#### Task 1-1-02: Shared types package
|
||||
- **Persona:** data-engineer
|
||||
- **Files:** `packages/types/package.json`, `packages/types/tsconfig.json`, `packages/types/domain.ts`, `packages/types/marketplace.ts`, `packages/types/user.ts`, `packages/types/ui.ts`, `packages/types/index.ts`
|
||||
- **Action:** Create all shared TypeScript type definitions: Competency, CompetencyStack, Microcredential, Artifact, ProcessTrace, OralDefense, AssessmentRubric, Job, Employer, Candidate, JobPosting, TalentMatch, SearchFilter, Learner, Admin, EmployerUser, AgeGroup, Role, plus UI types (ComponentProps, ThemeConfig, Breakpoint).
|
||||
- **Verify:** `pnpm typecheck` passes in packages/types
|
||||
- **Done:** All types exported from index.ts; no type errors
|
||||
|
||||
#### Task 1-1-03: Mock data package
|
||||
- **Persona:** data-engineer
|
||||
- **Files:** `packages/mock-data/package.json`, `packages/mock-data/tsconfig.json`, `packages/mock-data/competency-stacks.ts`, `packages/mock-data/jobs.ts`, `packages/mock-data/candidates.ts`, `packages/mock-data/employers.ts`, `packages/mock-data/learner-progress.ts`, `packages/mock-data/ai-tutor-responses.ts`, `packages/mock-data/index.ts`
|
||||
- **Action:** Create typed mock data: 5 competency stacks (AI Orchestration Engineer with 15 competencies, AI Safety & Governance with 14, Human-AI Product Designer with 13, AI-Augmented Field Operator with 12, Computational Sciences with 16). 20+ mock jobs. 15+ mock candidates. 10+ mock employers. Mock learner progress. Pre-scripted AI tutor responses.
|
||||
- **Verify:** All mock data matches types from packages/types; `pnpm typecheck` passes
|
||||
- **Done:** All mock data exported from index.ts; types match
|
||||
|
||||
### Wave 2: UI Foundation (depends on Wave 1)
|
||||
|
||||
#### Task 1-2-01: Next.js app initialization
|
||||
- **Persona:** frontend-engineer
|
||||
- **Files:** `apps/web/package.json`, `apps/web/tsconfig.json`, `apps/web/next.config.ts`, `apps/web/app/layout.tsx`, `apps/web/app/page.tsx`, `apps/web/app/globals.css`
|
||||
- **Action:** Initialize Next.js app with App Router, TypeScript, Tailwind CSS v4. Configure Inter font via next/font. Set up path aliases to packages. Create root layout with theme provider. Create placeholder home page.
|
||||
- **Verify:** `pnpm dev` starts; `pnpm build` succeeds; page renders at localhost:3000
|
||||
- **Done:** Next.js app runs with Tailwind CSS and Inter font
|
||||
|
||||
#### Task 1-2-02: Design tokens and Tailwind config
|
||||
- **Persona:** design-system-engineer
|
||||
- **Files:** `packages/ui/package.json`, `packages/ui/tsconfig.json`, `packages/ui/src/index.ts`, `packages/ui/src/tokens/index.ts`, `apps/web/app/globals.css` (update)
|
||||
- **Action:** Create packages/ui package. Define design tokens as TypeScript constants and CSS custom properties: color palette (indigo/violet primary, emerald accent, slate neutral, dark mode variants), typography scale (12px-48px), spacing system (4px base), breakpoints (375px, 768px, 1280px), shadows, radii. Configure Tailwind v4 `@theme` with custom colors.
|
||||
- **Verify:** Design tokens importable from packages/ui; Tailwind classes work with custom colors
|
||||
- **Done:** `import { tokens } from '@nextcraft/ui'` works; `bg-primary-500` class works
|
||||
|
||||
#### Task 1-2-03: UI primitives
|
||||
- **Persona:** design-system-engineer
|
||||
- **Files:** `packages/ui/src/primitives/button.tsx`, `packages/ui/src/primitives/input.tsx`, `packages/ui/src/primitives/card.tsx`, `packages/ui/src/primitives/badge.tsx`, `packages/ui/src/primitives/avatar.tsx`, `packages/ui/src/primitives/dialog.tsx`, `packages/ui/src/primitives/tabs.tsx`, `packages/ui/src/primitives/progress.tsx`, `packages/ui/src/primitives/tooltip.tsx`, `packages/ui/src/primitives/skeleton.tsx`, `packages/ui/src/primitives/toast.tsx`, `packages/ui/src/primitives/index.ts`
|
||||
- **Action:** Create all 12 primitive components. Each is a React component with TypeScript props, Tailwind styling, forwardRef, and size variants. Button (primary, secondary, ghost, destructive). Input (text, search, with label). Card (with header, body, footer slots). Badge (default, success, warning, error). Avatar (with image, fallback, sizes). Dialog (modal, with overlay). Tabs (horizontal, with active indicator). Progress (linear, circular). Tooltip (on hover). Skeleton (shimmer). Toast (with variants).
|
||||
- **Verify:** All primitives importable; each renders without error; variants work
|
||||
- **Done:** 12 primitives exported from packages/ui
|
||||
|
||||
#### Task 1-2-04: Layout components
|
||||
- **Persona:** design-system-engineer
|
||||
- **Files:** `packages/ui/src/layouts/container.tsx`, `packages/ui/src/layouts/grid.tsx`, `packages/ui/src/layouts/sidebar.tsx`, `packages/ui/src/layouts/split-panel.tsx`, `packages/ui/src/layouts/dashboard-layout.tsx`, `packages/ui/src/layouts/index.ts`
|
||||
- **Action:** Create layout components. Container (max-width variants: sm, md, lg, xl, full). Grid (responsive cols prop). Sidebar (collapsible, with nav items). SplitPanel (resizable divider). DashboardLayout (sidebar + main content area).
|
||||
- **Verify:** Layout components render; responsive breakpoints work
|
||||
- **Done:** 5 layout components exported
|
||||
|
||||
#### Task 1-2-05: Root layout + navigation shell
|
||||
- **Persona:** frontend-engineer
|
||||
- **Files:** `apps/web/app/layout.tsx` (update), `apps/web/components/navigation-shell.tsx`, `apps/web/components/role-switcher.tsx`, `apps/web/components/header.tsx`, `apps/web/components/footer.tsx`
|
||||
- **Action:** Update root layout with theme provider (dark mode toggle), Inter font, responsive navigation shell. Create role switcher (learner/employer/admin toggle in header). Create header with logo, nav links, role switcher, dark mode toggle. Create footer with links.
|
||||
- **Verify:** Dark mode toggle works; role switcher navigates between surfaces; responsive at 375px/768px/1280px
|
||||
- **Done:** Navigation shell renders on all pages; role switcher functional
|
||||
|
||||
#### Task 1-2-06: Route groups with placeholder pages
|
||||
- **Persona:** frontend-engineer
|
||||
- **Files:** `apps/web/app/(learner)/page.tsx`, `apps/web/app/(learner)/layout.tsx`, `apps/web/app/(marketplace)/page.tsx`, `apps/web/app/(marketplace)/layout.tsx`, `apps/web/app/(employer)/page.tsx`, `apps/web/app/(employer)/layout.tsx`, `apps/web/app/(admin)/page.tsx`, `apps/web/app/(admin)/layout.tsx`
|
||||
- **Action:** Create route groups with layouts for each surface. Each layout has surface-specific navigation. Placeholder pages with surface name and brief description.
|
||||
- **Verify:** Navigation to / (learner), /marketplace, /employer, /admin works
|
||||
- **Done:** 4 route groups with layouts and placeholder pages
|
||||
|
||||
### Must-Haves (Phase 1)
|
||||
- [ ] `pnpm install` succeeds
|
||||
- [ ] `pnpm dev` starts Next.js dev server
|
||||
- [ ] `pnpm build` succeeds
|
||||
- [ ] `pnpm typecheck` passes
|
||||
- [ ] 12 UI primitives importable from `@nextcraft/ui`
|
||||
- [ ] Mock data typed and importable from `@nextcraft/mock-data`
|
||||
- [ ] Types importable from `@nextcraft/types`
|
||||
- [ ] 4 route groups with layouts
|
||||
- [ ] Dark mode toggle works
|
||||
- [ ] Role switcher navigates between surfaces
|
||||
- [ ] Responsive at 375px, 768px, 1280px
|
||||
|
||||
---
|
||||
|
||||
## Phase 2: Learner Surface UI
|
||||
|
||||
**Requirements:** REQ-006, REQ-007, REQ-008, REQ-009, REQ-010, REQ-011, REQ-012
|
||||
**Persona:** frontend-engineer
|
||||
**Goal:** All 7 learner pages render with mock data; navigation works; responsive
|
||||
|
||||
### Wave 1: Core learner pages
|
||||
|
||||
#### Task 2-1-01: Landing page
|
||||
- **Persona:** frontend-engineer
|
||||
- **Files:** `apps/web/app/(learner)/page.tsx`, `apps/web/components/learner/hero.tsx`, `apps/web/components/learner/how-it-works.tsx`, `apps/web/components/learner/program-highlights.tsx`, `apps/web/components/learner/testimonials.tsx`
|
||||
- **Action:** Build landing page with hero section (headline, subheadline, CTA buttons), how-it-works section (Byte→Build→Demonstrate→Defend visual flow), program highlights (3-4 featured competency stacks), testimonials mockup (3 cards with avatar, quote, name, role), CTA to program catalog.
|
||||
- **Verify:** Landing page renders with all sections; CTA links to /catalog
|
||||
- **Done:** Landing page complete
|
||||
|
||||
#### Task 2-1-02: Program catalog
|
||||
- **Persona:** frontend-engineer
|
||||
- **Files:** `apps/web/app/(learner)/catalog/page.tsx`, `apps/web/components/learner/stack-card.tsx`
|
||||
- **Action:** Build program catalog page. Grid of 5 competency stack cards. Each card: stack name, role description, competency count, estimated duration, microcredential count, "Explore" button linking to stack detail.
|
||||
- **Verify:** 5 stack cards render with mock data; clicking "Explore" navigates to stack detail
|
||||
- **Done:** Catalog page complete
|
||||
|
||||
#### Task 2-1-03: Competency stack view
|
||||
- **Persona:** frontend-engineer
|
||||
- **Files:** `apps/web/app/(learner)/catalog/[stackId]/page.tsx`, `apps/web/components/learner/competency-list.tsx`, `apps/web/components/learner/competency-item.tsx`, `apps/web/components/learner/microcredential-badge.tsx`
|
||||
- **Action:** Build competency stack detail page. Header with stack name, role, description. List of 12-18 competencies. Each competency: name, description, status (locked/available/in-progress/mastered), microcredential badge, progress bar. Clicking a competency navigates to byte tutorial viewer.
|
||||
- **Verify:** Competencies render with correct status indicators; microcredential badges display
|
||||
- **Done:** Stack detail page complete
|
||||
|
||||
#### Task 2-1-04: Learner dashboard
|
||||
- **Persona:** frontend-engineer
|
||||
- **Files:** `apps/web/app/(learner)/dashboard/page.tsx`, `apps/web/components/learner/dashboard/active-competencies.tsx`, `apps/web/components/learner/dashboard/progress-graph.tsx`, `apps/web/components/learner/dashboard/recent-artifacts.tsx`, `apps/web/components/learner/dashboard/upcoming-defenses.tsx`, `apps/web/components/learner/dashboard/ai-tutor-chat.tsx`, `apps/web/components/learner/dashboard/milestone-tracker.tsx`
|
||||
- **Action:** Build learner dashboard. Active competencies panel (current stack, progress). Progress graph (recharts area chart showing mastery over time). Recent artifacts (cards with artifact name, type, date). Upcoming defenses (list with competency name, date, status). AI tutor chat mockup (chat interface with pre-scripted responses, message input). Milestone tracker (progress through stack).
|
||||
- **Verify:** Dashboard renders all panels; AI tutor chat displays scripted responses on "send"
|
||||
- **Done:** Dashboard complete
|
||||
|
||||
### Wave 2: Detail views
|
||||
|
||||
#### Task 2-2-01: Byte tutorial viewer
|
||||
- **Persona:** frontend-engineer
|
||||
- **Files:** `apps/web/app/(learner)/learn/[competencyId]/page.tsx`, `apps/web/components/learner/byte-viewer/concept-panel.tsx`, `apps/web/components/learner/byte-viewer/worked-example.tsx`, `apps/web/components/learner/byte-viewer/viewer-tabs.tsx`
|
||||
- **Action:** Build byte tutorial viewer. Layout: left panel (concept text, 3-7 minute read), right panel (worked example with code/design/simulation viewer mockup). Tabbed viewer (code, design, simulation). Navigation to build sandbox.
|
||||
- **Verify:** Tutorial viewer renders with concept and example panels; tabs switch
|
||||
- **Done:** Byte tutorial viewer complete
|
||||
|
||||
#### Task 2-2-02: Build sandbox mockup
|
||||
- **Persona:** frontend-engineer
|
||||
- **Files:** `apps/web/app/(learner)/build/[competencyId]/page.tsx`, `apps/web/components/learner/sandbox/toolbar.tsx`, `apps/web/components/learner/sandbox/file-explorer.tsx`, `apps/web/components/learner/sandbox/editor-area.tsx`, `apps/web/components/learner/sandbox/telemetry-sidebar.tsx`
|
||||
- **Action:** Build sandbox mockup IDE UI. Layout: top toolbar (run, save, submit buttons), left sidebar (file explorer tree), center (code editor area with syntax-highlighted mock code), right sidebar (telemetry — process capture indicators showing commits, keystrokes, time spent). No real code execution.
|
||||
- **Verify:** Sandbox UI renders with all panels; toolbar buttons are interactive (non-functional)
|
||||
- **Done:** Build sandbox mockup complete
|
||||
|
||||
#### Task 2-2-03: Assessment/defense mockup
|
||||
- **Persona:** frontend-engineer
|
||||
- **Files:** `apps/web/app/(learner)/defend/[competencyId]/page.tsx`, `apps/web/components/learner/assessment/rubric-display.tsx`, `apps/web/components/learner/assessment/ai-reviewer-panel.tsx`, `apps/web/components/learner/assessment/oral-defense.tsx`, `apps/web/components/learner/assessment/process-trace.tsx`, `apps/web/components/learner/assessment/artifact-viewer.tsx`
|
||||
- **Action:** Build assessment/defense mockup. Layout: top (artifact viewer — submitted work preview), left (rubric display — competency criteria with checkmarks), right (AI reviewer panel — assessment results), bottom (oral defense interface — mic button mockup, waveform animation, transcript area). Process trace timeline (showing build steps with timestamps).
|
||||
- **Verify:** Assessment mockup renders all panels; mic button has hover state; timeline displays mock events
|
||||
- **Done:** Assessment/defense mockup complete
|
||||
|
||||
### Must-Haves (Phase 2)
|
||||
- [ ] Landing page renders with hero, how-it-works, highlights, testimonials, CTA
|
||||
- [ ] Program catalog shows 5 competency stack cards
|
||||
- [ ] Competency stack view shows 12-18 competencies with status and badges
|
||||
- [ ] Learner dashboard shows all 6 panels including AI tutor chat mockup
|
||||
- [ ] Byte tutorial viewer renders with concept and worked example panels
|
||||
- [ ] Build sandbox mockup renders with toolbar, file explorer, editor, telemetry
|
||||
- [ ] Assessment mockup renders with rubric, AI reviewer, oral defense, process trace
|
||||
- [ ] All pages responsive at 375px, 768px, 1280px
|
||||
- [ ] Navigation between all learner pages works
|
||||
|
||||
---
|
||||
|
||||
## Phase 3: Marketplace Surface UI
|
||||
|
||||
**Requirements:** REQ-013, REQ-014, REQ-015, REQ-016, REQ-017
|
||||
**Persona:** frontend-engineer
|
||||
**Goal:** All 5 marketplace pages render with mock data; search/filter interactive
|
||||
|
||||
### Wave 1: Job board + search
|
||||
|
||||
#### Task 3-1-01: Job board listing
|
||||
- **Persona:** frontend-engineer
|
||||
- **Files:** `apps/web/app/(marketplace)/page.tsx`, `apps/web/components/marketplace/job-card.tsx`, `apps/web/components/marketplace/job-listing-grid.tsx`
|
||||
- **Action:** Build job board listing page. Layout: left sidebar (filters), main area (grid of job cards). Each job card: job title, company name, logo, location, remote badge, salary range, match score (percentage badge), required skills (tag chips), posted date. 20+ mock job listings.
|
||||
- **Verify:** 20+ job cards render; match scores display; skill tags show
|
||||
- **Done:** Job board listing complete
|
||||
|
||||
#### Task 3-1-02: Search/filter UI
|
||||
- **Persona:** frontend-engineer
|
||||
- **Files:** `apps/web/components/marketplace/filter-sidebar.tsx`, `apps/web/components/marketplace/search-bar.tsx`, `apps/web/components/marketplace/saved-searches.tsx`
|
||||
- **Action:** Build filter sidebar. Semantic search bar at top (with icon, placeholder text). Filters: skills (multi-select chips), seniority (dropdown), location (text input), remote toggle, salary range (min/max inputs). Saved searches mockup section. Client-side filtering of mock jobs using useState.
|
||||
- **Verify:** Typing in search filters jobs; selecting skill filters jobs; toggling remote filters jobs
|
||||
- **Done:** Search/filter UI functional with client-side filtering
|
||||
|
||||
### Wave 2: Detail pages
|
||||
|
||||
#### Task 3-2-01: Job detail page
|
||||
- **Persona:** frontend-engineer
|
||||
- **Files:** `apps/web/app/(marketplace)/jobs/[jobId]/page.tsx`, `apps/web/components/marketplace/job-detail.tsx`, `apps/web/components/marketplace/skills-breakdown.tsx`, `apps/web/components/marketplace/related-jobs.tsx`
|
||||
- **Action:** Build job detail page. Layout: header (job title, company, location, salary, apply button), body (full description, required competencies list, AI-matched skills breakdown with match percentages), sidebar (employer info card, related jobs list).
|
||||
- **Verify:** Job detail renders with all sections; apply button is interactive (non-functional)
|
||||
- **Done:** Job detail page complete
|
||||
|
||||
#### Task 3-2-02: Employer profile
|
||||
- **Persona:** frontend-engineer
|
||||
- **Files:** `apps/web/app/(marketplace)/employers/[employerId]/page.tsx`, `apps/web/components/marketplace/employer-header.tsx`, `apps/web/components/marketplace/employer-openings.tsx`, `apps/web/components/marketplace/employer-culture.tsx`
|
||||
- **Action:** Build employer profile page. Header: logo, company name, tagline, industry, size, location, social links. Body: about section, culture section (mock photos grid), open positions list (job cards).
|
||||
- **Verify:** Employer profile renders with all sections; social links are clickable (mock URLs)
|
||||
- **Done:** Employer profile complete
|
||||
|
||||
#### Task 3-2-03: Pricing page
|
||||
- **Persona:** frontend-engineer
|
||||
- **Files:** `apps/web/app/(marketplace)/pricing/page.tsx`, `apps/web/components/marketplace/pricing-card.tsx`, `apps/web/components/marketplace/feature-comparison.tsx`
|
||||
- **Action:** Build pricing page. Three pricing cards: Job Posting (single — $49, bundle — $399 for 10, enterprise — custom). Talent Access plans (starter, pro, enterprise). Feature comparison table. CTA buttons on each plan.
|
||||
- **Verify:** Pricing page renders with 3 tiers and comparison table; responsive
|
||||
- **Done:** Pricing page complete
|
||||
|
||||
### Must-Haves (Phase 3)
|
||||
- [ ] Job board shows 20+ mock job listings with match scores
|
||||
- [ ] Search bar filters jobs client-side
|
||||
- [ ] Filter sidebar filters by skills, seniority, remote, salary
|
||||
- [ ] Job detail page shows full description, competencies, skills breakdown
|
||||
- [ ] Employer profile shows company info, culture, open positions
|
||||
- [ ] Pricing page shows 3 tiers with feature comparison
|
||||
- [ ] All pages responsive at 375px, 768px, 1280px
|
||||
|
||||
---
|
||||
|
||||
## Phase 4: Employer Dashboard UI
|
||||
|
||||
**Requirements:** REQ-018, REQ-019, REQ-020, REQ-021
|
||||
**Persona:** frontend-engineer
|
||||
**Goal:** All 4 employer dashboard pages render with mock data; charts display
|
||||
|
||||
### Wave 1: Dashboard + talent search
|
||||
|
||||
#### Task 4-1-01: Employer dashboard overview
|
||||
- **Persona:** frontend-engineer
|
||||
- **Files:** `apps/web/app/(employer)/page.tsx`, `apps/web/components/employer/overview/metric-cards.tsx`, `apps/web/components/employer/overview/applicant-pipeline.tsx`, `apps/web/components/employer/overview/talent-matches.tsx`, `apps/web/components/employer/overview/analytics-charts.tsx`
|
||||
- **Action:** Build employer dashboard overview. Top row: 4 metric cards (active postings, total applicants, talent matches, placement rate). Middle: applicant pipeline (kanban-style columns: applied, screening, interview, offer, hired). Right: talent matches (list of matched candidates with match score). Bottom: analytics charts (recharts — bar chart for postings over time, donut chart for applicant sources, line chart for placement trends).
|
||||
- **Verify:** Dashboard renders with metric cards, pipeline, matches, and 3 chart types
|
||||
- **Done:** Employer dashboard overview complete
|
||||
|
||||
#### Task 4-1-02: Talent search
|
||||
- **Persona:** frontend-engineer
|
||||
- **Files:** `apps/web/app/(employer)/talent/page.tsx`, `apps/web/components/employer/talent/candidate-card.tsx`, `apps/web/components/employer/talent/talent-filters.tsx`
|
||||
- **Action:** Build talent search page. Layout: top (search bar + AI-matched filters), main (grid of candidate cards). Each candidate card: avatar, name, headline (competency stack + level), microcredential badges (top 3), artifact count, defense score, match percentage, "View Profile" button. 15+ mock candidates. Client-side filtering.
|
||||
- **Verify:** 15+ candidate cards render; filters work client-side; clicking "View Profile" navigates to candidate profile
|
||||
- **Done:** Talent search complete
|
||||
|
||||
### Wave 2: Detail + management
|
||||
|
||||
#### Task 4-2-01: Candidate profile view
|
||||
- **Persona:** frontend-engineer
|
||||
- **Files:** `apps/web/app/(employer)/talent/[candidateId]/page.tsx`, `apps/web/components/employer/talent-profile/artifact-gallery.tsx`, `apps/web/components/employer/talent-profile/process-trace-summary.tsx`, `apps/web/components/employer/talent-profile/defense-transcripts.tsx`, `apps/web/components/employer/talent-profile/competency-mini-graph.tsx`, `apps/web/components/employer/talent-profile/microcredential-verification.tsx`
|
||||
- **Action:** Build candidate profile view. Header: avatar, name, headline, match score, contact button. Body sections: artifact gallery (grid of project artifacts with thumbnails), process trace summary (timeline of build steps), oral defense transcripts (accordion of defense sessions with Q&A), competency mini-graph (react-flow visualization of candidate's competencies), microcredential verification (list of earned credentials with verification badges).
|
||||
- **Verify:** All profile sections render; defense transcripts accordion expands; mini-graph renders
|
||||
- **Done:** Candidate profile complete
|
||||
|
||||
#### Task 4-2-02: Posting management
|
||||
- **Persona:** frontend-engineer
|
||||
- **Files:** `apps/web/app/(employer)/postings/page.tsx`, `apps/web/components/employer/postings/posting-list.tsx`, `apps/web/components/employer/postings/posting-form.tsx`, `apps/web/components/employer/postings/applicant-list.tsx`
|
||||
- **Action:** Build posting management page. Layout: left (list of job postings with status badges: active, draft, expired), right (selected posting detail or create/edit form). Form fields: title, description, required competencies (multi-select), seniority, salary range, location, remote toggle. Applicant list per posting (table with name, applied date, status, match score). "Create New Posting" button opens form.
|
||||
- **Verify:** Posting list renders; form is interactive (inputs work, non-functional submit); applicant list displays
|
||||
- **Done:** Posting management complete
|
||||
|
||||
### Must-Haves (Phase 4)
|
||||
- [ ] Dashboard overview shows 4 metric cards, applicant pipeline, 3 charts
|
||||
- [ ] Talent search shows 15+ candidate cards with filters
|
||||
- [ ] Candidate profile shows artifact gallery, process trace, defense transcripts, mini-graph, credentials
|
||||
- [ ] Posting management shows posting list, create/edit form, applicant list
|
||||
- [ ] All pages responsive at 375px, 768px, 1280px
|
||||
|
||||
---
|
||||
|
||||
## Phase 5: Admin Surface UI
|
||||
|
||||
**Requirements:** REQ-022, REQ-023, REQ-024, REQ-025
|
||||
**Persona:** frontend-engineer
|
||||
**Goal:** All 4 admin pages render; competency graph viewer interactive
|
||||
|
||||
### Wave 1: Overview + learner management
|
||||
|
||||
#### Task 5-1-01: Admin overview
|
||||
- **Persona:** frontend-engineer
|
||||
- **Files:** `apps/web/app/(admin)/page.tsx`, `apps/web/components/admin/overview/platform-metrics.tsx`, `apps/web/components/admin/overview/activity-feed.tsx`, `apps/web/components/admin/overview/system-health.tsx`
|
||||
- **Action:** Build admin overview. Top: platform metric cards (total learners, total employers, placements, completion rate, NPS). Middle: activity feed (timeline of recent platform events — new registrations, completions, job postings, placements). Right: system health mockup (status indicators for services, uptime bars, error rates).
|
||||
- **Verify:** Admin overview renders with metrics, activity feed, system health
|
||||
- **Done:** Admin overview complete
|
||||
|
||||
#### Task 5-1-02: Learner management
|
||||
- **Persona:** frontend-engineer
|
||||
- **Files:** `apps/web/app/(admin)/learners/page.tsx`, `apps/web/components/admin/learners/learner-table.tsx`, `apps/web/components/admin/learners/learner-detail.tsx`
|
||||
- **Action:** Build learner management page. Layout: searchable learner table (columns: name, email, stack, progress %, status, joined date). Search and filter (by stack, status). Clicking a learner opens detail panel (progress tracking, competency completion, credential issuance log, recent activity).
|
||||
- **Verify:** Learner table renders with mock data; search filters; detail panel opens on click
|
||||
- **Done:** Learner management complete
|
||||
|
||||
### Wave 2: Graph viewer + moderation
|
||||
|
||||
#### Task 5-2-01: Competency graph viewer
|
||||
- **Persona:** frontend-engineer
|
||||
- **Files:** `apps/web/app/(admin)/graph/page.tsx`, `apps/web/components/admin/graph/competency-graph.tsx`, `apps/web/components/admin/graph/node-detail.tsx`
|
||||
- **Action:** Build competency graph viewer using @xyflow/react. Interactive node/edge graph showing competency stacks and their relationships. Nodes: competency stacks (colored by category) and individual competencies. Edges: prerequisite relationships. Node click opens detail panel (competency name, description, stack, prerequisites, learners mastering it). Controls: zoom, pan, fit-to-screen. Mock graph data.
|
||||
- **Verify:** Graph renders with nodes and edges; nodes are clickable; detail panel opens; zoom/pan works
|
||||
- **Done:** Competency graph viewer complete
|
||||
|
||||
#### Task 5-2-02: Marketplace moderation
|
||||
- **Persona:** frontend-engineer
|
||||
- **Files:** `apps/web/app/(admin)/moderation/page.tsx`, `apps/web/components/admin/moderation/review-queue.tsx`, `apps/web/components/admin/moderation/verification-queue.tsx`, `apps/web/components/admin/moderation/flagged-content.tsx`
|
||||
- **Action:** Build marketplace moderation page. Three tabs: Job Posting Review (queue of pending job postings with approve/reject buttons), Employer Verification (queue of employers awaiting identity verification), Flagged Content (list of reported content with reason, reporter, actions). All buttons non-functional but interactive (hover states, click feedback).
|
||||
- **Verify:** Moderation page renders with 3 tabs; queues display mock items; tab switching works
|
||||
- **Done:** Marketplace moderation complete
|
||||
|
||||
### Must-Haves (Phase 5)
|
||||
- [ ] Admin overview shows platform metrics, activity feed, system health
|
||||
- [ ] Learner management shows searchable table with detail panel
|
||||
- [ ] Competency graph viewer renders interactive graph with clickable nodes
|
||||
- [ ] Marketplace moderation shows 3 tabbed queues
|
||||
- [ ] All pages responsive at 375px, 768px, 1280px
|
||||
|
||||
---
|
||||
|
||||
## Phase 6: Polish + Integration
|
||||
|
||||
**Requirements:** REQ-026, REQ-027, REQ-028
|
||||
**Persona:** frontend-engineer, design-system-engineer
|
||||
**Goal:** Cross-surface consistency, dark mode everywhere, Storybook
|
||||
|
||||
### Wave 1: Navigation + consistency
|
||||
|
||||
#### Task 6-1-01: Cross-surface navigation polish
|
||||
- **Persona:** frontend-engineer
|
||||
- **Files:** `apps/web/components/navigation-shell.tsx` (update), `apps/web/components/role-switcher.tsx` (update), `apps/web/components/breadcrumbs.tsx`
|
||||
- **Action:** Polish cross-surface navigation. Role switcher dropdown with surface-specific sub-navigation. Breadcrumbs on all pages showing current location. Consistent header/footer across all 4 surfaces. Active nav link highlighting.
|
||||
- **Verify:** Breadcrumbs show on all pages; role switcher dropdown works; active links highlighted
|
||||
- **Done:** Cross-surface navigation polished
|
||||
|
||||
#### Task 6-1-02: Visual consistency audit
|
||||
- **Persona:** design-system-engineer
|
||||
- **Files:** `apps/web/app/globals.css` (update), `packages/ui/src/tokens/index.ts` (update if needed)
|
||||
- **Action:** Audit all surfaces for visual consistency. Check: typography scale (all text uses design tokens), color palette (no hardcoded colors), spacing system (all margins/padding use design tokens), dark mode (all pages support dark mode toggle), WCAG AA contrast (all text meets 4.5:1 ratio). Fix any inconsistencies found.
|
||||
- **Verify:** No hardcoded colors; dark mode works on all pages; contrast check passes
|
||||
- **Done:** Visual consistency audit complete
|
||||
|
||||
### Wave 2: Storybook
|
||||
|
||||
#### Task 6-2-01: Storybook setup
|
||||
- **Persona:** design-system-engineer
|
||||
- **Files:** `apps/web/.storybook/main.ts`, `apps/web/.storybook/preview.ts`, `packages/ui/src/primitives/*.stories.tsx` (one per primitive)
|
||||
- **Action:** Set up Storybook for the component library. Configure for Next.js + Tailwind. Create stories for all 12 primitives and key composites (JobCard, CandidateCard, CompetencyBadge, MetricCard). Each story: default, variants, sizes, dark mode.
|
||||
- **Verify:** `pnpm storybook` starts; all primitive stories render; dark mode toggle in Storybook
|
||||
- **Done:** Storybook documents all primitives + key composites
|
||||
|
||||
### Must-Haves (Phase 6)
|
||||
- [ ] Breadcrumbs on all pages
|
||||
- [ ] Role switcher dropdown with surface-specific nav
|
||||
- [ ] Active nav link highlighting
|
||||
- [ ] No hardcoded colors — all from design tokens
|
||||
- [ ] Dark mode works on all 4 surfaces
|
||||
- [ ] WCAG AA contrast passes
|
||||
- [ ] Storybook runs with all primitive stories
|
||||
|
||||
---
|
||||
|
||||
## MVP/UX Sections
|
||||
|
||||
### User-Facing Surface
|
||||
The primary user-facing surface is the **Nextcraft web application** at `localhost:3000` (dev) with 4 route groups:
|
||||
- `/` — Learner surface (landing, catalog, dashboard, learn, build, defend)
|
||||
- `/marketplace` — Marketplace surface (jobs, employers, pricing)
|
||||
- `/employer` — Employer dashboard (overview, talent, postings)
|
||||
- `/admin` — Admin surface (overview, learners, graph, moderation)
|
||||
|
||||
### Happy Path
|
||||
1. User visits landing page → sees hero, how-it-works (Byte→Build→Demonstrate→Defend), program highlights
|
||||
2. User clicks "Explore Programs" → program catalog shows 5 competency stacks
|
||||
3. User clicks "AI Orchestration Engineer" → competency stack view shows 15 competencies
|
||||
4. User clicks a competency → byte tutorial viewer shows concept + worked example
|
||||
5. User clicks "Start Building" → build sandbox mockup shows IDE UI with telemetry
|
||||
6. User clicks "Submit for Assessment" → assessment/defense mockup shows rubric, AI reviewer, oral defense interface
|
||||
7. User navigates to marketplace → job board shows AI-era job listings with match scores
|
||||
8. User searches/filters jobs → results update client-side
|
||||
9. User clicks a job → job detail page shows full description, required competencies, employer info
|
||||
10. User switches to employer dashboard → overview shows metrics, pipeline, charts
|
||||
11. User searches talent → candidate cards with microcredentials, defense scores
|
||||
12. User clicks a candidate → profile shows artifact gallery, process trace, defense transcripts
|
||||
13. User switches to admin → overview shows platform metrics, activity feed
|
||||
14. User opens competency graph viewer → interactive graph with clickable nodes
|
||||
|
||||
### UX Acceptance Criteria
|
||||
1. All 4 surfaces are accessible via the role switcher in the header
|
||||
2. Navigation is consistent across all surfaces (same header, footer, breadcrumb pattern)
|
||||
3. All pages are responsive at 375px (mobile), 768px (tablet), 1280px (desktop)
|
||||
4. Dark mode toggle works on all surfaces
|
||||
5. All interactive elements have hover states and click feedback
|
||||
6. Form inputs are non-functional but visually complete (placeholders, labels, validation states)
|
||||
7. Mock data is realistic and typed — no "lorem ipsum" or placeholder text
|
||||
8. All charts render correctly (recharts) with mock data
|
||||
9. Competency graph viewer is interactive (zoom, pan, click nodes)
|
||||
10. AI tutor chat displays pre-scripted responses on message "send"
|
||||
11. No console errors on any page
|
||||
12. `pnpm build` succeeds without warnings
|
||||
@@ -0,0 +1,102 @@
|
||||
# Nextcraft — PROJECT.md
|
||||
|
||||
## What This Is
|
||||
|
||||
Nextcraft is an AI-native outcome school where graduates prove what they can build — not what they can write. It credentials verifiable skill for a post-AI labor market, rejects legacy degree structures, and trains the workforce of tomorrow through hands-on competency stacks assessed entirely by AI tutors. The marketplace is the symbiotic second surface: employers meet AI-credentialed talent through an automated, algorithmically-matched job board that runs without human headcount.
|
||||
|
||||
**Single guiding outcome:** ≥1,000 learners placed in AI-orchestration roles via the Nextcraft marketplace within 36 months of launch, verified by CIRR-style third-party audit.
|
||||
|
||||
---
|
||||
|
||||
## Current Milestone: v0.1 — UI/UX Prototype
|
||||
|
||||
**Scope:** High-fidelity interactive prototype of all four Nextcraft surfaces with realistic mock data, navigation flows, responsive layouts, and a shared component library. No backend, no business logic, no database — everything static/mocked.
|
||||
|
||||
**Constraint:** MAJOR 0 until MVP is released. No business logic until the first milestone prototype is agreed upon by the founder.
|
||||
|
||||
**Tech stack:** TypeScript monorepo (pnpm/turborepo) with Next.js for all web surfaces. Python FastAPI AI services planned for later milestones (not in v0.1).
|
||||
|
||||
---
|
||||
|
||||
## Requirements (Validated)
|
||||
|
||||
The following requirements have been validated during specification and are locked for milestone v0.1:
|
||||
|
||||
1. Learner surface UI — landing page, program catalog, competency stack view, learner dashboard, byte tutorial viewer, build sandbox mockup, assessment/defense mockup
|
||||
2. Marketplace surface UI — job board listing, job detail page, employer profile, search/filter UI, job posting packages pricing page
|
||||
3. Employer dashboard UI — overview, talent search, candidate profile view, posting management
|
||||
4. Admin surface UI — overview, learner management, competency graph viewer, marketplace moderation
|
||||
5. Shared component library — design system, reusable UI primitives, surface-specific theming
|
||||
6. Responsive layout system — mobile, tablet, desktop breakpoints
|
||||
7. Mock data layer — typed, realistic data reflecting the vision (competency stacks, job listings, candidate profiles)
|
||||
8. Navigation/routing — cross-surface navigation, role-based route groups
|
||||
|
||||
## Requirements (Active — Future Milestones)
|
||||
|
||||
The following are deferred beyond v0.1 and will be activated in subsequent milestones:
|
||||
|
||||
- AI tutor agent architecture (Coach, Tutor, Lab, Assessor, Proctor, Mentor)
|
||||
- Competency graph engine and adaptive pathways
|
||||
- Assessment engine (process-trace grading, oral defense, per-learner variant tasks)
|
||||
- Sandbox fabric (sandboxed IDE, design tool, simulation)
|
||||
- Identity verification and age-gating logic (16+/18+)
|
||||
- Marketplace job aggregation pipeline (3M+ jobs from 120K companies)
|
||||
- AI-powered tagging, semantic vector search, company enrichment
|
||||
- AI resume parsing and job matching
|
||||
- SEO-optimized programmatic pages
|
||||
- Payment processing and subscription management
|
||||
- Human tutor marketplace (third-party course creation)
|
||||
- B2B employer network functionality
|
||||
- CIRR-style placement tracking and audit
|
||||
|
||||
## Requirements (Out of Scope — Per Vision Doctrine)
|
||||
|
||||
- Traditional accreditation — not sought, not pursued, not revisited
|
||||
- Under-16 learners — excluded; AI school floor is 16+
|
||||
- Marketplace for under-18 — excluded; marketplace is 18+ with verified identity
|
||||
- Human tutors in the core school — excluded; humans exist only in the open marketplace
|
||||
- Graded written exams without process trace — excluded
|
||||
- Legacy job titles in curriculum — excluded
|
||||
- Junk advertising — excluded
|
||||
|
||||
---
|
||||
|
||||
## Constraints
|
||||
|
||||
1. **MAJOR 0 until MVP** — all versions remain v0.x until the MVP is released and agreed upon by the founder
|
||||
2. **No business logic in v0.1** — pure UI/UX prototype with mock data only
|
||||
3. **High-fidelity interactive** — clickable navigation, realistic content, hover states, form inputs (non-functional), responsive breakpoints, loading states (mock)
|
||||
4. **All data mocked** — no real API calls, no database, no authentication logic
|
||||
5. **Shared design system** — all 4 surfaces use a unified component library with surface-specific theming via CSS variables
|
||||
6. **TypeScript monorepo** — pnpm workspaces + turborepo for build orchestration
|
||||
7. **Next.js App Router** — route groups for each surface: (learner), (marketplace), (employer), (admin)
|
||||
8. **Solo founder constraint** — Phase 1 is build-only with no headcount; the prototype must be producible by a solo developer with AI assistance
|
||||
9. **No traditional accreditation** — proprietary credential replaces degrees
|
||||
10. **AI-first architecture** — AI tutors are the primary human-facing layer (in future milestones)
|
||||
|
||||
---
|
||||
|
||||
## Key Decisions
|
||||
|
||||
| ID | Decision | Rationale | Outcome |
|
||||
|----|----------|-----------|---------|
|
||||
| D-001 | Milestone v0.1 = UI/UX prototype only, no business logic | Founder directive: validate UX before building backend. Prototype must be agreed upon before proceeding to business logic. | Scope locked to frontend surfaces with mock data |
|
||||
| D-002 | MAJOR 0 until MVP released | Founder directive: remain on v0.x until MVP is validated. Signals pre-release status. | All tags are v0.x.y until MVP agreement |
|
||||
| D-003 | TypeScript monorepo (pnpm/turborepo) + Next.js | Unified codebase for all 4 surfaces. Shared component library, types, mock data. Next.js App Router for route-based surface separation. Python AI services deferred to later milestones. | Monorepo structure with apps/web + packages/* |
|
||||
| D-004 | All 4 surfaces in v0.1 (Learner, Marketplace, Employer, Admin) | Founder selected all 4 surfaces for the prototype. Complete product visualization before any backend work. | 24 REQ-IDs covering all surfaces + shared infrastructure |
|
||||
| D-005 | High-fidelity interactive prototype | Founder selected high-fidelity over wireframes. Realistic mock data, navigation flows, responsive layouts, component library. No backend calls. | Clickable prototype with realistic content |
|
||||
| D-006 | Release forge = Gitea @ git.cloudinit.dev, owner=coreci, repo=nextcraft | Founder-provided Gitea instance for release management. Token stored in .ciagent/.env.secrets. | Ship workflow creates tags + releases on Gitea |
|
||||
| D-007 | Full autonomy for CIAgent pipeline | Founder selected full autonomy. No HITL after clarify. Auto-decide above confidence 0.60. Escalation hooks: deploy, delete_data, merge_to_main. | Rapid autonomous building with kill criteria |
|
||||
| D-008 | Shared component library in packages/ui/ | All surfaces share a unified design system with surface-specific theming via CSS variables. Promotes consistency and reduces duplication. | packages/ui, packages/mock-data, packages/types |
|
||||
| D-009 | AI tutor UI as chat interface mockup with pre-scripted responses | The learner surface includes an AI tutor chat UI mockup. No real AI backend — pre-scripted responses simulate the Coach and Tutor agents. | Mockup only in v0.1, real agents in future milestone |
|
||||
| D-010 | Age-gating represented as visual registration flow mockup | 16+/18+ age-gating shown as a UI flow with age verification step. No actual verification logic. | Visual mockup only |
|
||||
| D-011 | Competency graph viewer as interactive static visualization | Admin surface includes a competency graph viewer using react-flow or similar. Mock competency nodes and edges. No real graph data. | Static graph with mock data |
|
||||
| D-012 | Tech stack: TS monorepo + Python AI services (future) | v0.1 uses TS only. Python FastAPI microservices planned for AI tutor agents and assessment engine in later milestones. | v0.1: TS only. Future: TS + Python |
|
||||
|
||||
---
|
||||
|
||||
## Context
|
||||
|
||||
Nextcraft is being built by a solo founder using the CIAgent v0.7.0 autonomous pipeline. The vision document defines a 36-month, 3-phase roadmap to ≥1,000 placements. The first CIAgent milestone (v0.1) is intentionally scoped to UI/UX only — validating the product vision through interactive prototypes before any backend or business logic investment.
|
||||
|
||||
The four surfaces (Learner, Marketplace, Employer Dashboard, Admin) map directly to the four audiences in the vision: learners, employers, marketplace operators, and platform administrators. The prototype will demonstrate the complete user journey across all surfaces with realistic mock data reflecting the AI-era competency stacks, AI-orchestration job listings, and artifact+process trace+oral defense credential model.
|
||||
@@ -0,0 +1,154 @@
|
||||
# Nextcraft — REQUIREMENTS.md
|
||||
|
||||
## v0.1 Requirements (UI/UX Prototype)
|
||||
|
||||
### Infrastructure
|
||||
|
||||
| ID | Description | Priority | Phase | Status |
|
||||
|----|-------------|----------|-------|--------|
|
||||
| REQ-001 | Monorepo scaffolding: pnpm workspaces, turborepo, Next.js app, TypeScript config, ESLint, Prettier | critical | 1 | pending |
|
||||
| REQ-002 | Shared component library: design tokens, Button, Input, Card, Badge, Avatar, Dialog, Navigation, Table, Tabs, Progress, Tooltip, Skeleton, Toast | critical | 1 | pending |
|
||||
| REQ-003 | Mock data layer: typed mock data for competency stacks, job listings, candidate profiles, employers, learner progress | critical | 1 | pending |
|
||||
| REQ-004 | Routing and navigation: App Router route groups for (learner), (marketplace), (employer), (admin); shared layout components; cross-surface navigation | critical | 1 | pending |
|
||||
| REQ-005 | Responsive layout system: mobile, tablet, desktop breakpoints; container components; grid system | high | 1 | pending |
|
||||
|
||||
### Learner Surface
|
||||
|
||||
| ID | Description | Priority | Phase | Status |
|
||||
|----|-------------|----------|-------|--------|
|
||||
| REQ-006 | Landing page: hero, value proposition, program highlights, how-it-works (Byte→Build→Demonstrate→Defend), testimonials mockup, CTA to program catalog | critical | 2 | pending |
|
||||
| REQ-007 | Program catalog: grid of competency stacks (AI Orchestration Engineer, AI Safety & Governance Lead, Human-AI Product Designer, AI-Augmented Field Operator, Computational Sciences Practitioner); stack cards with role descriptions | critical | 2 | pending |
|
||||
| REQ-008 | Competency stack view: selected stack detail with 12-18 competencies listed, progress indicators, microcredential badges, mastery status | critical | 2 | pending |
|
||||
| REQ-009 | Learner dashboard: active competencies, progress graph, recent artifacts, upcoming defenses, AI tutor chat mockup, milestone tracker | critical | 2 | pending |
|
||||
| REQ-010 | Byte tutorial viewer: 3-7 minute micro-tutorial layout with concept panel, worked example panel, code/design/simulation viewer mockup | high | 2 | pending |
|
||||
| REQ-011 | Build sandbox mockup: sandboxed IDE/design tool/simulation UI mockup with toolbar, file explorer, editor area, telemetry sidebar (process capture indicators) | high | 2 | pending |
|
||||
| REQ-012 | Assessment/defense mockup: rubric display, AI reviewer panel, oral defense interface (voice/mic mockup), process trace timeline, artifact viewer | high | 2 | pending |
|
||||
|
||||
### Marketplace Surface
|
||||
|
||||
| ID | Description | Priority | Phase | Status |
|
||||
|----|-------------|----------|-------|--------|
|
||||
| REQ-013 | Job board listing: searchable grid of AI-era job listings, filter sidebar (skills, seniority, location, salary), result cards with match score | critical | 3 | pending |
|
||||
| REQ-014 | Job detail page: full job description, required competencies, employer info, application CTA, related jobs, AI-matched skills breakdown | critical | 3 | pending |
|
||||
| REQ-015 | Employer profile: company overview, logo, description, social links, open positions, company culture mockup | high | 3 | pending |
|
||||
| REQ-016 | Search/filter UI: semantic search bar, skill tags, category filters, seniority filter, remote/on-site toggle, saved searches mockup | critical | 3 | pending |
|
||||
| REQ-017 | Pricing page: job posting packages (single, bundle, enterprise), talent access plans, subscription tiers, feature comparison table | high | 3 | pending |
|
||||
|
||||
### Employer Dashboard
|
||||
|
||||
| ID | Description | Priority | Phase | Status |
|
||||
|----|-------------|----------|-------|--------|
|
||||
| REQ-018 | Employer dashboard overview: active postings, applicant pipeline, talent matches, analytics mockup (charts, placement stats) | critical | 4 | pending |
|
||||
| REQ-019 | Talent search: searchable candidate database with AI-matched filters, candidate cards showing competency stack, microcredentials, artifact count, defense score | critical | 4 | pending |
|
||||
| REQ-020 | Candidate profile view: full candidate profile with artifact gallery, process trace summary, oral defense transcripts, competency graph, microcredential verification | high | 4 | pending |
|
||||
| REQ-021 | Posting management: create/edit/delete job postings, posting status tracking, applicant list per posting, interview pipeline mockup | high | 4 | pending |
|
||||
|
||||
### Admin Surface
|
||||
|
||||
| ID | Description | Priority | Phase | Status |
|
||||
|----|-------------|----------|-------|--------|
|
||||
| REQ-022 | Admin overview: platform metrics (learners, employers, placements, completion rate, NPS), recent activity feed, system health mockup | critical | 5 | pending |
|
||||
| REQ-023 | Learner management: searchable learner table, learner detail view, progress tracking, competency completion status, credential issuance log | high | 5 | pending |
|
||||
| REQ-024 | Competency graph viewer: interactive visualization of competency stacks and their relationships, node/edge graph using react-flow, stack details on node click | high | 5 | pending |
|
||||
| REQ-025 | Marketplace moderation: job posting review queue, employer verification queue, flagged content, content moderation tools mockup | high | 5 | pending |
|
||||
|
||||
### Polish & Integration
|
||||
|
||||
| ID | Description | Priority | Phase | Status |
|
||||
|----|-------------|----------|-------|--------|
|
||||
| REQ-026 | Cross-surface navigation: role switcher (learner/employer/admin), breadcrumbs, consistent header/footer across all surfaces | critical | 6 | pending |
|
||||
| REQ-027 | Visual consistency audit: typography scale, color palette, spacing system, dark mode toggle, accessibility baseline (WCAG AA contrast) | high | 6 | pending |
|
||||
| REQ-028 | Component library finalization: Storybook setup, component documentation, prop tables, usage examples | medium | 6 | pending |
|
||||
|
||||
---
|
||||
|
||||
## v2 Requirements (Future Milestones — Deferred)
|
||||
|
||||
### AI Tutor Architecture
|
||||
|
||||
| ID | Description | Priority | Milestone | Status |
|
||||
|----|-------------|----------|-----------|--------|
|
||||
| REQ-F-001 | Coach agent: pacing, motivation, retrieval practice | high | v0.2+ | deferred |
|
||||
| REQ-F-002 | Tutor agent: concept delivery, Socratic questioning | high | v0.2+ | deferred |
|
||||
| REQ-F-003 | Lab agent: sandbox execution, in-flow feedback | high | v0.2+ | deferred |
|
||||
| REQ-F-004 | Assessor agent: rubric application to artifacts and defenses | high | v0.2+ | deferred |
|
||||
| REQ-F-005 | Proctor agent: identity, attention, integrity signals | high | v0.2+ | deferred |
|
||||
| REQ-F-006 | Mentor agent: long-horizon career narrative | medium | v0.2+ | deferred |
|
||||
|
||||
### Assessment Engine
|
||||
|
||||
| ID | Description | Priority | Milestone | Status |
|
||||
|----|-------------|----------|-----------|--------|
|
||||
| REQ-F-007 | Process-trace grading engine | high | v0.3+ | deferred |
|
||||
| REQ-F-008 | Per-learner variant task generation | high | v0.3+ | deferred |
|
||||
| REQ-F-009 | Oral/voice defense with AI examiner | high | v0.3+ | deferred |
|
||||
| REQ-F-010 | Live in-environment build with telemetry | high | v0.3+ | deferred |
|
||||
|
||||
### Marketplace Engine
|
||||
|
||||
| ID | Description | Priority | Milestone | Status |
|
||||
|----|-------------|----------|-----------|--------|
|
||||
| REQ-F-011 | AI job aggregation pipeline (3M+ jobs from 120K companies) | high | v0.4+ | deferred |
|
||||
| REQ-F-012 | AI-powered tagging (skills, categories, seniority) | high | v0.4+ | deferred |
|
||||
| REQ-F-013 | Semantic vector search for role matching | high | v0.4+ | deferred |
|
||||
| REQ-F-014 | AI company enrichment (logos, descriptions, social links) | medium | v0.4+ | deferred |
|
||||
| REQ-F-015 | AI resume parsing (profile auto-fill) | medium | v0.4+ | deferred |
|
||||
| REQ-F-016 | SEO-optimized programmatic pages | medium | v0.4+ | deferred |
|
||||
|
||||
### Platform Infrastructure
|
||||
|
||||
| ID | Description | Priority | Milestone | Status |
|
||||
|----|-------------|----------|-----------|--------|
|
||||
| REQ-F-017 | Identity verification and age-gating (16+/18+) | high | v0.2+ | deferred |
|
||||
| REQ-F-018 | Payment processing and subscription management | high | v0.3+ | deferred |
|
||||
| REQ-F-019 | Human tutor marketplace (third-party courses) | medium | v0.4+ | deferred |
|
||||
| REQ-F-020 | CIRR-style placement tracking and audit | medium | v0.5+ | deferred |
|
||||
|
||||
---
|
||||
|
||||
## Out of Scope (Per Vision Doctrine)
|
||||
|
||||
| Feature | Reason |
|
||||
|---------|--------|
|
||||
| Traditional accreditation | Not sought, not pursued, not revisited (Principle 4) |
|
||||
| Under-16 learners | COPPA avoidance; AI school floor is 16+ |
|
||||
| Marketplace for under-18 | Marketplace restricted to 18+ with verified identity |
|
||||
| Human tutors in core school | Humans exist only in open marketplace as third-party sellers |
|
||||
| Graded written exams without process trace | Trivially solvable by frontier AI; process-trace + oral defense more valid |
|
||||
| Legacy job titles in curriculum | Programs train for AI-era roles, not obsolete ones |
|
||||
| Junk advertising | Ad quality enforced algorithmically; relevant ads only |
|
||||
|
||||
---
|
||||
|
||||
## Traceability Matrix
|
||||
|
||||
| Requirement | Phase | Status |
|
||||
|-------------|-------|--------|
|
||||
| REQ-001 | 1 | pending |
|
||||
| REQ-002 | 1 | pending |
|
||||
| REQ-003 | 1 | pending |
|
||||
| REQ-004 | 1 | pending |
|
||||
| REQ-005 | 1 | pending |
|
||||
| REQ-006 | 2 | pending |
|
||||
| REQ-007 | 2 | pending |
|
||||
| REQ-008 | 2 | pending |
|
||||
| REQ-009 | 2 | pending |
|
||||
| REQ-010 | 2 | pending |
|
||||
| REQ-011 | 2 | pending |
|
||||
| REQ-012 | 2 | pending |
|
||||
| REQ-013 | 3 | pending |
|
||||
| REQ-014 | 3 | pending |
|
||||
| REQ-015 | 3 | pending |
|
||||
| REQ-016 | 3 | pending |
|
||||
| REQ-017 | 3 | pending |
|
||||
| REQ-018 | 4 | pending |
|
||||
| REQ-019 | 4 | pending |
|
||||
| REQ-020 | 4 | pending |
|
||||
| REQ-021 | 4 | pending |
|
||||
| REQ-022 | 5 | pending |
|
||||
| REQ-023 | 5 | pending |
|
||||
| REQ-024 | 5 | pending |
|
||||
| REQ-025 | 5 | pending |
|
||||
| REQ-026 | 6 | pending |
|
||||
| REQ-027 | 6 | pending |
|
||||
| REQ-028 | 6 | pending |
|
||||
@@ -0,0 +1,192 @@
|
||||
# Nextcraft — ROADMAP.md
|
||||
|
||||
## Overview
|
||||
|
||||
**Milestone v0.1** — UI/UX Prototype: High-fidelity interactive prototype of all four Nextcraft surfaces (Learner, Marketplace, Employer Dashboard, Admin) with realistic mock data, shared component library, responsive layouts, and navigation flows. No backend, no business logic.
|
||||
|
||||
**Milestone type:** Feature (includes new UI features)
|
||||
**Tag line:** v0.0.x (patches on the v0.0 line; milestone release as v0.1.0)
|
||||
**Branch:** milestone/v0.1-nextcraft-ui-prototype
|
||||
|
||||
---
|
||||
|
||||
## Phase List
|
||||
|
||||
| # | Name | Status | Depends On | Requirements | Success Criteria |
|
||||
|---|------|--------|------------|--------------|------------------|
|
||||
| 0 | Pre-execution | in_progress | — | — | Specification, clarify, research, plan complete; .ciagent/ files created |
|
||||
| 1 | Project scaffolding | not_started | 0 | REQ-001, REQ-002, REQ-003, REQ-004, REQ-005 | Monorepo builds; dev server starts; component library has all primitives; mock data typed; routing works between route groups |
|
||||
| 2 | Learner surface UI | not_started | 1 | REQ-006, REQ-007, REQ-008, REQ-009, REQ-010, REQ-011, REQ-012 | All 7 learner pages render with mock data; navigation between pages works; responsive at mobile/tablet/desktop |
|
||||
| 3 | Marketplace surface UI | not_started | 1 | REQ-013, REQ-014, REQ-015, REQ-016, REQ-017 | All 5 marketplace pages render with mock data; search/filter UI interactive (client-side); job board listing displays mock jobs |
|
||||
| 4 | Employer dashboard UI | not_started | 1 | REQ-018, REQ-019, REQ-020, REQ-021 | All 4 employer pages render with mock data; talent search displays mock candidates; candidate profile shows artifact gallery + process trace |
|
||||
| 5 | Admin surface UI | not_started | 1 | REQ-022, REQ-023, REQ-024, REQ-025 | All 4 admin pages render with mock data; competency graph viewer renders interactive graph; moderation queue displays mock flagged content |
|
||||
| 6 | Polish + integration | not_started | 2, 3, 4, 5 | REQ-026, REQ-027, REQ-028 | Cross-surface navigation works; visual consistency audit passes; dark mode toggle functional; Storybook documents all components |
|
||||
| 7 | Final review + ship | not_started | 6 | — | Code review clean; audit passes; milestone tagged v0.1.0; release created on Gitea |
|
||||
|
||||
---
|
||||
|
||||
## Phase Details
|
||||
|
||||
### Phase 0: Pre-execution
|
||||
|
||||
**Goal:** Establish project specification, clarify ambiguities, research tech stack, create detailed plans.
|
||||
|
||||
**Stages:** SPECIFY → CLARIFY → RESEARCH → PLAN → (GRILL optional) → SHIP
|
||||
|
||||
**Deliverables:**
|
||||
- .ciagent/config.json
|
||||
- .ciagent/PROJECT.md
|
||||
- .ciagent/REQUIREMENTS.md
|
||||
- .ciagent/ARCHITECTURE.md
|
||||
- .ciagent/ROADMAP.md
|
||||
- .ciagent/CHECKPOINT.json
|
||||
|
||||
**Success criteria:** All .ciagent/ files created; initial commit with ---ci--- block; phase 0 shipped as v0.0.1.
|
||||
|
||||
---
|
||||
|
||||
### Phase 1: Project Scaffolding
|
||||
|
||||
**Goal:** Set up the monorepo, component library, mock data layer, routing, and responsive system.
|
||||
|
||||
**Requirements:** REQ-001, REQ-002, REQ-003, REQ-004, REQ-005
|
||||
|
||||
**Key deliverables:**
|
||||
- pnpm-workspace.yaml + turbo.json + root package.json
|
||||
- apps/web Next.js app with App Router
|
||||
- packages/ui with design tokens + all primitives (Button, Input, Card, Badge, Avatar, Dialog, Tabs, Progress, Tooltip, Skeleton, Toast)
|
||||
- packages/mock-data with typed mock data for all domains
|
||||
- packages/types with shared TypeScript type definitions
|
||||
- Route groups: (learner), (marketplace), (employer), (admin)
|
||||
- Responsive layout system with breakpoints
|
||||
- Root layout with theme provider
|
||||
|
||||
**Success criteria:**
|
||||
- `pnpm dev` starts the Next.js dev server
|
||||
- `pnpm build` succeeds without errors
|
||||
- `pnpm typecheck` passes
|
||||
- All primitive components exist and are importable
|
||||
- Mock data is typed and importable
|
||||
- Navigation between route groups works (even if pages are placeholders)
|
||||
|
||||
---
|
||||
|
||||
### Phase 2: Learner Surface UI
|
||||
|
||||
**Goal:** Build all 7 learner surface pages with realistic mock data and interactive elements.
|
||||
|
||||
**Requirements:** REQ-006, REQ-007, REQ-008, REQ-009, REQ-010, REQ-011, REQ-012
|
||||
|
||||
**Key deliverables:**
|
||||
- Landing page: hero, value proposition, Byte→Build→Demonstrate→Defend flow, testimonials, CTA
|
||||
- Program catalog: 5 competency stack cards with role descriptions
|
||||
- Competency stack view: selected stack with 12-18 competencies, progress indicators, microcredential badges
|
||||
- Learner dashboard: active competencies, progress graph, recent artifacts, AI tutor chat mockup, milestones
|
||||
- Byte tutorial viewer: concept panel, worked example, code/design viewer mockup
|
||||
- Build sandbox mockup: IDE UI with toolbar, file explorer, editor area, telemetry sidebar
|
||||
- Assessment/defense mockup: rubric display, AI reviewer panel, oral defense interface, process trace timeline
|
||||
|
||||
**Success criteria:**
|
||||
- All 7 pages render with mock data
|
||||
- Navigation between pages works
|
||||
- AI tutor chat mockup displays pre-scripted responses
|
||||
- Responsive at mobile (375px), tablet (768px), desktop (1280px)
|
||||
- Hover states and interactive elements functional
|
||||
|
||||
---
|
||||
|
||||
### Phase 3: Marketplace Surface UI
|
||||
|
||||
**Goal:** Build all 5 marketplace surface pages with job listings, search, and pricing.
|
||||
|
||||
**Requirements:** REQ-013, REQ-014, REQ-015, REQ-016, REQ-017
|
||||
|
||||
**Key deliverables:**
|
||||
- Job board listing: searchable grid of mock AI-era jobs, filter sidebar, match score cards
|
||||
- Job detail page: full description, required competencies, employer info, AI-matched skills
|
||||
- Employer profile: company overview, logo, open positions, culture mockup
|
||||
- Search/filter UI: semantic search bar, skill tags, filters (seniority, remote, salary), saved searches
|
||||
- Pricing page: job posting packages, talent access plans, feature comparison table
|
||||
|
||||
**Success criteria:**
|
||||
- All 5 pages render with mock data
|
||||
- Filter sidebar interactive (client-side filtering of mock jobs)
|
||||
- Job cards display match scores and skill tags
|
||||
- Pricing table is responsive and readable
|
||||
|
||||
---
|
||||
|
||||
### Phase 4: Employer Dashboard UI
|
||||
|
||||
**Goal:** Build all 4 employer dashboard pages for talent search and posting management.
|
||||
|
||||
**Requirements:** REQ-018, REQ-019, REQ-020, REQ-021
|
||||
|
||||
**Key deliverables:**
|
||||
- Dashboard overview: active postings, applicant pipeline, talent matches, analytics charts
|
||||
- Talent search: searchable candidate database with AI-matched filters, candidate cards
|
||||
- Candidate profile: artifact gallery, process trace summary, defense transcripts, competency graph, microcredentials
|
||||
- Posting management: create/edit/delete job postings, status tracking, applicant list, interview pipeline
|
||||
|
||||
**Success criteria:**
|
||||
- All 4 pages render with mock data
|
||||
- Analytics charts display mock metrics (bar/line/donut charts)
|
||||
- Candidate cards show competency stacks, microcredentials, defense scores
|
||||
- Posting management form inputs are interactive (non-functional submit)
|
||||
|
||||
---
|
||||
|
||||
### Phase 5: Admin Surface UI
|
||||
|
||||
**Goal:** Build all 4 admin surface pages including the interactive competency graph viewer.
|
||||
|
||||
**Requirements:** REQ-022, REQ-023, REQ-024, REQ-025
|
||||
|
||||
**Key deliverables:**
|
||||
- Admin overview: platform metrics (learners, employers, placements, completion rate, NPS), activity feed, system health
|
||||
- Learner management: searchable learner table, detail view, progress tracking, credential log
|
||||
- Competency graph viewer: interactive node/edge graph using react-flow, competency stack nodes, dependency edges
|
||||
- Marketplace moderation: job posting review queue, employer verification queue, flagged content, moderation tools
|
||||
|
||||
**Success criteria:**
|
||||
- All 4 pages render with mock data
|
||||
- Competency graph viewer renders an interactive graph with clickable nodes
|
||||
- Admin table supports sorting and filtering (client-side, mock data)
|
||||
- Moderation queue displays mock flagged items with approve/reject buttons (non-functional)
|
||||
|
||||
---
|
||||
|
||||
### Phase 6: Polish + Integration
|
||||
|
||||
**Goal:** Ensure cross-surface consistency, responsive quality, and component library documentation.
|
||||
|
||||
**Requirements:** REQ-026, REQ-027, REQ-028
|
||||
|
||||
**Key deliverables:**
|
||||
- Cross-surface navigation: role switcher (learner/employer/admin), breadcrumbs, consistent header/footer
|
||||
- Visual consistency: typography scale, color palette, spacing system, dark mode toggle, WCAG AA contrast
|
||||
- Storybook: component documentation, prop tables, usage examples for all primitives and composites
|
||||
|
||||
**Success criteria:**
|
||||
- Role switcher navigates between surfaces
|
||||
- Dark mode toggle works across all surfaces
|
||||
- All pages pass WCAG AA contrast checks
|
||||
- Storybook runs and documents all components
|
||||
- No visual inconsistencies between surfaces
|
||||
|
||||
---
|
||||
|
||||
### Phase 7: Final Review + Ship
|
||||
|
||||
**Goal:** Code review, audit, milestone release.
|
||||
|
||||
**Key deliverables:**
|
||||
- Multi-persona code review (correctness, testing, security, performance, maintainability)
|
||||
- Project health audit (reconstruction test, .ciagent/ file discipline, branch hygiene, commit discipline)
|
||||
- Milestone ship: merge milestone → main, tag v0.1.0, create Gitea release
|
||||
|
||||
**Success criteria:**
|
||||
- Code review: P0 fixes applied, P1+ documented
|
||||
- Audit: all checks pass, project state reconstructable from git log
|
||||
- Ship: v0.1.0 tagged, milestone branch merged to main, Gitea release created
|
||||
- All 28 requirements marked complete
|
||||
@@ -0,0 +1,54 @@
|
||||
{
|
||||
"version": "0.7.0",
|
||||
"autonomy": {
|
||||
"level": "full",
|
||||
"decision_confidence_threshold": 0.6,
|
||||
"escalation_hooks": ["deploy", "delete_data", "merge_to_main"],
|
||||
"max_revision_iterations": 3,
|
||||
"clarify_budget": 10
|
||||
},
|
||||
"release": {
|
||||
"forge": "gitea",
|
||||
"base_url": "https://git.cloudinit.dev",
|
||||
"owner": "coreci",
|
||||
"repo": "nextcraft"
|
||||
},
|
||||
"secrets": {
|
||||
"scopes": ["gitea"],
|
||||
"env_files": [".env", ".env.secrets", ".env.*"]
|
||||
},
|
||||
"ship": {
|
||||
"per_phase": true,
|
||||
"allow_skip": false,
|
||||
"release_blocking": false,
|
||||
"max_release_retries": 3
|
||||
},
|
||||
"verification": {
|
||||
"bdd_default": false
|
||||
},
|
||||
"personas": {
|
||||
"enabled": true,
|
||||
"territory_enforcement": "warn"
|
||||
},
|
||||
"parallelization": {
|
||||
"enabled": false,
|
||||
"max_concurrent_agents": 1
|
||||
},
|
||||
"ideation": {
|
||||
"max_ideas": 20,
|
||||
"categories": ["security", "quality", "architecture", "coverage", "improvement", "spec", "chaos", "bdd"]
|
||||
},
|
||||
"security": {
|
||||
"bash_allowlist": {
|
||||
"blocked_env_vars": ["GITEA_TOKEN", "GITHUB_TOKEN", "GITLAB_TOKEN"]
|
||||
}
|
||||
},
|
||||
"projects": [],
|
||||
"active_project": null,
|
||||
"milestone": {
|
||||
"version": "v0.1",
|
||||
"name": "nextcraft-ui-prototype",
|
||||
"type": "feature",
|
||||
"branch": "milestone/v0.1-nextcraft-ui-prototype"
|
||||
}
|
||||
}
|
||||
+42
@@ -0,0 +1,42 @@
|
||||
# Environment files — never commit credentials
|
||||
.env
|
||||
.env.secrets
|
||||
.env.*
|
||||
!.env.example
|
||||
|
||||
# CIAgent secrets
|
||||
.ciagent/.env.secrets
|
||||
|
||||
# Dependencies
|
||||
node_modules/
|
||||
__pycache__/
|
||||
*.pyc
|
||||
.venv/
|
||||
venv/
|
||||
|
||||
# Build artifacts
|
||||
dist/
|
||||
/build/
|
||||
.next/
|
||||
.turbo/
|
||||
*.tsbuildinfo
|
||||
|
||||
# OS files
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
|
||||
# IDE
|
||||
.idea/
|
||||
.vscode/
|
||||
*.swp
|
||||
*.swo
|
||||
|
||||
# Logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# Test coverage
|
||||
coverage/
|
||||
.nyc_output/
|
||||
@@ -0,0 +1,17 @@
|
||||
import { CompetencyGraph } from '../../../../components/admin/competency-graph';
|
||||
|
||||
export default function CompetencyGraphPage() {
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
<header className="flex flex-col gap-1">
|
||||
<h1 className="text-2xl font-bold text-slate-900 dark:text-slate-100">
|
||||
Competency Graph
|
||||
</h1>
|
||||
<p className="text-sm text-slate-600 dark:text-slate-400">
|
||||
Visualize stack relationships and dependencies
|
||||
</p>
|
||||
</header>
|
||||
<CompetencyGraph />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
import { LearnerTable } from '../../../../components/admin/learner-table';
|
||||
import { adminLearners } from '@nextcraft/mock-data';
|
||||
|
||||
export default function LearnerManagementPage() {
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
<header className="flex flex-col gap-1">
|
||||
<h1 className="text-2xl font-bold text-slate-900 dark:text-slate-100">
|
||||
Learner Management
|
||||
</h1>
|
||||
<p className="text-sm text-slate-600 dark:text-slate-400">
|
||||
Track and manage learner progress
|
||||
</p>
|
||||
</header>
|
||||
<LearnerTable learners={adminLearners} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
import { ModerationTabs } from '../../../../components/admin/moderation-tabs';
|
||||
|
||||
export default function MarketplaceModerationPage() {
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
<header className="flex flex-col gap-1">
|
||||
<h1 className="text-2xl font-bold text-slate-900 dark:text-slate-100">
|
||||
Marketplace Moderation
|
||||
</h1>
|
||||
<p className="text-sm text-slate-600 dark:text-slate-400">
|
||||
Review and manage marketplace content
|
||||
</p>
|
||||
</header>
|
||||
<ModerationTabs />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,244 @@
|
||||
import {
|
||||
Activity,
|
||||
AlertTriangle,
|
||||
Briefcase,
|
||||
Building2,
|
||||
CheckCircle,
|
||||
Clock,
|
||||
Cpu,
|
||||
Database,
|
||||
GraduationCap,
|
||||
Server,
|
||||
ThumbsUp,
|
||||
Users,
|
||||
} from 'lucide-react';
|
||||
import type { LucideIcon } from 'lucide-react';
|
||||
import { Card, CardBody, CardHeader } from '@nextcraft/ui';
|
||||
import {
|
||||
activityFeed,
|
||||
platformMetrics,
|
||||
serviceHealth,
|
||||
systemStats,
|
||||
uptimeBars,
|
||||
} from '@nextcraft/mock-data';
|
||||
|
||||
const ICONS: Record<string, LucideIcon> = {
|
||||
Users,
|
||||
Building2,
|
||||
Briefcase,
|
||||
GraduationCap,
|
||||
ThumbsUp,
|
||||
Activity,
|
||||
Server,
|
||||
Database,
|
||||
Cpu,
|
||||
};
|
||||
|
||||
const TONE_CLASSES: Record<string, string> = {
|
||||
indigo: 'bg-indigo-100 text-indigo-700 dark:bg-indigo-900/40 dark:text-indigo-300',
|
||||
emerald: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300',
|
||||
amber: 'bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300',
|
||||
rose: 'bg-rose-100 text-rose-700 dark:bg-rose-900/40 dark:text-rose-300',
|
||||
cyan: 'bg-cyan-100 text-cyan-700 dark:bg-cyan-900/40 dark:text-cyan-300',
|
||||
violet: 'bg-violet-100 text-violet-700 dark:bg-violet-900/40 dark:text-violet-300',
|
||||
};
|
||||
|
||||
function statusDot(status: string): string {
|
||||
if (status === 'operational') return 'bg-emerald-500';
|
||||
if (status === 'degraded') return 'bg-amber-500';
|
||||
return 'bg-rose-500';
|
||||
}
|
||||
|
||||
function statusLabel(status: string): string {
|
||||
if (status === 'operational') return 'Operational';
|
||||
if (status === 'degraded') return 'Degraded';
|
||||
return 'Down';
|
||||
}
|
||||
|
||||
export default function AdminOverviewPage() {
|
||||
return (
|
||||
<div className="flex flex-col gap-8">
|
||||
{/* Page header */}
|
||||
<header className="flex flex-col gap-1">
|
||||
<h1 className="text-2xl font-bold text-slate-900 dark:text-slate-100">
|
||||
Admin Dashboard
|
||||
</h1>
|
||||
<p className="text-sm text-slate-600 dark:text-slate-400">
|
||||
Platform overview
|
||||
</p>
|
||||
</header>
|
||||
|
||||
{/* Metric cards */}
|
||||
<section
|
||||
aria-label="Platform metrics"
|
||||
className="grid grid-cols-2 gap-4 md:grid-cols-3 xl:grid-cols-5"
|
||||
>
|
||||
{platformMetrics.map((m) => {
|
||||
const Icon = ICONS[m.icon] ?? Activity;
|
||||
const positive = m.trendPct >= 0;
|
||||
return (
|
||||
<Card key={m.id}>
|
||||
<CardBody className="flex flex-col gap-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<span
|
||||
className={`inline-flex h-9 w-9 items-center justify-center rounded-full ${TONE_CLASSES[m.tone]}`}
|
||||
aria-hidden
|
||||
>
|
||||
<Icon className="h-4 w-4" />
|
||||
</span>
|
||||
<span
|
||||
className={`text-xs font-medium ${positive ? 'text-emerald-600 dark:text-emerald-400' : 'text-rose-600 dark:text-rose-400'}`}
|
||||
>
|
||||
{positive ? '+' : ''}
|
||||
{m.trendPct}%
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs font-medium uppercase tracking-wide text-slate-500 dark:text-slate-400">
|
||||
{m.label}
|
||||
</p>
|
||||
<p className="mt-0.5 text-2xl font-bold text-slate-900 dark:text-slate-100">
|
||||
{m.value.toLocaleString()}
|
||||
{m.suffix}
|
||||
</p>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</section>
|
||||
|
||||
{/* Activity + System health */}
|
||||
<section className="grid grid-cols-1 gap-6 lg:grid-cols-3">
|
||||
{/* Activity feed — 2/3 width */}
|
||||
<div className="lg:col-span-2">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-2">
|
||||
<Activity className="h-4 w-4 text-primary-600" aria-hidden />
|
||||
<h2 className="text-base font-semibold text-slate-900 dark:text-slate-100">
|
||||
Activity Feed
|
||||
</h2>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardBody className="p-0">
|
||||
<ol className="flex flex-col">
|
||||
{activityFeed.map((evt, i) => {
|
||||
const Icon = ICONS[evt.icon] ?? Activity;
|
||||
const last = i === activityFeed.length - 1;
|
||||
return (
|
||||
<li
|
||||
key={evt.id}
|
||||
className={`flex items-start gap-3 px-6 py-3 ${last ? '' : 'border-b border-slate-100 dark:border-slate-800'}`}
|
||||
>
|
||||
<span
|
||||
className={`mt-0.5 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full ${TONE_CLASSES[evt.tone]}`}
|
||||
aria-hidden
|
||||
>
|
||||
<Icon className="h-4 w-4" />
|
||||
</span>
|
||||
<div className="flex flex-1 flex-col gap-0.5">
|
||||
<p className="text-sm text-slate-700 dark:text-slate-200">
|
||||
{evt.message}
|
||||
</p>
|
||||
<span className="flex items-center gap-1 text-xs text-slate-500 dark:text-slate-400">
|
||||
<Clock className="h-3 w-3" aria-hidden />
|
||||
{evt.relativeTime}
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ol>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* System health — 1/3 width */}
|
||||
<div>
|
||||
<Card className="h-full">
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-2">
|
||||
<Server className="h-4 w-4 text-primary-600" aria-hidden />
|
||||
<h2 className="text-base font-semibold text-slate-900 dark:text-slate-100">
|
||||
System Health
|
||||
</h2>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardBody className="flex flex-col gap-5">
|
||||
<ul className="flex flex-col gap-2.5">
|
||||
{serviceHealth.map((svc) => (
|
||||
<li
|
||||
key={svc.id}
|
||||
className="flex items-center justify-between gap-2"
|
||||
>
|
||||
<span className="text-sm text-slate-700 dark:text-slate-200">
|
||||
{svc.name}
|
||||
</span>
|
||||
<span className="flex items-center gap-2">
|
||||
<span
|
||||
className={`h-2.5 w-2.5 rounded-full ${statusDot(svc.status)}`}
|
||||
aria-hidden
|
||||
/>
|
||||
<span
|
||||
className={`text-xs font-medium ${svc.status === 'operational' ? 'text-emerald-600 dark:text-emerald-400' : svc.status === 'degraded' ? 'text-amber-600 dark:text-amber-400' : 'text-rose-600 dark:text-rose-400'}`}
|
||||
>
|
||||
{statusLabel(svc.status)}
|
||||
</span>
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">
|
||||
Uptime (30d)
|
||||
</h3>
|
||||
<span className="text-xs font-medium text-slate-600 dark:text-slate-300">
|
||||
99.96%
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex h-8 items-end gap-0.5" aria-hidden>
|
||||
{uptimeBars.map((u, idx) => {
|
||||
const h = Math.max(20, Math.round((u - 99.8) * 100 * 4));
|
||||
const degraded = u < 99.95;
|
||||
return (
|
||||
<span
|
||||
key={idx}
|
||||
className={`flex-1 rounded-sm ${degraded ? 'bg-amber-400' : 'bg-emerald-400'}`}
|
||||
style={{ height: `${Math.min(100, h)}%` }}
|
||||
title={`${u.toFixed(2)}%`}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3 border-t border-slate-200 pt-4 dark:border-slate-800">
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<span className="text-xs text-slate-500 dark:text-slate-400">
|
||||
Error Rate
|
||||
</span>
|
||||
<span className="flex items-center gap-1 text-sm font-semibold text-slate-900 dark:text-slate-100">
|
||||
<AlertTriangle className="h-3.5 w-3.5 text-amber-500" aria-hidden />
|
||||
{systemStats.errorRate}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<span className="text-xs text-slate-500 dark:text-slate-400">
|
||||
Avg Response Time
|
||||
</span>
|
||||
<span className="flex items-center gap-1 text-sm font-semibold text-slate-900 dark:text-slate-100">
|
||||
<CheckCircle className="h-3.5 w-3.5 text-emerald-500" aria-hidden />
|
||||
{systemStats.avgResponseMs}ms
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
import type { ReactNode } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { Shield } from 'lucide-react';
|
||||
|
||||
const LINKS = [
|
||||
{ label: 'Overview', href: '/admin' },
|
||||
{ label: 'Learners', href: '/admin/learners' },
|
||||
{ label: 'Competency Graph', href: '/admin/graph' },
|
||||
{ label: 'Moderation', href: '/admin/moderation' },
|
||||
];
|
||||
|
||||
export default function AdminLayout({ children }: { children: ReactNode }) {
|
||||
return (
|
||||
<div className="mx-auto flex max-w-7xl gap-6 px-4 py-8 sm:px-6">
|
||||
<aside className="hidden w-56 shrink-0 md:block">
|
||||
<div className="mb-4 flex items-center gap-2 text-sm font-semibold text-slate-500 dark:text-slate-400">
|
||||
<Shield className="h-4 w-4 text-rose-600" />
|
||||
Admin surface
|
||||
</div>
|
||||
<nav className="flex flex-col gap-1">
|
||||
{LINKS.map((l) => (
|
||||
<Link
|
||||
key={l.href}
|
||||
href={l.href}
|
||||
className="rounded-md px-3 py-2 text-sm font-medium text-slate-700 hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-slate-800"
|
||||
>
|
||||
{l.label}
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
</aside>
|
||||
<div className="flex-1">{children}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,234 @@
|
||||
import Link from 'next/link';
|
||||
import {
|
||||
Briefcase,
|
||||
Users,
|
||||
TrendingUp,
|
||||
Target,
|
||||
ArrowRight,
|
||||
} from 'lucide-react';
|
||||
import { Badge, Card, CardBody, Avatar } from '@nextcraft/ui';
|
||||
import { candidates, employers } from '@nextcraft/mock-data';
|
||||
import { AnalyticsCharts } from '../../../components/employer/analytics-charts';
|
||||
import { matchBadgeClasses, initials } from '../../../lib/format';
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
/* Mock pipeline + metric data */
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
const METRICS = [
|
||||
{ label: 'Active Postings', value: 7, trend: '+12%', icon: Briefcase, tone: 'primary' as const },
|
||||
{ label: 'Total Applicants', value: 142, trend: '+24%', icon: Users, tone: 'accent' as const },
|
||||
{ label: 'Talent Matches', value: 28, trend: '+8%', icon: Target, tone: 'violet' as const },
|
||||
{ label: 'Placement Rate', value: '18%', trend: '+3%', icon: TrendingUp, tone: 'amber' as const },
|
||||
];
|
||||
|
||||
const TONE_CLASSES: Record<string, string> = {
|
||||
primary: 'bg-primary-100 text-primary-700 dark:bg-primary-900/40 dark:text-primary-300',
|
||||
accent: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300',
|
||||
violet: 'bg-violet-100 text-violet-700 dark:bg-violet-900/40 dark:text-violet-300',
|
||||
amber: 'bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300',
|
||||
};
|
||||
|
||||
interface PipelineStage {
|
||||
name: string;
|
||||
count: number;
|
||||
cards: Array<{ name: string; position: string; score: number }>;
|
||||
}
|
||||
|
||||
const PIPELINE: PipelineStage[] = [
|
||||
{
|
||||
name: 'Applied',
|
||||
count: 8,
|
||||
cards: [
|
||||
{ name: 'Maya Okonkwo', position: 'AI Orchestration Engineer', score: 96 },
|
||||
{ name: 'Devon Park', position: 'AI Safety Researcher', score: 91 },
|
||||
{ name: 'Priya Iyer', position: 'Human-AI Designer', score: 89 },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'Screening',
|
||||
count: 5,
|
||||
cards: [
|
||||
{ name: 'Tomás Vega', position: 'LLM App Developer', score: 93 },
|
||||
{ name: 'Sofia Marchetti', position: 'AI Governance Lead', score: 85 },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'Interview',
|
||||
count: 3,
|
||||
cards: [
|
||||
{ name: 'Liam Chen', position: 'Agent Reliability Eng', score: 90 },
|
||||
{ name: 'Yuki Tanaka', position: 'Evaluation Engineer', score: 86 },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'Offer',
|
||||
count: 2,
|
||||
cards: [{ name: 'Ingrid Solberg', position: 'AI Red Team Lead', score: 88 }],
|
||||
},
|
||||
{
|
||||
name: 'Hired',
|
||||
count: 1,
|
||||
cards: [{ name: 'Hana Lindqvist', position: 'Comp Biologist', score: 88 }],
|
||||
},
|
||||
];
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
/* Page */
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
export default function EmployerDashboardPage() {
|
||||
const employer = employers[0];
|
||||
const topMatches = [...candidates].sort((a, b) => b.matchScore - a.matchScore).slice(0, 5);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-8">
|
||||
{/* Header */}
|
||||
<header className="flex flex-col gap-2">
|
||||
<Badge variant="info">Employer Dashboard</Badge>
|
||||
<h1 className="text-3xl font-bold tracking-tight text-slate-900 dark:text-slate-100">
|
||||
Employer Dashboard
|
||||
</h1>
|
||||
<p className="text-slate-600 dark:text-slate-400">
|
||||
Welcome back, <span className="font-semibold text-slate-800 dark:text-slate-200">{employer.name}</span>.
|
||||
Here is your talent pipeline at a glance.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
{/* Metric cards */}
|
||||
<section className="grid grid-cols-2 gap-4 lg:grid-cols-4">
|
||||
{METRICS.map((m) => {
|
||||
const Icon = m.icon;
|
||||
return (
|
||||
<Card key={m.label}>
|
||||
<CardBody className="flex flex-col gap-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<span
|
||||
className={`inline-flex h-10 w-10 items-center justify-center rounded-full ${TONE_CLASSES[m.tone]}`}
|
||||
>
|
||||
<Icon className="h-5 w-5" />
|
||||
</span>
|
||||
<span className="text-xs font-medium text-emerald-600 dark:text-emerald-400">
|
||||
{m.trend}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<span className="text-2xl font-bold text-slate-900 dark:text-slate-100">
|
||||
{m.value}
|
||||
</span>
|
||||
<span className="text-sm text-slate-500 dark:text-slate-400">{m.label}</span>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</section>
|
||||
|
||||
{/* Middle row — pipeline + talent matches */}
|
||||
<section className="grid grid-cols-1 gap-6 lg:grid-cols-3">
|
||||
{/* Applicant pipeline — 2/3 width */}
|
||||
<div className="lg:col-span-2">
|
||||
<div className="mb-3 flex items-center justify-between">
|
||||
<h2 className="text-lg font-semibold text-slate-900 dark:text-slate-100">
|
||||
Applicant Pipeline
|
||||
</h2>
|
||||
<span className="text-sm text-slate-500 dark:text-slate-400">
|
||||
{PIPELINE.reduce((s, c) => s + c.count, 0)} candidates in flight
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex gap-3 overflow-x-auto pb-2">
|
||||
{PIPELINE.map((stage) => (
|
||||
<div
|
||||
key={stage.name}
|
||||
className="flex w-56 shrink-0 flex-col gap-2 rounded-lg border border-slate-200 bg-slate-50 p-3 dark:border-slate-800 dark:bg-slate-900/60"
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-sm font-semibold text-slate-800 dark:text-slate-200">
|
||||
{stage.name}
|
||||
</h3>
|
||||
<span className="inline-flex h-6 min-w-6 items-center justify-center rounded-full bg-slate-200 px-1.5 text-xs font-medium text-slate-700 dark:bg-slate-700 dark:text-slate-200">
|
||||
{stage.count}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
{stage.cards.map((c) => (
|
||||
<div
|
||||
key={c.name}
|
||||
className="flex items-center gap-2 rounded-md border border-slate-200 bg-white p-2 dark:border-slate-800 dark:bg-slate-900"
|
||||
>
|
||||
<Avatar name={c.name} size="sm" />
|
||||
<div className="flex min-w-0 flex-1 flex-col">
|
||||
<span className="truncate text-xs font-medium text-slate-800 dark:text-slate-100">
|
||||
{c.name}
|
||||
</span>
|
||||
<span className="truncate text-xs text-slate-500 dark:text-slate-400">
|
||||
{c.position}
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
className={`inline-flex h-7 w-9 shrink-0 items-center justify-center rounded-full text-xs font-bold ring-2 ${matchBadgeClasses(
|
||||
c.score,
|
||||
)}`}
|
||||
>
|
||||
{c.score}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Talent matches — 1/3 width */}
|
||||
<div>
|
||||
<div className="mb-3 flex items-center justify-between">
|
||||
<h2 className="text-lg font-semibold text-slate-900 dark:text-slate-100">
|
||||
Talent Matches
|
||||
</h2>
|
||||
<Link
|
||||
href="/employer/talent"
|
||||
className="inline-flex items-center gap-1 text-sm font-medium text-primary-700 hover:underline dark:text-primary-300"
|
||||
>
|
||||
See all <ArrowRight className="h-3.5 w-3.5" />
|
||||
</Link>
|
||||
</div>
|
||||
<Card>
|
||||
<CardBody className="flex flex-col gap-2 p-3">
|
||||
{topMatches.map((cand) => (
|
||||
<Link
|
||||
key={cand.id}
|
||||
href={`/employer/talent/${cand.id}`}
|
||||
className="flex items-center gap-3 rounded-md p-2 transition-colors hover:bg-slate-50 dark:hover:bg-slate-800"
|
||||
>
|
||||
<Avatar name={cand.name} src={cand.avatar} size="md" />
|
||||
<div className="flex min-w-0 flex-1 flex-col">
|
||||
<span className="truncate text-sm font-medium text-slate-800 dark:text-slate-100">
|
||||
{cand.name}
|
||||
</span>
|
||||
<span className="truncate text-xs text-slate-500 dark:text-slate-400">
|
||||
{cand.headline}
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
className={`inline-flex h-8 w-12 shrink-0 items-center justify-center rounded-full text-xs font-bold ring-2 ${matchBadgeClasses(
|
||||
cand.matchScore,
|
||||
)}`}
|
||||
>
|
||||
{cand.matchScore}%
|
||||
</span>
|
||||
</Link>
|
||||
))}
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Analytics charts */}
|
||||
<section>
|
||||
<h2 className="mb-3 text-lg font-semibold text-slate-900 dark:text-slate-100">Analytics</h2>
|
||||
<AnalyticsCharts />
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
import { Badge } from '@nextcraft/ui';
|
||||
import { jobs } from '@nextcraft/mock-data';
|
||||
import { PostingManager } from '../../../../components/employer/posting-manager';
|
||||
|
||||
export default function PostingsPage() {
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
<header className="flex flex-col gap-2">
|
||||
<Badge variant="info">Posting Management</Badge>
|
||||
<h1 className="text-3xl font-bold tracking-tight text-slate-900 dark:text-slate-100">
|
||||
Posting Management
|
||||
</h1>
|
||||
<p className="max-w-2xl text-slate-600 dark:text-slate-400">
|
||||
Create, edit, and track your job postings. View the applicant pipeline for each posting
|
||||
and manage interview stages.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<PostingManager jobs={jobs} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,443 @@
|
||||
import Link from 'next/link';
|
||||
import { notFound } from 'next/navigation';
|
||||
import {
|
||||
ArrowLeft,
|
||||
CheckCircle,
|
||||
Clock,
|
||||
FileCode,
|
||||
Palette,
|
||||
Cpu,
|
||||
Mail,
|
||||
ShieldCheck,
|
||||
} from 'lucide-react';
|
||||
import { Avatar, Badge, Button, Card, CardBody } from '@nextcraft/ui';
|
||||
import { candidates, competencyStacks } from '@nextcraft/mock-data';
|
||||
import type { Artifact, ArtifactType } from '@nextcraft/types';
|
||||
import { matchBadgeClasses, initials } from '../../../../../lib/format';
|
||||
import { DefenseAccordion } from '../../../../../components/employer/defense-accordion';
|
||||
|
||||
interface PageProps {
|
||||
params: Promise<{ candidateId: string }>;
|
||||
}
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
/* Deterministic mock-data generators (per-candidate) */
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
function hashId(id: string): number {
|
||||
let h = 0;
|
||||
for (let i = 0; i < id.length; i++) h = (h * 31 + id.charCodeAt(i)) >>> 0;
|
||||
return h;
|
||||
}
|
||||
|
||||
function generateArtifacts(cand: { id: string; artifactCount: number; competencyStackId: string }): Artifact[] {
|
||||
const namesByStack: Record<string, Array<{ name: string; type: ArtifactType; desc: string }>> = {
|
||||
'stack-orchestration': [
|
||||
{ name: 'Multi-agent research assistant', type: 'code', desc: 'LangGraph assistant with eval harness for cited literature reviews.' },
|
||||
{ name: 'RAG retrieval quality dashboard', type: 'code', desc: 'Streamlit dashboard comparing chunking strategies across 800 eval queries.' },
|
||||
{ name: 'Agent topology diagram', type: 'design', desc: 'Plan-and-execute agent with reflection and tool-retrieval sub-graphs.' },
|
||||
{ name: 'Prompt regression suite', type: 'code', desc: 'Pytest suite of 320 prompt assertions with LLM-as-judge scoring.' },
|
||||
{ name: 'Token-cost alerting system', type: 'code', desc: 'Real-time cost monitoring across agent calls with Slack escalation.' },
|
||||
{ name: 'Function calling sandbox', type: 'simulation', desc: 'Sandboxed tool execution environment with retry + validation.' },
|
||||
],
|
||||
'stack-safety': [
|
||||
{ name: 'Red-team probe suite', type: 'code', desc: '1,200+ adversarial probes across three model families with scoring.' },
|
||||
{ name: 'Model card — internal Q&A agent', type: 'document', desc: 'Capabilities, limitations, intended use, and red-team findings.' },
|
||||
{ name: 'Bias audit dashboard', type: 'code', desc: 'Disparate-impact testing across demographics with visual report.' },
|
||||
{ name: 'Risk register template', type: 'document', desc: 'Risk taxonomy with severity and likelihood for 30+ deployed systems.' },
|
||||
{ name: 'Jailbreak defense prototype', type: 'code', desc: 'Instruction-hierarchy enforcement with indirect injection mitigation.' },
|
||||
],
|
||||
'stack-designer': [
|
||||
{ name: 'Transparency pattern library', type: 'design', desc: 'Confidence indicators, source attribution, and model limitation disclosure.' },
|
||||
{ name: 'Agentic interaction prototype', type: 'design', desc: 'Figma prototype for delegating, interrupting, and reviewing autonomous agents.' },
|
||||
{ name: 'Repair flow spec', type: 'document', desc: 'Multi-turn dialogue repair flows reducing escalations by 35%.' },
|
||||
{ name: 'Persona consistency framework', type: 'design', desc: 'Character design for AI assistants with contextual tone adaptation.' },
|
||||
{ name: 'Trust calibration study', type: 'document', desc: 'User mental model alignment research with over-trust mitigations.' },
|
||||
],
|
||||
'stack-operator': [
|
||||
{ name: 'Anomaly triage dashboard', type: 'code', desc: 'ML-based anomaly score visualization cutting false positives by 40%.' },
|
||||
{ name: 'Sensor calibration log', type: 'document', desc: 'Calibration schedule and drift-correction workflow for fleet sensors.' },
|
||||
{ name: 'Vision inspection tuning', type: 'simulation', desc: 'Threshold tuning for vision-based quality control station.' },
|
||||
{ name: 'Field data collection template', type: 'document', desc: 'Structured annotation workflow for high-quality dataset capture.' },
|
||||
],
|
||||
'stack-science': [
|
||||
{ name: 'Active-learning DFT toolkit', type: 'code', desc: 'Open-source toolkit for active-learning loops over DFT calculations.' },
|
||||
{ name: 'Phenotype prediction pipeline', type: 'code', desc: 'ML pipeline for drug discovery with reproducible Snakemake workflows.' },
|
||||
{ name: 'Wind forecast downscaling', type: 'simulation', desc: 'Physics-informed model improving 72-hour wind forecasts by 18%.' },
|
||||
{ name: 'Materials screening notebook', type: 'code', desc: 'Jupyter notebook for ML property prediction with active learning.' },
|
||||
{ name: 'Reproducible research container', type: 'document', desc: 'Containerized workflow with Nextflow and DOI assignment.' },
|
||||
],
|
||||
};
|
||||
|
||||
const pool = namesByStack[cand.competencyStackId] ?? namesByStack['stack-orchestration'];
|
||||
const offset = hashId(cand.id) % pool.length;
|
||||
const count = Math.min(cand.artifactCount, pool.length);
|
||||
const artifacts: Artifact[] = [];
|
||||
for (let i = 0; i < count; i++) {
|
||||
const item = pool[(offset + i) % pool.length];
|
||||
artifacts.push({
|
||||
id: `art-${cand.id}-${i}`,
|
||||
name: item.name,
|
||||
type: item.type,
|
||||
url: `https://example.com/artifacts/${cand.id}/${i}`,
|
||||
description: item.desc,
|
||||
createdAt: new Date(Date.UTC(2026, 7 - i, 20 - i * 3)).toISOString(),
|
||||
});
|
||||
}
|
||||
return artifacts;
|
||||
}
|
||||
|
||||
function generateProcessTrace(cand: { id: string }) {
|
||||
const offset = hashId(cand.id);
|
||||
const baseEvents = [
|
||||
{ action: 'Repository initialized', detail: 'Created project scaffold with README and license.' },
|
||||
{ action: 'First commit pushed', detail: 'Initial proof-of-concept with placeholder data.' },
|
||||
{ action: 'Evaluation harness added', detail: 'Wired up 50-question regression suite with LLM-as-judge.' },
|
||||
{ action: 'Peer review feedback', detail: 'Two reviewers flagged edge cases in retrieval fallback path.' },
|
||||
{ action: 'Iteration — fallback hardened', detail: 'Added retry + validation; eval score improved 12 points.' },
|
||||
{ action: 'Final submission', detail: 'Artifact submitted for oral defense scheduling.' },
|
||||
];
|
||||
return baseEvents.map((e, i) => ({
|
||||
timestamp: new Date(Date.UTC(2026, 6 + Math.floor(i / 2), (offset % 20) + i * 2)).toISOString(),
|
||||
...e,
|
||||
}));
|
||||
}
|
||||
|
||||
function generateDefenseSessions(cand: { id: string; competencyStackId: string; microcredentials: number }) {
|
||||
const stack = competencyStacks.find((s) => s.id === cand.competencyStackId);
|
||||
const mastered = (stack?.competencies ?? []).filter((c) => c.status === 'mastered' || c.status === 'in_progress');
|
||||
const offset = hashId(cand.id);
|
||||
const count = Math.min(cand.microcredentials, mastered.length, 3);
|
||||
const sessions = [];
|
||||
for (let i = 0; i < count; i++) {
|
||||
const comp = mastered[(offset + i) % mastered.length];
|
||||
const score = 82 + ((offset + i) % 12);
|
||||
sessions.push({
|
||||
id: `def-${cand.id}-${i}`,
|
||||
competencyName: comp.name,
|
||||
score,
|
||||
date: new Date(Date.UTC(2026, 5 + i, (offset % 24) + 1)).toISOString(),
|
||||
transcript: [
|
||||
{
|
||||
question: 'Walk us through the architecture of your artifact. Why did you choose this approach?',
|
||||
answer:
|
||||
'I chose a plan-and-execute topology because the task required multi-step retrieval with reflection. The plan node decomposes the query, sub-agents retrieve and draft in parallel, and a reflection node scores and routes for a second pass when below threshold.',
|
||||
},
|
||||
{
|
||||
question: 'What evaluation did you run, and what were the headline numbers?',
|
||||
answer:
|
||||
'I ran a 50-query regression suite scored by LLM-as-judge calibrated against a human panel (0.86 agreement). Baseline scored 71%; the reflection pass lifted it to 88% with a 14% latency cost, which stayed within budget.',
|
||||
},
|
||||
{
|
||||
question: 'Describe a failure mode you found and how you mitigated it.',
|
||||
answer:
|
||||
'Retrieval fallback returned stale context on schema changes. I added a freshness check + retry with a smaller context window, which reduced stale-grounded answers from 9% to under 2%.',
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
return sessions;
|
||||
}
|
||||
|
||||
function generateMicrocredentials(cand: { id: string; competencyStackId: string; microcredentials: number }) {
|
||||
const stack = competencyStacks.find((s) => s.id === cand.competencyStackId);
|
||||
const mastered = (stack?.competencies ?? []).filter((c) => c.status === 'mastered' || c.status === 'in_progress');
|
||||
const offset = hashId(cand.id);
|
||||
const count = Math.min(cand.microcredentials, mastered.length, 5);
|
||||
const items = [];
|
||||
for (let i = 0; i < count; i++) {
|
||||
const comp = mastered[(offset + i) % mastered.length];
|
||||
const score = 85 + ((offset + i) % 11);
|
||||
items.push({
|
||||
id: `mc-${cand.id}-${i}`,
|
||||
competencyName: comp.name,
|
||||
issuedAt: new Date(Date.UTC(2026, 5 + i, (offset % 24) + 1)).toISOString(),
|
||||
score,
|
||||
});
|
||||
}
|
||||
return items;
|
||||
}
|
||||
|
||||
function generateCompetencies(cand: { id: string; competencyStackId: string }) {
|
||||
const stack = competencyStacks.find((s) => s.id === cand.competencyStackId);
|
||||
const comps = stack?.competencies ?? [];
|
||||
const offset = hashId(cand.id);
|
||||
return comps.slice(0, 8).map((c, i) => {
|
||||
// Deterministically assign status biased toward mastered/in_progress for high-score candidates.
|
||||
const r = (offset + i) % 10;
|
||||
const status = r < 5 ? 'mastered' : r < 8 ? 'in_progress' : 'available';
|
||||
return { id: c.id, name: c.name, status: status as 'mastered' | 'in_progress' | 'available' };
|
||||
});
|
||||
}
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
/* Icon helpers */
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
function ArtifactTypeIcon({ type }: { type: ArtifactType }) {
|
||||
const cls = 'h-5 w-5';
|
||||
if (type === 'code') return <FileCode className={cls} />;
|
||||
if (type === 'design') return <Palette className={cls} />;
|
||||
if (type === 'simulation') return <Cpu className={cls} />;
|
||||
return <FileCode className={cls} />;
|
||||
}
|
||||
|
||||
const ARTIFACT_ICON_BG: Record<ArtifactType, string> = {
|
||||
code: 'bg-primary-100 text-primary-700 dark:bg-primary-900/40 dark:text-primary-300',
|
||||
design: 'bg-violet-100 text-violet-700 dark:bg-violet-900/40 dark:text-violet-300',
|
||||
simulation: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300',
|
||||
document: 'bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300',
|
||||
};
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
/* Page */
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
export default async function CandidateProfilePage({ params }: PageProps) {
|
||||
const { candidateId } = await params;
|
||||
const cand = candidates.find((c) => c.id === candidateId);
|
||||
if (!cand) notFound();
|
||||
|
||||
const stack = competencyStacks.find((s) => s.id === cand.competencyStackId);
|
||||
const artifacts = generateArtifacts(cand);
|
||||
const processTrace = generateProcessTrace(cand);
|
||||
const defenseSessions = generateDefenseSessions(cand);
|
||||
const microcredentials = generateMicrocredentials(cand);
|
||||
const competencies = generateCompetencies(cand);
|
||||
|
||||
const masteredCount = competencies.filter((c) => c.status === 'mastered').length;
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
{/* Back link */}
|
||||
<div>
|
||||
<Link
|
||||
href="/employer/talent"
|
||||
className="inline-flex items-center gap-1.5 text-sm font-medium text-slate-600 hover:text-slate-900 dark:text-slate-300 dark:hover:text-slate-100"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
Back to talent search
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Header */}
|
||||
<Card>
|
||||
<CardBody className="flex flex-col gap-4">
|
||||
<div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
|
||||
<div className="flex items-start gap-4">
|
||||
<Avatar name={cand.name} src={cand.avatar} size="lg" />
|
||||
<div className="flex flex-col gap-1">
|
||||
<h1 className="text-2xl font-bold text-slate-900 dark:text-slate-100">
|
||||
{cand.name}
|
||||
</h1>
|
||||
<p className="text-sm text-slate-600 dark:text-slate-400">{cand.headline}</p>
|
||||
<div className="mt-1 flex flex-wrap items-center gap-2">
|
||||
<Badge variant="info">{stack?.name ?? 'AI'}</Badge>
|
||||
<Badge variant="success">Verified</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex flex-col items-end">
|
||||
<span className="text-xs font-medium uppercase tracking-wide text-slate-500 dark:text-slate-400">
|
||||
Match Score
|
||||
</span>
|
||||
<span
|
||||
className={`inline-flex h-12 w-14 items-center justify-center rounded-full text-base font-bold ring-2 ${matchBadgeClasses(
|
||||
cand.matchScore,
|
||||
)}`}
|
||||
>
|
||||
{cand.matchScore}%
|
||||
</span>
|
||||
</div>
|
||||
<Button variant="primary" size="md" icon={<Mail className="h-4 w-4" />} type="button">
|
||||
Contact
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-sm leading-relaxed text-slate-600 dark:text-slate-400">{cand.bio}</p>
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
{/* Summary stats bar */}
|
||||
<div className="grid grid-cols-2 gap-4 md:grid-cols-4">
|
||||
<StatCard label="Artifacts" value={cand.artifactCount} icon={<FileCode className="h-4 w-4" />} />
|
||||
<StatCard label="Defense Score (avg)" value={cand.defenseScore} icon={<ShieldCheck className="h-4 w-4" />} />
|
||||
<StatCard label="Microcredentials" value={cand.microcredentials} icon={<CheckCircle className="h-4 w-4" />} />
|
||||
<StatCard label="Competencies Mastered" value={masteredCount} icon={<Cpu className="h-4 w-4" />} />
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
|
||||
{/* Artifact gallery */}
|
||||
<Card>
|
||||
<CardBody className="flex flex-col gap-4">
|
||||
<h2 className="text-lg font-semibold text-slate-900 dark:text-slate-100">
|
||||
Artifact Gallery
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
|
||||
{artifacts.map((art) => (
|
||||
<a
|
||||
key={art.id}
|
||||
href={art.url}
|
||||
className="flex flex-col gap-2 rounded-lg border border-slate-200 p-3 transition-colors hover:bg-slate-50 dark:border-slate-800 dark:hover:bg-slate-800"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<span
|
||||
className={`inline-flex h-8 w-8 items-center justify-center rounded-full ${ARTIFACT_ICON_BG[art.type]}`}
|
||||
>
|
||||
<ArtifactTypeIcon type={art.type} />
|
||||
</span>
|
||||
<span className="text-sm font-semibold text-slate-900 dark:text-slate-100">
|
||||
{art.name}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-xs leading-relaxed text-slate-600 dark:text-slate-400">
|
||||
{art.description}
|
||||
</p>
|
||||
<span className="text-xs text-slate-400">
|
||||
{new Date(art.createdAt).toLocaleDateString('en-US', {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
})}
|
||||
</span>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
{/* Process trace summary */}
|
||||
<Card>
|
||||
<CardBody className="flex flex-col gap-4">
|
||||
<h2 className="text-lg font-semibold text-slate-900 dark:text-slate-100">
|
||||
Process Trace Summary
|
||||
</h2>
|
||||
<ol className="relative flex flex-col gap-4 border-l border-slate-200 pl-6 dark:border-slate-800">
|
||||
{processTrace.map((step, i) => (
|
||||
<li key={i} className="relative">
|
||||
<span className="absolute -left-[1.6rem] flex h-5 w-5 items-center justify-center rounded-full bg-primary-100 ring-4 ring-white dark:bg-primary-900/40 dark:ring-slate-900">
|
||||
<span className="h-1.5 w-1.5 rounded-full bg-primary-600" />
|
||||
</span>
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-medium text-slate-900 dark:text-slate-100">
|
||||
{step.action}
|
||||
</span>
|
||||
<span className="inline-flex items-center gap-1 text-xs text-slate-400">
|
||||
<Clock className="h-3 w-3" />
|
||||
{new Date(step.timestamp).toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-xs text-slate-600 dark:text-slate-400">{step.detail}</p>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
{/* Oral defense transcripts */}
|
||||
<Card className="lg:col-span-2">
|
||||
<CardBody className="flex flex-col gap-4">
|
||||
<h2 className="text-lg font-semibold text-slate-900 dark:text-slate-100">
|
||||
Oral Defense Transcripts
|
||||
</h2>
|
||||
<p className="text-sm text-slate-600 dark:text-slate-400">
|
||||
Recorded Q&A from each verified oral defense session. Expand a session to read the
|
||||
transcript.
|
||||
</p>
|
||||
<DefenseAccordion sessions={defenseSessions} />
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
{/* Competency mini-graph */}
|
||||
<Card>
|
||||
<CardBody className="flex flex-col gap-4">
|
||||
<h2 className="text-lg font-semibold text-slate-900 dark:text-slate-100">
|
||||
Competency Progress
|
||||
</h2>
|
||||
<div className="flex flex-col gap-2">
|
||||
{competencies.map((c) => (
|
||||
<div
|
||||
key={c.id}
|
||||
className="flex items-center justify-between rounded-md border border-slate-200 p-2.5 dark:border-slate-800"
|
||||
>
|
||||
<span className="text-sm text-slate-800 dark:text-slate-200">{c.name}</span>
|
||||
{c.status === 'mastered' ? (
|
||||
<Badge variant="success">
|
||||
<CheckCircle className="h-3 w-3" /> Mastered
|
||||
</Badge>
|
||||
) : c.status === 'in_progress' ? (
|
||||
<Badge variant="warning">
|
||||
<Clock className="h-3 w-3" /> In Progress
|
||||
</Badge>
|
||||
) : (
|
||||
<Badge variant="default">Available</Badge>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
{/* Microcredential verification */}
|
||||
<Card>
|
||||
<CardBody className="flex flex-col gap-4">
|
||||
<h2 className="text-lg font-semibold text-slate-900 dark:text-slate-100">
|
||||
Microcredential Verification
|
||||
</h2>
|
||||
<div className="flex flex-col gap-2">
|
||||
{microcredentials.map((mc) => (
|
||||
<div
|
||||
key={mc.id}
|
||||
className="flex items-center justify-between rounded-md border border-slate-200 p-3 dark:border-slate-800"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<CheckCircle className="h-4 w-4 shrink-0 text-emerald-600 dark:text-emerald-400" />
|
||||
<div className="flex flex-col">
|
||||
<span className="text-sm font-medium text-slate-900 dark:text-slate-100">
|
||||
{mc.competencyName}
|
||||
</span>
|
||||
<span className="text-xs text-slate-500 dark:text-slate-400">
|
||||
Issued{' '}
|
||||
{new Date(mc.issuedAt).toLocaleDateString('en-US', {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-semibold text-slate-700 dark:text-slate-200">
|
||||
{mc.score}
|
||||
</span>
|
||||
<Badge variant="success">Verified</Badge>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function StatCard({ label, value, icon }: { label: string; value: number | string; icon: React.ReactNode }) {
|
||||
return (
|
||||
<div className="flex items-center gap-3 rounded-lg border border-slate-200 bg-white p-4 dark:border-slate-800 dark:bg-slate-900">
|
||||
<span className="inline-flex h-9 w-9 items-center justify-center rounded-full bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-300">
|
||||
{icon}
|
||||
</span>
|
||||
<div className="flex flex-col">
|
||||
<span className="text-xl font-bold text-slate-900 dark:text-slate-100">{value}</span>
|
||||
<span className="text-xs text-slate-500 dark:text-slate-400">{label}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
import { Badge } from '@nextcraft/ui';
|
||||
import { candidates } from '@nextcraft/mock-data';
|
||||
import { TalentSearch } from '../../../../components/employer/talent-search';
|
||||
|
||||
export default function TalentSearchPage() {
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
<header className="flex flex-col gap-2">
|
||||
<Badge variant="info">Talent Search</Badge>
|
||||
<h1 className="text-3xl font-bold tracking-tight text-slate-900 dark:text-slate-100">
|
||||
Talent Search
|
||||
</h1>
|
||||
<p className="max-w-2xl text-slate-600 dark:text-slate-400">
|
||||
AI-credentialed candidates with verified microcredentials, evidence portfolios, and oral
|
||||
defense scores. Filter by competency stack, defense score, and artifact count.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<TalentSearch candidates={candidates} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
import type { ReactNode } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { Building2 } from 'lucide-react';
|
||||
|
||||
const LINKS = [
|
||||
{ label: 'Overview', href: '/employer' },
|
||||
{ label: 'Talent search', href: '/employer/talent' },
|
||||
{ label: 'Postings', href: '/employer/postings' },
|
||||
];
|
||||
|
||||
export default function EmployerLayout({ children }: { children: ReactNode }) {
|
||||
return (
|
||||
<div className="mx-auto flex max-w-7xl gap-6 px-4 py-8 sm:px-6">
|
||||
<aside className="hidden w-56 shrink-0 md:block">
|
||||
<div className="mb-4 flex items-center gap-2 text-sm font-semibold text-slate-500 dark:text-slate-400">
|
||||
<Building2 className="h-4 w-4 text-primary-600" />
|
||||
Employer surface
|
||||
</div>
|
||||
<nav className="flex flex-col gap-1">
|
||||
{LINKS.map((l) => (
|
||||
<Link
|
||||
key={l.href}
|
||||
href={l.href}
|
||||
className="rounded-md px-3 py-2 text-sm font-medium text-slate-700 hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-slate-800"
|
||||
>
|
||||
{l.label}
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
</aside>
|
||||
<div className="flex-1">{children}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,295 @@
|
||||
import Link from 'next/link';
|
||||
import { notFound } from 'next/navigation';
|
||||
import {
|
||||
ArrowLeft,
|
||||
ArrowRight,
|
||||
Play,
|
||||
Save,
|
||||
Upload,
|
||||
Folder,
|
||||
FileText,
|
||||
Activity,
|
||||
} from 'lucide-react';
|
||||
import { Button } from '@nextcraft/ui';
|
||||
import { allCompetencies, competencyStacks } from '@nextcraft/mock-data';
|
||||
|
||||
interface FileEntry {
|
||||
label: string;
|
||||
children?: { label: string }[];
|
||||
}
|
||||
|
||||
const FILE_TREE: FileEntry[] = [
|
||||
{
|
||||
label: 'src/',
|
||||
children: [
|
||||
{ label: 'main.ts' },
|
||||
{ label: 'agent.ts' },
|
||||
{ label: 'tools.ts' },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'tests/',
|
||||
children: [{ label: 'agent.test.ts' }],
|
||||
},
|
||||
{ label: 'README.md' },
|
||||
];
|
||||
|
||||
const EDITOR_LINES = [
|
||||
{ n: 1, content: "import { ChatOpenAI } from '@langchain/openai';" },
|
||||
{ n: 2, content: "import { tool } from '@langchain/core/tools';" },
|
||||
{ n: 3, content: "import { z } from 'zod';" },
|
||||
{ n: 4, content: '' },
|
||||
{ n: 5, content: '// Define a typed tool for fetching the current weather' },
|
||||
{ n: 6, content: "const getWeather = tool(" },
|
||||
{ n: 7, content: ' async ({ city, units }) => {' },
|
||||
{ n: 8, content: ' const res = await fetch(`/api/weather?city=${city}&units=${units}`);' },
|
||||
{ n: 9, content: ' return res.json();' },
|
||||
{ n: 10, content: ' },' },
|
||||
{ n: 11, content: ' {' },
|
||||
{ n: 12, content: " name: 'get_weather'," },
|
||||
{ n: 13, content: " description: 'Fetch the current weather for a city'," },
|
||||
{ n: 14, content: ' schema: z.object({' },
|
||||
{ n: 15, content: " city: z.string().describe('City to fetch weather for')," },
|
||||
{ n: 16, content: " units: z.enum(['celsius', 'fahrenheit']).default('celsius')," },
|
||||
{ n: 17, content: ' }),' },
|
||||
{ n: 18, content: ' },' },
|
||||
{ n: 19, content: ');' },
|
||||
{ n: 20, content: '' },
|
||||
{ n: 21, content: 'export async function main(query: string) {' },
|
||||
{ n: 22, content: ' const model = new ChatOpenAI({ model: "gpt-4o-mini" });' },
|
||||
{ n: 23, content: ' const modelWithTools = model.bindTools([getWeather]);' },
|
||||
{ n: 24, content: ' const response = await modelWithTools.invoke(query);' },
|
||||
{ n: 25, content: ' return response.tool_calls;' },
|
||||
{ n: 26, content: '}' },
|
||||
];
|
||||
|
||||
const TELEMETRY_METRICS = [
|
||||
{ label: 'Commits', value: '7' },
|
||||
{ label: 'Keystrokes', value: '1,247' },
|
||||
{ label: 'Time spent', value: '23 min' },
|
||||
{ label: 'Build attempts', value: '3' },
|
||||
];
|
||||
|
||||
const TELEMETRY_EVENTS = [
|
||||
{ time: '14:02:11', action: 'File created: src/main.ts' },
|
||||
{ time: '14:09:48', action: 'First build attempt (failed)' },
|
||||
{ time: '14:12:30', action: 'Test suite passed (2/2)' },
|
||||
{ time: '14:18:05', action: 'Commit: scaffold agent entrypoint' },
|
||||
{ time: '14:21:42', action: 'Tool schema validated' },
|
||||
{ time: '14:25:17', action: 'Build attempt 2 (success)' },
|
||||
{ time: '14:28:03', action: 'Commit: implement tool calling' },
|
||||
];
|
||||
|
||||
function highlight(line: string): { text: string; cls: string }[] {
|
||||
// Very small token highlighter for the mock editor
|
||||
const tokens: { text: string; cls: string }[] = [];
|
||||
let i = 0;
|
||||
while (i < line.length) {
|
||||
// comment
|
||||
if (line.slice(i).startsWith('//')) {
|
||||
tokens.push({ text: line.slice(i), cls: 'text-slate-500' });
|
||||
break;
|
||||
}
|
||||
// string with backtick or single/double quote
|
||||
const ch = line[i];
|
||||
if (ch === '`' || ch === "'" || ch === '"') {
|
||||
const end = line.indexOf(ch, i + 1);
|
||||
if (end !== -1) {
|
||||
tokens.push({ text: line.slice(i, end + 1), cls: 'text-emerald-300' });
|
||||
i = end + 1;
|
||||
continue;
|
||||
}
|
||||
}
|
||||
// keyword
|
||||
const rest = line.slice(i);
|
||||
const kwMatch = rest.match(/^(import|from|export|async|function|const|return|await|new)/);
|
||||
if (kwMatch) {
|
||||
tokens.push({ text: kwMatch[0], cls: 'text-primary-300' });
|
||||
i += kwMatch[0].length;
|
||||
continue;
|
||||
}
|
||||
// default: consume one char
|
||||
tokens.push({ text: ch, cls: 'text-slate-200' });
|
||||
i += 1;
|
||||
}
|
||||
return tokens;
|
||||
}
|
||||
|
||||
export default async function BuildSandboxPage({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ competencyId: string }>;
|
||||
}) {
|
||||
const { competencyId } = await params;
|
||||
const competency = allCompetencies.find((c) => c.id === competencyId);
|
||||
if (!competency) notFound();
|
||||
const stack = competencyStacks.find((s) => s.id === competency.stackId);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4">
|
||||
<Link
|
||||
href={`/learn/${competency.id}`}
|
||||
className="inline-flex w-fit items-center gap-1 text-sm text-slate-500 hover:text-slate-800 dark:hover:text-slate-200"
|
||||
>
|
||||
<ArrowLeft className="h-3.5 w-3.5" />
|
||||
Back to Byte
|
||||
</Link>
|
||||
|
||||
{/* Toolbar */}
|
||||
<div className="flex flex-wrap items-center justify-between gap-3 rounded-lg border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-900">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="rounded-md bg-primary-100 px-2 py-0.5 text-xs font-semibold text-primary-700 dark:bg-primary-900/40 dark:text-primary-300">
|
||||
Sandbox
|
||||
</span>
|
||||
<span className="text-sm font-medium text-slate-800 dark:text-slate-100">
|
||||
{competency.name}
|
||||
</span>
|
||||
<span className="hidden text-xs text-slate-500 sm:inline dark:text-slate-400">
|
||||
{stack?.name}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex h-8 items-center gap-1.5 rounded-md bg-emerald-600 px-3 text-xs font-medium text-white transition-colors hover:bg-emerald-700"
|
||||
>
|
||||
<Play className="h-3.5 w-3.5" />
|
||||
Run
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex h-8 items-center gap-1.5 rounded-md border border-slate-300 px-3 text-xs font-medium text-slate-700 transition-colors hover:bg-slate-100 dark:border-slate-700 dark:text-slate-200 dark:hover:bg-slate-800"
|
||||
>
|
||||
<Save className="h-3.5 w-3.5" />
|
||||
Save
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex h-8 items-center gap-1.5 rounded-md border border-slate-300 px-3 text-xs font-medium text-slate-700 transition-colors hover:bg-slate-100 dark:border-slate-700 dark:text-slate-200 dark:hover:bg-slate-800"
|
||||
>
|
||||
<Upload className="h-3.5 w-3.5" />
|
||||
Submit
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* IDE layout */}
|
||||
<div className="grid grid-cols-1 gap-4 lg:grid-cols-[14rem_1fr_16rem]">
|
||||
{/* File explorer */}
|
||||
<aside className="rounded-lg border border-slate-200 bg-slate-50 p-3 dark:border-slate-800 dark:bg-slate-900">
|
||||
<h3 className="mb-2 text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">
|
||||
Explorer
|
||||
</h3>
|
||||
<ul className="space-y-1 text-sm">
|
||||
{FILE_TREE.map((node) =>
|
||||
node.children ? (
|
||||
<li key={node.label}>
|
||||
<div className="flex items-center gap-1.5 text-slate-700 dark:text-slate-200">
|
||||
<Folder className="h-3.5 w-3.5 text-amber-500" />
|
||||
{node.label}
|
||||
</div>
|
||||
<ul className="ml-4 mt-1 space-y-1">
|
||||
{node.children.map((child) => (
|
||||
<li
|
||||
key={child.label}
|
||||
className="flex items-center gap-1.5 text-slate-600 dark:text-slate-300"
|
||||
>
|
||||
<FileText className="h-3.5 w-3.5 text-slate-400" />
|
||||
{child.label}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</li>
|
||||
) : (
|
||||
<li
|
||||
key={node.label}
|
||||
className="flex items-center gap-1.5 text-slate-600 dark:text-slate-300"
|
||||
>
|
||||
<FileText className="h-3.5 w-3.5 text-slate-400" />
|
||||
{node.label}
|
||||
</li>
|
||||
),
|
||||
)}
|
||||
</ul>
|
||||
</aside>
|
||||
|
||||
{/* Editor */}
|
||||
<section className="overflow-hidden rounded-lg border border-slate-200 bg-slate-950 dark:border-slate-800">
|
||||
<div className="flex items-center gap-2 border-b border-slate-800 px-3 py-2 text-xs text-slate-400">
|
||||
<FileText className="h-3.5 w-3.5" />
|
||||
src/main.ts
|
||||
</div>
|
||||
<pre className="overflow-auto p-3 font-mono text-xs leading-relaxed">
|
||||
<code>
|
||||
{EDITOR_LINES.map((line) => (
|
||||
<div key={line.n} className="flex">
|
||||
<span className="mr-4 inline-block w-8 select-none text-right text-slate-600">
|
||||
{line.n}
|
||||
</span>
|
||||
<span className="flex-1 whitespace-pre">
|
||||
{line.content === '' ? (
|
||||
<span> </span>
|
||||
) : (
|
||||
highlight(line.content).map((t, idx) => (
|
||||
<span key={idx} className={t.cls}>
|
||||
{t.text}
|
||||
</span>
|
||||
))
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</code>
|
||||
</pre>
|
||||
</section>
|
||||
|
||||
{/* Telemetry */}
|
||||
<aside className="flex flex-col gap-3 rounded-lg border border-slate-200 bg-white p-3 dark:border-slate-800 dark:bg-slate-900">
|
||||
<div className="flex items-center gap-2">
|
||||
<Activity className="h-4 w-4 text-primary-600" />
|
||||
<h3 className="text-sm font-semibold text-slate-800 dark:text-slate-100">
|
||||
Process Capture
|
||||
</h3>
|
||||
</div>
|
||||
<dl className="grid grid-cols-2 gap-2">
|
||||
{TELEMETRY_METRICS.map((m) => (
|
||||
<div
|
||||
key={m.label}
|
||||
className="rounded-md border border-slate-200 bg-slate-50 p-2 text-center dark:border-slate-800 dark:bg-slate-900/50"
|
||||
>
|
||||
<dd className="text-lg font-semibold text-slate-900 dark:text-slate-100">
|
||||
{m.value}
|
||||
</dd>
|
||||
<dt className="text-[10px] uppercase tracking-wide text-slate-500 dark:text-slate-400">
|
||||
{m.label}
|
||||
</dt>
|
||||
</div>
|
||||
))}
|
||||
</dl>
|
||||
<div>
|
||||
<h4 className="mb-1 text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">
|
||||
Recent events
|
||||
</h4>
|
||||
<ul className="space-y-1.5 text-xs">
|
||||
{TELEMETRY_EVENTS.map((e, i) => (
|
||||
<li key={i} className="flex gap-2">
|
||||
<span className="font-mono text-slate-400">{e.time}</span>
|
||||
<span className="text-slate-700 dark:text-slate-300">{e.action}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
{/* Submit */}
|
||||
<div className="flex justify-end">
|
||||
<Link href={`/defend/${competency.id}`}>
|
||||
<Button iconRight={<ArrowRight className="h-4 w-4" />}>
|
||||
Submit for Assessment
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,166 @@
|
||||
import Link from 'next/link';
|
||||
import { notFound } from 'next/navigation';
|
||||
import {
|
||||
ArrowLeft,
|
||||
ArrowRight,
|
||||
Lock,
|
||||
Circle,
|
||||
Loader,
|
||||
CheckCircle,
|
||||
Award,
|
||||
Layers,
|
||||
} from 'lucide-react';
|
||||
import { Button, Card, CardBody, Badge } from '@nextcraft/ui';
|
||||
import { competencyStacks, learnerMicrocredentials } from '@nextcraft/mock-data';
|
||||
import type { Competency, CompetencyStatus } from '@nextcraft/types';
|
||||
|
||||
const STATUS_META: Record<
|
||||
CompetencyStatus,
|
||||
{ label: string; icon: typeof Lock; badgeClass: string }
|
||||
> = {
|
||||
locked: { label: 'Locked', icon: Lock, badgeClass: 'bg-slate-100 text-slate-500 dark:bg-slate-800 dark:text-slate-400' },
|
||||
available: { label: 'Available', icon: Circle, badgeClass: 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300' },
|
||||
in_progress: { label: 'In progress', icon: Loader, badgeClass: 'bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300' },
|
||||
mastered: { label: 'Mastered', icon: CheckCircle, badgeClass: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300' },
|
||||
};
|
||||
|
||||
const PROGRESS_BY_ID: Record<string, number> = {
|
||||
'stack-orchestration-c003': 45,
|
||||
'stack-orchestration-c008': 38,
|
||||
'stack-safety-c019': 52,
|
||||
'stack-safety-c023': 30,
|
||||
'stack-designer-c034': 60,
|
||||
'stack-designer-c037': 41,
|
||||
'stack-operator-c048': 28,
|
||||
'stack-operator-c053': 35,
|
||||
'stack-science-c063': 47,
|
||||
'stack-science-c066': 33,
|
||||
};
|
||||
|
||||
function isUnlocked(c: Competency): boolean {
|
||||
return c.status !== 'locked';
|
||||
}
|
||||
|
||||
export default async function StackViewPage({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ stackId: string }>;
|
||||
}) {
|
||||
const { stackId } = await params;
|
||||
const stack = competencyStacks.find((s) => s.id === stackId);
|
||||
if (!stack) notFound();
|
||||
|
||||
const masteredCount = stack.competencies.filter((c) => c.status === 'mastered').length;
|
||||
const inProgressCount = stack.competencies.filter((c) => c.status === 'in_progress').length;
|
||||
const mcByComp = new Map(learnerMicrocredentials.map((m) => [m.competencyId, m]));
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
{/* Back link */}
|
||||
<Link
|
||||
href="/catalog"
|
||||
className="inline-flex w-fit items-center gap-1 text-sm text-slate-500 hover:text-slate-800 dark:hover:text-slate-200"
|
||||
>
|
||||
<ArrowLeft className="h-3.5 w-3.5" />
|
||||
Back to catalog
|
||||
</Link>
|
||||
|
||||
{/* Header */}
|
||||
<header className="flex flex-col gap-3 border-l-4 pl-4"
|
||||
style={{ borderColor: 'var(--color-primary-500)' }}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Layers className="h-5 w-5 text-primary-600" />
|
||||
<h1 className="text-3xl font-bold tracking-tight text-slate-900 dark:text-slate-100">
|
||||
{stack.name}
|
||||
</h1>
|
||||
</div>
|
||||
<p className="max-w-2xl text-slate-600 dark:text-slate-400">{stack.description}</p>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<Badge variant="info">{stack.competencies.length} competencies</Badge>
|
||||
<Badge variant="success">{masteredCount} mastered</Badge>
|
||||
<Badge variant="warning">{inProgressCount} in progress</Badge>
|
||||
<span className="text-xs text-slate-500 dark:text-slate-400">
|
||||
Target roles: {stack.targetRoles}
|
||||
</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Competency list */}
|
||||
<div className="flex flex-col gap-3">
|
||||
{stack.competencies.map((c) => {
|
||||
const meta = STATUS_META[c.status];
|
||||
const StatusIcon = meta.icon;
|
||||
const mc = mcByComp.get(c.id);
|
||||
const progress = PROGRESS_BY_ID[c.id];
|
||||
|
||||
return (
|
||||
<Card key={c.id}>
|
||||
<CardBody className="flex flex-col gap-3">
|
||||
<div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
|
||||
<div className="flex flex-1 flex-col gap-1">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<h3 className="text-base font-semibold text-slate-900 dark:text-slate-100">
|
||||
{c.name}
|
||||
</h3>
|
||||
<span
|
||||
className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium ${meta.badgeClass}`}
|
||||
>
|
||||
<StatusIcon className="h-3 w-3" />
|
||||
{meta.label}
|
||||
</span>
|
||||
{mc && mc.verified && (
|
||||
<span className="inline-flex items-center gap-1 rounded-full bg-accent-100 px-2 py-0.5 text-xs font-medium text-accent-700 dark:bg-accent-900/40 dark:text-accent-300">
|
||||
<Award className="h-3 w-3" />
|
||||
Microcredential · {mc.score}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-sm text-slate-600 dark:text-slate-400">
|
||||
{c.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex shrink-0 flex-col items-end gap-2">
|
||||
{isUnlocked(c) ? (
|
||||
<Link href={`/learn/${c.id}`}>
|
||||
<Button size="sm" iconRight={<ArrowRight className="h-3.5 w-3.5" />}>
|
||||
Start Byte
|
||||
</Button>
|
||||
</Link>
|
||||
) : (
|
||||
<Button size="sm" variant="ghost" disabled icon={<Lock className="h-3.5 w-3.5" />}>
|
||||
Locked
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Progress / mastery bar */}
|
||||
{c.status === 'in_progress' && typeof progress === 'number' && (
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="h-2 flex-1 overflow-hidden rounded-full bg-slate-100 dark:bg-slate-800">
|
||||
<div
|
||||
className="h-full rounded-full bg-amber-500"
|
||||
style={{ width: `${progress}%` }}
|
||||
/>
|
||||
</div>
|
||||
<span className="text-xs text-slate-500 dark:text-slate-400">
|
||||
{progress}%
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{c.status === 'mastered' && (
|
||||
<div className="flex items-center gap-2 text-xs text-emerald-700 dark:text-emerald-300">
|
||||
<Award className="h-3.5 w-3.5" />
|
||||
Microcredential earned
|
||||
</div>
|
||||
)}
|
||||
</CardBody>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
import Link from 'next/link';
|
||||
import { ArrowRight, Layers } from 'lucide-react';
|
||||
import { Button, Card, CardBody, Badge } from '@nextcraft/ui';
|
||||
import { competencyStacks } from '@nextcraft/mock-data';
|
||||
|
||||
export default function CatalogPage() {
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
{/* Header */}
|
||||
<header className="flex flex-col gap-2">
|
||||
<Badge variant="info">Learner · Catalog</Badge>
|
||||
<h1 className="text-3xl font-bold tracking-tight text-slate-900 dark:text-slate-100">
|
||||
Program Catalog
|
||||
</h1>
|
||||
<p className="max-w-2xl text-slate-600 dark:text-slate-400">
|
||||
Five competency stacks covering orchestration, safety, design, field operations, and
|
||||
computational sciences. Each stack is a sequence of micro-tutorials, sandbox builds,
|
||||
artifacts, and oral defenses.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
{/* Grid */}
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{competencyStacks.map((stack) => (
|
||||
<Card key={stack.id} className="flex h-full flex-col">
|
||||
<CardBody className="flex flex-1 flex-col gap-3">
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<span className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary-100 text-primary-700 dark:bg-primary-900/40 dark:text-primary-300">
|
||||
<Layers className="h-5 w-5" />
|
||||
</span>
|
||||
<Badge variant="default">{stack.competencies.length} competencies</Badge>
|
||||
</div>
|
||||
<h2 className="text-lg font-semibold text-slate-900 dark:text-slate-100">
|
||||
{stack.name}
|
||||
</h2>
|
||||
<p className="text-sm text-slate-600 dark:text-slate-400">
|
||||
{stack.description}
|
||||
</p>
|
||||
<p className="text-xs text-slate-500 dark:text-slate-500">
|
||||
<span className="font-medium text-slate-600 dark:text-slate-400">
|
||||
Target roles:
|
||||
</span>{' '}
|
||||
{stack.targetRoles}
|
||||
</p>
|
||||
<div className="mt-auto pt-2">
|
||||
<Link href={`/catalog/${stack.id}`}>
|
||||
<Button variant="outline" size="sm" iconRight={<ArrowRight className="h-3.5 w-3.5" />}>
|
||||
Explore Stack
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,279 @@
|
||||
import Link from 'next/link';
|
||||
import {
|
||||
ArrowRight,
|
||||
Award,
|
||||
Calendar,
|
||||
Code,
|
||||
FileText,
|
||||
PenTool,
|
||||
Sparkles,
|
||||
Bot,
|
||||
} from 'lucide-react';
|
||||
import { Card, CardBody, CardHeader, Badge, Avatar, Button } from '@nextcraft/ui';
|
||||
import {
|
||||
primaryLearner,
|
||||
competencyStacks,
|
||||
allCompetencies,
|
||||
learnerArtifacts,
|
||||
upcomingDefenses,
|
||||
learnerMicrocredentials,
|
||||
} from '@nextcraft/mock-data';
|
||||
import { AiTutorChat } from '../../../components/learner/ai-tutor-chat';
|
||||
import { ProgressGraph } from '../../../components/learner/progress-graph';
|
||||
|
||||
const ACTIVE_COMPETENCY_IDS = [
|
||||
'stack-orchestration-c003',
|
||||
'stack-orchestration-c008',
|
||||
'stack-safety-c019',
|
||||
'stack-safety-c023',
|
||||
];
|
||||
|
||||
const ACTIVE_PROGRESS: Record<string, number> = {
|
||||
'stack-orchestration-c003': 45,
|
||||
'stack-orchestration-c008': 38,
|
||||
'stack-safety-c019': 52,
|
||||
'stack-safety-c023': 30,
|
||||
};
|
||||
|
||||
const ARTIFACT_ICON = {
|
||||
code: Code,
|
||||
design: PenTool,
|
||||
simulation: Sparkles,
|
||||
document: FileText,
|
||||
} as const;
|
||||
|
||||
function formatDate(iso: string): string {
|
||||
const d = new Date(iso);
|
||||
return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
|
||||
}
|
||||
|
||||
export default function DashboardPage() {
|
||||
const learner = primaryLearner;
|
||||
const activeStack = competencyStacks.find((s) => s.id === 'stack-orchestration')!;
|
||||
const activeCompetencies = ACTIVE_COMPETENCY_IDS
|
||||
.map((id) => allCompetencies.find((c) => c.id === id))
|
||||
.filter((c): c is NonNullable<typeof c> => Boolean(c));
|
||||
|
||||
const stackProgress = learner.progress[activeStack.id] ?? 0;
|
||||
const masteredInStack = activeStack.competencies.filter((c) => c.status === 'mastered').length;
|
||||
const totalInStack = activeStack.competencies.length;
|
||||
|
||||
const milestones = Array.from({ length: totalInStack }, (_, i) => i < masteredInStack);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
{/* Header */}
|
||||
<header className="flex items-center gap-4">
|
||||
<Avatar name={learner.name} src={learner.avatar} size="lg" />
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold tracking-tight text-slate-900 dark:text-slate-100">
|
||||
Welcome back, {learner.name.split(' ')[0]}
|
||||
</h1>
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400">
|
||||
You're {stackProgress}% through the {activeStack.name} stack.
|
||||
</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Top row: active competencies + milestone tracker */}
|
||||
<div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
|
||||
{/* Active competencies (spans 2) */}
|
||||
<Card className="lg:col-span-2">
|
||||
<CardHeader>
|
||||
<h2 className="text-base font-semibold text-slate-900 dark:text-slate-100">
|
||||
Active competencies
|
||||
</h2>
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400">
|
||||
{activeStack.name}
|
||||
</p>
|
||||
</CardHeader>
|
||||
<CardBody className="flex flex-col gap-4">
|
||||
{activeCompetencies.map((c) => {
|
||||
const pct = ACTIVE_PROGRESS[c.id] ?? 0;
|
||||
return (
|
||||
<div key={c.id} className="flex flex-col gap-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<Link
|
||||
href={`/learn/${c.id}`}
|
||||
className="text-sm font-medium text-slate-800 hover:text-primary-700 dark:text-slate-100 dark:hover:text-primary-300"
|
||||
>
|
||||
{c.name}
|
||||
</Link>
|
||||
<span className="text-xs text-slate-500 dark:text-slate-400">{pct}%</span>
|
||||
</div>
|
||||
<div className="h-2 overflow-hidden rounded-full bg-slate-100 dark:bg-slate-800">
|
||||
<div
|
||||
className="h-full rounded-full bg-amber-500"
|
||||
style={{ width: `${pct}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
{/* Milestone tracker */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<h2 className="text-base font-semibold text-slate-900 dark:text-slate-100">
|
||||
Milestone tracker
|
||||
</h2>
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400">
|
||||
{masteredInStack}/{totalInStack} competencies mastered
|
||||
</p>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<ol className="flex flex-wrap gap-2">
|
||||
{milestones.map((done, i) => (
|
||||
<li
|
||||
key={i}
|
||||
className={`flex h-7 w-7 items-center justify-center rounded-full text-xs font-medium ${
|
||||
done
|
||||
? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300'
|
||||
: 'bg-slate-100 text-slate-400 dark:bg-slate-800 dark:text-slate-500'
|
||||
}`}
|
||||
title={done ? 'Mastered' : 'Not yet mastered'}
|
||||
>
|
||||
{done ? <Award className="h-3.5 w-3.5" /> : i + 1}
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
<div className="mt-4">
|
||||
<div className="h-2 overflow-hidden rounded-full bg-slate-100 dark:bg-slate-800">
|
||||
<div
|
||||
className="h-full rounded-full bg-accent-500"
|
||||
style={{ width: `${stackProgress}%` }}
|
||||
/>
|
||||
</div>
|
||||
<p className="mt-1 text-xs text-slate-500 dark:text-slate-400">
|
||||
{stackProgress}% overall stack progress
|
||||
</p>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Progress graph (full width) */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<h2 className="text-base font-semibold text-slate-900 dark:text-slate-100">
|
||||
Mastery progress
|
||||
</h2>
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400">
|
||||
Last 8 weeks · AI Orchestration stack
|
||||
</p>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<ProgressGraph />
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
{/* Bottom row: recent artifacts + upcoming defenses */}
|
||||
<div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
|
||||
{/* Recent artifacts */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<h2 className="text-base font-semibold text-slate-900 dark:text-slate-100">
|
||||
Recent artifacts
|
||||
</h2>
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400">
|
||||
{learnerArtifacts.length} submitted
|
||||
</p>
|
||||
</CardHeader>
|
||||
<CardBody className="flex flex-col gap-3">
|
||||
{learnerArtifacts.slice(0, 4).map((a) => {
|
||||
const Icon = ARTIFACT_ICON[a.type] ?? FileText;
|
||||
return (
|
||||
<div
|
||||
key={a.id}
|
||||
className="flex items-start gap-3 rounded-md border border-slate-200 p-3 dark:border-slate-800"
|
||||
>
|
||||
<span className="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-primary-100 text-primary-700 dark:bg-primary-900/40 dark:text-primary-300">
|
||||
<Icon className="h-4 w-4" />
|
||||
</span>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<p className="text-sm font-medium text-slate-900 dark:text-slate-100">
|
||||
{a.name}
|
||||
</p>
|
||||
<span className="text-xs text-slate-400">{formatDate(a.createdAt)}</span>
|
||||
</div>
|
||||
<p className="mt-0.5 text-xs text-slate-500 dark:text-slate-400">
|
||||
{a.type}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
{/* Upcoming defenses */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<h2 className="text-base font-semibold text-slate-900 dark:text-slate-100">
|
||||
Upcoming defenses
|
||||
</h2>
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400">
|
||||
Oral exams on the calendar
|
||||
</p>
|
||||
</CardHeader>
|
||||
<CardBody className="flex flex-col gap-3">
|
||||
{upcomingDefenses.map((d) => {
|
||||
const comp = allCompetencies.find((c) => c.id === d.competencyId);
|
||||
if (!comp) return null;
|
||||
return (
|
||||
<div
|
||||
key={d.id}
|
||||
className="flex items-center justify-between gap-3 rounded-md border border-slate-200 p-3 dark:border-slate-800"
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
<span className="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300">
|
||||
<Calendar className="h-4 w-4" />
|
||||
</span>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-slate-900 dark:text-slate-100">
|
||||
{comp.name}
|
||||
</p>
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400">
|
||||
{d.status === 'scheduled' ? 'Scheduled' : 'Pending scheduling'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Link href={`/defend/${comp.id}`}>
|
||||
<Button size="sm" variant="outline">
|
||||
Prepare
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* AI Tutor chat */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="flex h-8 w-8 items-center justify-center rounded-full bg-primary-100 text-primary-700 dark:bg-primary-900/40 dark:text-primary-300">
|
||||
<Bot className="h-4 w-4" />
|
||||
</span>
|
||||
<div>
|
||||
<h2 className="text-base font-semibold text-slate-900 dark:text-slate-100">
|
||||
AI Tutor
|
||||
</h2>
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400">
|
||||
Coach and Socratic tutor · mock responses
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<AiTutorChat />
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,317 @@
|
||||
import Link from 'next/link';
|
||||
import { notFound } from 'next/navigation';
|
||||
import {
|
||||
ArrowLeft,
|
||||
CheckCircle,
|
||||
XCircle,
|
||||
Bot,
|
||||
Award,
|
||||
Code,
|
||||
GitCommit,
|
||||
FileText,
|
||||
PlayCircle,
|
||||
TestTube,
|
||||
ShieldCheck,
|
||||
} from 'lucide-react';
|
||||
import { Card, CardBody, CardHeader, Badge, Button } from '@nextcraft/ui';
|
||||
import { allCompetencies, competencyStacks } from '@nextcraft/mock-data';
|
||||
import { OralDefenseInterface } from '../../../../components/learner/oral-defense-interface';
|
||||
|
||||
const RUBRIC = [
|
||||
{ name: 'Correctness of agent architecture', passed: true, weight: 25 },
|
||||
{ name: 'Tool schema design & validation', passed: true, weight: 20 },
|
||||
{ name: 'Error handling & fallbacks', passed: false, weight: 20 },
|
||||
{ name: 'Test coverage', passed: true, weight: 15 },
|
||||
{ name: 'Code clarity & documentation', passed: true, weight: 20 },
|
||||
];
|
||||
|
||||
const CRITERION_SCORES: Record<string, number> = {
|
||||
'Correctness of agent architecture': 92,
|
||||
'Tool schema design & validation': 88,
|
||||
'Error handling & fallbacks': 61,
|
||||
'Test coverage': 84,
|
||||
'Code clarity & documentation': 90,
|
||||
};
|
||||
|
||||
const OVERALL_SCORE = 84;
|
||||
|
||||
const TRACE_EVENTS = [
|
||||
{ icon: FileText, label: 'File created: src/main.ts', time: '14:02:11' },
|
||||
{ icon: PlayCircle, label: 'First build attempt (failed)', time: '14:09:48' },
|
||||
{ icon: TestTube, label: 'Test suite passed (2/2)', time: '14:12:30' },
|
||||
{ icon: GitCommit, label: 'Commit: scaffold agent entrypoint', time: '14:18:05' },
|
||||
{ icon: ShieldCheck, label: 'Tool schema validated', time: '14:21:42' },
|
||||
{ icon: PlayCircle, label: 'Build attempt 2 (success)', time: '14:25:17' },
|
||||
{ icon: GitCommit, label: 'Commit: implement tool calling', time: '14:28:03' },
|
||||
{ icon: Award, label: 'Artifact submitted for assessment', time: '14:31:50' },
|
||||
];
|
||||
|
||||
const SUBMITTED_CODE = `import { ChatOpenAI } from '@langchain/openai';
|
||||
import { tool } from '@langchain/core/tools';
|
||||
import { z } from 'zod';
|
||||
|
||||
const getWeather = tool(
|
||||
async ({ city, units }) => {
|
||||
const res = await fetch(\`/api/weather?city=\${city}&units=\${units}\`);
|
||||
return res.json();
|
||||
},
|
||||
{
|
||||
name: 'get_weather',
|
||||
description: 'Fetch the current weather for a city',
|
||||
schema: z.object({
|
||||
city: z.string(),
|
||||
units: z.enum(['celsius', 'fahrenheit']).default('celsius'),
|
||||
}),
|
||||
},
|
||||
);
|
||||
|
||||
export async function main(query: string) {
|
||||
const model = new ChatOpenAI({ model: 'gpt-4o-mini' });
|
||||
const modelWithTools = model.bindTools([getWeather]);
|
||||
const response = await modelWithTools.invoke(query);
|
||||
return response.tool_calls;
|
||||
}`;
|
||||
|
||||
export default async function DefensePage({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ competencyId: string }>;
|
||||
}) {
|
||||
const { competencyId } = await params;
|
||||
const competency = allCompetencies.find((c) => c.id === competencyId);
|
||||
if (!competency) notFound();
|
||||
const stack = competencyStacks.find((s) => s.id === competency.stackId);
|
||||
|
||||
const radius = 36;
|
||||
const circumference = 2 * Math.PI * radius;
|
||||
const offset = circumference - (OVERALL_SCORE / 100) * circumference;
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
<Link
|
||||
href={`/build/${competency.id}`}
|
||||
className="inline-flex w-fit items-center gap-1 text-sm text-slate-500 hover:text-slate-800 dark:hover:text-slate-200"
|
||||
>
|
||||
<ArrowLeft className="h-3.5 w-3.5" />
|
||||
Back to build
|
||||
</Link>
|
||||
|
||||
<header className="flex flex-col gap-2">
|
||||
<Badge variant="warning">Assessment · Defense</Badge>
|
||||
<h1 className="text-2xl font-bold tracking-tight text-slate-900 dark:text-slate-100">
|
||||
{competency.name}
|
||||
</h1>
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400">
|
||||
{stack?.name} · oral defense and rubric review
|
||||
</p>
|
||||
</header>
|
||||
|
||||
{/* Artifact viewer */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-2">
|
||||
<Code className="h-4 w-4 text-primary-600" />
|
||||
<h2 className="text-base font-semibold text-slate-900 dark:text-slate-100">
|
||||
Submitted Artifact
|
||||
</h2>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<pre className="overflow-auto rounded-lg bg-slate-950 p-4 font-mono text-xs leading-relaxed text-slate-100">
|
||||
<code>{SUBMITTED_CODE}</code>
|
||||
</pre>
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
{/* Rubric + AI reviewer */}
|
||||
<div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
|
||||
{/* Rubric */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<h2 className="text-base font-semibold text-slate-900 dark:text-slate-100">
|
||||
Assessment rubric
|
||||
</h2>
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400">
|
||||
Criteria and weights
|
||||
</p>
|
||||
</CardHeader>
|
||||
<CardBody className="flex flex-col gap-3">
|
||||
{RUBRIC.map((c) => {
|
||||
const Icon = c.passed ? CheckCircle : XCircle;
|
||||
return (
|
||||
<div
|
||||
key={c.name}
|
||||
className="flex items-center justify-between gap-3 rounded-md border border-slate-200 p-3 dark:border-slate-800"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Icon
|
||||
className={`h-4 w-4 ${
|
||||
c.passed
|
||||
? 'text-emerald-600 dark:text-emerald-400'
|
||||
: 'text-rose-600 dark:text-rose-400'
|
||||
}`}
|
||||
/>
|
||||
<span className="text-sm text-slate-800 dark:text-slate-200">
|
||||
{c.name}
|
||||
</span>
|
||||
</div>
|
||||
<Badge variant={c.passed ? 'success' : 'error'}>{c.weight}%</Badge>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
{/* AI reviewer panel */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="flex h-8 w-8 items-center justify-center rounded-full bg-primary-100 text-primary-700 dark:bg-primary-900/40 dark:text-primary-300">
|
||||
<Bot className="h-4 w-4" />
|
||||
</span>
|
||||
<div>
|
||||
<h2 className="text-base font-semibold text-slate-900 dark:text-slate-100">
|
||||
AI Assessor
|
||||
</h2>
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400">
|
||||
Automated review results
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardBody className="flex flex-col gap-4">
|
||||
{/* Overall score */}
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="relative h-24 w-24 shrink-0">
|
||||
<svg viewBox="0 0 100 100" className="h-full w-full -rotate-90">
|
||||
<circle
|
||||
cx="50"
|
||||
cy="50"
|
||||
r={radius}
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="8"
|
||||
className="text-slate-200 dark:text-slate-800"
|
||||
/>
|
||||
<circle
|
||||
cx="50"
|
||||
cy="50"
|
||||
r={radius}
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="8"
|
||||
strokeDasharray={circumference}
|
||||
strokeDashoffset={offset}
|
||||
strokeLinecap="round"
|
||||
className="text-primary-600"
|
||||
/>
|
||||
</svg>
|
||||
<div className="absolute inset-0 flex items-center justify-center text-xl font-bold text-slate-900 dark:text-slate-100">
|
||||
{OVERALL_SCORE}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-slate-900 dark:text-slate-100">
|
||||
Overall score
|
||||
</p>
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400">
|
||||
Pass threshold: 75 ·{' '}
|
||||
<span className="text-emerald-600 dark:text-emerald-400">Passing</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Per-criterion scores */}
|
||||
<ul className="flex flex-col gap-2">
|
||||
{RUBRIC.map((c) => {
|
||||
const score = CRITERION_SCORES[c.name] ?? 0;
|
||||
return (
|
||||
<li key={c.name} className="flex items-center gap-3">
|
||||
<span className="flex-1 truncate text-xs text-slate-700 dark:text-slate-300">
|
||||
{c.name}
|
||||
</span>
|
||||
<div className="h-1.5 w-24 overflow-hidden rounded-full bg-slate-100 dark:bg-slate-800">
|
||||
<div
|
||||
className={`h-full rounded-full ${
|
||||
score >= 75 ? 'bg-emerald-500' : 'bg-amber-500'
|
||||
}`}
|
||||
style={{ width: `${score}%` }}
|
||||
/>
|
||||
</div>
|
||||
<span className="w-8 text-right text-xs font-medium text-slate-700 dark:text-slate-300">
|
||||
{score}
|
||||
</span>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
|
||||
<div className="rounded-md bg-slate-50 p-3 text-xs text-slate-700 dark:bg-slate-900/50 dark:text-slate-300">
|
||||
<p className="font-medium text-slate-900 dark:text-slate-100">Feedback</p>
|
||||
<p className="mt-1">
|
||||
Strong tool-schema design and clear architecture. Error handling loses points:
|
||||
malformed model output is not guarded with a fallback parser. Add a retry with
|
||||
a structured-output schema and re-run the eval harness before your oral defense.
|
||||
</p>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Process trace timeline */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<h2 className="text-base font-semibold text-slate-900 dark:text-slate-100">
|
||||
Process trace
|
||||
</h2>
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400">
|
||||
Build history captured during the sandbox session
|
||||
</p>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<ol className="relative border-l border-slate-200 pl-6 dark:border-slate-800">
|
||||
{TRACE_EVENTS.map((e, i) => {
|
||||
const Icon = e.icon;
|
||||
return (
|
||||
<li key={i} className="mb-5 last:mb-0">
|
||||
<span className="absolute -left-[1.15rem] flex h-6 w-6 items-center justify-center rounded-full bg-primary-100 text-primary-700 dark:bg-primary-900/40 dark:text-primary-300">
|
||||
<Icon className="h-3 w-3" />
|
||||
</span>
|
||||
<div className="flex flex-col gap-0.5 sm:flex-row sm:items-center sm:justify-between">
|
||||
<span className="text-sm text-slate-800 dark:text-slate-200">
|
||||
{e.label}
|
||||
</span>
|
||||
<span className="font-mono text-xs text-slate-400">{e.time}</span>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ol>
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
{/* Oral defense */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<h2 className="text-base font-semibold text-slate-900 dark:text-slate-100">
|
||||
Oral defense
|
||||
</h2>
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400">
|
||||
Live oral exam with an AI examiner
|
||||
</p>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<OralDefenseInterface />
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
<div className="flex justify-end">
|
||||
<Link href={`/catalog/${competency.stackId}`}>
|
||||
<Button variant="outline">
|
||||
Return to stack
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
import type { ReactNode } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { GraduationCap } from 'lucide-react';
|
||||
|
||||
const LINKS = [
|
||||
{ label: 'Dashboard', href: '/dashboard' },
|
||||
{ label: 'Catalog', href: '/catalog' },
|
||||
{ label: 'AI Tutor', href: '/tutor' },
|
||||
{ label: 'Defenses', href: '/defenses' },
|
||||
];
|
||||
|
||||
export default function LearnerLayout({ children }: { children: ReactNode }) {
|
||||
return (
|
||||
<div className="mx-auto flex max-w-7xl gap-6 px-4 py-8 sm:px-6">
|
||||
<aside className="hidden w-56 shrink-0 md:block">
|
||||
<div className="mb-4 flex items-center gap-2 text-sm font-semibold text-slate-500 dark:text-slate-400">
|
||||
<GraduationCap className="h-4 w-4 text-primary-600" />
|
||||
Learner surface
|
||||
</div>
|
||||
<nav className="flex flex-col gap-1">
|
||||
{LINKS.map((l) => (
|
||||
<Link
|
||||
key={l.href}
|
||||
href={l.href}
|
||||
className="rounded-md px-3 py-2 text-sm font-medium text-slate-700 hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-slate-800"
|
||||
>
|
||||
{l.label}
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
</aside>
|
||||
<div className="flex-1">{children}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,98 @@
|
||||
import Link from 'next/link';
|
||||
import { notFound } from 'next/navigation';
|
||||
import { ArrowLeft, ArrowRight, Clock } from 'lucide-react';
|
||||
import { Button, Card, CardBody, Badge } from '@nextcraft/ui';
|
||||
import { allCompetencies, competencyStacks } from '@nextcraft/mock-data';
|
||||
import { WorkedExampleTabs } from '../../../../components/learner/worked-example-tabs';
|
||||
|
||||
export default async function ByteTutorialPage({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ competencyId: string }>;
|
||||
}) {
|
||||
const { competencyId } = await params;
|
||||
const competency = allCompetencies.find((c) => c.id === competencyId);
|
||||
if (!competency) notFound();
|
||||
const stack = competencyStacks.find((s) => s.id === competency.stackId);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
<Link
|
||||
href={`/catalog/${competency.stackId}`}
|
||||
className="inline-flex w-fit items-center gap-1 text-sm text-slate-500 hover:text-slate-800 dark:hover:text-slate-200"
|
||||
>
|
||||
<ArrowLeft className="h-3.5 w-3.5" />
|
||||
Back to {stack?.name ?? 'stack'}
|
||||
</Link>
|
||||
|
||||
<header className="flex flex-col gap-2">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<Badge variant="info">Byte · 3–7 min read</Badge>
|
||||
<span className="inline-flex items-center gap-1 text-xs text-slate-500 dark:text-slate-400">
|
||||
<Clock className="h-3.5 w-3.5" /> ~5 min
|
||||
</span>
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold tracking-tight text-slate-900 dark:text-slate-100">
|
||||
{competency.name}
|
||||
</h1>
|
||||
<p className="text-slate-600 dark:text-slate-400">{competency.description}</p>
|
||||
</header>
|
||||
|
||||
<div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
|
||||
{/* Concept panel */}
|
||||
<Card className="flex flex-col">
|
||||
<CardBody className="flex flex-col gap-4">
|
||||
<h2 className="text-lg font-semibold text-slate-900 dark:text-slate-100">
|
||||
Concept
|
||||
</h2>
|
||||
<div className="space-y-4 text-sm leading-relaxed text-slate-700 dark:text-slate-300">
|
||||
<p>
|
||||
<strong>{competency.name}</strong> sits at the core of the {stack?.name} stack.
|
||||
It is the bridge between theory and a buildable artifact: you learn just enough
|
||||
of the concept here (a Byte), then immediately apply it in the sandbox. The goal
|
||||
is not exhaustive coverage — it is enough to build confidently and defend what
|
||||
you built.
|
||||
</p>
|
||||
<p>
|
||||
In production systems this competency shows up as a trade-off between
|
||||
reliability and velocity. A naive implementation works in the happy path, but the
|
||||
real test is how it behaves when tools fail, contexts overflow, or the model
|
||||
returns malformed output. The worked example on the right shows a small but
|
||||
realistic implementation you can adapt in the build sandbox.
|
||||
</p>
|
||||
<p>
|
||||
As you read, keep this question in mind: <em>what would I say in an oral defense
|
||||
if the examiner asked me to justify one design choice in this Byte?</em> Capture
|
||||
that one sentence before you move on — it becomes part of your process trace.
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-auto pt-2">
|
||||
<Link href={`/build/${competency.id}`}>
|
||||
<Button iconRight={<ArrowRight className="h-4 w-4" />}>
|
||||
Start Building
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
{/* Worked example panel */}
|
||||
<Card className="flex flex-col overflow-hidden">
|
||||
<CardBody className="flex h-[28rem] flex-col p-0">
|
||||
<div className="border-b border-slate-200 px-4 py-3 dark:border-slate-800">
|
||||
<h2 className="text-lg font-semibold text-slate-900 dark:text-slate-100">
|
||||
Worked example
|
||||
</h2>
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400">
|
||||
Reference implementation you can adapt in the sandbox.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex-1 overflow-hidden">
|
||||
<WorkedExampleTabs />
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,236 @@
|
||||
import Link from 'next/link';
|
||||
import {
|
||||
ArrowRight,
|
||||
BookOpen,
|
||||
Hammer,
|
||||
Trophy,
|
||||
ShieldCheck,
|
||||
Quote,
|
||||
} from 'lucide-react';
|
||||
import { Button, Card, CardBody, Badge, Avatar } from '@nextcraft/ui';
|
||||
import { competencyStacks } from '@nextcraft/mock-data';
|
||||
|
||||
const STEPS = [
|
||||
{
|
||||
name: 'Byte',
|
||||
detail: '3–7 min micro-tutorials',
|
||||
icon: BookOpen,
|
||||
},
|
||||
{
|
||||
name: 'Build',
|
||||
detail: 'Hands-on in a sandbox',
|
||||
icon: Hammer,
|
||||
},
|
||||
{
|
||||
name: 'Demonstrate',
|
||||
detail: 'Artifact + process trace',
|
||||
icon: Trophy,
|
||||
},
|
||||
{
|
||||
name: 'Defend',
|
||||
detail: 'Oral defense with AI',
|
||||
icon: ShieldCheck,
|
||||
},
|
||||
];
|
||||
|
||||
const FEATURED = ['stack-orchestration', 'stack-safety', 'stack-designer'];
|
||||
|
||||
const TESTIMONIALS = [
|
||||
{
|
||||
quote:
|
||||
'I went from dabbling with APIs to defending my multi-agent system in front of an AI examiner. The artifact I built is now in my portfolio — that landed me the interview.',
|
||||
name: 'Priya Shah',
|
||||
role: 'ML Engineer, Cohort 3',
|
||||
},
|
||||
{
|
||||
quote:
|
||||
'The Byte → Build → Demonstrate → Defend loop forced me to actually understand. You can’t bluff an oral defense with a clever-looking repo.',
|
||||
name: 'Marcus Okafor',
|
||||
role: 'Agent Reliability Engineer, Cohort 2',
|
||||
},
|
||||
{
|
||||
quote:
|
||||
'Employers stopped asking me where I studied. They asked what I had built and defended. That conversation is completely different.',
|
||||
name: 'Lena Hoffmann',
|
||||
role: 'AI Product Designer, Cohort 4',
|
||||
},
|
||||
];
|
||||
|
||||
export default function LearnerHome() {
|
||||
const featured = competencyStacks.filter((s) => FEATURED.includes(s.id));
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-16">
|
||||
{/* Hero */}
|
||||
<section className="flex flex-col items-start gap-6 pt-6">
|
||||
<Badge variant="info">v0.1 · Learner Surface · UI Prototype</Badge>
|
||||
<h1 className="max-w-3xl text-4xl font-bold tracking-tight text-slate-900 sm:text-5xl dark:text-slate-50">
|
||||
Prove what you can build, not what you can write.
|
||||
</h1>
|
||||
<p className="max-w-2xl text-lg text-slate-600 dark:text-slate-300">
|
||||
Nextcraft is an AI-native outcome school. Learn in micro-tutorials, build in a
|
||||
sandbox, demonstrate with real artifacts, and defend your work in an oral exam —
|
||||
then carry that evidence into the talent marketplace.
|
||||
</p>
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
<Link href="/catalog">
|
||||
<Button size="lg" iconRight={<ArrowRight className="h-4 w-4" />}>
|
||||
Explore Programs
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/dashboard">
|
||||
<Button variant="outline" size="lg">
|
||||
Start Learning
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* How it works */}
|
||||
<section className="flex flex-col gap-6">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-slate-900 dark:text-slate-100">
|
||||
How it works
|
||||
</h2>
|
||||
<p className="mt-1 text-slate-600 dark:text-slate-400">
|
||||
Four stages, repeated for every competency.
|
||||
</p>
|
||||
</div>
|
||||
<ol className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||||
{STEPS.map((step, i) => {
|
||||
const Icon = step.icon;
|
||||
return (
|
||||
<Card key={step.name} className="h-full">
|
||||
<CardBody className="flex flex-col gap-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary-100 text-primary-700 dark:bg-primary-900/40 dark:text-primary-300">
|
||||
<Icon className="h-5 w-5" />
|
||||
</span>
|
||||
<span className="text-xs font-semibold text-slate-400">
|
||||
Step {i + 1}
|
||||
</span>
|
||||
</div>
|
||||
<h3 className="text-base font-semibold text-slate-900 dark:text-slate-100">
|
||||
{step.name}
|
||||
</h3>
|
||||
<p className="text-sm text-slate-600 dark:text-slate-400">
|
||||
{step.detail}
|
||||
</p>
|
||||
</CardBody>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</ol>
|
||||
</section>
|
||||
|
||||
{/* Program highlights */}
|
||||
<section className="flex flex-col gap-6">
|
||||
<div className="flex items-end justify-between gap-4">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-slate-900 dark:text-slate-100">
|
||||
Program highlights
|
||||
</h2>
|
||||
<p className="mt-1 text-slate-600 dark:text-slate-400">
|
||||
Three of five competency stacks.
|
||||
</p>
|
||||
</div>
|
||||
<Link href="/catalog" className="hidden sm:block">
|
||||
<Button variant="ghost" size="sm" iconRight={<ArrowRight className="h-3.5 w-3.5" />}>
|
||||
See all stacks
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{featured.map((stack) => (
|
||||
<Card key={stack.id} className="flex h-full flex-col">
|
||||
<CardBody className="flex flex-1 flex-col gap-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-lg font-semibold text-slate-900 dark:text-slate-100">
|
||||
{stack.name}
|
||||
</h3>
|
||||
<Badge variant="info">{stack.competencies.length} competencies</Badge>
|
||||
</div>
|
||||
<p className="text-sm text-slate-600 dark:text-slate-400">
|
||||
{stack.description}
|
||||
</p>
|
||||
<p className="text-xs text-slate-500 dark:text-slate-500">
|
||||
Target roles: {stack.targetRoles}
|
||||
</p>
|
||||
<div className="mt-auto pt-2">
|
||||
<Link href={`/catalog/${stack.id}`}>
|
||||
<Button variant="outline" size="sm" iconRight={<ArrowRight className="h-3.5 w-3.5" />}>
|
||||
Explore
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Testimonials */}
|
||||
<section className="flex flex-col gap-6">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-slate-900 dark:text-slate-100">
|
||||
Learners who proved it
|
||||
</h2>
|
||||
<p className="mt-1 text-slate-600 dark:text-slate-400">
|
||||
Mock testimonials for the prototype.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{TESTIMONIALS.map((t) => (
|
||||
<Card key={t.name} className="h-full">
|
||||
<CardBody className="flex flex-col gap-4">
|
||||
<Quote className="h-6 w-6 text-primary-500" />
|
||||
<p className="flex-1 text-sm text-slate-700 dark:text-slate-300">
|
||||
“{t.quote}”
|
||||
</p>
|
||||
<div className="flex items-center gap-3">
|
||||
<Avatar name={t.name} size="sm" />
|
||||
<div>
|
||||
<p className="text-sm font-medium text-slate-900 dark:text-slate-100">
|
||||
{t.name}
|
||||
</p>
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400">{t.role}</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Final CTA */}
|
||||
<section className="overflow-hidden rounded-xl bg-gradient-to-r from-primary-600 via-primary-700 to-primary-800 p-8 text-center sm:p-12">
|
||||
<h2 className="text-2xl font-bold text-white sm:text-3xl">
|
||||
Build something defensible.
|
||||
</h2>
|
||||
<p className="mx-auto mt-2 max-w-xl text-primary-100">
|
||||
Start with one Byte. Earn a microcredential. Walk into an interview with evidence.
|
||||
</p>
|
||||
<div className="mt-6 flex flex-wrap items-center justify-center gap-3">
|
||||
<Link href="/catalog">
|
||||
<Button
|
||||
size="lg"
|
||||
className="bg-white text-primary-700 hover:bg-primary-50"
|
||||
iconRight={<ArrowRight className="h-4 w-4" />}
|
||||
>
|
||||
Explore Programs
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/dashboard">
|
||||
<Button
|
||||
size="lg"
|
||||
variant="outline"
|
||||
className="border-white/40 text-white hover:bg-white/10"
|
||||
>
|
||||
Go to Dashboard
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
import type { ReactNode } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { ShoppingBag } from 'lucide-react';
|
||||
|
||||
const LINKS = [
|
||||
{ label: 'Job board', href: '/marketplace' },
|
||||
{ label: 'Pricing', href: '/marketplace/pricing' },
|
||||
];
|
||||
|
||||
export default function MarketplaceLayout({ children }: { children: ReactNode }) {
|
||||
return (
|
||||
<div className="mx-auto flex max-w-7xl gap-6 px-4 py-8 sm:px-6">
|
||||
<aside className="hidden w-56 shrink-0 md:block">
|
||||
<div className="mb-4 flex items-center gap-2 text-sm font-semibold text-slate-500 dark:text-slate-400">
|
||||
<ShoppingBag className="h-4 w-4 text-accent-600" />
|
||||
Marketplace surface
|
||||
</div>
|
||||
<nav className="flex flex-col gap-1">
|
||||
{LINKS.map((l) => (
|
||||
<Link
|
||||
key={l.href}
|
||||
href={l.href}
|
||||
className="rounded-md px-3 py-2 text-sm font-medium text-slate-700 hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-slate-800"
|
||||
>
|
||||
{l.label}
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
</aside>
|
||||
<div className="flex-1">{children}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,188 @@
|
||||
import Link from 'next/link';
|
||||
import { notFound } from 'next/navigation';
|
||||
import { ArrowLeft, Briefcase, Github, Globe, Linkedin, MapPin, Twitter, Users } from 'lucide-react';
|
||||
import { employers, jobs } from '@nextcraft/mock-data';
|
||||
import { Badge, Button, Card, CardBody } from '@nextcraft/ui';
|
||||
import { formatSalaryRange, initials as initialsOf, relativeTime } from '../../../../../lib/format';
|
||||
|
||||
interface PageProps {
|
||||
params: Promise<{ employerId: string }>;
|
||||
}
|
||||
|
||||
const CULTURE_CARDS = [
|
||||
{ label: 'Open Workspace', tone: 'bg-primary-100 text-primary-700 dark:bg-primary-900/40 dark:text-primary-300' },
|
||||
{ label: 'Team Collaboration', tone: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300' },
|
||||
{ label: 'Innovation Lab', tone: 'bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300' },
|
||||
{ label: 'Learning Culture', tone: 'bg-rose-100 text-rose-700 dark:bg-rose-900/40 dark:text-rose-300' },
|
||||
{ label: 'Global Team', tone: 'bg-teal-100 text-teal-700 dark:bg-teal-900/40 dark:text-teal-300' },
|
||||
{ label: 'Mission First', tone: 'bg-violet-100 text-violet-700 dark:bg-violet-900/40 dark:text-violet-300' },
|
||||
] as const;
|
||||
|
||||
export default async function EmployerProfilePage({ params }: PageProps) {
|
||||
const { employerId } = await params;
|
||||
const employer = employers.find((e) => e.id === employerId);
|
||||
if (!employer) notFound();
|
||||
|
||||
const openPositions = jobs.filter((j) => j.employerId === employer.id);
|
||||
|
||||
const aboutParagraphs = [
|
||||
employer.description,
|
||||
`Headquartered in ${employer.location}, ${employer.name} operates in the ${employer.industry} space with a team of ${employer.size} people. Our culture is best described as: ${employer.culture}`,
|
||||
`We are actively hiring across roles that pair AI engineering rigor with real customer outcomes. Browse our open positions below and apply through the Nextcraft marketplace to connect directly with our hiring team.`,
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
<div>
|
||||
<Link
|
||||
href="/marketplace"
|
||||
className="inline-flex items-center gap-1.5 text-sm font-medium text-slate-600 hover:text-slate-900 dark:text-slate-300 dark:hover:text-slate-100"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
Back to job board
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Header */}
|
||||
<Card>
|
||||
<CardBody className="flex flex-col gap-4">
|
||||
<div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
|
||||
<div className="flex items-start gap-4">
|
||||
<span
|
||||
aria-hidden
|
||||
className="flex h-16 w-16 shrink-0 items-center justify-center rounded-full bg-primary-100 text-lg font-semibold text-primary-700 dark:bg-primary-900/40 dark:text-primary-200"
|
||||
>
|
||||
{initialsOf(employer.name)}
|
||||
</span>
|
||||
<div className="flex flex-col gap-1">
|
||||
<h1 className="text-2xl font-bold text-slate-900 dark:text-slate-100">
|
||||
{employer.name}
|
||||
</h1>
|
||||
<p className="text-sm font-medium text-primary-700 dark:text-primary-300">
|
||||
{employer.industry}
|
||||
</p>
|
||||
<div className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-slate-600 dark:text-slate-400">
|
||||
<span className="inline-flex items-center gap-1">
|
||||
<Users className="h-3.5 w-3.5" />
|
||||
{employer.size}
|
||||
</span>
|
||||
<span className="inline-flex items-center gap-1">
|
||||
<MapPin className="h-3.5 w-3.5" />
|
||||
{employer.location}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<SocialIcon href={employer.socialLinks.twitter ?? '#'} label="Twitter">
|
||||
<Twitter className="h-4 w-4" />
|
||||
</SocialIcon>
|
||||
<SocialIcon href={employer.socialLinks.linkedin ?? '#'} label="LinkedIn">
|
||||
<Linkedin className="h-4 w-4" />
|
||||
</SocialIcon>
|
||||
<SocialIcon href={employer.socialLinks.github ?? '#'} label="GitHub">
|
||||
<Github className="h-4 w-4" />
|
||||
</SocialIcon>
|
||||
<SocialIcon href={employer.website} label="Website">
|
||||
<Globe className="h-4 w-4" />
|
||||
</SocialIcon>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
{/* About */}
|
||||
<Card>
|
||||
<CardBody className="flex flex-col gap-3">
|
||||
<h2 className="text-lg font-semibold text-slate-900 dark:text-slate-100">About</h2>
|
||||
<div className="flex flex-col gap-3 text-sm leading-relaxed text-slate-700 dark:text-slate-300">
|
||||
{aboutParagraphs.map((p, i) => (
|
||||
<p key={i}>{p}</p>
|
||||
))}
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
{/* Culture */}
|
||||
<Card>
|
||||
<CardBody className="flex flex-col gap-4">
|
||||
<h2 className="text-lg font-semibold text-slate-900 dark:text-slate-100">Culture</h2>
|
||||
<div className="grid grid-cols-2 gap-3 sm:grid-cols-3">
|
||||
{CULTURE_CARDS.map((c, i) => (
|
||||
<div
|
||||
key={c.label}
|
||||
className={`flex h-24 flex-col items-center justify-center gap-2 rounded-lg border border-slate-200 text-center dark:border-slate-800 ${c.tone}`}
|
||||
>
|
||||
<span className="text-xs font-medium uppercase tracking-wide opacity-70">#{i + 1}</span>
|
||||
<span className="text-sm font-semibold">{c.label}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
{/* Open positions */}
|
||||
<Card>
|
||||
<CardBody className="flex flex-col gap-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-lg font-semibold text-slate-900 dark:text-slate-100">
|
||||
Open positions
|
||||
</h2>
|
||||
<Badge variant="default">
|
||||
<Briefcase className="h-3 w-3" />
|
||||
{openPositions.length}
|
||||
</Badge>
|
||||
</div>
|
||||
{openPositions.length === 0 ? (
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400">No current openings.</p>
|
||||
) : (
|
||||
<div className="flex flex-col gap-3">
|
||||
{openPositions.map((job) => (
|
||||
<Link
|
||||
key={job.id}
|
||||
href={`/marketplace/jobs/${job.id}`}
|
||||
className="group flex flex-col gap-1 rounded-md border border-slate-200 p-4 transition-colors hover:bg-slate-50 dark:border-slate-800 dark:hover:bg-slate-800 sm:flex-row sm:items-center sm:justify-between"
|
||||
>
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="text-sm font-semibold text-slate-900 group-hover:text-primary-700 dark:text-slate-100">
|
||||
{job.title}
|
||||
</span>
|
||||
<span className="text-xs text-slate-600 dark:text-slate-400">
|
||||
{job.location} · {formatSalaryRange(job.salaryMin, job.salaryMax)} · Posted{' '}
|
||||
{relativeTime(job.postedAt)}
|
||||
</span>
|
||||
</div>
|
||||
<span className="inline-flex h-8 w-fit items-center justify-center rounded-md border border-slate-300 px-3 text-xs font-medium text-slate-800 dark:border-slate-700 dark:text-slate-100">
|
||||
View
|
||||
</span>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SocialIcon({
|
||||
href,
|
||||
label,
|
||||
children,
|
||||
}: {
|
||||
href: string;
|
||||
label: string;
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<a
|
||||
href={href}
|
||||
aria-label={label}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex h-9 w-9 items-center justify-center rounded-md border border-slate-300 text-slate-700 transition-colors hover:bg-slate-100 dark:border-slate-700 dark:text-slate-200 dark:hover:bg-slate-800"
|
||||
>
|
||||
{children}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,311 @@
|
||||
import Link from 'next/link';
|
||||
import { notFound } from 'next/navigation';
|
||||
import { ArrowLeft, Building2, Check, MapPin, Wallet } from 'lucide-react';
|
||||
import { employers, jobs } from '@nextcraft/mock-data';
|
||||
import { Badge, Button, Card, CardBody } from '@nextcraft/ui';
|
||||
import type { Job } from '@nextcraft/types';
|
||||
import {
|
||||
formatSalaryRange,
|
||||
matchBarClasses,
|
||||
matchBadgeClasses,
|
||||
matchTone,
|
||||
relativeTime,
|
||||
seniorityLabel,
|
||||
initials as initialsOf,
|
||||
} from '../../../../../lib/format';
|
||||
|
||||
interface PageProps {
|
||||
params: Promise<{ jobId: string }>;
|
||||
}
|
||||
|
||||
/**
|
||||
* Derive a stable mock "AI-matched skills" breakdown from a job's skill list.
|
||||
* The first skill is given the highest score (close to the job's matchScore)
|
||||
* and subsequent skills taper slightly so the visualization reads naturally.
|
||||
*/
|
||||
function aiMatchedSkills(job: Job): Array<{ skill: string; score: number }> {
|
||||
const top = job.skills.slice(0, 5);
|
||||
return top.map((skill, idx) => {
|
||||
const taper = Math.round(idx * 4);
|
||||
const score = Math.max(55, Math.min(99, job.matchScore - taper));
|
||||
return { skill, score };
|
||||
});
|
||||
}
|
||||
|
||||
export default async function JobDetailPage({ params }: PageProps) {
|
||||
const { jobId } = await params;
|
||||
const job = jobs.find((j) => j.id === jobId);
|
||||
if (!job) notFound();
|
||||
|
||||
const employer = employers.find((e) => e.id === job.employerId);
|
||||
const employerName = employer?.name ?? 'Unknown employer';
|
||||
|
||||
const related = jobs
|
||||
.filter((j) => j.id !== job.id && j.employerId === job.employerId)
|
||||
.slice(0, 3);
|
||||
const relatedFallback =
|
||||
related.length > 0
|
||||
? related
|
||||
: jobs
|
||||
.filter((j) => j.id !== job.id && j.seniority === job.seniority)
|
||||
.slice(0, 3);
|
||||
const relatedJobs = (related.length > 0 ? related : relatedFallback).slice(0, 3);
|
||||
|
||||
const matchedSkills = aiMatchedSkills(job);
|
||||
|
||||
// Build out 3–4 paragraph rich description.
|
||||
const descriptionParagraphs = [
|
||||
job.description,
|
||||
`${employerName} is looking for a ${seniorityLabel(job.seniority)}-level ${
|
||||
job.title.toLowerCase().includes('engineer') ||
|
||||
job.title.toLowerCase().includes('designer') ||
|
||||
job.title.toLowerCase().includes('researcher')
|
||||
? 'practitioner'
|
||||
: 'professional'
|
||||
} who can own outcomes end-to-end. You will partner with product, research, and platform teams to ship reliable AI-powered features, instrumented with the evaluation harnesses this role is responsible for.`,
|
||||
`Day-to-day you will design systems around ${job.skills
|
||||
.slice(0, 3)
|
||||
.join(', ')}, write production code, review pull requests, run evaluations, and contribute to a blameless postmortem culture. We expect strong written communication and comfort working in a fast-moving, evidence-driven environment.`,
|
||||
`This role is ${job.remote ? 'remote-friendly' : `on-site in ${job.location}`} and reports into the ${employer?.industry ?? 'AI'} practice. Compensation ranges from ${formatSalaryRange(
|
||||
job.salaryMin,
|
||||
job.salaryMax,
|
||||
)} plus equity and benefits. We are an equal-opportunity employer and actively seek candidates from non-traditional backgrounds who have built real AI systems.`,
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
{/* Back link */}
|
||||
<div>
|
||||
<Link
|
||||
href="/marketplace"
|
||||
className="inline-flex items-center gap-1.5 text-sm font-medium text-slate-600 hover:text-slate-900 dark:text-slate-300 dark:hover:text-slate-100"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
Back to job board
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Header */}
|
||||
<Card>
|
||||
<CardBody className="flex flex-col gap-4">
|
||||
<div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
|
||||
<div className="flex items-start gap-4">
|
||||
<span
|
||||
aria-hidden
|
||||
className="flex h-14 w-14 shrink-0 items-center justify-center rounded-full bg-primary-100 text-base font-semibold text-primary-700 dark:bg-primary-900/40 dark:text-primary-200"
|
||||
>
|
||||
{initialsOf(employerName)}
|
||||
</span>
|
||||
<div className="flex flex-col gap-1">
|
||||
<h1 className="text-2xl font-bold text-slate-900 dark:text-slate-100">
|
||||
{job.title}
|
||||
</h1>
|
||||
<Link
|
||||
href={`/marketplace/employers/${job.employerId}`}
|
||||
className="text-sm font-medium text-primary-700 hover:underline dark:text-primary-300"
|
||||
>
|
||||
{employerName}
|
||||
</Link>
|
||||
<div className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-slate-600 dark:text-slate-400">
|
||||
<span className="inline-flex items-center gap-1">
|
||||
<MapPin className="h-3.5 w-3.5" />
|
||||
{job.location}
|
||||
</span>
|
||||
{job.remote && <Badge variant="success">Remote</Badge>}
|
||||
<span className="inline-flex items-center gap-1">
|
||||
<Wallet className="h-3.5 w-3.5" />
|
||||
{formatSalaryRange(job.salaryMin, job.salaryMax)}
|
||||
</span>
|
||||
<Badge variant="default">{seniorityLabel(job.seniority)}</Badge>
|
||||
<span>Posted {relativeTime(job.postedAt)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<span
|
||||
className={`inline-flex h-12 w-12 items-center justify-center rounded-full text-sm font-bold ring-2 ${matchBadgeClasses(
|
||||
job.matchScore,
|
||||
)}`}
|
||||
title={`${job.matchScore}% AI match`}
|
||||
>
|
||||
{job.matchScore}%
|
||||
</span>
|
||||
<Button size="lg" type="button">
|
||||
Apply Now
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
<div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
|
||||
{/* Main content */}
|
||||
<div className="flex flex-col gap-6 lg:col-span-2">
|
||||
<Card>
|
||||
<CardBody className="flex flex-col gap-4">
|
||||
<h2 className="text-lg font-semibold text-slate-900 dark:text-slate-100">
|
||||
Job description
|
||||
</h2>
|
||||
<div className="flex flex-col gap-3 text-sm leading-relaxed text-slate-700 dark:text-slate-300">
|
||||
{descriptionParagraphs.map((p, i) => (
|
||||
<p key={i}>{p}</p>
|
||||
))}
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardBody className="flex flex-col gap-4">
|
||||
<h2 className="text-lg font-semibold text-slate-900 dark:text-slate-100">
|
||||
Required competencies
|
||||
</h2>
|
||||
<ul className="flex flex-col gap-2">
|
||||
{job.requiredCompetencies.map((c) => (
|
||||
<li
|
||||
key={c}
|
||||
className="flex items-start gap-2 text-sm text-slate-700 dark:text-slate-300"
|
||||
>
|
||||
<span className="mt-0.5 inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300">
|
||||
<Check className="h-3 w-3" />
|
||||
</span>
|
||||
<span>{humanizeCompetency(c)}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardBody className="flex flex-col gap-4">
|
||||
<h2 className="text-lg font-semibold text-slate-900 dark:text-slate-100">
|
||||
AI-Matched Skills
|
||||
</h2>
|
||||
<p className="text-sm text-slate-600 dark:text-slate-400">
|
||||
How your competency profile maps to this role, computed by Nextcraft's match
|
||||
engine.
|
||||
</p>
|
||||
<div className="flex flex-col gap-3">
|
||||
{matchedSkills.map(({ skill, score }) => (
|
||||
<div key={skill} className="flex flex-col gap-1.5">
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="font-medium text-slate-800 dark:text-slate-200">{skill}</span>
|
||||
<span className="text-slate-600 dark:text-slate-400">{score}%</span>
|
||||
</div>
|
||||
<div className="h-2 w-full overflow-hidden rounded-full bg-slate-100 dark:bg-slate-800">
|
||||
<div
|
||||
className={`h-full rounded-full ${matchBarClasses(score)}`}
|
||||
style={{ width: `${score}%` }}
|
||||
role="progressbar"
|
||||
aria-valuenow={score}
|
||||
aria-valuemin={0}
|
||||
aria-valuemax={100}
|
||||
aria-label={`${skill} match ${score} percent`}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="mt-2 flex items-center gap-2 text-xs text-slate-500 dark:text-slate-500">
|
||||
<span
|
||||
className={`inline-block h-2 w-2 rounded-full ${
|
||||
matchTone(job.matchScore) === 'high'
|
||||
? 'bg-emerald-500'
|
||||
: matchTone(job.matchScore) === 'mid'
|
||||
? 'bg-amber-500'
|
||||
: 'bg-orange-500'
|
||||
}`}
|
||||
/>
|
||||
Overall match score {job.matchScore}%
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Sidebar */}
|
||||
<div className="flex flex-col gap-6">
|
||||
<Card>
|
||||
<CardBody className="flex flex-col gap-3">
|
||||
<h2 className="text-sm font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">
|
||||
Employer
|
||||
</h2>
|
||||
<div className="flex items-center gap-3">
|
||||
<span
|
||||
aria-hidden
|
||||
className="flex h-12 w-12 items-center justify-center rounded-full bg-primary-100 text-sm font-semibold text-primary-700 dark:bg-primary-900/40 dark:text-primary-200"
|
||||
>
|
||||
{initialsOf(employerName)}
|
||||
</span>
|
||||
<div className="flex flex-col">
|
||||
<span className="font-semibold text-slate-900 dark:text-slate-100">
|
||||
{employerName}
|
||||
</span>
|
||||
<span className="text-sm text-slate-600 dark:text-slate-400">
|
||||
{employer?.industry ?? 'AI'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<dl className="flex flex-col gap-1.5 text-sm">
|
||||
{employer && (
|
||||
<>
|
||||
<div className="flex justify-between">
|
||||
<dt className="text-slate-500 dark:text-slate-400">Size</dt>
|
||||
<dd className="text-slate-800 dark:text-slate-200">{employer.size}</dd>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<dt className="text-slate-500 dark:text-slate-400">Location</dt>
|
||||
<dd className="text-slate-800 dark:text-slate-200">{employer.location}</dd>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</dl>
|
||||
{employer && (
|
||||
<Link href={`/marketplace/employers/${employer.id}`}>
|
||||
<Button variant="outline" size="sm" icon={<Building2 className="h-3.5 w-3.5" />} type="button">
|
||||
View Company
|
||||
</Button>
|
||||
</Link>
|
||||
)}
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardBody className="flex flex-col gap-3">
|
||||
<h2 className="text-sm font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">
|
||||
Related jobs
|
||||
</h2>
|
||||
<div className="flex flex-col gap-3">
|
||||
{relatedJobs.map((r) => (
|
||||
<Link
|
||||
key={r.id}
|
||||
href={`/marketplace/jobs/${r.id}`}
|
||||
className="group flex flex-col gap-1 rounded-md border border-slate-200 p-3 transition-colors hover:bg-slate-50 dark:border-slate-800 dark:hover:bg-slate-800"
|
||||
>
|
||||
<span className="text-sm font-semibold text-slate-900 group-hover:text-primary-700 dark:text-slate-100">
|
||||
{r.title}
|
||||
</span>
|
||||
<span className="text-xs text-slate-600 dark:text-slate-400">{r.location}</span>
|
||||
<span className="text-xs text-slate-600 dark:text-slate-400">
|
||||
{formatSalaryRange(r.salaryMin, r.salaryMax)} · {r.matchScore}% match
|
||||
</span>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/** Turn a competency code like "stack-orchestration-c001" into readable prose. */
|
||||
function humanizeCompetency(code: string): string {
|
||||
const parts = code.split('-');
|
||||
if (parts.length >= 3) {
|
||||
const stack = parts[1];
|
||||
const capLabel = `Capability ${parts[parts.length - 1].toUpperCase()}`;
|
||||
const stackPretty = stack.charAt(0).toUpperCase() + stack.slice(1);
|
||||
return `${stackPretty} · ${capLabel}`;
|
||||
}
|
||||
return code;
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
import { Badge } from '@nextcraft/ui';
|
||||
import { employers, jobs } from '@nextcraft/mock-data';
|
||||
import { JobFilters } from '../../../components/marketplace/job-filters';
|
||||
|
||||
export default function MarketplaceHomePage() {
|
||||
const employerNames: Record<string, string> = Object.fromEntries(
|
||||
employers.map((e) => [e.id, e.name]),
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
<header className="flex flex-col gap-2">
|
||||
<Badge variant="info">Marketplace · Job Board</Badge>
|
||||
<h1 className="text-3xl font-bold tracking-tight text-slate-900 dark:text-slate-100">
|
||||
AI-Native Job Board
|
||||
</h1>
|
||||
<p className="max-w-2xl text-slate-600 dark:text-slate-400">
|
||||
AI-credentialed talent meets AI-era employers. Every listing shows a live AI match
|
||||
score based on the skills recruiters need most right now.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<JobFilters jobs={jobs} employerNames={employerNames} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,287 @@
|
||||
import { Check, Crown, Star, X, Zap } from 'lucide-react';
|
||||
import { Badge, Button, Card, CardBody } from '@nextcraft/ui';
|
||||
|
||||
interface JobPricingPlan {
|
||||
id: string;
|
||||
name: string;
|
||||
price: string;
|
||||
cadence: string;
|
||||
features: string[];
|
||||
cta: string;
|
||||
popular?: boolean;
|
||||
icon: React.ReactNode;
|
||||
}
|
||||
|
||||
interface TalentPricingPlan {
|
||||
id: string;
|
||||
name: string;
|
||||
price: string;
|
||||
cadence: string;
|
||||
features: string[];
|
||||
cta: string;
|
||||
popular?: boolean;
|
||||
icon: React.ReactNode;
|
||||
}
|
||||
|
||||
const JOB_PLANS: JobPricingPlan[] = [
|
||||
{
|
||||
id: 'single',
|
||||
name: 'Single Post',
|
||||
price: '$49',
|
||||
cadence: 'one-time',
|
||||
icon: <Zap className="h-4 w-4" />,
|
||||
features: ['1 job posting', '30 days live', 'Basic analytics', 'Standard placement'],
|
||||
cta: 'Post a Job',
|
||||
},
|
||||
{
|
||||
id: 'bundle',
|
||||
name: 'Bundle',
|
||||
price: '$399',
|
||||
cadence: 'one-time',
|
||||
icon: <Star className="h-4 w-4" />,
|
||||
features: ['10 job postings', '90 days each', 'Advanced analytics', 'Priority placement'],
|
||||
cta: 'Buy Bundle',
|
||||
popular: true,
|
||||
},
|
||||
{
|
||||
id: 'enterprise-jobs',
|
||||
name: 'Enterprise',
|
||||
price: 'Custom',
|
||||
cadence: 'annual',
|
||||
icon: <Crown className="h-4 w-4" />,
|
||||
features: [
|
||||
'Unlimited postings',
|
||||
'Dedicated account manager',
|
||||
'API access',
|
||||
'Custom branding',
|
||||
],
|
||||
cta: 'Contact Sales',
|
||||
},
|
||||
];
|
||||
|
||||
const TALENT_PLANS: TalentPricingPlan[] = [
|
||||
{
|
||||
id: 'starter',
|
||||
name: 'Starter',
|
||||
price: '$99',
|
||||
cadence: '/mo',
|
||||
icon: <Zap className="h-4 w-4" />,
|
||||
features: ['Browse talent database', '10 candidate views/mo', 'Basic filters'],
|
||||
cta: 'Get Starter',
|
||||
},
|
||||
{
|
||||
id: 'pro',
|
||||
name: 'Pro',
|
||||
price: '$299',
|
||||
cadence: '/mo',
|
||||
icon: <Star className="h-4 w-4" />,
|
||||
features: [
|
||||
'Unlimited views',
|
||||
'AI matching',
|
||||
'Advanced filters',
|
||||
'Saved searches',
|
||||
],
|
||||
cta: 'Get Pro',
|
||||
popular: true,
|
||||
},
|
||||
{
|
||||
id: 'enterprise-talent',
|
||||
name: 'Enterprise',
|
||||
price: 'Custom',
|
||||
cadence: 'annual',
|
||||
icon: <Crown className="h-4 w-4" />,
|
||||
features: ['Everything in Pro', 'API access', 'Bulk export', 'Dedicated CSM'],
|
||||
cta: 'Contact Sales',
|
||||
},
|
||||
];
|
||||
|
||||
interface FeatureRow {
|
||||
feature: string;
|
||||
values: Array<string | boolean>;
|
||||
}
|
||||
|
||||
const COMPARISON: FeatureRow[] = [
|
||||
{ feature: 'Job postings', values: ['1', '10', 'Unlimited'] },
|
||||
{ feature: 'Posting duration', values: ['30 days', '90 days', 'Custom'] },
|
||||
{ feature: 'Analytics', values: ['Basic', 'Advanced', 'Advanced + Custom'] },
|
||||
{ feature: 'Priority placement', values: [false, true, true] },
|
||||
{ feature: 'Account manager', values: [false, false, true] },
|
||||
{ feature: 'API access', values: [false, false, true] },
|
||||
{ feature: 'Custom branding', values: [false, false, true] },
|
||||
{ feature: 'Talent views', values: ['10/mo', 'Unlimited', 'Unlimited'] },
|
||||
{ feature: 'AI matching', values: [false, true, true] },
|
||||
{ feature: 'Saved searches', values: [false, true, true] },
|
||||
{ feature: 'Bulk export', values: [false, false, true] },
|
||||
];
|
||||
|
||||
export default function PricingPage() {
|
||||
return (
|
||||
<div className="flex flex-col gap-10">
|
||||
<header className="flex flex-col gap-2">
|
||||
<Badge variant="info">Marketplace · Pricing</Badge>
|
||||
<h1 className="text-3xl font-bold tracking-tight text-slate-900 dark:text-slate-100">
|
||||
Pricing
|
||||
</h1>
|
||||
<p className="max-w-2xl text-slate-600 dark:text-slate-400">
|
||||
Hire AI-credentialed talent. Post roles, unlock the talent database, and let AI matching
|
||||
find the right practitioner for your stack.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
{/* Job posting packages */}
|
||||
<section className="flex flex-col gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<h2 className="text-xl font-semibold text-slate-900 dark:text-slate-100">
|
||||
Job Posting Packages
|
||||
</h2>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-3">
|
||||
{JOB_PLANS.map((plan) => (
|
||||
<PricingCard key={plan.id} plan={plan} />
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Talent access plans */}
|
||||
<section className="flex flex-col gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<h2 className="text-xl font-semibold text-slate-900 dark:text-slate-100">
|
||||
Talent Access Plans
|
||||
</h2>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-3">
|
||||
{TALENT_PLANS.map((plan) => (
|
||||
<PricingCard key={plan.id} plan={plan} />
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Feature comparison */}
|
||||
<section className="flex flex-col gap-4">
|
||||
<h2 className="text-xl font-semibold text-slate-900 dark:text-slate-100">
|
||||
Compare features
|
||||
</h2>
|
||||
<Card>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full min-w-[640px] text-sm">
|
||||
<thead>
|
||||
<tr className="border-b border-slate-200 dark:border-slate-800">
|
||||
<th className="p-4 text-left font-semibold text-slate-900 dark:text-slate-100">
|
||||
Feature
|
||||
</th>
|
||||
{COMPARISON_COLUMNS.map((c) => (
|
||||
<th
|
||||
key={c.key}
|
||||
className="p-4 text-left font-semibold text-slate-900 dark:text-slate-100"
|
||||
>
|
||||
{c.label}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{COMPARISON.map((row, i) => (
|
||||
<tr
|
||||
key={row.feature}
|
||||
className={i % 2 === 0 ? '' : 'bg-slate-50 dark:bg-slate-800/40'}
|
||||
>
|
||||
<td className="p-4 text-slate-700 dark:text-slate-300">{row.feature}</td>
|
||||
{row.values.map((v, idx) => (
|
||||
<td key={idx} className="p-4 text-slate-700 dark:text-slate-300">
|
||||
{typeof v === 'boolean' ? (
|
||||
v ? (
|
||||
<span className="inline-flex h-5 w-5 items-center justify-center rounded-full bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300">
|
||||
<Check className="h-3 w-3" />
|
||||
</span>
|
||||
) : (
|
||||
<span className="inline-flex h-5 w-5 items-center justify-center rounded-full bg-slate-100 text-slate-400 dark:bg-slate-800 dark:text-slate-500">
|
||||
<X className="h-3 w-3" />
|
||||
</span>
|
||||
)
|
||||
) : (
|
||||
<span>{v}</span>
|
||||
)}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</Card>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const COMPARISON_COLUMNS = [
|
||||
{ key: 'single', label: 'Single Post' },
|
||||
{ key: 'bundle', label: 'Bundle' },
|
||||
{ key: 'enterprise', label: 'Enterprise' },
|
||||
] as const;
|
||||
|
||||
function PricingCard({
|
||||
plan,
|
||||
}: {
|
||||
plan: JobPricingPlan | TalentPricingPlan;
|
||||
}) {
|
||||
const isPopular = plan.popular;
|
||||
return (
|
||||
<Card
|
||||
className={[
|
||||
'flex h-full flex-col',
|
||||
isPopular
|
||||
? 'border-primary-500 ring-2 ring-primary-500/30 dark:border-primary-400'
|
||||
: '',
|
||||
].join(' ')}
|
||||
>
|
||||
<CardBody className="flex flex-1 flex-col gap-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="inline-flex h-9 w-9 items-center justify-center rounded-lg bg-primary-100 text-primary-700 dark:bg-primary-900/40 dark:text-primary-300">
|
||||
{plan.icon}
|
||||
</span>
|
||||
{isPopular && (
|
||||
<Badge variant="info">
|
||||
<Star className="h-3 w-3" />
|
||||
Most Popular
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<h3 className="text-lg font-semibold text-slate-900 dark:text-slate-100">
|
||||
{plan.name}
|
||||
</h3>
|
||||
<div className="flex items-baseline gap-1">
|
||||
<span className="text-3xl font-bold text-slate-900 dark:text-slate-100">
|
||||
{plan.price}
|
||||
</span>
|
||||
<span className="text-sm text-slate-500 dark:text-slate-400">{plan.cadence}</span>
|
||||
</div>
|
||||
</div>
|
||||
<ul className="flex flex-col gap-2">
|
||||
{plan.features.map((f) => (
|
||||
<li
|
||||
key={f}
|
||||
className="flex items-start gap-2 text-sm text-slate-700 dark:text-slate-300"
|
||||
>
|
||||
<span className="mt-0.5 inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300">
|
||||
<Check className="h-3 w-3" />
|
||||
</span>
|
||||
<span>{f}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="mt-auto pt-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant={isPopular ? 'primary' : 'outline'}
|
||||
size="md"
|
||||
className="w-full"
|
||||
>
|
||||
{plan.cta}
|
||||
</Button>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
@import 'tailwindcss';
|
||||
|
||||
@theme {
|
||||
--font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
|
||||
|
||||
--color-primary-50: #eef2ff;
|
||||
--color-primary-100: #e0e7ff;
|
||||
--color-primary-200: #c7d2fe;
|
||||
--color-primary-300: #a5b4fc;
|
||||
--color-primary-400: #818cf8;
|
||||
--color-primary-500: #6366f1;
|
||||
--color-primary-600: #4f46e5;
|
||||
--color-primary-700: #4338ca;
|
||||
--color-primary-800: #3730a3;
|
||||
--color-primary-900: #312e81;
|
||||
--color-primary-950: #1e1b4b;
|
||||
|
||||
--color-accent-50: #ecfdf5;
|
||||
--color-accent-100: #d1fae5;
|
||||
--color-accent-200: #a7f3d0;
|
||||
--color-accent-300: #6ee7b7;
|
||||
--color-accent-400: #34d399;
|
||||
--color-accent-500: #10b981;
|
||||
--color-accent-600: #059669;
|
||||
--color-accent-700: #047857;
|
||||
--color-accent-800: #065f46;
|
||||
--color-accent-900: #064e3b;
|
||||
--color-accent-950: #022c22;
|
||||
|
||||
--radius-sm: 4px;
|
||||
--radius-md: 8px;
|
||||
--radius-lg: 12px;
|
||||
--radius-xl: 16px;
|
||||
}
|
||||
|
||||
@layer base {
|
||||
html {
|
||||
font-family: var(--font-sans);
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
html.dark {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-white text-slate-900 antialiased;
|
||||
}
|
||||
|
||||
html.dark body {
|
||||
@apply bg-slate-950 text-slate-100;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
import type { Metadata } from 'next';
|
||||
import { Inter } from 'next/font/google';
|
||||
import './globals.css';
|
||||
import { ThemeProvider } from '../components/theme-provider';
|
||||
import { NavigationShell } from '../components/navigation-shell';
|
||||
|
||||
const inter = Inter({ subsets: ['latin'], variable: '--font-sans', display: 'swap' });
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Nextcraft — AI-native outcome school',
|
||||
description:
|
||||
'Prove what you can build, not what you can write. Nextcraft is an AI-native outcome school and talent marketplace prototype.',
|
||||
};
|
||||
|
||||
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<html lang="en" className={inter.variable} suppressHydrationWarning>
|
||||
<body className="font-sans">
|
||||
<ThemeProvider>
|
||||
<NavigationShell>{children}</NavigationShell>
|
||||
</ThemeProvider>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,343 @@
|
||||
'use client';
|
||||
|
||||
import { useCallback, useMemo, useState } from 'react';
|
||||
import { ReactFlow, Background, Controls, MiniMap, ReactFlowProvider, useNodesState, useEdgesState, type Node, type Edge, type NodeMouseHandler } from '@xyflow/react';
|
||||
import '@xyflow/react/dist/style.css';
|
||||
import { competencyStacks, allCompetencies } from '@nextcraft/mock-data';
|
||||
import type { CompetencyStack, Competency } from '@nextcraft/types';
|
||||
|
||||
// Stack color → tailwind-friendly hex (used for node fills + minimap).
|
||||
const STACK_HEX: Record<string, string> = {
|
||||
indigo: '#6366f1',
|
||||
rose: '#f43f5e',
|
||||
violet: '#8b5cf6',
|
||||
emerald: '#10b981',
|
||||
cyan: '#06b6d4',
|
||||
};
|
||||
|
||||
const STACK_BG: Record<string, string> = {
|
||||
indigo: '#eef2ff',
|
||||
rose: '#fff1f2',
|
||||
violet: '#f5f3ff',
|
||||
emerald: '#ecfdf5',
|
||||
cyan: '#ecfeff',
|
||||
};
|
||||
|
||||
interface StackNodeData {
|
||||
label: string;
|
||||
kind: 'stack';
|
||||
stackId: string;
|
||||
description: string;
|
||||
competencyCount: number;
|
||||
targetRoles: string;
|
||||
stackColor: string;
|
||||
[key: string]: unknown;
|
||||
}
|
||||
|
||||
interface CompetencyNodeData {
|
||||
label: string;
|
||||
kind: 'competency';
|
||||
stackId: string;
|
||||
description: string;
|
||||
stackColor: string;
|
||||
prerequisites: string[];
|
||||
learnersMastering: number;
|
||||
[key: string]: unknown;
|
||||
}
|
||||
|
||||
type GraphData = StackNodeData | CompetencyNodeData;
|
||||
type GraphNode = Node<GraphData>;
|
||||
|
||||
function buildGraph(): { nodes: GraphNode[]; edges: Edge[] } {
|
||||
const nodes: GraphNode[] = [];
|
||||
const edges: Edge[] = [];
|
||||
|
||||
// Place stacks in a horizontal row at the top.
|
||||
const stackCount = competencyStacks.length;
|
||||
const stackGap = 280;
|
||||
const stackY = 0;
|
||||
const startX = -((stackCount - 1) * stackGap) / 2;
|
||||
|
||||
competencyStacks.forEach((stack: CompetencyStack, sIdx) => {
|
||||
const x = startX + sIdx * stackGap;
|
||||
const color = STACK_HEX[stack.color] ?? '#6366f1';
|
||||
nodes.push({
|
||||
id: stack.id,
|
||||
type: 'default',
|
||||
position: { x, y: stackY },
|
||||
data: {
|
||||
label: stack.name,
|
||||
kind: 'stack',
|
||||
stackId: stack.id,
|
||||
description: stack.description,
|
||||
competencyCount: stack.competencies.length,
|
||||
targetRoles: stack.targetRoles,
|
||||
stackColor: color,
|
||||
},
|
||||
style: {
|
||||
background: STACK_BG[stack.color] ?? '#eef2ff',
|
||||
border: `2px solid ${color}`,
|
||||
color: '#0f172a',
|
||||
borderRadius: 12,
|
||||
padding: 10,
|
||||
fontWeight: 600,
|
||||
fontSize: 13,
|
||||
width: 220,
|
||||
textAlign: 'center',
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
// Place competencies below their stack in a vertical column.
|
||||
competencyStacks.forEach((stack, sIdx) => {
|
||||
const stackX = startX + sIdx * stackGap;
|
||||
const color = STACK_HEX[stack.color] ?? '#6366f1';
|
||||
stack.competencies.forEach((comp: Competency, cIdx) => {
|
||||
// Show up to 3 competencies per stack in the graph (10-15 total).
|
||||
if (cIdx >= 3) return;
|
||||
const compId = comp.id;
|
||||
const y = 160 + cIdx * 90;
|
||||
nodes.push({
|
||||
id: compId,
|
||||
type: 'default',
|
||||
position: { x: stackX + 30, y },
|
||||
data: {
|
||||
label: comp.name,
|
||||
kind: 'competency',
|
||||
stackId: stack.id,
|
||||
description: comp.description,
|
||||
stackColor: color,
|
||||
prerequisites: comp.prerequisites,
|
||||
learnersMastering: 12 + ((cIdx + sIdx) % 40),
|
||||
},
|
||||
style: {
|
||||
background: '#ffffff',
|
||||
border: `1.5px solid ${color}`,
|
||||
color: '#334155',
|
||||
borderRadius: 8,
|
||||
padding: 8,
|
||||
fontSize: 11,
|
||||
width: 200,
|
||||
},
|
||||
});
|
||||
|
||||
// Edge: competency → parent stack.
|
||||
edges.push({
|
||||
id: `e-${compId}-${stack.id}`,
|
||||
source: compId,
|
||||
target: stack.id,
|
||||
style: { stroke: color, strokeWidth: 1.5 },
|
||||
type: 'smoothstep',
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// A few cross-stack dependency edges between competencies.
|
||||
const crossDeps: Array<{ from: string; to: string }> = [
|
||||
{ from: 'stack-orchestration-c001', to: 'stack-safety-c001' },
|
||||
{ from: 'stack-orchestration-c005', to: 'stack-science-c001' },
|
||||
{ from: 'stack-designer-c001', to: 'stack-orchestration-c001' },
|
||||
];
|
||||
crossDeps.forEach((d, i) => {
|
||||
const fromComp = allCompetencies.find((c) => c.id === d.from);
|
||||
const toComp = allCompetencies.find((c) => c.id === d.to);
|
||||
if (!fromComp || !toComp) return;
|
||||
if (!nodes.find((n) => n.id === d.from) || !nodes.find((n) => n.id === d.to)) return;
|
||||
edges.push({
|
||||
id: `cross-${i}`,
|
||||
source: d.from,
|
||||
target: d.to,
|
||||
style: { stroke: '#94a3b8', strokeWidth: 1.5, strokeDasharray: '4 3' },
|
||||
type: 'smoothstep',
|
||||
animated: true,
|
||||
});
|
||||
});
|
||||
|
||||
return { nodes, edges };
|
||||
}
|
||||
|
||||
interface SelectedStackInfo {
|
||||
kind: 'stack';
|
||||
label: string;
|
||||
description: string;
|
||||
competencyCount: number;
|
||||
targetRoles: string;
|
||||
stackColor: string;
|
||||
}
|
||||
|
||||
interface SelectedCompetencyInfo {
|
||||
kind: 'competency';
|
||||
label: string;
|
||||
description: string;
|
||||
stackId: string;
|
||||
stackName: string;
|
||||
stackColor: string;
|
||||
prerequisites: string[];
|
||||
learnersMastering: number;
|
||||
}
|
||||
|
||||
type SelectedInfo = SelectedStackInfo | SelectedCompetencyInfo | null;
|
||||
|
||||
function GraphInner() {
|
||||
const initial = useMemo(() => buildGraph(), []);
|
||||
const [nodes, , onNodesChange] = useNodesState<GraphNode>(initial.nodes);
|
||||
const [edges, , onEdgesChange] = useEdgesState(initial.edges);
|
||||
const [selected, setSelected] = useState<SelectedInfo>(null);
|
||||
|
||||
const handleNodeClick: NodeMouseHandler = useCallback((_evt, node) => {
|
||||
const data = node.data as StackNodeData | CompetencyNodeData;
|
||||
if (data.kind === 'stack') {
|
||||
setSelected({
|
||||
kind: 'stack',
|
||||
label: data.label,
|
||||
description: data.description,
|
||||
competencyCount: data.competencyCount,
|
||||
targetRoles: data.targetRoles,
|
||||
stackColor: data.stackColor,
|
||||
});
|
||||
} else {
|
||||
const stackName =
|
||||
competencyStacks.find((s) => s.id === data.stackId)?.name ?? data.stackId;
|
||||
setSelected({
|
||||
kind: 'competency',
|
||||
label: data.label,
|
||||
description: data.description,
|
||||
stackId: data.stackId,
|
||||
stackName,
|
||||
stackColor: data.stackColor,
|
||||
prerequisites: data.prerequisites,
|
||||
learnersMastering: data.learnersMastering,
|
||||
});
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="flex h-[640px] w-full flex-col gap-4 lg:flex-row">
|
||||
<div className="relative h-[400px] flex-1 overflow-hidden rounded-lg border border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-900 lg:h-auto">
|
||||
<ReactFlow
|
||||
nodes={nodes}
|
||||
edges={edges}
|
||||
onNodesChange={onNodesChange}
|
||||
onEdgesChange={onEdgesChange}
|
||||
onNodeClick={handleNodeClick}
|
||||
fitView
|
||||
fitViewOptions={{ padding: 0.2 }}
|
||||
minZoom={0.2}
|
||||
maxZoom={2}
|
||||
proOptions={{ hideAttribution: true }}
|
||||
>
|
||||
<Background gap={16} size={1} />
|
||||
<Controls showInteractive={false} />
|
||||
<MiniMap
|
||||
pannable
|
||||
zoomable
|
||||
nodeColor={(n) => {
|
||||
const d = n.data as StackNodeData | CompetencyNodeData;
|
||||
return d.stackColor ?? '#94a3b8';
|
||||
}}
|
||||
maskColor="rgba(241, 245, 249, 0.7)"
|
||||
/>
|
||||
</ReactFlow>
|
||||
</div>
|
||||
|
||||
{/* Detail panel */}
|
||||
<aside className="w-full shrink-0 lg:w-80">
|
||||
<div className="flex h-full flex-col gap-3 rounded-lg border border-slate-200 bg-white p-5 dark:border-slate-800 dark:bg-slate-900">
|
||||
{!selected ? (
|
||||
<div className="flex h-full flex-col items-center justify-center gap-2 text-center text-sm text-slate-500 dark:text-slate-400">
|
||||
<span className="inline-flex h-10 w-10 items-center justify-center rounded-full bg-slate-100 dark:bg-slate-800">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
|
||||
<circle cx="12" cy="12" r="2" />
|
||||
<path d="M5 7h14M5 12h14M5 17h14" />
|
||||
</svg>
|
||||
</span>
|
||||
<p>Select a node to view details.</p>
|
||||
</div>
|
||||
) : selected.kind === 'stack' ? (
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<span
|
||||
className="inline-block h-3 w-3 rounded-full"
|
||||
style={{ background: selected.stackColor }}
|
||||
aria-hidden
|
||||
/>
|
||||
<span className="text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">
|
||||
Stack
|
||||
</span>
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-slate-900 dark:text-slate-100">
|
||||
{selected.label}
|
||||
</h3>
|
||||
<p className="text-sm text-slate-600 dark:text-slate-400">
|
||||
{selected.description}
|
||||
</p>
|
||||
<dl className="flex flex-col gap-2 border-t border-slate-200 pt-3 text-sm dark:border-slate-800">
|
||||
<div className="flex justify-between">
|
||||
<dt className="text-slate-500 dark:text-slate-400">Competencies</dt>
|
||||
<dd className="font-semibold text-slate-900 dark:text-slate-100">
|
||||
{selected.competencyCount}
|
||||
</dd>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<dt className="text-slate-500 dark:text-slate-400">Target roles</dt>
|
||||
<dd className="text-slate-800 dark:text-slate-200">
|
||||
{selected.targetRoles}
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<span
|
||||
className="inline-block h-3 w-3 rounded-full"
|
||||
style={{ background: selected.stackColor }}
|
||||
aria-hidden
|
||||
/>
|
||||
<span className="text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">
|
||||
Competency
|
||||
</span>
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-slate-900 dark:text-slate-100">
|
||||
{selected.label}
|
||||
</h3>
|
||||
<p className="text-sm text-slate-600 dark:text-slate-400">
|
||||
{selected.description}
|
||||
</p>
|
||||
<dl className="flex flex-col gap-2 border-t border-slate-200 pt-3 text-sm dark:border-slate-800">
|
||||
<div className="flex flex-col gap-1">
|
||||
<dt className="text-slate-500 dark:text-slate-400">Stack</dt>
|
||||
<dd className="text-slate-800 dark:text-slate-200">
|
||||
{selected.stackName}
|
||||
</dd>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<dt className="text-slate-500 dark:text-slate-400">Learners mastering</dt>
|
||||
<dd className="font-semibold text-slate-900 dark:text-slate-100">
|
||||
{selected.learnersMastering}
|
||||
</dd>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<dt className="text-slate-500 dark:text-slate-400">Prerequisites</dt>
|
||||
<dd className="text-slate-800 dark:text-slate-200">
|
||||
{selected.prerequisites.length === 0
|
||||
? 'None'
|
||||
: `${selected.prerequisites.length} prerequisite(s)`}
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function CompetencyGraph() {
|
||||
return (
|
||||
<ReactFlowProvider>
|
||||
<GraphInner />
|
||||
</ReactFlowProvider>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,197 @@
|
||||
'use client';
|
||||
|
||||
import { X, Mail, CalendarDays, GraduationCap, Award, CheckCircle, Circle, Lock } from 'lucide-react';
|
||||
import { Badge } from '@nextcraft/ui';
|
||||
import type { AdminLearner } from '@nextcraft/mock-data';
|
||||
|
||||
export interface LearnerDetailPanelProps {
|
||||
learner: AdminLearner | null;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
const STATUS_CLASSES: Record<string, string> = {
|
||||
mastered: 'text-emerald-600 dark:text-emerald-400',
|
||||
in_progress: 'text-amber-600 dark:text-amber-400',
|
||||
available: 'text-slate-500 dark:text-slate-400',
|
||||
locked: 'text-slate-300 dark:text-slate-600',
|
||||
};
|
||||
|
||||
const STATUS_LABEL: Record<string, string> = {
|
||||
mastered: 'Mastered',
|
||||
in_progress: 'In Progress',
|
||||
available: 'Available',
|
||||
locked: 'Locked',
|
||||
};
|
||||
|
||||
function formatDate(iso: string): string {
|
||||
const d = new Date(iso);
|
||||
return d.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' });
|
||||
}
|
||||
|
||||
export function LearnerDetailPanel({ learner, onClose }: LearnerDetailPanelProps) {
|
||||
if (!learner) return null;
|
||||
|
||||
const masteredCount = learner.masteredCount;
|
||||
const total = learner.totalCompetencies;
|
||||
const pct = learner.progressPct;
|
||||
|
||||
return (
|
||||
<div
|
||||
className="fixed inset-0 z-50 flex justify-end bg-slate-900/40 backdrop-blur-sm md:inset-y-0 md:right-0 md:w-[480px]"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label={`Learner details for ${learner.name}`}
|
||||
>
|
||||
<div className="flex h-full w-full flex-col overflow-y-auto bg-white shadow-2xl dark:bg-slate-900 md:w-[480px]">
|
||||
{/* Header */}
|
||||
<div className="flex items-start justify-between border-b border-slate-200 p-5 dark:border-slate-800">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="inline-flex h-12 w-12 items-center justify-center rounded-full bg-primary-100 text-sm font-semibold text-primary-700 dark:bg-primary-900/40 dark:text-primary-200">
|
||||
{initials(learner.name)}
|
||||
</span>
|
||||
<div>
|
||||
<h2 className="text-lg font-bold text-slate-900 dark:text-slate-100">
|
||||
{learner.name}
|
||||
</h2>
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400">
|
||||
{learner.stackName}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
aria-label="Close detail panel"
|
||||
className="rounded-md p-1.5 text-slate-500 transition-colors hover:bg-slate-100 hover:text-slate-700 dark:hover:bg-slate-800 dark:hover:text-slate-200"
|
||||
>
|
||||
<X className="h-5 w-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Body */}
|
||||
<div className="flex flex-col gap-6 p-5">
|
||||
{/* Profile */}
|
||||
<section className="flex flex-col gap-2">
|
||||
<h3 className="text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">
|
||||
Profile
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 gap-2 text-sm">
|
||||
<div className="flex items-center gap-2 text-slate-700 dark:text-slate-200">
|
||||
<Mail className="h-4 w-4 text-slate-400" aria-hidden />
|
||||
<span>{learner.email}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-slate-700 dark:text-slate-200">
|
||||
<CalendarDays className="h-4 w-4 text-slate-400" aria-hidden />
|
||||
<span>Joined {formatDate(learner.joinedAt)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Progress */}
|
||||
<section className="flex flex-col gap-2">
|
||||
<h3 className="text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">
|
||||
Progress Tracking
|
||||
</h3>
|
||||
<div className="rounded-lg border border-slate-200 p-4 dark:border-slate-800">
|
||||
<div className="mb-2 flex items-end justify-between">
|
||||
<span className="text-sm text-slate-600 dark:text-slate-300">
|
||||
{masteredCount} of {total} competencies mastered
|
||||
</span>
|
||||
<span className="text-2xl font-bold text-slate-900 dark:text-slate-100">
|
||||
{pct}%
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-2.5 w-full overflow-hidden rounded-full bg-slate-100 dark:bg-slate-800">
|
||||
<div
|
||||
className="h-full rounded-full bg-primary-600 transition-all"
|
||||
style={{ width: `${pct}%` }}
|
||||
aria-label={`${pct}% mastered`}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Competencies */}
|
||||
<section className="flex flex-col gap-2">
|
||||
<h3 className="text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">
|
||||
Competency Completion
|
||||
</h3>
|
||||
<ul className="flex flex-col divide-y divide-slate-100 rounded-lg border border-slate-200 dark:divide-slate-800 dark:border-slate-800">
|
||||
{learner.competencies.map((c) => {
|
||||
const Icon =
|
||||
c.status === 'mastered'
|
||||
? CheckCircle
|
||||
: c.status === 'locked'
|
||||
? Lock
|
||||
: Circle;
|
||||
return (
|
||||
<li
|
||||
key={c.id}
|
||||
className="flex items-center gap-3 px-3 py-2.5"
|
||||
>
|
||||
<Icon
|
||||
className={`h-4 w-4 shrink-0 ${STATUS_CLASSES[c.status]}`}
|
||||
aria-hidden
|
||||
/>
|
||||
<span className="flex-1 text-sm text-slate-700 dark:text-slate-200">
|
||||
{c.name}
|
||||
</span>
|
||||
<span className={`text-xs font-medium ${STATUS_CLASSES[c.status]}`}>
|
||||
{STATUS_LABEL[c.status]}
|
||||
</span>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
{/* Credentials */}
|
||||
<section className="flex flex-col gap-2">
|
||||
<h3 className="text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">
|
||||
Credential Issuance Log
|
||||
</h3>
|
||||
{learner.credentials.length === 0 ? (
|
||||
<p className="rounded-lg border border-dashed border-slate-300 p-4 text-sm text-slate-500 dark:border-slate-700 dark:text-slate-400">
|
||||
No microcredentials issued yet.
|
||||
</p>
|
||||
) : (
|
||||
<ul className="flex flex-col gap-2">
|
||||
{learner.credentials.map((cr) => (
|
||||
<li
|
||||
key={cr.id}
|
||||
className="flex items-start gap-3 rounded-lg border border-slate-200 p-3 dark:border-slate-800"
|
||||
>
|
||||
<span className="mt-0.5 inline-flex h-7 w-7 items-center justify-center rounded-full bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300">
|
||||
<Award className="h-3.5 w-3.5" aria-hidden />
|
||||
</span>
|
||||
<div className="flex flex-1 flex-col gap-0.5">
|
||||
<p className="text-sm font-medium text-slate-900 dark:text-slate-100">
|
||||
{cr.name}
|
||||
</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="flex items-center gap-1 text-xs text-slate-500 dark:text-slate-400">
|
||||
<GraduationCap className="h-3 w-3" aria-hidden />
|
||||
Issued {formatDate(cr.issuedAt)}
|
||||
</span>
|
||||
<Badge variant="success">{cr.score}/100</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function initials(name: string): string {
|
||||
return name
|
||||
.split(' ')
|
||||
.filter(Boolean)
|
||||
.slice(0, 2)
|
||||
.map((p) => p[0]?.toUpperCase() ?? '')
|
||||
.join('');
|
||||
}
|
||||
@@ -0,0 +1,229 @@
|
||||
'use client';
|
||||
|
||||
import { useMemo, useState } from 'react';
|
||||
import { Search } from 'lucide-react';
|
||||
import { Badge, Input } from '@nextcraft/ui';
|
||||
import type { AdminLearner, LearnerStatus } from '@nextcraft/mock-data';
|
||||
import { competencyStacks } from '@nextcraft/mock-data';
|
||||
import { LearnerDetailPanel } from './learner-detail-panel';
|
||||
|
||||
export interface LearnerTableProps {
|
||||
learners: AdminLearner[];
|
||||
}
|
||||
|
||||
const STATUS_VARIANT: Record<LearnerStatus, 'success' | 'default' | 'warning'> = {
|
||||
active: 'success',
|
||||
completed: 'default',
|
||||
paused: 'warning',
|
||||
};
|
||||
|
||||
const STATUS_LABEL: Record<LearnerStatus, string> = {
|
||||
active: 'Active',
|
||||
completed: 'Completed',
|
||||
paused: 'Paused',
|
||||
};
|
||||
|
||||
function formatDate(iso: string): string {
|
||||
return new Date(iso).toLocaleDateString('en-US', {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
});
|
||||
}
|
||||
|
||||
function initials(name: string): string {
|
||||
return name
|
||||
.split(' ')
|
||||
.filter(Boolean)
|
||||
.slice(0, 2)
|
||||
.map((p) => p[0]?.toUpperCase() ?? '')
|
||||
.join('');
|
||||
}
|
||||
|
||||
export function LearnerTable({ learners }: LearnerTableProps) {
|
||||
const [query, setQuery] = useState('');
|
||||
const [stackFilter, setStackFilter] = useState<string>('all');
|
||||
const [selectedId, setSelectedId] = useState<string | null>(null);
|
||||
|
||||
const filtered = useMemo(() => {
|
||||
const q = query.trim().toLowerCase();
|
||||
return learners.filter((l) => {
|
||||
if (q && !`${l.name} ${l.email}`.toLowerCase().includes(q)) return false;
|
||||
if (stackFilter !== 'all' && l.stackId !== stackFilter) return false;
|
||||
return true;
|
||||
});
|
||||
}, [learners, query, stackFilter]);
|
||||
|
||||
const selected = learners.find((l) => l.id === selectedId) ?? null;
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4">
|
||||
{/* Top bar */}
|
||||
<div className="flex flex-col gap-3 sm:flex-row sm:items-center">
|
||||
<div className="sm:max-w-xs sm:flex-1">
|
||||
<Input
|
||||
name="learner-search"
|
||||
placeholder="Search by name or email..."
|
||||
icon={<Search className="h-4 w-4" />}
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
aria-label="Search learners"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<label htmlFor="stack-filter" className="text-sm text-slate-600 dark:text-slate-300">
|
||||
Stack
|
||||
</label>
|
||||
<select
|
||||
id="stack-filter"
|
||||
aria-label="Filter by competency stack"
|
||||
value={stackFilter}
|
||||
onChange={(e) => setStackFilter(e.target.value)}
|
||||
className="h-10 w-full rounded-md border border-slate-300 bg-white px-3 text-sm text-slate-900 focus:border-primary-500 focus:ring-2 focus:ring-primary-500/30 focus:outline-none dark:border-slate-700 dark:bg-slate-800 dark:text-slate-100 sm:w-auto"
|
||||
>
|
||||
<option value="all">All stacks</option>
|
||||
{competencyStacks.map((s) => (
|
||||
<option key={s.id} value={s.id}>
|
||||
{s.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400">
|
||||
Showing{' '}
|
||||
<span className="font-semibold text-slate-700 dark:text-slate-200">
|
||||
{filtered.length}
|
||||
</span>{' '}
|
||||
of {learners.length} learners
|
||||
</p>
|
||||
|
||||
{/* Desktop table */}
|
||||
<div className="hidden overflow-hidden rounded-lg border border-slate-200 dark:border-slate-800 md:block">
|
||||
<table className="w-full text-sm">
|
||||
<thead className="bg-slate-50 text-xs uppercase tracking-wide text-slate-500 dark:bg-slate-800/60 dark:text-slate-400">
|
||||
<tr>
|
||||
<th className="px-4 py-3 text-left font-semibold">Name</th>
|
||||
<th className="px-4 py-3 text-left font-semibold">Email</th>
|
||||
<th className="px-4 py-3 text-left font-semibold">Stack</th>
|
||||
<th className="px-4 py-3 text-left font-semibold">Progress</th>
|
||||
<th className="px-4 py-3 text-left font-semibold">Status</th>
|
||||
<th className="px-4 py-3 text-left font-semibold">Joined</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-100 bg-white dark:divide-slate-800 dark:bg-slate-900">
|
||||
{filtered.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={6} className="px-4 py-10 text-center text-slate-500 dark:text-slate-400">
|
||||
No learners match your filters.
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
filtered.map((l) => (
|
||||
<tr
|
||||
key={l.id}
|
||||
onClick={() => setSelectedId(l.id)}
|
||||
className="cursor-pointer transition-colors hover:bg-slate-50 dark:hover:bg-slate-800/60"
|
||||
>
|
||||
<td className="px-4 py-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="inline-flex h-8 w-8 items-center justify-center rounded-full bg-primary-100 text-xs font-semibold text-primary-700 dark:bg-primary-900/40 dark:text-primary-200">
|
||||
{initials(l.name)}
|
||||
</span>
|
||||
<span className="font-medium text-slate-900 dark:text-slate-100">
|
||||
{l.name}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-slate-600 dark:text-slate-400">
|
||||
{l.email}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-slate-600 dark:text-slate-400">
|
||||
{l.stackName}
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="h-2 w-24 overflow-hidden rounded-full bg-slate-100 dark:bg-slate-800">
|
||||
<div
|
||||
className="h-full rounded-full bg-primary-500"
|
||||
style={{ width: `${l.progressPct}%` }}
|
||||
/>
|
||||
</div>
|
||||
<span className="text-xs font-medium text-slate-700 dark:text-slate-300">
|
||||
{l.progressPct}%
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<Badge variant={STATUS_VARIANT[l.status]}>
|
||||
{STATUS_LABEL[l.status]}
|
||||
</Badge>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-slate-600 dark:text-slate-400">
|
||||
{formatDate(l.joinedAt)}
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* Mobile card list */}
|
||||
<div className="flex flex-col gap-3 md:hidden">
|
||||
{filtered.length === 0 ? (
|
||||
<div className="rounded-lg border border-dashed border-slate-300 p-8 text-center text-sm text-slate-500 dark:border-slate-700 dark:text-slate-400">
|
||||
No learners match your filters.
|
||||
</div>
|
||||
) : (
|
||||
filtered.map((l) => (
|
||||
<button
|
||||
key={l.id}
|
||||
type="button"
|
||||
onClick={() => setSelectedId(l.id)}
|
||||
className="flex flex-col gap-2 rounded-lg border border-slate-200 bg-white p-4 text-left shadow-sm transition-colors hover:bg-slate-50 dark:border-slate-800 dark:bg-slate-900 dark:hover:bg-slate-800/60"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="inline-flex h-9 w-9 items-center justify-center rounded-full bg-primary-100 text-xs font-semibold text-primary-700 dark:bg-primary-900/40 dark:text-primary-200">
|
||||
{initials(l.name)}
|
||||
</span>
|
||||
<div className="flex flex-1 flex-col">
|
||||
<span className="font-medium text-slate-900 dark:text-slate-100">
|
||||
{l.name}
|
||||
</span>
|
||||
<span className="text-xs text-slate-500 dark:text-slate-400">
|
||||
{l.email}
|
||||
</span>
|
||||
</div>
|
||||
<Badge variant={STATUS_VARIANT[l.status]}>
|
||||
{STATUS_LABEL[l.status]}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-2 text-xs text-slate-600 dark:text-slate-400">
|
||||
<span>{l.stackName}</span>
|
||||
<span>Joined {formatDate(l.joinedAt)}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="h-2 flex-1 overflow-hidden rounded-full bg-slate-100 dark:bg-slate-800">
|
||||
<div
|
||||
className="h-full rounded-full bg-primary-500"
|
||||
style={{ width: `${l.progressPct}%` }}
|
||||
/>
|
||||
</div>
|
||||
<span className="text-xs font-medium text-slate-700 dark:text-slate-300">
|
||||
{l.progressPct}%
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
|
||||
<LearnerDetailPanel
|
||||
learner={selected}
|
||||
onClose={() => setSelectedId(null)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,288 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import {
|
||||
CheckCircle,
|
||||
FileText,
|
||||
Flag,
|
||||
Shield,
|
||||
XCircle,
|
||||
Building2,
|
||||
} from 'lucide-react';
|
||||
import { Badge } from '@nextcraft/ui';
|
||||
import {
|
||||
employerVerificationQueue,
|
||||
flaggedContentQueue,
|
||||
jobReviewQueue,
|
||||
} from '@nextcraft/mock-data';
|
||||
import type {
|
||||
EmployerVerificationItem,
|
||||
FlaggedContentItem,
|
||||
JobReviewItem,
|
||||
} from '@nextcraft/mock-data';
|
||||
|
||||
type TabId = 'jobs' | 'employers' | 'flagged';
|
||||
|
||||
const TABS: Array<{ id: TabId; label: string }> = [
|
||||
{ id: 'jobs', label: 'Job Posting Review' },
|
||||
{ id: 'employers', label: 'Employer Verification' },
|
||||
{ id: 'flagged', label: 'Flagged Content' },
|
||||
];
|
||||
|
||||
const STATUS_VARIANT = { ok: 'success', warn: 'warning', err: 'error' } as const;
|
||||
|
||||
export function ModerationTabs() {
|
||||
const [tab, setTab] = useState<TabId>('jobs');
|
||||
|
||||
const counts: Record<TabId, number> = {
|
||||
jobs: jobReviewQueue.length,
|
||||
employers: employerVerificationQueue.length,
|
||||
flagged: flaggedContentQueue.length,
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-5">
|
||||
{/* Tab bar */}
|
||||
<div className="flex flex-wrap gap-1 rounded-lg border border-slate-200 bg-white p-1 dark:border-slate-800 dark:bg-slate-900">
|
||||
{TABS.map((t) => {
|
||||
const active = t.id === tab;
|
||||
return (
|
||||
<button
|
||||
key={t.id}
|
||||
type="button"
|
||||
onClick={() => setTab(t.id)}
|
||||
className={`inline-flex items-center gap-2 rounded-md px-3.5 py-2 text-sm font-medium transition-colors ${
|
||||
active
|
||||
? 'bg-primary-600 text-white shadow-sm'
|
||||
: 'text-slate-700 hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-slate-800'
|
||||
}`}
|
||||
aria-pressed={active}
|
||||
>
|
||||
{t.label}
|
||||
<span
|
||||
className={`inline-flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-xs font-semibold ${
|
||||
active
|
||||
? 'bg-white/20 text-white'
|
||||
: 'bg-slate-200 text-slate-700 dark:bg-slate-700 dark:text-slate-200'
|
||||
}`}
|
||||
>
|
||||
{counts[t.id]}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{tab === 'jobs' && <JobReviewTab />}
|
||||
{tab === 'employers' && <EmployerVerificationTab />}
|
||||
{tab === 'flagged' && <FlaggedContentTab />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Tab 1: Job Posting Review
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function JobReviewTab() {
|
||||
return (
|
||||
<div className="flex flex-col gap-3">
|
||||
{jobReviewQueue.map((item) => (
|
||||
<JobReviewCard key={item.id} item={item} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function JobReviewCard({ item }: { item: JobReviewItem }) {
|
||||
return (
|
||||
<div className="flex flex-col gap-3 rounded-lg border border-slate-200 bg-white p-4 shadow-sm dark:border-slate-800 dark:bg-slate-900">
|
||||
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div className="flex items-start gap-3">
|
||||
<span className="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300">
|
||||
<FileText className="h-5 w-5" />
|
||||
</span>
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<h3 className="text-sm font-semibold text-slate-900 dark:text-slate-100">
|
||||
{item.title}
|
||||
</h3>
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400">
|
||||
{item.employerName} · {item.stackName}
|
||||
</p>
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400">
|
||||
{item.location} · Submitted {formatDate(item.submittedAt)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex h-8 items-center justify-center rounded-md border border-slate-300 px-3 text-xs font-medium text-slate-700 transition-colors hover:bg-slate-50 dark:border-slate-700 dark:text-slate-200 dark:hover:bg-slate-800"
|
||||
>
|
||||
Review
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2 border-t border-slate-100 pt-3 dark:border-slate-800">
|
||||
<ActionButton tone="success" icon={<CheckCircle className="h-3.5 w-3.5" />}>
|
||||
Approve
|
||||
</ActionButton>
|
||||
<ActionButton tone="error" icon={<XCircle className="h-3.5 w-3.5" />}>
|
||||
Reject
|
||||
</ActionButton>
|
||||
<ActionButton tone="warning" icon={<Flag className="h-3.5 w-3.5" />}>
|
||||
Flag
|
||||
</ActionButton>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Tab 2: Employer Verification
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function EmployerVerificationTab() {
|
||||
return (
|
||||
<div className="flex flex-col gap-3">
|
||||
{employerVerificationQueue.map((item) => (
|
||||
<EmployerVerificationCard key={item.id} item={item} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function EmployerVerificationCard({ item }: { item: EmployerVerificationItem }) {
|
||||
return (
|
||||
<div className="flex flex-col gap-3 rounded-lg border border-slate-200 bg-white p-4 shadow-sm dark:border-slate-800 dark:bg-slate-900">
|
||||
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div className="flex items-start gap-3">
|
||||
<span className="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary-100 text-sm font-semibold text-primary-700 dark:bg-primary-900/40 dark:text-primary-200">
|
||||
{item.logoInitials}
|
||||
</span>
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<h3 className="text-sm font-semibold text-slate-900 dark:text-slate-100">
|
||||
{item.name}
|
||||
</h3>
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400">
|
||||
{item.industry} · {item.location}
|
||||
</p>
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400">
|
||||
Submitted {formatDate(item.submittedAt)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex h-8 items-center justify-center rounded-md border border-slate-300 px-3 text-xs font-medium text-slate-700 transition-colors hover:bg-slate-50 dark:border-slate-700 dark:text-slate-200 dark:hover:bg-slate-800"
|
||||
>
|
||||
Review Documents
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2 border-t border-slate-100 pt-3 dark:border-slate-800">
|
||||
<ActionButton tone="success" icon={<CheckCircle className="h-3.5 w-3.5" />}>
|
||||
Verify
|
||||
</ActionButton>
|
||||
<ActionButton tone="info" icon={<Building2 className="h-3.5 w-3.5" />}>
|
||||
Request More Info
|
||||
</ActionButton>
|
||||
<ActionButton tone="error" icon={<XCircle className="h-3.5 w-3.5" />}>
|
||||
Reject
|
||||
</ActionButton>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Tab 3: Flagged Content
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function FlaggedContentTab() {
|
||||
return (
|
||||
<div className="flex flex-col gap-3">
|
||||
{flaggedContentQueue.map((item) => (
|
||||
<FlaggedContentCard key={item.id} item={item} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function FlaggedContentCard({ item }: { item: FlaggedContentItem }) {
|
||||
return (
|
||||
<div className="flex flex-col gap-3 rounded-lg border border-slate-200 bg-white p-4 shadow-sm dark:border-slate-800 dark:bg-slate-900">
|
||||
<div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
|
||||
<div className="flex items-start gap-3">
|
||||
<span className="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-rose-100 text-rose-700 dark:bg-rose-900/40 dark:text-rose-300">
|
||||
<Shield className="h-5 w-5" />
|
||||
</span>
|
||||
<div className="flex flex-col gap-1">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<h3 className="text-sm font-semibold text-slate-900 dark:text-slate-100">
|
||||
{item.title}
|
||||
</h3>
|
||||
<Badge variant="warning">{item.contentType}</Badge>
|
||||
</div>
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400">
|
||||
Flagged by {item.flaggedBy} · {item.reason}
|
||||
</p>
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400">
|
||||
{formatDate(item.flaggedAt)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2 border-t border-slate-100 pt-3 dark:border-slate-800">
|
||||
<ActionButton tone="neutral" icon={<XCircle className="h-3.5 w-3.5" />}>
|
||||
Dismiss Flag
|
||||
</ActionButton>
|
||||
<ActionButton tone="error" icon={<XCircle className="h-3.5 w-3.5" />}>
|
||||
Remove Content
|
||||
</ActionButton>
|
||||
<ActionButton tone="warning" icon={<Flag className="h-3.5 w-3.5" />}>
|
||||
Warn User
|
||||
</ActionButton>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Shared action button
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
type ActionTone = 'success' | 'error' | 'warning' | 'info' | 'neutral';
|
||||
|
||||
const ACTION_CLASSES: Record<ActionTone, string> = {
|
||||
success: 'border-emerald-300 bg-emerald-50 text-emerald-700 hover:bg-emerald-100 dark:border-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-300 dark:hover:bg-emerald-900/50',
|
||||
error: 'border-rose-300 bg-rose-50 text-rose-700 hover:bg-rose-100 dark:border-rose-800 dark:bg-rose-900/30 dark:text-rose-300 dark:hover:bg-rose-900/50',
|
||||
warning: 'border-amber-300 bg-amber-50 text-amber-700 hover:bg-amber-100 dark:border-amber-800 dark:bg-amber-900/30 dark:text-amber-300 dark:hover:bg-amber-900/50',
|
||||
info: 'border-primary-300 bg-primary-50 text-primary-700 hover:bg-primary-100 dark:border-primary-800 dark:bg-primary-900/30 dark:text-primary-300 dark:hover:bg-primary-900/50',
|
||||
neutral: 'border-slate-300 bg-slate-50 text-slate-700 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200 dark:hover:bg-slate-700',
|
||||
};
|
||||
|
||||
function ActionButton({
|
||||
tone,
|
||||
icon,
|
||||
children,
|
||||
}: {
|
||||
tone: ActionTone;
|
||||
icon: React.ReactNode;
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
className={`inline-flex h-8 items-center gap-1.5 rounded-md border px-3 text-xs font-medium transition-colors ${ACTION_CLASSES[tone]}`}
|
||||
>
|
||||
{icon}
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
function formatDate(iso: string): string {
|
||||
return new Date(iso).toLocaleDateString('en-US', {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
'use client';
|
||||
|
||||
import { Moon, Sun } from 'lucide-react';
|
||||
import { Button } from '@nextcraft/ui';
|
||||
import { useTheme } from './theme-provider';
|
||||
|
||||
export function DarkModeToggle() {
|
||||
const { mode, toggle } = useTheme();
|
||||
return (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={toggle}
|
||||
aria-label={mode === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}
|
||||
icon={mode === 'dark' ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
|
||||
>
|
||||
<span className="sr-only">Toggle theme</span>
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,157 @@
|
||||
'use client';
|
||||
|
||||
import {
|
||||
Bar,
|
||||
BarChart,
|
||||
CartesianGrid,
|
||||
Cell,
|
||||
Legend,
|
||||
Line,
|
||||
LineChart,
|
||||
Pie,
|
||||
PieChart,
|
||||
ResponsiveContainer,
|
||||
Tooltip,
|
||||
XAxis,
|
||||
YAxis,
|
||||
} from 'recharts';
|
||||
import { colors } from '@nextcraft/ui';
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
/* Mock chart data */
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
const postingsData = [
|
||||
{ month: 'Apr', postings: 4, applications: 38 },
|
||||
{ month: 'May', postings: 6, applications: 62 },
|
||||
{ month: 'Jun', postings: 5, applications: 51 },
|
||||
{ month: 'Jul', postings: 8, applications: 84 },
|
||||
{ month: 'Aug', postings: 9, applications: 112 },
|
||||
{ month: 'Sep', postings: 7, applications: 142 },
|
||||
];
|
||||
|
||||
const sourceData = [
|
||||
{ name: 'Direct', value: 40, color: colors.primary[500] },
|
||||
{ name: 'AI Match', value: 30, color: colors.accent[500] },
|
||||
{ name: 'Referral', value: 20, color: '#a78bfa' },
|
||||
{ name: 'Job Board', value: 10, color: '#fbbf24' },
|
||||
];
|
||||
|
||||
const placementData = [
|
||||
{ month: 'Apr', placements: 2 },
|
||||
{ month: 'May', placements: 5 },
|
||||
{ month: 'Jun', placements: 9 },
|
||||
{ month: 'Jul', placements: 14 },
|
||||
{ month: 'Aug', placements: 21 },
|
||||
{ month: 'Sep', placements: 28 },
|
||||
];
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
/* Shared styling */
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
const tooltipStyle = {
|
||||
borderRadius: 8,
|
||||
border: '1px solid #e2e8f0',
|
||||
fontSize: 12,
|
||||
background: '#fff',
|
||||
};
|
||||
|
||||
const axisTick = { fontSize: 12, fill: '#64748b' };
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
/* Component */
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
export function AnalyticsCharts() {
|
||||
return (
|
||||
<div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
|
||||
{/* Bar chart — Postings vs Applications */}
|
||||
<div className="rounded-lg border border-slate-200 bg-white p-5 dark:border-slate-800 dark:bg-slate-900">
|
||||
<h3 className="mb-1 text-sm font-semibold text-slate-900 dark:text-slate-100">
|
||||
Postings vs Applications
|
||||
</h3>
|
||||
<p className="mb-4 text-xs text-slate-500 dark:text-slate-400">Last 6 months</p>
|
||||
<div className="h-56 w-full">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<BarChart data={postingsData} margin={{ top: 4, right: 8, left: -16, bottom: 0 }}>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" className="dark:opacity-20" />
|
||||
<XAxis dataKey="month" tick={axisTick} stroke="#cbd5e1" />
|
||||
<YAxis tick={axisTick} stroke="#cbd5e1" />
|
||||
<Tooltip
|
||||
contentStyle={tooltipStyle}
|
||||
cursor={{ fill: 'rgba(99,102,241,0.06)' }}
|
||||
/>
|
||||
<Legend wrapperStyle={{ fontSize: 12 }} />
|
||||
<Bar dataKey="postings" fill={colors.primary[500]} radius={[4, 4, 0, 0]} name="Postings" />
|
||||
<Bar dataKey="applications" fill={colors.accent[500]} radius={[4, 4, 0, 0]} name="Applications" />
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Donut chart — Applicant Sources */}
|
||||
<div className="rounded-lg border border-slate-200 bg-white p-5 dark:border-slate-800 dark:bg-slate-900">
|
||||
<h3 className="mb-1 text-sm font-semibold text-slate-900 dark:text-slate-100">
|
||||
Applicant Sources
|
||||
</h3>
|
||||
<p className="mb-4 text-xs text-slate-500 dark:text-slate-400">Where candidates come from</p>
|
||||
<div className="h-56 w-full">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<PieChart>
|
||||
<Pie
|
||||
data={sourceData}
|
||||
dataKey="value"
|
||||
nameKey="name"
|
||||
cx="50%"
|
||||
cy="50%"
|
||||
innerRadius={50}
|
||||
outerRadius={80}
|
||||
paddingAngle={3}
|
||||
>
|
||||
{sourceData.map((entry) => (
|
||||
<Cell key={entry.name} fill={entry.color} />
|
||||
))}
|
||||
</Pie>
|
||||
<Tooltip contentStyle={tooltipStyle} formatter={(v: number) => `${v}%`} />
|
||||
<Legend wrapperStyle={{ fontSize: 12 }} />
|
||||
</PieChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Line chart — Placement Trends */}
|
||||
<div className="rounded-lg border border-slate-200 bg-white p-5 dark:border-slate-800 dark:bg-slate-900">
|
||||
<h3 className="mb-1 text-sm font-semibold text-slate-900 dark:text-slate-100">
|
||||
Placement Trends
|
||||
</h3>
|
||||
<p className="mb-4 text-xs text-slate-500 dark:text-slate-400">Cumulative placements</p>
|
||||
<div className="h-56 w-full">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<LineChart data={placementData} margin={{ top: 4, right: 8, left: -16, bottom: 0 }}>
|
||||
<defs>
|
||||
<linearGradient id="placementStroke" x1="0" y1="0" x2="1" y2="0">
|
||||
<stop offset="0%" stopColor={colors.primary[500]} />
|
||||
<stop offset="100%" stopColor={colors.accent[500]} />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" />
|
||||
<XAxis dataKey="month" tick={axisTick} stroke="#cbd5e1" />
|
||||
<YAxis tick={axisTick} stroke="#cbd5e1" />
|
||||
<Tooltip contentStyle={tooltipStyle} />
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="placements"
|
||||
stroke="url(#placementStroke)"
|
||||
strokeWidth={3}
|
||||
dot={{ r: 4, fill: colors.primary[600] }}
|
||||
activeDot={{ r: 6 }}
|
||||
name="Cumulative placements"
|
||||
/>
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,102 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { ChevronDown, ChevronRight, ShieldCheck } from 'lucide-react';
|
||||
import { Badge } from '@nextcraft/ui';
|
||||
import { matchBadgeClasses } from '../../lib/format';
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
/* Types + mock transcript data */
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
export interface DefenseSession {
|
||||
id: string;
|
||||
competencyName: string;
|
||||
score: number;
|
||||
date: string;
|
||||
transcript: Array<{ question: string; answer: string }>;
|
||||
}
|
||||
|
||||
interface DefenseAccordionProps {
|
||||
sessions: DefenseSession[];
|
||||
}
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
/* Component */
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
export function DefenseAccordion({ sessions }: DefenseAccordionProps) {
|
||||
const [openId, setOpenId] = useState<string | null>(sessions[0]?.id ?? null);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-3">
|
||||
{sessions.map((session) => {
|
||||
const open = openId === session.id;
|
||||
return (
|
||||
<div
|
||||
key={session.id}
|
||||
className="overflow-hidden rounded-lg border border-slate-200 dark:border-slate-800"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOpenId(open ? null : session.id)}
|
||||
className="flex w-full items-center gap-3 bg-white p-4 text-left transition-colors hover:bg-slate-50 dark:bg-slate-900 dark:hover:bg-slate-800"
|
||||
aria-expanded={open}
|
||||
>
|
||||
<ShieldCheck className="h-5 w-5 shrink-0 text-emerald-600 dark:text-emerald-400" />
|
||||
<div className="flex min-w-0 flex-1 flex-col">
|
||||
<span className="truncate text-sm font-semibold text-slate-900 dark:text-slate-100">
|
||||
{session.competencyName}
|
||||
</span>
|
||||
<span className="text-xs text-slate-500 dark:text-slate-400">
|
||||
{new Date(session.date).toLocaleDateString('en-US', {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
})}{' '}
|
||||
· Defense session
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
className={`inline-flex h-8 w-11 shrink-0 items-center justify-center rounded-full text-xs font-bold ring-2 ${matchBadgeClasses(
|
||||
session.score,
|
||||
)}`}
|
||||
>
|
||||
{session.score}
|
||||
</span>
|
||||
{open ? (
|
||||
<ChevronDown className="h-4 w-4 shrink-0 text-slate-400" />
|
||||
) : (
|
||||
<ChevronRight className="h-4 w-4 shrink-0 text-slate-400" />
|
||||
)}
|
||||
</button>
|
||||
{open && (
|
||||
<div className="border-t border-slate-200 bg-slate-50 p-4 dark:border-slate-800 dark:bg-slate-900/60">
|
||||
<div className="flex flex-col gap-4">
|
||||
{session.transcript.map((qa, idx) => (
|
||||
<div key={idx} className="flex flex-col gap-1.5">
|
||||
<div className="flex items-start gap-2">
|
||||
<Badge variant="info">Q{idx + 1}</Badge>
|
||||
<p className="text-sm font-medium text-slate-800 dark:text-slate-200">
|
||||
{qa.question}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-start gap-2 pl-1">
|
||||
<span className="mt-0.5 inline-flex h-5 w-5 shrink-0 items-center justify-center rounded bg-slate-200 text-[10px] font-bold text-slate-600 dark:bg-slate-700 dark:text-slate-200">
|
||||
A
|
||||
</span>
|
||||
<p className="text-sm leading-relaxed text-slate-600 dark:text-slate-300">
|
||||
{qa.answer}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,343 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Plus, Trash2, Save } from 'lucide-react';
|
||||
import { Badge, Button } from '@nextcraft/ui';
|
||||
import type { Job, Seniority } from '@nextcraft/types';
|
||||
import { formatSalaryK, relativeTime, seniorityLabel } from '../../lib/format';
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
/* Mock posting list (status + applicant count derived from the Job) */
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
type PostingStatus = 'active' | 'draft' | 'expired';
|
||||
|
||||
interface PostingRow {
|
||||
job: Job;
|
||||
status: PostingStatus;
|
||||
applicants: number;
|
||||
}
|
||||
|
||||
interface ApplicantRow {
|
||||
name: string;
|
||||
appliedAt: string;
|
||||
stage: 'Screening' | 'Interview' | 'Offer';
|
||||
matchScore: number;
|
||||
}
|
||||
|
||||
/* Deterministically derive a posting status per job id. */
|
||||
function deriveStatus(job: Job, idx: number): PostingStatus {
|
||||
if (idx < 8) return 'active';
|
||||
if (idx < 11) return 'draft';
|
||||
return 'expired';
|
||||
}
|
||||
|
||||
function deriveApplicants(job: Job, idx: number): number {
|
||||
return 4 + ((job.matchScore + idx * 7) % 18);
|
||||
}
|
||||
|
||||
function deriveApplicantList(job: Job): ApplicantRow[] {
|
||||
const names = [
|
||||
'Maya Okonkwo',
|
||||
'Devon Park',
|
||||
'Priya Iyer',
|
||||
'Tomás Vega',
|
||||
'Liam Chen',
|
||||
'Yuki Tanaka',
|
||||
'Sofia Marchetti',
|
||||
];
|
||||
const stages: ApplicantRow['stage'][] = ['Screening', 'Interview', 'Offer'];
|
||||
const count = 5 + (job.matchScore % 2);
|
||||
const rows: ApplicantRow[] = [];
|
||||
for (let i = 0; i < count; i++) {
|
||||
const stage = stages[i % stages.length];
|
||||
rows.push({
|
||||
name: names[(job.matchScore + i) % names.length],
|
||||
appliedAt: new Date(Date.UTC(2026, 7, 28 - i * 2)).toISOString(),
|
||||
stage,
|
||||
matchScore: 78 + ((job.matchScore + i * 3) % 18),
|
||||
});
|
||||
}
|
||||
return rows;
|
||||
}
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
/* Status badge */
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
function StatusBadge({ status }: { status: PostingStatus }) {
|
||||
if (status === 'active') return <Badge variant="success">Active</Badge>;
|
||||
if (status === 'draft') return <Badge variant="warning">Draft</Badge>;
|
||||
return <Badge variant="default">Expired</Badge>;
|
||||
}
|
||||
|
||||
function StageBadge({ stage }: { stage: ApplicantRow['stage'] }) {
|
||||
if (stage === 'Offer') return <Badge variant="success">Offer</Badge>;
|
||||
if (stage === 'Interview') return <Badge variant="info">Interview</Badge>;
|
||||
return <Badge variant="warning">Screening</Badge>;
|
||||
}
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
/* Component */
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
export interface PostingManagerProps {
|
||||
jobs: Job[];
|
||||
}
|
||||
|
||||
export function PostingManager({ jobs }: PostingManagerProps) {
|
||||
const postings: PostingRow[] = jobs.map((job, idx) => ({
|
||||
job,
|
||||
status: deriveStatus(job, idx),
|
||||
applicants: deriveApplicants(job, idx),
|
||||
}));
|
||||
|
||||
const [selectedId, setSelectedId] = useState<string>(postings[0]?.job.id ?? '');
|
||||
const selected = postings.find((p) => p.job.id === selectedId) ?? null;
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-1 gap-6 lg:grid-cols-[360px_1fr]">
|
||||
{/* Left panel — posting list */}
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-sm font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">
|
||||
Postings
|
||||
</h2>
|
||||
<Button size="sm" variant="primary" icon={<Plus className="h-3.5 w-3.5" />} type="button">
|
||||
New
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
{postings.map((p) => {
|
||||
const active = p.job.id === selectedId;
|
||||
return (
|
||||
<button
|
||||
key={p.job.id}
|
||||
type="button"
|
||||
onClick={() => setSelectedId(p.job.id)}
|
||||
className={[
|
||||
'flex flex-col gap-1.5 rounded-lg border p-3 text-left transition-colors',
|
||||
active
|
||||
? 'border-primary-500 bg-primary-50 dark:border-primary-700 dark:bg-primary-900/30'
|
||||
: 'border-slate-200 bg-white hover:bg-slate-50 dark:border-slate-800 dark:bg-slate-900 dark:hover:bg-slate-800',
|
||||
].join(' ')}
|
||||
>
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<span className="text-sm font-semibold text-slate-900 dark:text-slate-100">
|
||||
{p.job.title}
|
||||
</span>
|
||||
<StatusBadge status={p.status} />
|
||||
</div>
|
||||
<div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-slate-500 dark:text-slate-400">
|
||||
<span>{relativeTime(p.job.postedAt)}</span>
|
||||
<span>·</span>
|
||||
<span>{p.applicants} applicants</span>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right panel — detail */}
|
||||
<div>
|
||||
{selected ? (
|
||||
<PostingDetail posting={selected} />
|
||||
) : (
|
||||
<div className="flex h-64 items-center justify-center rounded-lg border border-dashed border-slate-300 text-slate-500 dark:border-slate-700 dark:text-slate-400">
|
||||
Select a posting to view details
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function PostingDetail({ posting }: { posting: PostingRow }) {
|
||||
const { job, applicants } = posting;
|
||||
const applicantList = deriveApplicantList(job);
|
||||
const seniorityOptions: Seniority[] = ['entry', 'mid', 'senior', 'staff', 'principal'];
|
||||
|
||||
const inputClass =
|
||||
'h-10 w-full rounded-md border border-slate-300 bg-white px-3 text-sm text-slate-900 focus:border-primary-500 focus:ring-2 focus:ring-primary-500/30 focus:outline-none dark:border-slate-700 dark:bg-slate-800 dark:text-slate-100';
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
{/* Posting form */}
|
||||
<div className="rounded-lg border border-slate-200 bg-white p-5 dark:border-slate-800 dark:bg-slate-900">
|
||||
<div className="mb-4 flex items-center justify-between">
|
||||
<h2 className="text-lg font-semibold text-slate-900 dark:text-slate-100">
|
||||
Edit Posting
|
||||
</h2>
|
||||
<StatusBadge status={posting.status} />
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<label className="text-sm font-medium text-slate-700 dark:text-slate-200">Title</label>
|
||||
<input className={inputClass} defaultValue={job.title} aria-label="Posting title" />
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<label className="text-sm font-medium text-slate-700 dark:text-slate-200">Description</label>
|
||||
<textarea
|
||||
className="min-h-24 w-full rounded-md border border-slate-300 bg-white p-3 text-sm text-slate-900 focus:border-primary-500 focus:ring-2 focus:ring-primary-500/30 focus:outline-none dark:border-slate-700 dark:bg-slate-800 dark:text-slate-100"
|
||||
defaultValue={job.description}
|
||||
aria-label="Posting description"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<label className="text-sm font-medium text-slate-700 dark:text-slate-200">
|
||||
Required Competencies
|
||||
</label>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{job.requiredCompetencies.map((c) => (
|
||||
<span
|
||||
key={c}
|
||||
className="inline-flex items-center gap-1 rounded-full bg-primary-100 px-2.5 py-1 text-xs font-medium text-primary-700 dark:bg-primary-900/40 dark:text-primary-300"
|
||||
>
|
||||
{c}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<label className="text-sm font-medium text-slate-700 dark:text-slate-200">Seniority</label>
|
||||
<select className={inputClass} defaultValue={job.seniority} aria-label="Seniority">
|
||||
{seniorityOptions.map((s) => (
|
||||
<option key={s} value={s}>
|
||||
{seniorityLabel(s)}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<label className="text-sm font-medium text-slate-700 dark:text-slate-200">Location</label>
|
||||
<input className={inputClass} defaultValue={job.location} aria-label="Location" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<label className="text-sm font-medium text-slate-700 dark:text-slate-200">
|
||||
Salary Min
|
||||
</label>
|
||||
<input
|
||||
className={inputClass}
|
||||
defaultValue={formatSalaryK(job.salaryMin)}
|
||||
aria-label="Salary minimum"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<label className="text-sm font-medium text-slate-700 dark:text-slate-200">
|
||||
Salary Max
|
||||
</label>
|
||||
<input
|
||||
className={inputClass}
|
||||
defaultValue={formatSalaryK(job.salaryMax)}
|
||||
aria-label="Salary maximum"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label className="flex cursor-pointer items-center justify-between gap-2 text-sm text-slate-700 dark:text-slate-200">
|
||||
<span>Remote eligible</span>
|
||||
<button
|
||||
type="button"
|
||||
role="switch"
|
||||
aria-checked={job.remote}
|
||||
className={[
|
||||
'relative h-6 w-11 rounded-full transition-colors',
|
||||
job.remote ? 'bg-primary-600' : 'bg-slate-300 dark:bg-slate-700',
|
||||
].join(' ')}
|
||||
>
|
||||
<span
|
||||
className={[
|
||||
'absolute top-0.5 h-5 w-5 rounded-full bg-white shadow transition-transform',
|
||||
job.remote ? 'translate-x-5' : 'translate-x-0.5',
|
||||
].join(' ')}
|
||||
/>
|
||||
</button>
|
||||
</label>
|
||||
|
||||
<div className="flex flex-wrap gap-2 pt-2">
|
||||
<Button variant="primary" size="md" icon={<Save className="h-4 w-4" />} type="button">
|
||||
Save Changes
|
||||
</Button>
|
||||
<Button variant="destructive" size="md" icon={<Trash2 className="h-4 w-4" />} type="button">
|
||||
Delete Posting
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Applicant list */}
|
||||
<div className="rounded-lg border border-slate-200 bg-white p-5 dark:border-slate-800 dark:bg-slate-900">
|
||||
<div className="mb-4 flex items-center justify-between">
|
||||
<h2 className="text-lg font-semibold text-slate-900 dark:text-slate-100">
|
||||
Applicants
|
||||
</h2>
|
||||
<span className="text-sm text-slate-500 dark:text-slate-400">
|
||||
{applicants} total · {applicantList.length} shown
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Table on desktop, cards on mobile */}
|
||||
<div className="overflow-x-auto">
|
||||
<table className="hidden w-full md:table">
|
||||
<thead>
|
||||
<tr className="border-b border-slate-200 text-left text-xs uppercase tracking-wide text-slate-500 dark:border-slate-800 dark:text-slate-400">
|
||||
<th className="pb-2 pr-4 font-medium">Applicant</th>
|
||||
<th className="pb-2 pr-4 font-medium">Applied</th>
|
||||
<th className="pb-2 pr-4 font-medium">Stage</th>
|
||||
<th className="pb-2 pr-4 font-medium text-right">Match</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{applicantList.map((a, i) => (
|
||||
<tr key={i} className="border-b border-slate-100 last:border-0 dark:border-slate-800/60">
|
||||
<td className="py-2.5 pr-4 text-sm font-medium text-slate-900 dark:text-slate-100">
|
||||
{a.name}
|
||||
</td>
|
||||
<td className="py-2.5 pr-4 text-sm text-slate-600 dark:text-slate-400">
|
||||
{relativeTime(a.appliedAt)}
|
||||
</td>
|
||||
<td className="py-2.5 pr-4"><StageBadge stage={a.stage} /></td>
|
||||
<td className="py-2.5 pr-4 text-right text-sm font-semibold text-slate-700 dark:text-slate-200">
|
||||
{a.matchScore}%
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{/* Mobile cards */}
|
||||
<div className="flex flex-col gap-2 md:hidden">
|
||||
{applicantList.map((a, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="flex items-center justify-between rounded-md border border-slate-200 p-3 dark:border-slate-800"
|
||||
>
|
||||
<div className="flex flex-col">
|
||||
<span className="text-sm font-medium text-slate-900 dark:text-slate-100">{a.name}</span>
|
||||
<span className="text-xs text-slate-500 dark:text-slate-400">
|
||||
{relativeTime(a.appliedAt)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<StageBadge stage={a.stage} />
|
||||
<span className="text-sm font-semibold text-slate-700 dark:text-slate-200">
|
||||
{a.matchScore}%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,213 @@
|
||||
'use client';
|
||||
|
||||
import { useMemo, useState } from 'react';
|
||||
import { Search, Filter, FileCode, ShieldCheck, Target } from 'lucide-react';
|
||||
import { Avatar, Badge } from '@nextcraft/ui';
|
||||
import type { Candidate } from '@nextcraft/types';
|
||||
import { matchBadgeClasses } from '../../lib/format';
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
/* Filter config */
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
const STACK_OPTIONS = [
|
||||
{ value: 'all', label: 'All stacks' },
|
||||
{ value: 'stack-orchestration', label: 'AI Orchestration' },
|
||||
{ value: 'stack-safety', label: 'AI Safety' },
|
||||
{ value: 'stack-designer', label: 'Product Design' },
|
||||
{ value: 'stack-operator', label: 'Field Operator' },
|
||||
{ value: 'stack-science', label: 'Comp Sciences' },
|
||||
];
|
||||
|
||||
const DEFENSE_OPTIONS = [
|
||||
{ value: 0, label: 'Any defense score' },
|
||||
{ value: 70, label: 'Defense 70+' },
|
||||
{ value: 80, label: 'Defense 80+' },
|
||||
{ value: 90, label: 'Defense 90+' },
|
||||
];
|
||||
|
||||
const ARTIFACT_OPTIONS = [
|
||||
{ value: 0, label: 'Any artifacts' },
|
||||
{ value: 1, label: '1+ artifacts' },
|
||||
{ value: 3, label: '3+ artifacts' },
|
||||
{ value: 5, label: '5+ artifacts' },
|
||||
{ value: 10, label: '10+ artifacts' },
|
||||
];
|
||||
|
||||
/** Derive 3 short microcredential badges from a candidate's stack + count. */
|
||||
function microcredentialBadges(cand: Candidate): string[] {
|
||||
const stackMap: Record<string, string[]> = {
|
||||
'stack-orchestration': ['Agent Arch', 'Tool Use', 'RAG', 'Eval', 'Routing'],
|
||||
'stack-safety': ['Red Team', 'Model Cards', 'Bias Audit', 'Policy', 'Interp'],
|
||||
'stack-designer': ['Agentic UX', 'Conv UX', 'Transparency', 'Trust', 'Persona'],
|
||||
'stack-operator': ['Robotics', 'Vision', 'Calibration', 'AR', 'Field Data'],
|
||||
'stack-science': ['Sci Python', 'HPC', 'PINNs', 'Active Learn', 'Bioinformatics'],
|
||||
};
|
||||
const pool = stackMap[cand.competencyStackId] ?? ['MC-1', 'MC-2', 'MC-3'];
|
||||
// Spread selection deterministically based on id suffix.
|
||||
const offset = Number(cand.id.replace(/\D/g, '')) % pool.length;
|
||||
return [pool[offset % pool.length], pool[(offset + 1) % pool.length], pool[(offset + 2) % pool.length]];
|
||||
}
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
/* Component */
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
export interface TalentSearchProps {
|
||||
candidates: Candidate[];
|
||||
}
|
||||
|
||||
export function TalentSearch({ candidates }: TalentSearchProps) {
|
||||
const [query, setQuery] = useState('');
|
||||
const [stack, setStack] = useState('all');
|
||||
const [minDefense, setMinDefense] = useState(0);
|
||||
const [minArtifacts, setMinArtifacts] = useState(0);
|
||||
|
||||
const filtered = useMemo(() => {
|
||||
const q = query.trim().toLowerCase();
|
||||
return candidates.filter((c) => {
|
||||
if (q) {
|
||||
const hay = `${c.name} ${c.headline}`.toLowerCase();
|
||||
if (!hay.includes(q)) return false;
|
||||
}
|
||||
if (stack !== 'all' && c.competencyStackId !== stack) return false;
|
||||
if (c.defenseScore < minDefense) return false;
|
||||
if (c.artifactCount < minArtifacts) return false;
|
||||
return true;
|
||||
});
|
||||
}, [candidates, query, stack, minDefense, minArtifacts]);
|
||||
|
||||
const selectClass =
|
||||
'h-9 rounded-md border border-slate-300 bg-white px-2.5 text-sm text-slate-900 focus:border-primary-500 focus:ring-2 focus:ring-primary-500/30 focus:outline-none dark:border-slate-700 dark:bg-slate-800 dark:text-slate-100';
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
{/* Filter bar */}
|
||||
<div className="flex flex-col gap-3 rounded-lg border border-slate-200 bg-white p-4 dark:border-slate-800 dark:bg-slate-900">
|
||||
<div className="relative flex items-center">
|
||||
<Search className="pointer-events-none absolute left-3 h-4 w-4 text-slate-400" />
|
||||
<input
|
||||
type="text"
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
placeholder="Search candidates by name or headline..."
|
||||
aria-label="Search candidates"
|
||||
className="h-10 w-full rounded-md border border-slate-300 bg-white pl-9 pr-3 text-sm text-slate-900 placeholder:text-slate-400 focus:border-primary-500 focus:ring-2 focus:ring-primary-500/30 focus:outline-none dark:border-slate-700 dark:bg-slate-800 dark:text-slate-100 dark:placeholder:text-slate-500"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
<span className="inline-flex items-center gap-1.5 text-xs font-medium text-slate-500 dark:text-slate-400">
|
||||
<Filter className="h-3.5 w-3.5" /> Filters:
|
||||
</span>
|
||||
<select
|
||||
aria-label="Competency stack"
|
||||
value={stack}
|
||||
onChange={(e) => setStack(e.target.value)}
|
||||
className={selectClass}
|
||||
>
|
||||
{STACK_OPTIONS.map((o) => (
|
||||
<option key={o.value} value={o.value}>
|
||||
{o.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<select
|
||||
aria-label="Minimum defense score"
|
||||
value={minDefense}
|
||||
onChange={(e) => setMinDefense(Number(e.target.value))}
|
||||
className={selectClass}
|
||||
>
|
||||
{DEFENSE_OPTIONS.map((o) => (
|
||||
<option key={o.value} value={o.value}>
|
||||
{o.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<select
|
||||
aria-label="Minimum artifact count"
|
||||
value={minArtifacts}
|
||||
onChange={(e) => setMinArtifacts(Number(e.target.value))}
|
||||
className={selectClass}
|
||||
>
|
||||
{ARTIFACT_OPTIONS.map((o) => (
|
||||
<option key={o.value} value={o.value}>
|
||||
{o.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<span className="ml-auto text-sm text-slate-500 dark:text-slate-400">
|
||||
Showing <span className="font-semibold text-slate-700 dark:text-slate-200">{filtered.length}</span> of{' '}
|
||||
{candidates.length}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Candidate grid */}
|
||||
{filtered.length === 0 ? (
|
||||
<div className="rounded-lg border border-dashed border-slate-300 p-12 text-center text-slate-500 dark:border-slate-700 dark:text-slate-400">
|
||||
No candidates match your filters.
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
|
||||
{filtered.map((cand) => (
|
||||
<CandidateCard key={cand.id} cand={cand} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function CandidateCard({ cand }: { cand: Candidate }) {
|
||||
const badges = microcredentialBadges(cand);
|
||||
return (
|
||||
<article className="flex flex-col gap-3 rounded-lg border border-slate-200 bg-white p-5 shadow-sm transition-shadow hover:shadow-md dark:border-slate-800 dark:bg-slate-900">
|
||||
<div className="flex items-start gap-3">
|
||||
<Avatar name={cand.name} src={cand.avatar} size="md" />
|
||||
<div className="flex min-w-0 flex-1 flex-col">
|
||||
<h3 className="truncate text-base font-semibold text-slate-900 dark:text-slate-100">
|
||||
{cand.name}
|
||||
</h3>
|
||||
<p className="truncate text-sm text-slate-600 dark:text-slate-400">{cand.headline}</p>
|
||||
</div>
|
||||
<span
|
||||
className={`inline-flex h-9 w-12 shrink-0 items-center justify-center rounded-full text-xs font-bold ring-2 ${matchBadgeClasses(
|
||||
cand.matchScore,
|
||||
)}`}
|
||||
title="AI match score"
|
||||
>
|
||||
{cand.matchScore}%
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{badges.map((b) => (
|
||||
<Badge key={b} variant="info">
|
||||
{b}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-slate-600 dark:text-slate-400">
|
||||
<span className="inline-flex items-center gap-1">
|
||||
<FileCode className="h-3.5 w-3.5" /> {cand.artifactCount} artifacts
|
||||
</span>
|
||||
<span className="inline-flex items-center gap-1">
|
||||
<ShieldCheck className="h-3.5 w-3.5" /> Defense: {cand.defenseScore}
|
||||
</span>
|
||||
<span className="inline-flex items-center gap-1">
|
||||
<Target className="h-3.5 w-3.5" /> Match: {cand.matchScore}%
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<a
|
||||
href={`/employer/talent/${cand.id}`}
|
||||
className="mt-auto inline-flex h-9 w-full items-center justify-center rounded-md border border-slate-300 bg-transparent text-sm font-medium text-slate-800 transition-colors hover:bg-slate-50 dark:border-slate-700 dark:text-slate-100 dark:hover:bg-slate-800"
|
||||
>
|
||||
View Profile
|
||||
</a>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
|
||||
// Re-export icon used in card stats so the import is not tree-shaken away.
|
||||
@@ -0,0 +1,25 @@
|
||||
import Link from 'next/link';
|
||||
|
||||
const FOOTER_LINKS = [
|
||||
{ label: 'Learner', href: '/' },
|
||||
{ label: 'Marketplace', href: '/marketplace' },
|
||||
{ label: 'Employer', href: '/employer' },
|
||||
{ label: 'Admin', href: '/admin' },
|
||||
];
|
||||
|
||||
export function Footer() {
|
||||
return (
|
||||
<footer className="border-t border-slate-200 bg-white py-6 dark:border-slate-800 dark:bg-slate-950">
|
||||
<div className="mx-auto flex max-w-7xl flex-col items-center justify-between gap-3 px-4 text-sm text-slate-500 sm:flex-row sm:px-6 dark:text-slate-400">
|
||||
<p>Nextcraft v0.1 — UI/UX Prototype</p>
|
||||
<nav className="flex items-center gap-4">
|
||||
{FOOTER_LINKS.map((l) => (
|
||||
<Link key={l.href} href={l.href} className="hover:text-slate-900 dark:hover:text-slate-100">
|
||||
{l.label}
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
import Link from 'next/link';
|
||||
import { Workflow } from 'lucide-react';
|
||||
import { DarkModeToggle } from './dark-mode-toggle';
|
||||
import { RoleSwitcher } from './role-switcher';
|
||||
|
||||
const NAV_LINKS = [
|
||||
{ label: 'Learner', href: '/' },
|
||||
{ label: 'Marketplace', href: '/marketplace' },
|
||||
{ label: 'Employer', href: '/employer' },
|
||||
{ label: 'Admin', href: '/admin' },
|
||||
];
|
||||
|
||||
export function Header() {
|
||||
return (
|
||||
<header className="sticky top-0 z-30 border-b border-slate-200 bg-white/80 backdrop-blur dark:border-slate-800 dark:bg-slate-950/80">
|
||||
<div className="mx-auto flex h-14 max-w-7xl items-center gap-4 px-4 sm:px-6">
|
||||
<Link href="/" className="flex items-center gap-2 font-semibold">
|
||||
<span className="flex h-8 w-8 items-center justify-center rounded-md bg-primary-600 text-white">
|
||||
<Workflow className="h-4 w-4" />
|
||||
</span>
|
||||
<span className="text-slate-900 dark:text-slate-100">Nextcraft</span>
|
||||
</Link>
|
||||
|
||||
<nav className="ml-4 hidden items-center gap-1 md:flex">
|
||||
{NAV_LINKS.map((l) => (
|
||||
<Link
|
||||
key={l.href}
|
||||
href={l.href}
|
||||
className="rounded-md px-3 py-1.5 text-sm font-medium text-slate-600 hover:bg-slate-100 hover:text-slate-900 dark:text-slate-300 dark:hover:bg-slate-800 dark:hover:text-slate-100"
|
||||
>
|
||||
{l.label}
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
<div className="ml-auto flex items-center gap-2">
|
||||
<RoleSwitcher />
|
||||
<DarkModeToggle />
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,136 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useRef, useEffect, type FormEvent } from 'react';
|
||||
import { Bot, Send, User } from 'lucide-react';
|
||||
import { aiTutorResponses, type TutorResponse } from '@nextcraft/mock-data';
|
||||
import { primaryLearner } from '@nextcraft/mock-data';
|
||||
import { Avatar } from '@nextcraft/ui';
|
||||
|
||||
interface ChatMessage {
|
||||
id: string;
|
||||
role: 'learner' | 'tutor';
|
||||
content: string;
|
||||
suggestedActions?: string[];
|
||||
}
|
||||
|
||||
const SEED_MESSAGES: ChatMessage[] = [
|
||||
{
|
||||
id: 'seed-1',
|
||||
role: 'tutor',
|
||||
content:
|
||||
"Welcome back, Alex. You're 62% through the AI Orchestration stack. What would you like to work on today?",
|
||||
suggestedActions: ['Review my pacing', 'Start Multi-Agent Communication', 'Prep for my defense'],
|
||||
},
|
||||
];
|
||||
|
||||
export function AiTutorChat() {
|
||||
const [messages, setMessages] = useState<ChatMessage[]>(SEED_MESSAGES);
|
||||
const [input, setInput] = useState('');
|
||||
const [isTyping, setIsTyping] = useState(false);
|
||||
const scrollRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (scrollRef.current) {
|
||||
scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
|
||||
}
|
||||
}, [messages, isTyping]);
|
||||
|
||||
function send(e: FormEvent) {
|
||||
e.preventDefault();
|
||||
const text = input.trim();
|
||||
if (!text || isTyping) return;
|
||||
const learnerMsg: ChatMessage = { id: `me-${Date.now()}`, role: 'learner', content: text };
|
||||
setMessages((prev) => [...prev, learnerMsg]);
|
||||
setInput('');
|
||||
setIsTyping(true);
|
||||
|
||||
window.setTimeout(() => {
|
||||
const pick: TutorResponse =
|
||||
aiTutorResponses[Math.floor(Math.random() * aiTutorResponses.length)];
|
||||
const tutorMsg: ChatMessage = {
|
||||
id: `tutor-${Date.now()}`,
|
||||
role: 'tutor',
|
||||
content: pick.message,
|
||||
suggestedActions: pick.suggestedActions,
|
||||
};
|
||||
setMessages((prev) => [...prev, tutorMsg]);
|
||||
setIsTyping(false);
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex h-[28rem] flex-col">
|
||||
{/* Message list */}
|
||||
<div ref={scrollRef} className="flex-1 space-y-4 overflow-y-auto pr-2">
|
||||
{messages.map((m) => (
|
||||
<div
|
||||
key={m.id}
|
||||
className={`flex gap-3 ${m.role === 'learner' ? 'flex-row-reverse' : 'flex-row'}`}
|
||||
>
|
||||
{m.role === 'tutor' ? (
|
||||
<span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary-100 text-primary-700 dark:bg-primary-900/40 dark:text-primary-300">
|
||||
<Bot className="h-4 w-4" />
|
||||
</span>
|
||||
) : (
|
||||
<Avatar name={primaryLearner.name} src={primaryLearner.avatar} size="sm" />
|
||||
)}
|
||||
<div
|
||||
className={`max-w-[80%] rounded-lg px-3 py-2 text-sm ${
|
||||
m.role === 'tutor'
|
||||
? 'bg-slate-100 text-slate-800 dark:bg-slate-800 dark:text-slate-100'
|
||||
: 'bg-primary-600 text-white'
|
||||
}`}
|
||||
>
|
||||
<p className="leading-relaxed">{m.content}</p>
|
||||
{m.suggestedActions && m.suggestedActions.length > 0 && (
|
||||
<div className="mt-2 flex flex-wrap gap-1.5">
|
||||
{m.suggestedActions.map((action) => (
|
||||
<button
|
||||
key={action}
|
||||
onClick={() => setInput(action)}
|
||||
className="rounded-full border border-slate-300 bg-white px-2 py-0.5 text-xs text-slate-600 transition-colors hover:border-primary-400 hover:text-primary-700 dark:border-slate-600 dark:bg-slate-900 dark:text-slate-300 dark:hover:border-primary-400 dark:hover:text-primary-300"
|
||||
>
|
||||
{action}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Typing indicator */}
|
||||
{isTyping && (
|
||||
<div className="flex flex-row gap-3">
|
||||
<span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary-100 text-primary-700 dark:bg-primary-900/40 dark:text-primary-300">
|
||||
<Bot className="h-4 w-4" />
|
||||
</span>
|
||||
<div className="flex items-center gap-1 rounded-lg bg-slate-100 px-3 py-3 dark:bg-slate-800">
|
||||
<span className="h-1.5 w-1.5 animate-bounce rounded-full bg-slate-400 [animation-delay:-0.3s]" />
|
||||
<span className="h-1.5 w-1.5 animate-bounce rounded-full bg-slate-400 [animation-delay:-0.15s]" />
|
||||
<span className="h-1.5 w-1.5 animate-bounce rounded-full bg-slate-400" />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Input */}
|
||||
<form onSubmit={send} className="mt-3 flex items-center gap-2 border-t border-slate-200 pt-3 dark:border-slate-800">
|
||||
<input
|
||||
value={input}
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
placeholder="Ask your AI tutor anything…"
|
||||
className="h-10 flex-1 rounded-md border border-slate-300 bg-white px-3 text-sm text-slate-900 placeholder:text-slate-400 focus:border-primary-500 focus:ring-2 focus:ring-primary-500/30 focus:outline-none dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:placeholder:text-slate-500"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!input.trim() || isTyping}
|
||||
className="inline-flex h-10 w-10 items-center justify-center rounded-md bg-primary-600 text-white transition-colors hover:bg-primary-700 disabled:opacity-50"
|
||||
aria-label="Send message"
|
||||
>
|
||||
<Send className="h-4 w-4" />
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,114 @@
|
||||
'use client';
|
||||
|
||||
import { Mic, Send } from 'lucide-react';
|
||||
|
||||
const TRANSCRIPT = [
|
||||
{
|
||||
role: 'examiner' as const,
|
||||
question:
|
||||
"Walk us through your design choices for multi-agent communication in this artifact. Why a blackboard architecture over direct message passing?",
|
||||
},
|
||||
{
|
||||
role: 'learner' as const,
|
||||
answer:
|
||||
"I chose a shared blackboard because the agents publish partial results that others consume asynchronously — direct messaging would have tightly coupled them and made re-planning harder. The blackboard also gives me a clean audit trail for each step.",
|
||||
},
|
||||
{
|
||||
role: 'examiner' as const,
|
||||
question:
|
||||
"What failure mode did you observe under load, and how did you mitigate it?",
|
||||
},
|
||||
{
|
||||
role: 'learner' as const,
|
||||
answer:
|
||||
"At 50 concurrent requests the planner became a bottleneck because every agent waited on a fresh plan. I added a plan cache keyed by intent signature and moved re-planning to a debounce — throughput improved 3x with no measurable quality regression.",
|
||||
},
|
||||
];
|
||||
|
||||
export function OralDefenseInterface() {
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
{/* Mic + waveform */}
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Start oral defense"
|
||||
className="group relative flex h-20 w-20 items-center justify-center rounded-full bg-primary-600 text-white transition-transform hover:scale-105 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2"
|
||||
>
|
||||
<span className="absolute inset-0 animate-ping rounded-full bg-primary-500/30 group-hover:opacity-100 opacity-0 transition-opacity" />
|
||||
<Mic className="h-8 w-8" />
|
||||
</button>
|
||||
<p className="text-sm font-medium text-slate-700 dark:text-slate-200">
|
||||
Start Oral Defense
|
||||
</p>
|
||||
|
||||
{/* Waveform mockup */}
|
||||
<div className="flex items-center gap-1" aria-hidden>
|
||||
{[12, 24, 16, 32, 20, 40, 28, 18, 36, 22, 14, 30, 20, 12, 26, 34, 18, 10, 28, 16].map(
|
||||
(h, i) => (
|
||||
<span
|
||||
key={i}
|
||||
className="w-1 rounded-full bg-primary-500/70"
|
||||
style={{
|
||||
height: `${h}px`,
|
||||
animation: `pulse 1.2s ease-in-out ${i * 0.06}s infinite`,
|
||||
}}
|
||||
/>
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Transcript */}
|
||||
<div className="rounded-lg border border-slate-200 bg-slate-50 p-4 dark:border-slate-800 dark:bg-slate-900/50">
|
||||
<h4 className="mb-3 text-sm font-semibold text-slate-700 dark:text-slate-200">
|
||||
Defense transcript
|
||||
</h4>
|
||||
<div className="space-y-4">
|
||||
{TRANSCRIPT.map((turn, i) =>
|
||||
turn.role === 'examiner' ? (
|
||||
<div key={i} className="flex gap-3">
|
||||
<span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-primary-100 text-primary-700 text-xs dark:bg-primary-900/40 dark:text-primary-300">
|
||||
AI
|
||||
</span>
|
||||
<div>
|
||||
<p className="text-xs font-medium uppercase tracking-wide text-slate-400">
|
||||
Examiner
|
||||
</p>
|
||||
<p className="mt-0.5 text-sm text-slate-700 dark:text-slate-200">
|
||||
{turn.question}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div key={i} className="flex flex-row-reverse gap-3">
|
||||
<span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-slate-200 text-slate-700 text-xs dark:bg-slate-700 dark:text-slate-200">
|
||||
AR
|
||||
</span>
|
||||
<div className="max-w-[80%]">
|
||||
<p className="text-right text-xs font-medium uppercase tracking-wide text-slate-400">
|
||||
Learner
|
||||
</p>
|
||||
<p className="mt-0.5 text-sm text-slate-700 dark:text-slate-200">
|
||||
{turn.answer}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Submit */}
|
||||
<div className="flex justify-end">
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex h-10 items-center gap-2 rounded-md bg-primary-600 px-4 text-sm font-medium text-white transition-colors hover:bg-primary-700"
|
||||
>
|
||||
Submit Defense
|
||||
<Send className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
'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 },
|
||||
];
|
||||
|
||||
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="#e2e8f0" />
|
||||
<XAxis
|
||||
dataKey="week"
|
||||
tick={{ fontSize: 12, fill: '#64748b' }}
|
||||
stroke="#cbd5e1"
|
||||
/>
|
||||
<YAxis
|
||||
domain={[0, 100]}
|
||||
tick={{ fontSize: 12, fill: '#64748b' }}
|
||||
stroke="#cbd5e1"
|
||||
tickFormatter={(v) => `${v}%`}
|
||||
/>
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
borderRadius: 8,
|
||||
border: '1px solid #e2e8f0',
|
||||
fontSize: 12,
|
||||
}}
|
||||
formatter={(v: number) => [`${v}%`, 'Mastery']}
|
||||
/>
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="mastery"
|
||||
stroke={colors.primary[600]}
|
||||
strokeWidth={2}
|
||||
fill="url(#masteryFill)"
|
||||
/>
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,141 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Code, PencilRuler, Cpu } from 'lucide-react';
|
||||
|
||||
type Tab = 'code' | 'design' | 'simulation';
|
||||
|
||||
const CODE_SAMPLE = `import { tool } from '@langchain/core/tools';
|
||||
import { z } from 'zod';
|
||||
import { ChatOpenAI } from '@langchain/openai';
|
||||
|
||||
// Define a function-calling tool with a typed schema
|
||||
const weatherSchema = z.object({
|
||||
city: z.string().describe('City to fetch weather for'),
|
||||
units: z.enum(['celsius', 'fahrenheit']).default('celsius'),
|
||||
});
|
||||
|
||||
const getWeather = tool(
|
||||
async ({ city, units }) => {
|
||||
const res = await fetch(\`/api/weather?city=\${city}&units=\${units}\`);
|
||||
return res.json();
|
||||
},
|
||||
{
|
||||
name: 'get_weather',
|
||||
description: 'Fetch the current weather for a city',
|
||||
schema: weatherSchema,
|
||||
},
|
||||
);
|
||||
|
||||
// Bind tools to a chat model and invoke with a tool call
|
||||
const model = new ChatOpenAI({ model: 'gpt-4o-mini' });
|
||||
const modelWithTools = model.bindTools([getWeather]);
|
||||
|
||||
const response = await modelWithTools.invoke(
|
||||
'What is the weather in Tokyo right now?',
|
||||
);
|
||||
|
||||
console.log(response.tool_calls);`;
|
||||
|
||||
export function WorkedExampleTabs() {
|
||||
const [tab, setTab] = useState<Tab>('code');
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col">
|
||||
{/* Tab bar */}
|
||||
<div className="flex items-center gap-1 border-b border-slate-200 dark:border-slate-800">
|
||||
{[
|
||||
{ id: 'code' as Tab, label: 'Code', icon: Code },
|
||||
{ id: 'design' as Tab, label: 'Design', icon: PencilRuler },
|
||||
{ id: 'simulation' as Tab, label: 'Simulation', icon: Cpu },
|
||||
].map((t) => {
|
||||
const Icon = t.icon;
|
||||
const active = tab === t.id;
|
||||
return (
|
||||
<button
|
||||
key={t.id}
|
||||
onClick={() => setTab(t.id)}
|
||||
className={`flex items-center gap-1.5 border-b-2 px-3 py-2 text-sm font-medium transition-colors ${
|
||||
active
|
||||
? 'border-primary-600 text-primary-700 dark:text-primary-300'
|
||||
: 'border-transparent text-slate-500 hover:text-slate-800 dark:hover:text-slate-200'
|
||||
}`}
|
||||
>
|
||||
<Icon className="h-4 w-4" />
|
||||
{t.label}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Tab content */}
|
||||
<div className="flex-1 overflow-auto">
|
||||
{tab === 'code' && (
|
||||
<pre className="m-4 overflow-auto rounded-lg bg-slate-900 p-4 text-xs leading-relaxed text-slate-100">
|
||||
<code>{CODE_SAMPLE}</code>
|
||||
</pre>
|
||||
)}
|
||||
|
||||
{tab === 'design' && (
|
||||
<div className="flex h-full items-center justify-center p-6">
|
||||
<div className="w-full max-w-md rounded-lg border border-dashed border-slate-300 p-6 text-center dark:border-slate-700">
|
||||
<PencilRuler className="mx-auto mb-3 h-8 w-8 text-slate-400" />
|
||||
<p className="text-sm font-medium text-slate-700 dark:text-slate-200">
|
||||
Design diagram
|
||||
</p>
|
||||
<div className="mt-4 flex items-center justify-between gap-2 text-xs text-slate-500 dark:text-slate-400">
|
||||
<span className="rounded-md border border-slate-200 bg-slate-50 px-2 py-1 dark:border-slate-700 dark:bg-slate-800">
|
||||
User
|
||||
</span>
|
||||
<span className="text-slate-300">→</span>
|
||||
<span className="rounded-md border border-primary-200 bg-primary-50 px-2 py-1 text-primary-700 dark:border-primary-800 dark:bg-primary-900/30 dark:text-primary-300">
|
||||
Agent
|
||||
</span>
|
||||
<span className="text-slate-300">→</span>
|
||||
<span className="rounded-md border border-slate-200 bg-slate-50 px-2 py-1 dark:border-slate-700 dark:bg-slate-800">
|
||||
Tools
|
||||
</span>
|
||||
</div>
|
||||
<p className="mt-4 text-xs text-slate-400">
|
||||
Placeholder diagram — replace with your visualizer in a later phase.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{tab === 'simulation' && (
|
||||
<div className="flex h-full flex-col gap-3 p-6">
|
||||
<div className="rounded-lg border border-slate-200 bg-slate-50 p-4 dark:border-slate-700 dark:bg-slate-800/50">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm font-medium text-slate-700 dark:text-slate-200">
|
||||
Live simulation
|
||||
</span>
|
||||
<span className="flex h-2 w-2 items-center justify-center">
|
||||
<span className="h-2 w-2 animate-ping rounded-full bg-emerald-400" />
|
||||
<span className="h-2 w-2 rounded-full bg-emerald-500" />
|
||||
</span>
|
||||
</div>
|
||||
<div className="mt-3 grid grid-cols-3 gap-3 text-center">
|
||||
<div className="rounded-md bg-white p-2 dark:bg-slate-900">
|
||||
<p className="text-xs text-slate-500">Tokens</p>
|
||||
<p className="text-lg font-semibold text-slate-800 dark:text-slate-100">1,284</p>
|
||||
</div>
|
||||
<div className="rounded-md bg-white p-2 dark:bg-slate-900">
|
||||
<p className="text-xs text-slate-500">Latency</p>
|
||||
<p className="text-lg font-semibold text-slate-800 dark:text-slate-100">312ms</p>
|
||||
</div>
|
||||
<div className="rounded-md bg-white p-2 dark:bg-slate-900">
|
||||
<p className="text-xs text-slate-500">Cost</p>
|
||||
<p className="text-lg font-semibold text-slate-800 dark:text-slate-100">$0.04</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-center text-xs text-slate-400">
|
||||
Simulation placeholder — interactive runs land in a later phase.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,371 @@
|
||||
'use client';
|
||||
|
||||
import { useMemo, useState } from 'react';
|
||||
import { Bookmark, Search, X } from 'lucide-react';
|
||||
import type { Job, Seniority } from '@nextcraft/types';
|
||||
import { Button, Input } from '@nextcraft/ui';
|
||||
import {
|
||||
formatSalaryK,
|
||||
matchBadgeClasses,
|
||||
relativeTime,
|
||||
seniorityLabel,
|
||||
} from '../../lib/format';
|
||||
|
||||
const POPULAR_SKILLS = [
|
||||
'LLM',
|
||||
'RAG',
|
||||
'Agents',
|
||||
'Python',
|
||||
'TypeScript',
|
||||
'React',
|
||||
'Vector DB',
|
||||
'Fine-tuning',
|
||||
] as const;
|
||||
|
||||
const SENIORITY_OPTIONS: Array<Seniority | 'all'> = [
|
||||
'all',
|
||||
'entry',
|
||||
'mid',
|
||||
'senior',
|
||||
'staff',
|
||||
'principal',
|
||||
];
|
||||
|
||||
export interface JobFiltersProps {
|
||||
jobs: Job[];
|
||||
employerNames: Record<string, string>;
|
||||
}
|
||||
|
||||
interface Filters {
|
||||
query: string;
|
||||
skills: string[];
|
||||
seniority: Seniority | 'all';
|
||||
remoteOnly: boolean;
|
||||
salaryMin: string;
|
||||
salaryMax: string;
|
||||
}
|
||||
|
||||
const EMPTY_FILTERS: Filters = {
|
||||
query: '',
|
||||
skills: [],
|
||||
seniority: 'all',
|
||||
remoteOnly: false,
|
||||
salaryMin: '',
|
||||
salaryMax: '',
|
||||
};
|
||||
|
||||
function matchesJob(job: Job, f: Filters, employerName: string): boolean {
|
||||
// Text query — match title, company, or any skill.
|
||||
if (f.query.trim()) {
|
||||
const q = f.query.trim().toLowerCase();
|
||||
const haystack = [
|
||||
job.title,
|
||||
employerName,
|
||||
job.location,
|
||||
...job.skills,
|
||||
]
|
||||
.join(' ')
|
||||
.toLowerCase();
|
||||
if (!haystack.includes(q)) return false;
|
||||
}
|
||||
|
||||
// Skill filters — job must include every selected skill (case-insensitive).
|
||||
if (f.skills.length > 0) {
|
||||
const jobSkillsLower = job.skills.map((s) => s.toLowerCase());
|
||||
const ok = f.skills.every((sel) =>
|
||||
jobSkillsLower.some((s) => s.includes(sel.toLowerCase())),
|
||||
);
|
||||
if (!ok) return false;
|
||||
}
|
||||
|
||||
// Seniority.
|
||||
if (f.seniority !== 'all' && job.seniority !== f.seniority) return false;
|
||||
|
||||
// Remote only.
|
||||
if (f.remoteOnly && !job.remote) return false;
|
||||
|
||||
// Salary range.
|
||||
if (f.salaryMin.trim()) {
|
||||
const min = Number(f.salaryMin);
|
||||
if (!Number.isNaN(min) && job.salaryMax < min) return false;
|
||||
}
|
||||
if (f.salaryMax.trim()) {
|
||||
const max = Number(f.salaryMax);
|
||||
if (!Number.isNaN(max) && job.salaryMin > max) return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
export function JobFilters({ jobs, employerNames }: JobFiltersProps) {
|
||||
const [filters, setFilters] = useState<Filters>(EMPTY_FILTERS);
|
||||
|
||||
const filtered = useMemo(
|
||||
() =>
|
||||
jobs.filter((job) =>
|
||||
matchesJob(job, filters, employerNames[job.employerId] ?? 'Unknown employer'),
|
||||
),
|
||||
[jobs, filters, employerNames],
|
||||
);
|
||||
|
||||
function toggleSkill(skill: string) {
|
||||
setFilters((f) => ({
|
||||
...f,
|
||||
skills: f.skills.includes(skill)
|
||||
? f.skills.filter((s) => s !== skill)
|
||||
: [...f.skills, skill],
|
||||
}));
|
||||
}
|
||||
|
||||
function resetAll() {
|
||||
setFilters(EMPTY_FILTERS);
|
||||
}
|
||||
|
||||
const activeCount =
|
||||
(filters.query.trim() ? 1 : 0) +
|
||||
filters.skills.length +
|
||||
(filters.seniority !== 'all' ? 1 : 0) +
|
||||
(filters.remoteOnly ? 1 : 0) +
|
||||
(filters.salaryMin.trim() ? 1 : 0) +
|
||||
(filters.salaryMax.trim() ? 1 : 0);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
{/* Search row */}
|
||||
<div className="flex flex-col gap-3">
|
||||
<Input
|
||||
name="marketplace-search"
|
||||
placeholder="Search AI-era roles, skills, companies..."
|
||||
icon={<Search className="h-4 w-4" />}
|
||||
value={filters.query}
|
||||
onChange={(e) => setFilters((f) => ({ ...f, query: e.target.value }))}
|
||||
aria-label="Search jobs"
|
||||
/>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
icon={<Bookmark className="h-3.5 w-3.5" />}
|
||||
type="button"
|
||||
>
|
||||
Save Search
|
||||
</Button>
|
||||
{activeCount > 0 && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
icon={<X className="h-3.5 w-3.5" />}
|
||||
type="button"
|
||||
onClick={resetAll}
|
||||
>
|
||||
Clear ({activeCount})
|
||||
</Button>
|
||||
)}
|
||||
<span className="ml-auto text-sm text-slate-500 dark:text-slate-400">
|
||||
Showing <span className="font-semibold text-slate-700 dark:text-slate-200">{filtered.length}</span> of {jobs.length} jobs
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-6 lg:grid-cols-[260px_1fr]">
|
||||
{/* Sidebar filters */}
|
||||
<aside className="flex flex-col gap-6 rounded-lg border border-slate-200 bg-white p-5 dark:border-slate-800 dark:bg-slate-900">
|
||||
<div className="flex flex-col gap-2">
|
||||
<h3 className="text-sm font-semibold text-slate-900 dark:text-slate-100">Seniority</h3>
|
||||
<select
|
||||
aria-label="Seniority filter"
|
||||
value={filters.seniority}
|
||||
onChange={(e) =>
|
||||
setFilters((f) => ({
|
||||
...f,
|
||||
seniority: e.target.value as Seniority | 'all',
|
||||
}))
|
||||
}
|
||||
className="h-10 w-full rounded-md border border-slate-300 bg-white px-3 text-sm text-slate-900 focus:border-primary-500 focus:ring-2 focus:ring-primary-500/30 focus:outline-none dark:border-slate-700 dark:bg-slate-800 dark:text-slate-100"
|
||||
>
|
||||
{SENIORITY_OPTIONS.map((s) => (
|
||||
<option key={s} value={s}>
|
||||
{s === 'all' ? 'All seniorities' : seniorityLabel(s as Seniority)}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
<h3 className="text-sm font-semibold text-slate-900 dark:text-slate-100">Popular skills</h3>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{POPULAR_SKILLS.map((skill) => {
|
||||
const active = filters.skills.includes(skill);
|
||||
return (
|
||||
<button
|
||||
key={skill}
|
||||
type="button"
|
||||
onClick={() => toggleSkill(skill)}
|
||||
aria-pressed={active}
|
||||
className={[
|
||||
'rounded-full border px-2.5 py-1 text-xs font-medium transition-colors',
|
||||
active
|
||||
? 'border-primary-600 bg-primary-600 text-white'
|
||||
: 'border-slate-300 bg-white text-slate-700 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200 dark:hover:bg-slate-700',
|
||||
].join(' ')}
|
||||
>
|
||||
{skill}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
<h3 className="text-sm font-semibold text-slate-900 dark:text-slate-100">Salary (USD)</h3>
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="number"
|
||||
min={0}
|
||||
step={1000}
|
||||
placeholder="Min"
|
||||
aria-label="Minimum salary"
|
||||
value={filters.salaryMin}
|
||||
onChange={(e) => setFilters((f) => ({ ...f, salaryMin: e.target.value }))}
|
||||
className="h-9 w-full rounded-md border border-slate-300 bg-white px-2.5 text-sm text-slate-900 focus:border-primary-500 focus:ring-2 focus:ring-primary-500/30 focus:outline-none dark:border-slate-700 dark:bg-slate-800 dark:text-slate-100"
|
||||
/>
|
||||
<span className="text-slate-400">–</span>
|
||||
<input
|
||||
type="number"
|
||||
min={0}
|
||||
step={1000}
|
||||
placeholder="Max"
|
||||
aria-label="Maximum salary"
|
||||
value={filters.salaryMax}
|
||||
onChange={(e) => setFilters((f) => ({ ...f, salaryMax: e.target.value }))}
|
||||
className="h-9 w-full rounded-md border border-slate-300 bg-white px-2.5 text-sm text-slate-900 focus:border-primary-500 focus:ring-2 focus:ring-primary-500/30 focus:outline-none dark:border-slate-700 dark:bg-slate-800 dark:text-slate-100"
|
||||
/>
|
||||
</div>
|
||||
<p className="text-xs text-slate-500 dark:text-slate-500">Enter values in USD (e.g. 120000).</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
<h3 className="text-sm font-semibold text-slate-900 dark:text-slate-100">Work location</h3>
|
||||
<label className="flex cursor-pointer items-center justify-between gap-2 text-sm text-slate-700 dark:text-slate-200">
|
||||
<span>Remote only</span>
|
||||
<button
|
||||
type="button"
|
||||
role="switch"
|
||||
aria-checked={filters.remoteOnly}
|
||||
onClick={() => setFilters((f) => ({ ...f, remoteOnly: !f.remoteOnly }))}
|
||||
className={[
|
||||
'relative h-6 w-11 rounded-full transition-colors',
|
||||
filters.remoteOnly ? 'bg-primary-600' : 'bg-slate-300 dark:bg-slate-700',
|
||||
].join(' ')}
|
||||
>
|
||||
<span
|
||||
className={[
|
||||
'absolute top-0.5 h-5 w-5 rounded-full bg-white shadow transition-transform',
|
||||
filters.remoteOnly ? 'translate-x-5' : 'translate-x-0.5',
|
||||
].join(' ')}
|
||||
/>
|
||||
</button>
|
||||
</label>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
{/* Results grid */}
|
||||
<div className="flex flex-col gap-4">
|
||||
{filtered.length === 0 ? (
|
||||
<div className="rounded-lg border border-dashed border-slate-300 p-12 text-center text-slate-500 dark:border-slate-700 dark:text-slate-400">
|
||||
No jobs match your filters. Try clearing some filters.
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||
{filtered.map((job) => (
|
||||
<JobCard
|
||||
key={job.id}
|
||||
job={job}
|
||||
employerName={employerNames[job.employerId] ?? 'Unknown employer'}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function JobCard({ job, employerName }: { job: Job; employerName: string }) {
|
||||
return (
|
||||
<article className="flex flex-col gap-3 rounded-lg border border-slate-200 bg-white p-5 shadow-sm transition-shadow hover:shadow-md dark:border-slate-800 dark:bg-slate-900">
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="flex items-start gap-3">
|
||||
<span
|
||||
aria-hidden
|
||||
className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary-100 text-sm font-semibold text-primary-700 dark:bg-primary-900/40 dark:text-primary-200"
|
||||
>
|
||||
{initialsOf(employerName)}
|
||||
</span>
|
||||
<div className="flex flex-col">
|
||||
<h3 className="text-base font-semibold text-slate-900 dark:text-slate-100">
|
||||
{job.title}
|
||||
</h3>
|
||||
<p className="text-sm text-slate-600 dark:text-slate-400">{employerName}</p>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
className={`inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-full text-xs font-bold ring-2 ${matchBadgeClasses(
|
||||
job.matchScore,
|
||||
)}`}
|
||||
title={`${job.matchScore}% AI match`}
|
||||
>
|
||||
{job.matchScore}%
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-slate-600 dark:text-slate-400">
|
||||
<span className="inline-flex items-center gap-1">
|
||||
<span className="text-slate-400">📍</span>
|
||||
{job.location}
|
||||
</span>
|
||||
{job.remote && (
|
||||
<span className="inline-flex items-center rounded-full bg-emerald-100 px-2 py-0.5 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300">
|
||||
Remote
|
||||
</span>
|
||||
)}
|
||||
<span className="inline-flex items-center gap-1">
|
||||
<span className="text-slate-400">$</span>
|
||||
{formatSalaryK(job.salaryMin)}–{formatSalaryK(job.salaryMax)}
|
||||
</span>
|
||||
<span>{relativeTime(job.postedAt)}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{job.skills.slice(0, 5).map((skill) => (
|
||||
<span
|
||||
key={skill}
|
||||
className="rounded-full bg-slate-100 px-2 py-0.5 text-xs font-medium text-slate-700 dark:bg-slate-800 dark:text-slate-200"
|
||||
>
|
||||
{skill}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-auto pt-1">
|
||||
<a
|
||||
href={`/marketplace/jobs/${job.id}`}
|
||||
className="inline-flex h-9 w-full items-center justify-center rounded-md border border-slate-300 bg-transparent text-sm font-medium text-slate-800 transition-colors hover:bg-slate-50 dark:border-slate-700 dark:text-slate-100 dark:hover:bg-slate-800"
|
||||
>
|
||||
View Details
|
||||
</a>
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
|
||||
// small inline helper so the card does not depend on the lib file twice
|
||||
function initialsOf(name: string): string {
|
||||
return name
|
||||
.split(' ')
|
||||
.filter(Boolean)
|
||||
.slice(0, 2)
|
||||
.map((p) => p[0]?.toUpperCase() ?? '')
|
||||
.join('');
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
import type { ReactNode } from 'react';
|
||||
import { Header } from './header';
|
||||
import { Footer } from './footer';
|
||||
|
||||
export function NavigationShell({ children }: { children: ReactNode }) {
|
||||
return (
|
||||
<div className="flex min-h-screen flex-col">
|
||||
<Header />
|
||||
<main className="flex-1">{children}</main>
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { ChevronDown, GraduationCap, ShoppingBag, Building2, Shield } from 'lucide-react';
|
||||
import type { RoleSurface } from '@nextcraft/types';
|
||||
import { Button } from '@nextcraft/ui';
|
||||
|
||||
const SURFACES: { value: RoleSurface; label: string; href: string; icon: typeof GraduationCap }[] = [
|
||||
{ value: 'learner', label: 'Learner', href: '/', icon: GraduationCap },
|
||||
{ value: 'marketplace', label: 'Marketplace', href: '/marketplace', icon: ShoppingBag },
|
||||
{ value: 'employer', label: 'Employer', href: '/employer', icon: Building2 },
|
||||
{ value: 'admin', label: 'Admin', href: '/admin', icon: Shield },
|
||||
];
|
||||
|
||||
export function RoleSwitcher() {
|
||||
const router = useRouter();
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setOpen((v) => !v)}
|
||||
iconRight={<ChevronDown className="h-3.5 w-3.5" />}
|
||||
>
|
||||
Switch surface
|
||||
</Button>
|
||||
{open && (
|
||||
<>
|
||||
<div className="fixed inset-0 z-10" onClick={() => setOpen(false)} aria-hidden />
|
||||
<div className="absolute right-0 z-20 mt-2 w-44 rounded-md border border-slate-200 bg-white py-1 shadow-lg dark:border-slate-800 dark:bg-slate-900">
|
||||
{SURFACES.map((s) => (
|
||||
<button
|
||||
key={s.value}
|
||||
onClick={() => {
|
||||
setOpen(false);
|
||||
router.push(s.href);
|
||||
}}
|
||||
className="flex w-full items-center gap-2 px-3 py-2 text-sm text-slate-700 hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-slate-800"
|
||||
>
|
||||
<s.icon className="h-4 w-4 text-slate-500" />
|
||||
{s.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
'use client';
|
||||
|
||||
import { createContext, useCallback, useContext, useEffect, useMemo, useState, type ReactNode } from 'react';
|
||||
import type { ThemeMode } from '@nextcraft/types';
|
||||
|
||||
interface ThemeContextValue {
|
||||
mode: ThemeMode;
|
||||
toggle: () => void;
|
||||
setMode: (mode: ThemeMode) => void;
|
||||
}
|
||||
|
||||
const ThemeContext = createContext<ThemeContextValue | null>(null);
|
||||
|
||||
export function ThemeProvider({ children }: { children: ReactNode }) {
|
||||
const [mode, setModeState] = useState<ThemeMode>('light');
|
||||
|
||||
useEffect(() => {
|
||||
const stored = typeof window !== 'undefined' ? window.localStorage.getItem('nextcraft-theme') : null;
|
||||
const prefersDark =
|
||||
typeof window !== 'undefined' && window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
const initial: ThemeMode = stored === 'dark' || stored === 'light' ? stored : prefersDark ? 'dark' : 'light';
|
||||
setModeState(initial);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const root = document.documentElement;
|
||||
if (mode === 'dark') root.classList.add('dark');
|
||||
else root.classList.remove('dark');
|
||||
window.localStorage.setItem('nextcraft-theme', mode);
|
||||
}, [mode]);
|
||||
|
||||
const setMode = useCallback((m: ThemeMode) => setModeState(m), []);
|
||||
const toggle = useCallback(() => setModeState((m) => (m === 'dark' ? 'light' : 'dark')), []);
|
||||
|
||||
const value = useMemo(() => ({ mode, toggle, setMode }), [mode, toggle, setMode]);
|
||||
return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
|
||||
}
|
||||
|
||||
export function useTheme(): ThemeContextValue {
|
||||
const ctx = useContext(ThemeContext);
|
||||
if (!ctx) throw new Error('useTheme must be used within ThemeProvider');
|
||||
return ctx;
|
||||
}
|
||||
Vendored
+4
@@ -0,0 +1,4 @@
|
||||
declare module '*.css' {
|
||||
const content: Record<string, string>;
|
||||
export default content;
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
/**
|
||||
* Marketplace formatting helpers — pure functions shared across marketplace pages.
|
||||
* Mock-data only; no backend calls.
|
||||
*/
|
||||
|
||||
import type { Seniority } from '@nextcraft/types';
|
||||
|
||||
/** Format a salary value as `$160K` (divides by 1000). */
|
||||
export function formatSalaryK(value: number): string {
|
||||
return `$${Math.round(value / 1000)}K`;
|
||||
}
|
||||
|
||||
/** Format a salary range as `$160K–$240K`. */
|
||||
export function formatSalaryRange(min: number, max: number): string {
|
||||
return `${formatSalaryK(min)}–${formatSalaryK(max)}`;
|
||||
}
|
||||
|
||||
const SENIORITY_LABELS: Record<Seniority, string> = {
|
||||
entry: 'Entry',
|
||||
mid: 'Mid',
|
||||
senior: 'Senior',
|
||||
staff: 'Lead',
|
||||
principal: 'Principal',
|
||||
};
|
||||
|
||||
export function seniorityLabel(s: Seniority): string {
|
||||
return SENIORITY_LABELS[s] ?? s;
|
||||
}
|
||||
|
||||
/**
|
||||
* Relative time label like "2 days ago" / "3 weeks ago".
|
||||
* Computed against a fixed "today" so the prototype renders deterministically
|
||||
* regardless of when it is built.
|
||||
*/
|
||||
export function relativeTime(iso: string, now: Date = new Date('2026-09-10T00:00:00Z')): string {
|
||||
const then = new Date(iso).getTime();
|
||||
const diffMs = now.getTime() - then;
|
||||
const days = Math.max(0, Math.round(diffMs / (1000 * 60 * 60 * 24)));
|
||||
if (days <= 0) return 'today';
|
||||
if (days === 1) return '1 day ago';
|
||||
if (days < 30) return `${days} days ago`;
|
||||
const weeks = Math.round(days / 7);
|
||||
if (weeks === 1) return '1 week ago';
|
||||
if (weeks < 5) return `${weeks} weeks ago`;
|
||||
const months = Math.round(days / 30);
|
||||
return months === 1 ? '1 month ago' : `${months} months ago`;
|
||||
}
|
||||
|
||||
/** Color-coded bucket for a match score (0–100). */
|
||||
export type MatchTone = 'high' | 'mid' | 'low';
|
||||
|
||||
export function matchTone(score: number): MatchTone {
|
||||
if (score > 85) return 'high';
|
||||
if (score >= 70) return 'mid';
|
||||
return 'low';
|
||||
}
|
||||
|
||||
/** Tailwind class bundle for the circular match badge background/text. */
|
||||
export function matchBadgeClasses(score: number): string {
|
||||
const tone = matchTone(score);
|
||||
if (tone === 'high')
|
||||
return 'bg-emerald-100 text-emerald-700 ring-emerald-300 dark:bg-emerald-900/40 dark:text-emerald-300 dark:ring-emerald-700';
|
||||
if (tone === 'mid')
|
||||
return 'bg-amber-100 text-amber-700 ring-amber-300 dark:bg-amber-900/40 dark:text-amber-300 dark:ring-amber-700';
|
||||
return 'bg-orange-100 text-orange-700 ring-orange-300 dark:bg-orange-900/40 dark:text-orange-300 dark:ring-orange-700';
|
||||
}
|
||||
|
||||
/** Tailwind class bundle for a horizontal skill match bar fill. */
|
||||
export function matchBarClasses(score: number): string {
|
||||
const tone = matchTone(score);
|
||||
if (tone === 'high') return 'bg-emerald-500';
|
||||
if (tone === 'mid') return 'bg-amber-500';
|
||||
return 'bg-orange-500';
|
||||
}
|
||||
|
||||
/** Initials from a name, e.g. "OpenAI Labs" → "OL". */
|
||||
export function initials(name: string): string {
|
||||
return name
|
||||
.split(' ')
|
||||
.filter(Boolean)
|
||||
.slice(0, 2)
|
||||
.map((p) => p[0]?.toUpperCase() ?? '')
|
||||
.join('');
|
||||
}
|
||||
Vendored
+6
@@ -0,0 +1,6 @@
|
||||
/// <reference types="next" />
|
||||
/// <reference types="next/image-types/global" />
|
||||
/// <reference path="./.next/types/routes.d.ts" />
|
||||
|
||||
// NOTE: This file should not be edited
|
||||
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
|
||||
@@ -0,0 +1,8 @@
|
||||
import type { NextConfig } from 'next';
|
||||
|
||||
const config: NextConfig = {
|
||||
transpilePackages: ['@nextcraft/ui', '@nextcraft/types', '@nextcraft/mock-data'],
|
||||
reactStrictMode: true,
|
||||
};
|
||||
|
||||
export default config;
|
||||
@@ -0,0 +1,31 @@
|
||||
{
|
||||
"name": "web",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"typecheck": "tsc --noEmit"
|
||||
},
|
||||
"dependencies": {
|
||||
"@nextcraft/mock-data": "workspace:*",
|
||||
"@nextcraft/types": "workspace:*",
|
||||
"@nextcraft/ui": "workspace:*",
|
||||
"@xyflow/react": "^12.3.5",
|
||||
"lucide-react": "^0.468.0",
|
||||
"next": "^15.1.3",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"recharts": "^2.15.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/postcss": "^4.0.0",
|
||||
"@types/node": "20.17.6",
|
||||
"@types/react": "^19.0.0",
|
||||
"@types/react-dom": "^19.0.0",
|
||||
"tailwindcss": "^4.0.0",
|
||||
"typescript": "^5.7.2"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
const config = {
|
||||
plugins: {
|
||||
'@tailwindcss/postcss': {},
|
||||
},
|
||||
};
|
||||
|
||||
export default config;
|
||||
@@ -0,0 +1,22 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"plugins": [{ "name": "next" }],
|
||||
"jsx": "preserve",
|
||||
"moduleResolution": "bundler",
|
||||
"allowJs": true,
|
||||
"noEmit": true,
|
||||
"incremental": true,
|
||||
"paths": {
|
||||
"@/*": ["./*"],
|
||||
"@nextcraft/ui": ["../../packages/ui/src/index.ts"],
|
||||
"@nextcraft/ui/*": ["../../packages/ui/src/*"],
|
||||
"@nextcraft/types": ["../../packages/types/index.ts"],
|
||||
"@nextcraft/types/*": ["../../packages/types/*"],
|
||||
"@nextcraft/mock-data": ["../../packages/mock-data/index.ts"],
|
||||
"@nextcraft/mock-data/*": ["../../packages/mock-data/*"]
|
||||
}
|
||||
},
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
{
|
||||
"name": "nextcraft",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"packageManager": "pnpm@12.3.4",
|
||||
"scripts": {
|
||||
"dev": "turbo dev",
|
||||
"build": "turbo build",
|
||||
"lint": "turbo lint",
|
||||
"typecheck": "turbo typecheck",
|
||||
"clean": "turbo clean && rm -rf node_modules"
|
||||
},
|
||||
"devDependencies": {
|
||||
"turbo": "^2.3.3",
|
||||
"typescript": "^5.7.2"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,470 @@
|
||||
/**
|
||||
* Nextcraft — Admin Surface Mock Data
|
||||
*
|
||||
* Mock data for the admin surface only: platform metrics, activity feed,
|
||||
* system health, learner roster (admin view), and marketplace moderation
|
||||
* queues. Pure prototype data — no backend, no business logic.
|
||||
*/
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Platform metrics (REQ-022)
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export interface PlatformMetric {
|
||||
id: string;
|
||||
label: string;
|
||||
value: number;
|
||||
/** Rendered suffix (e.g. "%" or ""). */
|
||||
suffix: string;
|
||||
/** Trend vs previous period, in percentage points (signed). */
|
||||
trendPct: number;
|
||||
/** Lucide icon name (resolved by the page). */
|
||||
icon: string;
|
||||
/** Tailwind color token used for the icon chip. */
|
||||
tone: 'indigo' | 'emerald' | 'amber' | 'rose' | 'cyan' | 'violet';
|
||||
}
|
||||
|
||||
export const platformMetrics: PlatformMetric[] = [
|
||||
{
|
||||
id: 'metric-learners',
|
||||
label: 'Total Learners',
|
||||
value: 1247,
|
||||
suffix: '',
|
||||
trendPct: 4.2,
|
||||
icon: 'Users',
|
||||
tone: 'indigo',
|
||||
},
|
||||
{
|
||||
id: 'metric-employers',
|
||||
label: 'Total Employers',
|
||||
value: 89,
|
||||
suffix: '',
|
||||
trendPct: 1.8,
|
||||
icon: 'Building2',
|
||||
tone: 'emerald',
|
||||
},
|
||||
{
|
||||
id: 'metric-placements',
|
||||
label: 'Active Placements',
|
||||
value: 312,
|
||||
suffix: '',
|
||||
trendPct: 6.5,
|
||||
icon: 'Briefcase',
|
||||
tone: 'amber',
|
||||
},
|
||||
{
|
||||
id: 'metric-completion',
|
||||
label: 'Completion Rate',
|
||||
value: 38,
|
||||
suffix: '%',
|
||||
trendPct: 2.1,
|
||||
icon: 'GraduationCap',
|
||||
tone: 'violet',
|
||||
},
|
||||
{
|
||||
id: 'metric-nps',
|
||||
label: 'NPS Score',
|
||||
value: 47,
|
||||
suffix: '',
|
||||
trendPct: -1.2,
|
||||
icon: 'ThumbsUp',
|
||||
tone: 'cyan',
|
||||
},
|
||||
];
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Activity feed (REQ-022)
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export interface ActivityEvent {
|
||||
id: string;
|
||||
message: string;
|
||||
/** Relative-time label shown to the user (kept static for the prototype). */
|
||||
relativeTime: string;
|
||||
/** Lucide icon name. */
|
||||
icon: string;
|
||||
/** Tailwind color token used for the icon chip. */
|
||||
tone: 'indigo' | 'emerald' | 'amber' | 'rose' | 'cyan' | 'violet';
|
||||
}
|
||||
|
||||
export const activityFeed: ActivityEvent[] = [
|
||||
{
|
||||
id: 'act-001',
|
||||
message: 'New learner registered: Sarah Chen joined AI Orchestration Engineer stack',
|
||||
relativeTime: '5 min ago',
|
||||
icon: 'UserPlus',
|
||||
tone: 'indigo',
|
||||
},
|
||||
{
|
||||
id: 'act-002',
|
||||
message: "Competency mastered: Marcus Lee completed 'Multi-Agent Communication'",
|
||||
relativeTime: '23 min ago',
|
||||
icon: 'CheckCircle',
|
||||
tone: 'emerald',
|
||||
},
|
||||
{
|
||||
id: 'act-003',
|
||||
message: "New job posted: OpenAI Labs posted 'Senior LLM Engineer'",
|
||||
relativeTime: '1 hour ago',
|
||||
icon: 'Briefcase',
|
||||
tone: 'amber',
|
||||
},
|
||||
{
|
||||
id: 'act-004',
|
||||
message: 'Placement recorded: Alex Rivera hired at Anthropic Research',
|
||||
relativeTime: '2 hours ago',
|
||||
icon: 'Award',
|
||||
tone: 'violet',
|
||||
},
|
||||
{
|
||||
id: 'act-005',
|
||||
message: 'Employer verified: Hugging Face completed identity verification',
|
||||
relativeTime: '3 hours ago',
|
||||
icon: 'ShieldCheck',
|
||||
tone: 'emerald',
|
||||
},
|
||||
{
|
||||
id: 'act-006',
|
||||
message: 'Microcredential issued: 5 learners earned RAG Pipeline Design credential',
|
||||
relativeTime: '5 hours ago',
|
||||
icon: 'GraduationCap',
|
||||
tone: 'cyan',
|
||||
},
|
||||
{
|
||||
id: 'act-007',
|
||||
message: "Oral defense completed: Jamie Park defended 'Agent Architecture Patterns'",
|
||||
relativeTime: '8 hours ago',
|
||||
icon: 'MessageSquare',
|
||||
tone: 'indigo',
|
||||
},
|
||||
{
|
||||
id: 'act-008',
|
||||
message: 'New enrollment spike: 23 new learners in Computational Sciences',
|
||||
relativeTime: '12 hours ago',
|
||||
icon: 'TrendingUp',
|
||||
tone: 'rose',
|
||||
},
|
||||
{
|
||||
id: 'act-009',
|
||||
message: "Competency published: 'Guardrails & Output Validation' added to AI Orchestration stack",
|
||||
relativeTime: '1 day ago',
|
||||
icon: 'BookOpen',
|
||||
tone: 'violet',
|
||||
},
|
||||
{
|
||||
id: 'act-010',
|
||||
message: 'Employer application submitted: Mistral AI requested marketplace access',
|
||||
relativeTime: '2 days ago',
|
||||
icon: 'Building2',
|
||||
tone: 'amber',
|
||||
},
|
||||
];
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// System health (REQ-022)
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export type ServiceStatus = 'operational' | 'degraded' | 'down';
|
||||
|
||||
export interface ServiceHealth {
|
||||
id: string;
|
||||
name: string;
|
||||
status: ServiceStatus;
|
||||
}
|
||||
|
||||
export const serviceHealth: ServiceHealth[] = [
|
||||
{ id: 'svc-web', name: 'Web Server', status: 'operational' },
|
||||
{ id: 'svc-db', name: 'Database', status: 'operational' },
|
||||
{ id: 'svc-ai-tutor', name: 'AI Tutor Service', status: 'operational' },
|
||||
{ id: 'svc-assessment', name: 'Assessment Engine', status: 'degraded' },
|
||||
{ id: 'svc-jobs', name: 'Job Aggregation', status: 'operational' },
|
||||
{ id: 'svc-search', name: 'Search Service', status: 'operational' },
|
||||
];
|
||||
|
||||
/** 30-day uptime bars (mock percentages for the simple visual). */
|
||||
export const uptimeBars: number[] = [
|
||||
99.98, 99.99, 99.95, 99.97, 100.0, 99.91, 99.88, 99.97, 99.99, 99.96, 99.92,
|
||||
99.98, 99.99, 99.95, 100.0, 99.97, 99.93, 99.9, 99.96, 99.98, 99.99, 99.94,
|
||||
99.97, 99.96, 99.92, 99.99, 99.98, 99.95, 99.97, 99.96,
|
||||
];
|
||||
|
||||
export interface SystemStats {
|
||||
errorRate: string;
|
||||
avgResponseMs: number;
|
||||
}
|
||||
|
||||
export const systemStats: SystemStats = {
|
||||
errorRate: '0.02%',
|
||||
avgResponseMs: 142,
|
||||
};
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Learner roster (admin view) (REQ-023)
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export type LearnerStatus = 'active' | 'completed' | 'paused';
|
||||
|
||||
export interface AdminLearnerCompetency {
|
||||
id: string;
|
||||
name: string;
|
||||
status: 'mastered' | 'in_progress' | 'available' | 'locked';
|
||||
}
|
||||
|
||||
export interface AdminLearnerCredential {
|
||||
id: string;
|
||||
name: string;
|
||||
issuedAt: string;
|
||||
score: number;
|
||||
}
|
||||
|
||||
export interface AdminLearner {
|
||||
id: string;
|
||||
name: string;
|
||||
email: string;
|
||||
stackId: string;
|
||||
stackName: string;
|
||||
progressPct: number;
|
||||
masteredCount: number;
|
||||
totalCompetencies: number;
|
||||
status: LearnerStatus;
|
||||
joinedAt: string;
|
||||
competencies: AdminLearnerCompetency[];
|
||||
credentials: AdminLearnerCredential[];
|
||||
}
|
||||
|
||||
const STACKS = [
|
||||
{ id: 'stack-orchestration', name: 'AI Orchestration Engineer' },
|
||||
{ id: 'stack-safety', name: 'AI Safety & Governance Lead' },
|
||||
{ id: 'stack-designer', name: 'Human-AI Product Designer' },
|
||||
{ id: 'stack-operator', name: 'AI-Augmented Field Operator' },
|
||||
{ id: 'stack-science', name: 'Computational Sciences Practitioner' },
|
||||
];
|
||||
|
||||
const STACK_TOTALS: Record<string, number> = {
|
||||
'stack-orchestration': 15,
|
||||
'stack-safety': 14,
|
||||
'stack-designer': 13,
|
||||
'stack-operator': 12,
|
||||
'stack-science': 16,
|
||||
};
|
||||
|
||||
const COMP_NAME_BANK: Record<string, string[]> = {
|
||||
'stack-orchestration': [
|
||||
'Agent Architecture Patterns',
|
||||
'Multi-Agent Communication',
|
||||
'Tool Use & Function Calling',
|
||||
'Prompt Engineering Fundamentals',
|
||||
'RAG Pipeline Design',
|
||||
'Vector Databases & Embeddings',
|
||||
'LLM Evaluation & Metrics',
|
||||
'Guardrails & Output Validation',
|
||||
'Agent Memory Systems',
|
||||
'Workflow Orchestration',
|
||||
'Model Routing & Cascading',
|
||||
'Streaming & Incremental Output',
|
||||
'Observability for Agents',
|
||||
'Cost Optimization Strategies',
|
||||
'Production Deployment Patterns',
|
||||
],
|
||||
'stack-safety': [
|
||||
'Alignment Fundamentals',
|
||||
'Red Teaming Methodologies',
|
||||
'Model Card Authoring',
|
||||
'Bias Auditing',
|
||||
'AI Policy Frameworks',
|
||||
'Risk Taxonomy & Classification',
|
||||
'Interpretability Techniques',
|
||||
'Incident Response for AI',
|
||||
'Data Provenance & Lineage',
|
||||
'Jailbreak & Prompt Injection Defense',
|
||||
'Model Monitoring in Production',
|
||||
'Privacy-Preserving ML',
|
||||
'Governance Documentation',
|
||||
'Stakeholder Communication',
|
||||
],
|
||||
'stack-designer': [
|
||||
'Agentic Interaction Patterns',
|
||||
'Conversational UX',
|
||||
'AI Transparency Patterns',
|
||||
'Human-in-the-Loop Design',
|
||||
'Prompt UX',
|
||||
'Failure & Fallback Design',
|
||||
'Multimodal Interface Design',
|
||||
'Trust & Calibration',
|
||||
'Accessibility for AI Interfaces',
|
||||
'Persona & Tone Systems',
|
||||
'Evaluation of AI UX',
|
||||
'Onboarding to Agentic Systems',
|
||||
'AI Ethics in Product Design',
|
||||
],
|
||||
'stack-operator': [
|
||||
'AI Co-Pilot Operation',
|
||||
'Robotics Safety Protocols',
|
||||
'Predictive Maintenance Alerts',
|
||||
'Computer Vision Inspection',
|
||||
'Sensor Data Interpretation',
|
||||
'Digital Twin Fundamentals',
|
||||
'Augmented Reality Overlays',
|
||||
'Edge Model Deployment',
|
||||
'Calibration & Drift Correction',
|
||||
'Field Data Collection',
|
||||
'Autonomous System Supervision',
|
||||
'Safety-Critical Decision Making',
|
||||
],
|
||||
'stack-science': [
|
||||
'Scientific Computing with Python',
|
||||
'ML for Scientific Discovery',
|
||||
'Molecular & Materials Simulation',
|
||||
'Climate Modeling Fundamentals',
|
||||
'Bioinformatics Pipelines',
|
||||
'High-Performance Computing',
|
||||
'Scientific Data Visualization',
|
||||
'Reproducible Research Practices',
|
||||
'Statistical Inference',
|
||||
'Physics-Informed Neural Networks',
|
||||
'Generative Models for Science',
|
||||
'Causal Inference Methods',
|
||||
'Experiment Design',
|
||||
'Data Assimilation',
|
||||
'Scientific Writing with AI',
|
||||
'Open Science & FAIR Data',
|
||||
],
|
||||
};
|
||||
|
||||
function buildCompetencies(
|
||||
stackId: string,
|
||||
mastered: number,
|
||||
inProgress: number,
|
||||
): AdminLearnerCompetency[] {
|
||||
const names = COMP_NAME_BANK[stackId] ?? [];
|
||||
const out: AdminLearnerCompetency[] = names.map((name, i) => {
|
||||
let status: AdminLearnerCompetency['status'] = 'locked';
|
||||
if (i < mastered) status = 'mastered';
|
||||
else if (i < mastered + inProgress) status = 'in_progress';
|
||||
else if (i < mastered + inProgress + 3) status = 'available';
|
||||
return { id: `${stackId}-c${i.toString().padStart(3, '0')}`, name, status };
|
||||
});
|
||||
return out;
|
||||
}
|
||||
|
||||
function buildCredentials(
|
||||
stackId: string,
|
||||
mastered: number,
|
||||
): AdminLearnerCredential[] {
|
||||
const names = COMP_NAME_BANK[stackId] ?? [];
|
||||
const count = Math.min(mastered, 6);
|
||||
const out: AdminLearnerCredential[] = [];
|
||||
for (let i = 0; i < count; i++) {
|
||||
out.push({
|
||||
id: `mc-${stackId}-${i}`,
|
||||
name: names[i] ?? `Competency ${i + 1}`,
|
||||
issuedAt: `2026-0${(i % 8) + 1}-${((i * 4) % 27 + 1).toString().padStart(2, '0')}T10:00:00Z`,
|
||||
score: 80 + ((i * 7) % 18),
|
||||
});
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
interface RosterSeed {
|
||||
name: string;
|
||||
email: string;
|
||||
stackIdx: number;
|
||||
mastered: number;
|
||||
inProgress: number;
|
||||
status: LearnerStatus;
|
||||
joinedAt: string;
|
||||
}
|
||||
|
||||
const ROSTER_SEEDS: RosterSeed[] = [
|
||||
{ name: 'Sarah Chen', email: 'sarah.chen@example.com', stackIdx: 0, mastered: 9, inProgress: 2, status: 'active', joinedAt: '2026-05-12T09:00:00Z' },
|
||||
{ name: 'Marcus Lee', email: 'marcus.lee@example.com', stackIdx: 0, mastered: 14, inProgress: 1, status: 'active', joinedAt: '2026-02-03T09:00:00Z' },
|
||||
{ name: 'Jamie Park', email: 'jamie.park@example.com', stackIdx: 0, mastered: 15, inProgress: 0, status: 'completed', joinedAt: '2025-12-01T09:00:00Z' },
|
||||
{ name: 'Alex Rivera', email: 'alex.rivera@example.com', stackIdx: 1, mastered: 10, inProgress: 2, status: 'active', joinedAt: '2026-04-18T09:00:00Z' },
|
||||
{ name: 'Priya Sharma', email: 'priya.sharma@example.com', stackIdx: 1, mastered: 5, inProgress: 3, status: 'active', joinedAt: '2026-06-22T09:00:00Z' },
|
||||
{ name: 'Diego Morales', email: 'diego.morales@example.com', stackIdx: 1, mastered: 14, inProgress: 0, status: 'completed', joinedAt: '2025-11-10T09:00:00Z' },
|
||||
{ name: 'Riley Thompson', email: 'riley.thompson@example.com', stackIdx: 2, mastered: 7, inProgress: 2, status: 'active', joinedAt: '2026-07-01T09:00:00Z' },
|
||||
{ name: 'Maya Patel', email: 'maya.patel@example.com', stackIdx: 2, mastered: 3, inProgress: 1, status: 'paused', joinedAt: '2026-08-15T09:00:00Z' },
|
||||
{ name: 'Jordan Kim', email: 'jordan.kim@example.com', stackIdx: 2, mastered: 13, inProgress: 0, status: 'completed', joinedAt: '2026-01-20T09:00:00Z' },
|
||||
{ name: 'Sam Wilson', email: 'sam.wilson@example.com', stackIdx: 3, mastered: 4, inProgress: 2, status: 'active', joinedAt: '2026-08-02T09:00:00Z' },
|
||||
{ name: 'Taylor Brooks', email: 'taylor.brooks@example.com', stackIdx: 3, mastered: 12, inProgress: 0, status: 'completed', joinedAt: '2026-01-05T09:00:00Z' },
|
||||
{ name: 'Casey Nguyen', email: 'casey.nguyen@example.com', stackIdx: 4, mastered: 8, inProgress: 3, status: 'active', joinedAt: '2026-03-30T09:00:00Z' },
|
||||
{ name: 'Morgan Davis', email: 'morgan.davis@example.com', stackIdx: 4, mastered: 16, inProgress: 0, status: 'completed', joinedAt: '2025-10-14T09:00:00Z' },
|
||||
{ name: 'Avery Garcia', email: 'avery.garcia@example.com', stackIdx: 4, mastered: 2, inProgress: 1, status: 'paused', joinedAt: '2026-08-28T09:00:00Z' },
|
||||
{ name: 'Quinn Foster', email: 'quinn.foster@example.com', stackIdx: 0, mastered: 6, inProgress: 3, status: 'active', joinedAt: '2026-07-19T09:00:00Z' },
|
||||
];
|
||||
|
||||
export const adminLearners: AdminLearner[] = ROSTER_SEEDS.map((seed, i) => {
|
||||
const stack = STACKS[seed.stackIdx];
|
||||
const total = STACK_TOTALS[stack.id];
|
||||
const competencies = buildCompetencies(stack.id, seed.mastered, seed.inProgress);
|
||||
const credentials = buildCredentials(stack.id, seed.mastered);
|
||||
const progressPct = Math.round((seed.mastered / total) * 100);
|
||||
return {
|
||||
id: `adm-lrn-${(i + 1).toString().padStart(3, '0')}`,
|
||||
name: seed.name,
|
||||
email: seed.email,
|
||||
stackId: stack.id,
|
||||
stackName: stack.name,
|
||||
progressPct,
|
||||
masteredCount: seed.mastered,
|
||||
totalCompetencies: total,
|
||||
status: seed.status,
|
||||
joinedAt: seed.joinedAt,
|
||||
competencies,
|
||||
credentials,
|
||||
};
|
||||
});
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Marketplace moderation queues (REQ-025)
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export interface JobReviewItem {
|
||||
id: string;
|
||||
title: string;
|
||||
employerName: string;
|
||||
submittedAt: string;
|
||||
stackName: string;
|
||||
location: string;
|
||||
}
|
||||
|
||||
export const jobReviewQueue: JobReviewItem[] = [
|
||||
{ id: 'rev-001', title: 'Senior LLM Engineer', employerName: 'OpenAI Labs', submittedAt: '2026-09-08T14:00:00Z', stackName: 'AI Orchestration Engineer', location: 'San Francisco, CA (Remote)' },
|
||||
{ id: 'rev-002', title: 'AI Safety Auditor', employerName: 'Anthropic Research', submittedAt: '2026-09-09T11:30:00Z', stackName: 'AI Safety & Governance Lead', location: 'San Francisco, CA' },
|
||||
{ id: 'rev-003', title: 'Agentic UX Designer', employerName: 'Hugging Face', submittedAt: '2026-09-09T16:45:00Z', stackName: 'Human-AI Product Designer', location: 'Remote' },
|
||||
{ id: 'rev-004', title: 'Field Robotics Lead', employerName: 'Boston Dynamics', submittedAt: '2026-09-10T08:15:00Z', stackName: 'AI-Augmented Field Operator', location: 'Waltham, MA' },
|
||||
{ id: 'rev-005', title: 'Climate ML Researcher', employerName: 'DeepMind', submittedAt: '2026-09-10T10:00:00Z', stackName: 'Computational Sciences Practitioner', location: 'London (Remote)' },
|
||||
];
|
||||
|
||||
export interface EmployerVerificationItem {
|
||||
id: string;
|
||||
name: string;
|
||||
logoInitials: string;
|
||||
industry: string;
|
||||
submittedAt: string;
|
||||
location: string;
|
||||
}
|
||||
|
||||
export const employerVerificationQueue: EmployerVerificationItem[] = [
|
||||
{ id: 'ver-001', name: 'Mistral AI', logoInitials: 'MA', industry: 'Artificial Intelligence', submittedAt: '2026-09-07T09:00:00Z', location: 'Paris, France' },
|
||||
{ id: 'ver-002', name: 'Cohere', logoInitials: 'CO', industry: 'Language Models', submittedAt: '2026-09-08T13:20:00Z', location: 'Toronto, Canada' },
|
||||
{ id: 'ver-003', name: 'Scale AI', logoInitials: 'SA', industry: 'Data & Annotation', submittedAt: '2026-09-09T17:00:00Z', location: 'San Francisco, CA' },
|
||||
];
|
||||
|
||||
export type FlaggedContentType = 'Job Posting' | 'Review' | 'Employer Profile';
|
||||
|
||||
export interface FlaggedContentItem {
|
||||
id: string;
|
||||
contentType: FlaggedContentType;
|
||||
title: string;
|
||||
flaggedBy: string;
|
||||
reason: string;
|
||||
flaggedAt: string;
|
||||
}
|
||||
|
||||
export const flaggedContentQueue: FlaggedContentItem[] = [
|
||||
{ id: 'flag-001', contentType: 'Job Posting', title: 'Junior Prompt Engineer', flaggedBy: 'Automated filter', reason: 'Suspicious salary range', flaggedAt: '2026-09-09T12:00:00Z' },
|
||||
{ id: 'flag-002', contentType: 'Review', title: 'Anonymous review on OpenAI Labs', flaggedBy: 'User report', reason: 'Inappropriate language', flaggedAt: '2026-09-09T18:30:00Z' },
|
||||
{ id: 'flag-003', contentType: 'Employer Profile', title: 'Stealth Startup 42', flaggedBy: 'Moderator', reason: 'Unverified contact info', flaggedAt: '2026-09-10T07:45:00Z' },
|
||||
{ id: 'flag-004', contentType: 'Job Posting', title: 'ML Internship', flaggedBy: 'Automated filter', reason: 'Missing required fields', flaggedAt: '2026-09-10T09:15:00Z' },
|
||||
];
|
||||
@@ -0,0 +1,112 @@
|
||||
/**
|
||||
* Pre-scripted AI tutor responses for the prototype.
|
||||
* Each pair has a Coach (motivational, pacing) and Tutor (concept, Socratic)
|
||||
* variant keyed by intent.
|
||||
*/
|
||||
|
||||
export interface TutorResponse {
|
||||
id: string;
|
||||
intent: string;
|
||||
agent: 'coach' | 'tutor';
|
||||
message: string;
|
||||
suggestedActions?: string[];
|
||||
}
|
||||
|
||||
export const aiTutorResponses: TutorResponse[] = [
|
||||
{
|
||||
id: 'resp-001',
|
||||
intent: 'stuck-on-concept',
|
||||
agent: 'coach',
|
||||
message:
|
||||
"I can see you've hit a wall on RAG Pipeline Design — that's the most common sticking point in this stack. Take a 5-minute break, then come back and let's try a smaller chunk. You've already mastered Tool Use, so the retrieval pieces will click faster than you expect.",
|
||||
suggestedActions: ['Take a break', 'Review a worked example', 'Break it into smaller steps'],
|
||||
},
|
||||
{
|
||||
id: 'resp-002',
|
||||
intent: 'stuck-on-concept',
|
||||
agent: 'tutor',
|
||||
message:
|
||||
"Let's build intuition first. RAG is a two-stage retrieval pipeline: (1) given a query, find the most relevant passages from a corpus, and (2) feed those passages into the model as context so its answer is grounded. Socratic question: why might a lexical search (like BM25) struggle with a query phrased very differently from the document text?",
|
||||
suggestedActions: ['Show me a worked example', 'Compare BM25 vs embeddings', 'Try a practice problem'],
|
||||
},
|
||||
{
|
||||
id: 'resp-003',
|
||||
intent: 'request-pacing',
|
||||
agent: 'coach',
|
||||
message:
|
||||
"You're 62% through the AI Orchestration stack and ahead of your original pace by nine days. Your next two defenses are scheduled in 11 days. I recommend a 3-day sprint on Multi-Agent Communication, then one light day before the defense prep.",
|
||||
suggestedActions: ['Show my weekly plan', 'Schedule a lighter day', 'Adjust pace'],
|
||||
},
|
||||
{
|
||||
id: 'resp-004',
|
||||
intent: 'request-pacing',
|
||||
agent: 'tutor',
|
||||
message:
|
||||
'Here is a suggested sequence: complete the Multi-Agent Communication module in 3 sessions of 45 minutes, then the Memory Systems primer in 2 sessions. After that, one full session for defense rehearsal. This matches the cognitive load profile of learners who succeeded before you.',
|
||||
suggestedActions: ['Lock in this plan', 'Adjust session length', 'See alternatives'],
|
||||
},
|
||||
{
|
||||
id: 'resp-005',
|
||||
intent: 'celebrate-milestone',
|
||||
agent: 'coach',
|
||||
message:
|
||||
"Huge milestone — you just earned your Tool Use & Function Calling microcredential with a 91. That's above the cohort median. You now have three of the five core orchestration credentials. Two more and you qualify for the stack endorsement.",
|
||||
suggestedActions: ['See path to endorsement', 'Share with employer partners', 'Pick the next competency'],
|
||||
},
|
||||
{
|
||||
id: 'resp-006',
|
||||
intent: 'celebrate-milestone',
|
||||
agent: 'tutor',
|
||||
message:
|
||||
'Your artifact for this competency showed clean handling of structured outputs and graceful fallback when the model returned malformed JSON. For your next competency, I recommend exploring how tool-use composes with multi-agent communication — that will set you up for the stack endorsement.',
|
||||
suggestedActions: ['Start Multi-Agent Communication', 'Review a harder artifact example', 'Read a case study'],
|
||||
},
|
||||
{
|
||||
id: 'resp-007',
|
||||
intent: 'explain-socratic',
|
||||
agent: 'tutor',
|
||||
message:
|
||||
"Think about agent memory as three layers: short-term context (the current conversation window), episodic memory (records of past agent runs you can replay), and long-term semantic memory (consolidated knowledge you distill over time). Question: if an agent handles 10,000 sessions a day, which layer would you consolidate into long-term memory, and how often?",
|
||||
suggestedActions: ['I have an answer', 'Give me a hint', 'Show a worked example'],
|
||||
},
|
||||
{
|
||||
id: 'resp-008',
|
||||
intent: 'defense-prep',
|
||||
agent: 'coach',
|
||||
message:
|
||||
"Your oral defense for Multi-Agent Communication is in 11 days. You are well prepared — your process trace shows 14 distinct practice runs. Let's spend one session rehearsing the edge-case questions, then a mock defense with me acting as the panel.",
|
||||
suggestedActions: ['Start mock defense', 'Review edge-case questions', 'See my process trace'],
|
||||
},
|
||||
{
|
||||
id: 'resp-009',
|
||||
intent: 'defense-prep',
|
||||
agent: 'tutor',
|
||||
message:
|
||||
"In a defense you'll be asked to explain your design trade-offs, not just your code. Be ready to answer: why did you choose a blackboard architecture over direct message passing? What failure mode did you observe under load, and how did you mitigate it? Let's rehearse one question now.",
|
||||
suggestedActions: ['Rehearse question 1', 'Rehearse question 2', 'See scoring rubric'],
|
||||
},
|
||||
{
|
||||
id: 'resp-010',
|
||||
intent: 'career-guidance',
|
||||
agent: 'coach',
|
||||
message:
|
||||
"Based on your competencies and artifacts, you match strongly to AI Orchestration Engineer roles (96%) and Agent Reliability Engineer roles (90%). Two employers are actively hiring for these profiles. Want me to show you the matching jobs and the remaining competencies they require?",
|
||||
suggestedActions: ['Show matching jobs', 'See competency gaps', 'Build a targeted plan'],
|
||||
},
|
||||
{
|
||||
id: 'resp-011',
|
||||
intent: 'career-guidance',
|
||||
agent: 'tutor',
|
||||
message:
|
||||
'Your portfolio demonstrates multi-agent systems and evaluation, which are the two most-cited skills in senior orchestration postings. The gap to a Staff-level role is observability and cost optimization. I recommend the Agent Reliability Engineer competencies as your next sprint.',
|
||||
suggestedActions: ['Start reliability sprint', 'See a staff-level job', 'Compare skill gaps'],
|
||||
},
|
||||
{
|
||||
id: 'resp-012',
|
||||
intent: 'check-understanding',
|
||||
agent: 'tutor',
|
||||
message:
|
||||
'Quick check: in a plan-and-execute agent, what is the advantage of re-planning after each tool call rather than executing the full plan from the start? Take your time — there is no penalty for thinking.',
|
||||
suggestedActions: ['I have an answer', 'Give me a hint', 'Skip this check'],
|
||||
},
|
||||
];
|
||||
@@ -0,0 +1,184 @@
|
||||
import type { Candidate } from '@nextcraft/types';
|
||||
|
||||
export const candidates: Candidate[] = [
|
||||
{
|
||||
id: 'cand-001',
|
||||
name: 'Maya Okonkwo',
|
||||
avatar: 'https://i.pravatar.cc/150?img=1',
|
||||
headline: 'AI Orchestration Engineer · Multi-agent systems, RAG, evaluation',
|
||||
competencyStackId: 'stack-orchestration',
|
||||
microcredentials: 11,
|
||||
artifactCount: 12,
|
||||
defenseScore: 92,
|
||||
matchScore: 96,
|
||||
bio: 'Shipped two production agent systems handling 4M+ queries/week. Evidence portfolio includes a multi-agent research assistant with full eval harness.',
|
||||
},
|
||||
{
|
||||
id: 'cand-002',
|
||||
name: 'Devon Park',
|
||||
avatar: 'https://i.pravatar.cc/150?img=2',
|
||||
headline: 'AI Safety Researcher · Alignment, red teaming, interpretability',
|
||||
competencyStackId: 'stack-safety',
|
||||
microcredentials: 10,
|
||||
artifactCount: 9,
|
||||
defenseScore: 90,
|
||||
matchScore: 91,
|
||||
bio: 'Published two workshop papers on jailbreak robustness. Runs an automated red-team suite with 1,200+ probes across three model families.',
|
||||
},
|
||||
{
|
||||
id: 'cand-003',
|
||||
name: 'Priya Iyer',
|
||||
avatar: 'https://i.pravatar.cc/150?img=3',
|
||||
headline: 'Human-AI Product Designer · Agentic UX, trust calibration',
|
||||
competencyStackId: 'stack-designer',
|
||||
microcredentials: 9,
|
||||
artifactCount: 11,
|
||||
defenseScore: 88,
|
||||
matchScore: 89,
|
||||
bio: 'Designed the transparency system for an assistant with 2M MAU. Portfolio includes a full human-in-the-loop review pattern library.',
|
||||
},
|
||||
{
|
||||
id: 'cand-004',
|
||||
name: 'Tomás Vega',
|
||||
avatar: 'https://i.pravatar.cc/150?img=4',
|
||||
headline: 'LLM Application Developer · RAG, function calling, streaming',
|
||||
competencyStackId: 'stack-orchestration',
|
||||
microcredentials: 12,
|
||||
artifactCount: 10,
|
||||
defenseScore: 87,
|
||||
matchScore: 93,
|
||||
bio: 'Built a document-grounded Q&A product from zero to 50K daily actives. Specializes in retrieval quality and output validation.',
|
||||
},
|
||||
{
|
||||
id: 'cand-005',
|
||||
name: 'Hana Lindqvist',
|
||||
avatar: 'https://i.pravatar.cc/150?img=5',
|
||||
headline: 'Computational Biologist · Drug discovery, ML pipelines',
|
||||
competencyStackId: 'stack-science',
|
||||
microcredentials: 13,
|
||||
artifactCount: 8,
|
||||
defenseScore: 91,
|
||||
matchScore: 88,
|
||||
bio: 'Active-learning pipeline nominated for a phenotype-prediction benchmark. Reproducible workflows with Snakemake and containerized HPC jobs.',
|
||||
},
|
||||
{
|
||||
id: 'cand-006',
|
||||
name: 'Marcus Bell',
|
||||
avatar: 'https://i.pravatar.cc/150?img=6',
|
||||
headline: 'Robotics Operations Specialist · Vision systems, field AI',
|
||||
competencyStackId: 'stack-operator',
|
||||
microcredentials: 8,
|
||||
artifactCount: 7,
|
||||
defenseScore: 84,
|
||||
matchScore: 78,
|
||||
bio: 'Five years on a warehouse robotics fleet. Built an anomaly-triage dashboard that cut false-positive escalations by 40%.',
|
||||
},
|
||||
{
|
||||
id: 'cand-007',
|
||||
name: 'Sofia Marchetti',
|
||||
avatar: 'https://i.pravatar.cc/150?img=7',
|
||||
headline: 'AI Governance Lead · NIST AI RMF, audit, model cards',
|
||||
competencyStackId: 'stack-safety',
|
||||
microcredentials: 11,
|
||||
artifactCount: 6,
|
||||
defenseScore: 89,
|
||||
matchScore: 85,
|
||||
bio: 'Stood up AI governance at a 5,000-person org. Authored 14 model cards and a risk register covering 30+ deployed systems.',
|
||||
},
|
||||
{
|
||||
id: 'cand-008',
|
||||
name: 'Liam Chen',
|
||||
avatar: 'https://i.pravatar.cc/150?img=8',
|
||||
headline: 'Agent Reliability Engineer · Observability, tracing, SRE',
|
||||
competencyStackId: 'stack-orchestration',
|
||||
microcredentials: 10,
|
||||
artifactCount: 9,
|
||||
defenseScore: 86,
|
||||
matchScore: 90,
|
||||
bio: 'Owns tracing for an agent platform serving 200+ internal teams. Built a token-cost alerting system that saved $1.2M/year.',
|
||||
},
|
||||
{
|
||||
id: 'cand-009',
|
||||
name: 'Amara Diallo',
|
||||
avatar: 'https://i.pravatar.cc/150?img=9',
|
||||
headline: 'Climate ML Scientist · Forecasting, data assimilation, PINNs',
|
||||
competencyStackId: 'stack-science',
|
||||
microcredentials: 12,
|
||||
artifactCount: 8,
|
||||
defenseScore: 90,
|
||||
matchScore: 84,
|
||||
bio: 'Downscaled GCM output for a regional energy grid operator. Physics-informed model improved 72-hour wind forecasts by 18%.',
|
||||
},
|
||||
{
|
||||
id: 'cand-010',
|
||||
name: 'Ethan Whitfield',
|
||||
avatar: 'https://i.pravatar.cc/150?img=10',
|
||||
headline: 'AI Product Manager · Roadmapping, AI UX, metrics',
|
||||
competencyStackId: 'stack-designer',
|
||||
microcredentials: 9,
|
||||
artifactCount: 5,
|
||||
defenseScore: 82,
|
||||
matchScore: 80,
|
||||
bio: 'Shipped an agentic coding assistant to 30K developers. Defined the success metrics and evaluation framework for the v1 launch.',
|
||||
},
|
||||
{
|
||||
id: 'cand-011',
|
||||
name: 'Yuki Tanaka',
|
||||
avatar: 'https://i.pravatar.cc/150?img=11',
|
||||
headline: 'Evaluation Engineer · LLM-as-judge, regression suites',
|
||||
competencyStackId: 'stack-orchestration',
|
||||
microcredentials: 10,
|
||||
artifactCount: 8,
|
||||
defenseScore: 85,
|
||||
matchScore: 86,
|
||||
bio: 'Built an eval platform that runs 50K+ judged samples per model release. Calibrated LLM-as-judge against human panels to 0.87 agreement.',
|
||||
},
|
||||
{
|
||||
id: 'cand-012',
|
||||
name: 'Olu Adeyemi',
|
||||
avatar: 'https://i.pravatar.cc/150?img=12',
|
||||
headline: 'Conversation Designer · Dialogue flows, persona systems',
|
||||
competencyStackId: 'stack-designer',
|
||||
microcredentials: 8,
|
||||
artifactCount: 7,
|
||||
defenseScore: 83,
|
||||
matchScore: 77,
|
||||
bio: 'Designed repair flows that reduced user frustration escalations by 35%. Authored a persona consistency framework now used company-wide.',
|
||||
},
|
||||
{
|
||||
id: 'cand-013',
|
||||
name: 'Nadia Petrova',
|
||||
avatar: 'https://i.pravatar.cc/150?img=13',
|
||||
headline: 'Materials ML Engineer · Property prediction, active learning',
|
||||
competencyStackId: 'stack-science',
|
||||
microcredentials: 11,
|
||||
artifactCount: 9,
|
||||
defenseScore: 88,
|
||||
matchScore: 82,
|
||||
bio: 'Active-learning loop identified three experimentally-validated novel alloys. Maintains an open-source DFT active-learning toolkit.',
|
||||
},
|
||||
{
|
||||
id: 'cand-014',
|
||||
name: 'Rafael Costa',
|
||||
avatar: 'https://i.pravatar.cc/150?img=14',
|
||||
headline: 'Edge AI Engineer · Quantization, TensorRT, field deployment',
|
||||
competencyStackId: 'stack-operator',
|
||||
microcredentials: 9,
|
||||
artifactCount: 8,
|
||||
defenseScore: 84,
|
||||
matchScore: 83,
|
||||
bio: 'Quantized a vision model from 240MB to 11MB with <1% accuracy loss. Deployed to 3,000+ edge devices with OTA model updates.',
|
||||
},
|
||||
{
|
||||
id: 'cand-015',
|
||||
name: 'Ingrid Solberg',
|
||||
avatar: 'https://i.pravatar.cc/150?img=15',
|
||||
headline: 'AI Red Team Lead · Adversarial testing, disclosure, policy',
|
||||
competencyStackId: 'stack-safety',
|
||||
microcredentials: 10,
|
||||
artifactCount: 7,
|
||||
defenseScore: 87,
|
||||
matchScore: 88,
|
||||
bio: 'Led red-teaming for two frontier model releases. Coordinated three coordinated disclosures with partner labs.',
|
||||
},
|
||||
];
|
||||
@@ -0,0 +1,167 @@
|
||||
import type { CompetencyStack, Competency } from '@nextcraft/types';
|
||||
|
||||
let idCounter = 0;
|
||||
const cid = (prefix: string) => `${prefix}-c${(++idCounter).toString().padStart(3, '0')}`;
|
||||
|
||||
function makeCompetency(
|
||||
stackId: string,
|
||||
name: string,
|
||||
description: string,
|
||||
status: Competency['status'],
|
||||
prerequisites: string[] = [],
|
||||
): Competency {
|
||||
return {
|
||||
id: cid(stackId),
|
||||
name,
|
||||
description,
|
||||
status,
|
||||
stackId,
|
||||
prerequisites,
|
||||
microcredentialId: status === 'mastered' ? `mc-${cid(stackId)}` : null,
|
||||
};
|
||||
}
|
||||
|
||||
// --- Stack 1: AI Orchestration Engineer (15 competencies) ---
|
||||
const orchestrationComps: Competency[] = [
|
||||
makeCompetency('stack-orchestration', 'Agent Architecture Patterns', 'ReAct, plan-and-execute, reflexion, and reflexion-based agent topologies.', 'mastered'),
|
||||
makeCompetency('stack-orchestration', 'Multi-Agent Communication', 'Message passing, shared memory blackboards, and inter-agent protocol design.', 'in_progress', ['stack-orchestration-c001']),
|
||||
makeCompetency('stack-orchestration', 'Tool Use & Function Calling', 'Defining tool schemas, binding tools to models, and handling structured outputs.', 'mastered'),
|
||||
makeCompetency('stack-orchestration', 'Prompt Engineering Fundamentals', 'Few-shot, chain-of-thought, and instruction tuning for reliable model behavior.', 'mastered'),
|
||||
makeCompetency('stack-orchestration', 'RAG Pipeline Design', 'Chunking strategies, hybrid retrieval, reranking, and context window management.', 'in_progress'),
|
||||
makeCompetency('stack-orchestration', 'Vector Databases & Embeddings', 'Embedding model selection, indexing (HNSW, IVF), and metadata filtering.', 'available', ['stack-orchestration-c005']),
|
||||
makeCompetency('stack-orchestration', 'LLM Evaluation & Metrics', 'LLM-as-judge, human eval panels, regression suites, and drift detection.', 'available'),
|
||||
makeCompetency('stack-orchestration', 'Guardrails & Output Validation', 'Schema validation, safety classifiers, and fallback response strategies.', 'available', ['stack-orchestration-c003']),
|
||||
makeCompetency('stack-orchestration', 'Agent Memory Systems', 'Short-term context, episodic memory, and long-term knowledge consolidation.', 'locked', ['stack-orchestration-c002', 'stack-orchestration-c006']),
|
||||
makeCompetency('stack-orchestration', 'Workflow Orchestration', 'DAG-based pipelines, conditional branching, and human-in-the-loop checkpoints.', 'locked', ['stack-orchestration-c001']),
|
||||
makeCompetency('stack-orchestration', 'Model Routing & Cascading', 'Cost-aware routing, small-to-large cascades, and fallback model strategies.', 'locked', ['stack-orchestration-c008']),
|
||||
makeCompetency('stack-orchestration', 'Streaming & Incremental Output', 'Token streaming, partial JSON parsing, and progressive UI rendering.', 'available'),
|
||||
makeCompetency('stack-orchestration', 'Observability for Agents', 'Tracing spans, token cost tracking, and latency profiling across agent calls.', 'available'),
|
||||
makeCompetency('stack-orchestration', 'Cost Optimization Strategies', 'Caching, prompt compression, and batch inference for production cost control.', 'locked', ['stack-orchestration-c011']),
|
||||
makeCompetency('stack-orchestration', 'Production Deployment Patterns', 'Blue-green deploys, shadow traffic, and rollback for agent workloads.', 'locked', ['stack-orchestration-c010']),
|
||||
];
|
||||
|
||||
// --- Stack 2: AI Safety & Governance Lead (14 competencies) ---
|
||||
const safetyComps: Competency[] = [
|
||||
makeCompetency('stack-safety', 'Alignment Fundamentals', 'RLHF, DPO, and constitutional AI approaches to value alignment.', 'in_progress'),
|
||||
makeCompetency('stack-safety', 'Red Teaming Methodologies', 'Adversarial prompting, automated red-team suites, and vulnerability disclosure.', 'available'),
|
||||
makeCompetency('stack-safety', 'Model Card Authoring', 'Documenting capabilities, limitations, intended use, and known failure modes.', 'mastered'),
|
||||
makeCompetency('stack-safety', 'Bias Auditing', 'Disparate impact testing across demographics and protected attributes.', 'in_progress', ['stack-safety-c003']),
|
||||
makeCompetency('stack-safety', 'AI Policy Frameworks', 'NIST AI RMF, EU AI Act, and ISO/IEC 42001 compliance mapping.', 'available'),
|
||||
makeCompetency('stack-safety', 'Risk Taxonomy & Classification', 'Harm severity scales, likelihood scoring, and risk register maintenance.', 'available', ['stack-safety-c005']),
|
||||
makeCompetency('stack-safety', 'Interpretability Techniques', 'Attention probing, activation patching, and circuit analysis.', 'locked', ['stack-safety-c001']),
|
||||
makeCompetency('stack-safety', 'Incident Response for AI', 'Detection, containment, root-cause analysis, and postmortem for AI failures.', 'locked', ['stack-safety-c006']),
|
||||
makeCompetency('stack-safety', 'Data Provenance & Lineage', 'Training data tracking, consent management, and deletion workflows.', 'available'),
|
||||
makeCompetency('stack-safety', 'Jailbreak & Prompt Injection Defense', 'Input sanitization, instruction hierarchy, and indirect injection mitigation.', 'available', ['stack-safety-c002']),
|
||||
makeCompetency('stack-safety', 'Model Monitoring in Production', 'Drift detection, output distribution tracking, and alerting thresholds.', 'locked', ['stack-safety-c008']),
|
||||
makeCompetency('stack-safety', 'Privacy-Preserving ML', 'Differential privacy, federated learning, and synthetic data generation.', 'locked', ['stack-safety-c009']),
|
||||
makeCompetency('stack-safety', 'Governance Documentation', 'Audit trails, decision logs, and accountability matrices for AI systems.', 'available'),
|
||||
makeCompetency('stack-safety', 'Stakeholder Communication', 'Translating technical risk findings for executives, regulators, and users.', 'available', ['stack-safety-c013']),
|
||||
];
|
||||
|
||||
// --- Stack 3: Human-AI Product Designer (13 competencies) ---
|
||||
const designerComps: Competency[] = [
|
||||
makeCompetency('stack-designer', 'Agentic Interaction Patterns', 'Designing for delegating, interrupting, and reviewing autonomous agents.', 'in_progress'),
|
||||
makeCompetency('stack-designer', 'Conversational UX', 'Multi-turn dialogue design, intent modeling, and repair flows.', 'mastered'),
|
||||
makeCompetency('stack-designer', 'AI Transparency Patterns', 'Confidence indicators, source attribution, and model limitation disclosure.', 'in_progress', ['stack-designer-c002']),
|
||||
makeCompetency('stack-designer', 'Human-in-the-Loop Design', 'Approval gates, escalation paths, and override affordances.', 'available', ['stack-designer-c001']),
|
||||
makeCompetency('stack-designer', 'Prompt UX', 'Designing prompt composition surfaces, suggestions, and templates.', 'available'),
|
||||
makeCompetency('stack-designer', 'Failure & Fallback Design', 'Graceful degradation, error states, and recovery flows for AI features.', 'available', ['stack-designer-c003']),
|
||||
makeCompetency('stack-designer', 'Multimodal Interface Design', 'Voice + touch + visual coordination across modalities.', 'locked', ['stack-designer-c002']),
|
||||
makeCompetency('stack-designer', 'Trust & Calibration', 'User mental model alignment, expectation setting, and over-trust mitigation.', 'available', ['stack-designer-c003']),
|
||||
makeCompetency('stack-designer', 'Accessibility for AI Interfaces', 'Screen-reader-friendly AI output, cognitive load, and reading-level tuning.', 'available'),
|
||||
makeCompetency('stack-designer', 'Persona & Tone Systems', 'Character design for AI assistants, consistency, and contextual adaptation.', 'available', ['stack-designer-c005']),
|
||||
makeCompetency('stack-designer', 'Evaluation of AI UX', 'Task success, satisfaction, and reliance metrics for AI-assisted workflows.', 'locked', ['stack-designer-c008']),
|
||||
makeCompetency('stack-designer', 'Onboarding to Agentic Systems', 'Progressive disclosure, first-run experience, and capability scaffolding.', 'available', ['stack-designer-c004']),
|
||||
makeCompetency('stack-designer', 'AI Ethics in Product Design', 'Consent, dark-pattern avoidance, and dignity-preserving automation.', 'available', ['stack-designer-c009']),
|
||||
];
|
||||
|
||||
// --- Stack 4: AI-Augmented Field Operator (12 competencies) ---
|
||||
const operatorComps: Competency[] = [
|
||||
makeCompetency('stack-operator', 'AI Co-Pilot Operation', 'Interacting with voice and tablet-based AI assistants in field conditions.', 'in_progress'),
|
||||
makeCompetency('stack-operator', 'Robotics Safety Protocols', 'Lockout/tagout, collision avoidance, and emergency stop procedures.', 'mastered'),
|
||||
makeCompetency('stack-operator', 'Predictive Maintenance Alerts', 'Interpreting ML-based anomaly scores and scheduling interventions.', 'available', ['stack-operator-c002']),
|
||||
makeCompetency('stack-operator', 'Computer Vision Inspection', 'Operating vision-based quality control stations and tuning thresholds.', 'available'),
|
||||
makeCompetency('stack-operator', 'Sensor Data Interpretation', 'Reading IoT telemetry dashboards and recognizing fault signatures.', 'in_progress', ['stack-operator-c003']),
|
||||
makeCompetency('stack-operator', 'Digital Twin Fundamentals', 'Navigating virtual replicas of physical assets for simulation and planning.', 'locked', ['stack-operator-c005']),
|
||||
makeCompetency('stack-operator', 'Augmented Reality Overlays', 'Using AR headsets for guided assembly, annotation, and remote assistance.', 'available'),
|
||||
makeCompetency('stack-operator', 'Edge Model Deployment', 'Pushing model updates to on-device inference hardware in the field.', 'locked', ['stack-operator-c006']),
|
||||
makeCompetency('stack-operator', 'Calibration & Drift Correction', 'Maintaining sensor accuracy and recognizing model drift in production.', 'available', ['stack-operator-c004']),
|
||||
makeCompetency('stack-operator', 'Field Data Collection', 'Structured annotation, labeling workflows, and high-quality dataset capture.', 'available'),
|
||||
makeCompetency('stack-operator', 'Autonomous System Supervision', 'Monitoring fleets of semi-autonomous units and intervening on exceptions.', 'locked', ['stack-operator-c001']),
|
||||
makeCompetency('stack-operator', 'Safety-Critical Decision Making', 'Knowing when to override AI recommendations and escalate to humans.', 'available', ['stack-operator-c002']),
|
||||
];
|
||||
|
||||
// --- Stack 5: Computational Sciences Practitioner (16 competencies) ---
|
||||
const scienceComps: Competency[] = [
|
||||
makeCompetency('stack-science', 'Scientific Computing with Python', 'NumPy, SciPy, pandas, and Jupyter workflows for research-grade analysis.', 'mastered'),
|
||||
makeCompetency('stack-science', 'ML for Scientific Discovery', 'Surrogate models, property prediction, and active learning loops.', 'in_progress', ['stack-science-c001']),
|
||||
makeCompetency('stack-science', 'Molecular & Materials Simulation', 'DFT, molecular dynamics, and ML potentials for materials screening.', 'available'),
|
||||
makeCompetency('stack-science', 'Climate Modeling Fundamentals', 'GCM structure, downscaling, and emissions scenario interpretation.', 'available'),
|
||||
makeCompetency('stack-science', 'Bioinformatics Pipelines', 'Sequence alignment, variant calling, and differential expression analysis.', 'in_progress'),
|
||||
makeCompetency('stack-science', 'High-Performance Computing', 'MPI, OpenMP, GPU offloading, and job scheduling on HPC clusters.', 'available', ['stack-science-c001']),
|
||||
makeCompetency('stack-science', 'Scientific Data Visualization', 'Matplotlib, Plotly, ParaView, and domain-specific plotting conventions.', 'mastered'),
|
||||
makeCompetency('stack-science', 'Reproducible Research Practices', 'Containerization, workflow managers (Snakemake, Nextflow), and DOIs.', 'available', ['stack-science-c006']),
|
||||
makeCompetency('stack-science', 'Statistical Inference', 'Bayesian methods, hypothesis testing, and uncertainty quantification.', 'available'),
|
||||
makeCompetency('stack-science', 'Physics-Informed Neural Networks', 'Embedding governing equations as constraints in ML models.', 'locked', ['stack-science-c002']),
|
||||
makeCompetency('stack-science', 'Generative Models for Science', 'Diffusion models for molecule generation and protein structure sampling.', 'locked', ['stack-science-c010']),
|
||||
makeCompetency('stack-science', 'Causal Inference Methods', 'Do-calculus, instrumental variables, and counterfactual reasoning.', 'available', ['stack-science-c009']),
|
||||
makeCompetency('stack-science', 'Experiment Design', 'DOE, factorial designs, and sample-size planning for costly experiments.', 'available'),
|
||||
makeCompetency('stack-science', 'Data Assimilation', 'EnKF, 4D-Var, and real-time integration of observations into models.', 'locked', ['stack-science-c004']),
|
||||
makeCompetency('stack-science', 'Scientific Writing with AI', 'Literature review automation, manuscript drafting assistance, and citation tools.', 'available'),
|
||||
makeCompetency('stack-science', 'Open Science & FAIR Data', 'Findable, accessible, interoperable, reusable data stewardship.', 'available', ['stack-science-c008']),
|
||||
];
|
||||
|
||||
export const competencyStacks: CompetencyStack[] = [
|
||||
{
|
||||
id: 'stack-orchestration',
|
||||
name: 'AI Orchestration Engineer',
|
||||
targetRoles: 'Agent design, multi-agent systems, AI workflow automation',
|
||||
description:
|
||||
'Design and operate systems of cooperating AI agents. Master tool use, retrieval, memory, evaluation, and production deployment of agentic workflows.',
|
||||
competencies: orchestrationComps,
|
||||
color: 'indigo',
|
||||
icon: 'Workflow',
|
||||
},
|
||||
{
|
||||
id: 'stack-safety',
|
||||
name: 'AI Safety & Governance Lead',
|
||||
targetRoles: 'Alignment, audit, policy, risk',
|
||||
description:
|
||||
'Ensure AI systems are aligned, auditable, and compliant. Lead red-teaming, bias audits, incident response, and governance documentation.',
|
||||
competencies: safetyComps,
|
||||
color: 'rose',
|
||||
icon: 'ShieldCheck',
|
||||
},
|
||||
{
|
||||
id: 'stack-designer',
|
||||
name: 'Human-AI Product Designer',
|
||||
targetRoles: 'UX for agentic systems, AI interaction design',
|
||||
description:
|
||||
'Design interfaces where humans and AI agents collaborate. Master transparency, trust calibration, failure design, and agentic interaction patterns.',
|
||||
competencies: designerComps,
|
||||
color: 'violet',
|
||||
icon: 'Sparkles',
|
||||
},
|
||||
{
|
||||
id: 'stack-operator',
|
||||
name: 'AI-Augmented Field Operator',
|
||||
targetRoles: 'Skilled trades + AI co-pilots, robotics operations',
|
||||
description:
|
||||
'Operate AI-augmented equipment in the field. Pair skilled trades with AI co-pilots, robotics supervision, predictive maintenance, and AR-guided workflows.',
|
||||
competencies: operatorComps,
|
||||
color: 'emerald',
|
||||
icon: 'Wrench',
|
||||
},
|
||||
{
|
||||
id: 'stack-science',
|
||||
name: 'Computational Sciences Practitioner',
|
||||
targetRoles: 'Bio, materials, climate + AI',
|
||||
description:
|
||||
'Apply ML to scientific discovery in biology, materials, and climate. Master scientific computing, simulation, PINNs, and reproducible research.',
|
||||
competencies: scienceComps,
|
||||
color: 'cyan',
|
||||
icon: 'Atom',
|
||||
},
|
||||
];
|
||||
|
||||
export const allCompetencies: Competency[] = competencyStacks.flatMap((s) => s.competencies);
|
||||
@@ -0,0 +1,134 @@
|
||||
import type { Employer } from '@nextcraft/types';
|
||||
|
||||
export const employers: Employer[] = [
|
||||
{
|
||||
id: 'emp-openai',
|
||||
name: 'OpenAI Labs',
|
||||
logo: 'https://placehold.co/80x80/indigo/white?text=OA',
|
||||
description:
|
||||
'Mock employer building frontier AI systems. We build and deploy large language models and agentic tools used by millions of developers and consumers.',
|
||||
industry: 'Artificial Intelligence',
|
||||
size: '2,000+',
|
||||
location: 'San Francisco, CA',
|
||||
website: 'https://example.com/openai',
|
||||
socialLinks: { twitter: 'https://example.com/openai/x', linkedin: 'https://example.com/openai/li' },
|
||||
culture: 'Research-driven, shipping-paced, safety-conscious. We pair frontier research with product rigor.',
|
||||
},
|
||||
{
|
||||
id: 'emp-anthropic',
|
||||
name: 'Anthropic Research',
|
||||
logo: 'https://placehold.co/80x80/amber/white?text=AN',
|
||||
description:
|
||||
'Mock employer focused on AI safety and alignment. We build reliable, interpretable, and steerable AI systems.',
|
||||
industry: 'AI Safety',
|
||||
size: '1,000+',
|
||||
location: 'San Francisco, CA',
|
||||
website: 'https://example.com/anthropic',
|
||||
socialLinks: { twitter: 'https://example.com/anthropic/x', linkedin: 'https://example.com/anthropic/li' },
|
||||
culture: 'Safety-first, evidence-based, calm-paced. We value thoroughness over speed when stakes are high.',
|
||||
},
|
||||
{
|
||||
id: 'emp-huggingface',
|
||||
name: 'Hugging Face',
|
||||
logo: 'https://placehold.co/80x80/yellow/black?text=HF',
|
||||
description:
|
||||
'Mock employer building the open-source AI community. We host models, datasets, and demos for the global ML community.',
|
||||
industry: 'Open Source AI',
|
||||
size: '500+',
|
||||
location: 'New York, NY',
|
||||
website: 'https://example.com/hf',
|
||||
socialLinks: { twitter: 'https://example.com/hf/x', linkedin: 'https://example.com/hf/li' },
|
||||
culture: 'Community-first, open-by-default, remote-friendly. We ship in the open with thousands of contributors.',
|
||||
},
|
||||
{
|
||||
id: 'emp-scaleai',
|
||||
name: 'Scale AI',
|
||||
logo: 'https://placehold.co/80x80/violet/white?text=SC',
|
||||
description:
|
||||
'Mock employer providing data and evaluation infrastructure for frontier AI. We power the RLHF and eval pipelines behind many model releases.',
|
||||
industry: 'AI Infrastructure',
|
||||
size: '1,500+',
|
||||
location: 'San Francisco, CA',
|
||||
website: 'https://example.com/scale',
|
||||
socialLinks: { twitter: 'https://example.com/scale/x', linkedin: 'https://example.com/scale/li' },
|
||||
culture: 'Infrastructure-minded, quality-obsessed, enterprise-aware. We bridge research and production data.',
|
||||
},
|
||||
{
|
||||
id: 'emp-perplexity',
|
||||
name: 'Perplexity',
|
||||
logo: 'https://placehold.co/80x80/teal/white?text=PX',
|
||||
description:
|
||||
'Mock employer building an AI-powered answer engine. We combine retrieval, generation, and citations for trustworthy answers.',
|
||||
industry: 'AI Search',
|
||||
size: '300+',
|
||||
location: 'San Francisco, CA',
|
||||
website: 'https://example.com/perplexity',
|
||||
socialLinks: { twitter: 'https://example.com/perplexity/x', linkedin: 'https://example.com/perplexity/li' },
|
||||
culture: 'Answer-focused, fast-iterating, citation-proud. We treat groundedness as a product feature.',
|
||||
},
|
||||
{
|
||||
id: 'emp-cohere',
|
||||
name: 'Cohere',
|
||||
logo: 'https://placehold.co/80x80/pink/white?text=CO',
|
||||
description:
|
||||
'Mock employer building enterprise-grade language models. We specialize in retrieval, multilinguality, and data privacy for regulated industries.',
|
||||
industry: 'Enterprise LLMs',
|
||||
size: '400+',
|
||||
location: 'Toronto, Canada',
|
||||
website: 'https://example.com/cohere',
|
||||
socialLinks: { twitter: 'https://example.com/cohere/x', linkedin: 'https://example.com/cohere/li' },
|
||||
culture: 'Enterprise-aware, research-active, multilingual. We ship models that work in 100+ languages.',
|
||||
},
|
||||
{
|
||||
id: 'emp-mistral',
|
||||
name: 'Mistral AI',
|
||||
logo: 'https://placehold.co/80x80/red/white?text=MI',
|
||||
description:
|
||||
'Mock employer building open-weight frontier models in Europe. We push efficiency and openness in large language models.',
|
||||
industry: 'Open-Weight LLMs',
|
||||
size: '200+',
|
||||
location: 'Paris, France',
|
||||
website: 'https://example.com/mistral',
|
||||
socialLinks: { twitter: 'https://example.com/mistral/x', linkedin: 'https://example.com/mistral/li' },
|
||||
culture: 'European-rooted, efficiency-driven, open-weight-proud. We ship small models that punch above their size.',
|
||||
},
|
||||
{
|
||||
id: 'emp-replicate',
|
||||
name: 'Replicate',
|
||||
logo: 'https://placehold.co/80x80/orange/white?text=RE',
|
||||
description:
|
||||
'Mock employer making ML deployment delightful. We host, serve, and scale models with a few lines of code.',
|
||||
industry: 'ML Deployment',
|
||||
size: '150+',
|
||||
location: 'San Francisco, CA',
|
||||
website: 'https://example.com/replicate',
|
||||
socialLinks: { twitter: 'https://example.com/replicate/x', linkedin: 'https://example.com/replicate/li' },
|
||||
culture: 'Developer-experience-obsessed, pragmatic, remote-friendly. We make shipping models feel like shipping software.',
|
||||
},
|
||||
{
|
||||
id: 'emp-pinecone',
|
||||
name: 'Pinecone',
|
||||
logo: 'https://placehold.co/80x80/green/white?text=PC',
|
||||
description:
|
||||
'Mock employer building the vector database for AI applications. We power retrieval for thousands of production RAG systems.',
|
||||
industry: 'Vector Databases',
|
||||
size: '300+',
|
||||
location: 'New York, NY',
|
||||
website: 'https://example.com/pinecone',
|
||||
socialLinks: { twitter: 'https://example.com/pinecone/x', linkedin: 'https://example.com/pinecone/li' },
|
||||
culture: 'Infra-focused, latency-obsessed, distributed-first. We treat retrieval as the heart of grounded AI.',
|
||||
},
|
||||
{
|
||||
id: 'emp-langchain',
|
||||
name: 'LangChain',
|
||||
logo: 'https://placehold.co/80x80/blue/white?text=LC',
|
||||
description:
|
||||
'Mock employer building the orchestration layer for LLM applications. We provide frameworks for agents, retrieval, and evaluation.',
|
||||
industry: 'AI Orchestration',
|
||||
size: '200+',
|
||||
location: 'San Francisco, CA',
|
||||
website: 'https://example.com/langchain',
|
||||
socialLinks: { twitter: 'https://example.com/langchain/x', linkedin: 'https://example.com/langchain/li' },
|
||||
culture: 'Framework-minded, community-driven, abstractions-first. We build primitives others compose into products.',
|
||||
},
|
||||
];
|
||||
@@ -0,0 +1,38 @@
|
||||
export { competencyStacks, allCompetencies } from './competency-stacks';
|
||||
export { jobs } from './jobs';
|
||||
export { candidates } from './candidates';
|
||||
export { employers } from './employers';
|
||||
export {
|
||||
primaryLearner,
|
||||
learnerMicrocredentials,
|
||||
learnerArtifacts,
|
||||
upcomingDefenses,
|
||||
learnerSummary,
|
||||
} from './learner-progress';
|
||||
export { aiTutorResponses } from './ai-tutor-responses';
|
||||
export type { TutorResponse } from './ai-tutor-responses';
|
||||
export {
|
||||
platformMetrics,
|
||||
activityFeed,
|
||||
serviceHealth,
|
||||
uptimeBars,
|
||||
systemStats,
|
||||
adminLearners,
|
||||
jobReviewQueue,
|
||||
employerVerificationQueue,
|
||||
flaggedContentQueue,
|
||||
} from './admin';
|
||||
export type {
|
||||
PlatformMetric,
|
||||
ActivityEvent,
|
||||
ServiceStatus,
|
||||
ServiceHealth,
|
||||
AdminLearner,
|
||||
AdminLearnerCompetency,
|
||||
AdminLearnerCredential,
|
||||
LearnerStatus,
|
||||
JobReviewItem,
|
||||
EmployerVerificationItem,
|
||||
FlaggedContentItem,
|
||||
FlaggedContentType,
|
||||
} from './admin';
|
||||
@@ -0,0 +1,324 @@
|
||||
import type { Job } from '@nextcraft/types';
|
||||
|
||||
export const jobs: Job[] = [
|
||||
{
|
||||
id: 'job-001',
|
||||
title: 'AI Orchestration Engineer',
|
||||
employerId: 'emp-langchain',
|
||||
description:
|
||||
'Design and operate multi-agent systems that automate complex knowledge workflows. You will own agent topology, tool integration, and evaluation harnesses for production deployments serving millions of queries.',
|
||||
requiredCompetencies: ['stack-orchestration-c001', 'stack-orchestration-c002', 'stack-orchestration-c005'],
|
||||
skills: ['LangGraph', 'Multi-agent systems', 'RAG', 'Python', 'Evaluation'],
|
||||
seniority: 'senior',
|
||||
location: 'San Francisco, CA',
|
||||
remote: true,
|
||||
salaryMin: 160000,
|
||||
salaryMax: 240000,
|
||||
matchScore: 96,
|
||||
postedAt: '2026-08-21T10:00:00Z',
|
||||
},
|
||||
{
|
||||
id: 'job-002',
|
||||
title: 'LLM Application Developer',
|
||||
employerId: 'emp-openai',
|
||||
description:
|
||||
'Build delightful LLM-powered features end-to-end. You will work on retrieval, function calling, streaming UX, and robust output validation for consumer-facing products.',
|
||||
requiredCompetencies: ['stack-orchestration-c003', 'stack-orchestration-c004', 'stack-orchestration-c005'],
|
||||
skills: ['Python', 'TypeScript', 'RAG', 'Function calling', 'Streaming'],
|
||||
seniority: 'mid',
|
||||
location: 'San Francisco, CA',
|
||||
remote: true,
|
||||
salaryMin: 140000,
|
||||
salaryMax: 210000,
|
||||
matchScore: 92,
|
||||
postedAt: '2026-08-28T09:30:00Z',
|
||||
},
|
||||
{
|
||||
id: 'job-003',
|
||||
title: 'AI Safety Researcher',
|
||||
employerId: 'emp-anthropic',
|
||||
description:
|
||||
'Research alignment, interpretability, and robustness of frontier models. Design experiments, run evaluations, and publish findings that improve the safety of deployed AI systems.',
|
||||
requiredCompetencies: ['stack-safety-c001', 'stack-safety-c007', 'stack-safety-c002'],
|
||||
skills: ['Alignment', 'Interpretability', 'Red teaming', 'Python', 'Research'],
|
||||
seniority: 'senior',
|
||||
location: 'San Francisco, CA',
|
||||
remote: false,
|
||||
salaryMin: 180000,
|
||||
salaryMax: 280000,
|
||||
matchScore: 88,
|
||||
postedAt: '2026-08-15T12:00:00Z',
|
||||
},
|
||||
{
|
||||
id: 'job-004',
|
||||
title: 'Prompt Engineer',
|
||||
employerId: 'emp-perplexity',
|
||||
description:
|
||||
'Craft, test, and ship prompt strategies that power answer-engine features. Own prompt libraries, regression suites, and A/B experiments across product surfaces.',
|
||||
requiredCompetencies: ['stack-orchestration-c004', 'stack-orchestration-c001'],
|
||||
skills: ['Prompt engineering', 'Evaluation', 'A/B testing', 'Python'],
|
||||
seniority: 'mid',
|
||||
location: 'Remote',
|
||||
remote: true,
|
||||
salaryMin: 110000,
|
||||
salaryMax: 175000,
|
||||
matchScore: 84,
|
||||
postedAt: '2026-09-02T14:15:00Z',
|
||||
},
|
||||
{
|
||||
id: 'job-005',
|
||||
title: 'AI Product Manager',
|
||||
employerId: 'emp-huggingface',
|
||||
description:
|
||||
'Own the roadmap for AI-powered developer tools. Translate model capabilities into customer value, define success metrics, and ship agentic features with engineering.',
|
||||
requiredCompetencies: ['stack-designer-c001', 'stack-orchestration-c001'],
|
||||
skills: ['Product strategy', 'AI UX', 'Roadmapping', 'Stakeholder mgmt'],
|
||||
seniority: 'senior',
|
||||
location: 'New York, NY',
|
||||
remote: true,
|
||||
salaryMin: 150000,
|
||||
salaryMax: 220000,
|
||||
matchScore: 78,
|
||||
postedAt: '2026-08-30T08:00:00Z',
|
||||
},
|
||||
{
|
||||
id: 'job-006',
|
||||
title: 'RAG Infrastructure Engineer',
|
||||
employerId: 'emp-pinecone',
|
||||
description:
|
||||
'Build the retrieval substrate behind knowledge-grounded AI. Optimize indexing, query latency, and hybrid retrieval across billion-vector workloads.',
|
||||
requiredCompetencies: ['stack-orchestration-c005', 'stack-orchestration-c006'],
|
||||
skills: ['Vector databases', 'Embeddings', 'Go', 'Distributed systems'],
|
||||
seniority: 'mid',
|
||||
location: 'Remote',
|
||||
remote: true,
|
||||
salaryMin: 130000,
|
||||
salaryMax: 200000,
|
||||
matchScore: 81,
|
||||
postedAt: '2026-09-05T11:00:00Z',
|
||||
},
|
||||
{
|
||||
id: 'job-007',
|
||||
title: 'AI Governance Lead',
|
||||
employerId: 'emp-scaleai',
|
||||
description:
|
||||
'Stand up the AI governance program for enterprise customers. Map controls to NIST AI RMF and EU AI Act, run audits, and author model cards at scale.',
|
||||
requiredCompetencies: ['stack-safety-c005', 'stack-safety-c003', 'stack-safety-c013'],
|
||||
skills: ['AI policy', 'NIST AI RMF', 'Audit', 'Documentation'],
|
||||
seniority: 'staff',
|
||||
location: 'San Francisco, CA',
|
||||
remote: true,
|
||||
salaryMin: 170000,
|
||||
salaryMax: 230000,
|
||||
matchScore: 74,
|
||||
postedAt: '2026-08-18T16:45:00Z',
|
||||
},
|
||||
{
|
||||
id: 'job-008',
|
||||
title: 'Human-AI Interaction Designer',
|
||||
employerId: 'emp-anthropic',
|
||||
description:
|
||||
'Design how users collaborate with Claude across products. Own transparency patterns, trust calibration, and agentic interaction for assistant surfaces.',
|
||||
requiredCompetencies: ['stack-designer-c001', 'stack-designer-c003', 'stack-designer-c008'],
|
||||
skills: ['Figma', 'AI UX', 'Prototyping', 'User research'],
|
||||
seniority: 'mid',
|
||||
location: 'San Francisco, CA',
|
||||
remote: true,
|
||||
salaryMin: 125000,
|
||||
salaryMax: 190000,
|
||||
matchScore: 86,
|
||||
postedAt: '2026-08-25T10:30:00Z',
|
||||
},
|
||||
{
|
||||
id: 'job-009',
|
||||
title: 'Evaluation Engineer',
|
||||
employerId: 'emp-cohere',
|
||||
description:
|
||||
'Build and operate the eval platform for LLM-powered products. Design LLM-as-judge pipelines, regression suites, and human-eval panels for production models.',
|
||||
requiredCompetencies: ['stack-orchestration-c007', 'stack-safety-c002'],
|
||||
skills: ['LLM evaluation', 'Python', 'Statistics', 'Data labeling'],
|
||||
seniority: 'mid',
|
||||
location: 'Toronto, Canada',
|
||||
remote: true,
|
||||
salaryMin: 120000,
|
||||
salaryMax: 180000,
|
||||
matchScore: 79,
|
||||
postedAt: '2026-09-01T13:20:00Z',
|
||||
},
|
||||
{
|
||||
id: 'job-010',
|
||||
title: 'Robotics Operations Specialist',
|
||||
employerId: 'emp-replicate',
|
||||
description:
|
||||
'Supervise a fleet of AI-augmented robotic units in a warehouse environment. Interpret anomaly alerts, perform calibrations, and intervene on exceptions.',
|
||||
requiredCompetencies: ['stack-operator-c002', 'stack-operator-c011', 'stack-operator-c003'],
|
||||
skills: ['Robotics', 'Safety protocols', 'IoT', 'Predictive maintenance'],
|
||||
seniority: 'entry',
|
||||
location: 'Austin, TX',
|
||||
remote: false,
|
||||
salaryMin: 80000,
|
||||
salaryMax: 115000,
|
||||
matchScore: 71,
|
||||
postedAt: '2026-08-22T09:00:00Z',
|
||||
},
|
||||
{
|
||||
id: 'job-011',
|
||||
title: 'Computational Biologist',
|
||||
employerId: 'emp-recursion',
|
||||
description:
|
||||
'Apply ML to drug discovery. Build pipelines for phenotype prediction, active learning on assay data, and molecular generation for novel targets.',
|
||||
requiredCompetencies: ['stack-science-c005', 'stack-science-c002', 'stack-science-c011'],
|
||||
skills: ['Bioinformatics', 'Python', 'PyTorch', 'Drug discovery'],
|
||||
seniority: 'senior',
|
||||
location: 'Boston, MA',
|
||||
remote: true,
|
||||
salaryMin: 145000,
|
||||
salaryMax: 215000,
|
||||
matchScore: 83,
|
||||
postedAt: '2026-08-12T15:00:00Z',
|
||||
},
|
||||
{
|
||||
id: 'job-012',
|
||||
title: 'Climate ML Scientist',
|
||||
employerId: 'emp-deepmind',
|
||||
description:
|
||||
'Develop ML models for climate forecasting and energy grid optimization. Work with earth system scientists to downscale GCM output and quantify uncertainty.',
|
||||
requiredCompetencies: ['stack-science-c004', 'stack-science-c014', 'stack-science-c010'],
|
||||
skills: ['Climate modeling', 'PyTorch', 'Data assimilation', 'PINNs'],
|
||||
seniority: 'senior',
|
||||
location: 'London, UK',
|
||||
remote: true,
|
||||
salaryMin: 135000,
|
||||
salaryMax: 200000,
|
||||
matchScore: 77,
|
||||
postedAt: '2026-08-27T11:45:00Z',
|
||||
},
|
||||
{
|
||||
id: 'job-013',
|
||||
title: 'Agent Reliability Engineer',
|
||||
employerId: 'emp-langchain',
|
||||
description:
|
||||
'Own observability and reliability for production agent workloads. Build tracing, alerting, and rollback systems for multi-step agent pipelines.',
|
||||
requiredCompetencies: ['stack-orchestration-c013', 'stack-orchestration-c015', 'stack-orchestration-c008'],
|
||||
skills: ['Observability', 'Python', 'SRE', 'Distributed tracing'],
|
||||
seniority: 'mid',
|
||||
location: 'Remote',
|
||||
remote: true,
|
||||
salaryMin: 140000,
|
||||
salaryMax: 205000,
|
||||
matchScore: 90,
|
||||
postedAt: '2026-09-04T09:00:00Z',
|
||||
},
|
||||
{
|
||||
id: 'job-014',
|
||||
title: 'AI Red Team Lead',
|
||||
employerId: 'emp-mistral',
|
||||
description:
|
||||
'Lead adversarial testing of frontier and open-weight models. Build automated red-team suites, track vulnerabilities, and coordinate disclosure.',
|
||||
requiredCompetencies: ['stack-safety-c002', 'stack-safety-c010', 'stack-safety-c001'],
|
||||
skills: ['Red teaming', 'Prompt injection', 'Python', 'Leadership'],
|
||||
seniority: 'staff',
|
||||
location: 'Paris, France',
|
||||
remote: true,
|
||||
salaryMin: 160000,
|
||||
salaryMax: 230000,
|
||||
matchScore: 85,
|
||||
postedAt: '2026-08-19T10:30:00Z',
|
||||
},
|
||||
{
|
||||
id: 'job-015',
|
||||
title: 'Conversation Designer',
|
||||
employerId: 'emp-huggingface',
|
||||
description:
|
||||
'Design dialogue flows, personas, and repair strategies for AI assistants across open-source products. Partner with ML engineers to align tone with model behavior.',
|
||||
requiredCompetencies: ['stack-designer-c002', 'stack-designer-c010', 'stack-designer-c011'],
|
||||
skills: ['Conversation design', 'Figma', 'Voice UX', 'Prototyping'],
|
||||
seniority: 'mid',
|
||||
location: 'Remote',
|
||||
remote: true,
|
||||
salaryMin: 105000,
|
||||
salaryMax: 160000,
|
||||
matchScore: 73,
|
||||
postedAt: '2026-08-29T14:00:00Z',
|
||||
},
|
||||
{
|
||||
id: 'job-016',
|
||||
title: 'Field AI Technician',
|
||||
employerId: 'emp-anduril',
|
||||
description:
|
||||
'Deploy and maintain AI vision systems on defense hardware in the field. Calibrate sensors, interpret model alerts, and escalate edge cases to engineering.',
|
||||
requiredCompetencies: ['stack-operator-c004', 'stack-operator-c009', 'stack-operator-c001'],
|
||||
skills: ['Computer vision', 'Sensor calibration', 'Field ops', 'Python'],
|
||||
seniority: 'entry',
|
||||
location: 'Costa Mesa, CA',
|
||||
remote: false,
|
||||
salaryMin: 90000,
|
||||
salaryMax: 130000,
|
||||
matchScore: 68,
|
||||
postedAt: '2026-08-14T08:30:00Z',
|
||||
},
|
||||
{
|
||||
id: 'job-017',
|
||||
title: 'Materials ML Engineer',
|
||||
employerId: 'emp-deepmind',
|
||||
description:
|
||||
'Discover novel materials with ML. Train property-prediction models, run active-learning loops over DFT calculations, and validate candidates experimentally.',
|
||||
requiredCompetencies: ['stack-science-c003', 'stack-science-c002', 'stack-science-c006'],
|
||||
skills: ['Materials science', 'PyTorch', 'DFT', 'Active learning'],
|
||||
seniority: 'senior',
|
||||
location: 'London, UK',
|
||||
remote: true,
|
||||
salaryMin: 140000,
|
||||
salaryMax: 210000,
|
||||
matchScore: 80,
|
||||
postedAt: '2026-08-26T12:15:00Z',
|
||||
},
|
||||
{
|
||||
id: 'job-018',
|
||||
title: 'AI Trust & Safety Analyst',
|
||||
employerId: 'emp-openai',
|
||||
description:
|
||||
'Investigate misuse patterns, triage safety incidents, and improve policy enforcement for consumer AI products. Author postmortems and recommend mitigations.',
|
||||
requiredCompetencies: ['stack-safety-c008', 'stack-safety-c006', 'stack-safety-c002'],
|
||||
skills: ['Trust & safety', 'Incident response', 'Policy', 'Investigation'],
|
||||
seniority: 'mid',
|
||||
location: 'San Francisco, CA',
|
||||
remote: true,
|
||||
salaryMin: 115000,
|
||||
salaryMax: 170000,
|
||||
matchScore: 76,
|
||||
postedAt: '2026-09-03T10:45:00Z',
|
||||
},
|
||||
{
|
||||
id: 'job-019',
|
||||
title: 'Edge AI Engineer',
|
||||
employerId: 'emp-replicate',
|
||||
description:
|
||||
'Optimize and deploy models to edge hardware. Quantize, distill, and compile models for low-latency inference on field devices with constrained budgets.',
|
||||
requiredCompetencies: ['stack-operator-c008', 'stack-orchestration-c012', 'stack-orchestration-c014'],
|
||||
skills: ['Edge ML', 'TensorRT', 'C++', 'Quantization'],
|
||||
seniority: 'mid',
|
||||
location: 'Remote',
|
||||
remote: true,
|
||||
salaryMin: 130000,
|
||||
salaryMax: 195000,
|
||||
matchScore: 82,
|
||||
postedAt: '2026-08-24T11:30:00Z',
|
||||
},
|
||||
{
|
||||
id: 'job-020',
|
||||
title: 'AI Research Engineer',
|
||||
employerId: 'emp-cohere',
|
||||
description:
|
||||
'Push the frontier of language model capabilities. Prototype new architectures, run large-scale experiments, and contribute to publications and open-source releases.',
|
||||
requiredCompetencies: ['stack-orchestration-c001', 'stack-science-c010', 'stack-science-c011'],
|
||||
skills: ['PyTorch', 'Research', 'Transformers', 'Distributed training'],
|
||||
seniority: 'senior',
|
||||
location: 'Berlin, Germany',
|
||||
remote: true,
|
||||
salaryMin: 155000,
|
||||
salaryMax: 235000,
|
||||
matchScore: 94,
|
||||
postedAt: '2026-08-20T09:00:00Z',
|
||||
},
|
||||
];
|
||||
@@ -0,0 +1,101 @@
|
||||
import type { Learner, Artifact, OralDefense, Microcredential } from '@nextcraft/types';
|
||||
|
||||
export const primaryLearner: Learner = {
|
||||
id: 'learner-001',
|
||||
name: 'Alex Rivera',
|
||||
email: 'alex.rivera@example.com',
|
||||
avatar: 'https://i.pravatar.cc/150?img=16',
|
||||
ageGroup: '18+',
|
||||
enrolledStacks: ['stack-orchestration', 'stack-safety'],
|
||||
progress: {
|
||||
'stack-orchestration': 62,
|
||||
'stack-safety': 41,
|
||||
},
|
||||
};
|
||||
|
||||
export const learnerMicrocredentials: Microcredential[] = [
|
||||
{ id: 'mc-001', competencyId: 'stack-orchestration-c001', issuedAt: '2026-07-12T00:00:00Z', verified: true, score: 94 },
|
||||
{ id: 'mc-002', competencyId: 'stack-orchestration-c004', issuedAt: '2026-07-28T00:00:00Z', verified: true, score: 91 },
|
||||
{ id: 'mc-003', competencyId: 'stack-orchestration-c006', issuedAt: '2026-08-04T00:00:00Z', verified: true, score: 88 },
|
||||
{ id: 'mc-004', competencyId: 'stack-safety-c021', issuedAt: '2026-08-20T00:00:00Z', verified: true, score: 90 },
|
||||
{ id: 'mc-005', competencyId: 'stack-orchestration-c003', issuedAt: null, verified: false, score: null },
|
||||
];
|
||||
|
||||
export const learnerArtifacts: Artifact[] = [
|
||||
{
|
||||
id: 'art-001',
|
||||
name: 'Multi-agent research assistant',
|
||||
type: 'code',
|
||||
url: 'https://example.com/artifacts/research-assistant',
|
||||
description: 'A LangGraph-based assistant that plans, retrieves, and drafts cited literature reviews with an eval harness.',
|
||||
createdAt: '2026-08-22T14:30:00Z',
|
||||
},
|
||||
{
|
||||
id: 'art-002',
|
||||
name: 'RAG retrieval quality dashboard',
|
||||
type: 'code',
|
||||
url: 'https://example.com/artifacts/rag-dashboard',
|
||||
description: 'Streamlit dashboard comparing chunking strategies and rerankers across 800 evaluation queries.',
|
||||
createdAt: '2026-08-15T09:12:00Z',
|
||||
},
|
||||
{
|
||||
id: 'art-003',
|
||||
name: 'Model card for internal Q&A agent',
|
||||
type: 'document',
|
||||
url: 'https://example.com/artifacts/model-card',
|
||||
description: 'Capabilities, limitations, intended use, and red-team findings for a document-grounded Q&A agent.',
|
||||
createdAt: '2026-08-19T11:00:00Z',
|
||||
},
|
||||
{
|
||||
id: 'art-004',
|
||||
name: 'Prompt regression suite',
|
||||
type: 'code',
|
||||
url: 'https://example.com/artifacts/prompt-regression',
|
||||
description: 'Pytest-based suite of 320 prompt assertions with LLM-as-judge scoring and CI integration.',
|
||||
createdAt: '2026-08-08T16:45:00Z',
|
||||
},
|
||||
{
|
||||
id: 'art-005',
|
||||
name: 'Agent topology diagram',
|
||||
type: 'design',
|
||||
url: 'https://example.com/artifacts/topology',
|
||||
description: 'Architecture diagram for a plan-and-execute agent with reflection and tool-retrieval sub-graphs.',
|
||||
createdAt: '2026-07-30T10:20:00Z',
|
||||
},
|
||||
];
|
||||
|
||||
export const upcomingDefenses: OralDefense[] = [
|
||||
{
|
||||
id: 'def-001',
|
||||
competencyId: 'stack-orchestration-c003',
|
||||
transcript: '',
|
||||
score: null,
|
||||
status: 'scheduled',
|
||||
},
|
||||
{
|
||||
id: 'def-002',
|
||||
competencyId: 'stack-orchestration-c008',
|
||||
transcript: '',
|
||||
score: null,
|
||||
status: 'scheduled',
|
||||
},
|
||||
{
|
||||
id: 'def-003',
|
||||
competencyId: 'stack-safety-c019',
|
||||
transcript: '',
|
||||
score: null,
|
||||
status: 'pending',
|
||||
},
|
||||
];
|
||||
|
||||
export const learnerSummary = {
|
||||
enrolledStacks: primaryLearner.enrolledStacks.length,
|
||||
microcredentialsEarned: learnerMicrocredentials.filter((m) => m.verified).length,
|
||||
artifactsSubmitted: learnerArtifacts.length,
|
||||
upcomingDefenses: upcomingDefenses.filter((d) => d.status === 'scheduled').length,
|
||||
averageScore:
|
||||
learnerMicrocredentials
|
||||
.filter((m) => m.score !== null)
|
||||
.reduce((acc, m) => acc + (m.score ?? 0), 0) /
|
||||
Math.max(1, learnerMicrocredentials.filter((m) => m.score !== null).length),
|
||||
};
|
||||
@@ -0,0 +1,22 @@
|
||||
{
|
||||
"name": "@nextcraft/mock-data",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"main": "./index.ts",
|
||||
"types": "./index.ts",
|
||||
"exports": {
|
||||
".": "./index.ts",
|
||||
"./*": "./*.ts"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "tsc --noEmit",
|
||||
"typecheck": "tsc --noEmit"
|
||||
},
|
||||
"dependencies": {
|
||||
"@nextcraft/types": "workspace:*"
|
||||
},
|
||||
"devDependencies": {
|
||||
"typescript": "^5.7.2"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"noEmit": true,
|
||||
"declaration": false,
|
||||
"declarationMap": false
|
||||
},
|
||||
"include": ["*.ts"]
|
||||
}
|
||||
@@ -0,0 +1,83 @@
|
||||
/**
|
||||
* Nextcraft — Domain Types
|
||||
*
|
||||
* Competency-based credential model: stacks → competencies → microcredentials,
|
||||
* evidenced by artifacts, process traces, oral defenses, and rubric assessments.
|
||||
*/
|
||||
|
||||
export type CompetencyStatus = 'locked' | 'available' | 'in_progress' | 'mastered';
|
||||
|
||||
export type ArtifactType = 'code' | 'design' | 'simulation' | 'document';
|
||||
|
||||
export interface Competency {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string;
|
||||
status: CompetencyStatus;
|
||||
stackId: string;
|
||||
prerequisites: string[];
|
||||
microcredentialId: string | null;
|
||||
}
|
||||
|
||||
export interface CompetencyStack {
|
||||
id: string;
|
||||
name: string;
|
||||
targetRoles: string;
|
||||
description: string;
|
||||
competencies: Competency[];
|
||||
color: StackColor;
|
||||
icon: string;
|
||||
}
|
||||
|
||||
export type StackColor = 'indigo' | 'rose' | 'violet' | 'emerald' | 'cyan';
|
||||
|
||||
export interface Microcredential {
|
||||
id: string;
|
||||
competencyId: string;
|
||||
issuedAt: string | null;
|
||||
verified: boolean;
|
||||
score: number | null;
|
||||
}
|
||||
|
||||
export interface Artifact {
|
||||
id: string;
|
||||
name: string;
|
||||
type: ArtifactType;
|
||||
url: string;
|
||||
description: string;
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
export interface ProcessTraceStep {
|
||||
timestamp: string;
|
||||
action: string;
|
||||
metadata: Record<string, unknown>;
|
||||
}
|
||||
|
||||
export interface ProcessTrace {
|
||||
id: string;
|
||||
competencyId: string;
|
||||
steps: ProcessTraceStep[];
|
||||
}
|
||||
|
||||
export type OralDefenseStatus = 'scheduled' | 'passed' | 'failed' | 'pending';
|
||||
|
||||
export interface OralDefense {
|
||||
id: string;
|
||||
competencyId: string;
|
||||
transcript: string;
|
||||
score: number | null;
|
||||
status: OralDefenseStatus;
|
||||
}
|
||||
|
||||
export interface RubricCriterion {
|
||||
name: string;
|
||||
passed: boolean;
|
||||
weight: number;
|
||||
}
|
||||
|
||||
export interface AssessmentRubric {
|
||||
id: string;
|
||||
competencyId: string;
|
||||
criteria: RubricCriterion[];
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
export * from './domain';
|
||||
export * from './marketplace';
|
||||
export * from './user';
|
||||
export * from './ui';
|
||||
@@ -0,0 +1,76 @@
|
||||
/**
|
||||
* Nextcraft — Marketplace Types
|
||||
*
|
||||
* AI-era job board + talent marketplace. Jobs, employers, candidates,
|
||||
* postings, talent matches, and search filters.
|
||||
*/
|
||||
|
||||
export type Seniority = 'entry' | 'mid' | 'senior' | 'staff' | 'principal';
|
||||
|
||||
export interface Job {
|
||||
id: string;
|
||||
title: string;
|
||||
employerId: string;
|
||||
description: string;
|
||||
requiredCompetencies: string[];
|
||||
skills: string[];
|
||||
seniority: Seniority;
|
||||
location: string;
|
||||
remote: boolean;
|
||||
salaryMin: number;
|
||||
salaryMax: number;
|
||||
matchScore: number;
|
||||
postedAt: string;
|
||||
}
|
||||
|
||||
export interface Employer {
|
||||
id: string;
|
||||
name: string;
|
||||
logo: string;
|
||||
description: string;
|
||||
industry: string;
|
||||
size: string;
|
||||
location: string;
|
||||
website: string;
|
||||
socialLinks: Record<string, string>;
|
||||
culture: string;
|
||||
}
|
||||
|
||||
export interface Candidate {
|
||||
id: string;
|
||||
name: string;
|
||||
avatar: string;
|
||||
headline: string;
|
||||
competencyStackId: string;
|
||||
microcredentials: number;
|
||||
artifactCount: number;
|
||||
defenseScore: number;
|
||||
matchScore: number;
|
||||
bio: string;
|
||||
}
|
||||
|
||||
export type JobPostingStatus = 'active' | 'draft' | 'expired';
|
||||
|
||||
export interface JobPosting {
|
||||
id: string;
|
||||
jobId: string;
|
||||
status: JobPostingStatus;
|
||||
applicants: number;
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
export interface TalentMatch {
|
||||
candidateId: string;
|
||||
jobId: string;
|
||||
score: number;
|
||||
matchedSkills: string[];
|
||||
}
|
||||
|
||||
export interface SearchFilter {
|
||||
query: string;
|
||||
skills: string[];
|
||||
seniority: Seniority | null;
|
||||
remote: boolean | null;
|
||||
salaryMin: number | null;
|
||||
salaryMax: number | null;
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"name": "@nextcraft/types",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"main": "./index.ts",
|
||||
"types": "./index.ts",
|
||||
"exports": {
|
||||
".": "./index.ts",
|
||||
"./*": "./*.ts"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "tsc --noEmit",
|
||||
"typecheck": "tsc --noEmit"
|
||||
},
|
||||
"devDependencies": {
|
||||
"typescript": "^5.7.2"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"noEmit": true,
|
||||
"declaration": true,
|
||||
"declarationMap": true
|
||||
},
|
||||
"include": ["*.ts"]
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
/**
|
||||
* Nextcraft — UI Types
|
||||
*
|
||||
* Theme surfaces, breakpoints, navigation items.
|
||||
*/
|
||||
|
||||
import type { Role } from './user';
|
||||
|
||||
export type Surface = 'learner' | 'marketplace' | 'employer' | 'admin';
|
||||
|
||||
export type ThemeMode = 'light' | 'dark';
|
||||
|
||||
export interface ThemeConfig {
|
||||
surface: Surface;
|
||||
mode: ThemeMode;
|
||||
}
|
||||
|
||||
export type Breakpoint = 'sm' | 'md' | 'lg' | 'xl';
|
||||
|
||||
export interface NavItem {
|
||||
label: string;
|
||||
href: string;
|
||||
icon: string;
|
||||
}
|
||||
|
||||
export type RoleSurface = Role | 'marketplace';
|
||||
@@ -0,0 +1,37 @@
|
||||
/**
|
||||
* Nextcraft — User Types
|
||||
*
|
||||
* Three user roles: learner, employer, admin. Learners are segmented by
|
||||
* age group for compliance and content gating.
|
||||
*/
|
||||
|
||||
export type Role = 'learner' | 'employer' | 'admin';
|
||||
|
||||
export type AgeGroup = '16-17' | '18+';
|
||||
|
||||
export interface Learner {
|
||||
id: string;
|
||||
name: string;
|
||||
email: string;
|
||||
avatar: string;
|
||||
ageGroup: AgeGroup;
|
||||
enrolledStacks: string[];
|
||||
progress: Record<string, number>;
|
||||
}
|
||||
|
||||
export interface Admin {
|
||||
id: string;
|
||||
name: string;
|
||||
email: string;
|
||||
avatar: string;
|
||||
}
|
||||
|
||||
export interface EmployerUser {
|
||||
id: string;
|
||||
name: string;
|
||||
email: string;
|
||||
avatar: string;
|
||||
employerId: string;
|
||||
}
|
||||
|
||||
export type User = Learner | Admin | EmployerUser;
|
||||
@@ -0,0 +1,29 @@
|
||||
{
|
||||
"name": "@nextcraft/ui",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"main": "./src/index.ts",
|
||||
"types": "./src/index.ts",
|
||||
"exports": {
|
||||
".": "./src/index.ts",
|
||||
"./*": "./src/*"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "tsc --noEmit",
|
||||
"typecheck": "tsc --noEmit"
|
||||
},
|
||||
"dependencies": {
|
||||
"@nextcraft/types": "workspace:*",
|
||||
"lucide-react": "^0.468.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^18.3.1 || ^19.0.0",
|
||||
"react-dom": "^18.3.1 || ^19.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"typescript": "^5.7.2",
|
||||
"@types/react": "^19.0.0",
|
||||
"@types/react-dom": "^19.0.0"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,2 @@
|
||||
export * from './tokens';
|
||||
export * from './primitives';
|
||||
@@ -0,0 +1,65 @@
|
||||
'use client';
|
||||
|
||||
import { forwardRef, type ImgHTMLAttributes, type ReactNode, useState } from 'react';
|
||||
|
||||
export type AvatarSize = 'sm' | 'md' | 'lg';
|
||||
|
||||
export interface AvatarProps extends ImgHTMLAttributes<HTMLImageElement> {
|
||||
name: string;
|
||||
src?: string;
|
||||
size?: AvatarSize;
|
||||
fallback?: ReactNode;
|
||||
}
|
||||
|
||||
const sizeClasses: Record<AvatarSize, string> = {
|
||||
sm: 'h-8 w-8 text-xs',
|
||||
md: 'h-10 w-10 text-sm',
|
||||
lg: 'h-14 w-14 text-base',
|
||||
};
|
||||
|
||||
function initials(name: string): string {
|
||||
return name
|
||||
.split(' ')
|
||||
.filter(Boolean)
|
||||
.slice(0, 2)
|
||||
.map((part) => part[0]?.toUpperCase() ?? '')
|
||||
.join('');
|
||||
}
|
||||
|
||||
export const Avatar = forwardRef<HTMLImageElement, AvatarProps>(function Avatar(
|
||||
{ name, src, size = 'md', fallback, className, onError, ...rest },
|
||||
ref,
|
||||
) {
|
||||
const [errored, setErrored] = useState(false);
|
||||
const showImage = src && !errored;
|
||||
|
||||
return (
|
||||
<span
|
||||
className={[
|
||||
'inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full',
|
||||
'bg-primary-100 text-primary-700 font-medium dark:bg-primary-900/50 dark:text-primary-200',
|
||||
sizeClasses[size],
|
||||
className ?? '',
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(' ')}
|
||||
>
|
||||
{showImage ? (
|
||||
// eslint-disable-next-line jsx-a11y/alt-text
|
||||
<img
|
||||
ref={ref}
|
||||
src={src}
|
||||
alt={name}
|
||||
className="h-full w-full object-cover"
|
||||
onError={(e) => {
|
||||
setErrored(true);
|
||||
onError?.(e);
|
||||
}}
|
||||
{...rest}
|
||||
/>
|
||||
) : (
|
||||
fallback ?? initials(name)
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
});
|
||||
@@ -0,0 +1,37 @@
|
||||
import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
|
||||
|
||||
export type BadgeVariant = 'default' | 'success' | 'warning' | 'error' | 'info';
|
||||
|
||||
export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
|
||||
variant?: BadgeVariant;
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
const variantClasses: Record<BadgeVariant, string> = {
|
||||
default: 'bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-200',
|
||||
success: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300',
|
||||
warning: 'bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300',
|
||||
error: 'bg-rose-100 text-rose-700 dark:bg-rose-900/40 dark:text-rose-300',
|
||||
info: 'bg-primary-100 text-primary-700 dark:bg-primary-900/40 dark:text-primary-300',
|
||||
};
|
||||
|
||||
export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(
|
||||
{ variant = 'default', className, children, ...rest },
|
||||
ref,
|
||||
) {
|
||||
return (
|
||||
<span
|
||||
ref={ref}
|
||||
className={[
|
||||
'inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-medium',
|
||||
variantClasses[variant],
|
||||
className ?? '',
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(' ')}
|
||||
{...rest}
|
||||
>
|
||||
{children}
|
||||
</span>
|
||||
);
|
||||
});
|
||||
@@ -0,0 +1,62 @@
|
||||
'use client';
|
||||
|
||||
import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react';
|
||||
import { Loader2 } from 'lucide-react';
|
||||
|
||||
export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'destructive' | 'outline';
|
||||
export type ButtonSize = 'sm' | 'md' | 'lg';
|
||||
|
||||
export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
||||
variant?: ButtonVariant;
|
||||
size?: ButtonSize;
|
||||
loading?: boolean;
|
||||
icon?: ReactNode;
|
||||
iconRight?: ReactNode;
|
||||
}
|
||||
|
||||
const sizeClasses: Record<ButtonSize, string> = {
|
||||
sm: 'h-8 px-3 text-xs gap-1.5',
|
||||
md: 'h-10 px-4 text-sm gap-2',
|
||||
lg: 'h-12 px-6 text-base gap-2.5',
|
||||
};
|
||||
|
||||
const variantClasses: Record<ButtonVariant, string> = {
|
||||
primary:
|
||||
'bg-primary-600 text-white hover:bg-primary-700 active:bg-primary-800 shadow-sm focus-visible:ring-primary-500',
|
||||
secondary:
|
||||
'bg-primary-100 text-primary-700 hover:bg-primary-200 active:bg-primary-300 focus-visible:ring-primary-500 dark:bg-primary-900/40 dark:text-primary-200 dark:hover:bg-primary-900/60',
|
||||
ghost:
|
||||
'bg-transparent text-slate-700 hover:bg-slate-100 active:bg-slate-200 focus-visible:ring-slate-400 dark:text-slate-200 dark:hover:bg-slate-800',
|
||||
destructive:
|
||||
'bg-rose-600 text-white hover:bg-rose-700 active:bg-rose-800 shadow-sm focus-visible:ring-rose-500',
|
||||
outline:
|
||||
'border border-slate-300 bg-transparent text-slate-800 hover:bg-slate-50 active:bg-slate-100 focus-visible:ring-slate-400 dark:border-slate-700 dark:text-slate-100 dark:hover:bg-slate-800',
|
||||
};
|
||||
|
||||
export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
|
||||
{ variant = 'primary', size = 'md', loading = false, icon, iconRight, className, children, disabled, ...rest },
|
||||
ref,
|
||||
) {
|
||||
const isDisabled = disabled || loading;
|
||||
return (
|
||||
<button
|
||||
ref={ref}
|
||||
disabled={isDisabled}
|
||||
className={[
|
||||
'inline-flex items-center justify-center rounded-md font-medium transition-colors',
|
||||
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
|
||||
'disabled:opacity-50 disabled:pointer-events-none',
|
||||
sizeClasses[size],
|
||||
variantClasses[variant],
|
||||
className ?? '',
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(' ')}
|
||||
{...rest}
|
||||
>
|
||||
{loading ? <Loader2 className="h-4 w-4 animate-spin" aria-hidden /> : icon}
|
||||
{children}
|
||||
{iconRight}
|
||||
</button>
|
||||
);
|
||||
});
|
||||
@@ -0,0 +1,71 @@
|
||||
import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
|
||||
|
||||
export interface CardProps extends HTMLAttributes<HTMLDivElement> {
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
export const Card = forwardRef<HTMLDivElement, CardProps>(function Card(
|
||||
{ className, children, ...rest },
|
||||
ref,
|
||||
) {
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className={[
|
||||
'rounded-lg border border-slate-200 bg-white shadow-sm',
|
||||
'dark:border-slate-800 dark:bg-slate-900',
|
||||
className ?? '',
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(' ')}
|
||||
{...rest}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
export const CardHeader = forwardRef<HTMLDivElement, CardProps>(function CardHeader(
|
||||
{ className, children, ...rest },
|
||||
ref,
|
||||
) {
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className={['flex flex-col gap-1 p-6 border-b border-slate-200 dark:border-slate-800', className ?? '']
|
||||
.filter(Boolean)
|
||||
.join(' ')}
|
||||
{...rest}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
export const CardBody = forwardRef<HTMLDivElement, CardProps>(function CardBody(
|
||||
{ className, children, ...rest },
|
||||
ref,
|
||||
) {
|
||||
return (
|
||||
<div ref={ref} className={['p-6', className ?? ''].filter(Boolean).join(' ')} {...rest}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
export const CardFooter = forwardRef<HTMLDivElement, CardProps>(function CardFooter(
|
||||
{ className, children, ...rest },
|
||||
ref,
|
||||
) {
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className={['flex items-center gap-3 p-6 border-t border-slate-200 dark:border-slate-800', className ?? '']
|
||||
.filter(Boolean)
|
||||
.join(' ')}
|
||||
{...rest}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
@@ -0,0 +1,5 @@
|
||||
export * from './button';
|
||||
export * from './input';
|
||||
export * from './card';
|
||||
export * from './badge';
|
||||
export * from './avatar';
|
||||
@@ -0,0 +1,57 @@
|
||||
'use client';
|
||||
|
||||
import { forwardRef, type InputHTMLAttributes, type ReactNode } from 'react';
|
||||
|
||||
export type InputSize = 'sm' | 'md' | 'lg';
|
||||
|
||||
export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
|
||||
label?: string;
|
||||
error?: string;
|
||||
icon?: ReactNode;
|
||||
inputSize?: InputSize;
|
||||
}
|
||||
|
||||
const sizeClasses: Record<InputSize, string> = {
|
||||
sm: 'h-8 text-xs px-2.5',
|
||||
md: 'h-10 text-sm px-3',
|
||||
lg: 'h-12 text-base px-4',
|
||||
};
|
||||
|
||||
export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
|
||||
{ label, error, icon, inputSize = 'md', className, id, ...rest },
|
||||
ref,
|
||||
) {
|
||||
const inputId = id ?? rest.name;
|
||||
return (
|
||||
<div className="flex flex-col gap-1.5">
|
||||
{label && (
|
||||
<label htmlFor={inputId} className="text-sm font-medium text-slate-700 dark:text-slate-200">
|
||||
{label}
|
||||
</label>
|
||||
)}
|
||||
<div className="relative flex items-center">
|
||||
{icon && (
|
||||
<span className="pointer-events-none absolute left-3 flex items-center text-slate-400">{icon}</span>
|
||||
)}
|
||||
<input
|
||||
ref={ref}
|
||||
id={inputId}
|
||||
className={[
|
||||
'w-full rounded-md border bg-white text-slate-900 placeholder:text-slate-400 transition-colors',
|
||||
'border-slate-300 focus:border-primary-500 focus:ring-2 focus:ring-primary-500/30 focus:outline-none',
|
||||
'dark:bg-slate-900 dark:text-slate-100 dark:border-slate-700 dark:placeholder:text-slate-500',
|
||||
error && 'border-rose-500 focus:border-rose-500 focus:ring-rose-500/30',
|
||||
icon && 'pl-9',
|
||||
sizeClasses[inputSize],
|
||||
className ?? '',
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(' ')}
|
||||
aria-invalid={Boolean(error)}
|
||||
{...rest}
|
||||
/>
|
||||
</div>
|
||||
{error && <p className="text-xs text-rose-600 dark:text-rose-400">{error}</p>}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
@@ -0,0 +1,92 @@
|
||||
/**
|
||||
* Nextcraft design tokens.
|
||||
*
|
||||
* Colors are also mirrored as Tailwind v4 @theme tokens in
|
||||
* apps/web/app/globals.css so that classes like `bg-primary-500` resolve.
|
||||
* The TS constants are for programmatic use (charts, custom styles).
|
||||
*/
|
||||
|
||||
import type { Breakpoint } from '@nextcraft/types';
|
||||
|
||||
export const colors = {
|
||||
primary: {
|
||||
50: '#eef2ff',
|
||||
100: '#e0e7ff',
|
||||
200: '#c7d2fe',
|
||||
300: '#a5b4fc',
|
||||
400: '#818cf8',
|
||||
500: '#6366f1',
|
||||
600: '#4f46e5',
|
||||
700: '#4338ca',
|
||||
800: '#3730a3',
|
||||
900: '#312e81',
|
||||
950: '#1e1b4b',
|
||||
},
|
||||
accent: {
|
||||
50: '#ecfdf5',
|
||||
100: '#d1fae5',
|
||||
200: '#a7f3d0',
|
||||
300: '#6ee7b7',
|
||||
400: '#34d399',
|
||||
500: '#10b981',
|
||||
600: '#059669',
|
||||
700: '#047857',
|
||||
800: '#065f46',
|
||||
900: '#064e3b',
|
||||
950: '#022c22',
|
||||
},
|
||||
neutral: {
|
||||
50: '#f8fafc',
|
||||
100: '#f1f5f9',
|
||||
200: '#e2e8f0',
|
||||
300: '#cbd5e1',
|
||||
400: '#94a3b8',
|
||||
500: '#64748b',
|
||||
600: '#475569',
|
||||
700: '#334155',
|
||||
800: '#1e293b',
|
||||
900: '#0f172a',
|
||||
950: '#020617',
|
||||
},
|
||||
} as const;
|
||||
|
||||
export const spacing = {
|
||||
1: 4,
|
||||
2: 8,
|
||||
3: 12,
|
||||
4: 16,
|
||||
6: 24,
|
||||
8: 32,
|
||||
12: 48,
|
||||
16: 64,
|
||||
} as const;
|
||||
|
||||
export const radii = {
|
||||
sm: 4,
|
||||
md: 8,
|
||||
lg: 12,
|
||||
xl: 16,
|
||||
full: 9999,
|
||||
} as const;
|
||||
|
||||
export const shadows = {
|
||||
sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
|
||||
md: '0 4px 6px -1px rgb(0 0 0 / 0.10), 0 2px 4px -2px rgb(0 0 0 / 0.10)',
|
||||
lg: '0 10px 15px -3px rgb(0 0 0 / 0.10), 0 4px 6px -4px rgb(0 0 0 / 0.10)',
|
||||
xl: '0 20px 25px -5px rgb(0 0 0 / 0.10), 0 8px 10px -6px rgb(0 0 0 / 0.10)',
|
||||
} as const;
|
||||
|
||||
export const breakpoints: Record<Breakpoint, number> = {
|
||||
sm: 375,
|
||||
md: 768,
|
||||
lg: 1024,
|
||||
xl: 1280,
|
||||
};
|
||||
|
||||
export const tokens = {
|
||||
colors,
|
||||
spacing,
|
||||
radii,
|
||||
shadows,
|
||||
breakpoints,
|
||||
} as const;
|
||||
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
"declaration": true,
|
||||
"declarationMap": true
|
||||
},
|
||||
"include": ["src/**/*.ts", "src/**/*.tsx"]
|
||||
}
|
||||
Generated
+1695
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,3 @@
|
||||
packages:
|
||||
- 'apps/*'
|
||||
- 'packages/*'
|
||||
@@ -0,0 +1,37 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2022",
|
||||
"lib": ["ES2022", "DOM", "DOM.Iterable"],
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "bundler",
|
||||
"moduleDetection": "force",
|
||||
"jsx": "preserve",
|
||||
"allowImportingTsExtensions": true,
|
||||
"verbatimModuleSyntax": false,
|
||||
"noEmit": true,
|
||||
"declaration": true,
|
||||
"declarationMap": true,
|
||||
"sourceMap": true,
|
||||
"strict": true,
|
||||
"noUnusedLocals": false,
|
||||
"noUnusedParameters": false,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true,
|
||||
"esModuleInterop": true,
|
||||
"skipLibCheck": true,
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"incremental": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@nextcraft/ui": ["./packages/ui/src/index.ts"],
|
||||
"@nextcraft/ui/*": ["./packages/ui/src/*"],
|
||||
"@nextcraft/types": ["./packages/types/index.ts"],
|
||||
"@nextcraft/types/*": ["./packages/types/*"],
|
||||
"@nextcraft/mock-data": ["./packages/mock-data/index.ts"],
|
||||
"@nextcraft/mock-data/*": ["./packages/mock-data/*"]
|
||||
}
|
||||
},
|
||||
"exclude": ["node_modules", "**/node_modules", "**/.next", "**/dist"]
|
||||
}
|
||||
+22
@@ -0,0 +1,22 @@
|
||||
{
|
||||
"$schema": "https://turbo.build/schema.json",
|
||||
"tasks": {
|
||||
"build": {
|
||||
"dependsOn": ["^build"],
|
||||
"outputs": [".next/**", "!.next/cache/**", "dist/**"]
|
||||
},
|
||||
"dev": {
|
||||
"cache": false,
|
||||
"persistent": true
|
||||
},
|
||||
"lint": {
|
||||
"dependsOn": ["^build"]
|
||||
},
|
||||
"typecheck": {
|
||||
"dependsOn": ["^build"]
|
||||
},
|
||||
"clean": {
|
||||
"cache": false
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user