@burdenoff/microfe-proserviceworld 2026.706.2 → 2026.709.1

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

@@ -1 +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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"}
+{"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, AlertCircle, Wallet } 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';\nimport { cn } from '../utils/cn';\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 outstandingInvoices = (data?.items ?? []).filter(\n    (i) => i.status === 'SENT' || i.status === 'OVERDUE'\n  );\n  const paidInvoices = (data?.items ?? []).filter((i) => i.status === 'PAID');\n  const outstanding = outstandingInvoices.reduce((s, i) => s + i.total, 0);\n  const collected = paidInvoices.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-1 gap-3 sm:grid-cols-3\">\n        <MetricCard\n          label=\"Invoices\"\n          value={data?.totalCount ?? 0}\n          icon={<Receipt className=\"h-4 w-4\" />}\n        />\n        <MetricCard\n          label=\"Outstanding\"\n          value={fmtMoney(outstanding)}\n          hint={`${outstandingInvoices.length} sent + overdue`}\n          icon={<AlertCircle className=\"h-4 w-4\" />}\n          tone=\"warning\"\n        />\n        <MetricCard\n          label=\"Collected\"\n          value={fmtMoney(collected)}\n          hint={`${paidInvoices.length} paid`}\n          icon={<Wallet className=\"h-4 w-4\" />}\n          tone=\"success\"\n        />\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=\"transition-colors hover:bg-bg-sunken/60\">\n                  <Td>\n                    <span className=\"font-medium text-text-primary\">{i.number}</span>\n                  </Td>\n                  <Td className=\"text-text-primary\">{clientName.get(i.clientId) ?? '—'}</Td>\n                  <Td className=\"whitespace-nowrap font-semibold text-text-primary\">\n                    {fmtMoney(i.total, i.currency)}\n                  </Td>\n                  <Td>\n                    <StatusPill status={i.status} />\n                  </Td>\n                  <Td\n                    className={cn(\n                      'whitespace-nowrap',\n                      i.status === 'OVERDUE' && 'font-medium text-status-error-text'\n                    )}\n                  >\n                    {fmtDate(i.dueDate)}\n                  </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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"}

package/dist/proserviceworld/pages/MattersPage.d.ts

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

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

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

package/dist/proserviceworld/pages/MattersPage.js

@@ -1,135 +1,184 @@
 import { useClients as e, useCloseMatter as t, useCreateMatter as n, useMatters as r, usePracticeAreas as i } from "../hooks/useProServiceWorldApi.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 } from "../components/ui.js";
