{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "contractor-timesheet-approval", "title": "Contractor Timesheet Approval", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/contractor-timesheet-approval/contractor-timesheet-approval.component.ts", "content": "// Deel/Remote style international contractor invoice approval, hourly timesheet verification\n// against GitHub PRs & deliverables, multi-currency payout calculation, overview KPI metrics,\n// and itemized daily timesheet slide-over drawer. Port of the Vue/React block 1:1.\nimport { ChangeDetectionStrategy, Component, DestroyRef, Input, computed, inject, signal } from '@angular/core'\nimport {\n Calendar,\n Check,\n CheckCheck,\n CheckCircle2,\n Clock,\n FileSpreadsheet,\n Globe,\n LucideAngularModule,\n RotateCcw,\n Search,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiCardComponent, UiCardContentComponent } from '@/ui/card/card.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\nimport {\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n} from '@/ui/table/table.component'\nimport { UiTimesheetDetailSheetComponent } from './timesheet-detail-sheet.component'\nimport { UiTimesheetKpiCardsComponent } from './timesheet-kpi-cards.component'\nimport { UiTimesheetTableRowComponent } from './timesheet-table-row.component'\nimport { initialSubmissions } from './timesheet-data'\nimport type { ApprovalStatus, ContractorSubmission, DailyTimesheetEntry, DeliverableType } from './timesheet-types'\n\nexport type { ApprovalStatus, ContractorSubmission, DailyTimesheetEntry, DeliverableType }\n\nexport type TimesheetStatusFilter = 'all' | 'pending' | 'approved' | 'disputed'\nexport type CurrencyDisplay = 'both' | 'usd' | 'local'\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-contractor-timesheet-approval, [ui-contractor-timesheet-approval]',\n standalone: true,\n // The block renders its own root
: keep this wrapper out of the layout.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiSeparatorComponent,\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n UiTimesheetDetailSheetComponent,\n UiTimesheetKpiCardsComponent,\n UiTimesheetTableRowComponent,\n ],\n template: `\n
\n \n
\n
\n
\n \n \n Global Workforce · HRMS\n \n
\n \n Pay Cycle:\n {{ payCycle }}\n
\n @if (pendingCount() > 0) {\n \n \n {{ pendingCount() }} Invoices Pending Review\n \n } @else {\n \n \n All Invoices Reviewed\n \n }\n
\n

\n {{ title }}\n

\n

\n {{ subtitle }}\n

\n
\n\n \n
\n \n \n Reset Demo\n \n\n \n @if (isApprovingAll()) {\n \n Processing Batch...\n } @else if (bulkApprovalDone()) {\n \n Batch Approved!\n } @else {\n \n Approve All Pending ({{ formatUsd(pendingAmountUsd()) }})\n }\n \n
\n
\n\n \n \n\n \n
\n
\n
\n \n
\n \n \n
\n\n \n
\n \n
\n \n \n \n \n
\n\n \n\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n \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 @if (filteredSubmissions().length > 0) {\n @for (contractor of filteredSubmissions(); track contractor.id) {\n \n }\n } @else {\n \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})\nexport class UiContractorTimesheetApprovalComponent {\n protected readonly Calendar = Calendar\n protected readonly Check = Check\n protected readonly CheckCheck = CheckCheck\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly Clock = Clock\n protected readonly FileSpreadsheet = FileSpreadsheet\n protected readonly Globe = Globe\n protected readonly RotateCcw = RotateCcw\n protected readonly Search = Search\n\n @Input() title = 'Contractor Invoices & Timesheets'\n @Input() subtitle =\n 'Review international contractor hours, verify commit logs & deliverables, and execute multi-currency invoice approvals.'\n @Input() payCycle = 'August 2026 · Bi-Weekly #2'\n @Input() set initialData(v: ContractorSubmission[] | undefined) {\n if (v) this.submissions.set(structuredClone(v))\n }\n @Input('class') className?: string\n\n readonly submissions = signal(structuredClone(initialSubmissions))\n readonly searchQuery = signal('')\n readonly selectedStatus = signal('all')\n readonly currencyDisplay = signal('both')\n readonly selectedContractorId = signal(null)\n readonly isDrawerOpen = signal(false)\n readonly isApprovingAll = signal(false)\n readonly bulkApprovalDone = signal(false)\n\n private bulkDoneTimer: ReturnType | undefined\n private approveAllTimer: ReturnType | undefined\n\n constructor() {\n inject(DestroyRef).onDestroy(() => {\n clearTimeout(this.bulkDoneTimer)\n clearTimeout(this.approveAllTimer)\n })\n }\n\n readonly pendingSubmissions = computed(() => this.submissions().filter((s) => s.status === 'pending'))\n readonly pendingCount = computed(() => this.pendingSubmissions().length)\n readonly pendingAmountUsd = computed(() =>\n this.pendingSubmissions().reduce((acc, curr) => acc + curr.grossAmountUsd, 0),\n )\n\n readonly approvedSubmissions = computed(() => this.submissions().filter((s) => s.status === 'approved'))\n readonly approvedCount = computed(() => this.approvedSubmissions().length)\n\n readonly disputedCount = computed(() => this.submissions().filter((s) => s.status === 'disputed').length)\n\n readonly totalHoursLogged = computed(() => this.submissions().reduce((acc, curr) => acc + curr.hoursLogged, 0))\n\n readonly scheduledPayoutsTotal = computed(() => 42800.0)\n\n readonly filteredSubmissions = computed(() => {\n const status = this.selectedStatus()\n const query = this.searchQuery().trim().toLowerCase()\n return this.submissions().filter((item) => {\n const matchesStatus = status === 'all' ? true : item.status === status\n if (!query) return matchesStatus\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 return matchesStatus && matchesSearch\n })\n })\n\n readonly selectedContractor = computed(() => this.submissions().find((c) => c.id === this.selectedContractorId()))\n\n // Bound function references for the row + sheet inputs (same shape as the Vue function props).\n readonly formatUsdFn = (val: number): string => this.formatUsd(val)\n readonly formatLocalFn = (val: number, currencyCode: string, currencySymbol: string): string =>\n this.formatLocal(val, currencyCode, currencySymbol)\n\n get rootClass(): string {\n return cn('text-foreground w-full space-y-6', this.className)\n }\n\n statusTabClass(status: TimesheetStatusFilter): string {\n const active = this.selectedStatus() === status\n const activeTone =\n status === 'pending'\n ? 'bg-background text-warning text-warning shadow-xs'\n : status === 'approved'\n ? 'bg-background text-success text-success shadow-xs'\n : status === 'disputed'\n ? 'bg-background text-destructive text-destructive shadow-xs'\n : 'bg-background text-foreground shadow-xs'\n return cn(\n 'rounded-md px-2.5 py-1 font-medium transition-colors',\n active ? activeTone : 'text-muted-foreground hover:text-foreground',\n )\n }\n\n currencyTabClass(mode: CurrencyDisplay): string {\n return cn(\n 'rounded-md px-2 py-1 font-medium transition-colors',\n this.currencyDisplay() === mode\n ? 'bg-background text-foreground shadow-xs'\n : 'text-muted-foreground hover:text-foreground',\n )\n }\n\n 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\n 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\n openDrawer(contractor: ContractorSubmission): void {\n this.selectedContractorId.set(contractor.id)\n this.isDrawerOpen.set(true)\n }\n\n approveInvoice(id: string): void {\n this.submissions.update((prev) => prev.map((s) => (s.id === id ? { ...s, status: 'approved' as const } : s)))\n }\n\n disputeInvoice(id: string): void {\n this.submissions.update((prev) => prev.map((s) => (s.id === id ? { ...s, status: 'disputed' as const } : s)))\n }\n\n handleApproveDrawer(): void {\n const id = this.selectedContractorId()\n if (id) this.approveInvoice(id)\n this.isDrawerOpen.set(false)\n }\n\n handleDisputeDrawer(): void {\n const id = this.selectedContractorId()\n if (id) this.disputeInvoice(id)\n this.isDrawerOpen.set(false)\n }\n\n approveAllPending(): void {\n if (this.pendingCount() === 0) return\n this.isApprovingAll.set(true)\n clearTimeout(this.approveAllTimer)\n this.approveAllTimer = setTimeout(() => {\n this.submissions.update((prev) =>\n prev.map((s) => (s.status === 'pending' ? { ...s, status: 'approved' as const } : s)),\n )\n this.isApprovingAll.set(false)\n this.bulkApprovalDone.set(true)\n clearTimeout(this.bulkDoneTimer)\n this.bulkDoneTimer = setTimeout(() => {\n this.bulkApprovalDone.set(false)\n }, 3000)\n }, 400)\n }\n\n resetData(): void {\n this.submissions.set(structuredClone(initialSubmissions))\n this.selectedStatus.set('all')\n this.searchQuery.set('')\n this.bulkApprovalDone.set(false)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/contractor-timesheet-approval/contractor-timesheet-approval.component.ts" }, { "path": "packages/registry-angular/blocks/contractor-timesheet-approval/timesheet-detail-sheet.component.ts", "content": "import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core'\nimport {\n Check,\n CheckCircle2,\n FileCheck,\n FileCode,\n GitPullRequest,\n LucideAngularModule,\n ShieldCheck,\n XCircle,\n} from 'lucide-angular'\nimport { UiAvatarComponent, UiAvatarFallbackComponent } from '@/ui/avatar/avatar.component'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n UiSheetCloseComponent,\n UiSheetComponent,\n UiSheetContentComponent,\n UiSheetDescriptionComponent,\n UiSheetFooterComponent,\n UiSheetHeaderComponent,\n UiSheetTitleComponent,\n} from '@/ui/sheet/sheet.component'\nimport type { ContractorSubmission } from './timesheet-types'\n\n/** Itemized daily timesheet slide-over drawer: verification callout, day-by-day activity log, compliance box. */\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-timesheet-detail-sheet, [ui-timesheet-detail-sheet]',\n standalone: true,\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiAvatarComponent,\n UiAvatarFallbackComponent,\n UiBadgeComponent,\n UiButtonComponent,\n UiSheetCloseComponent,\n UiSheetComponent,\n UiSheetContentComponent,\n UiSheetDescriptionComponent,\n UiSheetFooterComponent,\n UiSheetHeaderComponent,\n UiSheetTitleComponent,\n ],\n template: `\n
\n \n @if (selectedContractor; as contractor) {\n \n
\n
\n
\n \n \n {{ contractor.initials }}\n \n \n
\n
\n

\n {{ contractor.name }}\n

\n \n {{ contractor.flag }}\n \n
\n

\n {{ contractor.role }} · {{ contractor.city }}\n

\n
\n
\n\n \n @if (contractor.status === 'pending') {\n \n \n Pending Review\n \n } @else if (contractor.status === 'approved') {\n \n \n Approved\n \n } @else {\n \n \n Disputed\n \n }\n
\n\n \n
\n
\n Invoice Gross\n \n {{ formatUsd(contractor.grossAmountUsd) }}\n \n \n {{ formatLocal(contractor.grossAmountLocal, contractor.currencyCode, contractor.currencySymbol) }}\n \n
\n
\n Total Hours\n \n {{ contractor.hoursLogged.toFixed(1) }} hrs\n \n \n {{ contractor.regularHours.toFixed(0) }}h reg · {{ contractor.overtimeHours.toFixed(0) }}h ot\n \n
\n
\n Contract Rate\n \n {{ formatUsd(contractor.hourlyRateUsd) }}/hr\n \n \n {{ contractor.taxCompliance.jurisdiction }}\n \n
\n
\n
\n\n \n
\n \n \n \n
\n

\n {{ contractor.verificationBadge.label }}\n

\n

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

\n
\n
\n\n \n
\n
\n

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

\n \n {{ contractor.payPeriod }}\n \n
\n\n
\n @for (entry of contractor.dailyEntries; track entry.id) {\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 * contractor.hourlyRateUsd) }})\n \n
\n
\n\n

