From 1a4dffa5c6f38037c1f11ddaf0c46b668ed25c64 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 07:04:46 +0000
Subject: [PATCH] Changes

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

diff --git a/src/routes/cases.$caseId.tsx b/src/routes/cases.$caseId.tsx
index 9923032..b7cd29b 100644
--- a/src/routes/cases.$caseId.tsx
+++ b/src/routes/cases.$caseId.tsx
@@ -167,6 +167,15 @@ function CaseDetail() {
                 <SelectItem value="closed">Closed</SelectItem>
               </SelectContent>
             </Select>
+            <Button
+              variant="outline"
+              onClick={() => {
+                setSelectedClientId(data.client?.id ?? "");
+                setReassignOpen(true);
+              }}
+            >
+              <ArrowRightLeft className="h-4 w-4 mr-2" /> Reassign client
+            </Button>
             <Button
               variant="outline"
               onClick={async () => {
@@ -183,6 +192,57 @@ function CaseDetail() {
         )}
       </div>
 
+      <Dialog open={reassignOpen} onOpenChange={setReassignOpen}>
+        <DialogContent className="max-w-lg">
+          <DialogHeader>
+            <DialogTitle>Reassign case to a different client</DialogTitle>
+            <DialogDescription>
+              Currently assigned to <span className="font-medium">{data.client?.name ?? "—"}</span>. Pick a new client below.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-3">
+            <div className="relative">
+              <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+              <Input
+                placeholder="Search clients…"
+                value={clientSearch}
+                onChange={(e) => setClientSearch(e.target.value)}
+                className="pl-8"
+                autoFocus
+              />
+            </div>
+            <div className="max-h-72 overflow-y-auto border rounded-md divide-y">
+              {filteredClients.length === 0 ? (
+                <p className="text-sm text-muted-foreground p-3">No clients match.</p>
+              ) : (
+                filteredClients.map((c) => (
+                  <button
+                    key={c.id}
+                    type="button"
+                    onClick={() => setSelectedClientId(c.id)}
+                    className={`w-full text-left px-3 py-2 text-sm hover:bg-muted flex items-center justify-between ${
+                      selectedClientId === c.id ? "bg-muted" : ""
+                    }`}
+                  >
+                    <span>{c.name}</span>
+                    <span className="text-xs text-muted-foreground uppercase">{c.client_type}</span>
+                  </button>
+                ))
+              )}
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setReassignOpen(false)}>Cancel</Button>
+            <Button
+              onClick={reassignClient}
+              disabled={reassigning || !selectedClientId || selectedClientId === data.client?.id}
+            >
+              {reassigning ? "Reassigning…" : "Reassign"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
       {data.description && (
         <Card className="mb-6 border-border/60">
           <CardContent className="p-4">