feat: migrate dashboard to diagnosis workflow

apps/web/src/components/image-classification-form.tsx

@@ -1,14 +1,15 @@
-import { useRef, useState } from 'react';
+import { ChangeEvent, FormEvent, useRef, useState } from 'react';
-import type { ImageClassificationRecord } from '@zeavis/shared';
+import type { DiagnosisRecord } from '@zeavis/shared';
+import { Upload } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { RiskBadge } from '@/components/risk-badge';
+import { DiagnosisStatusBadge } from '@/components/diagnosis-status-badge';
 
-export interface ImageClassificationFormProps {
+type ImageClassificationFormProps = {
   onSubmit: (file: File) => Promise<void>;
   isSubmitting: boolean;
-  latestResult: ImageClassificationRecord | null;
+  latestResult: DiagnosisRecord | null;
-}
+};
 
 export function ImageClassificationForm({
   onSubmit,
@@ -16,57 +17,48 @@ export function ImageClassificationForm({
   latestResult,
 }: ImageClassificationFormProps) {
   const fileInputRef = useRef<HTMLInputElement>(null);
-  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const [file, setFile] = useState<File | null>(null);
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
 
-  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  function handleFileChange(event: ChangeEvent<HTMLInputElement>) {
-    const file = e.target.files?.[0];
+    const selectedFile = event.target.files?.[0] ?? null;
-    if (file) {
-      if (!file.type.startsWith('image/')) {
-        setError('Silakan pilih file gambar');
-        setSelectedFile(null);
-        return;
-      }
     setError(null);
-      setSelectedFile(file);
+    setFile(selectedFile);
+    setPreviewUrl(selectedFile ? URL.createObjectURL(selectedFile) : null);
   }
-  };
 
-  const handleSubmit = async (e: React.FormEvent) => {
+  async function handleSubmit(event: FormEvent<HTMLFormElement>) {
-    e.preventDefault();
+    event.preventDefault();
-    setError(null);
+    if (!file) {
-
+      setError('Pilih gambar terlebih dahulu');
-    if (!selectedFile) {
-      setError('Silakan pilih file gambar');
       return;
     }
 
     try {
-      await onSubmit(selectedFile);
+      await onSubmit(file);
-      setSelectedFile(null);
+      setFile(null);
+      setPreviewUrl(null);
       if (fileInputRef.current) {
         fileInputRef.current.value = '';
       }
     } catch (err) {
-      setError(err instanceof Error ? err.message : 'Terjadi kesalahan saat mengunggah gambar');
+      setError(err instanceof Error ? err.message : 'Gagal mengirim gambar');
+    }
   }
-  };
-
-  const isFormValid = selectedFile !== null;
 
   return (
-    <div className="space-y-6">
     <Card>
       <CardHeader>
-          <CardTitle>Klasifikasi Gambar</CardTitle>
+        <CardTitle className="flex items-center gap-2">
-          <CardDescription>Unggah foto daun jagung untuk klasifikasi otomatis</CardDescription>
+          <Upload className="h-5 w-5" /> Diagnosis Gambar
+        </CardTitle>
+        <CardDescription>
+          Upload gambar daun jagung untuk klasifikasi AI dan review pakar jika confidence rendah.
+        </CardDescription>
       </CardHeader>
-        <CardContent>
+      <CardContent className="space-y-4">
         <form onSubmit={handleSubmit} className="space-y-4">
-            {error && (
-              <div className="rounded-md bg-red-50 p-3 text-sm text-red-800">{error}</div>
-            )}
-
           <div>
             <label htmlFor="image-file" className="block text-sm font-medium">
               Pilih Gambar
@@ -75,81 +67,45 @@ export function ImageClassificationForm({
               ref={fileInputRef}
               id="image-file"
               type="file"
-                accept="image/*"
+              accept="image/jpeg,image/png"
               onChange={handleFileChange}
               disabled={isSubmitting}
               className="mt-1 block w-full text-sm file:mr-4 file:rounded-md file:border-0 file:bg-primary file:px-4 file:py-2 file:text-sm file:font-semibold file:text-primary-foreground hover:file:bg-primary/90 disabled:opacity-50"
             />
-              {selectedFile && (
+            {file && (
               <p className="mt-2 text-sm text-muted-foreground">
-                  File dipilih: {selectedFile.name}
+                File dipilih: {file.name}
               </p>
             )}
           </div>
 
-            <Button
+          {previewUrl && (
-              type="submit"
+            <img src={previewUrl} alt="Preview" className="h-48 rounded-lg object-cover" />
-              disabled={!isFormValid || isSubmitting}
+          )}
-              className="w-full"
+
-            >
+          {error && <p className="text-sm text-red-600">{error}</p>}
-              {isSubmitting ? 'Mengunggah...' : 'Unggah dan Klasifikasi'}
+
+          <Button type="submit" disabled={isSubmitting} className="w-full">
+            {isSubmitting ? 'Memproses...' : 'Upload dan Diagnosis'}
           </Button>
         </form>
-        </CardContent>
-      </Card>
 
         {latestResult && (
-        <Card>
+          <div className="rounded-lg border p-4">
-          <CardHeader>
+            <div className="mb-2 flex items-center justify-between gap-3">
-            <CardTitle>Hasil Klasifikasi Terbaru</CardTitle>
+              <h3 className="font-semibold">
-            <CardDescription>Prediksi penyakit dari gambar terakhir</CardDescription>
+                {latestResult.disease?.commonName ?? 'Diagnosis gagal'}
-          </CardHeader>
+              </h3>
-          <CardContent className="space-y-4">
+              <DiagnosisStatusBadge status={latestResult.status} />
-            <div className="rounded-lg border border-border overflow-hidden">
-              <img
-                src={latestResult.imageUrl}
-                alt="Uploaded corn leaf"
-                className="w-full h-48 object-cover"
-              />
             </div>
-
+            <p className="text-sm text-muted-foreground">
-            <div className="space-y-3">
+              {latestResult.confidence === null
-              <div className="flex items-start justify-between gap-4">
+                ? 'Tidak ada confidence'
-                <div>
+                : `Confidence ${(latestResult.confidence * 100).toFixed(1)}%`}
-                  <h4 className="font-semibold">{latestResult.disease.commonName}</h4>
-                  <p className="text-sm text-muted-foreground">{latestResult.disease.label}</p>
-                </div>
-                <RiskBadge level={latestResult.disease.riskLevel} />
-              </div>
-
-              <div className="rounded-md bg-muted p-3">
-                <p className="text-sm font-medium">
-                  Kepercayaan: {(latestResult.confidence * 100).toFixed(1)}%
-                </p>
-              </div>
-
-              <div className="space-y-2">
-                <p className="text-sm font-medium">Rekomendasi awal:</p>
-                <ul className="space-y-1 text-sm text-muted-foreground">
-                  {latestResult.disease.recommendations.slice(0, 3).map((recommendation) => (
-                    <li key={recommendation}>• {recommendation}</li>
-                  ))}
-                </ul>
-              </div>
-
-              <p className="text-xs text-muted-foreground">
-                {new Date(latestResult.createdAt).toLocaleDateString('id-ID', {
-                  year: 'numeric',
-                  month: 'long',
-                  day: 'numeric',
-                  hour: '2-digit',
-                  minute: '2-digit',
-                })}
             </p>
           </div>
+        )}
       </CardContent>
     </Card>
-      )}
-    </div>
   );
 }

apps/web/src/pages/dashboard-page.tsx

@@ -1,19 +1,22 @@
 import { useQueries, useMutation, useQueryClient } from '@tanstack/react-query';
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
-import { BookOpen, History, Leaf, LayoutDashboard, TrendingUp, Image } from 'lucide-react';
+import { BookOpen, History, LayoutDashboard, TrendingUp, LogOut, CheckCircle2 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { ManualClassificationForm } from '@/components/manual-classification-form';
 import { ImageClassificationForm } from '@/components/image-classification-form';
-import { RiskBadge } from '@/components/risk-badge';
+import { DiagnosisCard } from '@/components/diagnosis-card';
+import { useAuthStore } from '@/store/auth-store';
 import { useUiStore } from '@/store/ui-store';
 import { apiClient } from '@/lib/api-client';
 
 export function DashboardPage() {
+  const { user } = useAuthStore();
   const { dashboardCompact, toggleDashboardCompact } = useUiStore();
   const queryClient = useQueryClient();
+  const navigate = useNavigate();
 
-  const [diseasesQuery, summaryQuery, classificationsQuery, imageClassificationsQuery] = useQueries({
+  const [diseasesQuery, summaryQuery, diagnosesQuery, classificationsQuery] = useQueries({
     queries: [
       {
         queryKey: ['diseases'],
@@ -23,17 +26,27 @@ export function DashboardPage() {
         queryKey: ['dashboard-summary'],
         queryFn: () => apiClient.getDashboardSummary(),
       },
+      {
+        queryKey: ['diagnoses'],
+        queryFn: () => apiClient.getDiagnoses(),
+      },
       {
         queryKey: ['manual-classifications'],
         queryFn: () => apiClient.getManualClassifications(),
       },
-      {
-        queryKey: ['image-classifications'],
-        queryFn: () => apiClient.getImageClassifications(),
-      },
     ],
   });
 
+  const createDiagnosisMutation = useMutation({
+    mutationFn: async (file: File) => {
+      return await apiClient.createDiagnosis(file);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['diagnoses'] });
+      queryClient.invalidateQueries({ queryKey: ['dashboard-summary'] });
+    },
+  });
+
   const createClassificationMutation = useMutation({
     mutationFn: async (payload: Parameters<typeof apiClient.createManualClassification>[0]) => {
       await apiClient.createManualClassification(payload);
@@ -44,20 +57,21 @@ export function DashboardPage() {
     },
   });
 
-  const createImageClassificationMutation = useMutation({
+  const logoutMutation = useMutation({
-    mutationFn: async (file: File) => {
+    mutationFn: async () => {
-      return await apiClient.createImageClassification(file);
+      await apiClient.logout();
     },
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['image-classifications'] });
+      useAuthStore.setState({ user: null });
-      queryClient.invalidateQueries({ queryKey: ['dashboard-summary'] });
+      queryClient.clear();
+      navigate('/login');
     },
   });
 
   const diseases = diseasesQuery.data || [];
   const summary = summaryQuery.data;
+  const diagnoses = diagnosesQuery.data || [];
   const classifications = classificationsQuery.data || [];
-  const imageClassifications = imageClassificationsQuery.data || [];
 
   const isLoadingData = diseasesQuery.isLoading || summaryQuery.isLoading;
   const hasError = diseasesQuery.error || summaryQuery.error;
@@ -72,15 +86,28 @@ export function DashboardPage() {
             </div>
             <h1 className="text-3xl font-bold tracking-tight">ZeaVis Edu Workspace</h1>
             <p className="text-muted-foreground">
-              Pantau penyakit daun jagung dan laporkan pengamatan Anda
+              {user?.name ? `Selamat datang, ${user.name}` : 'Pantau penyakit daun jagung dan laporkan pengamatan Anda'}
             </p>
           </div>
           <div className="flex gap-3">
+            {user?.role === 'expert' && (
+              <Button asChild variant="outline">
+                <Link to="/expert/reviews">
+                  <CheckCircle2 className="h-4 w-4 mr-2" />
+                  Review Pakar
+                </Link>
+              </Button>
+            )}
             <Button variant="outline" onClick={toggleDashboardCompact}>
               {dashboardCompact ? 'Mode Nyaman' : 'Mode Ringkas'}
             </Button>
-            <Button asChild>
+            <Button
-              <Link to="/">Kembali</Link>
+              variant="outline"
+              onClick={() => logoutMutation.mutate()}
+              disabled={logoutMutation.isPending}
+            >
+              <LogOut className="h-4 w-4 mr-2" />
+              {logoutMutation.isPending ? 'Keluar...' : 'Keluar'}
             </Button>
           </div>
         </header>
@@ -115,11 +142,24 @@ export function DashboardPage() {
                 <Card>
                   <CardHeader className="pb-3">
                     <CardTitle className="text-sm font-medium text-muted-foreground">
-                      Total Laporan
+                      Total Diagnosis
                     </CardTitle>
                   </CardHeader>
                   <CardContent>
-                    <div className="text-3xl font-bold">{summary.classificationCount}</div>
+                    <div className="text-3xl font-bold">{summary.imageClassificationCount}</div>
+                  </CardContent>
+                </Card>
+
+                <Card>
+                  <CardHeader className="pb-3">
+                    <CardTitle className="text-sm font-medium text-muted-foreground">
+                      Menunggu Review
+                    </CardTitle>
+                  </CardHeader>
+                  <CardContent>
+                    <div className="text-3xl font-bold text-amber-600">
+                      {summary.needsReviewCount}
+                    </div>
                   </CardContent>
                 </Card>
 
@@ -135,19 +175,6 @@ export function DashboardPage() {
                     </div>
                   </CardContent>
                 </Card>
-
-                <Card>
-                  <CardHeader className="pb-3">
-                    <CardTitle className="text-sm font-medium text-muted-foreground">
-                      Risiko Sedang
-                    </CardTitle>
-                  </CardHeader>
-                  <CardContent>
-                    <div className="text-3xl font-bold text-yellow-600">
-                      {summary.riskDistribution.medium}
-                    </div>
-                  </CardContent>
-                </Card>
               </section>
             )}
 
@@ -200,48 +227,12 @@ export function DashboardPage() {
               </Card>
             </section>
 
-            {summary?.latestClassification && (
-              <Card>
-                <CardHeader>
-                  <CardTitle className="flex items-center gap-2">
-                    <History className="h-5 w-5" />
-                    Laporan Terbaru
-                  </CardTitle>
-                  <CardDescription>
-                    Pengamatan penyakit terakhir yang dilaporkan
-                  </CardDescription>
-                </CardHeader>
-                <CardContent className="space-y-4">
-                  <div className="rounded-lg border border-border p-4">
-                    <div className="flex items-start justify-between gap-4 mb-3">
-                      <div>
-                        <h4 className="font-semibold">{summary.latestClassification.disease.commonName}</h4>
-                        <p className="text-sm text-muted-foreground">
-                          {summary.latestClassification.disease.label}
-                        </p>
-                      </div>
-                      <RiskBadge level={summary.latestClassification.disease.riskLevel} />
-                    </div>
-                    <p className="text-sm text-muted-foreground mb-2">
-                      {summary.latestClassification.observation}
-                    </p>
-                    <p className="text-xs text-muted-foreground">
-                      Lokasi: {summary.latestClassification.location}
-                    </p>
-                    <p className="text-xs text-muted-foreground mt-2">
-                      {new Date(summary.latestClassification.createdAt).toLocaleDateString('id-ID')}
-                    </p>
-                  </div>
-                </CardContent>
-              </Card>
-            )}
-
             <ImageClassificationForm
               onSubmit={async (file) => {
-                await createImageClassificationMutation.mutateAsync(file);
+                await createDiagnosisMutation.mutateAsync(file);
               }}
-              isSubmitting={createImageClassificationMutation.isPending}
+              isSubmitting={createDiagnosisMutation.isPending}
-              latestResult={imageClassifications[0] ?? null}
+              latestResult={diagnoses[0] ?? null}
             />
 
             <ManualClassificationForm
@@ -252,46 +243,21 @@ export function DashboardPage() {
               isSubmitting={createClassificationMutation.isPending}
             />
 
-            {imageClassifications.length > 0 && (
+            {diagnoses.length > 0 && (
               <Card>
                 <CardHeader>
                   <CardTitle className="flex items-center gap-2">
-                    <Image className="h-5 w-5" />
+                    <History className="h-5 w-5" />
-                    Riwayat Klasifikasi Gambar
+                    Riwayat Diagnosis
                   </CardTitle>
                   <CardDescription>
-                    {imageClassifications.length} gambar yang diklasifikasi
+                    {diagnoses.length} diagnosis yang telah dibuat
                   </CardDescription>
                 </CardHeader>
                 <CardContent>
-                  <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+                  <div className="space-y-3">
-                    {imageClassifications.slice(0, 6).map((classification) => (
+                    {diagnoses.slice(0, 6).map((diagnosis) => (
-                      <div key={classification.id} className="rounded-lg border border-border overflow-hidden">
+                      <DiagnosisCard key={diagnosis.id} diagnosis={diagnosis} />
-                        <img
-                          src={classification.imageUrl}
-                          alt="Classified corn leaf"
-                          className="w-full h-32 object-cover"
-                        />
-                        <div className="p-3 space-y-2">
-                          <div className="flex items-start justify-between gap-2">
-                            <div className="flex-1">
-                              <h4 className="text-sm font-semibold">
-                                {classification.disease.commonName}
-                              </h4>
-                              <p className="text-xs text-muted-foreground">
-                                {classification.disease.label}
-                              </p>
-                            </div>
-                            <RiskBadge level={classification.disease.riskLevel} className="text-xs" />
-                          </div>
-                          <div className="text-xs text-muted-foreground">
-                            Kepercayaan: {(classification.confidence * 100).toFixed(1)}%
-                          </div>
-                          <p className="text-xs text-muted-foreground">
-                            {new Date(classification.createdAt).toLocaleDateString('id-ID')}
-                          </p>
-                        </div>
-                      </div>
                     ))}
                   </div>
                 </CardContent>