Files
legal-ai/web-ui/src/components/cases/drafts-panel.tsx
Chaim 36ca713dfa
All checks were successful
Build & Deploy / build-and-deploy (push) Successful in 6s
Retrofit: tighten yod-bet pattern, add cover-block fallback
The "על כן" pattern for block-yod-bet was too greedy and matched mid-discussion
transitional sentences (e.g. "על כן, במקום בו..."), which caused forward-scan
to skip block-yod-alef ("סוף דבר") via the pointer advance.

Tightened to require an operative subject (אנו / הערר / הוועדה / ועדת הערר)
so terminal "על כן, אנו מחליטים" still matches but mid-block transitions don't.

Added structural_fallback for cover blocks (alef/bet/gimel/dalet) — these are
template metadata not present in user-edited DOCX bodies. Inject zero-content
anchors so apply_user_edit can still target them later. The frontend toast
distinguishes real content gaps from fallback anchors.

Also expanded heading patterns based on training corpus inspection:
- block-vav: על המקרקעין חלות / במצב התכנוני / התכניות החלות
- block-zayin: טענות העוררת
- block-chet: עיקר תגובת המשיב
- block-tet: הדיון בוועדת הערר

For case 1130-25, this raises detection from 6/12 to 11/12 blocks — only
block-yod-bet remains missing (Daphna's edit ends at "סוף דבר" + numbered
ruling, no terminal "ההחלטה" or "על כן אנו מחליטים" paragraph).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-26 06:57:41 +00:00

