{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "contractor-timesheet-approval", "title": "Contractor Timesheet Approval", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/contractor-timesheet-approval/ContractorTimesheetApproval.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport {\n Calendar,\n Check,\n CheckCheck,\n CheckCircle2,\n Clock,\n FileSpreadsheet,\n Globe,\n RotateCcw,\n Search,\n} from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent } from '@/components/ui/card'\nimport { Separator } from '@/components/ui/separator'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\nimport { TimesheetDetailSheet } from './TimesheetDetailSheet'\nimport { TimesheetKpiCards } from './TimesheetKpiCards'\nimport { TimesheetTableRow } from './TimesheetTableRow'\nimport type { ApprovalStatus, ContractorSubmission, DailyTimesheetEntry, DeliverableType } from './timesheet-types'\nimport { initialSubmissions } from './timesheet-data'\n\nexport type { ApprovalStatus, ContractorSubmission, DailyTimesheetEntry, DeliverableType }\n\nexport interface ContractorTimesheetApprovalProps {\n title?: string\n subtitle?: string\n payCycle?: string\n initialData?: ContractorSubmission[]\n className?: string\n}\n\nfunction formatUsd(val: number): string {\n return new Intl.NumberFormat('en-US', {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n maximumFractionDigits: 2,\n }).format(val)\n}\n\nfunction formatLocal(val: number, currencyCode: string, currencySymbol: string): string {\n if (currencyCode === 'JPY') {\n return `${currencySymbol}${new Intl.NumberFormat('ja-JP').format(val)}`\n }\n return `${currencySymbol}${new Intl.NumberFormat('en-US', {\n minimumFractionDigits: 2,\n maximumFractionDigits: 2,\n }).format(val)} ${currencyCode}`\n}\n\nexport function ContractorTimesheetApproval({\n title = 'Contractor Invoices & Timesheets',\n subtitle = 'Review international contractor hours, verify commit logs & deliverables, and execute multi-currency invoice approvals.',\n payCycle = 'August 2026 · Bi-Weekly #2',\n initialData = initialSubmissions,\n className,\n}: ContractorTimesheetApprovalProps) {\n const [submissions, setSubmissions] = React.useState(initialData)\n const [searchQuery, setSearchQuery] = React.useState('')\n const [selectedStatus, setSelectedStatus] = React.useState<'all' | 'pending' | 'approved' | 'disputed'>('all')\n const [currencyDisplay, setCurrencyDisplay] = React.useState<'both' | 'usd' | 'local'>('both')\n const [selectedContractorId, setSelectedContractorId] = React.useState(null)\n const [isDrawerOpen, setIsDrawerOpen] = React.useState(false)\n const [isApprovingAll, setIsApprovingAll] = React.useState(false)\n const [bulkApprovalDone, setBulkApprovalDone] = React.useState(false)\n\n const pendingSubmissions = React.useMemo(() => submissions.filter((s) => s.status === 'pending'), [submissions])\n const pendingCount = pendingSubmissions.length\n const pendingAmountUsd = React.useMemo(\n () => pendingSubmissions.reduce((acc, curr) => acc + curr.grossAmountUsd, 0),\n [pendingSubmissions],\n )\n\n const approvedSubmissions = React.useMemo(() => submissions.filter((s) => s.status === 'approved'), [submissions])\n const approvedCount = approvedSubmissions.length\n\n const disputedSubmissions = React.useMemo(() => submissions.filter((s) => s.status === 'disputed'), [submissions])\n const disputedCount = disputedSubmissions.length\n\n const totalHoursLogged = React.useMemo(\n () => submissions.reduce((acc, curr) => acc + curr.hoursLogged, 0),\n [submissions],\n )\n\n const scheduledPayoutsTotal = 42800.0\n\n const filteredSubmissions = React.useMemo(() => {\n return submissions.filter((item) => {\n const matchesStatus = selectedStatus === 'all' ? true : item.status === selectedStatus\n const query = searchQuery.trim().toLowerCase()\n if (!query) return matchesStatus\n\n const matchesSearch =\n item.name.toLowerCase().includes(query) ||\n item.role.toLowerCase().includes(query) ||\n item.country.toLowerCase().includes(query) ||\n item.city.toLowerCase().includes(query) ||\n item.invoiceNumber.toLowerCase().includes(query) ||\n item.verificationBadge.label.toLowerCase().includes(query)\n\n return matchesStatus && matchesSearch\n })\n }, [submissions, selectedStatus, searchQuery])\n\n const selectedContractor = React.useMemo(\n () => submissions.find((c) => c.id === selectedContractorId),\n [submissions, selectedContractorId],\n )\n\n const openDrawer = (contractor: ContractorSubmission) => {\n setSelectedContractorId(contractor.id)\n setIsDrawerOpen(true)\n }\n\n const approveInvoice = (id: string) => {\n setSubmissions((prev) => prev.map((item) => (item.id === id ? { ...item, status: 'approved' } : item)))\n }\n\n const disputeInvoice = (id: string) => {\n setSubmissions((prev) => prev.map((item) => (item.id === id ? { ...item, status: 'disputed' } : item)))\n }\n\n const handleApproveDrawer = () => {\n if (selectedContractorId) approveInvoice(selectedContractorId)\n setIsDrawerOpen(false)\n }\n\n const handleDisputeDrawer = () => {\n if (selectedContractorId) disputeInvoice(selectedContractorId)\n setIsDrawerOpen(false)\n }\n\n const approveAllPending = () => {\n if (pendingCount === 0) return\n setIsApprovingAll(true)\n setTimeout(() => {\n setSubmissions((prev) => prev.map((item) => (item.status === 'pending' ? { ...item, status: 'approved' } : item)))\n setIsApprovingAll(false)\n setBulkApprovalDone(true)\n setTimeout(() => {\n setBulkApprovalDone(false)\n }, 3000)\n }, 400)\n }\n\n const resetData = () => {\n setSubmissions(JSON.parse(JSON.stringify(initialData)))\n setSelectedStatus('all')\n setSearchQuery('')\n setBulkApprovalDone(false)\n }\n\n return (\n
\n {/* Header Section */}\n
\n
\n
\n \n \n Global Workforce · HRMS\n \n
\n \n Pay Cycle:\n {payCycle}\n
\n {pendingCount > 0 ? (\n \n \n {pendingCount} Invoices Pending Review\n \n ) : (\n \n \n All Invoices Reviewed\n \n )}\n
\n

{title}

\n

{subtitle}

\n
\n\n {/* Action Buttons */}\n
\n \n \n Reset Demo\n \n\n \n {isApprovingAll ? (\n <>\n \n Processing Batch...\n \n ) : bulkApprovalDone ? (\n <>\n \n Batch Approved!\n \n ) : (\n <>\n \n Approve All Pending ({formatUsd(pendingAmountUsd)})\n \n )}\n \n
\n
\n\n {/* 4 Billing Overview KPI Cards */}\n \n\n {/* Filter Toolbar */}\n \n \n
\n {/* Search input */}\n
\n \n setSearchQuery(e.target.value)}\n type=\"text\"\n placeholder=\"Search contractor, role, country, or PR...\"\n className=\"border-input bg-background text-foreground placeholder:text-muted-foreground focus-visible:ring-ring w-full rounded-md border py-1.5 pr-3 pl-9 text-xs focus-visible:ring-2 focus-visible:outline-hidden\"\n />\n
\n\n {/* Filter buttons & Currency Toggle */}\n
\n {/* Status filter tabs */}\n
\n setSelectedStatus('all')}\n >\n All ({submissions.length})\n \n setSelectedStatus('pending')}\n >\n Pending ({pendingCount})\n \n setSelectedStatus('approved')}\n >\n Approved ({approvedCount})\n \n setSelectedStatus('disputed')}\n >\n Disputed ({disputedCount})\n \n
\n\n \n\n {/* Currency toggle selector */}\n
\n setCurrencyDisplay('both')}\n >\n Dual FX\n \n setCurrencyDisplay('usd')}\n >\n USD ($)\n \n setCurrencyDisplay('local')}\n >\n Local\n \n
\n
\n
\n \n \n\n {/* Contractor Invoices & Timesheets Table */}\n \n
\n \n \n \n \n Contractor & Location\n \n \n Role & Rate\n \n \n Hours Logged\n \n \n Invoice Gross Amount\n \n \n Timesheet Verification\n \n \n Status\n \n \n Actions\n \n \n \n \n {filteredSubmissions.length > 0 ? (\n filteredSubmissions.map((contractor) => (\n \n ))\n ) : (\n \n \n
\n \n

No invoices match your filter

\n

\n Try adjusting your search query or switching the status filter tab.\n

\n
\n \n \n )}\n \n
\n
\n \n\n {/* Timesheet Detail Drawer / Slide-Over Component */}\n \n
\n )\n}\n", "type": "registry:block", "target": "~/components/blocks/ContractorTimesheetApproval.tsx" }, { "path": "packages/registry-react/blocks/contractor-timesheet-approval/TimesheetDetailSheet.tsx", "content": "'use client'\n\nimport { Check, CheckCircle2, FileCheck, FileCode, GitPullRequest, ShieldCheck, XCircle } from 'lucide-react'\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport {\n Sheet,\n SheetClose,\n SheetContent,\n SheetDescription,\n SheetFooter,\n SheetHeader,\n SheetTitle,\n} from '@/components/ui/sheet'\nimport type { ContractorSubmission } from './timesheet-types'\n\nexport interface TimesheetDetailSheetProps {\n open: boolean\n onOpenChange: (open: boolean) => void\n selectedContractor: ContractorSubmission | undefined\n formatUsd: (val: number) => string\n formatLocal: (val: number, currencyCode: string, currencySymbol: string) => string\n onApprove?: () => void\n onDispute?: () => void\n onApproveInvoice?: (id: string) => void\n onDisputeInvoice?: (id: string) => void\n}\n\nexport function TimesheetDetailSheet({\n open,\n onOpenChange,\n selectedContractor,\n formatUsd,\n formatLocal,\n onApprove,\n onDispute,\n onApproveInvoice,\n onDisputeInvoice,\n}: TimesheetDetailSheetProps) {\n return (\n \n \n {selectedContractor && (\n <>\n {/* Drawer Header */}\n \n
\n
\n \n \n {selectedContractor.initials}\n \n \n
\n
\n {selectedContractor.name}\n \n {selectedContractor.flag}\n \n
\n \n {selectedContractor.role} · {selectedContractor.city}\n \n
\n
\n\n {/* Status Badge in Header */}\n {selectedContractor.status === 'pending' ? (\n \n \n Pending Review\n \n ) : selectedContractor.status === 'approved' ? (\n \n \n Approved\n \n ) : (\n \n \n Disputed\n \n )}\n
\n\n {/* Header Quick Stats Grid */}\n
\n
\n Invoice Gross\n \n {formatUsd(selectedContractor.grossAmountUsd)}\n \n \n {formatLocal(\n selectedContractor.grossAmountLocal,\n selectedContractor.currencyCode,\n selectedContractor.currencySymbol,\n )}\n \n
\n
\n Total Hours\n \n {selectedContractor.hoursLogged.toFixed(1)} hrs\n \n \n {selectedContractor.regularHours.toFixed(0)}h reg · {selectedContractor.overtimeHours.toFixed(0)}h\n ot\n \n
\n
\n Contract Rate\n \n {formatUsd(selectedContractor.hourlyRateUsd)}/hr\n \n \n {selectedContractor.taxCompliance.jurisdiction}\n \n
\n
\n \n\n {/* Drawer Body: Timesheet Breakdown */}\n
\n {/* Verification Callout Banner */}\n
\n \n
\n

{selectedContractor.verificationBadge.label}

\n

\n {selectedContractor.verificationBadge.subtext}. Automated hash verification confirmed timestamps\n match developer activity during the billing window.\n

\n
\n
\n\n {/* Daily Task Itemization */}\n
\n
\n

\n Daily Itemized Activity Log ({selectedContractor.dailyEntries.length} Work Days)\n

\n {selectedContractor.payPeriod}\n
\n\n
\n {selectedContractor.dailyEntries.map((entry) => (\n \n
\n
\n {entry.day}\n \n {entry.date}\n \n
\n
\n \n {entry.hours.toFixed(1)} hrs\n \n \n ({formatUsd(entry.hours * selectedContractor.hourlyRateUsd)})\n \n
\n
\n\n

{entry.task}

\n\n {/* Linked Deliverables (PR / Commit / Figma / CI) */}\n
\n
\n {entry.deliverableType === 'github_pr' ? (\n <>\n \n {entry.referenceId}\n ({entry.referenceLabel})\n {entry.commitCount && (\n · {entry.commitCount} commits\n )}\n \n ) : entry.deliverableType === 'figma' ? (\n <>\n \n {entry.referenceId}\n ({entry.referenceLabel})\n \n ) : (\n <>\n \n {entry.referenceId}\n ({entry.referenceLabel})\n \n )}\n
\n\n \n \n Verified\n \n
\n
\n ))}\n
\n
\n\n {/* Tax & Bank Payout Compliance Box */}\n
\n

\n \n Compliance & Disbursement Routing\n

\n
\n
\n Tax Form Status:\n \n Form W-8BEN ({selectedContractor.taxCompliance.w8benStatus.toUpperCase()})\n \n \n {selectedContractor.taxCompliance.taxIdMasked}\n \n
\n
\n Disbursement Route:\n {selectedContractor.paymentMethod.type} Payout\n \n {selectedContractor.paymentMethod.bankName}\n \n
\n
\n
\n \n\n {/* Drawer Footer Actions */}\n \n \n \n \n\n
\n {selectedContractor.status !== 'disputed' && (\n {\n if (onDispute) onDispute()\n else if (onDisputeInvoice) onDisputeInvoice(selectedContractor.id)\n onOpenChange(false)\n }}\n >\n \n Dispute Invoice\n \n )}\n\n {selectedContractor.status !== 'approved' ? (\n {\n if (onApprove) onApprove()\n else if (onApproveInvoice) onApproveInvoice(selectedContractor.id)\n onOpenChange(false)\n }}\n >\n \n Approve ({formatUsd(selectedContractor.grossAmountUsd)})\n \n ) : (\n \n \n Approved & Queued\n \n )}\n
\n \n \n )}\n \n \n )\n}\n", "type": "registry:block", "target": "~/components/blocks/TimesheetDetailSheet.tsx" }, { "path": "packages/registry-react/blocks/contractor-timesheet-approval/TimesheetKpiCards.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport { Clock, ShieldCheck, Timer, Users } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'\n\nexport interface TimesheetKpiCardsProps {\n pendingAmountUsd: number\n pendingCount: number\n totalHoursLogged: number\n scheduledPayoutsTotal: number\n formatUsd: (val: number) => string\n className?: string\n}\n\nexport function TimesheetKpiCards({\n pendingAmountUsd,\n pendingCount,\n totalHoursLogged,\n scheduledPayoutsTotal,\n formatUsd,\n className,\n}: TimesheetKpiCardsProps) {\n return (\n
\n {/* Card 1: Pending Approval Amount */}\n \n \n Pending Approval Amount \n
\n \n
\n \n \n
\n {formatUsd(pendingAmountUsd)}\n
\n

