Quotation View Page

PreviewCode

SettingsOpen in

BackSent

KAT/QTN/2026/05/041

Al Naboodah Contracting - Manpower supply for Al Quoz industrial expansion

Send quotationReviseDownload PDFEdit

Commercial quotation

Issue date 2026-05-20 - Valid until 2026-06-19

ANB-OPS-118

AED 10,740.00

Quotation To

Al Naboodah Contracting

[email protected]

+971 4 555 0188

Quote numberKAT/QTN/2026/05/041

StatusSent

Validity2026-06-19

Manpower supply for Al Quoz industrial expansion

Proposal subject and manpower scope

Supply site supervisors, heavy equipment operators, and general helpers for day-shift civil works at Al Quoz Industrial Site.

Rate card

Worker categories, standard rates, and overtime references

Category	Qty	Rate	OT	Value
Site supervisor	2	AED 950.00	AED 95.00	AED 1,900.00
Heavy equipment operator	4	AED 1,050.00	AED 105.00	AED 4,200.00
General helper	16	AED 290.00	AED 32.00	AED 4,640.00
Standard total				AED 10,740.00

Working hours

Rates assume 10 duty hours per day, six days a week.

Overtime terms

Overtime will be billed only after written approval from the site manager.

Authorized signatory

Mohammed Nasser

Commercial Manager

Dear Sir

Summary

Customer refANB-OPS-118

Issue date2026-05-20

Valid until2026-06-19

Categories3

OT referenceAED 1,122.00

Contact

NameAl Naboodah Contracting

Email[email protected]

Phone+971 4 555 0188

Installation

CLICLI (Icon Support)Manual

pnpmnpmyarnbun

pnpm dlx shadcn@latest add @woxcn/manpowerhub-quotation-view

Usage

Install the ManpowerHub theme first, then add the block:

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

This installs the read-only quotation route block at components/blocks/manpowerhub-quotation-view.tsx.

Wiring a detail route

QuotationViewPage renders one quotation record. Use it for /quotations/:id and keep create/edit in dedicated app routes.

import { QuotationViewPage } from "@/components/blocks/manpowerhub-quotation-view";

export default function QuotationViewRoute({ params }) {
  const { data: quotation, mutate } = useQuotation(params.id);

  return (
    <QuotationViewPage
      quotation={quotation}
      onBack={() => router.push("/quotations")}
      onEditQuotation={(quotation) =>
        router.push(`/quotations/${quotation.id}/edit`)
      }
      onDownloadQuotation={(quotation) =>
        window.open(`/api/quotations/${quotation.id}/pdf`)
      }
      onStatusChangeQuotation={async (id, status) => {
        await api.quotations.update(id, { status });
        mutate();
      }}
    />
  );
}

Props

• quotation: required quotation record to render.
• onBack: optional handler for the Back action.
• onEditQuotation: optional handler for the Edit action.
• onDownloadQuotation: optional handler for Download PDF.
• onStatusChangeQuotation: optional handler for Send/Revise status actions.

Types

type QuotationStatus = "draft" | "sent" | "accepted" | "expired" | "revised";

interface QuotationItem {
  id: string;
  category: string;
  quantity: number;
  rateAed: number;
  otRateAed: number;
  sortOrder?: number;
}

interface Quotation {
  id: string;
  quotationNumber: string;
  customerRefId: string;
  status: QuotationStatus;
  customerName: string;
  customerEmail: string;
  customerPhone: string;
  proposalSubject: string;
  scopeOfWork: string;
  signatoryName: string;
  signatoryTitle: string;
  customDearSir?: string | null;
  customWorkingHours?: string | null;
  customOvertimeTerms?: string | null;
  issueDate: string;
  validUntil: string;
  items: QuotationItem[];
}