From 6b15f84fdb41367b622b4e65ab92ec9789c33e6b Mon Sep 17 00:00:00 2001
From: Chaim <chaim@marcus-law.co.il>
Date: Mon, 13 Apr 2026 12:43:07 +0000
Subject: [PATCH] WIP: documents panel UI improvements

---
 .../src/components/cases/documents-panel.tsx  | 160 +++++++++++++-----
 .../src/components/documents/upload-sheet.tsx |   2 +-
 2 files changed, 119 insertions(+), 43 deletions(-)

diff --git a/web-ui/src/components/cases/documents-panel.tsx b/web-ui/src/components/cases/documents-panel.tsx
index 4321529..13550e6 100644
--- a/web-ui/src/components/cases/documents-panel.tsx
+++ b/web-ui/src/components/cases/documents-panel.tsx
@@ -1,5 +1,7 @@
 import { Badge } from "@/components/ui/badge";
+import { Progress } from "@/components/ui/progress";
 import { ScrollArea } from "@/components/ui/scroll-area";
+import { CheckCircle2, Clock, Loader2, XCircle } from "lucide-react";
 import type { CaseDetail } from "@/lib/api/cases";
 
 /*
@@ -43,6 +45,37 @@ const STATUS_LABELS: Record<string, string> = {
   error:      "שגיאה",
 };
 
+/** Sort priority — lower = higher in list */
+const STATUS_ORDER: Record<string, number> = {
+  failed:     0,
+  error:      0,
+  processing: 1,
+  pending:    2,
+  completed:  3,
+  proofread:  3,
+};
+
+function statusOrder(s: string): number {
+  return STATUS_ORDER[s] ?? 3;
+}
+
+function StatusIcon({ status }: { status: string }) {
+  switch (status) {
+    case "completed":
+    case "proofread":
+      return <CheckCircle2 className="w-4 h-4 text-success shrink-0" />;
+    case "processing":
+      return <Loader2 className="w-4 h-4 text-gold animate-spin shrink-0" />;
+    case "pending":
+      return <Clock className="w-4 h-4 text-ink-muted shrink-0" />;
+    case "failed":
+    case "error":
+      return <XCircle className="w-4 h-4 text-danger shrink-0" />;
+    default:
+      return <Clock className="w-4 h-4 text-ink-muted shrink-0" />;
+  }
+}
+
 function formatDate(iso: string) {
   if (!iso) return "—";
   try {
@@ -69,49 +102,92 @@ export function DocumentsPanel({ data }: { data?: CaseDetail }) {
     );
   }
 
+  const sorted = [...docs].sort(
+    (a, b) => statusOrder(a.extraction_status) - statusOrder(b.extraction_status),
+  );
+
+  const done = docs.filter(
+    (d) => d.extraction_status === "completed" || d.extraction_status === "proofread",
+  ).length;
+  const processing = docs.filter((d) => d.extraction_status === "processing").length;
+  const pending = docs.filter((d) => d.extraction_status === "pending").length;
+  const failed = docs.filter(
+    (d) => d.extraction_status === "failed" || d.extraction_status === "error",
+  ).length;
+  const hasIncomplete = processing > 0 || pending > 0 || failed > 0;
+  const pct = docs.length > 0 ? Math.round((done / docs.length) * 100) : 0;
+
   return (
-    <ScrollArea className="max-h-[520px]" dir="rtl">
-      <ul className="divide-y divide-rule" dir="rtl">
-        {docs.map((doc) => {
-          const displayName = doc.title || filenameFromPath(doc.file_path);
-          const statusDone =
-            doc.extraction_status === "completed" ||
-            doc.extraction_status === "proofread";
-          return (
-            <li
-              key={doc.id}
-              className="py-3 flex items-start gap-4 hover:bg-gold-wash/30 transition-colors px-2 -mx-2 rounded"
-            >
-              {/* Title + meta — flex-1 keeps it glued to the start (right in RTL) */}
-              <div className="flex-1 min-w-0 space-y-0.5 text-right">
-                <div className="text-ink font-medium truncate" title={displayName}>
-                  {displayName}
+    <div className="space-y-3">
+      {hasIncomplete && (
+        <div className="rounded-lg border border-rule bg-parchment/40 px-4 py-3 space-y-2" dir="rtl">
+          <div className="flex items-center gap-4 text-[0.78rem] flex-wrap">
+            {done > 0 && (
+              <span className="flex items-center gap-1 text-success">
+                <CheckCircle2 className="w-3.5 h-3.5" />
+                {done} {STATUS_LABELS.completed}
+              </span>
+            )}
+            {processing > 0 && (
+              <span className="flex items-center gap-1 text-gold-deep">
+                <Loader2 className="w-3.5 h-3.5 animate-spin" />
+                {processing} {STATUS_LABELS.processing}
+              </span>
+            )}
+            {pending > 0 && (
+              <span className="flex items-center gap-1 text-ink-muted">
+                <Clock className="w-3.5 h-3.5" />
+                {pending} {STATUS_LABELS.pending}
+              </span>
+            )}
+            {failed > 0 && (
+              <span className="flex items-center gap-1 text-danger">
+                <XCircle className="w-3.5 h-3.5" />
+                {failed} {STATUS_LABELS.failed}
+              </span>
+            )}
+          </div>
+          <Progress
+            value={pct}
+            className={failed > 0 && done === 0 ? "[&>div]:bg-danger" : ""}
+          />
+        </div>
+      )}
+
+      <ScrollArea className="max-h-[520px]" dir="rtl">
+        <ul className="divide-y divide-rule" dir="rtl">
+          {sorted.map((doc) => {
+            const displayName = doc.title || filenameFromPath(doc.file_path);
+            return (
+              <li
+                key={doc.id}
+                className="py-3 flex items-start gap-3 hover:bg-gold-wash/30 transition-colors px-2 -mx-2 rounded"
+              >
+                <StatusIcon status={doc.extraction_status} />
+                <div className="flex-1 min-w-0 space-y-0.5 text-right">
+                  <div className="text-ink font-medium truncate" title={displayName}>
+                    {displayName}
+                  </div>
+                  <div className="text-[0.72rem] text-ink-muted flex items-center gap-3 flex-wrap">
+                    {doc.page_count != null && (
+                      <span className="tabular-nums">{doc.page_count} עמ׳</span>
+                    )}
+                    {doc.created_at && <span>{formatDate(doc.created_at)}</span>}
+                  </div>
                 </div>
-                <div className="text-[0.72rem] text-ink-muted flex items-center gap-3 flex-wrap">
-                  {doc.page_count != null && (
-                    <span className="tabular-nums">{doc.page_count} עמ׳</span>
-                  )}
-                  {doc.created_at && <span>{formatDate(doc.created_at)}</span>}
-                  {!statusDone && doc.extraction_status && (
-                    <span className="text-warn">
-                      {STATUS_LABELS[doc.extraction_status] ?? doc.extraction_status}
-                    </span>
-                  )}
-                </div>
-              </div>
-              {/* Type badge — ms-auto forces it to the inline-end (= left in RTL) */}
-              {doc.doc_type && (
-                <Badge
-                  variant="outline"
-                  className={`rounded-full px-2 py-0.5 text-[0.7rem] shrink-0 ms-auto ${doctypeTone(doc.doc_type)}`}
-                >
-                  {doctypeLabel(doc.doc_type)}
-                </Badge>
-              )}
-            </li>
-          );
-        })}
-      </ul>
-    </ScrollArea>
+                {doc.doc_type && (
+                  <Badge
+                    variant="outline"
+                    className={`rounded-full px-2 py-0.5 text-[0.7rem] shrink-0 ms-auto ${doctypeTone(doc.doc_type)}`}
+                  >
+                    {doctypeLabel(doc.doc_type)}
+                  </Badge>
+                )}
+              </li>
+            );
+          })}
+        </ul>
+      </ScrollArea>
+    </div>
   );
 }
diff --git a/web-ui/src/components/documents/upload-sheet.tsx b/web-ui/src/components/documents/upload-sheet.tsx
index af03884..6646b78 100644
--- a/web-ui/src/components/documents/upload-sheet.tsx
+++ b/web-ui/src/components/documents/upload-sheet.tsx
@@ -155,7 +155,7 @@ export function UploadSheet({ caseNumber }: { caseNumber: string }) {
           </SheetDescription>
         </SheetHeader>
 
-        <div className="mt-5 space-y-4 px-4">
+        <div className="mt-5 space-y-4 px-4 overflow-y-auto flex-1 min-h-0">
           <div>
             <label className="block text-sm font-medium text-navy mb-1.5">
               סיווג