\n {pendingCount} invoices{' '}\n awaiting your approval\n

\n
\n \n £3,800 · ¥810k · R$41k\n \n
\n \n \n\n {/* Card 2: Total Contractor Hours */}\n \n \n Total Contractor Hours \n
\n \n
\n \n \n
\n {totalHoursLogged.toFixed(1)} hrs\n
\n

\n 160.0 regular · 80.0 overtime / project\n

\n
\n \n 100% Timesheets submitted\n \n
\n \n \n\n {/* Card 3: Approved & Scheduled Payouts */}\n \n \n Approved & Scheduled \n
\n \n
\n \n \n
\n {formatUsd(scheduledPayoutsTotal)}\n
\n

\n 5 invoices \n batched for Aug 25 payout\n

\n
\n \n Direct SEPA · ACH · SWIFT\n \n
\n \n \n\n {/* Card 4: Active International Contractors */}\n \n \n Active Contractors \n
\n \n
\n \n \n
8 Contractors
\n

Across 5 countries (UK, JP, BR, FR, CA)

\n
\n \n 100% W-8BEN Tax Valid\n \n
\n \n \n
\n )\n}\n", "type": "registry:block", "target": "~/components/blocks/TimesheetKpiCards.tsx" }, { "path": "packages/registry-react/blocks/contractor-timesheet-approval/TimesheetTableRow.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport {\n AlertCircle,\n Check,\n CheckCircle2,\n Download,\n Eye,\n FileText,\n MoreHorizontal,\n ShieldCheck,\n XCircle,\n} from 'lucide-react'\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu'\nimport { TableCell, TableRow } from '@/components/ui/table'\nimport type { ContractorSubmission } from './timesheet-types'\n\nexport interface TimesheetTableRowProps {\n contractor: ContractorSubmission\n currencyDisplay: 'both' | 'usd' | 'local'\n formatUsd: (val: number) => string\n formatLocal: (val: number, currencyCode: string, currencySymbol: string) => string\n onOpenDrawer: (contractor: ContractorSubmission) => void\n onApproveInvoice: (id: string) => void\n onDisputeInvoice: (id: string) => void\n}\n\nexport function TimesheetTableRow({\n contractor,\n currencyDisplay,\n formatUsd,\n formatLocal,\n onOpenDrawer,\n onApproveInvoice,\n onDisputeInvoice,\n}: TimesheetTableRowProps) {\n return (\n \n {/* Contractor & Location */}\n \n
\n \n \n {{ contractor: contractor.initials }.contractor}\n \n \n
\n
\n onOpenDrawer(contractor)}\n >\n {contractor.name}\n \n \n {contractor.flag}\n \n
\n

