Payroll System — Next.js + Supabase

1:1 port of the Laravel payroll system to Next.js (App Router) for Vercel + Supabase Postgres. No authentication (matches the source app — this is meant to sit behind a private Vercel URL only you know).

Setup

1. Install dependencies

   npm install
   

2. Create the Supabase tables Open your Supabase project → SQL Editor → run the files in supabase/migrations/ in numeric order (001-initial-schema.sql, 002-multiuser.sql, etc.). See supabase/migrations/README.md for details.

3. Env vars Copy .env.example to .env.local and fill in your Supabase project's URL and keys (Project Settings → API):

   NEXT_PUBLIC_SUPABASE_URL=
   NEXT_PUBLIC_SUPABASE_ANON_KEY=
   SUPABASE_SERVICE_ROLE_KEY=
   

   The service role key is used server-side only (Server Components/Actions) since there's no auth/RLS — never expose it to client code.

4. Run locally

   npm run dev
   

5. Deploy to Vercel Push to a git repo, import into Vercel, and set the same three env vars in Vercel's Project Settings → Environment Variables.

What was ported

• employees / payrolls tables — same columns, same (employee_id, payroll_date) uniqueness (now enforced as a real DB constraint instead of just updateOrCreate semantics)
• Payroll calc: total = (daily_rate * days_worked) + ((daily_rate / 8) * overtime_hours) — unchanged
• Payroll group auto-suggestion (PULONG, TATA ROMY, ARIEL, WILSON → MF, everyone else → BASE 3) — lib/employee.ts
• Voice code defaults and normalization — lib/employee.ts
• Employees page: table + create/edit modal (was Alpine.js, now React state) + delete confirm via SweetAlert2
• Payrolls page: Compute Entry / Past Records tabs, live per-group salary totals, and the full voice-command parser (Web Speech API) for hands-free payroll entry — ported line-for-line from the original Alpine component into app/payrolls/PayrollsClient.tsx

Notes / things to sanity-check after deploy

• Voice commands only work in Chrome/Edge (Web Speech API support) and require HTTPS — Vercel gives you that by default, but local http://localhost testing works too since browsers treat localhost as a secure context.
• Success toasts: Laravel used session-flash; this uses a ?success= query param that gets stripped from the URL after the toast fires. Functionally equivalent, slightly different mechanism.
• Validation errors on the employee form are returned from the Server Action and rendered in the modal instead of a full-page redirect-with-errors like Laravel did — same messages, no page reload needed.

payroll-system