UIPackage
Menu

Framework

VueReactAngularSvelteWeb Components

Change language

GitHub repo

Contractor Timesheet Approval

blockfinance
Boilerplate repo

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.

Installation

$npx uipkge-ng@latest add contractor-timesheet-approval
Manifest:https://uipkge.dev/r/angular/contractor-timesheet-approval.jsonInstalls to:src/app/components/blocks/contractor-timesheet-approval/

Variants

Loading interactive previews…

Schema

Type aliases exported from this item's source. Use these to shape the data you pass in.

DailyTimesheetEntry
interface DailyTimesheetEntry {
  id: string
  date: string
  day: string
  hours: number
  regularHours: number
  overtimeHours: number
  task: string
  deliverableType: DeliverableType
  referenceId: string
  referenceLabel: string
  commitCount?: number
  verified: boolean
}
ContractorSubmission
interface ContractorSubmission {
  id: string
  name: string
  initials: string
  avatarUrl?: string
  role: string
  country: string
  countryCode: string
  flag: string
  city: string
  contractType: string
  hourlyRateUsd: number
  hourlyRateLocal: number
  currencyCode: string
  currencySymbol: string
  fxRate: number
  hoursLogged: number
  regularHours: number
  overtimeHours: number
  grossAmountLocal: number
  grossAmountUsd: number
  verificationBadge: {
    label: string
    subtext: string
    status: 'verified' | 'manual'
  }
  status: ApprovalStatus
  invoiceNumber: string
  submittedAt: string
  payPeriod: string
  taxCompliance: {
    w8benStatus: 'valid' | 'pending' | 'exempt'
    taxIdMasked: string
    jurisdiction: string
  }
  paymentMethod: {
    type: 'SWIFT' | 'SEPA' | 'Local Wire' | 'ACH'
    accountMasked: string
    bankName: string
  }
  dailyEntries: DailyTimesheetEntry[]
}

npm dependencies

lucide-angular

Files installed (7)

  • src/app/components/blocks/contractor-timesheet-approval/contractor-timesheet-approval.component.ts18.7 kB
    // 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. Port of the Vue/React block 1:1.
import { ChangeDetectionStrategy, Component, DestroyRef, Input, computed, inject, signal } from '@angular/core'
import {
  Calendar,
  Check,
  CheckCheck,
  CheckCircle2,
  Clock,
  FileSpreadsheet,
  Globe,
  LucideAngularModule,
  RotateCcw,
  Search,
} from 'lucide-angular'
import { cn } from '@/lib/utils'
import { UiBadgeComponent } from '@/ui/badge/badge.component'
import { UiButtonComponent } from '@/ui/button/button.component'
import { UiCardComponent, UiCardContentComponent } from '@/ui/card/card.component'
import { UiSeparatorComponent } from '@/ui/separator/separator.component'
import {
  UiTableBodyComponent,
  UiTableCellComponent,
  UiTableComponent,
  UiTableHeadComponent,
  UiTableHeaderComponent,
  UiTableRowComponent,
} from '@/ui/table/table.component'
import { UiTimesheetDetailSheetComponent } from './timesheet-detail-sheet.component'
import { UiTimesheetKpiCardsComponent } from './timesheet-kpi-cards.component'
import { UiTimesheetTableRowComponent } from './timesheet-table-row.component'
import { initialSubmissions } from './timesheet-data'
import type { ApprovalStatus, ContractorSubmission, DailyTimesheetEntry, DeliverableType } from './timesheet-types'

export type { ApprovalStatus, ContractorSubmission, DailyTimesheetEntry, DeliverableType }

export type TimesheetStatusFilter = 'all' | 'pending' | 'approved' | 'disputed'
export type CurrencyDisplay = 'both' | 'usd' | 'local'

