@lotics/ui 11.8.9 → 12.0.0

package/examples/tpl_documents.tsx

@@ -12,10 +12,9 @@ import { Alert } from "@lotics/ui/alert";
 import { ActionMenu, type ActionMenuItem } from "@lotics/ui/action_menu";
 import { Table, TableRow, TableCell, type TableColumn } from "@lotics/ui/table";
 import { cycleSort, sortBy, type SortState } from "@lotics/ui/sort_header";
-import { FileBadge } from "@lotics/ui/file_badge";
 import { Finding, FindingComparison } from "@lotics/ui/finding";
 import { FileGalleryModal } from "@lotics/ui/file_gallery_modal";
-import { type DisplayFile } from "@lotics/ui/file_thumbnail";
+import { FileThumbnail, type DisplayFile } from "@lotics/ui/file_thumbnail";
 import { FormTextInput } from "@lotics/ui/form_text_input";
 import { CheckboxInput } from "@lotics/ui/checkbox_input";
 import { SearchInput } from "@lotics/ui/search_input";
@@ -43,25 +42,35 @@ import { CompletionState } from "@lotics/ui/completion_state";
 // dialogue-shaped file iteration happens in the Lotics chat; the fork is the ONE
 // AI entry point, never per-row AI buttons). Plus CREATE DOCUMENTS: a
 // readiness checklist → generate → the files land back on the record. All
-// mock, useState + the timer that streams the AgentRun.
+// mock, useState + the timer that streams the AgentRun. The record template
+// (tpl_record) carries this desk as its Documents section — change it in
+// BOTH. One sanctioned divergence: GENERATION. This page has no output
+// pipeline, so Create documents runs as the toolbar dialog here; tpl_record
+// moves it into its Document set OUTPUT section (intake desk / output section
+// split) and drops the toolbar button.
 // ─────────────────────────────────────────────────────────────────────────────
 
 type ScriptStep = Omit<AgentRunStep, "status">;
 type Task = "extract" | "check";
 type Phase = "fork" | "running" | "review" | "done";
 
-interface Doc { id: string; name: string; mimeType: string; kind: string; sizeKB: number; added: string; addedAt: number }
+interface Doc { id: string; name: string; mimeType: string; kind: string; sizeKB: number; added: string; addedAt: number; url?: string }
 
 // Display derives from the canonical numeric — strings would sort "8.4 MB" < "96 KB".
 function fmtSize(kb: number): string {
   if (kb <= 0) return "—";
   return kb < 1024 ? `${kb} KB` : `${(kb / 1024).toFixed(1)} MB`;
 }
