fix(scan): resolve double scrollbar and modal size type errors
- Remove nested overflow and fixed height classes (`max-h-[75vh]`, `overflow-y-auto`) from the inner modal container to fix the double scrollbar UI glitch. - Adjust the Modal `size` property to a supported type to resolve TypeScript compilation errors. - Ensure a cleaner, more seamless scrolling experience for the diagnosis result pop-up.
This commit is contained in:
seriouselly
@@ -1,102 +1,139 @@
|
||||
import { Link, useParams } from 'react-router-dom';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { DiagnosisStatusBadge } from '@/components/diagnosis-status-badge';
|
||||
import { RiskBadge } from '@/components/risk-badge';
|
||||
import { apiClient } from '@/lib/api-client';
|
||||
import { Link, useParams } from "react-router-dom";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { apiClient } from "@/lib/api-client";
|
||||
import { DiagnosisResultView } from "../components/diagnose-result-view";
|
||||
|
||||
export function DiagnosisDetailPage() {
|
||||
const { id } = useParams();
|
||||
const query = useQuery({
|
||||
queryKey: ['diagnosis', id],
|
||||
queryKey: ["diagnosis", id],
|
||||
queryFn: () => apiClient.getDiagnosis(id!),
|
||||
enabled: Boolean(id),
|
||||
});
|
||||
|
||||
if (query.isLoading) return <div className="p-8 text-center text-muted-foreground">Memuat diagnosis...</div>;
|
||||
if (query.error || !query.data) return <div className="p-8 text-center text-red-600">Diagnosis tidak ditemukan</div>;
|
||||
if (query.isLoading)
|
||||
return (
|
||||
<div className="p-8 text-center text-muted-foreground">
|
||||
Memuat diagnosis...
|
||||
</div>
|
||||
);
|
||||
if (query.error || !query.data)
|
||||
return (
|
||||
<div className="p-8 text-center text-red-600">
|
||||
Diagnosis tidak ditemukan
|
||||
</div>
|
||||
);
|
||||
|
||||
const diagnosis = query.data;
|
||||
const finalImageUrl =
|
||||
diagnosis.imageUrl || "/src/assets/images/placeholder-image.png";
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header Page */}
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-primary">Detail Diagnosis</p>
|
||||
<h1 className="text-xl md:text-3xl font-bold">{diagnosis.disease?.commonName ?? 'Diagnosis gagal'}</h1>
|
||||
</div>
|
||||
<Button asChild variant="outline"><Link to="/dashboard">Kembali</Link></Button>
|
||||
<div>
|
||||
<h1 className="text-xl md:text-3xl font-extrabold text-[#214B11]">
|
||||
Analisis & Modul Edukasi
|
||||
</h1>
|
||||
<p className="text-sm font-medium text-slate-500 mt-1">
|
||||
Hasil deteksi AI dan panduan edukasi berdasarkan gambar yang
|
||||
diunggah
|
||||
</p>
|
||||
</div>
|
||||
<Button asChild variant="outline">
|
||||
<Link to="/diagnoses">Kembali ke Riwayat</Link>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<section className="grid gap-6 lg:grid-cols-2">
|
||||
<Card>
|
||||
<CardContent className="p-4">
|
||||
<img src={diagnosis.imageUrl} alt="Daun jagung" className="w-full rounded-xl object-cover" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
{/* Warning if expert review is needed */}
|
||||
{diagnosis.status === "needs_review" && (
|
||||
<div className="rounded-xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-900 shadow-sm">
|
||||
<strong>Catatan:</strong> Hasil ini masih sementara karena tingkat
|
||||
keyakinan (confidence) di bawah standar minimum dan sedang menunggu
|
||||
ulasan pakar.
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<CardTitle>Hasil AI</CardTitle>
|
||||
<DiagnosisStatusBadge status={diagnosis.status} />
|
||||
</div>
|
||||
<CardDescription>
|
||||
{diagnosis.confidence === null ? 'Model gagal memproses gambar.' : `Confidence ${(diagnosis.confidence * 100).toFixed(1)}%`}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{diagnosis.status === 'needs_review' && (
|
||||
<div className="rounded-lg border border-amber-200 bg-amber-50 p-4 text-sm text-amber-900">
|
||||
Hasil ini masih sementara karena confidence di bawah 70% dan sedang menunggu review pakar.
|
||||
{/* Message if AI failed to process */}
|
||||
{diagnosis.failureReason && (
|
||||
<div className="rounded-xl border border-red-200 bg-red-50 p-4 text-sm text-red-900 shadow-sm">
|
||||
<strong>Gagal Memproses:</strong> {diagnosis.failureReason}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Diagnosis Result View */}
|
||||
<DiagnosisResultView
|
||||
imageUrl={finalImageUrl}
|
||||
confidence={diagnosis.confidence ?? 0}
|
||||
diseaseName={diagnosis.disease?.commonName ?? "Tidak Diketahui"}
|
||||
scientificName={diagnosis.disease?.label ?? ""}
|
||||
riskLevel={diagnosis.disease?.riskLevel ?? "Sedang"}
|
||||
description={
|
||||
diagnosis.disease?.description ??
|
||||
diagnosis.disease?.summary ??
|
||||
"Deskripsi tidak tersedia."
|
||||
}
|
||||
symptoms={diagnosis.disease?.symptoms ?? []}
|
||||
preventions={diagnosis.disease?.recommendations ?? []}
|
||||
medicines={(diagnosis.disease as any)?.medicineRecommendations ?? []}
|
||||
/>
|
||||
|
||||
{/* List of Alternative Predictions */}
|
||||
{diagnosis.predictions && diagnosis.predictions.length > 0 && (
|
||||
<div className="bg-white rounded-2xl border border-slate-200 shadow-sm p-4 md:p-6 mt-4">
|
||||
<h4 className="font-bold text-[#214B11] mb-1">
|
||||
Semua Prediksi Model
|
||||
</h4>
|
||||
<p className="text-xs text-slate-500 mb-4">
|
||||
Tebakan alternatif lain dari sistem AI ZeaVis
|
||||
</p>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||
{diagnosis.predictions
|
||||
.sort((a, b) => a.rank - b.rank)
|
||||
.map((pred) => (
|
||||
<div
|
||||
key={pred.id}
|
||||
className="flex items-center justify-between rounded-xl border border-slate-100 bg-slate-50 p-3 text-sm"
|
||||
>
|
||||
<span className="text-slate-600 font-medium">
|
||||
{pred.modelLabel}
|
||||
</span>
|
||||
<span className="font-bold text-slate-700">
|
||||
{(pred.confidence * 100).toFixed(1)}%
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{diagnosis.failureReason && <p className="text-sm text-red-600">{diagnosis.failureReason}</p>}
|
||||
{diagnosis.disease && (
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<h2 className="text-xl font-semibold">{diagnosis.disease.label}</h2>
|
||||
<RiskBadge level={diagnosis.disease.riskLevel} />
|
||||
</div>
|
||||
<p className="text-muted-foreground">{diagnosis.disease.summary}</p>
|
||||
<div>
|
||||
<h3 className="font-semibold">Rekomendasi</h3>
|
||||
<ul className="mt-2 list-disc space-y-1 pl-5 text-sm text-muted-foreground">
|
||||
{diagnosis.disease.recommendations.map((item) => <li key={item}>{item}</li>)}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</section>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Card>
|
||||
{/* Expert Notes (Only shown if already reviewed by human) */}
|
||||
{diagnosis.latestReview && (
|
||||
<Card className="rounded-2xl shadow-sm border-blue-200 bg-blue-50/50 mt-4">
|
||||
<CardHeader>
|
||||
<CardTitle>Top Predictions</CardTitle>
|
||||
<CardTitle className="text-blue-800">
|
||||
Catatan Pakar Agronomi
|
||||
</CardTitle>
|
||||
<CardDescription className="text-blue-600/70">
|
||||
Ditinjau oleh: {diagnosis.latestReview.expert.name}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-2">
|
||||
{diagnosis.predictions.map((prediction) => (
|
||||
<div key={prediction.id} className="flex items-center justify-between rounded-lg border p-3 text-sm">
|
||||
<span>{prediction.rank}. {prediction.modelLabel}</span>
|
||||
<span className="font-semibold">{(prediction.confidence * 100).toFixed(1)}%</span>
|
||||
</div>
|
||||
))}
|
||||
<CardContent>
|
||||
<p className="text-sm text-slate-700 leading-relaxed bg-white p-4 rounded-xl border border-blue-100 shadow-sm">
|
||||
"{diagnosis.latestReview.notes}"
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{diagnosis.latestReview && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Catatan Pakar</CardTitle>
|
||||
<CardDescription>{diagnosis.latestReview.expert.name}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-muted-foreground">{diagnosis.latestReview.notes}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user