From df9aa8333a0bc502f692ca73d6de5002820d4143 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Mon, 20 Apr 2026 00:16:48 +0000
Subject: [PATCH] Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
---
 src/routes/collections.$collectionId.tsx | 206 +++++++++++++++++++++++
 1 file changed, 206 insertions(+)

diff --git a/src/routes/collections.$collectionId.tsx b/src/routes/collections.$collectionId.tsx
index e4eb5a4..a8665e3 100644
--- a/src/routes/collections.$collectionId.tsx
+++ b/src/routes/collections.$collectionId.tsx
@@ -727,3 +727,209 @@ function AddTaskDialog({
     </Dialog>
   );
 }
+
+function ApplyHomeownerDialog({
+  open,
+  onOpenChange,
+  collection,
+  onSaved,
+}: {
+  open: boolean;
+  onOpenChange: (v: boolean) => void;
+  collection: any;
+  onSaved: () => void;
+}) {
+  const [contacts, setContacts] = useState<any[]>([]);
+  const [homeowners, setHomeowners] = useState<any[]>([]);
+  const [selectedHomeownerId, setSelectedHomeownerId] = useState<string>("");
+  const [loading, setLoading] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const clientId = collection?.case?.client?.id ?? null;
+
+  useEffect(() => {
+    if (!open || !clientId) return;
+    setLoading(true);
+    (async () => {
+      // Load case contacts (people on this case)
+      const { data: cc } = await supabase
+        .from("case_contacts")
+        .select("contact:contacts(id, name, email, phone)")
+        .eq("case_id", collection.case.id);
+      const caseContacts = (cc ?? [])
+        .map((r: any) => r.contact)
+        .filter(Boolean);
+      setContacts(caseContacts);
+
+      // Load existing homeowners for this client
+      const { data: hos } = await supabase
+        .from("homeowners")
+        .select("id, first_name, last_name, unit_number, email, phone")
+        .eq("client_id", clientId)
+        .is("archived_at", null)
+        .order("last_name");
+      setHomeowners(hos ?? []);
+      setSelectedHomeownerId(collection.homeowner_id ?? "");
+      setLoading(false);
+    })();
+  }, [open, clientId, collection?.case?.id, collection?.homeowner_id]);
+
+  const applyExisting = async () => {
+    if (!selectedHomeownerId) return toast.error("Select a homeowner");
+    setSaving(true);
+    const ho = homeowners.find((h) => h.id === selectedHomeownerId);
+    const updates: any = { homeowner_id: selectedHomeownerId };
+    // Refresh display name on the collection too
+    if (ho) updates.name = `${ho.last_name}, ${ho.first_name}`;
+    const { error } = await supabase
+      .from("collections")
+      .update(updates)
+      .eq("id", collection.id);
+    setSaving(false);
+    if (error) {
+      toast.error("Could not apply", { description: error.message });
+      return;
+    }
+    toast.success("Homeowner applied");
+    onOpenChange(false);
+    onSaved();
+  };
+
+  const createFromContact = async (contactId: string) => {
+    const c = contacts.find((x) => x.id === contactId);
+    if (!c || !clientId) return;
+    setSaving(true);
+    // Split name → first/last
+    const parts = (c.name ?? "").trim().split(/\s+/);
+    const first = parts.shift() ?? c.name ?? "Homeowner";
+    const last = parts.join(" ") || "—";
+    const { data: ho, error: insErr } = await supabase
+      .from("homeowners")
+      .insert({
+        client_id: clientId,
+        first_name: first,
+        last_name: last,
+        email: c.email,
+        phone: c.phone,
+      })
+      .select("id, first_name, last_name")
+      .single();
+    if (insErr || !ho) {
+      setSaving(false);
+      toast.error("Could not create homeowner", { description: insErr?.message });
+      return;
+    }
+    const { error: updErr } = await supabase
+      .from("collections")
+      .update({
+        homeowner_id: ho.id,
+        name: `${ho.last_name}, ${ho.first_name}`,
+      })
+      .eq("id", collection.id);
+    setSaving(false);
+    if (updErr) {
+      toast.error("Created but could not apply", { description: updErr.message });
+      return;
+    }
+    toast.success("Homeowner created and applied");
+    onOpenChange(false);
+    onSaved();
+  };
+
+  const clearHomeowner = async () => {
+    if (!confirm("Remove the homeowner from this collection?")) return;
+    setSaving(true);
+    const { error } = await supabase
+      .from("collections")
+      .update({ homeowner_id: null })
+      .eq("id", collection.id);
+    setSaving(false);
+    if (error) {
+      toast.error("Could not clear", { description: error.message });
+      return;
+    }
+    toast.success("Homeowner removed");
+    onOpenChange(false);
+    onSaved();
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-lg">
+        <DialogHeader>
+          <DialogTitle className="font-serif">
+            {collection?.homeowner ? "Change homeowner" : "Apply homeowner"}
+          </DialogTitle>
+          <DialogDescription>
+            Select an existing homeowner for this client, or promote a case contact into a homeowner record.
+          </DialogDescription>
+        </DialogHeader>
+
+        {loading ? (
+          <div className="py-6 text-center text-sm text-muted-foreground">Loading…</div>
+        ) : (
+          <div className="space-y-5">
+            <div>
+              <Label className="mb-1.5 block">Existing homeowner</Label>
+              {homeowners.length === 0 ? (
+                <p className="text-xs text-muted-foreground italic">
+                  No homeowners on this client yet.
+                </p>
+              ) : (
+                <SearchableSelect
+                  value={selectedHomeownerId}
+                  onValueChange={setSelectedHomeownerId}
+                  placeholder="Select a homeowner…"
+                  options={homeowners.map((h) => ({
+                    value: h.id,
+                    label: `${h.last_name}, ${h.first_name}${h.unit_number ? ` · Unit ${h.unit_number}` : ""}`,
+                  }))}
+                />
+              )}
+            </div>
+
+            {contacts.length > 0 && (
+              <div>
+                <Label className="mb-1.5 block">Or create from a case contact</Label>
+                <div className="space-y-1 max-h-48 overflow-y-auto border rounded-md p-1">
+                  {contacts.map((c) => (
+                    <button
+                      key={c.id}
+                      onClick={() => createFromContact(c.id)}
+                      disabled={saving}
+                      className="w-full text-left px-2 py-1.5 text-sm rounded hover:bg-muted/60 disabled:opacity-50"
+                    >
+                      <div className="font-medium">{c.name}</div>
+                      {(c.email || c.phone) && (
+                        <div className="text-xs text-muted-foreground">
+                          {[c.email, c.phone].filter(Boolean).join(" · ")}
+                        </div>
+                      )}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+
+        <DialogFooter className="gap-2 sm:justify-between">
+          {collection?.homeowner_id ? (
+            <Button variant="ghost" onClick={clearHomeowner} disabled={saving} className="text-destructive">
+              Remove homeowner
+            </Button>
+          ) : <span />}
+          <div className="flex gap-2">
+            <Button variant="outline" onClick={() => onOpenChange(false)}>Cancel</Button>
+            <Button
+              onClick={applyExisting}
+              disabled={saving || !selectedHomeownerId || selectedHomeownerId === collection?.homeowner_id}
+            >
+              {saving && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
+              Apply selected
+            </Button>
+          </div>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}