From dc1dc3037f5f0423e0c1bd045c0306dbc9b6083a Mon Sep 17 00:00:00 2001
From: molloyzak13 <molloyzak13@users.noreply.github.com>
Date: Sun, 5 Jul 2026 16:45:03 +0100
Subject: [PATCH 1/2] fix: replace unit text input with dropdown in document
 import view

---
 ui/src/components/import/DocumentImportView.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/ui/src/components/import/DocumentImportView.tsx b/ui/src/components/import/DocumentImportView.tsx
index 3cdf1da5..6888a739 100644
--- a/ui/src/components/import/DocumentImportView.tsx
+++ b/ui/src/components/import/DocumentImportView.tsx
@@ -113,6 +113,8 @@ function makeSteps(upTo: number, running: number): ImportStep[] {
 // Main View
 // ---------------------------------------------------------------------------
 
+const UNIT_OPTIONS = ["hour", "day", "piece", "flat"] as const;
+
 export function DocumentImportView() {
   const [phase, setPhase] = useState<Phase>("upload");
   const [parsing, setParsing] = useState(false);
@@ -780,8 +782,11 @@ function InvoiceCard({ item, onUpdate, importedContracts, importedProjects, exis
                 <label className="block text-[10px] text-tertiary mb-0.5">
                   Unit{ireq("unit") && <span className="text-red-400 ml-0.5">*</span>}
                 </label>
-                <input value={li.unit} onChange={(e) => updateItem(idx, "unit", e.target.value)}
-                  className={`w-full px-2 py-1 rounded text-xs bg-bg-card text-primary border ${borderCls("unit", li.unit)} outline-none focus:border-fuchsia-400`} />
+                <select value={li.unit ?? ""} onChange={(e) => updateItem(idx, "unit", e.target.value)}
+                  className={`w-full px-2 py-1 rounded text-xs bg-bg-card text-primary border ${borderCls("unit", li.unit)} outline-none focus:border-fuchsia-400`}>
+                  <option value="" disabled>Select unit</option>
+                  {UNIT_OPTIONS.map((u) => <option key={u} value={u}>{u}</option>)}
+                </select>
               </div>
               <div>
                 <label className="block text-[10px] text-tertiary mb-0.5">

From 1ca774e758898c1ff883b80c86a3872a31c9233f Mon Sep 17 00:00:00 2001
From: Debian <x@zak.linux>
Date: Sun, 5 Jul 2026 20:58:11 +0100
Subject: [PATCH 2/2] =?UTF-8?q?fix:=20apply=20review=20feedback=20?=
 =?UTF-8?q?=E2=80=94=20deduplicate=20UNIT=5FOPTIONS=20and=20handle=20unrec?=
 =?UTF-8?q?ognized=20units?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Extract UNIT_OPTIONS to ui/src/constants.ts (shared between import + invoicing)
- Import from shared constant in both DocumentImportView and InvoicingView
- Handle parser-returned unit values not in UNIT_OPTIONS (e.g., "hours")
  by appending the unrecognized value to the dropdown options
- tsc --noEmit clean, npm run build (tsc + vite) passes

Review feedback from clstaudt + Copilot suggestions #385.
---
 ui/src/components/import/DocumentImportView.tsx | 8 +++++---
 ui/src/components/invoicing/InvoicingView.tsx   | 3 +--
 ui/src/constants.ts                             | 1 +
 3 files changed, 7 insertions(+), 5 deletions(-)
 create mode 100644 ui/src/constants.ts

diff --git a/ui/src/components/import/DocumentImportView.tsx b/ui/src/components/import/DocumentImportView.tsx
index 6888a739..d7bb125d 100644
--- a/ui/src/components/import/DocumentImportView.tsx
+++ b/ui/src/components/import/DocumentImportView.tsx
@@ -6,6 +6,7 @@ import {
   XCircle, Receipt, Plus, Minus,
 } from "lucide-react";
 import { rpc } from "../../api/rpc";
+import { UNIT_OPTIONS } from "../../constants";
 
 // ---------------------------------------------------------------------------
 // Types — RPC response shapes from `imports.parse_document_for_import`.
@@ -113,8 +114,6 @@ function makeSteps(upTo: number, running: number): ImportStep[] {
 // Main View
 // ---------------------------------------------------------------------------
 
-const UNIT_OPTIONS = ["hour", "day", "piece", "flat"] as const;
-
 export function DocumentImportView() {
   const [phase, setPhase] = useState<Phase>("upload");
   const [parsing, setParsing] = useState(false);
@@ -762,6 +761,9 @@ function InvoiceCard({ item, onUpdate, importedContracts, importedProjects, exis
             const missing = (f: string, v: any) => ireq(f) && (v == null || v === "");
             const borderCls = (f: string, v: any) =>
               missing(f, v) ? "border-red-400/60" : "border-fuchsia-400/20";
+            const unitOptions = li.unit && !(UNIT_OPTIONS as readonly string[]).includes(li.unit)
+              ? [...UNIT_OPTIONS, li.unit]
+              : [...UNIT_OPTIONS];
             return (
             <div key={idx} className="grid grid-cols-[1fr_80px_60px_90px_70px_28px] gap-1.5 items-end">
               <div>
@@ -785,7 +787,7 @@ function InvoiceCard({ item, onUpdate, importedContracts, importedProjects, exis
                 <select value={li.unit ?? ""} onChange={(e) => updateItem(idx, "unit", e.target.value)}
                   className={`w-full px-2 py-1 rounded text-xs bg-bg-card text-primary border ${borderCls("unit", li.unit)} outline-none focus:border-fuchsia-400`}>
                   <option value="" disabled>Select unit</option>
-                  {UNIT_OPTIONS.map((u) => <option key={u} value={u}>{u}</option>)}
+                  {unitOptions.map((u) => <option key={u} value={u}>{u}</option>)}
                 </select>
               </div>
               <div>
diff --git a/ui/src/components/invoicing/InvoicingView.tsx b/ui/src/components/invoicing/InvoicingView.tsx
index 648d01c3..561e2249 100644
--- a/ui/src/components/invoicing/InvoicingView.tsx
+++ b/ui/src/components/invoicing/InvoicingView.tsx
@@ -6,6 +6,7 @@ import {
 } from "lucide-react";
 import { rpc, readFileAsDataURL } from "../../api/rpc";
 import { str, num, bool, entity as subEntity, list as entityList, formatDate, invoiceStatus, deepStr, isReminder, reminderLevel } from "../../api/entity";
+import { UNIT_OPTIONS } from "../../constants";
 import { StatusBadge } from "../shared/StatusBadge";
 import { ViewModeToggle } from "../shared/ViewModeToggle";
 import { KanbanBoard, useStageStore, type BoardColumn } from "../shared/KanbanBoard";
@@ -218,8 +219,6 @@ interface LineItem {
   unitPrice: string;
 }
 
-const UNIT_OPTIONS = ["hour", "day", "piece", "flat"] as const;
-
 function makeDefaultItem(project?: Entity | null): LineItem {
   const contract = project ? (project as Record<string, unknown>).contract as Record<string, unknown> | undefined : undefined;
   const unit = contract?.unit as string | undefined;
diff --git a/ui/src/constants.ts b/ui/src/constants.ts
new file mode 100644
index 00000000..6c13c7e3
--- /dev/null
+++ b/ui/src/constants.ts
@@ -0,0 +1 @@
+export const UNIT_OPTIONS = ["hour", "day", "piece", "flat"] as const;