feat: add diagnosis detail UI

2026-05-22 16:58:23 +00:00
parent fd6f60f4f4
commit cf44a58486
4 changed files with 163 additions and 0 deletions
@@ -0,0 +1,28 @@
+import { Link } from 'react-router-dom';
+import type { DiagnosisRecord } from '@zeavis/shared';
+import { Card, CardContent } from '@/components/ui/card';
+import { DiagnosisStatusBadge } from '@/components/diagnosis-status-badge';
+
+export function DiagnosisCard({ diagnosis, expertLink = false }: { diagnosis: DiagnosisRecord; expertLink?: boolean }) {
+  const href = expertLink ? `/expert/reviews?diagnosis=${diagnosis.id}` : `/diagnoses/${diagnosis.id}`;
+
+  return (
+    <Link to={href}>
+      <Card className="transition hover:border-primary">
+        <CardContent className="flex gap-4 p-4">
+          <img src={diagnosis.imageUrl} alt="Daun jagung" className="h-24 w-24 rounded-lg object-cover" />
+          <div className="min-w-0 flex-1 space-y-2">
+            <div className="flex flex-wrap items-center justify-between gap-2">
+              <h3 className="font-semibold">{diagnosis.disease?.commonName ?? 'Diagnosis gagal'}</h3>
+              <DiagnosisStatusBadge status={diagnosis.status} />
+            </div>
+            <p className="text-sm text-muted-foreground">
+              {diagnosis.confidence === null ? 'Tidak ada confidence' : `Confidence ${(diagnosis.confidence * 100).toFixed(1)}%`}
+            </p>
+            <p className="text-xs text-muted-foreground">{new Date(diagnosis.createdAt).toLocaleString('id-ID')}</p>
+          </div>
+        </CardContent>
+      </Card>
+    </Link>
+  );
+}
@@ -0,0 +1,22 @@
+import type { DiagnosisStatus } from '@zeavis/shared';
+import { cn } from '@/lib/utils';
+
+const labels: Record<DiagnosisStatus, string> = {
+  ai_verified: 'Terverifikasi AI',
+  needs_review: 'Menunggu review pakar',
+  expert_verified: 'Diverifikasi pakar',
+  expert_corrected: 'Dikoreksi pakar',
+  failed: 'Gagal diproses',
+};
+
+const styles: Record<DiagnosisStatus, string> = {
+  ai_verified: 'bg-emerald-100 text-emerald-800',
+  needs_review: 'bg-amber-100 text-amber-800',
+  expert_verified: 'bg-blue-100 text-blue-800',
+  expert_corrected: 'bg-purple-100 text-purple-800',
+  failed: 'bg-red-100 text-red-800',
+};
+
+export function DiagnosisStatusBadge({ status, className }: { status: DiagnosisStatus; className?: string }) {
+  return <span className={cn('rounded-full px-3 py-1 text-xs font-semibold', styles[status], className)}>{labels[status]}</span>;
+}