@Component({
  changeDetection: ChangeDetectionStrategy.Eager,
  selector: 'ui-contractor-timesheet-approval, [ui-contractor-timesheet-approval]',
  standalone: true,
  // The block renders its own root <div>: keep this wrapper out of the layout.
  host: { '[attr.class]': '"contents"' },
  imports: [
    LucideAngularModule,
    UiBadgeComponent,
    UiButtonComponent,
    UiCardComponent,
    UiCardContentComponent,
    UiSeparatorComponent,
    UiTableBodyComponent,
    UiTableCellComponent,
    UiTableComponent,
    UiTableHeadComponent,
    UiTableHeaderComponent,
    UiTableRowComponent,
    UiTimesheetDetailSheetComponent,
    UiTimesheetKpiCardsComponent,
    UiTimesheetTableRowComponent,
  ],
  template: `
    <div data-slot="contractor-timesheet-approval" [class]="rootClass">
      <!-- Header Section -->
      <div class="border-border/80 flex flex-col gap-4 border-b pb-6 lg:flex-row lg:items-center lg:justify-between">
        <div class="space-y-1.5">
          <div class="flex flex-wrap items-center gap-2">
            <span ui-badge variant="outline" class="border-border text-muted-foreground text-xs font-medium">
              <lucide-icon [img]="Globe" class="text-primary mr-1 size-3" />
              Global Workforce · HRMS
            </span>
            <div class="text-muted-foreground flex items-center gap-1.5 text-xs font-medium">
              <lucide-icon [img]="Calendar" class="text-muted-foreground size-3.5" />
              <span>Pay Cycle:</span>
              <span class="text-foreground font-semibold">{{ payCycle }}</span>
            </div>
            @if (pendingCount() > 0) {
              <span ui-badge variant="outline" class="border-warning/30 bg-warning/10 text-warning text-xs font-medium">
                <span class="bg-warning mr-1.5 size-1.5 animate-pulse rounded-full"></span>
                {{ pendingCount() }} Invoices Pending Review
              </span>
            } @else {
              <span ui-badge variant="outline" class="border-success/30 bg-success/10 text-success text-xs font-medium">
                <lucide-icon [img]="CheckCircle2" class="text-success mr-1 size-3" />
                All Invoices Reviewed
              </span>
            }
          </div>
          <h1 class="text-foreground text-2xl font-bold tracking-tight sm:text-3xl">
            {{ title }}
          </h1>
          <p class="text-muted-foreground max-w-3xl text-sm leading-relaxed">
            {{ subtitle }}
          </p>
        </div>

        <!-- Action Buttons -->
        <div class="flex flex-wrap items-center gap-2.5 pt-1 lg:pt-0">
          <button
            ui-button
            variant="outline"
            size="sm"
            class="border-border hover:bg-muted h-9 gap-1.5 text-xs font-medium shadow-xs"
            (click)="resetData()"
          >
            <lucide-icon [img]="RotateCcw" class="text-muted-foreground size-3.5" />
            Reset Demo
          </button>

          <button
            ui-button
            variant="default"
            size="sm"
            [disabled]="pendingCount() === 0 || isApprovingAll()"
            class="h-9 gap-2 text-xs font-medium shadow-xs"
            (click)="approveAllPending()"
          >
            @if (isApprovingAll()) {
              <lucide-icon [img]="Clock" class="size-3.5 animate-spin" />
              Processing Batch...
            } @else if (bulkApprovalDone()) {
              <lucide-icon [img]="Check" class="text-success size-3.5" />
              Batch Approved!
            } @else {
              <lucide-icon [img]="CheckCheck" class="size-3.5" />
              <span>Approve All Pending ({{ formatUsd(pendingAmountUsd()) }})</span>
            }
          </button>
        </div>
      </div>

      <!-- 4 Billing Overview KPI Cards -->
      <ui-timesheet-kpi-cards
        [pendingAmountUsd]="pendingAmountUsd()"
        [pendingCount]="pendingCount()"
        [totalHoursLogged]="totalHoursLogged()"
        [scheduledPayoutsTotal]="scheduledPayoutsTotal()"
        [formatUsd]="formatUsdFn"
      />

      <!-- Filter Toolbar -->
      <div ui-card class="border-border bg-card shadow-xs">
        <div ui-card-content class="p-4">
          <div class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
            <!-- Search input -->
            <div class="relative max-w-md flex-1">
              <lucide-icon
                [img]="Search"
                class="text-muted-foreground absolute top-1/2 left-3 size-4 -translate-y-1/2"
              />
              <input
                [value]="searchQuery()"
                (input)="searchQuery.set($any($event.target).value)"
                type="text"
                placeholder="Search contractor, role, country, or PR..."
                class="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"
              />
            </div>

            <!-- Filter buttons & Currency Toggle -->
            <div class="flex flex-wrap items-center gap-2">
              <!-- Status filter tabs -->
              <div class="border-border bg-muted/40 inline-flex rounded-lg border p-0.5 text-xs">
                <button type="button" [class]="statusTabClass('all')" (click)="selectedStatus.set('all')">
                  All ({{ submissions().length }})
                </button>
                <button type="button" [class]="statusTabClass('pending')" (click)="selectedStatus.set('pending')">
                  Pending ({{ pendingCount() }})
                </button>
                <button type="button" [class]="statusTabClass('approved')" (click)="selectedStatus.set('approved')">
                  Approved ({{ approvedCount() }})
                </button>
                <button type="button" [class]="statusTabClass('disputed')" (click)="selectedStatus.set('disputed')">
                  Disputed ({{ disputedCount() }})
                </button>
              </div>

              <ui-separator orientation="vertical" class="hidden h-6 md:block" />

              <!-- Currency toggle selector -->
              <div class="border-border bg-muted/40 inline-flex rounded-lg border p-0.5 text-xs">
                <button type="button" [class]="currencyTabClass('both')" (click)="currencyDisplay.set('both')">
                  Dual FX
                </button>
                <button type="button" [class]="currencyTabClass('usd')" (click)="currencyDisplay.set('usd')">
                  USD ($)
                </button>
                <button type="button" [class]="currencyTabClass('local')" (click)="currencyDisplay.set('local')">
                  Local
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Contractor Invoices & Timesheets Table -->
      <div ui-card class="border-border bg-card overflow-hidden shadow-xs">
        <div class="overflow-x-auto">
          <table ui-table>
            <thead ui-table-header class="bg-muted/40">
              <tr ui-table-row class="border-border hover:bg-transparent">
                <th
                  ui-table-head
                  class="text-muted-foreground min-w-[240px] text-xs font-semibold tracking-wider uppercase"
                >
                  Contractor & Location
                </th>
                <th
                  ui-table-head
                  class="text-muted-foreground min-w-[180px] text-xs font-semibold tracking-wider uppercase"
                >
                  Role & Rate
                </th>
                <th
                  ui-table-head
                  class="text-muted-foreground min-w-[140px] text-xs font-semibold tracking-wider uppercase"
                >
                  Hours Logged
                </th>
                <th
                  ui-table-head
                  class="text-muted-foreground min-w-[200px] text-xs font-semibold tracking-wider uppercase"
                >
                  Invoice Gross Amount
                </th>
                <th
                  ui-table-head
                  class="text-muted-foreground min-w-[220px] text-xs font-semibold tracking-wider uppercase"
                >
                  Timesheet Verification
                </th>
                <th
                  ui-table-head
                  class="text-muted-foreground min-w-[120px] text-xs font-semibold tracking-wider uppercase"
                >
                  Status
                </th>
                <th
                  ui-table-head
                  class="text-muted-foreground min-w-[180px] text-right text-xs font-semibold tracking-wider uppercase"
                >
                  Actions
                </th>
              </tr>
            </thead>
            <tbody ui-table-body>
              @if (filteredSubmissions().length > 0) {
                @for (contractor of filteredSubmissions(); track contractor.id) {
                  <tr
                    ui-timesheet-table-row
                    class="border-border hover:bg-muted/30 transition-colors"
                    [contractor]="contractor"
                    [currencyDisplay]="currencyDisplay()"
                    [formatUsd]="formatUsdFn"
                    [formatLocal]="formatLocalFn"
                    (openDrawer)="openDrawer($event)"
                    (approveInvoice)="approveInvoice($event)"
                    (disputeInvoice)="disputeInvoice($event)"
                  ></tr>
                }
              } @else {
                <tr ui-table-row>
                  <td ui-table-cell colspan="7" class="h-36 text-center">
                    <div class="flex flex-col items-center justify-center gap-1.5">
                      <lucide-icon [img]="FileSpreadsheet" class="text-muted-foreground/50 size-8" />
                      <p class="text-foreground text-sm font-medium">No invoices match your filter</p>
                      <p class="text-muted-foreground text-xs">
                        Try adjusting your search query or switching the status filter tab.
                      </p>
                    </div>
                  </td>
                </tr>
              }
            </tbody>
          </table>
        </div>
      </div>

      <!-- Timesheet Detail Drawer / Slide-Over Component -->
      <ui-timesheet-detail-sheet
        [open]="isDrawerOpen()"
        [selectedContractor]="selectedContractor()"
        [formatUsd]="formatUsdFn"
        [formatLocal]="formatLocalFn"
        (openChange)="isDrawerOpen.set($event)"
        (approve)="handleApproveDrawer()"
        (dispute)="handleDisputeDrawer()"
      />
    </div>
  `,
})
export class UiContractorTimesheetApprovalComponent {
  protected readonly Calendar = Calendar
  protected readonly Check = Check
  protected readonly CheckCheck = CheckCheck
  protected readonly CheckCircle2 = CheckCircle2
  protected readonly Clock = Clock
  protected readonly FileSpreadsheet = FileSpreadsheet
  protected readonly Globe = Globe
  protected readonly RotateCcw = RotateCcw
  protected readonly Search = Search

