From c236e2a075e38d866c5611352defe6b4cab1ce41 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 01:23:29 +0000
Subject: [PATCH 1/5] Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
---
 src/components/cases/documents-tab.tsx | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/components/cases/documents-tab.tsx b/src/components/cases/documents-tab.tsx
index b25823b..4d3b86d 100644
--- a/src/components/cases/documents-tab.tsx
+++ b/src/components/cases/documents-tab.tsx
@@ -14,9 +14,17 @@ import {
   FolderPlus,
   ChevronRight,
   Home,
+  Eye,
+  ExternalLink,
 } from "lucide-react";
 import { formatDate } from "@/lib/format";
 import { toast } from "sonner";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
 
 const MAX_BYTES = 50 * 1024 * 1024;
 

From 3e5394416b9e463cc19bbec04b2213b0c173abf5 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 01:23:37 +0000
Subject: [PATCH 2/5] Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
---
 src/components/cases/documents-tab.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/cases/documents-tab.tsx b/src/components/cases/documents-tab.tsx
index 4d3b86d..c34d4ec 100644
--- a/src/components/cases/documents-tab.tsx
+++ b/src/components/cases/documents-tab.tsx
@@ -37,6 +37,9 @@ export function CaseDocumentsTab({ caseId }: { caseId: string }) {
   const [dragOver, setDragOver] = useState(false);
   const [creatingFolder, setCreatingFolder] = useState(false);
   const [newFolderName, setNewFolderName] = useState("");
+  const [previewDoc, setPreviewDoc] = useState<any | null>(null);
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+  const [previewLoading, setPreviewLoading] = useState(false);
   const fileRef = useRef<HTMLInputElement>(null);
 
   const load = useCallback(async () => {

From 19efb32e77ab5adfdd2c51c6c230f065683a997e 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 01:23:46 +0000
Subject: [PATCH 3/5] Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
---
 src/components/cases/documents-tab.tsx | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/src/components/cases/documents-tab.tsx b/src/components/cases/documents-tab.tsx
index c34d4ec..352b3e4 100644
--- a/src/components/cases/documents-tab.tsx
+++ b/src/components/cases/documents-tab.tsx
@@ -216,6 +216,23 @@ export function CaseDocumentsTab({ caseId }: { caseId: string }) {
     window.open(data.signedUrl, "_blank");
   };
 
+  const openPreview = async (doc: any) => {
+    setPreviewDoc(doc);
+    setPreviewUrl(null);
+    setPreviewLoading(true);
+    const { data, error } = await supabase.storage
+      .from("case-documents")
+      .createSignedUrl(doc.storage_path, 300);
+    setPreviewLoading(false);
+    if (error) { toast.error(error.message); setPreviewDoc(null); return; }
+    setPreviewUrl(data.signedUrl);
+  };
+
+  const closePreview = () => {
+    setPreviewDoc(null);
+    setPreviewUrl(null);
+  };
+
   const del = async (doc: any) => {
     if (!confirm(`Delete ${doc.name}?`)) return;
     await supabase.storage.from("case-documents").remove([doc.storage_path]);

From 28f74d83dd653a4aa3173cd06d109431b86c9d71 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 01:23:54 +0000
Subject: [PATCH 4/5] Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
---
 src/components/cases/documents-tab.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/cases/documents-tab.tsx b/src/components/cases/documents-tab.tsx
index 352b3e4..9eaa68e 100644
--- a/src/components/cases/documents-tab.tsx
+++ b/src/components/cases/documents-tab.tsx
@@ -369,8 +369,9 @@ export function CaseDocumentsTab({ caseId }: { caseId: string }) {
                       {d.size_bytes ? `${(d.size_bytes / 1024).toFixed(1)} KB` : "—"}
                     </td>
                     <td className="px-4 py-3 text-right">
-                      <Button variant="ghost" size="icon" onClick={() => download(d)}><Download className="h-4 w-4" /></Button>
-                      <Button variant="ghost" size="icon" onClick={() => del(d)}><Trash2 className="h-4 w-4 text-destructive" /></Button>
+                      <Button variant="ghost" size="icon" onClick={() => openPreview(d)} title="Quick preview"><Eye className="h-4 w-4" /></Button>
+                      <Button variant="ghost" size="icon" onClick={() => download(d)} title="Download"><Download className="h-4 w-4" /></Button>
+                      <Button variant="ghost" size="icon" onClick={() => del(d)} title="Delete"><Trash2 className="h-4 w-4 text-destructive" /></Button>
                     </td>
                   </tr>
                 ))}

From 2ffce29fb7b43b7013b7845cd07d94bac9eb1c50 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 01:24:15 +0000
Subject: [PATCH 5/5] Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
---
 src/components/cases/documents-tab.tsx | 74 ++++++++++++++++++++++++++
 1 file changed, 74 insertions(+)

diff --git a/src/components/cases/documents-tab.tsx b/src/components/cases/documents-tab.tsx
index 9eaa68e..544ec93 100644
--- a/src/components/cases/documents-tab.tsx
+++ b/src/components/cases/documents-tab.tsx
@@ -380,6 +380,80 @@ export function CaseDocumentsTab({ caseId }: { caseId: string }) {
           </CardContent>
         </Card>
       </div>
+
+      <Dialog open={!!previewDoc} onOpenChange={(o) => !o && closePreview()}>
+        <DialogContent className="max-w-5xl w-[95vw] h-[85vh] flex flex-col p-0 gap-0">
+          <DialogHeader className="px-4 py-3 border-b flex-row items-center justify-between space-y-0">
+            <DialogTitle className="truncate pr-4">{previewDoc?.name}</DialogTitle>
+            {previewUrl && (
+              <div className="flex items-center gap-1 mr-6">
+                <Button variant="ghost" size="sm" onClick={() => window.open(previewUrl, "_blank")}>
+                  <ExternalLink className="h-4 w-4 mr-1.5" /> Open
+                </Button>
+                <Button variant="ghost" size="sm" onClick={() => previewDoc && download(previewDoc)}>
+                  <Download className="h-4 w-4 mr-1.5" /> Download
+                </Button>
+              </div>
+            )}
+          </DialogHeader>
+          <div className="flex-1 min-h-0 bg-muted/30">
+            {previewLoading ? (
+              <div className="h-full flex items-center justify-center text-muted-foreground">
+                <Loader2 className="h-5 w-5 animate-spin mr-2" /> Loading preview…
+              </div>
+            ) : previewUrl && previewDoc ? (
+              <PreviewBody url={previewUrl} doc={previewDoc} />
+            ) : null}
+          </div>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
+
+function PreviewBody({ url, doc }: { url: string; doc: any }) {
+  const mime = (doc.mime_type || "").toLowerCase();
+  const name = (doc.name || "").toLowerCase();
+  const isImage = mime.startsWith("image/") || /\.(png|jpe?g|gif|webp|svg|bmp)$/i.test(name);
+  const isPdf = mime === "application/pdf" || name.endsWith(".pdf");
+  const isText =
+    mime.startsWith("text/") ||
+    /\.(txt|md|csv|json|log|xml|yml|yaml)$/i.test(name);
+  const isAudio = mime.startsWith("audio/") || /\.(mp3|wav|m4a|ogg)$/i.test(name);
+  const isVideo = mime.startsWith("video/") || /\.(mp4|webm|mov)$/i.test(name);
+
+  if (isImage) {
+    return (
+      <div className="h-full w-full flex items-center justify-center overflow-auto p-4">
+        <img src={url} alt={doc.name} className="max-h-full max-w-full object-contain" />
+      </div>
+    );
+  }
+  if (isPdf || isText) {
+    return <iframe src={url} title={doc.name} className="h-full w-full border-0 bg-white" />;
+  }
+  if (isAudio) {
+    return (
+      <div className="h-full flex items-center justify-center p-4">
+        <audio controls src={url} className="w-full max-w-xl" />
+      </div>
+    );
+  }
+  if (isVideo) {
+    return (
+      <div className="h-full flex items-center justify-center p-4 bg-black">
+        <video controls src={url} className="max-h-full max-w-full" />
+      </div>
+    );
+  }
+  return (
+    <div className="h-full flex flex-col items-center justify-center text-center p-8 text-muted-foreground">
+      <FileText className="h-10 w-10 mb-3 opacity-60" />
+      <p className="mb-1">No inline preview available for this file type.</p>
+      <p className="text-xs mb-4">{doc.mime_type || "Unknown type"}</p>
+      <Button onClick={() => window.open(url, "_blank")}>
+        <ExternalLink className="h-4 w-4 mr-1.5" /> Open in new tab
+      </Button>
     </div>
   );
 }