Invoice Page

PreviewCode

SettingsOpen in

Invoices/Proforma invoices

5 records

Proforma invoices

Wednesday, May 20, 2026

New draft

Total invoices

5

All PI records in the system

Pending approval

1

Awaiting Operation & Account sign-off

Total billed

AED 30,225.00

Sum of grant totals (AED)

VAT collected

AED 680.00

Total VAT across all invoices

Invoice activity

Last 30 days

BilledBy status

Recent invoices

5 invoices · Draft, approval, and send workflow

AllDraftPendingApprovedSent

PI Number	Bill To	Date	Status	Approval	Grant Total
KAT/2026/05/024	Al Naboodah Contracting	2026-05-20	Pending approval	—	AED 14,385.00
KAT/2026/05/023	Emaar Properties PJSC	2026-05-19	Sent to client	Mariam · Operation Department Faisal · Account Department	AED 8,750.00
KAT/2026/05/022	Sobha Realty Corporate Office	2026-05-18	Draft	—	—
KAT/2026/05/021	Al Futtaim Carillion	2026-05-17	Approved	Nasser · Operation Department Hind · Account Department	AED 4,190.00
KAT/2026/05/020	Shapoorji Pallonji M.E.	2026-05-16	Expired	—	AED 2,900.00

Installation

CLICLI (Icon Support)Manual

pnpmnpmyarnbun

pnpm dlx shadcn@latest add @woxcn/manpowerhub-invoice

Usage

Install the ManpowerHub theme first, then add the block:

npx shadcn@latest add https://woxcn-registry.woxware.io/r/manpowerhub-invoice.json

This installs the full block at components/blocks/manpowerhub-invoice.tsx along with its component dependencies. Drop <InvoicePage /> inside an AppShellScrollBody for the full shell layout.

Wiring CRUD handlers

InvoicePage is a controlled component — it renders data you provide and calls handlers on user actions. Wire your own API calls or state management:

import { InvoicePage } from "@/components/blocks/manpowerhub-invoice";

export default function InvoicesRoute() {
  const { data: invoices, mutate } = useInvoices(); // your data fetching

  return (
    <InvoicePage
      invoices={invoices}
      kpiTrend={kpiTrend}
      onSaveInvoice={async (data, id) => {
        if (id) {
          await api.invoices.update(id, data);
        } else {
          await api.invoices.create(data);
        }
        mutate();
      }}
      onDeleteInvoice={async (id) => {
        await api.invoices.delete(id);
        mutate();
      }}
      onApproveInvoice={async (id, dept) => {
        await api.invoices.approve(id, dept);
        mutate();
      }}
      onRecallToDraft={async (id) => {
        await api.invoices.recall(id);
        mutate();
      }}
      onViewInvoice={(invoice) => router.push(`/invoices/${invoice.id}`)}
      onDownloadInvoice={(invoice) => window.open(`/api/invoices/${invoice.id}/pdf`)}
    />
  );
}

Overriding built-in Sheet form

By default, InvoicePage ships with a built-in right-side Sheet form for create and edit. Override either with your own UI using the renderCreateSheet / renderEditSheet render props:

<InvoicePage
  invoices={invoices}
  onSaveInvoice={save}
  onDeleteInvoice={del}
  onApproveInvoice={approve}
  onRecallToDraft={recall}
  renderCreateSheet={({ open, onClose, onSave }) => (
    <MyCustomInvoiceForm
      open={open}
      onClose={onClose}
      onSubmit={onSave}
    />
  )}
  renderEditSheet={({ open, onClose, onSave, invoice }) => (
    <MyCustomInvoiceForm
      open={open}
      onClose={onClose}
      onSubmit={onSave}
      defaultValues={invoice}
    />
  )}
/>

The delete dialog cannot currently be overridden — open a GitHub issue if you need this.

Props

Prop	Type	Required	Description
invoices	Invoice[]	Yes	List of invoices to display
kpiTrend	KpiTrend	No	Sparkline data for KPI cards. Defaults to flat if omitted.
onSaveInvoice	(data, id?) => void | Promise<void>	Yes	Called on create (no id) and edit (with id).
onDeleteInvoice	(id) => void | Promise<void>	Yes	Called after user confirms delete.
onApproveInvoice	(id, dept) => void | Promise<void>	Yes	Called when approver signs off. dept is "Operation Department" or "Account Department".
onRecallToDraft	(id) => void | Promise<void>	Yes	Called when user recalls an invoice to draft.
onViewInvoice	(invoice) => void	No	Called when user clicks View. If omitted, View is hidden.
onDownloadInvoice	(invoice) => void	No	Called when user clicks Download PDF. If omitted, Download is hidden.
renderCreateSheet	(props) => ReactNode	No	Override the built-in create Sheet form.
renderEditSheet	(props) => ReactNode	No	Override the built-in edit Sheet form.

Types

interface LineItem {
  id: string;
  description: string;
  hours: number;
  rate: number;
}

interface ApprovalEntry {
  name: string;
  dept: "Operation Department" | "Account Department";
  signed: boolean;
}

interface Invoice {
  id: string;
  piNumber: string;
  billTo: string;
  date: string;
  status: "draft" | "pending" | "sent" | "approved" | "expired";
  approvals: ApprovalEntry[];
  lineItems: LineItem[];
  grantTotal: number | null;
  trn?: string;
  project?: string;
  vatApplicable: boolean;
}

interface InvoiceFormData {
  piNumber: string;
  billTo: string;
  date: string;
  approvals: ApprovalEntry[];
  lineItems: LineItem[];
  trn: string;
  project: string;
  vatApplicable: boolean;
}

interface KpiTrend {
  total: number[];
  pending: number[];
  billed: number[];
  vat: number[];
}