@burdenoff/microfe-proserviceworld 2026.703.1 → 2026.706.2

package/dist/proserviceworld/pages/EngagementsPage.js

@@ -0,0 +1,256 @@
+import { useClients as e, useCreateEngagement as t, useEngagements as n, usePracticeAreas as r } from "../hooks/useProServiceWorldApi.js";
+import { useNav as i } from "../utils/nav.js";
+import { Banner as a, Empty as o, ErrorState as s, Field as c, LoadingBlock as l, Modal as u, NativeSelect as d, PageHeader as f, SectionCard as p, StatusPill as m, TableWrap as h, Td as g, TextArea as _, TextInput as v, Th as y, enumOptions as b, fmtDate as x, fmtMoney as S } from "../components/ui.js";
+import { useState as C } from "react";
+import { Briefcase as w, Plus as T, Search as E } from "lucide-react";
+import { Fragment as D, jsx as O, jsxs as k } from "react/jsx-runtime";
+import { Button as A } from "@burdenoff/fe-libs/ui";
+//#region src/proserviceworld/pages/EngagementsPage.tsx
+var j = [
+	"PROPOSAL",
+	"ACCEPTED",
+	"IN_PROGRESS",
+	"REVIEW",
+	"DELIVERED",
+	"INVOICED",
+	"CLOSED",
+	"CANCELLED"
+], M = [
+	"FIXED",
+	"HOURLY",
+	"RETAINER",
+	"VALUE_BASED"
+], N = () => {
+	let e = i(), [t, r] = C(""), [c, u] = C(""), [_, D] = C(!1), [M, N] = C(null), { data: F, isLoading: I, error: L, refetch: R } = n({
+		search: t.trim() || void 0,
+		status: c || void 0
+	});
+	return /* @__PURE__ */ k("div", {
+		className: "space-y-6",
+		children: [
+			/* @__PURE__ */ O(f, {
+				title: "Engagements",
+				subtitle: "The commercial containers of contracted work — scope, fee arrangement, delivery lifecycle, and billing.",
+				icon: /* @__PURE__ */ O(w, { className: "h-6 w-6" }),
+				actions: /* @__PURE__ */ k(A, {
+					onClick: () => D(!0),
+					children: [/* @__PURE__ */ O(T, { className: "mr-1.5 h-4 w-4" }), "New engagement"]
+				})
+			}),
+			M && /* @__PURE__ */ O(a, {
+				tone: "success",
+				onClose: () => N(null),
+				children: M
+			}),
+			/* @__PURE__ */ k("div", {
+				className: "flex flex-col gap-2 sm:flex-row sm:items-center",
+				children: [/* @__PURE__ */ k("div", {
+					className: "relative flex-1",
+					children: [/* @__PURE__ */ O(E, { className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-text-tertiary" }), /* @__PURE__ */ O(v, {
+						placeholder: "Search engagements…",
+						value: t,
+						onChange: (e) => r(e.target.value),
+						className: "pl-9"
+					})]
+				}), /* @__PURE__ */ k(d, {
+					value: c,
+					onChange: (e) => u(e.target.value),
+					className: "sm:w-52",
+					children: [/* @__PURE__ */ O("option", {
+						value: "",
+						children: "All statuses"
+					}), b(j)]
+				})]
+			}),
+			I ? /* @__PURE__ */ O(l, {}) : L ? /* @__PURE__ */ O(s, {
+				error: L,
+				onRetry: () => void R()
+			}) : !F || F.items.length === 0 ? /* @__PURE__ */ O(o, {
+				title: "No engagements yet",
+				description: "Scope your first engagement against a client to begin delivery and billing.",
+				icon: /* @__PURE__ */ O(w, { className: "h-8 w-8" }),
+				action: /* @__PURE__ */ k(A, {
+					onClick: () => D(!0),
+					children: [/* @__PURE__ */ O(T, { className: "mr-1.5 h-4 w-4" }), "New engagement"]
+				})
+			}) : /* @__PURE__ */ O(p, {
+				title: `${F.totalCount} engagement${F.totalCount === 1 ? "" : "s"}`,
+				children: /* @__PURE__ */ k(h, { children: [/* @__PURE__ */ O("thead", { children: /* @__PURE__ */ k("tr", { children: [
+					/* @__PURE__ */ O(y, { children: "Engagement" }),
+					/* @__PURE__ */ O(y, { children: "Client" }),
+					/* @__PURE__ */ O(y, { children: "Fee" }),
+					/* @__PURE__ */ O(y, { children: "Status" }),
+					/* @__PURE__ */ O(y, { children: "Started" })
+				] }) }), /* @__PURE__ */ O("tbody", { children: F.items.map((t) => /* @__PURE__ */ k("tr", {
+					className: "cursor-pointer hover:bg-bg-sunken/50",
+					onClick: () => e(`engagements/${t.id}`),
+					children: [
+						/* @__PURE__ */ O(g, { children: /* @__PURE__ */ O("span", {
+							className: "font-medium text-text-primary",
+							children: t.name
+						}) }),
+						/* @__PURE__ */ O(g, { children: t.client?.name ?? "—" }),
+						/* @__PURE__ */ k(g, { children: [
+							S(t.feeAmount, t.currency),
+							" ",
+							/* @__PURE__ */ k("span", {
+								className: "text-xs text-text-tertiary",
+								children: ["/ ", t.feeArrangement.toLowerCase()]
+							})
+						] }),
+						/* @__PURE__ */ O(g, { children: /* @__PURE__ */ O(m, { status: t.status }) }),
+						/* @__PURE__ */ O(g, { children: x(t.startDate) })
+					]
+				}, t.id)) })] })
+			}),
+			_ && /* @__PURE__ */ O(P, {
+				onClose: () => D(!1),
+				onSaved: (e) => N(`${e} created.`)
+			})
+		]
+	});
+}, P = ({ onClose: n, onSaved: i }) => {
+	let o = t(), s = e({ pagination: { limit: 100 } }), l = r(), [f, p] = C({
+		clientId: "",
+		practiceAreaId: "",
+		name: "",
+		description: "",
+		feeArrangement: "FIXED",
+		feeAmount: "",
+		currency: "USD",
+		startDate: ""
+	}), [m, h] = C(null), g = (e) => (t) => p((n) => ({
+		...n,
+		[e]: t.target.value
+	}));
+	return /* @__PURE__ */ O(u, {
+		open: !0,
+		onClose: n,
+		title: "New engagement",
+		footer: /* @__PURE__ */ k(D, { children: [/* @__PURE__ */ O(A, {
+			variant: "outline",
+			onClick: n,
+			disabled: o.isPending,
+			children: "Cancel"
+		}), /* @__PURE__ */ O(A, {
+			onClick: () => {
+				if (h(null), !f.clientId) return h("Select a client.");
+				if (!f.name.trim()) return h("Engagement name is required.");
+				o.mutate({
+					clientId: f.clientId,
+					practiceAreaId: f.practiceAreaId || null,
+					name: f.name.trim(),
+					description: f.description.trim() || null,
+					feeArrangement: f.feeArrangement,
+					feeAmount: f.feeAmount ? Number(f.feeAmount) : 0,
+					currency: f.currency || "USD",
+					startDate: f.startDate ? new Date(f.startDate).toISOString() : null
+				}, {
+					onSuccess: () => {
+						i(f.name.trim()), n();
+					},
+					onError: (e) => h(e instanceof Error ? e.message : "Failed.")
+				});
+			},
+			disabled: o.isPending,
+			children: o.isPending ? "Creating…" : "Create engagement"
+		})] }),
+		children: /* @__PURE__ */ k("div", {
+			className: "space-y-3",
+			children: [
+				m && /* @__PURE__ */ O(a, {
+					tone: "danger",
+					children: m
+				}),
+				/* @__PURE__ */ O(c, {
+					label: "Client",
+					required: !0,
+					children: /* @__PURE__ */ k(d, {
+						value: f.clientId,
+						onChange: g("clientId"),
+						children: [/* @__PURE__ */ O("option", {
+							value: "",
+							children: "Select a client…"
+						}), s.data?.items.map((e) => /* @__PURE__ */ O("option", {
+							value: e.id,
+							children: e.name
+						}, e.id))]
+					})
+				}),
+				/* @__PURE__ */ O(c, {
+					label: "Name",
+					required: !0,
+					children: /* @__PURE__ */ O(v, {
+						value: f.name,
+						onChange: g("name"),
+						placeholder: "FY26 Statutory Audit"
+					})
+				}),
+				/* @__PURE__ */ O(c, {
+					label: "Practice area",
+					children: /* @__PURE__ */ k(d, {
+						value: f.practiceAreaId,
+						onChange: g("practiceAreaId"),
+						children: [/* @__PURE__ */ O("option", {
+							value: "",
+							children: "Unassigned"
+						}), l.data?.map((e) => /* @__PURE__ */ O("option", {
+							value: e.id,
+							children: e.name
+						}, e.id))]
+					})
+				}),
+				/* @__PURE__ */ k("div", {
+					className: "grid grid-cols-3 gap-3",
+					children: [
+						/* @__PURE__ */ O(c, {
+							label: "Fee type",
+							children: /* @__PURE__ */ O(d, {
+								value: f.feeArrangement,
+								onChange: g("feeArrangement"),
+								children: b(M)
+							})
+						}),
+						/* @__PURE__ */ O(c, {
+							label: "Fee amount",
+							children: /* @__PURE__ */ O(v, {
+								type: "number",
+								min: "0",
+								value: f.feeAmount,
+								onChange: g("feeAmount"),
+								placeholder: "50000"
+							})
+						}),
+						/* @__PURE__ */ O(c, {
+							label: "Currency",
+							children: /* @__PURE__ */ O(v, {
+								value: f.currency,
+								onChange: g("currency"),
+								maxLength: 3
+							})
+						})
+					]
+				}),
+				/* @__PURE__ */ O(c, {
+					label: "Start date",
+					children: /* @__PURE__ */ O(v, {
+						type: "date",
+						value: f.startDate,
+						onChange: g("startDate")
+					})
+				}),
+				/* @__PURE__ */ O(c, {
+					label: "Description",
+					children: /* @__PURE__ */ O(_, {
+						value: f.description,
+						onChange: g("description")
+					})
+				})
+			]
+		})
+	});
+};
+//#endregion
+export { N as EngagementsPage };
+
+//# sourceMappingURL=EngagementsPage.js.map

