feat(ui): IA redesign → production · /approvals polish (1/17)

תרגום המוקאפ המאושר (Claude Design) לפרודקשן — דף ראשון, מקבע את דפוס-התרגום:
מרעננים UI בלבד, שומרים את כל ה-hooks/לוגיקה (usePendingApprovals + כל שדות
ApprovalCategory).

/approvals:
- נקודת-חומרה צבעונית ליד כל כותרת (high=danger/medium=warn/low=info/ok=success).
- "פריטים ממתינים" כ-pill ב-gold-wash (במקום מספר-ימני).
- CTA "לטיפול ←" gold-filled לשערים פעילים; "צפייה ←" outline כשהתור נקי.
- מספרים tabular.

בדיקה: npx tsc --noEmit ✓. אין שינוי-לוגיקה/API.

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

web-ui/src/app/approvals/page.tsx

@@ -24,6 +24,15 @@ const SEVERITY_BADGE: Record<ApprovalSeverity, string> = {
   ok: "bg-emerald-50 text-emerald-800 border-emerald-300/60",
 };
 
+// Severity expressed as a colored dot next to the title (matches the approved
+// IA-redesign mockup): high=danger, medium=warn, low=info, ok=success.
+const SEVERITY_DOT: Record<ApprovalSeverity, string> = {
+  high: "bg-danger",
+  medium: "bg-warn",
+  low: "bg-info",
+  ok: "bg-success",
+};
+
 function formatDate(iso?: string | null): string {
   if (!iso) return "";
   try {
@@ -42,10 +51,14 @@ function ApprovalCard({ cat }: { cat: ApprovalCategory }) {
   return (
     <Card className="bg-surface border-rule shadow-sm flex flex-col">
       <CardContent className="px-6 py-5 flex flex-col gap-3 grow">
-        <div className="flex items-start justify-between gap-3">
-          <h2 className="text-navy text-lg mb-0 leading-snug">{cat.label}</h2>
+        <div className="flex items-start gap-3">
           <span
-            className={`inline-flex items-center justify-center min-w-[2.25rem] h-7 px-2 rounded-full border text-sm font-semibold ${SEVERITY_BADGE[cat.severity]}`}
+            className={`mt-2 h-2.5 w-2.5 shrink-0 rounded-full ${SEVERITY_DOT[cat.severity]}`}
+            aria-hidden
+          />
+          <h2 className="text-navy text-lg mb-0 leading-snug grow">{cat.label}</h2>
+          <span
+            className={`inline-flex items-center justify-center min-w-[2.25rem] h-7 px-2 rounded-full border text-sm font-semibold tabular-nums ${SEVERITY_BADGE[cat.severity]}`}
             aria-label={`${cat.count} פריטים ממתינים`}
           >
             {cat.count}
@@ -98,9 +111,19 @@ function ApprovalCard({ cat }: { cat: ApprovalCategory }) {
 
         <div className="mt-auto pt-2">
           {cat.href ? (
-            <Button asChild variant="outline" size="sm" className="border-rule">
-              <Link href={cat.href}>לטיפול ←</Link>
-            </Button>
+            cleared ? (
+              <Button asChild variant="outline" size="sm" className="border-rule text-ink-muted">
+                <Link href={cat.href}>צפייה ←</Link>
+              </Button>
+            ) : (
+              <Button
+                asChild
+                size="sm"
+                className="bg-gold text-white hover:bg-gold-deep border-transparent"
+              >
+                <Link href={cat.href}>לטיפול ←</Link>
+              </Button>
+            )
           ) : (
             <span className="text-[0.75rem] text-ink-muted">סקירה ידנית (ראה דוח FU-5)</span>
           )}
@@ -133,13 +156,11 @@ export default function ApprovalsPage() {
               </p>
             </div>
             {typeof data?.total_pending === "number" ? (
-              <div className="text-end">
-                <div className="text-3xl font-semibold text-navy leading-none">
+              <div className="inline-flex items-baseline gap-2 rounded-lg border border-rule bg-gold-wash px-4 py-2.5">
+                <span className="text-2xl font-semibold text-gold-deep leading-none tabular-nums">
                   {data.total_pending}
-                </div>
-                <div className="text-[0.72rem] uppercase tracking-[0.08em] text-ink-muted mt-1">
-                  פריטים ממתינים
-                </div>
+                </span>
+                <span className="text-[0.85rem] text-ink-soft">פריטים ממתינים</span>
               </div>
             ) : null}
           </div>