  @Input() title = 'Contractor Invoices & Timesheets'
  @Input() subtitle =
    'Review international contractor hours, verify commit logs & deliverables, and execute multi-currency invoice approvals.'
  @Input() payCycle = 'August 2026 · Bi-Weekly #2'
  @Input() set initialData(v: ContractorSubmission[] | undefined) {
    if (v) this.submissions.set(structuredClone(v))
  }
  @Input('class') className?: string

  readonly submissions = signal<ContractorSubmission[]>(structuredClone(initialSubmissions))
  readonly searchQuery = signal('')
  readonly selectedStatus = signal<TimesheetStatusFilter>('all')
  readonly currencyDisplay = signal<CurrencyDisplay>('both')
  readonly selectedContractorId = signal<string | null>(null)
  readonly isDrawerOpen = signal(false)
  readonly isApprovingAll = signal(false)
  readonly bulkApprovalDone = signal(false)

  private bulkDoneTimer: ReturnType<typeof setTimeout> | undefined
  private approveAllTimer: ReturnType<typeof setTimeout> | undefined

  constructor() {
    inject(DestroyRef).onDestroy(() => {
      clearTimeout(this.bulkDoneTimer)
      clearTimeout(this.approveAllTimer)
    })
  }

  readonly pendingSubmissions = computed(() => this.submissions().filter((s) => s.status === 'pending'))
  readonly pendingCount = computed(() => this.pendingSubmissions().length)
  readonly pendingAmountUsd = computed(() =>
    this.pendingSubmissions().reduce((acc, curr) => acc + curr.grossAmountUsd, 0),
  )

