From a1e1d2f6d6c5d5a38629e3b0254a6a037037bd99 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:05 +0000
Subject: [PATCH] Changes

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

diff --git a/src/routes/collections.$collectionId.tsx b/src/routes/collections.$collectionId.tsx
index 73714a0..d91774b 100644
--- a/src/routes/collections.$collectionId.tsx
+++ b/src/routes/collections.$collectionId.tsx
@@ -341,20 +341,42 @@ function CollectionDetailRoute() {
   return (
     <ProtectedLayout>
       <PageContainer>
-        <div className="flex items-center justify-between gap-2 mb-3">
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={() => navigate({ to: "/collections" })}
-            className="-ml-2"
-          >
-            <ArrowLeft className="h-4 w-4 mr-1" /> All collections
-          </Button>
-          {collection.case?.client?.id && (
-            <Button size="sm" onClick={() => navigate({ to: "/invoices/new/$clientId", params: { clientId: collection.case.client.id }, search: { caseId: collection.case.id } })}>
-              <FilePlus className="h-4 w-4 mr-1.5" /> Generate invoice
+        <div className="flex items-center justify-between gap-2 mb-3 flex-wrap">
+          <div className="flex items-center gap-2">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => navigate({ to: "/collections" })}
+              className="-ml-2"
+            >
+              <ArrowLeft className="h-4 w-4 mr-1" /> All collections
             </Button>
-          )}
+            {collection.status === "closed" && (
+              <Badge variant="outline" className="border-emerald-600 text-emerald-700">
+                Closed{collection.closed_at ? ` · ${formatDate(collection.closed_at)}` : ""}
+              </Badge>
+            )}
+          </div>
+          <div className="flex items-center gap-2 flex-wrap">
+            <Button size="sm" variant="outline" onClick={() => setApplyHoOpen(true)}>
+              <UserPlus className="h-4 w-4 mr-1.5" />
+              {collection.homeowner ? "Change homeowner" : "Apply homeowner"}
+            </Button>
+            {collection.status === "closed" ? (
+              <Button size="sm" variant="outline" onClick={reopenCollection} disabled={closingBusy}>
+                <Unlock className="h-4 w-4 mr-1.5" /> Reopen
+              </Button>
+            ) : (
+              <Button size="sm" variant="outline" onClick={closeCollection} disabled={closingBusy}>
+                <Lock className="h-4 w-4 mr-1.5" /> Close collection
+              </Button>
+            )}
+            {collection.case?.client?.id && (
+              <Button size="sm" onClick={() => navigate({ to: "/invoices/new/$clientId", params: { clientId: collection.case.client.id }, search: { caseId: collection.case.id } })}>
+                <FilePlus className="h-4 w-4 mr-1.5" /> Generate invoice
+              </Button>
+            )}
+          </div>
         </div>
 
         {/* Tabs: Workflow (collections-specific) + same case tabs */}