573 lines
20 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
"use client";
import { useRef, useState } from "react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
import {
useExports,
useExportDocx,
useUploadDraft,
useMarkFinal,
useDeleteDraft,
useActiveDraft,
} from "@/lib/api/exports";
import {
useCaseFeedback,
useCreateFeedback,
useResolveFeedback,
CATEGORY_LABELS,
CATEGORY_COLORS,
BLOCK_LABELS,
type FeedbackCategory,
} from "@/lib/api/feedback";
import type { CaseStatus } from "@/lib/api/cases";
import { toast } from "sonner";
import {
FileText,
Download,
Upload,
Award,
Loader2,
FileOutput,
Plus,
Trash2,
} from "lucide-react";
/* Statuses at which a draft is considered ready */
const DRAFT_READY: CaseStatus[] = [
"drafted",
"exported",
"reviewed",
"final",
];
function formatSize(bytes: number): string {
if (bytes < 1024) return `${bytes} B`;
const kb = bytes / 1024;
if (kb < 1024) return `${kb.toFixed(0)} KB`;
return `${(kb / 1024).toFixed(1)} MB`;
}
function formatDate(epoch: number): string {
return new Date(epoch * 1000).toLocaleDateString("he-IL", {
day: "numeric",
month: "short",
year: "numeric",
hour: "2-digit",
minute: "2-digit",
});
}
/* ── Main component ─────────────────────────────────── */
export function DraftsPanel({
caseNumber,
status,
}: {
caseNumber: string;
status?: CaseStatus;
}) {
const { data: exports, isLoading: exportsLoading } = useExports(caseNumber);
const { data: feedbacks, isLoading: feedbackLoading } =
useCaseFeedback(caseNumber);
const { data: activeDraft } = useActiveDraft(caseNumber);
const exportDocx = useExportDocx(caseNumber);
const uploadDraft = useUploadDraft(caseNumber);
const markFinal = useMarkFinal(caseNumber);
const deleteDraft = useDeleteDraft(caseNumber);
const resolveMutation = useResolveFeedback();
const fileRef = useRef<HTMLInputElement>(null);
const [deleteTarget, setDeleteTarget] = useState<string | null>(null);
const isDraftReady = status && DRAFT_READY.includes(status);
const openFeedbacks = feedbacks?.filter((f) => !f.resolved) ?? [];
// Determine draft label based on *actual* v-numbers in filenames (not counts).
// "(מתוקנת)" suffix appears when there's at least one עריכה-* file.
const draftLabel = (() => {
if (!exports?.length) return "טיוטה מוכנה לעיון";
const drafts = exports.filter((f) => f.filename.startsWith("טיוטה-"));
const revisions = exports.filter((f) => f.filename.startsWith("עריכה-"));
if (!drafts.length) return "טיוטה מוכנה לעיון";
const versions = drafts
.map((f) => {
const m = f.filename.match(/v(\d+)/);
return m ? parseInt(m[1], 10) : 0;
})
.filter((n) => n > 0);
const maxVer = versions.length ? Math.max(...versions) : drafts.length;
const suffix = revisions.length > 0 ? " (מתוקנת)" : "";
return `טיוטה v${maxVer}${suffix} מוכנה לעיון`;
})();
function handleUpload(file: File) {
uploadDraft.mutate(file, {
onSuccess: (data) => {
const added = data.bookmarks_added?.length ?? 0;
const missing = data.missing_blocks?.length ?? 0;
const fallback = data.structural_fallback?.length ?? 0;
const realDetected = added - fallback;
if (data.apply_status === "completed" || data.apply_status === "ok") {
if (realDetected > 0) {
toast.success(`הועלה: ${data.filename} — זוהו ${realDetected} בלוקי תוכן`);
} else {
toast.success(`הועלה: ${data.filename}`);
}
if (missing > 0) {
toast.warning(
`שימו לב: ${missing} בלוקי תוכן לא זוהו — בדוק את הכותרות`,
);
}
} else {
toast.error(`הועלה אך השילוב נכשל: ${data.apply_status ?? "שגיאה"}`);
}
},
onError: (err) =>
toast.error(err instanceof Error ? err.message : "שגיאה בהעלאה"),
});
}
function handleExport() {
exportDocx.mutate(undefined, {
onSuccess: () => toast.success("הטיוטה יוצאה בהצלחה"),
onError: () => toast.error("שגיאה בייצוא"),
});
}
function handleMarkFinal(filename: string) {
markFinal.mutate(filename, {
onSuccess: () => toast.success("סומן כסופי"),
onError: () => toast.error("שגיאה בסימון"),
});
}
function handleResolve(id: string) {
resolveMutation.mutate(
{ feedbackId: id, applied_to: [] },
{
onSuccess: () => toast.success("ההערה סומנה כמטופלת"),
onError: () => toast.error("שגיאה בעדכון"),
},
);
}
return (
<div className="space-y-6">
{/* ── Banner ── */}
{isDraftReady && (
<div className="flex items-center gap-3 rounded-lg border border-gold/40 bg-gold-wash px-4 py-3">
<FileText className="w-5 h-5 text-gold-deep shrink-0" />
<span className="text-sm font-medium text-gold-deep">
{draftLabel}
</span>
<div className="me-auto" />
<Button
size="sm"
onClick={handleExport}
disabled={exportDocx.isPending}
className="bg-navy hover:bg-navy-soft text-parchment"
>
{exportDocx.isPending ? (
<Loader2 className="w-4 h-4 animate-spin me-1.5" />
) : (
<FileOutput className="w-4 h-4 me-1.5" />
)}
הפק DOCX
</Button>
</div>
)}
{/* ── Active-draft badge — the DOCX that is the current source of truth ── */}
{activeDraft?.filename && (
<div className="flex items-center gap-2 text-xs text-ink-muted">
<span>מקור האמת:</span>
<Badge variant="outline" className="bg-surface">
{activeDraft.filename}
</Badge>
</div>
)}
{/* ── Exports list ── */}
<section>
<div className="flex items-center justify-between mb-3">
<h3 className="text-navy text-base">קבצי טיוטה</h3>
<div className="flex items-center gap-2">
<input
ref={fileRef}
type="file"
accept=".docx"
className="hidden"
onChange={(e) => {
const f = e.target.files?.[0];
if (f) handleUpload(f);
if (fileRef.current) fileRef.current.value = "";
}}
/>
<Button
variant="outline"
size="sm"
onClick={() => fileRef.current?.click()}
disabled={uploadDraft.isPending}
>
{uploadDraft.isPending ? (
<Loader2 className="w-4 h-4 animate-spin me-1.5" />
) : (
<Upload className="w-4 h-4 me-1.5" />
)}
העלה גרסה מתוקנת
</Button>
</div>
</div>
{exportsLoading ? (
<p className="text-sm text-ink-muted">טוען...</p>
) : !exports?.length ? (
<p className="text-sm text-ink-muted">
אין טיוטות עדיין.{" "}
{!isDraftReady && "הטיוטה תופיע כאן כשתהיה מוכנה."}
</p>
) : (
<div className="rounded-lg border border-rule overflow-hidden">
<table className="w-full text-sm">
<thead>
<tr className="bg-rule-soft/40 text-ink-muted text-[0.75rem]">
<th className="text-start px-4 py-2 font-medium">File</th>
<th className="text-start px-4 py-2 font-medium">Size</th>
<th className="text-start px-4 py-2 font-medium">Date</th>
<th className="px-4 py-2" />
</tr>
</thead>
<tbody>
{exports.map((file) => (
<tr
key={file.filename}
className="border-t border-rule hover:bg-rule-soft/20"
>
<td className="px-4 py-2.5 flex items-center gap-2">
<span>{file.filename}</span>
{file.is_final && (
<Badge className="bg-success-bg text-success border-success/40 text-[0.65rem]">
<Award className="w-3 h-3 me-0.5" />
סופי
</Badge>
)}
</td>
<td className="px-4 py-2.5 text-ink-muted tabular-nums">
{formatSize(file.size)}
</td>
<td className="px-4 py-2.5 text-ink-muted tabular-nums">
{formatDate(file.created_at)}
</td>
<td className="px-4 py-2.5">
<div className="flex items-center gap-1 justify-end">
<Button
variant="ghost"
size="sm"
className="h-7 px-2"
onClick={() =>
window.open(
`/api/cases/${caseNumber}/exports/${file.filename}/download`,
"_blank",
)
}
>
<Download className="w-3.5 h-3.5 me-1" />
הורד
</Button>
{!file.is_final && (
<>
<Button
variant="ghost"
size="sm"
className="h-7 px-2 text-ink-muted"
onClick={() => handleMarkFinal(file.filename)}
disabled={markFinal.isPending}
>
<Award className="w-3.5 h-3.5 me-1" />
סמן כסופי
</Button>
<Button
variant="ghost"
size="sm"
className="h-7 px-2 text-red-500 hover:text-red-700 hover:bg-red-50"
onClick={() => setDeleteTarget(file.filename)}
>
<Trash2 className="w-3.5 h-3.5" />
</Button>
</>
)}
</div>
</td>
</tr>
))}
</tbody>
</table>
</div>
)}
{/* Delete confirmation dialog */}
<Dialog
open={deleteTarget !== null}
onOpenChange={(open) => !open && setDeleteTarget(null)}
>
<DialogContent className="sm:max-w-sm" dir="rtl">
<DialogHeader>
<DialogTitle>מחיקת טיוטה</DialogTitle>
</DialogHeader>
<p className="text-sm text-ink-muted">
למחוק את הקובץ{" "}
<span className="font-medium text-ink">{deleteTarget}</span>?
<br />
פעולה זו לא ניתנת לביטול.
</p>
<div className="flex justify-end gap-2 pt-2">
<Button
variant="outline"
size="sm"
onClick={() => setDeleteTarget(null)}
>
ביטול
</Button>
<Button
variant="destructive"
size="sm"
disabled={deleteDraft.isPending}
onClick={() => {
if (!deleteTarget) return;
deleteDraft.mutate(deleteTarget, {
onSuccess: () => {
toast.success("הקובץ נמחק");
setDeleteTarget(null);
},
onError: () => toast.error("שגיאה במחיקה"),
});
}}
>
{deleteDraft.isPending ? (
<Loader2 className="w-4 h-4 animate-spin me-1" />
) : (
<Trash2 className="w-4 h-4 me-1" />
)}
מחק
</Button>
</div>
</DialogContent>
</Dialog>
</section>
{/* ── Chair feedback ── */}
<section>
<div className="flex items-center justify-between mb-3">
<h3 className="text-navy text-base">
הערות יו״ר
{openFeedbacks.length > 0 && (
<Badge className="ms-2 bg-red-100 text-red-700 border-red-200 text-[0.65rem]">
{openFeedbacks.length} פתוחות
</Badge>
)}
</h3>
<NewCaseFeedbackDialog caseNumber={caseNumber} />
</div>
{feedbackLoading ? (
<p className="text-sm text-ink-muted">טוען...</p>
) : !feedbacks?.length ? (
<p className="text-sm text-ink-muted">אין הערות לתיק זה.</p>
) : (
<div className="space-y-2">
{feedbacks.map((fb) => (
<div
key={fb.id}
className={`rounded-lg border border-rule bg-surface px-4 py-3 space-y-2 ${
fb.resolved ? "opacity-50" : ""
}`}
>
<div className="flex items-center gap-2 flex-wrap">
<Badge
className={`text-[0.65rem] border ${CATEGORY_COLORS[fb.category]}`}
>
{CATEGORY_LABELS[fb.category]}
</Badge>
<Badge variant="outline" className="text-[0.65rem]">
{BLOCK_LABELS[fb.block_id] ?? fb.block_id}
</Badge>
{fb.resolved && (
<Badge className="bg-emerald-100 text-emerald-700 text-[0.65rem] border border-emerald-200">
טופל
</Badge>
)}
<span className="text-[0.65rem] text-ink-muted me-auto">
{fb.created_at
? new Date(fb.created_at).toLocaleDateString("he-IL")
: ""}
</span>
</div>
<p className="text-sm leading-relaxed">{fb.feedback_text}</p>
{fb.lesson_extracted && (
<div className="bg-gold/5 border border-gold/20 rounded-md px-3 py-2">
<p className="text-[0.65rem] font-semibold text-gold-deep mb-0.5">
לקח שהופק:
</p>
<p className="text-sm text-ink-muted leading-relaxed">
{fb.lesson_extracted}
</p>
</div>
)}
{!fb.resolved && (
<div className="flex justify-end">
<Button
variant="outline"
size="sm"
className="h-7 text-[0.75rem]"
onClick={() => handleResolve(fb.id)}
disabled={resolveMutation.isPending}
>
סמן כמטופל
</Button>
</div>
)}
</div>
))}
</div>
)}
</section>
</div>
);
}
/* ── New feedback dialog (case-scoped) ─────────────── */
function NewCaseFeedbackDialog({ caseNumber }: { caseNumber: string }) {
const [open, setOpen] = useState(false);
const createMutation = useCreateFeedback();
const [blockId, setBlockId] = useState("block-yod");
const [category, setCategory] = useState<FeedbackCategory>("missing_content");
const [feedbackText, setFeedbackText] = useState("");
const [lesson, setLesson] = useState("");
function handleSubmit(e: React.FormEvent) {
e.preventDefault();
if (!feedbackText.trim()) return;
createMutation.mutate(
{
case_number: caseNumber,
block_id: blockId,
feedback_text: feedbackText,
category,
lesson_extracted: lesson || undefined,
},
{
onSuccess: () => {
toast.success("ההערה נרשמה בהצלחה");
setOpen(false);
setFeedbackText("");
setLesson("");
},
onError: () => toast.error("שגיאה ברישום ההערה"),
},
);
}
return (
<Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger asChild>
<Button variant="outline" size="sm">
<Plus className="w-3.5 h-3.5 me-1" />
הערה חדשה
</Button>
</DialogTrigger>
<DialogContent className="sm:max-w-lg" dir="rtl">
<DialogHeader>
<DialogTitle>הערת יו״ר תיק {caseNumber}</DialogTitle>
</DialogHeader>
<form onSubmit={handleSubmit} className="space-y-4 mt-2">
<div className="grid grid-cols-2 gap-3">
<div>
<Label htmlFor="fb-block">בלוק</Label>
<select
id="fb-block"
value={blockId}
onChange={(e) => setBlockId(e.target.value)}
className="w-full rounded-md border border-rule bg-surface px-3 py-2 text-sm"
>
{Object.entries(BLOCK_LABELS).map(([key, label]) => (
<option key={key} value={key}>
{label}
</option>
))}
</select>
</div>
<div>
<Label htmlFor="fb-category">קטגוריה</Label>
<select
id="fb-category"
value={category}
onChange={(e) =>
setCategory(e.target.value as FeedbackCategory)
}
className="w-full rounded-md border border-rule bg-surface px-3 py-2 text-sm"
>
{Object.entries(CATEGORY_LABELS).map(([key, label]) => (
<option key={key} value={key}>
{label}
</option>
))}
</select>
</div>
</div>
<div>
<Label htmlFor="fb-text">ההערה</Label>
<Textarea
id="fb-text"
value={feedbackText}
onChange={(e) => setFeedbackText(e.target.value)}
placeholder="מה דפנה אמרה? מה חסר, מה לא נכון, מה צריך לשנות..."
rows={4}
required
/>
</div>
<div>
<Label htmlFor="fb-lesson">לקח שהופק (אופציונלי)</Label>
<Textarea
id="fb-lesson"
value={lesson}
onChange={(e) => setLesson(e.target.value)}
placeholder="מה למדנו מההערה? מה צריך לשנות במערכת?"
rows={2}
/>
</div>
<div className="flex justify-end gap-2 pt-2">
<Button
type="button"
variant="outline"
onClick={() => setOpen(false)}
>
ביטול
</Button>
<Button type="submit" disabled={createMutation.isPending}>
{createMutation.isPending ? "שומר..." : "שמור הערה"}
</Button>
</div>
</form>
</DialogContent>
</Dialog>
);
}