\n {{ entry.task }}\n

\n\n \n
\n \n @if (entry.deliverableType === 'github_pr') {\n \n {{ entry.referenceId }}\n ({{ entry.referenceLabel }})\n @if (entry.commitCount) {\n · {{ entry.commitCount }} commits\n }\n } @else if (entry.deliverableType === 'figma') {\n \n {{ entry.referenceId }}\n ({{ entry.referenceLabel }})\n } @else {\n \n {{ entry.referenceId }}\n ({{ entry.referenceLabel }})\n }\n
\n\n \n \n Verified\n \n
\n
\n }\n
\n
\n\n \n
\n

\n \n Compliance & Disbursement Routing\n

\n
\n
\n Tax Form Status:\n \n Form W-8BEN ({{ contractor.taxCompliance.w8benStatus.toUpperCase() }})\n \n {{\n contractor.taxCompliance.taxIdMasked\n }}\n
\n
\n Disbursement Route:\n {{ contractor.paymentMethod.type }} Payout \n {{ contractor.paymentMethod.bankName }}\n
\n
\n
\n \n\n \n \n \n\n
\n @if (contractor.status !== 'disputed') {\n \n \n Dispute Invoice\n \n }\n\n @if (contractor.status !== 'approved') {\n \n } @else {\n \n \n Approved & Queued\n \n }\n
\n \n }\n \n \n `,\n})\nexport class UiTimesheetDetailSheetComponent {\n @Input() open = false\n @Input() selectedContractor?: ContractorSubmission\n @Input() formatUsd: (val: number) => string = (v) => String(v)\n @Input() formatLocal: (val: number, currencyCode: string, currencySymbol: string) => string = (v) => String(v)\n @Output() readonly openChange = new EventEmitter()\n @Output() readonly approve = new EventEmitter()\n @Output() readonly dispute = new EventEmitter()\n\n protected readonly Check = Check\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly FileCheck = FileCheck\n protected readonly FileCode = FileCode\n protected readonly GitPullRequest = GitPullRequest\n protected readonly ShieldCheck = ShieldCheck\n protected readonly XCircle = XCircle\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/contractor-timesheet-approval/timesheet-detail-sheet.component.ts" }, { "path": "packages/registry-angular/blocks/contractor-timesheet-approval/timesheet-kpi-cards.component.ts", "content": "import { ChangeDetectionStrategy, Component, Input } from '@angular/core'\nimport { Clock, LucideAngularModule, ShieldCheck, Timer, Users } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport {\n UiCardComponent,\n UiCardContentComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\n\n/** Four billing overview KPI cards: pending approval amount, total hours, scheduled payouts, active contractors. */\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-timesheet-kpi-cards, [ui-timesheet-kpi-cards]',\n standalone: true,\n host: { '[attr.class]': '\"contents\"' },\n imports: [LucideAngularModule, UiCardComponent, UiCardContentComponent, UiCardHeaderComponent, UiCardTitleComponent],\n template: `\n
\n \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 \n
\n
\n

