feat(ui): IA redesign → production · יישום נאמן של 16 הדפים הנותרים למוקאפים
All checks were successful
G12 Leak-Guard / leak-guard (pull_request) Successful in 6s
All checks were successful
G12 Leak-Guard / leak-guard (pull_request) Successful in 6s
תיקון הגישה: יישום מלא ונאמן של עיצוב-המוקאפים המאושרים (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>
This commit is contained in:
@@ -5,7 +5,6 @@ import Link from "next/link";
|
||||
import { Pencil, Check, X, Share2 } from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
import { AppShell } from "@/components/app-shell";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
@@ -34,6 +33,16 @@ const SOURCE_TYPE_LABELS: Record<string, string> = {
|
||||
appeals_committee: "ועדת ערר",
|
||||
};
|
||||
|
||||
/** label/value pair in the parchment meta-band (mockup 08 `.mb`). */
|
||||
function MetaItem({ label, children }: { label: string; children: React.ReactNode }) {
|
||||
return (
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<span className="text-[0.7rem] text-ink-muted font-medium">{label}</span>
|
||||
<span className="text-[0.84rem] text-ink font-semibold">{children}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* Next 16 breaking change: route params are now a Promise.
|
||||
* The `use()` hook unwraps them inside a client component. */
|
||||
export default function PrecedentDetailPage({
|
||||
@@ -48,187 +57,224 @@ export default function PrecedentDetailPage({
|
||||
const [editingCitation, setEditingCitation] = useState(false);
|
||||
const [citationDraft, setCitationDraft] = useState("");
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<AppShell>
|
||||
<section className="space-y-6" dir="rtl">
|
||||
<div className="rounded-lg border border-danger/40 bg-danger-bg px-6 py-6 text-center space-y-3">
|
||||
<p className="text-danger font-semibold">שגיאה בטעינת הפסיקה</p>
|
||||
<p className="text-sm text-ink-muted">{error.message}</p>
|
||||
<Button asChild variant="outline">
|
||||
<Link href="/precedents">חזרה לספרייה</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</section>
|
||||
</AppShell>
|
||||
);
|
||||
}
|
||||
|
||||
if (isPending || !data) {
|
||||
return (
|
||||
<AppShell>
|
||||
<section className="space-y-6" dir="rtl">
|
||||
<Skeleton className="h-40 w-full" />
|
||||
<div className="grid gap-6 lg:grid-cols-[1fr_320px]">
|
||||
<div className="space-y-4">
|
||||
{[...Array(3)].map((_, i) => <Skeleton key={i} className="h-28 w-full" />)}
|
||||
</div>
|
||||
<Skeleton className="h-64 w-full" />
|
||||
</div>
|
||||
</section>
|
||||
</AppShell>
|
||||
);
|
||||
}
|
||||
|
||||
const date = data.date ? data.date.slice(0, 10) : null;
|
||||
|
||||
return (
|
||||
<AppShell>
|
||||
<section className="space-y-6" dir="rtl">
|
||||
<header>
|
||||
<nav className="text-[0.78rem] text-ink-muted mb-1">
|
||||
<Link href="/" className="hover:text-gold-deep">בית</Link>
|
||||
<span aria-hidden> · </span>
|
||||
<Link href="/precedents" className="hover:text-gold-deep">ספריית פסיקה</Link>
|
||||
<span aria-hidden> · </span>
|
||||
<span className="text-navy">פרטי פסיקה</span>
|
||||
<div dir="rtl">
|
||||
{/* ── parchment header band (mockup 08 `.band`) — breaks out to the
|
||||
AppShell <main> edges (px-10 py-10) for a full-width band. ──── */}
|
||||
<div className="-mx-10 -mt-10 mb-6 border-b border-rule bg-parchment px-10 py-6">
|
||||
<nav className="text-[0.78rem] text-ink-muted mb-2">
|
||||
<Link href="/precedents" className="text-gold-deep hover:underline">פסיקה</Link>
|
||||
<span aria-hidden> ← </span>
|
||||
<Link href="/precedents" className="text-gold-deep hover:underline">ספרייה</Link>
|
||||
<span aria-hidden> ← </span>
|
||||
<span>תקדים</span>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
{error ? (
|
||||
<Card className="bg-danger-bg border-danger/40">
|
||||
<CardContent className="px-6 py-6 text-center space-y-3">
|
||||
<p className="text-danger font-semibold">שגיאה בטעינת הפסיקה</p>
|
||||
<p className="text-sm text-ink-muted">{error.message}</p>
|
||||
<Button asChild variant="outline">
|
||||
<Link href="/precedents">חזרה לספרייה</Link>
|
||||
<div className="flex items-start justify-between gap-3 flex-wrap">
|
||||
<div className="min-w-0">
|
||||
<h1 className="text-navy text-2xl font-bold leading-snug mb-1">
|
||||
{data.case_name || "—"}
|
||||
</h1>
|
||||
<div className="text-ink-soft text-sm font-mono" dir="ltr">
|
||||
{data.case_number}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button asChild variant="outline" size="sm" className="border-rule">
|
||||
<Link href={`/graph?focus=cl:${id}`}>
|
||||
<Share2 className="w-3.5 h-3.5 me-1" /> הצג בגרף
|
||||
</Link>
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : isPending || !data ? (
|
||||
<div className="space-y-3">
|
||||
{[...Array(5)].map((_, i) => <Skeleton key={i} className="h-16 w-full" />)}
|
||||
<Button variant="outline" size="sm" className="border-rule" onClick={() => setEditing(true)}>
|
||||
<Pencil className="w-3.5 h-3.5 me-1" /> ערוך פרטים
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<Card className="bg-surface border-rule shadow-sm">
|
||||
<CardContent className="px-6 py-5 space-y-4">
|
||||
<div className="flex items-start justify-between gap-3 flex-wrap">
|
||||
<div className="min-w-0 flex-1">
|
||||
<h1 className="text-navy text-2xl font-semibold mb-1 leading-tight">
|
||||
{data.case_name || "—"}
|
||||
</h1>
|
||||
<div className="text-ink-muted text-sm font-mono" dir="ltr">
|
||||
{data.case_number}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button asChild variant="outline" size="sm">
|
||||
<Link href={`/graph?focus=cl:${id}`}>
|
||||
<Share2 className="w-3.5 h-3.5 me-1" /> הצג בגרף
|
||||
</Link>
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" onClick={() => setEditing(true)}>
|
||||
<Pencil className="w-3.5 h-3.5 me-1" /> ערוך פרטים
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Citation per Israeli unified citation rules. The LLM
|
||||
extractor composes this from the document; the chair
|
||||
can override below. */}
|
||||
<CitationBlock
|
||||
precedent={data as Precedent}
|
||||
editing={editingCitation}
|
||||
draft={citationDraft}
|
||||
onStartEdit={() => {
|
||||
setCitationDraft(data.citation_formatted ?? "");
|
||||
setEditingCitation(true);
|
||||
}}
|
||||
onCancel={() => setEditingCitation(false)}
|
||||
onChange={setCitationDraft}
|
||||
onSave={async () => {
|
||||
try {
|
||||
await update.mutateAsync({
|
||||
id,
|
||||
patch: { citation_formatted: citationDraft.trim() },
|
||||
});
|
||||
toast.success("מראה מקום עודכן");
|
||||
setEditingCitation(false);
|
||||
} catch (e) {
|
||||
toast.error(
|
||||
e instanceof Error ? e.message : "שמירה נכשלה",
|
||||
);
|
||||
}
|
||||
}}
|
||||
saving={update.isPending}
|
||||
/>
|
||||
{/* citation (unified Israeli citation rules) — chair-editable */}
|
||||
<div className="mt-4 max-w-3xl">
|
||||
<CitationBlock
|
||||
precedent={data as Precedent}
|
||||
editing={editingCitation}
|
||||
draft={citationDraft}
|
||||
onStartEdit={() => {
|
||||
setCitationDraft(data.citation_formatted ?? "");
|
||||
setEditingCitation(true);
|
||||
}}
|
||||
onCancel={() => setEditingCitation(false)}
|
||||
onChange={setCitationDraft}
|
||||
onSave={async () => {
|
||||
try {
|
||||
await update.mutateAsync({
|
||||
id,
|
||||
patch: { citation_formatted: citationDraft.trim() },
|
||||
});
|
||||
toast.success("מראה מקום עודכן");
|
||||
setEditingCitation(false);
|
||||
} catch (e) {
|
||||
toast.error(e instanceof Error ? e.message : "שמירה נכשלה");
|
||||
}
|
||||
}}
|
||||
saving={update.isPending}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
{data.practice_area ? (
|
||||
<Badge variant="outline" className="text-[0.7rem] bg-info-bg text-info border-transparent">
|
||||
{PRACTICE_AREA_LABELS[data.practice_area] ?? data.practice_area}
|
||||
</Badge>
|
||||
) : null}
|
||||
{data.source_type ? (
|
||||
<Badge variant="outline" className="text-[0.7rem]">
|
||||
{SOURCE_TYPE_LABELS[data.source_type] ?? data.source_type}
|
||||
</Badge>
|
||||
) : null}
|
||||
{data.precedent_level ? (
|
||||
<Badge variant="outline" className="text-[0.7rem] bg-gold-wash text-gold-deep border-rule">
|
||||
{data.precedent_level}
|
||||
</Badge>
|
||||
) : null}
|
||||
{data.is_binding ? (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="text-[0.7rem] bg-success-bg text-success border-transparent"
|
||||
>
|
||||
הלכה מחייבת
|
||||
</Badge>
|
||||
) : null}
|
||||
{data.court ? (
|
||||
<span className="text-[0.78rem] text-ink-muted">{data.court}</span>
|
||||
) : null}
|
||||
{data.date ? (
|
||||
<span className="text-[0.78rem] text-ink-muted tabular-nums" dir="ltr">
|
||||
{data.date.slice(0, 10)}
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
{/* meta-band — label/value pairs + chips (mockup 08 `.metaband`) */}
|
||||
<div className="mt-4 flex flex-wrap items-center gap-x-6 gap-y-3">
|
||||
{data.court ? <MetaItem label="בית-משפט">{data.court}</MetaItem> : null}
|
||||
{date ? (
|
||||
<MetaItem label="תאריך">
|
||||
<span className="tabular-nums" dir="ltr">{date}</span>
|
||||
</MetaItem>
|
||||
) : null}
|
||||
{data.practice_area ? (
|
||||
<MetaItem label="תחום">
|
||||
<Badge variant="outline" className="text-[0.72rem] bg-info-bg text-info border-transparent rounded-full px-3">
|
||||
{PRACTICE_AREA_LABELS[data.practice_area] ?? data.practice_area}
|
||||
</Badge>
|
||||
</MetaItem>
|
||||
) : null}
|
||||
{data.source_type ? (
|
||||
<MetaItem label="סוג-מקור">
|
||||
<Badge variant="outline" className="text-[0.72rem] rounded-full px-3">
|
||||
{SOURCE_TYPE_LABELS[data.source_type] ?? data.source_type}
|
||||
</Badge>
|
||||
</MetaItem>
|
||||
) : null}
|
||||
{data.precedent_level ? (
|
||||
<MetaItem label="רמת-תקדים">
|
||||
<Badge variant="outline" className="text-[0.72rem] bg-gold-wash text-gold-deep border-rule rounded-full px-3">
|
||||
{data.precedent_level}
|
||||
</Badge>
|
||||
</MetaItem>
|
||||
) : null}
|
||||
{data.is_binding ? (
|
||||
<MetaItem label="סיווג-מחייבות">
|
||||
<Badge variant="outline" className="text-[0.72rem] bg-success-bg text-success border-transparent rounded-full px-3">
|
||||
מחייב
|
||||
</Badge>
|
||||
</MetaItem>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{data.headnote ? (
|
||||
<div>
|
||||
<h3 className="text-navy text-sm font-semibold m-0 mb-1">Headnote</h3>
|
||||
<p className="text-ink-soft text-sm leading-relaxed m-0">
|
||||
{data.headnote}
|
||||
</p>
|
||||
</div>
|
||||
) : null}
|
||||
{data.subject_tags?.length ? (
|
||||
<div className="mt-3 flex items-center gap-1 flex-wrap">
|
||||
{data.subject_tags.map((t) => (
|
||||
<Badge key={t} variant="outline" className="text-[0.65rem] bg-surface">
|
||||
{t}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{data.summary ? (
|
||||
<div>
|
||||
<h3 className="text-navy text-sm font-semibold m-0 mb-1">תקציר</h3>
|
||||
<p className="text-ink-soft text-sm leading-relaxed m-0 whitespace-pre-line">
|
||||
{data.summary}
|
||||
</p>
|
||||
</div>
|
||||
) : null}
|
||||
{/* ── two-column body (mockup 08 `.wrap` grid) ────────────────── */}
|
||||
<div className="grid gap-6 lg:grid-cols-[1fr_320px]">
|
||||
{/* main column */}
|
||||
<div className="space-y-4">
|
||||
{data.summary ? (
|
||||
<DetailCard title="תקציר">
|
||||
<p className="text-ink-soft text-sm leading-8 m-0 whitespace-pre-line">
|
||||
{data.summary}
|
||||
</p>
|
||||
</DetailCard>
|
||||
) : null}
|
||||
|
||||
{(data as { key_quote?: string }).key_quote ? (
|
||||
<div>
|
||||
<h3 className="text-navy text-sm font-semibold m-0 mb-1">ציטוט מרכזי</h3>
|
||||
<blockquote className="text-ink-soft text-sm leading-relaxed border-s-[3px] border-gold bg-gold-wash ps-3 pe-4 py-3 rounded-e m-0">
|
||||
{(data as { key_quote?: string }).key_quote}
|
||||
</blockquote>
|
||||
</div>
|
||||
) : null}
|
||||
{data.headnote ? (
|
||||
<DetailCard title="כותרת-הלכה (headnote)" prov="opus">
|
||||
<p className="text-ink-soft text-sm leading-8 m-0">{data.headnote}</p>
|
||||
</DetailCard>
|
||||
) : null}
|
||||
|
||||
{data.subject_tags?.length ? (
|
||||
<div className="flex items-center gap-1 flex-wrap pt-1">
|
||||
{data.subject_tags.map((t) => (
|
||||
<Badge key={t} variant="outline" className="text-[0.65rem]">
|
||||
{t}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
</CardContent>
|
||||
</Card>
|
||||
{(data as { key_quote?: string }).key_quote ? (
|
||||
<DetailCard title="ציטוט-מפתח" prov="opus">
|
||||
<blockquote className="rounded-e border-s-[3px] border-gold bg-gold-wash px-4 py-3 text-sm text-ink-soft leading-8 m-0">
|
||||
{(data as { key_quote?: string }).key_quote}
|
||||
</blockquote>
|
||||
</DetailCard>
|
||||
) : null}
|
||||
|
||||
<Card className="bg-surface border-rule shadow-sm">
|
||||
<CardContent className="px-6 py-5">
|
||||
<RelatedCasesSection
|
||||
caseId={id}
|
||||
related={data.related_cases ?? []}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<div className="rounded-lg border border-rule bg-surface shadow-sm px-5 py-4">
|
||||
<ExtractedHalachotSection halachot={data.halachot ?? []} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Card className="bg-surface border-rule shadow-sm">
|
||||
<CardContent className="px-6 py-5">
|
||||
<ExtractedHalachotSection halachot={data.halachot ?? []} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
</>
|
||||
)}
|
||||
{/* side rail — citations + corroboration */}
|
||||
<div className="space-y-4">
|
||||
<RelatedCasesSection caseId={id} related={data.related_cases ?? []} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<PrecedentEditSheet
|
||||
caseLawId={editing ? id : null}
|
||||
onOpenChange={(open) => setEditing(open)}
|
||||
/>
|
||||
</section>
|
||||
<PrecedentEditSheet
|
||||
caseLawId={editing ? id : null}
|
||||
onOpenChange={(open) => setEditing(open)}
|
||||
/>
|
||||
</AppShell>
|
||||
);
|
||||
}
|
||||
|
||||
/** main-column card with a navy heading + optional provenance pill
|
||||
* ("מולא ע״י Opus", mockup 08 `.prov`). */
|
||||
function DetailCard({
|
||||
title,
|
||||
prov,
|
||||
children,
|
||||
}: {
|
||||
title: string;
|
||||
prov?: "opus";
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div className="rounded-lg border border-rule bg-surface shadow-sm px-5 py-4">
|
||||
<h2 className="text-navy text-[1.05rem] font-semibold mb-1.5 flex items-center gap-2.5 flex-wrap">
|
||||
{title}
|
||||
{prov === "opus" ? (
|
||||
<span className="inline-flex items-center rounded-full bg-info-bg text-info text-[0.68rem] font-semibold px-2.5 py-0.5">
|
||||
מולא ע״י Opus
|
||||
</span>
|
||||
) : null}
|
||||
</h2>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function CitationBlock({
|
||||
precedent,
|
||||
editing,
|
||||
@@ -252,7 +298,7 @@ function CitationBlock({
|
||||
|
||||
if (editing) {
|
||||
return (
|
||||
<div className="rounded-md border border-gold/40 bg-gold-wash/30 p-3 space-y-2">
|
||||
<div className="rounded-md border border-gold/40 bg-gold-wash/40 p-3 space-y-2">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<span className="text-[0.78rem] font-semibold text-navy">
|
||||
עריכת מראה מקום
|
||||
@@ -266,7 +312,7 @@ function CitationBlock({
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
rows={3}
|
||||
dir="rtl"
|
||||
className="font-mono text-sm"
|
||||
className="font-mono text-sm bg-surface"
|
||||
placeholder='ערר (ועדות ערר ...) 1234/24 **עורר נ' הוועדה המקומית** (נבו 1.2.2025)'
|
||||
disabled={saving}
|
||||
/>
|
||||
@@ -280,12 +326,7 @@ function CitationBlock({
|
||||
<Check className="w-3.5 h-3.5 me-1" />
|
||||
שמור
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={onCancel}
|
||||
disabled={saving}
|
||||
>
|
||||
<Button size="sm" variant="outline" onClick={onCancel} disabled={saving}>
|
||||
<X className="w-3.5 h-3.5 me-1" />
|
||||
ביטול
|
||||
</Button>
|
||||
@@ -296,7 +337,7 @@ function CitationBlock({
|
||||
|
||||
if (!citation) {
|
||||
return (
|
||||
<div className="rounded-md border border-dashed border-rule bg-rule-soft/30 p-3 flex items-center justify-between gap-2">
|
||||
<div className="rounded-md border border-dashed border-rule bg-surface/60 p-3 flex items-center justify-between gap-2">
|
||||
<span className="text-[0.78rem] text-ink-muted">
|
||||
מראה מקום (כללי הציטוט האחיד) — טרם חולץ
|
||||
</span>
|
||||
@@ -309,7 +350,7 @@ function CitationBlock({
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="rounded-md border border-rule bg-parchment-50 p-3 space-y-1.5">
|
||||
<div className="rounded-md border border-rule bg-surface p-3 space-y-1.5">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<span className="text-[0.7rem] uppercase tracking-wide text-ink-muted">
|
||||
מראה מקום
|
||||
|
||||
Reference in New Issue
Block a user