Noor Staffing — Timekeeping & Attendance Platform

Noor Staffing Group places W-2 employees and 1099/C2C consultants across multiple client companies. Time capture today is fragmented — some clients use paper, some Excel, some their own systems — and approvals get stuck in email. The result is late payroll, invoicing disputes, and no single source of truth for hours worked.

This prototype demonstrates a unified Timekeeping & Attendance platform that:

• Captures time in one place with geofenced punch-in for W-2 employees and weekly grids for consultants.

• Routes every timesheet through a configurable approval chain (internal ops → client manager) with email quick-approve.

• Syncs approved hours into Avionté for payroll and invoicing.

The build is a mock-data desktop prototype intended for the Thursday client meeting — no real backend, GPS, or Avionté connection yet. All flows and screens shown here are clickable in the live app.

Four primary personas were identified in the Jul 13 discovery call and drive the four dashboards in the prototype.

• Mock-only for now — no real auth, no real GPS, no live Avionté API. Every seed is deterministic so the demo is repeatable.

• Desktop-first — the prototype is optimised for a client meeting on a laptop; a native mobile app is a Phase-2 conversation.

• Avionté-shaped data — placements, pay/bill rates, and sync logs use Avionté field names so the eventual integration is a one-to-one mapping.

• Approvals are the product — the fastest path from clock-out to payroll wins the deal. Everything else supports that flow.

The prototype has one landing route that switches into four role-scoped areas.

The visual language is intentionally understated — a professional operations tool, not a marketing site. All UI is composed from a small set of shared primitives so every page looks like it belongs in the same product.

• Palette: Noor blue (`noor-600` / `noor-700`) as the primary; slate for text; emerald/amber/red for state.

• Typography: system UI stack with a strong bold weight for headings and page titles.

• Primitives: `PageHeader`, `StatCard`, `FilterBar`, `AvatarInitials`, `StatusBadge`, `ApprovalStepper`, `DetailDrawer`.

• Layout: fixed left sidebar (`AppShell`) with role-specific navigation; every screen uses the same page header + card grid.

The admin area is the internal source of truth. It shows every worker, every timesheet, every exception, and owns the final push to Avionté.

Two variants of the same shell — employees clock in and out with geofence enforcement; consultants enter weekly hour grids. Both see their own placement details, adjustment history, and PTO / accrual where applicable.

The employee timesheet includes a live geofence simulation: toggling 'Outside Geofence' disables the clock-in button and triggers a blocking modal, mirroring the hard-block policy Noor asked for.

The client portal is deliberately narrow — it only shows what a client manager needs to approve time and understand their spend. No worker PII beyond what's already in the placement, no billing rate details.

A 6-week hours & spend trend chart, an on-shift worker feed, a bulk approval queue, and an email-quick-approve preview cover the demo conversation.

• Time capture → Approval → Sync: worker submits, internal ops reviews, client approves, Avionté sync runs.

• Dynamic approval chain: each placement carries an `approvers[]` list. The `ApprovalStepper` renders that list live, so different placements can require different sign-offs.

• Adjustments: any change to a submitted entry (e.g. 8h → 6h) creates an audit row with actor, timestamp, and reason.

• Exceptions: geofence violations and pending adjustments are surfaced on the admin dashboard and in the exceptions view.

• Bottleneck view: the approval funnel shows how long entries wait at each stage so ops can see where the queue is stuck.

The mock data in `src/lib/mock-data.ts` and `src/lib/demo-data.ts` uses Avionté-shaped entities. Field names below are what a real integration would map to.

• Round 1 — Skeleton: four role dashboards, landing role picker, mock seed data, basic AppShell.

• Round 2 — Depth: page headers, stat cards, filter bar, detail drawer, activity feed, hours-by-day chart, payroll cutoff banner.

• Round 3 — Talent depth: tabbed detail drawer (Profile / Timesheets / Compliance / Notes), avatars, accrual history, sync history log.

• Round 4 — Client polish: 6-week trend chart, on-shift feed, email quick-approve preview.

• Round 5 — Spec gaps closed: geofence hard-block modal, dynamic approval stepper reading from `placement.approvers[]`, admin Live view, admin Funnel view, admin Roadmap / Business Doc (this page).

The prototype covers every discovery-call requirement that can be demonstrated without a real backend. The table below shows the state of each.

These are the items surfaced by the discovery call that are not in the current prototype. They are the menu for the Thursday scoping conversation.

• Tony to send Avionté API credentials and docs so integration can be scoped.

• Contracts to be reviewed before any production work.

• Separate personal check-in with Deris (missed the discovery call).

• Confirm which two or three 'Proposed' items become the next build cycle.

• Decide whether the mobile experience is a PWA or a native app.

Thumbnails of every screen captured in this document, in nav order.