  readonly approvedSubmissions = computed(() => this.submissions().filter((s) => s.status === 'approved'))
  readonly approvedCount = computed(() => this.approvedSubmissions().length)

  readonly disputedCount = computed(() => this.submissions().filter((s) => s.status === 'disputed').length)

  readonly totalHoursLogged = computed(() => this.submissions().reduce((acc, curr) => acc + curr.hoursLogged, 0))

  readonly scheduledPayoutsTotal = computed(() => 42800.0)

  readonly filteredSubmissions = computed(() => {
    const status = this.selectedStatus()
    const query = this.searchQuery().trim().toLowerCase()
    return this.submissions().filter((item) => {
      const matchesStatus = status === 'all' ? true : item.status === status
      if (!query) return matchesStatus
      const matchesSearch =
        item.name.toLowerCase().includes(query) ||
        item.role.toLowerCase().includes(query) ||
        item.country.toLowerCase().includes(query) ||
        item.city.toLowerCase().includes(query) ||
        item.invoiceNumber.toLowerCase().includes(query) ||
        item.verificationBadge.label.toLowerCase().includes(query)
      return matchesStatus && matchesSearch
    })
  })

  readonly selectedContractor = computed(() => this.submissions().find((c) => c.id === this.selectedContractorId()))

  // Bound function references for the row + sheet inputs (same shape as the Vue function props).
  readonly formatUsdFn = (val: number): string => this.formatUsd(val)
  readonly formatLocalFn = (val: number, currencyCode: string, currencySymbol: string): string =>
    this.formatLocal(val, currencyCode, currencySymbol)

