MythEclipse/zeavis-edu
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chore(components): refine inline comments in diagnosis result view

Browse Source 
- Update and clarify inline code comments in the diagnosis result view component.
- Improve code readability and maintainability without altering any underlying logic or UI behavior.
This commit is contained in:
seriouselly
2026-06-14 20:57:48 +07:00
parent 07cda1f813
commit daf679b31f
1 changed files with 89 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/diagnose-result-view.tsx
+89 -42
View File
@@ -1,7 +1,14 @@
import { useState } from "react"; import { useState } from "react";
import { ChevronDown, ChevronUp, AlertTriangle, BookOpen, ShieldCheck, Pill, RefreshCcw } from "lucide-react"; import {
ChevronDown,
ChevronUp,
AlertTriangle,
BookOpen,
ShieldCheck,
Pill,
RefreshCcw,
} from "lucide-react";
// Spesifikasi data yang dibutuhkan oleh cetakan ini
type Props = { type Props = {
imageUrl: string; imageUrl: string;
confidence: number; // contoh: 0.95 confidence: number; // contoh: 0.95
@@ -12,7 +19,7 @@ type Props = {
symptoms: string[]; symptoms: string[];
preventions: string[]; preventions: string[];
medicines: string[]; medicines: string[];
onRescan?: () => void; // Tombol opsional untuk Scan Ulang onRescan?: () => void;
}; };
export function DiagnosisResultView({ export function DiagnosisResultView({
@@ -27,7 +34,6 @@ export function DiagnosisResultView({
medicines, medicines,
onRescan, onRescan,
}: Props) { }: Props) {
// Ingatan untuk laci (accordion) sebelah kanan
const [openSection, setOpenSection] = useState<string>("detail"); const [openSection, setOpenSection] = useState<string>("detail");
const toggleSection = (section: string) => { const toggleSection = (section: string) => {
@@ -38,51 +44,56 @@ export function DiagnosisResultView({
return ( return (
<div className="flex flex-col lg:flex-row gap-6 bg-[#FAFAF8] p-4 md:p-6 rounded-3xl"> <div className="flex flex-col lg:flex-row gap-6 bg-[#FAFAF8] p-4 md:p-6 rounded-3xl">
{/* Image Area & Result */}
{/* KIRI: Area Gambar & Hasil Deteksi ML */}
<div className="w-full lg:w-1/3 flex flex-col gap-4"> <div className="w-full lg:w-1/3 flex flex-col gap-4">
{/* Gambar Daun */}
<div className="bg-white p-3 rounded-2xl border border-slate-200 shadow-sm"> <div className="bg-white p-3 rounded-2xl border border-slate-200 shadow-sm">
<img <img
src={imageUrl} src={imageUrl}
alt="Daun yang dianalisis" alt="Daun yang dianalisis"
className="w-full h-48 md:h-64 object-cover rounded-xl" className="w-full h-48 md:h-64 object-cover rounded-xl"
/> />
<div className="mt-3 flex items-center gap-2 text-slate-500 text-sm px-1"> <div className="mt-3 flex items-center gap-2 text-slate-500 text-sm px-1">
<span className="w-4 h-4 bg-slate-200 rounded flex items-center justify-center text-[10px]">📷</span> <span className="w-4 h-4 bg-slate-200 rounded flex items-center justify-center text-[10px]">
📷
</span>
Gambar yang dianalisis Gambar yang dianalisis
</div> </div>
</div> </div>
{/* Kartu Hasil Deteksi ML */} {/* Result Card */}
<div className="bg-[#FCF9EE] border border-[#F2E5C5] p-5 rounded-2xl shadow-sm relative overflow-hidden"> <div className="bg-[#FCF9EE] border border-[#F2E5C5] p-5 rounded-2xl shadow-sm relative overflow-hidden">
<div className="flex items-center gap-2 text-amber-700 font-semibold text-sm mb-4"> <div className="flex items-center gap-2 text-amber-700 font-semibold text-sm mb-4">
<AlertTriangle className="w-4 h-4" /> <AlertTriangle className="w-4 h-4" />
HASIL DETEKSI ML HASIL DETEKSI ML
</div> </div>
<h2 className="text-2xl font-extrabold text-[#D97706]">{diseaseName}</h2> <h2 className="text-2xl font-extrabold text-[#D97706]">
{diseaseName}
</h2>
<p className="text-slate-500 italic text-sm mb-6">{scientificName}</p> <p className="text-slate-500 italic text-sm mb-6">{scientificName}</p>
{/* Bar Tingkat Keyakinan AI */} {/* Confidence Bar */}
<div className="space-y-2 mb-4"> <div className="space-y-2 mb-4">
<div className="flex justify-between text-sm font-bold text-slate-700"> <div className="flex justify-between text-sm font-bold text-slate-700">
<span>Tingkat Keyakinan AI</span> <span>Tingkat Keyakinan AI</span>
<span className="text-emerald-600">{confidencePercent}%</span> <span className="text-emerald-600">{confidencePercent}%</span>
</div> </div>
<div className="w-full bg-slate-200 rounded-full h-2.5 overflow-hidden"> <div className="w-full bg-slate-200 rounded-full h-2.5 overflow-hidden">
<div <div
className="bg-emerald-500 h-2.5 rounded-full transition-all duration-1000" className="bg-emerald-500 h-2.5 rounded-full transition-all duration-1000"
style={{ width: `${confidencePercent}%` }} style={{ width: `${confidencePercent}%` }}
></div> ></div>
</div> </div>
<p className="text-[11px] text-emerald-600 flex items-center gap-1 font-medium"> <p className="text-[11px] text-emerald-600 flex items-center gap-1 font-medium">
<CheckCircle2 className="w-3 h-3" /> Di atas ambang batas minimum (75%) <CheckCircle2 className="w-3 h-3" /> Di atas ambang batas minimum
(75%)
</p> </p>
</div> </div>
<div className="flex items-center gap-3 pt-4 border-t border-amber-200/50"> <div className="flex items-center gap-3 pt-4 border-t border-amber-200/50">
<span className="text-sm font-medium text-slate-600">Tingkat Keparahan:</span> <span className="text-sm font-medium text-slate-600">
Tingkat Keparahan:
</span>
<span className="px-3 py-1 bg-[#D97706] text-white text-xs font-bold rounded-full"> <span className="px-3 py-1 bg-[#D97706] text-white text-xs font-bold rounded-full">
{riskLevel.toUpperCase()} {riskLevel.toUpperCase()}
</span> </span>
@@ -90,13 +101,12 @@ export function DiagnosisResultView({
</div> </div>
</div> </div>
{/* KANAN: Area Edukasi (Accordion) & Referensi */} {/* Education & References */}
<div className="w-full lg:w-2/3 flex flex-col gap-4"> <div className="w-full lg:w-2/3 flex flex-col gap-4">
{/* Rescan Button */}
{/* Tombol Header (Jika ada fungsi onRescan) */}
{onRescan && ( {onRescan && (
<div className="flex justify-end mb-2"> <div className="flex justify-end mb-2">
<button <button
onClick={onRescan} onClick={onRescan}
className="flex items-center gap-2 px-4 py-2 bg-white border border-[#214B11] text-[#214B11] rounded-full text-sm font-bold hover:bg-[#214B11] hover:text-white transition-all shadow-sm" className="flex items-center gap-2 px-4 py-2 bg-white border border-[#214B11] text-[#214B11] rounded-full text-sm font-bold hover:bg-[#214B11] hover:text-white transition-all shadow-sm"
> >
@@ -105,9 +115,9 @@ export function DiagnosisResultView({
</div> </div>
)} )}
{/* Laci 1: Detail Penyakit */} {/* Detail Section */}
<div className="bg-white border border-slate-200 rounded-2xl overflow-hidden shadow-sm"> <div className="bg-white border border-slate-200 rounded-2xl overflow-hidden shadow-sm">
<div <div
onClick={() => toggleSection("detail")} onClick={() => toggleSection("detail")}
className="flex items-center justify-between p-4 cursor-pointer hover:bg-slate-50" className="flex items-center justify-between p-4 cursor-pointer hover:bg-slate-50"
> >
@@ -117,22 +127,28 @@ export function DiagnosisResultView({
</div> </div>
Detail Penyakit Detail Penyakit
</div> </div>
{openSection === "detail" ? <ChevronUp className="w-5 h-5 text-slate-400" /> : <ChevronDown className="w-5 h-5 text-slate-400" />} {openSection === "detail" ? (
<ChevronUp className="w-5 h-5 text-slate-400" />
) : (
<ChevronDown className="w-5 h-5 text-slate-400" />
)}
</div> </div>
{openSection === "detail" && ( {openSection === "detail" && (
<div className="p-4 pt-0 border-t border-slate-100 text-sm text-slate-600 leading-relaxed"> <div className="p-4 pt-0 border-t border-slate-100 text-sm text-slate-600 leading-relaxed">
<p className="mb-4">{description}</p> <p className="mb-4">{description}</p>
<h5 className="font-bold text-[#214B11] mb-2">Gejala Umum:</h5> <h5 className="font-bold text-[#214B11] mb-2">Gejala Umum:</h5>
<ul className="space-y-1 pl-4 list-disc marker:text-emerald-500"> <ul className="space-y-1 pl-4 list-disc marker:text-emerald-500">
{symptoms.map((sym, i) => <li key={i}>{sym}</li>)} {symptoms.map((sym, i) => (
<li key={i}>{sym}</li>
))}
</ul> </ul>
</div> </div>
)} )}
</div> </div>
{/* Laci 2: Panduan Pencegahan */} {/* Prevention Section */}
<div className="bg-white border border-slate-200 rounded-2xl overflow-hidden shadow-sm"> <div className="bg-white border border-slate-200 rounded-2xl overflow-hidden shadow-sm">
<div <div
onClick={() => toggleSection("cegah")} onClick={() => toggleSection("cegah")}
className="flex items-center justify-between p-4 cursor-pointer hover:bg-slate-50" className="flex items-center justify-between p-4 cursor-pointer hover:bg-slate-50"
> >
@@ -142,14 +158,19 @@ export function DiagnosisResultView({
</div> </div>
Panduan Pencegahan Panduan Pencegahan
</div> </div>
{openSection === "cegah" ? <ChevronUp className="w-5 h-5 text-slate-400" /> : <ChevronDown className="w-5 h-5 text-slate-400" />} {openSection === "cegah" ? (
<ChevronUp className="w-5 h-5 text-slate-400" />
) : (
<ChevronDown className="w-5 h-5 text-slate-400" />
)}
</div> </div>
{openSection === "cegah" && ( {openSection === "cegah" && (
<div className="p-4 pt-0 border-t border-slate-100 text-sm text-slate-600"> <div className="p-4 pt-0 border-t border-slate-100 text-sm text-slate-600">
<ul className="space-y-2"> <ul className="space-y-2">
{preventions.map((prev, i) => ( {preventions.map((prev, i) => (
<li key={i} className="flex gap-2 items-start"> <li key={i} className="flex gap-2 items-start">
<CheckCircle2 className="w-4 h-4 text-emerald-500 shrink-0 mt-0.5" /> <span>{prev}</span> <CheckCircle2 className="w-4 h-4 text-emerald-500 shrink-0 mt-0.5" />{" "}
<span>{prev}</span>
</li> </li>
))} ))}
</ul> </ul>
@@ -157,9 +178,9 @@ export function DiagnosisResultView({
)} )}
</div> </div>
{/* Laci 3: Rekomendasi Obat */} {/* Medicine Section */}
<div className="bg-white border border-slate-200 rounded-2xl overflow-hidden shadow-sm"> <div className="bg-white border border-slate-200 rounded-2xl overflow-hidden shadow-sm">
<div <div
onClick={() => toggleSection("obat")} onClick={() => toggleSection("obat")}
className="flex items-center justify-between p-4 cursor-pointer hover:bg-slate-50" className="flex items-center justify-between p-4 cursor-pointer hover:bg-slate-50"
> >
@@ -169,14 +190,19 @@ export function DiagnosisResultView({
</div> </div>
Rekomendasi Obat Rekomendasi Obat
</div> </div>
{openSection === "obat" ? <ChevronUp className="w-5 h-5 text-slate-400" /> : <ChevronDown className="w-5 h-5 text-slate-400" />} {openSection === "obat" ? (
<ChevronUp className="w-5 h-5 text-slate-400" />
) : (
<ChevronDown className="w-5 h-5 text-slate-400" />
)}
</div> </div>
{openSection === "obat" && ( {openSection === "obat" && (
<div className="p-4 pt-0 border-t border-slate-100 text-sm text-slate-600"> <div className="p-4 pt-0 border-t border-slate-100 text-sm text-slate-600">
<ul className="space-y-2"> <ul className="space-y-2">
{medicines.map((med, i) => ( {medicines.map((med, i) => (
<li key={i} className="flex gap-2 items-start"> <li key={i} className="flex gap-2 items-start">
<span className="text-purple-400 shrink-0 mt-0.5">⚕️</span> <span>{med}</span> <span className="text-purple-400 shrink-0 mt-0.5">⚕️</span>{" "}
<span>{med}</span>
</li> </li>
))} ))}
</ul> </ul>
@@ -184,22 +210,43 @@ export function DiagnosisResultView({
)} )}
</div> </div>
{/* Kotak Disclaimer Penting */} {/* Disclaimer */}
<div className="bg-[#FFFBEB] border border-[#FDE68A] rounded-2xl p-4 mt-2"> <div className="bg-[#FFFBEB] border border-[#FDE68A] rounded-2xl p-4 mt-2">
<div className="flex items-center gap-2 text-amber-600 font-bold mb-2"> <div className="flex items-center gap-2 text-amber-600 font-bold mb-2">
<AlertTriangle className="w-5 h-5" /> Disclaimer Penting <AlertTriangle className="w-5 h-5" /> Disclaimer Penting
</div> </div>
<p className="text-[13px] text-amber-900 leading-relaxed"> <p className="text-[13px] text-amber-900 leading-relaxed">
ZeaVis Edu adalah <strong>alat bantu edukasi awal</strong>, bukan pengganti diagnosis profesional. Hasil ini tidak dapat dijadikan dasar keputusan agronomis tanpa konfirmasi dari <strong>ahli pertanian atau Petugas Pengamat Organisme Pengganggu Tanaman (POPT)</strong> yang berwenang. ZeaVis Edu adalah <strong>alat bantu edukasi awal</strong>, bukan
pengganti diagnosis profesional. Hasil ini tidak dapat dijadikan
dasar keputusan agronomis tanpa konfirmasi dari{" "}
<strong>
ahli pertanian atau Petugas Pengamat Organisme Pengganggu Tanaman
(POPT)
</strong>{" "}
yang berwenang.
</p> </p>
</div> </div>
</div> </div>
</div> </div>
); );
} }
// Ikon bantuan untuk persentase
function CheckCircle2(props: any) { function CheckCircle2(props: any) {
return <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg> return (
} <svg
{...props}
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<circle cx="12" cy="12" r="10" />
<path d="m9 12 2 2 4-4" />
</svg>
);
}