From 5439a5ff459222607859245f5e08bea844856e98 Mon Sep 17 00:00:00 2001
From: "santasri.pachhal" <santasri.pachhal@sentientgeeks.com>
Date: Tue, 23 Jun 2026 23:51:54 +0530
Subject: [PATCH] fix(ui): add pointer cursors to repair evidence and
 multi-select controls

---
 .../components/actions/RepairEvidenceForm.tsx         | 10 +++++-----
 src/components/form/MultiSelectPopover.tsx            | 11 ++++++++---
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/app/(modules)/ticket/[ticketId]/components/actions/RepairEvidenceForm.tsx b/src/app/(modules)/ticket/[ticketId]/components/actions/RepairEvidenceForm.tsx
index 768638a..dfdc95c 100644
--- a/src/app/(modules)/ticket/[ticketId]/components/actions/RepairEvidenceForm.tsx
+++ b/src/app/(modules)/ticket/[ticketId]/components/actions/RepairEvidenceForm.tsx
@@ -41,7 +41,7 @@ function MediaDropzone({
       disabled={disabled}
       onClick={() => inputRef.current?.click()}
       className={cn(
-        'flex w-full items-center gap-3 rounded-lg border border-dashed px-4 py-3 text-left transition-colors',
+        'flex w-full items-center cursor-pointer gap-3 rounded-lg border border-dashed px-4 py-3 text-left transition-colors',
         'hover:border-primary/50 hover:bg-muted/30',
         disabled && 'pointer-events-none opacity-60',
         file && 'border-primary/40 bg-muted/20',
@@ -92,7 +92,7 @@ function ImageSlot({
 }: ImageSlotProps) {
   if (file && previewUrl) {
     return (
-      <div className="group relative aspect-square overflow-hidden rounded-lg border bg-muted/30">
+      <div className="group relative  aspect-square overflow-hidden rounded-lg border bg-muted/30">
         {/* eslint-disable-next-line @next/next/no-img-element */}
         <img
           src={previewUrl}
@@ -103,7 +103,7 @@ function ImageSlot({
           type="button"
           disabled={disabled}
           onClick={onRemove}
-          className="absolute top-1 right-1 flex size-5 items-center justify-center rounded-full bg-background/90 text-foreground opacity-0 shadow-sm transition-opacity group-hover:opacity-100 disabled:pointer-events-none"
+          className="absolute top-1  right-1 flex size-5 cursor-pointer items-center justify-center rounded-full bg-background/90 text-foreground opacity-0 shadow-sm transition-opacity group-hover:opacity-100 disabled:cursor-not-allowed disabled:opacity-50"
           aria-label={`Remove ${file.name}`}
         >
           <X className="size-3" />
@@ -118,9 +118,9 @@ function ImageSlot({
       disabled={disabled}
       onClick={onAdd}
       className={cn(
-        'flex aspect-square items-center justify-center rounded-lg border border-dashed bg-muted/20 text-muted-foreground transition-colors',
+        'flex aspect-square cursor-pointer items-center justify-center rounded-lg border border-dashed bg-muted/20 text-muted-foreground transition-colors',
         'hover:border-primary/50 hover:bg-muted/40 hover:text-primary',
-        disabled && 'pointer-events-none opacity-60',
+        disabled && 'cursor-not-allowed opacity-60',
       )}
       aria-label="Add image"
     >
diff --git a/src/components/form/MultiSelectPopover.tsx b/src/components/form/MultiSelectPopover.tsx
index 2513df1..470e670 100644
--- a/src/components/form/MultiSelectPopover.tsx
+++ b/src/components/form/MultiSelectPopover.tsx
@@ -88,7 +88,12 @@ export function MultiSelectPopover({
   return (
     <Popover>
       <PopoverTrigger asChild>
-        <Button type="button" variant="outline" size="sm" className="shadow-none">
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          className="shadow-none"
+        >
           {icon}
           {label}
           <Badge variant="secondary">{values.length}</Badge>
@@ -101,7 +106,7 @@ export function MultiSelectPopover({
             type="button"
             onClick={toggleAll}
             aria-label={`Toggle all ${label}`}
-            className="shrink-0 rounded-md p-0.5 hover:bg-muted"
+            className="shrink-0 cursor-pointer rounded-md p-0.5 hover:bg-muted"
           >
             <span className={checkboxClass(areAllSelected)}>
               {areAllSelected ? <Check className="size-3" /> : null}
@@ -130,7 +135,7 @@ export function MultiSelectPopover({
                     disabled={option.disabled}
                     onClick={() => toggleValue(option.value)}
                     className={cn(
-                      'flex min-w-0 flex-1 items-center gap-2 text-left',
+                      'flex min-w-0 flex-1 cursor-pointer items-center gap-2 text-left',
                       option.disabled && 'cursor-not-allowed opacity-60',
                     )}
                   >