package/dist/proserviceworld/pages/EngagementsPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EngagementsPage.js","names":[],"sources":["../../../src/proserviceworld/pages/EngagementsPage.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport { useState } from 'react';\nimport { Button } from '@burdenoff/fe-libs/ui';\nimport { Plus, Search, Briefcase } from 'lucide-react';\nimport {\n  useEngagements,\n  useCreateEngagement,\n  useClients,\n  usePracticeAreas,\n  type PswEngagementStatus,\n} from '../hooks/useProServiceWorldApi';\nimport { useNav } from '../utils/nav';\nimport {\n  PageHeader,\n  SectionCard,\n  LoadingBlock,\n  ErrorState,\n  Empty,\n  StatusPill,\n  Modal,\n  Field,\n  TextInput,\n  TextArea,\n  NativeSelect,\n  Banner,\n  TableWrap,\n  Th,\n  Td,\n  enumOptions,\n  fmtMoney,\n  fmtDate,\n} from '../components/ui';\n\nconst STATUSES: PswEngagementStatus[] = [\n  'PROPOSAL',\n  'ACCEPTED',\n  'IN_PROGRESS',\n  'REVIEW',\n  'DELIVERED',\n  'INVOICED',\n  'CLOSED',\n  'CANCELLED',\n];\nconst FEE_ARRANGEMENTS = ['FIXED', 'HOURLY', 'RETAINER', 'VALUE_BASED'] as const;\n\nexport const EngagementsPage: FC = () => {\n  const nav = useNav();\n  const [search, setSearch] = useState('');\n  const [statusFilter, setStatusFilter] = useState<PswEngagementStatus | ''>('');\n  const [creating, setCreating] = useState(false);\n  const [banner, setBanner] = useState<string | null>(null);\n  const { data, isLoading, error, refetch } = useEngagements({\n    search: search.trim() || undefined,\n    status: statusFilter || undefined,\n  });\n\n  return (\n    <div className=\"space-y-6\">\n      <PageHeader\n        title=\"Engagements\"\n        subtitle=\"The commercial containers of contracted work — scope, fee arrangement, delivery lifecycle, and billing.\"\n        icon={<Briefcase className=\"h-6 w-6\" />}\n        actions={\n          <Button onClick={() => setCreating(true)}>\n            <Plus className=\"mr-1.5 h-4 w-4\" />\n            New engagement\n          </Button>\n        }\n      />\n\n      {banner && (\n        <Banner tone=\"success\" onClose={() => setBanner(null)}>\n          {banner}\n        </Banner>\n      )}\n\n      <div className=\"flex flex-col gap-2 sm:flex-row sm:items-center\">\n        <div className=\"relative flex-1\">\n          <Search className=\"pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-text-tertiary\" />\n          <TextInput\n            placeholder=\"Search engagements…\"\n            value={search}\n            onChange={(e) => setSearch(e.target.value)}\n            className=\"pl-9\"\n          />\n        </div>\n        <NativeSelect\n          value={statusFilter}\n          onChange={(e) => setStatusFilter(e.target.value as PswEngagementStatus | '')}\n          className=\"sm:w-52\"\n        >\n          <option value=\"\">All statuses</option>\n          {enumOptions(STATUSES)}\n        </NativeSelect>\n      </div>\n\n      {isLoading ? (\n        <LoadingBlock />\n      ) : error ? (\n        <ErrorState error={error} onRetry={() => void refetch()} />\n      ) : !data || data.items.length === 0 ? (\n        <Empty\n          title=\"No engagements yet\"\n          description=\"Scope your first engagement against a client to begin delivery and billing.\"\n          icon={<Briefcase className=\"h-8 w-8\" />}\n          action={\n            <Button onClick={() => setCreating(true)}>\n              <Plus className=\"mr-1.5 h-4 w-4\" />\n              New engagement\n            </Button>\n          }\n        />\n      ) : (\n        <SectionCard title={`${data.totalCount} engagement${data.totalCount === 1 ? '' : 's'}`}>\n          <TableWrap>\n            <thead>\n              <tr>\n                <Th>Engagement</Th>\n                <Th>Client</Th>\n                <Th>Fee</Th>\n                <Th>Status</Th>\n                <Th>Started</Th>\n              </tr>\n            </thead>\n            <tbody>\n              {data.items.map((e) => (\n                <tr\n                  key={e.id}\n                  className=\"cursor-pointer hover:bg-bg-sunken/50\"\n                  onClick={() => nav(`engagements/${e.id}`)}\n                >\n                  <Td>\n                    <span className=\"font-medium text-text-primary\">{e.name}</span>\n                  </Td>\n                  <Td>{e.client?.name ?? '—'}</Td>\n                  <Td>\n                    {fmtMoney(e.feeAmount, e.currency)}{' '}\n                    <span className=\"text-xs text-text-tertiary\">\n                      / {e.feeArrangement.toLowerCase()}\n                    </span>\n                  </Td>\n                  <Td>\n                    <StatusPill status={e.status} />\n                  </Td>\n                  <Td>{fmtDate(e.startDate)}</Td>\n                </tr>\n              ))}\n            </tbody>\n          </TableWrap>\n        </SectionCard>\n      )}\n\n      {creating && (\n        <EngagementModal\n          onClose={() => setCreating(false)}\n          onSaved={(name) => setBanner(`${name} created.`)}\n        />\n      )}\n    </div>\n  );\n};\n\nconst EngagementModal: FC<{ onClose: () => void; onSaved: (name: string) => void }> = ({\n  onClose,\n  onSaved,\n}) => {\n  const create = useCreateEngagement();\n  const clients = useClients({ pagination: { limit: 100 } });\n  const practiceAreas = usePracticeAreas();\n  const [form, setForm] = useState({\n    clientId: '',\n    practiceAreaId: '',\n    name: '',\n    description: '',\n    feeArrangement: 'FIXED',\n    feeAmount: '',\n    currency: 'USD',\n    startDate: '',\n  });\n  const [err, setErr] = useState<string | null>(null);\n  const set = (k: keyof typeof form) => (e: { target: { value: string } }) =>\n    setForm((f) => ({ ...f, [k]: e.target.value }));\n\n  const submit = () => {\n    setErr(null);\n    if (!form.clientId) return setErr('Select a client.');\n    if (!form.name.trim()) return setErr('Engagement name is required.');\n    create.mutate(\n      {\n        clientId: form.clientId,\n        practiceAreaId: form.practiceAreaId || null,\n        name: form.name.trim(),\n        description: form.description.trim() || null,\n        feeArrangement: form.feeArrangement,\n        feeAmount: form.feeAmount ? Number(form.feeAmount) : 0,\n        currency: form.currency || 'USD',\n        startDate: form.startDate ? new Date(form.startDate).toISOString() : null,\n      },\n      {\n        onSuccess: () => {\n          onSaved(form.name.trim());\n          onClose();\n        },\n        onError: (e) => setErr(e instanceof Error ? e.message : 'Failed.'),\n      }\n    );\n  };\n\n  return (\n    <Modal\n      open\n      onClose={onClose}\n      title=\"New engagement\"\n      footer={\n        <>\n          <Button variant=\"outline\" onClick={onClose} disabled={create.isPending}>\n            Cancel\n          </Button>\n          <Button onClick={submit} disabled={create.isPending}>\n            {create.isPending ? 'Creating…' : 'Create engagement'}\n          </Button>\n        </>\n      }\n    >\n      <div className=\"space-y-3\">\n        {err && <Banner tone=\"danger\">{err}</Banner>}\n        <Field label=\"Client\" required>\n          <NativeSelect value={form.clientId} onChange={set('clientId')}>\n            <option value=\"\">Select a client…</option>\n            {clients.data?.items.map((c) => (\n              <option key={c.id} value={c.id}>\n                {c.name}\n              </option>\n            ))}\n          </NativeSelect>\n        </Field>\n        <Field label=\"Name\" required>\n          <TextInput value={form.name} onChange={set('name')} placeholder=\"FY26 Statutory Audit\" />\n        </Field>\n        <Field label=\"Practice area\">\n          <NativeSelect value={form.practiceAreaId} onChange={set('practiceAreaId')}>\n            <option value=\"\">Unassigned</option>\n            {practiceAreas.data?.map((p) => (\n              <option key={p.id} value={p.id}>\n                {p.name}\n              </option>\n            ))}\n          </NativeSelect>\n        </Field>\n        <div className=\"grid grid-cols-3 gap-3\">\n          <Field label=\"Fee type\">\n            <NativeSelect value={form.feeArrangement} onChange={set('feeArrangement')}>\n              {enumOptions(FEE_ARRANGEMENTS)}\n            </NativeSelect>\n          </Field>\n          <Field label=\"Fee amount\">\n            <TextInput\n              type=\"number\"\n              min=\"0\"\n              value={form.feeAmount}\n              onChange={set('feeAmount')}\n              placeholder=\"50000\"\n            />\n          </Field>\n          <Field label=\"Currency\">\n            <TextInput value={form.currency} onChange={set('currency')} maxLength={3} />\n          </Field>\n        </div>\n        <Field label=\"Start date\">\n          <TextInput type=\"date\" value={form.startDate} onChange={set('startDate')} />\n        </Field>\n        <Field label=\"Description\">\n          <TextArea value={form.description} onChange={set('description')} />\n        </Field>\n      </div>\n    </Modal>\n  );\n};\n"],"mappings":"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"}

