Payroll Dashboard
Manage employee payroll, approve payments, and track disbursements.
Total Employees
10
Pending
4
Approved
3
Paid
3
Gross Pay
$103,200
Deductions
$25,800
Net Pay
$77,400
Payroll Status
Payroll by Department
Employee Payroll
| Employee | Department | Gross Pay | Deductions | Net Pay | Status | Actions |
|---|---|---|---|---|---|---|
SC Sarah Chen Senior Software Engineer | Engineering | $12,500 | -$3,125 | $9,375 | Paid | |
MJ Marcus Johnson Lead Product Designer | Design | $11,000 | -$2,750 | $8,250 | Approved | |
ER Emily Rodriguez Marketing Manager | Marketing | $9,500 | -$2,375 | $7,125 | Pending | |
JW James Wilson Account Executive | Sales | $8,000 | -$2,000 | $6,000 | Pending | |
AP Aisha Patel DevOps Engineer | Engineering | $11,500 | -$2,875 | $8,625 | Approved | |
DK David Kim Financial Analyst | Finance | $8,500 | -$2,125 | $6,375 | Paid | |
RT Rachel Thompson HR Business Partner | HR | $9,000 | -$2,250 | $6,750 | Pending | |
MB Michael Brown Frontend Developer | Engineering | $10,000 | -$2,500 | $7,500 | Approved | |
LW Lisa Wang UX Researcher | Design | $9,200 | -$2,300 | $6,900 | Paid | |
CL Christopher Lee Sales Director | Sales | $14,000 | -$3,500 | $10,500 | Pending |
About This Demo
This is the PayrollDashboard pattern from @freehold/ui. It demonstrates the composition of multiple primitives and composites:
- •StatCard - For displaying key metrics with optional trends
- •DataTable - A flexible table with sorting and rendering customization
- •SearchInput - Search field with clear button
- •FilterSelect - Dropdown for filtering data
- •Badge - Status indicators with semantic colors
- •Button - Multiple variants for different actions
- •Card - Container with elevated and bordered variants
import { PayrollDashboard } from '@freehold/ui'