From 46285fc47499db15f69000d1b8f9191181f4dd80 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Sat, 18 Apr 2026 23:26:26 +0000
Subject: [PATCH] Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
---
 src/components/forms/client-case-picker.tsx | 98 +++++++++++++++++++++
 1 file changed, 98 insertions(+)
 create mode 100644 src/components/forms/client-case-picker.tsx

diff --git a/src/components/forms/client-case-picker.tsx b/src/components/forms/client-case-picker.tsx
new file mode 100644
index 0000000..1ca4bbe
--- /dev/null
+++ b/src/components/forms/client-case-picker.tsx
@@ -0,0 +1,98 @@
+import { useEffect, useMemo, useState } from "react";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Label } from "@/components/ui/label";
+import {
+  fetchClients,
+  fetchAccessibleCases,
+  type ClientLite,
+  type CaseLite,
+} from "@/lib/forms-shared";
+
+export function ClientCasePicker({
+  clientId,
+  caseId,
+  onClientChange,
+  onCaseChange,
+}: {
+  clientId: string;
+  caseId: string;
+  onClientChange: (id: string, client: ClientLite | null) => void;
+  onCaseChange: (id: string, kase: CaseLite | null) => void;
+}) {
+  const [clients, setClients] = useState<ClientLite[]>([]);
+  const [cases, setCases] = useState<CaseLite[]>([]);
+
+  useEffect(() => {
+    fetchClients().then(setClients);
+    fetchAccessibleCases().then(setCases);
+  }, []);
+
+  const filteredCases = useMemo(() => {
+    if (!clientId) return [];
+    return cases.filter((c) => c.client_id === clientId);
+  }, [cases, clientId]);
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+      <div>
+        <Label>Client / Association</Label>
+        <Select
+          value={clientId}
+          onValueChange={(id) => {
+            const c = clients.find((x) => x.id === id) ?? null;
+            onClientChange(id, c);
+            onCaseChange("", null);
+          }}
+        >
+          <SelectTrigger>
+            <SelectValue placeholder="Select a client" />
+          </SelectTrigger>
+          <SelectContent>
+            {clients.map((c) => (
+              <SelectItem key={c.id} value={c.id}>
+                {c.name}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+      <div>
+        <Label>Case (optional)</Label>
+        <Select
+          value={caseId}
+          onValueChange={(id) => {
+            const k = cases.find((x) => x.id === id) ?? null;
+            onCaseChange(id, k);
+          }}
+          disabled={!clientId}
+        >
+          <SelectTrigger>
+            <SelectValue placeholder={clientId ? "Select case" : "Pick client first"} />
+          </SelectTrigger>
+          <SelectContent>
+            {filteredCases.length === 0 ? (
+              <div className="px-2 py-1.5 text-xs text-muted-foreground">
+                {clientId ? "No cases for this client" : ""}
+              </div>
+            ) : (
+              filteredCases.map((c) => (
+                <SelectItem key={c.id} value={c.id}>
+                  <span className="font-mono text-xs text-muted-foreground mr-2">
+                    {c.case_number}
+                  </span>
+                  {c.title}
+                </SelectItem>
+              ))
+            )}
+          </SelectContent>
+        </Select>
+      </div>
+    </div>
+  );
+}