+const MOCK_PHOTO_URL =
+  "data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSczMjAnIGhlaWdodD0nMzIwJz48cmVjdCB3aWR0aD0nMzIwJyBoZWlnaHQ9JzMyMCcgZmlsbD0nI2JmZGJmZScvPjxyZWN0IHk9JzIxMCcgd2lkdGg9JzMyMCcgaGVpZ2h0PScxMTAnIGZpbGw9JyNhOGEyOWUnLz48cmVjdCB4PScyMCcgeT0nMTUwJyB3aWR0aD0nMTI0JyBoZWlnaHQ9JzYwJyBmaWxsPScjZGMyNjI2Jy8+PHJlY3QgeD0nMTUyJyB5PScxNTAnIHdpZHRoPScxMjQnIGhlaWdodD0nNjAnIGZpbGw9JyMyNTYzZWInLz48cmVjdCB4PSc4NicgeT0nODgnIHdpZHRoPScxMjQnIGhlaWdodD0nNjAnIGZpbGw9JyNmNTllMGInLz48cmVjdCB4PScyNjInIHk9JzI0JyB3aWR0aD0nMTAnIGhlaWdodD0nMTg2JyBmaWxsPScjNTI1MjUyJy8+PHJlY3QgeD0nMTUwJyB5PScyNCcgd2lkdGg9JzEyMicgaGVpZ2h0PScxMCcgZmlsbD0nIzUyNTI1MicvPjwvc3ZnPg==";
 const DOCS: Doc[] = [
   { id: "f1", name: "invoice.pdf", mimeType: "application/pdf", kind: "PDF", sizeKB: 214, added: "26 Jun", addedAt: 626 },
   { id: "f2", name: "packing-list.pdf", mimeType: "application/pdf", kind: "PDF", sizeKB: 96, added: "26 Jun", addedAt: 626 },
   { id: "f3", name: "booking-confirmation.pdf", mimeType: "application/pdf", kind: "PDF", sizeKB: 182, added: "28 Jun", addedAt: 628 },
   { id: "f4", name: "photos.zip", mimeType: "application/zip", kind: "ZIP", sizeKB: 8602, added: "30 Jun", addedAt: 630 },
+  // an IMAGE file — the register renders it as a real square thumbnail (the
+  // SVG data URI stands in for the stored photo URL a live app serves)
+  { id: "f5", name: "delivery-photo.jpg", mimeType: "image/jpeg", kind: "JPG", sizeKB: 1424, added: "30 Jun", addedAt: 630, url: MOCK_PHOTO_URL },
 ];
 
 const EXTRACT_STEPS: ScriptStep[] = [
@@ -80,17 +89,17 @@ const CHECK_STEPS: ScriptStep[] = [
 // CONFLICT — are the SAME `ChangeField` row: an add has no `before`, an update
 // bands it, a removal is the − band alone, and a conflict's outcome is the
 // read-only + band over the candidate rows.
-const MBL_PROPOSED = "MAEU129394855";
+const CARRIER_REF_PROPOSED = "MAEU129394855";
 const VESSEL_CURRENT = "MSC AURA";
 const VESSEL_PROPOSED = "MAERSK SALINA";
 const CONSIGNEE_CURRENT = "Nordic Furniture AB";
 const NOTIFY_CURRENT = "Euro Textile Trading GmbH, Frankfurt";
-const EXTRACT_REASONING = "The booking confirmation names the substitute vessel for this sailing week; the invoice and the packing list disagree on the consignee.";
+const EXTRACT_REASONING = "The booking confirmation names the substitute vessel for this shipping week; the invoice and the packing list disagree on the consignee.";
 const CONSIGNEE_OPTIONS = [
   { value: "Nordic Furniture AB, Jönköping DC", source: "invoice.pdf", recommended: true },
   { value: "NF Distribution ApS, Kolding", source: "packing-list.pdf" },
 ];
-const EXTRACT_FIELD_IDS = ["mbl", "vessel", "consignee", "gross", "notify"] as const;
+const EXTRACT_FIELD_IDS = ["carrier_ref", "vessel", "consignee", "gross", "notify"] as const;
 
 // Cross-check findings — severity reads through ONE colored dot badge (red /
 // amber / zinc), the rest stays calm text.
@@ -110,7 +119,7 @@ const FINDINGS: Check[] = [
   },
   {
     id: "q4", severity: "warning", title: "No certificate of origin among the documents",
-    detail: "Destination customs requires a C/O for this HS chapter — request it before the vessel cut-off.",
+    detail: "Destination customs requires a certificate of origin for these goods — request it before the shipping cut-off.",
   },
   {
     id: "q3", severity: "info", title: "Booking cut-off is earlier than the invoiced ship week",
@@ -121,7 +130,7 @@ const FINDINGS: Check[] = [
 
 // A tiny REAL pdf (data URI) so the gallery preview genuinely renders.
 const MOCK_PDF_URL = "data:application/pdf;base64,JVBERi0xLjQKMSAwIG9iajw8L1R5cGUvQ2F0YWxvZy9QYWdlcyAyIDAgUj4+ZW5kb2JqCjIgMCBvYmo8PC9UeXBlL1BhZ2VzL0tpZHNbMyAwIFJdL0NvdW50IDE+PmVuZG9iagozIDAgb2JqPDwvVHlwZS9QYWdlL1BhcmVudCAyIDAgUi9NZWRpYUJveFswIDAgNjEyIDc5Ml0vQ29udGVudHMgNCAwIFIvUmVzb3VyY2VzPDwvRm9udDw8L0YxIDUgMCBSPj4+Pj4+ZW5kb2JqCjQgMCBvYmo8PC9MZW5ndGggNjM+PnN0cmVhbQpCVCAvRjEgMTggVGYgNzIgNzIwIFRkIChOb3JkaWMgRnVybml0dXJlIC0gbW9jayBkb2N1bWVudCkgVGogRVQKZW5kc3RyZWFtIGVuZG9iago1IDAgb2JqPDwvVHlwZS9Gb250L1N1YnR5cGUvVHlwZTEvQmFzZUZvbnQvSGVsdmV0aWNhPj5lbmRvYmoKeHJlZgowIDYKMDAwMDAwMDAwMCA2NTUzNSBmIAowMDAwMDAwMDA5IDAwMDAwIG4gCjAwMDAwMDAwNTIgMDAwMDAgbiAKMDAwMDAwMDEwMSAwMDAwMCBuIAowMDAwMDAwMjExIDAwMDAwIG4gCjAwMDAwMDAzMjAgMDAwMDAgbiAKdHJhaWxlcjw8L1NpemUgNi9Sb290IDEgMCBSPj4Kc3RhcnR4cmVmCjM4MQolJUVPRg==";
-const toDisplay = (d: Doc): DisplayFile => ({ id: d.id, filename: d.name, mimeType: d.mimeType, url: MOCK_PDF_URL });
+const toDisplay = (d: Doc): DisplayFile => ({ id: d.id, filename: d.name, mimeType: d.mimeType, url: d.url ?? MOCK_PDF_URL });
 
 // The documents register — columns ONCE (the Table renders the header band
 // and every cell width from these; facts get dedicated scannable columns
@@ -129,15 +138,15 @@ const toDisplay = (d: Doc): DisplayFile => ({ id: d.id, filename: d.name, mimeTy
 // (tpl_item_list): leading checkbox + select-all, trailing ⋯ gutter.
 const DOC_COLUMNS: TableColumn[] = [
   { key: "doc", label: "Document", flex: 1, sortable: true },
-  { key: "size", label: "Size", width: 90, align: "right", sortable: true },
-  { key: "added", label: "Added", width: 96, sortable: true },
+  { key: "size", label: "Size", width: 90, align: "right", sortable: true, priority: 3 },
+  { key: "added", label: "Added", width: 96, sortable: true, priority: 2 },
 ];
 
 interface Producible { id: string; label: string; file: string; sizeKB: number; needs?: { key: string; label: string }[] }
 const PRODUCIBLE: Producible[] = [
   { id: "g1", label: "Shipping instruction", file: "shipping-instruction.pdf", sizeKB: 84 },
   { id: "g2", label: "Certificate of origin", file: "certificate-of-origin.pdf", sizeKB: 61 },
-  { id: "g3", label: "Delivery note", file: "delivery-note.pdf", sizeKB: 72, needs: [{ key: "delivery_address", label: "Delivery address" }, { key: "hs_code", label: "HS code" }] },
+  { id: "g3", label: "Delivery note", file: "delivery-note.pdf", sizeKB: 72, needs: [{ key: "delivery_address", label: "Delivery address" }, { key: "commodity_code", label: "Commodity code" }] },
   { id: "g4", label: "Customs declaration draft", file: "customs-declaration-draft.pdf", sizeKB: 118 },
 ];
 
@@ -164,7 +173,7 @@ export function TplDocuments() {
   // The HOST owns the review: one editable proposal per field (editing IS the
   // review), a tri-state decision per field (dropped rows collapse struck,
   // out of the apply), and the conflict's pick (empty until the user chooses).
-  const [mbl, setMbl] = useState(MBL_PROPOSED);
+  const [carrierRef, setCarrierRef] = useState(CARRIER_REF_PROPOSED);
   const [vessel, setVessel] = useState(VESSEL_PROPOSED);
   const [consignee, setConsignee] = useState<string | null>(null);
   const [grossWeight, setGrossWeight] = useState("1,540");
@@ -189,7 +198,7 @@ export function TplDocuments() {
   const commitUpload = () => setFiles((fs) => [...fs, ...picked.filter((p2) => !fs.some((f) => f.id === p2.id))]);
   const closeAi = () => {
     setAiOpen(false); setTask(null); setPhase("fork"); setRevealed(0); setUploadFlow(false); setBrief(""); setTaskChoice(null);
-    setMbl(MBL_PROPOSED); setVessel(VESSEL_PROPOSED); setConsignee(null); setConsigneePick(null); setCustomConsignee(""); setGrossWeight("1,540"); setLineAdd("pending"); setLineEdit({}); setNewItem("Corner protectors, foam"); setNewQty("400"); setEditedQty("1,450"); setFieldDecisions({});
+    setCarrierRef(CARRIER_REF_PROPOSED); setVessel(VESSEL_PROPOSED); setConsignee(null); setConsigneePick(null); setCustomConsignee(""); setGrossWeight("1,540"); setLineAdd("pending"); setLineEdit({}); setNewItem("Corner protectors, foam"); setNewQty("400"); setEditedQty("1,450"); setFieldDecisions({});
   };
   const startTask = (t: Task) => { setTask(t); setRevealed(0); setPhase("running"); };
   // ⋯ menu per document row. "Edit with AI" is the app→chat handoff for
@@ -414,7 +423,9 @@ export function TplDocuments() {
               >
                 <TableCell>
                   <View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
-                    <FileBadge mimeType={f.mimeType} />
+                    {/* ONE square 32px slot for every type: an image fills it as a
+                        real thumbnail, a document centers its badge in it */}
+                    <FileThumbnail file={toDisplay(f)} size={32} onPress={() => openPreview(visibleFiles, fi)} />
                     <Text size="sm" weight="medium" numberOfLines={1} style={{ flexShrink: 1 }}>{f.name}</Text>
                   </View>
                 </TableCell>
@@ -477,7 +488,7 @@ export function TplDocuments() {
             {taskChoice === "check" ? (
               <FormTextInput
                 label="Instructions (optional)"
-                placeholder="Anything specific to check — e.g. verify the HS codes against the order"
+                placeholder="Anything specific to check — e.g. verify the commodity codes against the order"
                 value={brief}
                 onChangeText={setBrief}
                 multiline
@@ -505,8 +516,8 @@ export function TplDocuments() {
                 <ChangeReasoning>{EXTRACT_REASONING}</ChangeReasoning>
                 <ChangeFields>
                   {/* An ADD — the record holds nothing yet, so no `before`. */}
-                  <ChangeField label="MBL number" value={mbl} summary={mbl} {...fieldRow("mbl")}>
-                    <ChangeValueInput value={mbl} onChangeText={setMbl} accessibilityLabel="MBL number" />
+                  <ChangeField label="Carrier reference" value={carrierRef} summary={carrierRef} {...fieldRow("carrier_ref")}>
+                    <ChangeValueInput value={carrierRef} onChangeText={setCarrierRef} accessibilityLabel="Carrier reference" />
                   </ChangeField>
                   {/* An UPDATE — the current value banded above the editor. */}
                   <ChangeField label="Vessel" value={vessel} summary={vessel} before={VESSEL_CURRENT} {...fieldRow("vessel")}>

package/examples/tpl_item_list.tsx

@@ -31,6 +31,7 @@ import { Table, TableRow, TableCell, type TableColumn } from "@lotics/ui/table";
 import { SearchInput } from "@lotics/ui/search_input";
 import { Select } from "@lotics/ui/select";
 import { FilterChip, selectSummary } from "@lotics/ui/filter_chip";
+import { ColumnFilter, type ColumnFilterValue } from "@lotics/ui/column_filter";
 import { OptionList } from "@lotics/ui/option_list";
 import { cycleSort, sortBy, type SortState } from "@lotics/ui/sort_header";
 import { Combobox, ComboboxInput, ComboboxContent } from "@lotics/ui/combobox";
@@ -355,13 +356,18 @@ const ASSIGNEES = [...new Set(HO_SO.map((r) => r.phuTrach))].map((n) => ({ label
 
 // Columns defined ONCE — Table renders the header from these and each
 // TableCell takes its width/align by position; the ⋯ is the trailing gutter.
+// `priority` = the MOBILE contract: when the container can't fit every column
+// the highest numbers drop first (Received → Tasks → Status), the identity +
+// Customer + Fee survive longest, and at the register floor rows STACK
+// (label-over-value) so nothing is lost — the drawer carries full detail
+// either way.
 const COLUMNS: TableColumn[] = [
   { key: "ma", label: "Record ID", width: 112, sortable: true },
-  { key: "khach", label: "Customer", flex: 1, sortable: true },
-  { key: "trangThai", label: "Status", width: 112, sortable: true },
-  { key: "viec", label: "Tasks", width: 82 },
-  { key: "phi", label: "Fee", width: 116, align: "right", sortable: true },
-  { key: "ngayNhan", label: "Received", width: 72, sortable: true },
+  { key: "khach", label: "Customer", flex: 1, sortable: true, priority: 1 },
+  { key: "trangThai", label: "Status", width: 112, sortable: true, priority: 3 },
+  { key: "viec", label: "Tasks", width: 82, priority: 4 },
+  { key: "phi", label: "Fee", width: 116, align: "right", sortable: true, priority: 2 },
+  { key: "ngayNhan", label: "Received", width: 72, sortable: true, priority: 5 },
 ];
 
 // DOCUMENT — the paper the row needs NOW: while the fee is unpaid the
@@ -682,7 +688,6 @@ function HoSoWorkspace({ hs, daThu, onPaid, tasks, onTasksChange, suggestions, o
             <Button
               title="Add file"
               color="secondary"
-              icon="plus"
               onPress={() => {
                 void pickFiles({ multiple: true }).then((picked) => {
                   if (picked.length > 0) setFiles((prev) => [...prev, ...toDisplayFiles(picked)]);
@@ -1143,6 +1148,8 @@ export function TplItemList() {
   const [sort, setSort] = useState<SortState | null>(null);
   const [assignee, setAssignee] = useState<string[]>([]);
   const [feeStatus, setFeeStatus] = useState<"paid" | "unpaid" | null>(null);
+  // The per-column pill (ColumnFilter, number variant) — min/max over the Fee column.
+  const [feeAmount, setFeeAmount] = useState<ColumnFilterValue | undefined>(undefined);
   const sel = useSelection();
 
   // Filter / sort changes reset paging — page 3 of the old ordering is
@@ -1169,6 +1176,10 @@ export function TplItemList() {
     if (assignee.length > 0 && !assignee.includes(r.phuTrach)) return false;
     if (feeStatus === "paid" && !daThuOf(r)) return false;
     if (feeStatus === "unpaid" && daThuOf(r)) return false;
+    if (feeAmount?.kind === "number") {
+      if (feeAmount.min != null && r.phi < feeAmount.min) return false;
+      if (feeAmount.max != null && r.phi > feeAmount.max) return false;
+    }
     if (q && !`${r.ma} ${r.khach} ${r.dienThoai}`.toLowerCase().includes(q)) return false;
     return true;
   });
@@ -1251,10 +1262,10 @@ export function TplItemList() {
             {/* Single-select sibling — the render-prop `close` shuts the popover on
                 pick (the multi above stays open to collect several values). */}
             <FilterChip
-              label="Fee"
+              label="Payment"
               summary={feeStatus === "paid" ? "Paid" : feeStatus === "unpaid" ? "Unpaid" : undefined}
               onClear={() => { setFeeStatus(null); setPage(0); }}
-              clearLabel="Clear fee filter"
+              clearLabel="Clear payment filter"
             >
               {({ close }) => (
                 <OptionList
@@ -1266,6 +1277,14 @@ export function TplItemList() {
                 />
               )}
             </FilterChip>
+            {/* the per-column filter pill — the NUMBER variant (min/max) over
+                the Fee column; text/select variants live on the Tables gallery
+                page. Filter changes reset paging like every other control. */}
+            <ColumnFilter
+              column={{ key: "phi", label: "Fee", type: "number" }}
+              value={feeAmount}
+              onChange={(v) => { setFeeAmount(v); setPage(0); }}
+            />
           </View>
           <CreateRecordDialog onCreate={createRecord} />
         </View>