package/dist/proserviceworld/pages/InvoicesPage.js

@@ -0,0 +1,303 @@
+import { useClients as e, useCreateInvoice as t, useEngagements as n, useInvoices as r, useMarkInvoicePaid as i } from "../hooks/useProServiceWorldApi.js";
+import { Banner as a, Empty as o, ErrorState as s, Field as c, LoadingBlock as l, MetricCard as u, Modal as d, NativeSelect as f, PageHeader as p, SectionCard as m, StatusPill as h, TableWrap as g, Td as _, TextArea as v, TextInput as y, Th as b, enumOptions as x, fmtDate as S, fmtMoney as C } from "../components/ui.js";
+import { useMemo as w, useState as T } from "react";
+import { CheckCircle2 as E, Plus as D, Receipt as O } from "lucide-react";
+import { Fragment as k, jsx as A, jsxs as j } from "react/jsx-runtime";
+import { Button as M } from "@burdenoff/fe-libs/ui";
+//#region src/proserviceworld/pages/InvoicesPage.tsx
+var N = [
+	"DRAFT",
+	"SENT",
+	"PAID",
+	"OVERDUE",
+	"CANCELLED"
+], P = () => {
+	let [t, n] = T(""), [c, d] = T(!1), [v, y] = T(null), { data: k, isLoading: P, error: I, refetch: L } = r({ status: t || void 0 }), R = i(), z = e({ pagination: { limit: 100 } }), B = w(() => new Map((z.data?.items ?? []).map((e) => [e.id, e.name])), [z.data]), V = (k?.items ?? []).filter((e) => e.status === "SENT" || e.status === "OVERDUE").reduce((e, t) => e + t.total, 0), H = (k?.items ?? []).filter((e) => e.status === "PAID").reduce((e, t) => e + t.total, 0);
+	return /* @__PURE__ */ j("div", {
+		className: "space-y-6",
+		children: [
+			/* @__PURE__ */ A(p, {
+				title: "Invoices",
+				subtitle: "Assemble invoices from time, milestones and fixed-fee schedules — and track what's outstanding.",
+				icon: /* @__PURE__ */ A(O, { className: "h-6 w-6" }),
+				actions: /* @__PURE__ */ j(M, {
+					onClick: () => d(!0),
+					children: [/* @__PURE__ */ A(D, { className: "mr-1.5 h-4 w-4" }), "New invoice"]
+				})
+			}),
+			v && /* @__PURE__ */ A(a, {
+				tone: v.tone,
+				onClose: () => y(null),
+				children: v.text
+			}),
+			/* @__PURE__ */ j("div", {
+				className: "grid grid-cols-3 gap-3",
+				children: [
+					/* @__PURE__ */ A(u, {
+						label: "Invoices",
+						value: k?.totalCount ?? 0
+					}),
+					/* @__PURE__ */ A(u, {
+						label: "Outstanding",
+						value: C(V),
+						tone: "warning"
+					}),
+					/* @__PURE__ */ A(u, {
+						label: "Collected",
+						value: C(H),
+						tone: "success"
+					})
+				]
+			}),
+			/* @__PURE__ */ A("div", {
+				className: "flex justify-end",
+				children: /* @__PURE__ */ j(f, {
+					value: t,
+					onChange: (e) => n(e.target.value),
+					className: "sm:w-48",
+					children: [/* @__PURE__ */ A("option", {
+						value: "",
+						children: "All statuses"
+					}), x(N)]
+				})
+			}),
+			P ? /* @__PURE__ */ A(l, {}) : I ? /* @__PURE__ */ A(s, {
+				error: I,
+				onRetry: () => void L()
+			}) : !k || k.items.length === 0 ? /* @__PURE__ */ A(o, {
+				title: "No invoices yet",
+				description: "Raise an invoice for a client to start tracking receivables.",
+				icon: /* @__PURE__ */ A(O, { className: "h-8 w-8" }),
+				action: /* @__PURE__ */ j(M, {
+					onClick: () => d(!0),
+					children: [/* @__PURE__ */ A(D, { className: "mr-1.5 h-4 w-4" }), "New invoice"]
+				})
+			}) : /* @__PURE__ */ A(m, {
+				title: "Invoices",
+				children: /* @__PURE__ */ j(g, { children: [/* @__PURE__ */ A("thead", { children: /* @__PURE__ */ j("tr", { children: [
+					/* @__PURE__ */ A(b, { children: "Number" }),
+					/* @__PURE__ */ A(b, { children: "Client" }),
+					/* @__PURE__ */ A(b, { children: "Total" }),
+					/* @__PURE__ */ A(b, { children: "Status" }),
+					/* @__PURE__ */ A(b, { children: "Due" }),
+					/* @__PURE__ */ A(b, {
+						className: "text-right",
+						children: "Actions"
+					})
+				] }) }), /* @__PURE__ */ A("tbody", { children: k.items.map((e) => /* @__PURE__ */ j("tr", {
+					className: "hover:bg-bg-sunken/50",
+					children: [
+						/* @__PURE__ */ A(_, { children: /* @__PURE__ */ A("span", {
+							className: "font-medium text-text-primary",
+							children: e.number
+						}) }),
+						/* @__PURE__ */ A(_, { children: B.get(e.clientId) ?? "—" }),
+						/* @__PURE__ */ A(_, { children: C(e.total, e.currency) }),
+						/* @__PURE__ */ A(_, { children: /* @__PURE__ */ A(h, { status: e.status }) }),
+						/* @__PURE__ */ A(_, { children: S(e.dueDate) }),
+						/* @__PURE__ */ A(_, {
+							className: "text-right",
+							children: e.status !== "PAID" && e.status !== "CANCELLED" && /* @__PURE__ */ j(M, {
+								variant: "ghost",
+								size: "sm",
+								disabled: R.isPending,
+								onClick: () => R.mutate(e.id, {
+									onSuccess: () => y({
+										tone: "success",
+										text: `${e.number} marked paid.`
+									}),
+									onError: (e) => y({
+										tone: "danger",
+										text: e instanceof Error ? e.message : "Failed."
+									})
+								}),
+								children: [/* @__PURE__ */ A(E, { className: "mr-1 h-4 w-4" }), "Mark paid"]
+							})
+						})
+					]
+				}, e.id)) })] })
+			}),
+			c && /* @__PURE__ */ A(F, {
+				onClose: () => d(!1),
+				onSaved: (e) => y({
+					tone: "success",
+					text: `${e} created.`
+				})
+			})
+		]
+	});
+}, F = ({ onClose: r, onSaved: i }) => {
+	let o = t(), s = e({ pagination: { limit: 100 } }), [l, u] = T({
+		clientId: "",
+		engagementId: "",
+		number: "",
+		currency: "USD",
+		subtotal: "",
+		taxAmount: "",
+		issueDate: (/* @__PURE__ */ new Date()).toISOString().slice(0, 10),
+		dueDate: "",
+		notes: ""
+	}), [p, m] = T(null), h = n({
+		clientId: l.clientId || void 0,
+		pagination: { limit: 100 }
+	}), g = (e) => (t) => u((n) => ({
+		...n,
+		[e]: t.target.value
+	})), _ = (Number(l.subtotal) || 0) + (Number(l.taxAmount) || 0);
+	return /* @__PURE__ */ A(d, {
+		open: !0,
+		onClose: r,
+		title: "New invoice",
+		footer: /* @__PURE__ */ j(k, { children: [/* @__PURE__ */ A(M, {
+			variant: "outline",
+			onClick: r,
+			disabled: o.isPending,
+			children: "Cancel"
+		}), /* @__PURE__ */ A(M, {
+			onClick: () => {
+				if (m(null), !l.clientId) return m("Select a client.");
+				if (!l.number.trim()) return m("Invoice number is required.");
+				o.mutate({
+					clientId: l.clientId,
+					engagementId: l.engagementId || null,
+					number: l.number.trim(),
+					currency: l.currency || "USD",
+					subtotal: Number(l.subtotal) || 0,
+					taxAmount: Number(l.taxAmount) || 0,
+					total: _,
+					issueDate: l.issueDate ? new Date(l.issueDate).toISOString() : null,
+					dueDate: l.dueDate ? new Date(l.dueDate).toISOString() : null,
+					notes: l.notes.trim() || null
+				}, {
+					onSuccess: () => {
+						i(l.number.trim()), r();
+					},
+					onError: (e) => m(e instanceof Error ? e.message : "Failed.")
+				});
+			},
+			disabled: o.isPending,
+			children: o.isPending ? "Creating…" : "Create invoice"
+		})] }),
+		children: /* @__PURE__ */ j("div", {
+			className: "space-y-3",
+			children: [
+				p && /* @__PURE__ */ A(a, {
+					tone: "danger",
+					children: p
+				}),
+				/* @__PURE__ */ j("div", {
+					className: "grid grid-cols-2 gap-3",
+					children: [/* @__PURE__ */ A(c, {
+						label: "Client",
+						required: !0,
+						children: /* @__PURE__ */ j(f, {
+							value: l.clientId,
+							onChange: g("clientId"),
+							children: [/* @__PURE__ */ A("option", {
+								value: "",
+								children: "Select…"
+							}), s.data?.items.map((e) => /* @__PURE__ */ A("option", {
+								value: e.id,
+								children: e.name
+							}, e.id))]
+						})
+					}), /* @__PURE__ */ A(c, {
+						label: "Number",
+						required: !0,
+						children: /* @__PURE__ */ A(y, {
+							value: l.number,
+							onChange: g("number"),
+							placeholder: "INV-2026-014"
+						})
+					})]
+				}),
+				/* @__PURE__ */ A(c, {
+					label: "Engagement (optional)",
+					children: /* @__PURE__ */ j(f, {
+						value: l.engagementId,
+						onChange: g("engagementId"),
+						disabled: !l.clientId,
+						children: [/* @__PURE__ */ A("option", {
+							value: "",
+							children: "None"
+						}), h.data?.items.map((e) => /* @__PURE__ */ A("option", {
+							value: e.id,
+							children: e.name
+						}, e.id))]
+					})
+				}),
+				/* @__PURE__ */ j("div", {
+					className: "grid grid-cols-3 gap-3",
+					children: [
+						/* @__PURE__ */ A(c, {
+							label: "Subtotal",
+							children: /* @__PURE__ */ A(y, {
+								type: "number",
+								min: "0",
+								value: l.subtotal,
+								onChange: g("subtotal")
+							})
+						}),
+						/* @__PURE__ */ A(c, {
+							label: "Tax",
+							children: /* @__PURE__ */ A(y, {
+								type: "number",
+								min: "0",
+								value: l.taxAmount,
+								onChange: g("taxAmount")
+							})
+						}),
+						/* @__PURE__ */ A(c, {
+							label: "Currency",
+							children: /* @__PURE__ */ A(y, {
+								value: l.currency,
+								onChange: g("currency"),
+								maxLength: 3
+							})
+						})
+					]
+				}),
+				/* @__PURE__ */ j("div", {
+					className: "rounded-lg bg-bg-sunken px-3 py-2 text-sm text-text-secondary",
+					children: [
+						"Total:",
+						" ",
+						/* @__PURE__ */ A("span", {
+							className: "font-semibold text-text-primary",
+							children: C(_, l.currency)
+						})
+					]
+				}),
+				/* @__PURE__ */ j("div", {
+					className: "grid grid-cols-2 gap-3",
+					children: [/* @__PURE__ */ A(c, {
+						label: "Issue date",
+						children: /* @__PURE__ */ A(y, {
+							type: "date",
+							value: l.issueDate,
+							onChange: g("issueDate")
+						})
+					}), /* @__PURE__ */ A(c, {
+						label: "Due date",
+						children: /* @__PURE__ */ A(y, {
+							type: "date",
+							value: l.dueDate,
+							onChange: g("dueDate")
+						})
+					})]
+				}),
+				/* @__PURE__ */ A(c, {
+					label: "Notes",
+					children: /* @__PURE__ */ A(v, {
+						value: l.notes,
+						onChange: g("notes")
+					})
+				})
+			]
+		})
+	});
+};
+//#endregion
+export { P as InvoicesPage };
+
+//# sourceMappingURL=InvoicesPage.js.map