\n {contractor.city}\n •\n {contractor.invoiceNumber}\n

\n
\n
\n \n\n {/* Role & Rate */}\n \n
\n

{contractor.role}

\n

\n {formatUsd(contractor.hourlyRateUsd)}/hr{' '}\n \n ({formatLocal(contractor.hourlyRateLocal, contractor.currencyCode, contractor.currencySymbol)}/hr)\n \n

\n
\n \n\n {/* Hours Logged */}\n \n
\n
\n \n {contractor.hoursLogged.toFixed(1)} hrs\n \n
\n
\n {contractor.regularHours.toFixed(0)}h reg\n {contractor.overtimeHours > 0 && (\n <>\n +\n {contractor.overtimeHours.toFixed(0)}h ot\n \n )}\n
\n
\n \n\n {/* Invoice Gross (Local & USD) */}\n \n
\n {currencyDisplay === 'both' ? (\n <>\n
\n \n {formatUsd(contractor.grossAmountUsd)}\n \n USD\n
\n

\n {formatLocal(contractor.grossAmountLocal, contractor.currencyCode, contractor.currencySymbol)}{' '}\n (FX: {contractor.fxRate.toFixed(4)})\n

\n \n ) : currencyDisplay === 'usd' ? (\n <>\n
\n {formatUsd(contractor.grossAmountUsd)} USD\n
\n

\n Rate: {formatUsd(contractor.hourlyRateUsd)}/hr\n

\n \n ) : (\n <>\n
\n {formatLocal(contractor.grossAmountLocal, contractor.currencyCode, contractor.currencySymbol)}\n
\n

\n Conv: {formatUsd(contractor.grossAmountUsd)} USD\n

\n \n )}\n
\n \n\n {/* Timesheet Verification Status */}\n \n
\n \n \n {contractor.verificationBadge.label}\n \n \n {contractor.verificationBadge.subtext}\n

