From da5b1009e333109504dd87545251e015240fa8ed Mon Sep 17 00:00:00 2001
From: "santasri.pachhal" <santasri.pachhal@sentientgeeks.com>
Date: Fri, 7 Aug 2026 16:43:44 +0530
Subject: [PATCH] feat(ticket): make assigned issue images collapsible

---
 .../components/TicketAssignmentsCard.tsx      | 49 +++++++++++++++----
 1 file changed, 40 insertions(+), 9 deletions(-)

diff --git a/src/app/(modules)/ticket/[ticketId]/components/TicketAssignmentsCard.tsx b/src/app/(modules)/ticket/[ticketId]/components/TicketAssignmentsCard.tsx
index 254850d..6588f75 100644
--- a/src/app/(modules)/ticket/[ticketId]/components/TicketAssignmentsCard.tsx
+++ b/src/app/(modules)/ticket/[ticketId]/components/TicketAssignmentsCard.tsx
@@ -1,11 +1,22 @@
 'use client';
 
 import { useEffect } from 'react';
-import { BriefcaseBusiness, CalendarClock, ListChecks } from 'lucide-react';
+import {
+  BriefcaseBusiness,
+  CalendarClock,
+  ChevronDown,
+  Images,
+  ListChecks,
+} from 'lucide-react';
 
 import { PersonInfo } from '@/components/person-avatar';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/components/ui/collapsible';
 import {
   Card,
   CardContent,
@@ -260,14 +271,34 @@ export function TicketAssignmentsCard({
             >
               <AssignmentOverview assignment={selectedAssignment} />
               {videoId ? (
-                <div className={'mt-4 border-t pt-4'}>
-                  <TicketDetectionPreview
-                    key={`${videoId}:${selectedAssignment.id}`}
-                    ticketId={ticketId}
-                    videoId={videoId}
-                    assignmentId={selectedAssignment.id}
-                  />
-                </div>
+                <Collapsible
+                  key={selectedAssignment.id}
+                  className="group mt-4 overflow-hidden rounded-lg border"
+                >
+                  <CollapsibleTrigger asChild>
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      className="h-auto w-full justify-between rounded-none px-4 py-3"
+                    >
+                      <span className="flex items-center gap-2 font-medium">
+                        <Images className="size-4 text-primary" />
+                        Assigned issue images
+                      </span>
+                      <ChevronDown className="size-4 text-muted-foreground transition-transform group-data-[state=open]:rotate-180" />
+                    </Button>
+                  </CollapsibleTrigger>
+                  <CollapsibleContent>
+                    <div className="border-t p-4">
+                      <TicketDetectionPreview
+                        key={`${videoId}:${selectedAssignment.id}`}
+                        ticketId={ticketId}
+                        videoId={videoId}
+                        assignmentId={selectedAssignment.id}
+                      />
+                    </div>
+                  </CollapsibleContent>
+                </Collapsible>
               ) : null}
             </div>
           </div>