Merge branch 'ui-rewrite'

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,20 +102,68 @@ 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 (
+    <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">
-        {docs.map((doc) => {
+          {sorted.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"
+                className="py-3 flex items-start gap-3 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) */}
+                <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}
@@ -92,14 +173,8 @@ export function DocumentsPanel({ data }: { data?: CaseDetail }) {
                       <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"
@@ -113,5 +188,6 @@ export function DocumentsPanel({ data }: { data?: CaseDetail }) {
           })}
         </ul>
       </ScrollArea>
+    </div>
   );
 }

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">
               סיווג