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,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">
+    <div className="space-y-3">
-      <ul className="divide-y divide-rule" dir="rtl">
+      {hasIncomplete && (
-        {docs.map((doc) => {
+        <div className="rounded-lg border border-rule bg-parchment/40 px-4 py-3 space-y-2" dir="rtl">
-          const displayName = doc.title || filenameFromPath(doc.file_path);
+          <div className="flex items-center gap-4 text-[0.78rem] flex-wrap">
-          const statusDone =
+            {done > 0 && (
-            doc.extraction_status === "completed" ||
+              <span className="flex items-center gap-1 text-success">
-            doc.extraction_status === "proofread";
+                <CheckCircle2 className="w-3.5 h-3.5" />
-          return (
+                {done} {STATUS_LABELS.completed}
-            <li
+              </span>
-              key={doc.id}
+            )}
-              className="py-3 flex items-start gap-4 hover:bg-gold-wash/30 transition-colors px-2 -mx-2 rounded"
+            {processing > 0 && (
-            >
+              <span className="flex items-center gap-1 text-gold-deep">
-              {/* Title + meta — flex-1 keeps it glued to the start (right in RTL) */}
+                <Loader2 className="w-3.5 h-3.5 animate-spin" />
-              <div className="flex-1 min-w-0 space-y-0.5 text-right">
+                {processing} {STATUS_LABELS.processing}
-                <div className="text-ink font-medium truncate" title={displayName}>
+              </span>
-                  {displayName}
+            )}
+            {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.doc_type && (
-                  {doc.page_count != null && (
+                  <Badge
-                    <span className="tabular-nums">{doc.page_count} עמ׳</span>
+                    variant="outline"
-                  )}
+                    className={`rounded-full px-2 py-0.5 text-[0.7rem] shrink-0 ms-auto ${doctypeTone(doc.doc_type)}`}
-                  {doc.created_at && <span>{formatDate(doc.created_at)}</span>}
+                  >
-                  {!statusDone && doc.extraction_status && (
+                    {doctypeLabel(doc.doc_type)}
-                    <span className="text-warn">
+                  </Badge>
-                      {STATUS_LABELS[doc.extraction_status] ?? doc.extraction_status}
+                )}
-                    </span>
+              </li>
-                  )}
+            );
-                </div>
+          })}
-              </div>
+        </ul>
-              {/* Type badge — ms-auto forces it to the inline-end (= left in RTL) */}
+      </ScrollArea>
-              {doc.doc_type && (
+    </div>
-                <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>
   );
 }

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