Skip to content

frontend

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History

frontend

README.md

AI Workforce Platform

A production-ready SaaS frontend for hiring and managing AI Employees. Built with Next.js 15, TypeScript, Tailwind CSS, Shadcn UI, Zustand, React Query, and Framer Motion.

Tagline: Hire AI Employees. Scale Without Hiring.

Tech Stack

  • Framework: Next.js 15 (App Router)
  • Language: TypeScript
  • Styling: Tailwind CSS v4
  • UI Components: Shadcn UI (Radix primitives)
  • State Management: Zustand
  • Data Fetching: TanStack React Query
  • Animations: Framer Motion
  • Charts: Recharts
  • Icons: Lucide React

Getting Started

npm install
npm run dev

Open http://localhost:3000 in your browser.

Project Structure

src/
├── app/                    # Next.js App Router pages
│   ├── login/              # Authentication
│   ├── register/
│   ├── onboarding/         # Multi-step wizard
│   └── (app)/              # Dashboard layout group
│       ├── dashboard/
│       ├── agents/
│       ├── workflows/
│       ├── tasks/
│       ├── knowledge-base/
│       ├── integrations/
│       ├── analytics/
│       ├── billing/
│       └── settings/
├── components/
│   ├── ui/                 # Shadcn UI primitives
│   ├── layout/             # Sidebar, navbar, breadcrumbs
│   ├── dashboard/          # Dashboard widgets
│   ├── agents/             # Agent components
│   ├── workflows/          # Workflow builder
│   ├── kb/                 # Knowledge base
│   ├── billing/            # Billing components
│   └── shared/             # Reusable utilities
├── hooks/                  # React Query hooks
├── services/               # API service layer (mock)
├── store/                  # Zustand stores
├── types/                  # TypeScript interfaces
└── lib/                    # Utils, constants, mock data

Features

  • Authentication — Login, register, Google OAuth (mock)
  • Onboarding — 6-step wizard (business info, industry, AI employees, Gmail, WhatsApp)
  • Dashboard — Stats, charts, activity feed, AI worker summary
  • AI Employees — Grid view, CRUD, detail pages with tabs
  • Workflows — Visual drag-and-drop workflow builder
  • Tasks — Filterable table with search and pagination
  • Knowledge Base — Document upload, vector status
  • Integrations — Connect/disconnect third-party tools
  • Analytics — Performance charts and ROI analysis
  • Billing — Plan cards, invoices, usage stats
  • Settings — Workspace, users, API keys, notifications

Design System

Token Value
Background #09090B
Card #111113
Border #27272A
Primary #4F46E5
Accent #22C55E
Text #FAFAFA
Muted #A1A1AA
Border Radius 16px
Grid 8px

Architecture

  • Clean separation — Pages compose feature components; components use hooks; hooks call services
  • Mock API layer — All services return mock data with simulated delays
  • Type-safe — Full TypeScript coverage with shared types
  • Responsive — Mobile, tablet, and desktop layouts
  • Accessible — ARIA labels, keyboard navigation, semantic HTML

Scripts

Command Description
npm run dev Start development server
npm run build Production build
npm run start Start production server
npm run lint Run ESLint