-import { useState as S } from "react";
-import { CheckCircle2 as C, FolderKanban as w, Lock as T, Plus as E, Search as D } from "lucide-react";
-import { Fragment as O, jsx as k, jsxs as A } from "react/jsx-runtime";
-import { Button as j } from "@burdenoff/fe-libs/ui";
+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 } from "../components/ui.js";
+import { useAnalytics as C } from "../hooks/useAnalytics.js";
+import { useState as w } from "react";
+import { AlertTriangle as T, CheckCircle2 as E, CircleDot as D, FolderKanban as O, Lock as k, Plus as A, Search 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/MattersPage.tsx
-var M = [
+var I = [
 	"OPEN",
 	"ON_HOLD",
 	"CLOSED",
 	"ARCHIVED"
-], N = [
+], L = [
 	"LOW",
 	"MEDIUM",
 	"HIGH",
 	"CRITICAL"
-], P = () => {
-	let [e, n] = S(""), [i, c] = S(""), [u, _] = S(!1), [O, N] = S(null), { data: P, isLoading: I, error: L, refetch: R } = r({
-		search: e.trim() || void 0,
-		status: i || void 0
-	}), z = t();
-	return /* @__PURE__ */ A("div", {
+], R = () => /* @__PURE__ */ N("span", {
+	className: "inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-md bg-status-warning-bg-subtle text-status-warning-text",
+	title: "Privileged / confidential",
+	"aria-label": "Privileged",
+	children: /* @__PURE__ */ N(k, { className: "h-3 w-3" })
+}), z = () => {
+	let { emitIntent: e, emitFact: n } = C(), [i, c] = w(""), [d, v] = w(""), [L, z] = w(!1), [V, H] = w(null), { data: U, isLoading: W, error: G, refetch: K } = r({
+		search: i.trim() || void 0,
+		status: d || void 0
+	}), q = t(), J = U?.items ?? [], Y = J.filter((e) => e.status === "OPEN").length, X = J.filter((e) => e.isPrivileged).length, Z = J.filter((e) => e.priority === "HIGH" || e.priority === "CRITICAL").length;
+	return /* @__PURE__ */ P("div", {
 		className: "space-y-6",
 		children: [
-			/* @__PURE__ */ k(f, {
+			/* @__PURE__ */ N(p, {
 				title: "Matters",
 				subtitle: "The regulated threads of work — legal matters, audits, filings — with their own deadlines and sensitive-document handling.",
-				icon: /* @__PURE__ */ k(w, { className: "h-6 w-6" }),
-				actions: /* @__PURE__ */ A(j, {
-					onClick: () => _(!0),
-					children: [/* @__PURE__ */ k(E, { className: "mr-1.5 h-4 w-4" }), "New matter"]
+				icon: /* @__PURE__ */ N(O, { className: "h-6 w-6" }),
+				actions: /* @__PURE__ */ P(F, {
+					onClick: () => {
+						e("psw.matter.create_clicked"), z(!0);
+					},
+					children: [/* @__PURE__ */ N(A, { className: "mr-1.5 h-4 w-4" }), "New matter"]
 				})
 			}),
-			O && /* @__PURE__ */ k(a, {
-				tone: O.tone,
-				onClose: () => N(null),
-				children: O.text
+			V && /* @__PURE__ */ N(a, {
+				tone: V.tone,
+				onClose: () => H(null),
+				children: V.text
 			}),
-			/* @__PURE__ */ A("div", {
+			/* @__PURE__ */ P("div", {
 				className: "flex flex-col gap-2 sm:flex-row sm:items-center",
-				children: [/* @__PURE__ */ A("div", {
+				children: [/* @__PURE__ */ P("div", {
 					className: "relative flex-1",
-					children: [/* @__PURE__ */ k(D, { className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-text-tertiary" }), /* @__PURE__ */ k(v, {
+					children: [/* @__PURE__ */ N(j, { className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-text-tertiary" }), /* @__PURE__ */ N(y, {
 						placeholder: "Search matters…",
-						value: e,
-						onChange: (e) => n(e.target.value),
+						value: i,
+						onChange: (e) => c(e.target.value),
+						onKeyDown: (e) => {
+							e.key === "Enter" && i.trim() && n("psw.search.performed", {
+								entityType: "matter",
+								queryLength: i.trim().length
+							});
+						},
 						className: "pl-9"
 					})]
-				}), /* @__PURE__ */ A(d, {
-					value: i,
-					onChange: (e) => c(e.target.value),
+				}), /* @__PURE__ */ P(f, {
+					value: d,
+					onChange: (e) => v(e.target.value),
 					className: "sm:w-48",
-					children: [/* @__PURE__ */ k("option", {
+					children: [/* @__PURE__ */ N("option", {
 						value: "",
 						children: "All statuses"
-					}), b(M)]
+					}), x(I)]
 				})]
 			}),
-			I ? /* @__PURE__ */ k(l, {}) : L ? /* @__PURE__ */ k(s, {
-				error: L,
-				onRetry: () => void R()
-			}) : !P || P.items.length === 0 ? /* @__PURE__ */ k(o, {
+			W ? /* @__PURE__ */ N(l, {}) : G ? /* @__PURE__ */ N(s, {
+				error: G,
+				onRetry: () => void K()
+			}) : !U || U.items.length === 0 ? /* @__PURE__ */ N(o, {
 				title: "No matters yet",
 				description: "Open a matter to track a regulated thread of work for a client.",
-				icon: /* @__PURE__ */ k(w, { className: "h-8 w-8" }),
-				action: /* @__PURE__ */ A(j, {
-					onClick: () => _(!0),
-					children: [/* @__PURE__ */ k(E, { className: "mr-1.5 h-4 w-4" }), "New matter"]
+				icon: /* @__PURE__ */ N(O, { className: "h-8 w-8" }),
+				action: /* @__PURE__ */ P(F, {
+					onClick: () => z(!0),
+					children: [/* @__PURE__ */ N(A, { className: "mr-1.5 h-4 w-4" }), "New matter"]
 				})
-			}) : /* @__PURE__ */ k(p, {
-				title: `${P.totalCount} matter${P.totalCount === 1 ? "" : "s"}`,
-				children: /* @__PURE__ */ A(h, { children: [/* @__PURE__ */ k("thead", { children: /* @__PURE__ */ A("tr", { children: [
-					/* @__PURE__ */ k(y, { children: "Matter" }),
-					/* @__PURE__ */ k(y, { children: "Client" }),
-					/* @__PURE__ */ k(y, { children: "Priority" }),
-					/* @__PURE__ */ k(y, { children: "Status" }),
-					/* @__PURE__ */ k(y, { children: "Due" }),
-					/* @__PURE__ */ k(y, {
+			}) : /* @__PURE__ */ P(M, { children: [/* @__PURE__ */ P("div", {
+				className: "grid grid-cols-2 gap-3 lg:grid-cols-4",
+				children: [
+					/* @__PURE__ */ N(u, {
+						label: "Matters",
+						value: U.totalCount,
+						icon: /* @__PURE__ */ N(O, { className: "h-4 w-4" })
+					}),
+					/* @__PURE__ */ N(u, {
+						label: "Open",
+						value: Y,
+						icon: /* @__PURE__ */ N(D, { className: "h-4 w-4" }),
+						tone: "accent"
+					}),
+					/* @__PURE__ */ N(u, {
+						label: "Privileged",
+						value: X,
+						icon: /* @__PURE__ */ N(k, { className: "h-4 w-4" }),
+						tone: "warning"
+					}),
+					/* @__PURE__ */ N(u, {
+						label: "High priority",
+						value: Z,
+						icon: /* @__PURE__ */ N(T, { className: "h-4 w-4" }),
+						tone: Z ? "danger" : "neutral"
+					})
+				]
+			}), /* @__PURE__ */ N(m, {
+				title: `${U.totalCount} matter${U.totalCount === 1 ? "" : "s"}`,
+				children: /* @__PURE__ */ P(g, { children: [/* @__PURE__ */ N("thead", { children: /* @__PURE__ */ P("tr", { children: [
+					/* @__PURE__ */ N(b, { children: "Matter" }),
+					/* @__PURE__ */ N(b, { children: "Client" }),
+					/* @__PURE__ */ N(b, { children: "Priority" }),
+					/* @__PURE__ */ N(b, { children: "Status" }),
+					/* @__PURE__ */ N(b, { children: "Due" }),
+					/* @__PURE__ */ N(b, {
 						className: "text-right",
 						children: "Actions"
 					})
-				] }) }), /* @__PURE__ */ k("tbody", { children: P.items.map((e) => /* @__PURE__ */ A("tr", {
-					className: "hover:bg-bg-sunken/50",
+				] }) }), /* @__PURE__ */ N("tbody", { children: U.items.map((e) => /* @__PURE__ */ P("tr", {
+					className: "transition-colors hover:bg-bg-sunken/60",
 					children: [
-						/* @__PURE__ */ A(g, { children: [/* @__PURE__ */ A("span", {
-							className: "flex items-center gap-1.5 font-medium text-text-primary",
-							children: [e.isPrivileged && /* @__PURE__ */ k(T, {
-								className: "h-3.5 w-3.5 text-status-warning-text",
-								"aria-label": "Privileged"
-							}), e.title]
-						}), e.reference ? /* @__PURE__ */ k("div", {
-							className: "text-xs text-text-tertiary",
-							children: e.reference
+						/* @__PURE__ */ P(_, { children: [/* @__PURE__ */ P("span", {
+							className: "flex items-center gap-2 font-medium text-text-primary",
+							children: [e.isPrivileged && /* @__PURE__ */ N(R, {}), /* @__PURE__ */ N("span", {
+								className: "truncate",
+								children: e.title
+							})]
+						}), e.reference ? /* @__PURE__ */ P("div", {
+							className: "mt-0.5 pl-0 text-xs text-text-tertiary",
+							children: ["Ref: ", e.reference]
 						}) : null] }),
-						/* @__PURE__ */ k(g, { children: e.client?.name ?? "—" }),
-						/* @__PURE__ */ k(g, { children: /* @__PURE__ */ k(m, { status: e.priority }) }),
-						/* @__PURE__ */ k(g, { children: /* @__PURE__ */ k(m, { status: e.status }) }),
-						/* @__PURE__ */ k(g, { children: x(e.dueDate) }),
-						/* @__PURE__ */ k(g, {
+						/* @__PURE__ */ N(_, {
+							className: "text-text-primary",
+							children: e.client?.name ?? "—"
+						}),
+						/* @__PURE__ */ N(_, { children: /* @__PURE__ */ N(h, { status: e.priority }) }),
+						/* @__PURE__ */ N(_, { children: /* @__PURE__ */ N(h, { status: e.status }) }),
+						/* @__PURE__ */ N(_, { children: S(e.dueDate) }),
+						/* @__PURE__ */ N(_, {
 							className: "text-right",
-							children: e.status !== "CLOSED" && e.status !== "ARCHIVED" && /* @__PURE__ */ A(j, {
+							children: e.status !== "CLOSED" && e.status !== "ARCHIVED" ? /* @__PURE__ */ P(F, {
 								variant: "ghost",
 								size: "sm",
-								disabled: z.isPending,
-								onClick: () => z.mutate(e.id, {
-									onSuccess: () => N({
-										tone: "success",
-										text: `${e.title} closed.`
-									}),
-									onError: (e) => N({
+								disabled: q.isPending,
+								onClick: () => q.mutate(e.id, {
+									onSuccess: () => {
+										n("psw.matter.closed", { matterId: e.id }), H({
+											tone: "success",
+											text: `${e.title} closed.`
+										});
+									},
+									onError: (e) => H({
 										tone: "danger",
 										text: e instanceof Error ? e.message : "Failed."
 									})
 								}),
-								children: [/* @__PURE__ */ k(C, { className: "mr-1 h-4 w-4" }), " Close"]
+								children: [/* @__PURE__ */ N(E, { className: "mr-1 h-4 w-4" }), " Close"]
+							}) : /* @__PURE__ */ N("span", {
+								className: "text-xs text-text-tertiary",
+								children: e.closedAt ? `Closed ${S(e.closedAt)}` : "—"
 							})
 						})
 					]
 				}, e.id)) })] })
-			}),
-			u && /* @__PURE__ */ k(F, {
-				onClose: () => _(!1),
-				onSaved: (e) => N({
+			})] }),
+			L && /* @__PURE__ */ N(B, {
+				onClose: () => z(!1),
+				onSaved: (e) => H({
 					tone: "success",
 					text: `${e} opened.`
 				})
 			})
 		]
 	});
-}, F = ({ onClose: t, onSaved: r }) => {
-	let o = n(), s = e({ pagination: { limit: 100 } }), l = i(), [f, p] = S({
+}, B = ({ onClose: t, onSaved: r }) => {
+	let o = n(), { emitFact: s } = C(), l = e({ pagination: { limit: 100 } }), u = i(), [p, m] = w({
 		clientId: "",
 		practiceAreaId: "",
 		title: "",
@@ -138,138 +187,145 @@ var M = [
 		priority: "MEDIUM",
 		dueDate: "",
 		isPrivileged: !1
-	}), [m, h] = S(null), g = (e) => (t) => p((n) => ({
+	}), [h, g] = w(null), _ = (e) => (t) => m((n) => ({
 		...n,
 		[e]: t.target.value
 	}));
-	return /* @__PURE__ */ k(u, {
+	return /* @__PURE__ */ N(d, {
 		open: !0,
 		onClose: t,
 		title: "New matter",
-		footer: /* @__PURE__ */ A(O, { children: [/* @__PURE__ */ k(j, {
+		footer: /* @__PURE__ */ P(M, { children: [/* @__PURE__ */ N(F, {
 			variant: "outline",
 			onClick: t,
 			disabled: o.isPending,
 			children: "Cancel"
-		}), /* @__PURE__ */ k(j, {
+		}), /* @__PURE__ */ N(F, {
 			onClick: () => {
-				if (h(null), !f.clientId) return h("Select a client.");
-				if (!f.title.trim()) return h("Matter title is required.");
+				if (g(null), !p.clientId) return g("Select a client.");
+				if (!p.title.trim()) return g("Matter title is required.");
 				o.mutate({
-					clientId: f.clientId,
-					practiceAreaId: f.practiceAreaId || null,
-					title: f.title.trim(),
-					reference: f.reference.trim() || null,
-					description: f.description.trim() || null,
-					priority: f.priority,
-					isPrivileged: f.isPrivileged,
-					dueDate: f.dueDate ? new Date(f.dueDate).toISOString() : null
+					clientId: p.clientId,
+					practiceAreaId: p.practiceAreaId || null,
+					title: p.title.trim(),
+					reference: p.reference.trim() || null,
+					description: p.description.trim() || null,
+					priority: p.priority,
+					isPrivileged: p.isPrivileged,
+					dueDate: p.dueDate ? new Date(p.dueDate).toISOString() : null
 				}, {
-					onSuccess: () => {
-						r(f.title.trim()), t();
+					onSuccess: (e) => {
+						let n = e.pswCreateMatter;
+						s("psw.matter.created", {
+							matterId: n.id,
+							clientId: p.clientId
+						}), r(p.title.trim()), t();
 					},
-					onError: (e) => h(e instanceof Error ? e.message : "Failed.")
+					onError: (e) => g(e instanceof Error ? e.message : "Failed.")
 				});
 			},
 			disabled: o.isPending,
 			children: o.isPending ? "Opening…" : "Open matter"
 		})] }),
-		children: /* @__PURE__ */ A("div", {
+		children: /* @__PURE__ */ P("div", {
 			className: "space-y-3",
 			children: [
-				m && /* @__PURE__ */ k(a, {
+				h && /* @__PURE__ */ N(a, {
 					tone: "danger",
-					children: m
+					children: h
 				}),
-				/* @__PURE__ */ k(c, {
+				/* @__PURE__ */ N(c, {
 					label: "Client",
 					required: !0,
-					children: /* @__PURE__ */ A(d, {
-						value: f.clientId,
-						onChange: g("clientId"),
-						children: [/* @__PURE__ */ k("option", {
+					children: /* @__PURE__ */ P(f, {
+						value: p.clientId,
+						onChange: _("clientId"),
+						children: [/* @__PURE__ */ N("option", {
 							value: "",
 							children: "Select a client…"
-						}), s.data?.items.map((e) => /* @__PURE__ */ k("option", {
+						}), l.data?.items.map((e) => /* @__PURE__ */ N("option", {
 							value: e.id,
 							children: e.name
 						}, e.id))]
 					})
 				}),
-				/* @__PURE__ */ k(c, {
+				/* @__PURE__ */ N(c, {
 					label: "Title",
 					required: !0,
-					children: /* @__PURE__ */ k(v, {
-						value: f.title,
-						onChange: g("title"),
+					children: /* @__PURE__ */ N(y, {
+						value: p.title,
+						onChange: _("title"),
 						placeholder: "Regulatory investigation — SEC inquiry"
 					})
 				}),
-				/* @__PURE__ */ A("div", {
+				/* @__PURE__ */ P("div", {
 					className: "grid grid-cols-2 gap-3",
-					children: [/* @__PURE__ */ k(c, {
+					children: [/* @__PURE__ */ N(c, {
 						label: "Reference",
-						children: /* @__PURE__ */ k(v, {
-							value: f.reference,
-							onChange: g("reference"),
+						children: /* @__PURE__ */ N(y, {
+							value: p.reference,
+							onChange: _("reference"),
 							placeholder: "MAT-2026-014"
 						})
-					}), /* @__PURE__ */ k(c, {
+					}), /* @__PURE__ */ N(c, {
 						label: "Priority",
-						children: /* @__PURE__ */ k(d, {
-							value: f.priority,
-							onChange: g("priority"),
-							children: b(N)
+						children: /* @__PURE__ */ N(f, {
+							value: p.priority,
+							onChange: _("priority"),
+							children: x(L)
 						})
 					})]
 				}),
-				/* @__PURE__ */ A("div", {
+				/* @__PURE__ */ P("div", {
 					className: "grid grid-cols-2 gap-3",
-					children: [/* @__PURE__ */ k(c, {
+					children: [/* @__PURE__ */ N(c, {
 						label: "Practice area",
-						children: /* @__PURE__ */ A(d, {
-							value: f.practiceAreaId,
-							onChange: g("practiceAreaId"),
-							children: [/* @__PURE__ */ k("option", {
+						children: /* @__PURE__ */ P(f, {
+							value: p.practiceAreaId,
+							onChange: _("practiceAreaId"),
+							children: [/* @__PURE__ */ N("option", {
 								value: "",
 								children: "Unassigned"
-							}), l.data?.map((e) => /* @__PURE__ */ k("option", {
+							}), u.data?.map((e) => /* @__PURE__ */ N("option", {
 								value: e.id,
 								children: e.name
 							}, e.id))]
 						})
-					}), /* @__PURE__ */ k(c, {
+					}), /* @__PURE__ */ N(c, {
 						label: "Due date",
-						children: /* @__PURE__ */ k(v, {
+						children: /* @__PURE__ */ N(y, {
 							type: "date",
-							value: f.dueDate,
-							onChange: g("dueDate")
+							value: p.dueDate,
+							onChange: _("dueDate")
 						})
 					})]
 				}),
-				/* @__PURE__ */ k(c, {
+				/* @__PURE__ */ N(c, {
 					label: "Description",
-					children: /* @__PURE__ */ k(_, {
-						value: f.description,
-						onChange: g("description")
+					children: /* @__PURE__ */ N(v, {
+						value: p.description,
+						onChange: _("description")
 					})
 				}),
-				/* @__PURE__ */ A("label", {
-					className: "flex items-center gap-2 text-sm text-text-secondary",
-					children: [/* @__PURE__ */ k("input", {
+				/* @__PURE__ */ P("label", {
+					className: "flex items-center gap-2.5 rounded-lg border border-border-seam bg-bg-canvas px-3 py-2.5 text-sm text-text-secondary",
+					children: [/* @__PURE__ */ N("input", {
 						type: "checkbox",
-						checked: f.isPrivileged,
-						onChange: (e) => p((t) => ({
+						checked: p.isPrivileged,
+						onChange: (e) => m((t) => ({
 							...t,
 							isPrivileged: e.target.checked
 						}))
-					}), "Privileged / confidential matter"]
+					}), /* @__PURE__ */ P("span", {
+						className: "flex items-center gap-1.5",
+						children: [/* @__PURE__ */ N(k, { className: "h-3.5 w-3.5 text-status-warning-text" }), "Privileged / confidential matter"]
+					})]
 				})
 			]
 		})
 	});
 };
 //#endregion
-export { P as MattersPage };
+export { z as MattersPage };
 
 //# sourceMappingURL=MattersPage.js.map