\n
\n \n\n {/* Approval Status */}\n \n {contractor.status === 'pending' ? (\n \n \n Pending Review\n \n ) : contractor.status === 'approved' ? (\n \n \n Approved\n \n ) : (\n \n \n Disputed\n \n )}\n \n\n {/* Action Buttons */}\n \n
\n onOpenDrawer(contractor)}\n >\n \n Timesheet\n \n\n {contractor.status === 'pending' && (\n onApproveInvoice(contractor.id)}\n >\n \n Approve\n \n )}\n\n {/* Dropdown Menu for Secondary Actions */}\n \n \n \n \n \n \n Invoice {contractor.invoiceNumber}\n \n onOpenDrawer(contractor)}>\n \n Itemized Timesheet\n \n {contractor.status !== 'approved' && (\n onApproveInvoice(contractor.id)}\n >\n \n Approve Invoice\n \n )}\n {contractor.status !== 'disputed' && (\n onDisputeInvoice(contractor.id)}\n >\n \n Dispute / Reject\n \n )}\n \n \n \n Download Invoice PDF\n \n \n \n View W-8BEN Form\n \n \n \n
\n \n \n )\n}\n", "type": "registry:block", "target": "~/components/blocks/TimesheetTableRow.tsx" }, { "path": "packages/registry-react/blocks/contractor-timesheet-approval/timesheet-types.ts", "content": "export type ApprovalStatus = 'pending' | 'approved' | 'disputed'\nexport type DeliverableType = 'github_pr' | 'figma' | 'ci_pipeline' | 'code_review'\n\nexport interface DailyTimesheetEntry {\n id: string\n date: string\n day: string\n hours: number\n regularHours: number\n overtimeHours: number\n task: string\n deliverableType: DeliverableType\n referenceId: string\n referenceLabel: string\n commitCount?: number\n verified: boolean\n}\n\nexport interface ContractorSubmission {\n id: string\n name: string\n initials: string\n avatarUrl?: string\n role: string\n country: string\n countryCode: string\n flag: string\n city: string\n contractType: string\n hourlyRateUsd: number\n hourlyRateLocal: number\n currencyCode: string\n currencySymbol: string\n fxRate: number\n hoursLogged: number\n regularHours: number\n overtimeHours: number\n grossAmountLocal: number\n grossAmountUsd: number\n verificationBadge: {\n label: string\n subtext: string\n status: 'verified' | 'manual'\n }\n status: ApprovalStatus\n invoiceNumber: string\n submittedAt: string\n payPeriod: string\n taxCompliance: {\n w8benStatus: 'valid' | 'pending' | 'exempt'\n taxIdMasked: string\n jurisdiction: string\n }\n paymentMethod: {\n type: 'SWIFT' | 'SEPA' | 'Local Wire' | 'ACH'\n accountMasked: string\n bankName: string\n }\n dailyEntries: DailyTimesheetEntry[]\n}\n", "type": "registry:block", "target": "~/components/blocks/timesheet-types.ts" }, { "path": "packages/registry-react/blocks/contractor-timesheet-approval/timesheet-data.ts", "content": "import type { ContractorSubmission } from './timesheet-types'\n\nexport const initialSubmissions: ContractorSubmission[] = [\n {\n id: 'ctr-1',\n name: \"Liam O'Connor\",\n initials: 'LO',\n role: 'Senior React Engineer',\n country: 'United Kingdom',\n countryCode: 'GB',\n flag: '🇬🇧',\n city: 'London, UK',\n contractType: 'Hourly Contract · $97.00/hr',\n hourlyRateUsd: 97.0,\n hourlyRateLocal: 76.0,\n currencyCode: 'GBP',\n currencySymbol: '£',\n fxRate: 1.2763,\n hoursLogged: 50.0,\n regularHours: 40.0,\n overtimeHours: 10.0,\n grossAmountLocal: 3800.0,\n grossAmountUsd: 4850.0,\n verificationBadge: {\n label: 'Verified with GitHub PRs',\n subtext: '14 PRs merged · 46 verified commits',\n status: 'verified',\n },\n status: 'pending',\n invoiceNumber: 'INV-2026-UK-0841',\n submittedAt: 'Aug 21, 2026 · 17:45 UTC',\n payPeriod: 'Aug 08 – Aug 21, 2026',\n taxCompliance: {\n w8benStatus: 'valid',\n taxIdMasked: 'GB-UTR ••••••8912',\n jurisdiction: 'HMRC UK (Non-US Source)',\n },\n paymentMethod: {\n type: 'SWIFT',\n accountMasked: 'Barclays •••• 4421',\n bankName: 'Barclays Bank UK PLC',\n },\n dailyEntries: [\n {\n id: 'entry-1-1',\n date: '2026-08-17',\n day: 'Mon, Aug 17',\n hours: 10.0,\n regularHours: 8.0,\n overtimeHours: 2.0,\n task: 'Refactoring OKLCH Color Engine & AST Parser for sub-theme resolution',\n deliverableType: 'github_pr',\n referenceId: 'PR #412',\n referenceLabel: 'feature/v4-ast-parser',\n commitCount: 12,\n verified: true,\n },\n {\n id: 'entry-1-2',\n date: '2026-08-18',\n day: 'Tue, Aug 18',\n hours: 10.0,\n regularHours: 8.0,\n overtimeHours: 2.0,\n task: 'SSR Hydration Mismatch Resolver for cross-framework Island Architectures',\n deliverableType: 'github_pr',\n referenceId: 'PR #415',\n referenceLabel: 'fix/island-hydration',\n commitCount: 8,\n verified: true,\n },\n {\n id: 'entry-1-3',\n date: '2026-08-19',\n day: 'Wed, Aug 19',\n hours: 10.0,\n regularHours: 8.0,\n overtimeHours: 2.0,\n task: 'Design token runtime compilation and memoized theme class cache',\n deliverableType: 'github_pr',\n referenceId: 'PR #418',\n referenceLabel: 'perf/token-runtime',\n commitCount: 7,\n verified: true,\n },\n {\n id: 'entry-1-4',\n date: '2026-08-20',\n day: 'Thu, Aug 20',\n hours: 10.0,\n regularHours: 8.0,\n overtimeHours: 2.0,\n task: 'Figma token sync GitHub Action workflow optimization and schema tests',\n deliverableType: 'github_pr',\n referenceId: 'PR #419',\n referenceLabel: 'ci/figma-token-sync',\n commitCount: 9,\n verified: true,\n },\n {\n id: 'entry-1-5',\n date: '2026-08-21',\n day: 'Fri, Aug 21',\n hours: 10.0,\n regularHours: 8.0,\n overtimeHours: 2.0,\n task: 'Reka UI combobox accessible keyboard navigation bridge and focus ring parity',\n deliverableType: 'github_pr',\n referenceId: 'PR #423',\n referenceLabel: 'feat/reka-combobox-a11y',\n commitCount: 10,\n verified: true,\n },\n ],\n },\n {\n id: 'ctr-2',\n name: 'Yuki Tanaka',\n initials: 'YT',\n role: 'UI/UX Designer',\n country: 'Japan',\n countryCode: 'JP',\n flag: '🇯🇵',\n city: 'Tokyo, JP',\n contractType: 'Hourly Contract · $90.00/hr',\n hourlyRateUsd: 90.0,\n hourlyRateLocal: 13500,\n currencyCode: 'JPY',\n currencySymbol: '¥',\n fxRate: 0.00667,\n hoursLogged: 60.0,\n regularHours: 40.0,\n overtimeHours: 20.0,\n grossAmountLocal: 810000,\n grossAmountUsd: 5400.0,\n verificationBadge: {\n label: 'Figma Files & Handoff Verified',\n subtext: '8 wireframes & design spec approved',\n status: 'verified',\n },\n status: 'pending',\n invoiceNumber: 'INV-2026-JP-0219',\n submittedAt: 'Aug 21, 2026 · 14:10 UTC',\n payPeriod: 'Aug 08 – Aug 21, 2026',\n taxCompliance: {\n w8benStatus: 'valid',\n taxIdMasked: 'JP-NTA ••••••4401',\n jurisdiction: 'National Tax Agency Japan',\n },\n paymentMethod: {\n type: 'Local Wire',\n accountMasked: 'MUFG •••• 9102',\n bankName: 'Mitsubishi UFJ Financial Group',\n },\n dailyEntries: [\n {\n id: 'entry-2-1',\n date: '2026-08-17',\n day: 'Mon, Aug 17',\n hours: 12.0,\n regularHours: 8.0,\n overtimeHours: 4.0,\n task: 'Enterprise Multi-currency Invoicing Flow User Journey Map & Edge Cases',\n deliverableType: 'figma',\n referenceId: 'Node #492:102',\n referenceLabel: 'figma.com/@uipkge/multi-currency-flow',\n commitCount: 6,\n verified: true,\n },\n {\n id: 'entry-2-2',\n date: '2026-08-18',\n day: 'Tue, Aug 18',\n hours: 12.0,\n regularHours: 8.0,\n overtimeHours: 4.0,\n task: 'Contractor Compliance Document Verification UX Specs & Empty States',\n deliverableType: 'figma',\n referenceId: 'Node #495:88',\n referenceLabel: 'figma.com/@uipkge/compliance-docs',\n commitCount: 5,\n verified: true,\n },\n {\n id: 'entry-2-3',\n date: '2026-08-19',\n day: 'Wed, Aug 19',\n hours: 12.0,\n regularHours: 8.0,\n overtimeHours: 4.0,\n task: 'Mobile responsive Timesheet approval breakpoints, drawers, and gesture specs',\n deliverableType: 'figma',\n referenceId: 'Node #501:14',\n referenceLabel: 'figma.com/@uipkge/mobile-timesheet',\n commitCount: 8,\n verified: true,\n },\n {\n id: 'entry-2-4',\n date: '2026-08-20',\n day: 'Thu, Aug 20',\n hours: 12.0,\n regularHours: 8.0,\n overtimeHours: 4.0,\n task: 'Interactive Design System Token Library for Dark/Light Themes & High-Contrast',\n deliverableType: 'figma',\n referenceId: 'Node #510:33',\n referenceLabel: 'figma.com/@uipkge/tokens-library',\n commitCount: 11,\n verified: true,\n },\n {\n id: 'entry-2-5',\n date: '2026-08-21',\n day: 'Fri, Aug 21',\n hours: 12.0,\n regularHours: 8.0,\n overtimeHours: 4.0,\n task: 'Usability testing session synthesis, prototype refinements, and engineering handoff',\n deliverableType: 'figma',\n referenceId: 'Node #514:02',\n referenceLabel: 'figma.com/@uipkge/handoff-v2',\n commitCount: 4,\n verified: true,\n },\n ],\n },\n {\n id: 'ctr-3',\n name: 'Mateo Silva',\n initials: 'MS',\n role: 'Go Backend Specialist',\n country: 'Brazil',\n countryCode: 'BR',\n flag: '🇧🇷',\n city: 'São Paulo, BR',\n contractType: 'Hourly Contract · $91.11/hr',\n hourlyRateUsd: 91.11,\n hourlyRateLocal: 455.55,\n currencyCode: 'BRL',\n currencySymbol: 'R$',\n fxRate: 0.2,\n hoursLogged: 90.0,\n regularHours: 40.0,\n overtimeHours: 50.0,\n grossAmountLocal: 41000.0,\n grossAmountUsd: 8200.0,\n verificationBadge: {\n label: 'Verified with GitHub PRs',\n subtext: 'Kafka partitioning & Redis idempotency engine',\n status: 'verified',\n },\n status: 'pending',\n invoiceNumber: 'INV-2026-BR-0572',\n submittedAt: 'Aug 21, 2026 · 19:20 UTC',\n payPeriod: 'Aug 08 – Aug 21, 2026',\n taxCompliance: {\n w8benStatus: 'valid',\n taxIdMasked: 'BR-CNPJ ••••••7100',\n jurisdiction: 'Receita Federal do Brasil',\n },\n paymentMethod: {\n type: 'SWIFT',\n accountMasked: 'Itaú Unibanco •••• 8831',\n bankName: 'Banco Itaú S.A.',\n },\n dailyEntries: [\n {\n id: 'entry-3-1',\n date: '2026-08-17',\n day: 'Mon, Aug 17',\n hours: 18.0,\n regularHours: 8.0,\n overtimeHours: 10.0,\n task: 'Distributed transaction saga orchestrator for multi-currency payout reconciliation',\n deliverableType: 'github_pr',\n referenceId: 'PR #289',\n referenceLabel: 'feat/saga-orchestrator',\n commitCount: 15,\n verified: true,\n },\n {\n id: 'entry-3-2',\n date: '2026-08-18',\n day: 'Tue, Aug 18',\n hours: 18.0,\n regularHours: 8.0,\n overtimeHours: 10.0,\n task: 'Zero-downtime PostgreSQL table partitioning for timesheet audit logs & retention',\n deliverableType: 'github_pr',\n referenceId: 'PR #294',\n referenceLabel: 'db/pg-partitioning',\n commitCount: 7,\n verified: true,\n },\n {\n id: 'entry-3-3',\n date: '2026-08-19',\n day: 'Wed, Aug 19',\n hours: 18.0,\n regularHours: 8.0,\n overtimeHours: 10.0,\n task: 'Webhook delivery retry backoff with Kafka dead-letter queue & idempotency keys',\n deliverableType: 'github_pr',\n referenceId: 'PR #298',\n referenceLabel: 'feat/kafka-dlq-retries',\n commitCount: 19,\n verified: true,\n },\n {\n id: 'entry-3-4',\n date: '2026-08-20',\n day: 'Thu, Aug 20',\n hours: 18.0,\n regularHours: 8.0,\n overtimeHours: 10.0,\n task: 'Prometheus latency metric instrumentation & Grafana alert rules for payment workers',\n deliverableType: 'github_pr',\n referenceId: 'PR #302',\n referenceLabel: 'obs/prometheus-metrics',\n commitCount: 5,\n verified: true,\n },\n {\n id: 'entry-3-5',\n date: '2026-08-21',\n day: 'Fri, Aug 21',\n hours: 18.0,\n regularHours: 8.0,\n overtimeHours: 10.0,\n task: 'Payment gateway failover simulation & multi-region load testing at 25k req/s',\n deliverableType: 'github_pr',\n referenceId: 'PR #307',\n referenceLabel: 'test/gateway-failover',\n commitCount: 12,\n verified: true,\n },\n ],\n },\n {\n id: 'ctr-4',\n name: 'Chloe Dubois',\n initials: 'CD',\n role: 'QA Automation Lead',\n country: 'France',\n countryCode: 'FR',\n flag: '🇫🇷',\n city: 'Paris, FR',\n contractType: 'Hourly Contract · $92.00/hr',\n hourlyRateUsd: 92.0,\n hourlyRateLocal: 85.0,\n currencyCode: 'EUR',\n currencySymbol: '€',\n fxRate: 1.0824,\n hoursLogged: 40.0,\n regularHours: 40.0,\n overtimeHours: 0.0,\n grossAmountLocal: 3400.0,\n grossAmountUsd: 3680.0,\n verificationBadge: {\n label: 'Playwright E2E Suites 100% Pass',\n subtext: 'CI Run #8821 verified · 342 browser tests green',\n status: 'verified',\n },\n status: 'approved',\n invoiceNumber: 'INV-2026-FR-1108',\n submittedAt: 'Aug 20, 2026 · 16:30 UTC',\n payPeriod: 'Aug 08 – Aug 21, 2026',\n taxCompliance: {\n w8benStatus: 'valid',\n taxIdMasked: 'FR-SIRET ••••••3921',\n jurisdiction: 'DGFiP France (EU VAT Reg)',\n },\n paymentMethod: {\n type: 'SEPA',\n accountMasked: 'BNP Paribas •••• 5590',\n bankName: 'BNP Paribas S.A.',\n },\n dailyEntries: [\n {\n id: 'entry-4-1',\n date: '2026-08-17',\n day: 'Mon, Aug 17',\n hours: 8.0,\n regularHours: 8.0,\n overtimeHours: 0.0,\n task: 'Playwright end-to-end multi-currency payment checkout regression suite',\n deliverableType: 'ci_pipeline',\n referenceId: 'CI Run #8812',\n referenceLabel: 'e2e-checkout-matrix',\n commitCount: 8,\n verified: true,\n },\n {\n id: 'entry-4-2',\n date: '2026-08-18',\n day: 'Tue, Aug 18',\n hours: 8.0,\n regularHours: 8.0,\n overtimeHours: 0.0,\n task: 'Visual regression tests for dark mode and high-contrast accessibility across viewports',\n deliverableType: 'ci_pipeline',\n referenceId: 'CI Run #8815',\n referenceLabel: 'visual-regression-a11y',\n commitCount: 6,\n verified: true,\n },\n {\n id: 'entry-4-3',\n date: '2026-08-19',\n day: 'Wed, Aug 19',\n hours: 8.0,\n regularHours: 8.0,\n overtimeHours: 0.0,\n task: 'Automated timesheet submission stress testing & concurrent approval race conditions',\n deliverableType: 'ci_pipeline',\n referenceId: 'CI Run #8818',\n referenceLabel: 'load-timesheet-concurrency',\n commitCount: 14,\n verified: true,\n },\n {\n id: 'entry-4-4',\n date: '2026-08-20',\n day: 'Thu, Aug 20',\n hours: 8.0,\n regularHours: 8.0,\n overtimeHours: 0.0,\n task: 'Cross-browser matrix testing (Chromium, Firefox, WebKit) on macOS/Linux runners',\n deliverableType: 'ci_pipeline',\n referenceId: 'CI Run #8820',\n referenceLabel: 'cross-browser-ci',\n commitCount: 4,\n verified: true,\n },\n {\n id: 'entry-4-5',\n date: '2026-08-21',\n day: 'Fri, Aug 21',\n hours: 8.0,\n regularHours: 8.0,\n overtimeHours: 0.0,\n task: 'CI test sharding optimization reducing full regression duration from 18m to 3m 12s',\n deliverableType: 'ci_pipeline',\n referenceId: 'CI Run #8821',\n referenceLabel: 'ci-sharding-speedup',\n commitCount: 5,\n verified: true,\n },\n ],\n },\n]\n", "type": "registry:block", "target": "~/components/blocks/timesheet-data.ts" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/react/avatar.json", "https://uipkge.dev/r/react/badge.json", "https://uipkge.dev/r/react/button.json", "https://uipkge.dev/r/react/card.json", "https://uipkge.dev/r/react/dropdown-menu.json", "https://uipkge.dev/r/react/separator.json", "https://uipkge.dev/r/react/sheet.json", "https://uipkge.dev/r/react/table.json" ], "description": "Deel/Remote style international contractor invoice approval, hourly timesheet verification against GitHub PRs & deliverables, multi-currency payout calculation, overview KPI metrics, and itemized daily timesheet slide-over drawer.", "categories": [ "finance", "app", "billing", "productivity" ] }