TeamFlow — Next.js HR Management, ATS & People Operations SaaS Starter Kit

TeamFlow is a commercial-grade Human Resources Management (HRIS) & People Operations SaaS Starter Kit engineered with Next.js 16 App Router, React 19, strict TypeScript, Tailwind CSS v4, Radix UI / shadcn/ui, Recharts, React Hook Form, and Zod.

Unlike generic purple-and-blue admin dashboards, TeamFlow features an original Human-Centered Editorial SaaS visual identity—combining warm ivory paper surfaces (#FAF7F2), deep botanical forest green accents (#1B4332), refined editorial serif display typography, and bespoke deterministic SVG colleague portraits. It is purpose-built for SaaS founders, HR tech startups, internal tooling teams, and agencies building workplace software.

12 Complete, Interactive HR & People Operations Modules

1. HR Morning Briefing & People Overview (/)
   • Personalized executive briefing, responsive headcount & cohort strip, inline Pending Leave Approvals queue, Today’s Attendance & Hub Pulse bar, Upcoming Birthdays & Anniversaries with one-click kudos, Company Gatherings scheduler, and live workspace activity feed.
2. People Directory & 5-Tab Employee Dossiers (/people & /people/[id])
   • Search by name, role, employee code, email, or skill; filter by department pills, work mode (Hybrid, Remote, On-site), location, and status; switch between Editorial Portrait Grid and Table views.
   • Full Employee CRUD (Add, Edit, Archive/Restore, Quick Peek) with React Hook Form + Zod validation and CSV export.
   • Rich Employee Profile Dossiers with Career Milestones, Leave Balances, Attendance Logs, Document Vault, and Compensation Adjustments.
3. Interactive Organization Chart & Cost Centers (/organization)
   • Expandable/collapsible multi-level reporting tree from CEO to Individual Contributors with live search highlighting, expandable Department rosters, budget tracking, and Cross-Functional Squads CRUD.
4. Recruitment & Applicant Tracking System (/recruitment)
   • 7-stage interactive drag-and-drop Kanban board (Applied, Screening, Interview, Assessment, Offer, Hired, Rejected), Open Requisitions manager, Candidate scorecards with 1–5 star ratings, interview scheduler, and one-click Hire & Onboard conversion.
5. Time Off & Team Absence Overlap Calendar (/time-off)
   • 3-way calendar switcher (Overlap Matrix, Weekly View, and Monthly Grid Calendar) to spot team absence collisions before approving leave requests, plus full leave balance ledgers.
6. Daily Attendance & Working Hours Ledger (/attendance)
   • Real-time hub and remote check-in simulator, status/work-mode/department filters, Employee Weekly Timesheet Detail & Edit modal, and CSV export.
7. Employee Onboarding Workspace (/onboarding)
   • New-hire cohort progress tracking, role-based 30-60-90 day blueprint templates, IT & hardware provisioning checklists, and one-click graduation to active status.
8. Performance Reviews, 360° Calibration & OKR Goals (/performance)
   • Q4 Growth & Impact calibration cycle, split-view employee competency rubrics, interactive Review Calibration editor, and quarterly OKR progress tracking.
9. Multi-Currency Compensation & Payslip Previews (/payroll)
   • Frontend compensation ledger supporting EUR, USD, GBP, CHF, and SEK, batch disbursement simulation, merit salary adjustments, and printable itemized Payslip Previews.
10. Compliance & Employee Documents Vault (/documents)
    • Categorized repository for Employment Contracts, Right-to-Work IDs, Certificates, and Company Policies with expiration warnings, renewal reminders, signature verification, and built-in Document Reader.
11. Executive People Analytics & Reports (/reports)
    • Longitudinal Recharts visualizations for Headcount Growth, Retention, Department Budgets, Hybrid/Remote Work Mix, Leave Utilization, and Recruitment Funnel with department scoping and CSV exports.
12. White-Label Branding, Currency & RBAC Settings (/settings)
    • One-click Business Demo Presets (European SaaS Scaleup, US Distributed Tech Startup, UK Creative Agency, Nordic Product Org), custom brand monogram, currency/timezone localization, GDPR RBAC matrix, and Warm Ivory Light / Botanical Charcoal Dark themes.

Technical Highlights for Developers

• Framework: Next.js 16 (App Router) + React 19
• Type Safety: 100% Strict TypeScript (strict: true) with clean domain interfaces (src/types/hr.ts)
• Styling & Themes: Tailwind CSS v4 + CSS custom properties with intentional Light & Dark modes
• State & Persistence: Zero-config React Context store synced with localStorage (src/lib/store.tsx) and one-click Demo Data Reset—ready to swap with Prisma, Drizzle, Supabase, or Next.js Server Actions
• Forms & Validation: react-hook-form + zod schemas
• Zero Broken Assets: Deterministic inline SVG human portrait generator (src/components/shared/employee-avatar.tsx)