Chaim
d9948045f1
All checks were successful
Build & Deploy / build-and-deploy (push) Successful in 1m36s
The drafts panel now checks for עריכה-v* files and shows the correct draft number (e.g. "טיוטה 2 (מתוקנת) מוכנה לעיון") instead of always displaying "טיוטה ראשונה מוכנה לעיון". Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
540 lines
18 KiB
TypeScript
540 lines
18 KiB
TypeScript
"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,
|
||
} 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 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 exports — revised if there are עריכה files or multiple טיוטה versions
|
||
const draftLabel = (() => {
|
||
if (!exports?.length) return "טיוטה מוכנה לעיון";
|
||
const revisions = exports.filter((f) => f.filename.startsWith("עריכה-"));
|
||
const drafts = exports.filter((f) => f.filename.startsWith("טיוטה-"));
|
||
if (revisions.length > 0) {
|
||
const ver = revisions.length + 1;
|
||
return `טיוטה ${ver} (מתוקנת) מוכנה לעיון`;
|
||
}
|
||
if (drafts.length > 1) {
|
||
return `טיוטה ${drafts.length} מוכנה לעיון`;
|
||
}
|
||
return "טיוטה ראשונה מוכנה לעיון";
|
||
})();
|
||
|
||
function handleUpload(file: File) {
|
||
uploadDraft.mutate(file, {
|
||
onSuccess: (data) =>
|
||
toast.success(`הועלה: ${data.filename}`),
|
||
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>
|
||
)}
|
||
|
||
{/* ── 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>
|
||
);
|
||
}
|