package/dist/proserviceworld/pages/InvoicesPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InvoicesPage.js","names":[],"sources":["../../../src/proserviceworld/pages/InvoicesPage.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport { useMemo, useState } from 'react';\nimport { Button } from '@burdenoff/fe-libs/ui';\nimport { Plus, Receipt, CheckCircle2 } from 'lucide-react';\nimport {\n  useInvoices,\n  useCreateInvoice,\n  useMarkInvoicePaid,\n  useClients,\n  useEngagements,\n  type PswInvoiceStatus,\n} from '../hooks/useProServiceWorldApi';\nimport {\n  PageHeader,\n  SectionCard,\n  LoadingBlock,\n  ErrorState,\n  Empty,\n  StatusPill,\n  Modal,\n  Field,\n  TextInput,\n  TextArea,\n  NativeSelect,\n  Banner,\n  MetricCard,\n  TableWrap,\n  Th,\n  Td,\n  enumOptions,\n  fmtDate,\n  fmtMoney,\n} from '../components/ui';\n\nconst STATUSES: PswInvoiceStatus[] = ['DRAFT', 'SENT', 'PAID', 'OVERDUE', 'CANCELLED'];\n\nexport const InvoicesPage: FC = () => {\n  const [statusFilter, setStatusFilter] = useState<PswInvoiceStatus | ''>('');\n  const [creating, setCreating] = useState(false);\n  const [banner, setBanner] = useState<{ tone: 'success' | 'danger'; text: string } | null>(null);\n  const { data, isLoading, error, refetch } = useInvoices({ status: statusFilter || undefined });\n  const markPaid = useMarkInvoicePaid();\n  const clients = useClients({ pagination: { limit: 100 } });\n  const clientName = useMemo(\n    () => new Map((clients.data?.items ?? []).map((c) => [c.id, c.name])),\n    [clients.data]\n  );\n\n  const outstanding = (data?.items ?? [])\n    .filter((i) => i.status === 'SENT' || i.status === 'OVERDUE')\n    .reduce((s, i) => s + i.total, 0);\n  const collected = (data?.items ?? [])\n    .filter((i) => i.status === 'PAID')\n    .reduce((s, i) => s + i.total, 0);\n\n  return (\n    <div className=\"space-y-6\">\n      <PageHeader\n        title=\"Invoices\"\n        subtitle=\"Assemble invoices from time, milestones and fixed-fee schedules — and track what's outstanding.\"\n        icon={<Receipt className=\"h-6 w-6\" />}\n        actions={\n          <Button onClick={() => setCreating(true)}>\n            <Plus className=\"mr-1.5 h-4 w-4\" />\n            New invoice\n          </Button>\n        }\n      />\n\n      {banner && (\n        <Banner tone={banner.tone} onClose={() => setBanner(null)}>\n          {banner.text}\n        </Banner>\n      )}\n\n      <div className=\"grid grid-cols-3 gap-3\">\n        <MetricCard label=\"Invoices\" value={data?.totalCount ?? 0} />\n        <MetricCard label=\"Outstanding\" value={fmtMoney(outstanding)} tone=\"warning\" />\n        <MetricCard label=\"Collected\" value={fmtMoney(collected)} tone=\"success\" />\n      </div>\n\n      <div className=\"flex justify-end\">\n        <NativeSelect\n          value={statusFilter}\n          onChange={(e) => setStatusFilter(e.target.value as PswInvoiceStatus | '')}\n          className=\"sm:w-48\"\n        >\n          <option value=\"\">All statuses</option>\n          {enumOptions(STATUSES)}\n        </NativeSelect>\n      </div>\n\n      {isLoading ? (\n        <LoadingBlock />\n      ) : error ? (\n        <ErrorState error={error} onRetry={() => void refetch()} />\n      ) : !data || data.items.length === 0 ? (\n        <Empty\n          title=\"No invoices yet\"\n          description=\"Raise an invoice for a client to start tracking receivables.\"\n          icon={<Receipt className=\"h-8 w-8\" />}\n          action={\n            <Button onClick={() => setCreating(true)}>\n              <Plus className=\"mr-1.5 h-4 w-4\" />\n              New invoice\n            </Button>\n          }\n        />\n      ) : (\n        <SectionCard title=\"Invoices\">\n          <TableWrap>\n            <thead>\n              <tr>\n                <Th>Number</Th>\n                <Th>Client</Th>\n                <Th>Total</Th>\n                <Th>Status</Th>\n                <Th>Due</Th>\n                <Th className=\"text-right\">Actions</Th>\n              </tr>\n            </thead>\n            <tbody>\n              {data.items.map((i) => (\n                <tr key={i.id} className=\"hover:bg-bg-sunken/50\">\n                  <Td>\n                    <span className=\"font-medium text-text-primary\">{i.number}</span>\n                  </Td>\n                  <Td>{clientName.get(i.clientId) ?? '—'}</Td>\n                  <Td>{fmtMoney(i.total, i.currency)}</Td>\n                  <Td>\n                    <StatusPill status={i.status} />\n                  </Td>\n                  <Td>{fmtDate(i.dueDate)}</Td>\n                  <Td className=\"text-right\">\n                    {i.status !== 'PAID' && i.status !== 'CANCELLED' && (\n                      <Button\n                        variant=\"ghost\"\n                        size=\"sm\"\n                        disabled={markPaid.isPending}\n                        onClick={() =>\n                          markPaid.mutate(i.id, {\n                            onSuccess: () =>\n                              setBanner({ tone: 'success', text: `${i.number} marked paid.` }),\n                            onError: (e) =>\n                              setBanner({\n                                tone: 'danger',\n                                text: e instanceof Error ? e.message : 'Failed.',\n                              }),\n                          })\n                        }\n                      >\n                        <CheckCircle2 className=\"mr-1 h-4 w-4\" />\n                        Mark paid\n                      </Button>\n                    )}\n                  </Td>\n                </tr>\n              ))}\n            </tbody>\n          </TableWrap>\n        </SectionCard>\n      )}\n\n      {creating && (\n        <InvoiceModal\n          onClose={() => setCreating(false)}\n          onSaved={(n) => setBanner({ tone: 'success', text: `${n} created.` })}\n        />\n      )}\n    </div>\n  );\n};\n\nconst InvoiceModal: FC<{ onClose: () => void; onSaved: (number: string) => void }> = ({\n  onClose,\n  onSaved,\n}) => {\n  const create = useCreateInvoice();\n  const clients = useClients({ pagination: { limit: 100 } });\n  const [form, setForm] = useState({\n    clientId: '',\n    engagementId: '',\n    number: '',\n    currency: 'USD',\n    subtotal: '',\n    taxAmount: '',\n    issueDate: new Date().toISOString().slice(0, 10),\n    dueDate: '',\n    notes: '',\n  });\n  const [err, setErr] = useState<string | null>(null);\n  const engagements = useEngagements({\n    clientId: form.clientId || undefined,\n    pagination: { limit: 100 },\n  });\n  const set = (k: keyof typeof form) => (e: { target: { value: string } }) =>\n    setForm((f) => ({ ...f, [k]: e.target.value }));\n  const total = (Number(form.subtotal) || 0) + (Number(form.taxAmount) || 0);\n\n  const submit = () => {\n    setErr(null);\n    if (!form.clientId) return setErr('Select a client.');\n    if (!form.number.trim()) return setErr('Invoice number is required.');\n    create.mutate(\n      {\n        clientId: form.clientId,\n        engagementId: form.engagementId || null,\n        number: form.number.trim(),\n        currency: form.currency || 'USD',\n        subtotal: Number(form.subtotal) || 0,\n        taxAmount: Number(form.taxAmount) || 0,\n        total,\n        issueDate: form.issueDate ? new Date(form.issueDate).toISOString() : null,\n        dueDate: form.dueDate ? new Date(form.dueDate).toISOString() : null,\n        notes: form.notes.trim() || null,\n      },\n      {\n        onSuccess: () => {\n          onSaved(form.number.trim());\n          onClose();\n        },\n        onError: (e) => setErr(e instanceof Error ? e.message : 'Failed.'),\n      }\n    );\n  };\n\n  return (\n    <Modal\n      open\n      onClose={onClose}\n      title=\"New invoice\"\n      footer={\n        <>\n          <Button variant=\"outline\" onClick={onClose} disabled={create.isPending}>\n            Cancel\n          </Button>\n          <Button onClick={submit} disabled={create.isPending}>\n            {create.isPending ? 'Creating…' : 'Create invoice'}\n          </Button>\n        </>\n      }\n    >\n      <div className=\"space-y-3\">\n        {err && <Banner tone=\"danger\">{err}</Banner>}\n        <div className=\"grid grid-cols-2 gap-3\">\n          <Field label=\"Client\" required>\n            <NativeSelect value={form.clientId} onChange={set('clientId')}>\n              <option value=\"\">Select…</option>\n              {clients.data?.items.map((c) => (\n                <option key={c.id} value={c.id}>\n                  {c.name}\n                </option>\n              ))}\n            </NativeSelect>\n          </Field>\n          <Field label=\"Number\" required>\n            <TextInput value={form.number} onChange={set('number')} placeholder=\"INV-2026-014\" />\n          </Field>\n        </div>\n        <Field label=\"Engagement (optional)\">\n          <NativeSelect\n            value={form.engagementId}\n            onChange={set('engagementId')}\n            disabled={!form.clientId}\n          >\n            <option value=\"\">None</option>\n            {engagements.data?.items.map((e) => (\n              <option key={e.id} value={e.id}>\n                {e.name}\n              </option>\n            ))}\n          </NativeSelect>\n        </Field>\n        <div className=\"grid grid-cols-3 gap-3\">\n          <Field label=\"Subtotal\">\n            <TextInput type=\"number\" min=\"0\" value={form.subtotal} onChange={set('subtotal')} />\n          </Field>\n          <Field label=\"Tax\">\n            <TextInput type=\"number\" min=\"0\" value={form.taxAmount} onChange={set('taxAmount')} />\n          </Field>\n          <Field label=\"Currency\">\n            <TextInput value={form.currency} onChange={set('currency')} maxLength={3} />\n          </Field>\n        </div>\n        <div className=\"rounded-lg bg-bg-sunken px-3 py-2 text-sm text-text-secondary\">\n          Total:{' '}\n          <span className=\"font-semibold text-text-primary\">{fmtMoney(total, form.currency)}</span>\n        </div>\n        <div className=\"grid grid-cols-2 gap-3\">\n          <Field label=\"Issue date\">\n            <TextInput type=\"date\" value={form.issueDate} onChange={set('issueDate')} />\n          </Field>\n          <Field label=\"Due date\">\n            <TextInput type=\"date\" value={form.dueDate} onChange={set('dueDate')} />\n          </Field>\n        </div>\n        <Field label=\"Notes\">\n          <TextArea value={form.notes} onChange={set('notes')} />\n        </Field>\n      </div>\n    </Modal>\n  );\n};\n"],"mappings":"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"}