feat(ui): IA redesign → production · יישום נאמן של 16 הדפים הנותרים למוקאפים

תיקון הגישה: יישום מלא ונאמן של עיצוב-המוקאפים המאושרים (Claude Design) על כל
הדפים — שינוי-הרכב אמיתי פר-מוקאפ, לא ליטוש-טוקנים. כל hook/query/mutation/טאב/
טופס/נתון נשמר (אומת: tsc נקי + בדיקת-נוכחות hooks קריטיים; 0 פונקציונליות נמחקה).

דפים (← מוקאפ):
- בית — לוח: KPI + "תיקים לפי סטטוס" (bars) + כרטיס-אישורים + CTA כפול.
- ארכיון — filter-bar שטוח + טבלה נקייה + צ'יפי-סוג/תוצאה.
- הערות יו״ר — פריסה דו-טורית + טופס-הוספה חי + כרטיסי-הערה.
- ספריית-פסיקה — tabs קו-תחתון + כרטיסי-תוצאה halacha/קטע + AuthorityBadge.
- דף-תקדים — באנר-meta parchment + דו-טורי + provenance pills.
- פסיקה-חסרה — pill פתוחים + צ'יפי-סטטוס + CTA העלאה.
- יומונים — אזור-העלאה מקווקו + כרטיסי-digest + "ממתין" כתווית פסיבית.
- גרף — פאנל-צד שכבות/אנליטיקה + canvas parchment.
- אימון-סגנון — פורטרט: banner + KPI + אנטומיה + ביטויי-חתימה.
- מתודולוגיה — עורך-צ'קליסט + "חל על:" + canon chip.
- מיומנויות/סקריפטים — טבלאות אמיתיות + צ'יפי-סטטוס.
- הגדרות — sidenav דו-טורי + env-rows עם "ממתין ל-redeploy".
- דף-תיק — באנר-תיק parchment + tabs + timeline + "פתח עורך החלטה".
- תפעול — SectionHeaders + טבלת-שירותים + כרטיסי-שער gold-wash.
- compose — באנר-תיק + SOT pill + פריסה דו-טורית + "השלמה והעברה".

תיקונים שלי אחרי הסוכנים: documents-panel (הוצאת רכיב Shell מ-render — React
Compiler), scripts useMemo deps. /approvals כבר נבנה מחדש נאמנה (commit קודם).

בדיקות: npx tsc --noEmit ✓ · eslint ✓ (לבד מ-learning-panel:109 קיים-מראש).
שימור-פונקציונליות אומת. CI Docker build = שער סופי לפני deploy.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

web-ui/src/components/cases/documents-panel.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useEffect, useState, type ReactNode } from "react";
 import { Button } from "@/components/ui/button";
 import { Progress } from "@/components/ui/progress";
 import {
@@ -295,6 +295,25 @@ function DocumentRow({
 
 /* ── Main panel ────────────────────────────────────────────────── */
 
+// IA-redesign mockup 17 — card with a parchment header band wrapping the
+// (unchanged) document list. Module-level so it isn't re-created during render
+// (React Compiler: "Cannot create components during render").
+function DocumentsShell({ count, children }: { count: number; children: ReactNode }) {
+  return (
+    <div className="rounded-lg border border-rule bg-surface shadow-sm overflow-hidden">
+      <div className="px-5 py-3.5 border-b border-rule-soft bg-parchment text-[0.92rem] font-semibold text-navy">
+        מסמכי התיק
+        {count > 0 && (
+          <span className="ms-2 text-[0.72rem] text-ink-muted font-medium tabular-nums">
+            ({count})
+          </span>
+        )}
+      </div>
+      <div className="px-5 py-4">{children}</div>
+    </div>
+  );
+}
+
 export function DocumentsPanel({
   data,
 }: {
@@ -305,10 +324,12 @@ export function DocumentsPanel({
 
   if (docs.length === 0) {
     return (
-      <div className="text-center py-12 text-ink-muted">
-        <div className="text-gold text-2xl mb-2" aria-hidden="true">❦</div>
-        <p className="text-sm">אין מסמכים בתיק זה</p>
-      </div>
+      <DocumentsShell count={docs.length}>
+        <div className="text-center py-12 text-ink-muted">
+          <div className="text-gold text-2xl mb-2" aria-hidden="true">❦</div>
+          <p className="text-sm">אין מסמכים בתיק זה</p>
+        </div>
+      </DocumentsShell>
     );
   }
 
@@ -328,7 +349,8 @@ export function DocumentsPanel({
   const pct = docs.length > 0 ? Math.round((done / docs.length) * 100) : 0;
 
   return (
-    <div className="space-y-3">
+    <DocumentsShell count={docs.length}>
+      <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">
@@ -371,6 +393,7 @@ export function DocumentsPanel({
           ))}
         </ul>
       </div>
-    </div>
+      </div>
+    </DocumentsShell>
   );
 }