fix(frontend): align pages with DB schema, fix auth, and improve UX
- Fix auth system: remove redirect bugs in login/register pages, register routes, wrap protected routes with AuthGuard, add AuthInitializer - Add missing navbar links (Diagnosa, Pustaka, expert Review) - Fix DiagnosesPage status filter to match DB DiagnosisStatus enum, support URL params (?status=, ?risk=) from dashboard links - Replace hardcoded disease data on Dashboard with API-driven data, fix layout bugs (invalid gap-57 class, empty Button) - Rewrite LibraryPage to use API instead of mock-diseases.ts - Indonesian-ize Expert Reviews page labels and text - Wrap DiagnosisDetailPage with MainLayout for consistent layout - Improve ScanPage UX: image preview before upload, lucide icons, proper disease names in result modal, file size validation - Delete dead code: mock-diseases.ts, unused form components, tailwind.config.ts (Tailwind v4 does not read v3 config) Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Asep Haryana Saputra
co-authored by
Claude Opus 4.7
Claude Opus 4.7
parent
a28d06cb02
commit
ba24cf1a05
+237
-117
@@ -1,12 +1,17 @@
|
||||
import React, { useRef, useState } from "react";
|
||||
import { useRef, useState } from "react";
|
||||
import { useNavigate, Link } from "react-router-dom";
|
||||
import { useMutation, useQueryClient, useQuery } from "@tanstack/react-query";
|
||||
import { apiClient } from "@/lib/api-client";
|
||||
import { Camera, Upload, X, CheckCircle, ImageOff } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Modal } from "@/components/ui/modal";
|
||||
import { DiagnosisStatusBadge } from "@/components/diagnosis-status-badge";
|
||||
import type { DiagnosisRecord } from "@zeavis/shared";
|
||||
import { apiClient } from "@/lib/api-client";
|
||||
|
||||
export function ScanPage() {
|
||||
const [fileName, setFileName] = useState<string | null>(null);
|
||||
const [previewUrl, setPreviewUrl] = useState<string | null>(null);
|
||||
const inputRef = useRef<HTMLInputElement | null>(null);
|
||||
const navigate = useNavigate();
|
||||
const queryClient = useQueryClient();
|
||||
@@ -15,16 +20,28 @@ export function ScanPage() {
|
||||
mutationFn: (file: File) => apiClient.createDiagnosis(file),
|
||||
onSuccess: (diagnosis) => {
|
||||
queryClient.invalidateQueries({ queryKey: ["diagnoses"] });
|
||||
// show preview modal instead of immediate navigation
|
||||
setDiagnosisPreview(diagnosis);
|
||||
setPreviewOpen(true);
|
||||
setFileName(null);
|
||||
setPreviewUrl(null);
|
||||
if (inputRef.current) inputRef.current.value = "";
|
||||
},
|
||||
});
|
||||
|
||||
const handleFile = (f?: File) => {
|
||||
if (!f) return;
|
||||
if (f.size > 5 * 1024 * 1024) {
|
||||
alert("Ukuran file melebihi batas 5MB");
|
||||
return;
|
||||
}
|
||||
setFileName(f.name);
|
||||
mutation.mutate(f);
|
||||
setPreviewUrl(URL.createObjectURL(f));
|
||||
};
|
||||
|
||||
const handleUpload = () => {
|
||||
const file = inputRef.current?.files?.[0];
|
||||
if (!file) return;
|
||||
mutation.mutate(file);
|
||||
};
|
||||
|
||||
const [previewOpen, setPreviewOpen] = useState(false);
|
||||
@@ -38,159 +55,262 @@ export function ScanPage() {
|
||||
});
|
||||
|
||||
return (
|
||||
<main className="p-6">
|
||||
<h1 className="text-2xl font-semibold mb-4">Scan Tanaman</h1>
|
||||
<div className="grid grid-cols-3 gap-6">
|
||||
<div className="col-span-2 bg-white p-6 rounded-lg shadow">
|
||||
<button
|
||||
type="button"
|
||||
className="w-full border-2 border-dashed border-green-300 rounded-md p-8 text-center cursor-pointer"
|
||||
onClick={() => inputRef.current?.click()}
|
||||
>
|
||||
<div className="text-green-600">Area Unggah Gambar</div>
|
||||
<div className="mt-4 text-sm text-muted-foreground">
|
||||
Seret & Lepas atau klik untuk memilih file (PNG/JPG, maks 5MB)
|
||||
</div>
|
||||
{fileName && (
|
||||
<div className="mt-3 text-sm">Dipilih: {fileName}</div>
|
||||
)}
|
||||
</button>
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="file"
|
||||
accept="image/png,image/jpeg"
|
||||
className="hidden"
|
||||
onChange={(e) => handleFile(e.target.files?.[0])}
|
||||
/>
|
||||
<div className="mt-6 flex items-center gap-3">
|
||||
<button
|
||||
className="bg-green-600 text-white px-4 py-2 rounded-md"
|
||||
onClick={() => inputRef.current?.click()}
|
||||
>
|
||||
Pilih Berkas
|
||||
</button>
|
||||
{mutation.isPending && (
|
||||
<div className="text-sm text-muted-foreground">Mengunggah...</div>
|
||||
)}
|
||||
{mutation.isError && (
|
||||
<div className="text-sm text-red-600">
|
||||
{mutation.error instanceof Error
|
||||
? mutation.error.message
|
||||
: String(mutation.error) || "Upload gagal"}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-primary">Deteksi Penyakit</p>
|
||||
<h1 className="text-3xl font-bold">Scan Tanaman</h1>
|
||||
</div>
|
||||
<aside className="bg-white p-6 rounded-lg shadow">
|
||||
<h2 className="font-medium mb-2">Panduan Pengambilan Foto</h2>
|
||||
<ul className="text-sm space-y-2 text-muted-foreground">
|
||||
<li>Jarak 15–30 cm dari daun</li>
|
||||
<li>Pencahayaan cukup, hindari blur</li>
|
||||
<li>Daun memenuhi bingkai</li>
|
||||
</ul>
|
||||
<Button asChild variant="outline">
|
||||
<Link to="/diagnoses">Riwayat Diagnosis</Link>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<div className="lg:col-span-2 space-y-4">
|
||||
<Card>
|
||||
<CardContent className="p-6">
|
||||
{/* Upload area */}
|
||||
{!previewUrl ? (
|
||||
<button
|
||||
type="button"
|
||||
className="w-full border-2 border-dashed border-green-300 rounded-xl p-12 text-center cursor-pointer hover:border-green-500 hover:bg-green-50/50 transition-colors group"
|
||||
onClick={() => inputRef.current?.click()}
|
||||
>
|
||||
<Camera className="mx-auto h-12 w-12 text-green-400 group-hover:text-green-500 transition-colors" />
|
||||
<div className="mt-4 text-green-600 text-lg font-medium">
|
||||
Unggah Gambar Daun
|
||||
</div>
|
||||
<div className="mt-2 text-sm text-muted-foreground">
|
||||
Seret & Lepas atau klik untuk memilih file (PNG/JPG, maks 5MB)
|
||||
</div>
|
||||
</button>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
<div className="relative rounded-xl overflow-hidden bg-muted">
|
||||
<img
|
||||
src={previewUrl}
|
||||
alt="Preview"
|
||||
className="w-full max-h-80 object-contain"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="absolute top-3 right-3 bg-black/60 text-white rounded-full p-1.5 hover:bg-black/80 transition-colors"
|
||||
onClick={() => {
|
||||
setPreviewUrl(null);
|
||||
setFileName(null);
|
||||
if (inputRef.current) inputRef.current.value = "";
|
||||
}}
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
File: <span className="font-medium">{fileName}</span>
|
||||
</p>
|
||||
<div className="flex gap-3">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
setPreviewUrl(null);
|
||||
setFileName(null);
|
||||
if (inputRef.current) inputRef.current.value = "";
|
||||
}}
|
||||
>
|
||||
<ImageOff className="mr-2 h-4 w-4" />
|
||||
Ganti Foto
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleUpload}
|
||||
disabled={mutation.isPending}
|
||||
className="bg-green-600 hover:bg-green-700 text-white"
|
||||
>
|
||||
<Upload className="mr-2 h-4 w-4" />
|
||||
{mutation.isPending ? "Memproses..." : "Analisis"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="file"
|
||||
accept="image/png,image/jpeg"
|
||||
className="hidden"
|
||||
onChange={(e) => handleFile(e.target.files?.[0])}
|
||||
/>
|
||||
|
||||
{/* Error state */}
|
||||
{mutation.isError && (
|
||||
<div className="mt-4 p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-600">
|
||||
<p className="font-medium">Upload gagal</p>
|
||||
<p className="mt-1">
|
||||
{mutation.error instanceof Error
|
||||
? mutation.error.message
|
||||
: "Terjadi kesalahan saat memproses gambar"}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<aside className="space-y-4">
|
||||
<Card>
|
||||
<CardContent className="p-4">
|
||||
<h2 className="font-medium mb-3">Panduan Pengambilan Foto</h2>
|
||||
<ul className="text-sm space-y-3 text-muted-foreground">
|
||||
<li className="flex items-start gap-2">
|
||||
<CheckCircle className="h-4 w-4 text-green-600 mt-0.5 shrink-0" />
|
||||
Jarak 15–30 cm dari daun
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<CheckCircle className="h-4 w-4 text-green-600 mt-0.5 shrink-0" />
|
||||
Pencahayaan cukup, hindari blur
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<CheckCircle className="h-4 w-4 text-green-600 mt-0.5 shrink-0" />
|
||||
Daun memenuhi bingkai
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<CheckCircle className="h-4 w-4 text-green-600 mt-0.5 shrink-0" />
|
||||
Hindari bayangan dan background berantakan
|
||||
</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
{/* Result Modal */}
|
||||
<Modal
|
||||
open={previewOpen}
|
||||
onClose={() => {
|
||||
setPreviewOpen(false);
|
||||
setDiagnosisPreview(null);
|
||||
}}
|
||||
title={diagnosisPreview?.predictedDiseaseSlug ?? "Hasil Diagnosis"}
|
||||
size="sm"
|
||||
title={diagnosisPreview?.disease?.commonName ?? "Hasil Diagnosis"}
|
||||
size="md"
|
||||
footer={
|
||||
diagnosisPreview && (
|
||||
<div className="flex items-center justify-end gap-3">
|
||||
<button
|
||||
className="px-3 py-2 rounded bg-green-600 text-white text-sm"
|
||||
onClick={() => navigate(`/diagnoses/${diagnosisPreview.id}`)}
|
||||
>
|
||||
Lihat detail
|
||||
</button>
|
||||
<button
|
||||
className="px-3 py-2 rounded bg-gray-200 text-sm"
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
setPreviewOpen(false);
|
||||
setDiagnosisPreview(null);
|
||||
}}
|
||||
>
|
||||
Tutup
|
||||
</button>
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => navigate(`/diagnoses/${diagnosisPreview.id}`)}
|
||||
className="bg-green-600 hover:bg-green-700"
|
||||
>
|
||||
Lihat Detail Lengkap
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
>
|
||||
{diagnosisPreview ? (
|
||||
<div className="grid grid-cols-1 gap-4">
|
||||
{diagnosisPreview.imageUrl && (
|
||||
<img
|
||||
src={diagnosisPreview.imageUrl}
|
||||
alt="hasil"
|
||||
className="w-full rounded-md object-cover"
|
||||
/>
|
||||
)}
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Prediksi:{" "}
|
||||
<strong>{diagnosisPreview.predictedDiseaseSlug}</strong>
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Confidence:{" "}
|
||||
<strong>
|
||||
{Math.round((diagnosisPreview.confidence ?? 0) * 100)}%
|
||||
</strong>
|
||||
</p>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<DiagnosisStatusBadge status={diagnosisPreview.status} />
|
||||
{diagnosisPreview.confidence !== null && (
|
||||
<span className="text-sm font-medium">
|
||||
Confidence: {(diagnosisPreview.confidence * 100).toFixed(1)}%
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{diagnosisPreview.disease && (
|
||||
<div>
|
||||
<h3 className="font-semibold text-lg">
|
||||
{diagnosisPreview.disease.commonName}
|
||||
</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{diagnosisPreview.disease.summary}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{diagnosisPreview.failureReason && (
|
||||
<div className="p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-600">
|
||||
{diagnosisPreview.failureReason}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{diagnosisPreview.predictions.length > 0 && (
|
||||
<div>
|
||||
<h4 className="text-sm font-medium mb-2">Semua Prediksi</h4>
|
||||
<div className="space-y-2">
|
||||
{diagnosisPreview.predictions
|
||||
.sort((a, b) => a.rank - b.rank)
|
||||
.map((pred) => (
|
||||
<div
|
||||
key={pred.id}
|
||||
className="flex items-center justify-between rounded-lg border p-2 text-sm"
|
||||
>
|
||||
<span>{pred.modelLabel}</span>
|
||||
<span className="font-semibold">
|
||||
{(pred.confidence * 100).toFixed(1)}%
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="pt-4 border-t">
|
||||
<h4 className="text-sm font-medium mb-2">
|
||||
Daftar Diagnosis Terbaru
|
||||
<h4 className="text-sm font-medium mb-3">
|
||||
Riwayat Diagnosis Terbaru
|
||||
</h4>
|
||||
{diagnosesQuery.isLoading && (
|
||||
<div className="text-sm text-muted-foreground">
|
||||
Memuat daftar...
|
||||
</div>
|
||||
)}
|
||||
{diagnosesQuery.isError && (
|
||||
<div className="text-sm text-red-600">
|
||||
Gagal memuat daftar diagnosis
|
||||
Memuat riwayat...
|
||||
</div>
|
||||
)}
|
||||
{!diagnosesQuery.isLoading && !diagnosesQuery.isError && (
|
||||
<div className="space-y-2">
|
||||
{(diagnosesQuery.data ?? []).slice(0, 5).map((d) => (
|
||||
<div
|
||||
key={d.id}
|
||||
className="flex items-center justify-between rounded-md p-2 hover:bg-muted"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<img
|
||||
src={d.imageUrl}
|
||||
alt="thumb"
|
||||
className="h-10 w-10 rounded object-cover"
|
||||
/>
|
||||
<div className="text-sm">
|
||||
<div className="font-medium">
|
||||
{d.disease?.commonName ?? d.predictedDiseaseSlug}
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
{new Date(d.createdAt).toLocaleString("id-ID")}
|
||||
{(diagnosesQuery.data ?? [])
|
||||
.slice(0, 5)
|
||||
.map((d) => (
|
||||
<div
|
||||
key={d.id}
|
||||
className="flex items-center justify-between rounded-md p-2 hover:bg-muted"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<img
|
||||
src={d.imageUrl}
|
||||
alt="thumb"
|
||||
className="h-10 w-10 rounded object-cover bg-muted"
|
||||
/>
|
||||
<div className="text-sm">
|
||||
<div className="font-medium">
|
||||
{d.disease?.commonName ?? "Unknown"}
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
{new Date(d.createdAt).toLocaleString("id-ID")}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Link
|
||||
to={`/diagnoses/${d.id}`}
|
||||
className="text-emerald-600 text-sm font-semibold"
|
||||
>
|
||||
Lihat
|
||||
</Link>
|
||||
</div>
|
||||
<Link
|
||||
to={`/diagnoses/${d.id}`}
|
||||
className="text-emerald-600 text-sm font-semibold"
|
||||
>
|
||||
Lihat
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</Modal>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user