Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
2026-04-17 03:21:27 +00:00
parent 0b76a68698
commit 0881a0efe4
2 changed files with 253 additions and 0 deletions
@@ -0,0 +1,96 @@
+import { useEffect, useState } from "react";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Label } from "@/components/ui/label";
+import {
+  fetchClients,
+  fetchHomeowners,
+  type ClientLite,
+  type HomeownerLite,
+} from "@/lib/forms-shared";
+
+export function ClientHomeownerPicker({
+  clientId,
+  homeownerId,
+  onClientChange,
+  onHomeownerChange,
+  showHomeowner = true,
+}: {
+  clientId: string;
+  homeownerId: string;
+  onClientChange: (id: string, client: ClientLite | null) => void;
+  onHomeownerChange: (id: string, homeowner: HomeownerLite | null) => void;
+  showHomeowner?: boolean;
+}) {
+  const [clients, setClients] = useState<ClientLite[]>([]);
+  const [homeowners, setHomeowners] = useState<HomeownerLite[]>([]);
+
+  useEffect(() => {
+    fetchClients().then(setClients);
+  }, []);
+
+  useEffect(() => {
+    if (!clientId) {
+      setHomeowners([]);
+      return;
+    }
+    fetchHomeowners(clientId).then(setHomeowners);
+  }, [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);
+            onHomeownerChange("", 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>
+      {showHomeowner && (
+        <div>
+          <Label>Homeowner (optional)</Label>
+          <Select
+            value={homeownerId}
+            onValueChange={(id) => {
+              const h = homeowners.find((x) => x.id === id) ?? null;
+              onHomeownerChange(id, h);
+            }}
+            disabled={!clientId}
+          >
+            <SelectTrigger>
+              <SelectValue placeholder={clientId ? "Select homeowner" : "Pick client first"} />
+            </SelectTrigger>
+            <SelectContent>
+              {homeowners.map((h) => (
+                <SelectItem key={h.id} value={h.id}>
+                  {h.last_name}, {h.first_name}
+                  {h.unit_number ? ` — Unit ${h.unit_number}` : ""}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+      )}
+    </div>
+  );
+}