SwiftWork

SwiftWork is an internal ERP prototype built for SwiftCare, a Philippine telehealth company. It covers two modules — People Management and Timekeeping & Payroll — and is designed for a product pitch at the Whitecloak Launchpad Launch Round.

Most ERPs are systems of record: they store data. SwiftWork is a system of insight: it surfaces what needs attention before it becomes a problem. Every screen is designed to flag expiring credentials, payroll discrepancies, sentiment dips, and staffing gaps — not just display raw data.

---

Context

SwiftCare operates 20 branches nationwide with 100 salaried employees and 50 independent doctor consultants. The two workforce types drive the product's design:

• Employees — salaried, attendance-based, subject to SSS, PhilHealth, Pag-IBIG, and withholding tax. They log into SwiftWork.
• Doctor consultants — paid per consultation, not staff. Subject only to Expanded Withholding Tax (EWT). They live in SwiftCare, not SwiftWork.

SwiftWork manages both sides from one HR/payroll admin view.

---

What's built

This is a front-end-only clickable prototype. All data is hardcoded. No backend, no auth, no API calls. The goal is screens that look real and navigate between each other.

The prototype is built from the HR/payroll admin perspective, since that role sees the most. The sidebar reflects this with two groups: self-service tabs at the top and admin/manage tabs below.

Self-service screens (employee view)

Route	Screen	Description
/	Home	Personalized dashboard — greeting, attention strip for urgent items, stat cards (leave balance, attendance, next payout), quick actions, wellbeing nudge
/pay	Pay	Upcoming payslip hero card, recent payslips, payslip breakdown modal (gross → deductions → net), full paginated pay history
/attendance	Attendance & Leave	Attendance tab: stat cards, calendar/list view toggle, color-coded month grid, attendance log table. Leave tab: leave balance cards, apply for leave modal, leave request history
/wellbeing	Wellbeing	Pulse check-in card (answered/unanswered states), step-through pulse modal, feedback ticket table, raise a concern modal, ticket detail modal with HR response thread

Admin/manage screens

Route	Screen	Description
/people	People	Employee onboarding review queue, flagged submissions, 201 file (employee record), consultant credential dashboard with PRC expiry tracking
/payroll	Payroll	Payroll dry-run preview with gross/deductions/net per employee, discrepancy flags, run history, finalize flow
/timekeeping	Timekeeping	Live attendance board grouped by branch, per-employee status pills, timesheet approval, split-panel timesheet detail modal with daily log
/engagement	Engagement	Sentiment dashboard with AI-surfaced themes, pulse response trends, feedback ticket queue with HR response workflow

---

Tech stack

Layer	Choice
Framework	Next.js 16 (App Router)
Language	TypeScript
Styling	Tailwind CSS v4 (@theme inline tokens)
Icons	Lucide React — outline style only, strokeWidth={1.75}
Font	Apercu Pro (Regular, Medium, Bold) — fallback Inter / system-ui
State	React useState / useEffect only — no external state library
Rendering	Server components where possible, 'use client' for interactive pages
Modals	createPortal to document.body

---

Getting started

# Install dependencies
npm install

# Run the development server
npm run dev

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

The app starts on the Home screen. Navigate using the sidebar. All screens are accessible — no login required.

---

Project structure

app/
├── layout.tsx              # Root layout — AppShell wrapper, metadata, favicon
├── page.tsx                # Home (self-service dashboard)
├── template.tsx            # Route transition animation wrapper
│
├── pay/page.tsx            # Pay — payslips, hero card, history table
├── attendance/page.tsx     # Attendance & Leave — calendar, list view, leave tab
├── wellbeing/page.tsx      # Wellbeing — pulse check-in, feedback tickets
│
├── people/
│   ├── page.tsx            # People — onboarding queue, employee records, consultant dashboard
│   ├── [id]/page.tsx       # 201 file — individual employee record
│   └── consultants.tsx     # Consultant credential dashboard
│
├── payroll/page.tsx        # Payroll — dry-run preview, run history
├── timekeeping/page.tsx    # Timekeeping — live board, timesheet modal
│
├── engagement/
│   ├── page.tsx            # Engagement — page shell, tab switcher, pulse modal
│   ├── insights.tsx        # Insights tab — sentiment dashboard, AI themes
│   └── feedback.tsx        # Feedback tab — ticket queue, response workflow
│
├── components/
│   ├── AppShell.tsx        # Sidebar + top bar layout wrapper
│   └── shared.tsx          # Reusable primitives (see below)
│
├── globals.css             # Design tokens, Tailwind theme, keyframe animations
└── icon.png                # Favicon (SwiftCare hand icon)

public/
└── logo.png                # SwiftWork full logo (sidebar)

---

Shared components

All reusable UI primitives live in app/components/shared.tsx and are imported across pages.

Component	Description
NavItem	Sidebar and modal section nav link. Active state bg-surface.
AttentionStrip	Flagged item banner in bg-brand-sub. Ordered critical → advisory. Per-flag "Show me" / "Mark done" toggle.
StatCard	KPI tile. 36px value, optional trend arrow, info tooltip.
FilterSelect	Dropdown filter pill. Custom-styled, accessible.
TableHead	Column header row for grid-based tables.
usePagination	Pagination hook — returns sliced items, page, setPage, pageCount.
PaginationControls	Prev/Next pagination UI — hidden when pageCount <= 1.
InfoTooltip	Hover tooltip anchored to an Info icon.
avatarColor(id)	Returns a deterministic { bg, text } Tailwind class pair from an ID string.

---

Design system

The full token reference lives in DESIGN-SYSTEM.md. Key rules:

Colors

• #008786 — brand teal, used sparingly (primary buttons, active states, links)
• #E6F4EF — brand-sub, teal wash for attention strips, pulse cards, secondary fills
• #111111 / #6F6F6F — ink / muted for all text
• #EAEAEA — border, used at 0.5px hairline throughout
• #FFFFFF / #F3F3F3 — background (cards, tables, inputs) / surface (page bg, sidebars)

Typography — Apercu Pro. Base 14px. Scale: 10 / 11 / 12 / 13 / 14 / 16 / 36px. No bold (700) in UI — medium (500) only for emphasis.

Borders — always border-[0.5px] border-border. Never 1px. Consistent hairline treatment everywhere.

Border radius — rounded-lg (8px) for inputs and buttons, rounded-xl (12px) for cards and modals. rounded-2xl is not used.

Animations — defined as CSS keyframes in globals.css:

• animate-fadeInDown — page load (600ms)
• animate-tabIn — tab switch via key remount (360ms)
• animate-slideLeft — attention strip action swap (160ms)

---

Prototype scope

This is a prototype, not a production application. Specific constraints to be aware of:

• All data is hardcoded. No API calls, no database, no authentication.
• Forms do not validate or submit. Buttons navigate or close modals.
• One state per screen. Loading, error, and empty states are not built unless explicitly part of the hero screen spec.
• Single role. The prototype shows the HR/payroll admin view only. Employee and branch manager views are not separate.
• No backend logic. Tax computation, PRC verification, and payment processing all show fake computed results.
• Philippine context throughout. Filipino names, PHP (₱) amounts, PH statutory deductions (SSS, PhilHealth, Pag-IBIG, EWT), real branch locations (Manila, Makati, Quezon City, Taguig, Cebu, Davao, Iligan, etc.).

---

Feature brief

The full feature list — MVP, innovative, and backlog items for both modules — is in PROTOTYPE-BRIEF.md.