@burdenoff/microfe-proserviceworld 2026.706.2 → 2026.709.1

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

@@ -1 +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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"}
+{"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, ChevronRight } from 'lucide-react';\nimport {\n  useEngagements,\n  useCreateEngagement,\n  useClients,\n  usePracticeAreas,\n  type PswEngagementStatus,\n  type PswEngagement,\n} from '../hooks/useProServiceWorldApi';\nimport { useNav } from '../utils/nav';\nimport { useAnalytics } from '../hooks/useAnalytics';\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  humanize,\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\nconst initials = (name: string): string =>\n  name\n    .split(/\\s+/)\n    .filter(Boolean)\n    .slice(0, 2)\n    .map((w) => w[0]?.toUpperCase() ?? '')\n    .join('') || '?';\n\nconst ClientAvatar: FC<{ name: string }> = ({ name }) => (\n  <span\n    className=\"flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-accent/10 text-[10px] font-semibold text-accent ring-1 ring-inset ring-accent/15\"\n    aria-hidden\n  >\n    {initials(name)}\n  </span>\n);\n\nexport const EngagementsPage: FC = () => {\n  const nav = useNav();\n  const { emitIntent, emitFact } = useAnalytics();\n  const [search, setSearch] = useState('');\n  const [statusFilter, setStatusFilter] = useState<PswEngagementStatus | ''>('');\n  const [clientFilter, setClientFilter] = useState('');\n  const [creating, setCreating] = useState(false);\n  const [banner, setBanner] = useState<string | null>(null);\n  const clients = useClients({ pagination: { limit: 100 } });\n  const { data, isLoading, error, refetch } = useEngagements({\n    search: search.trim() || undefined,\n    status: statusFilter || undefined,\n    clientId: clientFilter || 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\n            onClick={() => {\n              emitIntent('psw.engagement.create_clicked');\n              setCreating(true);\n            }}\n          >\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            onKeyDown={(e) => {\n              if (e.key === 'Enter' && search.trim()) {\n                emitFact('psw.search.performed', {\n                  entityType: 'engagement',\n                  queryLength: search.trim().length,\n                });\n              }\n            }}\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-44\"\n        >\n          <option value=\"\">All statuses</option>\n          {enumOptions(STATUSES)}\n        </NativeSelect>\n        <NativeSelect\n          value={clientFilter}\n          onChange={(e) => setClientFilter(e.target.value)}\n          className=\"sm:w-48\"\n        >\n          <option value=\"\">All clients</option>\n          {clients.data?.items.map((c) => (\n            <option key={c.id} value={c.id}>\n              {c.name}\n            </option>\n          ))}\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=\"group cursor-pointer transition-colors hover:bg-bg-sunken/60\"\n                  onClick={() => nav(`engagements/${e.id}`)}\n                >\n                  <Td>\n                    <div className=\"flex items-center gap-1 font-medium text-text-primary transition-colors group-hover:text-accent\">\n                      <span>{e.name}</span>\n                      <ChevronRight className=\"h-3.5 w-3.5 shrink-0 text-text-tertiary opacity-0 transition-opacity group-hover:opacity-100\" />\n                    </div>\n                    {e.description ? (\n                      <div className=\"mt-0.5 max-w-md truncate text-xs text-text-tertiary\">\n                        {e.description}\n                      </div>\n                    ) : null}\n                  </Td>\n                  <Td>\n                    <span className=\"inline-flex items-center gap-2.5\">\n                      <ClientAvatar name={e.client?.name ?? '—'} />\n                      <span className=\"text-text-secondary\">{e.client?.name ?? '—'}</span>\n                    </span>\n                  </Td>\n                  <Td className=\"whitespace-nowrap\">\n                    <span className=\"font-medium text-text-primary\">\n                      {fmtMoney(e.feeAmount, e.currency)}\n                    </span>{' '}\n                    <span className=\"text-xs text-text-tertiary\">\n                      / {humanize(e.feeArrangement)}\n                    </span>\n                  </Td>\n                  <Td>\n                    <StatusPill status={e.status} />\n                  </Td>\n                  <Td className=\"whitespace-nowrap\">{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 { emitFact } = useAnalytics();\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: (created) => {\n          const engagement = (created as { pswCreateEngagement: PswEngagement })\n            .pswCreateEngagement;\n          emitFact('psw.engagement.created', {\n            engagementId: engagement.id,\n            clientId: form.clientId,\n          });\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.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+
+export declare const InvoicesPage: FC;
+//# sourceMappingURL=InvoicesPage.d.ts.map

package/dist/proserviceworld/pages/InvoicesPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InvoicesPage.d.ts","sourceRoot":"","sources":["../../../src/proserviceworld/pages/InvoicesPage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAqChC,eAAO,MAAM,YAAY,EAAE,EAgK1B,CAAC"}

package/dist/proserviceworld/pages/InvoicesPage.js

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