From daf679b31fc793c2457681db96a1104772eeba0d Mon Sep 17 00:00:00 2001
From: seriouselly <supriyatinselly@gmail.com>
Date: Sun, 14 Jun 2026 20:57:48 +0700
Subject: [PATCH] chore(components): refine inline comments in diagnosis result
 view

- 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.
---
 .../src/components/diagnose-result-view.tsx   | 131 ++++++++++++------
 1 file changed, 89 insertions(+), 42 deletions(-)

diff --git a/apps/web/src/components/diagnose-result-view.tsx b/apps/web/src/components/diagnose-result-view.tsx
index 091e8ab..4f6a6ba 100644
--- a/apps/web/src/components/diagnose-result-view.tsx
+++ b/apps/web/src/components/diagnose-result-view.tsx
@@ -1,7 +1,14 @@
 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 = {
   imageUrl: string;
   confidence: number; // contoh: 0.95
@@ -12,7 +19,7 @@ type Props = {
   symptoms: string[];
   preventions: string[];
   medicines: string[];
-  onRescan?: () => void; // Tombol opsional untuk Scan Ulang
+  onRescan?: () => void;
 };
 
 export function DiagnosisResultView({
@@ -27,7 +34,6 @@ export function DiagnosisResultView({
   medicines,
   onRescan,
 }: Props) {
-  // Ingatan untuk laci (accordion) sebelah kanan
   const [openSection, setOpenSection] = useState<string>("detail");
 
   const toggleSection = (section: string) => {
@@ -38,51 +44,56 @@ export function DiagnosisResultView({
 
   return (
     <div className="flex flex-col lg:flex-row gap-6 bg-[#FAFAF8] p-4 md:p-6 rounded-3xl">
-      
-      {/* KIRI: Area Gambar & Hasil Deteksi ML */}
+      {/* Image Area & Result */}
       <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">
-          <img 
-            src={imageUrl} 
-            alt="Daun yang dianalisis" 
+          <img
+            src={imageUrl}
+            alt="Daun yang dianalisis"
             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">
-            <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
           </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="flex items-center gap-2 text-amber-700 font-semibold text-sm mb-4">
             <AlertTriangle className="w-4 h-4" />
             HASIL DETEKSI ML
           </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>
 
-          {/* Bar Tingkat Keyakinan AI */}
+          {/* Confidence Bar */}
           <div className="space-y-2 mb-4">
             <div className="flex justify-between text-sm font-bold text-slate-700">
               <span>Tingkat Keyakinan AI</span>
               <span className="text-emerald-600">{confidencePercent}%</span>
             </div>
             <div className="w-full bg-slate-200 rounded-full h-2.5 overflow-hidden">
-              <div 
-                className="bg-emerald-500 h-2.5 rounded-full transition-all duration-1000" 
+              <div
+                className="bg-emerald-500 h-2.5 rounded-full transition-all duration-1000"
                 style={{ width: `${confidencePercent}%` }}
               ></div>
             </div>
             <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>
           </div>
 
           <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">
               {riskLevel.toUpperCase()}
             </span>
@@ -90,13 +101,12 @@ export function DiagnosisResultView({
         </div>
       </div>
 
-      {/* KANAN: Area Edukasi (Accordion) & Referensi */}
+      {/* Education & References */}
       <div className="w-full lg:w-2/3 flex flex-col gap-4">
-        
-        {/* Tombol Header (Jika ada fungsi onRescan) */}
+        {/* Rescan Button */}
         {onRescan && (
           <div className="flex justify-end mb-2">
-            <button 
+            <button
               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"
             >
@@ -105,9 +115,9 @@ export function DiagnosisResultView({
           </div>
         )}
 
-        {/* Laci 1: Detail Penyakit */}
+        {/* Detail Section */}
         <div className="bg-white border border-slate-200 rounded-2xl overflow-hidden shadow-sm">
-          <div 
+          <div
             onClick={() => toggleSection("detail")}
             className="flex items-center justify-between p-4 cursor-pointer hover:bg-slate-50"
           >
@@ -117,22 +127,28 @@ export function DiagnosisResultView({
               </div>
               Detail Penyakit
             </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>
           {openSection === "detail" && (
             <div className="p-4 pt-0 border-t border-slate-100 text-sm text-slate-600 leading-relaxed">
               <p className="mb-4">{description}</p>
               <h5 className="font-bold text-[#214B11] mb-2">Gejala Umum:</h5>
               <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>
             </div>
           )}
         </div>
 
-        {/* Laci 2: Panduan Pencegahan */}
+        {/* Prevention Section */}
         <div className="bg-white border border-slate-200 rounded-2xl overflow-hidden shadow-sm">
-          <div 
+          <div
             onClick={() => toggleSection("cegah")}
             className="flex items-center justify-between p-4 cursor-pointer hover:bg-slate-50"
           >
@@ -142,14 +158,19 @@ export function DiagnosisResultView({
               </div>
               Panduan Pencegahan
             </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>
           {openSection === "cegah" && (
             <div className="p-4 pt-0 border-t border-slate-100 text-sm text-slate-600">
               <ul className="space-y-2">
                 {preventions.map((prev, i) => (
                   <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>
                 ))}
               </ul>
@@ -157,9 +178,9 @@ export function DiagnosisResultView({
           )}
         </div>
 
-        {/* Laci 3: Rekomendasi Obat */}
+        {/* Medicine Section */}
         <div className="bg-white border border-slate-200 rounded-2xl overflow-hidden shadow-sm">
-          <div 
+          <div
             onClick={() => toggleSection("obat")}
             className="flex items-center justify-between p-4 cursor-pointer hover:bg-slate-50"
           >
@@ -169,14 +190,19 @@ export function DiagnosisResultView({
               </div>
               Rekomendasi Obat
             </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>
           {openSection === "obat" && (
             <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) => (
                   <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>
                 ))}
               </ul>
@@ -184,22 +210,43 @@ export function DiagnosisResultView({
           )}
         </div>
 
-        {/* Kotak Disclaimer Penting */}
+        {/* Disclaimer */}
         <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">
             <AlertTriangle className="w-5 h-5" /> Disclaimer Penting
           </div>
           <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>
         </div>
-
       </div>
     </div>
   );
 }
 
-// Ikon bantuan untuk persentase
 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>
-}
\ No newline at end of file
+  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>
+  );
+}