Total Contractor Hours

\n
\n \n
\n
\n
\n
\n {{ totalHoursLogged.toFixed(1) }} hrs\n
\n

\n 160.0 regular\n · 80.0 overtime / project\n

\n
\n \n 100% Timesheets submitted\n \n
\n
\n
\n\n \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 \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})\nexport class UiTimesheetKpiCardsComponent {\n @Input() pendingAmountUsd = 0\n @Input() pendingCount = 0\n @Input() totalHoursLogged = 0\n @Input() scheduledPayoutsTotal = 0\n @Input() formatUsd: (val: number) => string = (v) => String(v)\n @Input('class') className?: string\n\n get rootClass(): string {\n return cn('grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4', this.className)\n }\n\n protected readonly Clock = Clock\n protected readonly ShieldCheck = ShieldCheck\n protected readonly Timer = Timer\n protected readonly Users = Users\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/contractor-timesheet-approval/timesheet-kpi-cards.component.ts" }, { "path": "packages/registry-angular/blocks/contractor-timesheet-approval/timesheet-table-row.component.ts", "content": "import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core'\nimport {\n AlertCircle,\n Check,\n CheckCircle2,\n Download,\n Eye,\n FileText,\n LucideAngularModule,\n MoreHorizontal,\n ShieldCheck,\n XCircle,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiAvatarComponent, UiAvatarFallbackComponent } from '@/ui/avatar/avatar.component'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n UiDropdownMenuComponent,\n UiDropdownMenuContentComponent,\n UiDropdownMenuItemComponent,\n UiDropdownMenuLabelComponent,\n UiDropdownMenuSeparatorComponent,\n UiDropdownMenuTriggerComponent,\n} from '@/ui/dropdown-menu/dropdown-menu.component'\nimport { UiTableCellComponent } from '@/ui/table/table.component'\nimport type { ContractorSubmission } from './timesheet-types'\n\n/**\n * One contractor invoice row. Attribute selector (`tr[ui-timesheet-table-row]`) so the host\n * IS the table row — a wrapper element inside would break table layout.\n */\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'tr[ui-timesheet-table-row]',\n standalone: true,\n // Same host contract as UiTableRow (data-slot + base row classes) merged with the\n // consumer `class`, so the row needs no wrapper element inside .\n host: { '[attr.data-slot]': '\"table-row\"', '[attr.data-uipkge]': '\"\"', '[class]': 'hostClass' },\n imports: [\n LucideAngularModule,\n UiAvatarComponent,\n UiAvatarFallbackComponent,\n UiBadgeComponent,\n UiButtonComponent,\n UiDropdownMenuComponent,\n UiDropdownMenuContentComponent,\n UiDropdownMenuItemComponent,\n UiDropdownMenuLabelComponent,\n UiDropdownMenuSeparatorComponent,\n UiDropdownMenuTriggerComponent,\n UiTableCellComponent,\n ],\n template: `\n \n \n
\n \n \n {{ contractor.initials }}\n \n \n
\n
\n \n {{ contractor.name }}\n \n {{ contractor.flag }}\n
\n

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

\n
\n
\n \n\n \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 \n \n
\n
\n \n {{ contractor.hoursLogged.toFixed(1) }} hrs\n \n
\n
\n {{ contractor.regularHours.toFixed(0) }}h reg \n @if (contractor.overtimeHours > 0) {\n +\n {{ contractor.overtimeHours.toFixed(0) }}h ot \n }\n
\n
\n \n\n \n \n
\n @if (currencyDisplay === 'both') {\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 } @else if (currencyDisplay === 'usd') {\n
\n {{ formatUsd(contractor.grossAmountUsd) }} USD\n
\n

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

\n } @else {\n
\n {{ formatLocal(contractor.grossAmountLocal, contractor.currencyCode, contractor.currencySymbol) }}\n
\n

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

\n }\n
\n \n\n \n \n
\n \n \n {{ contractor.verificationBadge.label }}\n \n \n {{ contractor.verificationBadge.subtext }}\n

\n
\n \n\n \n \n @if (contractor.status === 'pending') {\n \n \n Pending Review\n \n } @else if (contractor.status === 'approved') {\n \n \n Approved\n \n } @else {\n \n \n Disputed\n \n }\n \n\n \n \n
\n \n \n Timesheet\n \n\n @if (contractor.status === 'pending') {\n \n \n Approve\n \n }\n\n \n \n \n \n Open contractor menu\n \n \n
\n Invoice {{ contractor.invoiceNumber }}\n
\n \n \n Itemized Timesheet\n \n @if (contractor.status !== 'approved') {\n \n \n Approve Invoice\n \n }\n @if (contractor.status !== 'disputed') {\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})\nexport class UiTimesheetTableRowComponent {\n @Input({ required: true }) contractor!: ContractorSubmission\n @Input() currencyDisplay: 'both' | 'usd' | 'local' = 'both'\n @Input() formatUsd: (val: number) => string = (v) => String(v)\n @Input() formatLocal: (val: number, currencyCode: string, currencySymbol: string) => string = (v) => String(v)\n @Input('class') className?: string\n @Output() readonly openDrawer = new EventEmitter()\n @Output() readonly approveInvoice = new EventEmitter()\n @Output() readonly disputeInvoice = new EventEmitter()\n\n get hostClass(): string {\n return cn(\n 'table-row hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors duration-150',\n this.className,\n )\n }\n\n protected readonly AlertCircle = AlertCircle\n protected readonly Check = Check\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly Download = Download\n protected readonly Eye = Eye\n protected readonly FileText = FileText\n protected readonly MoreHorizontal = MoreHorizontal\n protected readonly ShieldCheck = ShieldCheck\n protected readonly XCircle = XCircle\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/contractor-timesheet-approval/timesheet-table-row.component.ts" }, { "path": "packages/registry-angular/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": "~/src/app/components/blocks/contractor-timesheet-approval/timesheet-types.ts" }, { "path": "packages/registry-angular/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": "~/src/app/components/blocks/contractor-timesheet-approval/timesheet-data.ts" }, { "path": "packages/registry-angular/blocks/contractor-timesheet-approval/index.ts", "content": "export {\n UiContractorTimesheetApprovalComponent,\n type ApprovalStatus,\n type ContractorSubmission,\n type CurrencyDisplay,\n type DailyTimesheetEntry,\n type DeliverableType,\n type TimesheetStatusFilter,\n} from './contractor-timesheet-approval.component'\nexport { UiTimesheetDetailSheetComponent } from './timesheet-detail-sheet.component'\nexport { UiTimesheetKpiCardsComponent } from './timesheet-kpi-cards.component'\nexport { UiTimesheetTableRowComponent } from './timesheet-table-row.component'\nexport { initialSubmissions } from './timesheet-data'\n", "type": "registry:block", "target": "~/src/app/components/blocks/contractor-timesheet-approval/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/avatar.json", "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json", "https://uipkge.dev/r/angular/dropdown-menu.json", "https://uipkge.dev/r/angular/separator.json", "https://uipkge.dev/r/angular/sheet.json", "https://uipkge.dev/r/angular/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" ] }