Skip to content

feat(payroll): build payout history table with search and responsive …#458

Merged
codeZe-us merged 2 commits into
SafeVault:devfrom
raymondjoseph02:feat/payroll-payout-history-table
Apr 28, 2026
Merged

feat(payroll): build payout history table with search and responsive …#458
codeZe-us merged 2 commits into
SafeVault:devfrom
raymondjoseph02:feat/payroll-payout-history-table

Conversation

@raymondjoseph02
Copy link
Copy Markdown
Contributor

Summary

Implements the Payout History tab on the Payroll page to match the Figma design.

Changes

  • PayoutHistory.tsx — full rewrite with correct data shape and layout
    • 8 mock payroll records (employee name, role, contract type, amount, paidIn, timestamp)
    • Reuses existing Table, TableHeader, TableContent, UsdtIcon, EmptyState components
    • Contract type badges: Fixed rate / Pay as you go → purple, Milestone → green

Desktop

Full table with columns: checkbox, Employee (initials avatar + name + role), Contract type, Amount, Paid in (USDT pill), Timestamp

Mobile

Card layout per row — no horizontal scroll:

  • Name (bold) left, contract type badge right
  • $amount | USDT | timestamp on second line

screenShots

image image image image

Features

  • Real-time search by employee name
  • Filter icon button (non-functional, UI only)
  • Skeleton loading placeholders (800ms)
  • Empty state for no results / no data

Testing

  • Desktop table renders all 8 rows
  • Search filters rows in real time
  • No horizontal overflow on mobile
  • Skeleton shows on initial load
  • Empty state shows when search has no match

Close #444

…layout

- Replace invoice-style mock data with payroll records (employee, contractType, amount, paidIn, timestamp)
- Add 8 static mock rows matching design
- Desktop: full table with avatar+initials, contract type badge, USDT pill, timestamp
- Mobile: compact card — name + badge top row, amount | USDT | timestamp below
- Real-time search filter by employee name
- Filter icon button (UI only)
- 800ms loading skeleton before table renders
- Empty state via existing EmptyState component
@vercel
Copy link
Copy Markdown

vercel Bot commented Apr 27, 2026

@raymondjoseph02 is attempting to deploy a commit to the vestroll's projects Team on Vercel.

A member of the Team first needs to authorize it.

@raymondjoseph02 raymondjoseph02 deleted the feat/payroll-payout-history-table branch April 27, 2026 18:15
@raymondjoseph02 raymondjoseph02 restored the feat/payroll-payout-history-table branch April 27, 2026 18:16
@raymondjoseph02 raymondjoseph02 changed the base branch from main to dev April 28, 2026 08:34
@codeZe-us codeZe-us self-requested a review April 28, 2026 12:20
@codeZe-us codeZe-us merged commit 66c47ef into SafeVault:dev Apr 28, 2026
2 of 3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Build Payroll History Tab UI

2 participants