  get rootClass(): string {
    return cn('text-foreground w-full space-y-6', this.className)
  }

  statusTabClass(status: TimesheetStatusFilter): string {
    const active = this.selectedStatus() === status
    const activeTone =
      status === 'pending'
        ? 'bg-background text-warning text-warning shadow-xs'
        : status === 'approved'
          ? 'bg-background text-success text-success shadow-xs'
          : status === 'disputed'
            ? 'bg-background text-destructive text-destructive shadow-xs'
            : 'bg-background text-foreground shadow-xs'
    return cn(
      'rounded-md px-2.5 py-1 font-medium transition-colors',
      active ? activeTone : 'text-muted-foreground hover:text-foreground',
    )
  }

  currencyTabClass(mode: CurrencyDisplay): string {
    return cn(
      'rounded-md px-2 py-1 font-medium transition-colors',
      this.currencyDisplay() === mode
        ? 'bg-background text-foreground shadow-xs'
        : 'text-muted-foreground hover:text-foreground',
    )
  }

  formatUsd(val: number): string {
    return new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: 'USD',
      minimumFractionDigits: 2,
      maximumFractionDigits: 2,
    }).format(val)
  }

  formatLocal(val: number, currencyCode: string, currencySymbol: string): string {
    if (currencyCode === 'JPY') {
      return `${currencySymbol}${new Intl.NumberFormat('ja-JP').format(val)}`
    }
    return `${currencySymbol}${new Intl.NumberFormat('en-US', {
      minimumFractionDigits: 2,
      maximumFractionDigits: 2,
    }).format(val)} ${currencyCode}`
  }

  openDrawer(contractor: ContractorSubmission): void {
    this.selectedContractorId.set(contractor.id)
    this.isDrawerOpen.set(true)
  }

  approveInvoice(id: string): void {
    this.submissions.update((prev) => prev.map((s) => (s.id === id ? { ...s, status: 'approved' as const } : s)))
  }

  disputeInvoice(id: string): void {
    this.submissions.update((prev) => prev.map((s) => (s.id === id ? { ...s, status: 'disputed' as const } : s)))
  }

  handleApproveDrawer(): void {
    const id = this.selectedContractorId()
    if (id) this.approveInvoice(id)
    this.isDrawerOpen.set(false)
  }

  handleDisputeDrawer(): void {
    const id = this.selectedContractorId()
    if (id) this.disputeInvoice(id)
    this.isDrawerOpen.set(false)
  }

  approveAllPending(): void {
    if (this.pendingCount() === 0) return
    this.isApprovingAll.set(true)
    clearTimeout(this.approveAllTimer)
    this.approveAllTimer = setTimeout(() => {
      this.submissions.update((prev) =>
        prev.map((s) => (s.status === 'pending' ? { ...s, status: 'approved' as const } : s)),
      )
      this.isApprovingAll.set(false)
      this.bulkApprovalDone.set(true)
      clearTimeout(this.bulkDoneTimer)
      this.bulkDoneTimer = setTimeout(() => {
        this.bulkApprovalDone.set(false)
      }, 3000)
    }, 400)
  }

  resetData(): void {
    this.submissions.set(structuredClone(initialSubmissions))
    this.selectedStatus.set('all')
    this.searchQuery.set('')
    this.bulkApprovalDone.set(false)
  }
}
  • src/app/components/blocks/contractor-timesheet-approval/timesheet-detail-sheet.component.ts14 kB
  • src/app/components/blocks/contractor-timesheet-approval/timesheet-kpi-cards.component.ts6 kB
  • src/app/components/blocks/contractor-timesheet-approval/timesheet-table-row.component.ts11.4 kB
  • src/app/components/blocks/contractor-timesheet-approval/timesheet-types.ts1.3 kB
  • src/app/components/blocks/contractor-timesheet-approval/timesheet-data.ts13.1 kB
  • src/app/components/blocks/contractor-timesheet-approval/index.ts0.5 kB

Raw manifest:https://uipkge.dev/r/angular/contractor-timesheet-approval.json