seriouselly
450b2f9d97
- app & navbar: comment out login, register, and logout features. - scan-page: align info cards vertically and reduce upload area padding. - mobile-nav: implement React Portal to fix overlapping menu issue.
489 lines
20 KiB
TypeScript
489 lines
20 KiB
TypeScript
import { useRef, useState } from "react";
|
||
import { useNavigate, Link } from "react-router-dom";
|
||
import { useMutation, useQueryClient, useQuery } from "@tanstack/react-query";
|
||
import {
|
||
Camera,
|
||
Upload,
|
||
X,
|
||
ImageOff,
|
||
CircleAlert,
|
||
ZoomIn,
|
||
Sun,
|
||
AlignCenter,
|
||
Check,
|
||
} 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 [imageDimensions, setImageDimensions] = useState<{ width: number; height: number } | null>(null);
|
||
const inputRef = useRef<HTMLInputElement | null>(null);
|
||
const imageRef = useRef<HTMLImageElement | null>(null);
|
||
const navigate = useNavigate();
|
||
const queryClient = useQueryClient();
|
||
|
||
const mutation = useMutation({
|
||
mutationFn: (file: File) => apiClient.createDiagnosis(file),
|
||
onSuccess: (diagnosis) => {
|
||
queryClient.invalidateQueries({ queryKey: ["diagnoses"] });
|
||
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);
|
||
const url = URL.createObjectURL(f);
|
||
setPreviewUrl(url);
|
||
|
||
// Detect image dimensions
|
||
const img = new Image();
|
||
img.onload = () => {
|
||
setImageDimensions({ width: img.width, height: img.height });
|
||
};
|
||
img.src = url;
|
||
};
|
||
|
||
const handleUpload = () => {
|
||
const file = inputRef.current?.files?.[0];
|
||
if (!file) return;
|
||
mutation.mutate(file);
|
||
};
|
||
|
||
const [previewOpen, setPreviewOpen] = useState(false);
|
||
const [diagnosisPreview, setDiagnosisPreview] =
|
||
useState<DiagnosisRecord | null>(null);
|
||
|
||
const diagnosesQuery = useQuery({
|
||
queryKey: ["diagnoses"],
|
||
queryFn: () => apiClient.getDiagnoses(),
|
||
enabled: previewOpen,
|
||
});
|
||
|
||
return (
|
||
<div className="space-y-6">
|
||
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 sm:gap-4">
|
||
<div>
|
||
<h1 className="text-2xl font-bold text-emerald-800">Scan Tanaman</h1>
|
||
<p className="text-gray-500 mt-1 text-md">
|
||
Unggah foto daun jagung untuk dianalisis oleh sistem AI kami secara
|
||
real-time.
|
||
</p>
|
||
</div>
|
||
<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 className="w-full lg:h-117 py-3">
|
||
<CardContent className="px-6 py-4 h-full flex flex-col">
|
||
{/* Left Sidebar */}
|
||
<div className="text-black flex items-center gap-2 mb-3 text-lg font-semibold">
|
||
<Camera className="text-green-500" size={25} />
|
||
Area Unggah Gambar
|
||
</div>
|
||
|
||
{/* Upload area */}
|
||
{!previewUrl ? (
|
||
<div className="space-y-3">
|
||
<div
|
||
className="w-full border-2 border-dashed border-green-300 rounded-md p-10 h-60 text-center cursor-pointer"
|
||
onClick={() => inputRef.current?.click()}
|
||
>
|
||
<Upload className="mx-auto text-green-500 mb-3" size={48} />
|
||
<h3 className="font-semibold text-base text-gray-800 mb-1">
|
||
Seret & Lepas Foto Daun
|
||
</h3>
|
||
<p className="text-xs text-gray-500 mb-3">
|
||
atau klik untuk memilih file berkas dari perangkat Anda
|
||
</p>
|
||
<div className="flex flex-wrap gap-2 justify-center">
|
||
<div className="bg-green-100 text-green-700 px-3 py-1 rounded-full inline-flex items-center gap-1 text-xs font-medium">
|
||
<Check size={14} />
|
||
PNG, JPG, JPEG
|
||
</div>
|
||
<div className="bg-green-100 text-green-700 px-3 py-1 rounded-full inline-flex items-center gap-1 text-xs font-medium">
|
||
<Check size={14} />
|
||
Maks. 5 MB
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<button
|
||
type="button"
|
||
onClick={() => inputRef.current?.click()}
|
||
className="w-full bg-green-600 hover:bg-green-700 text-white font-medium py-2.5 px-4 rounded-lg transition-colors flex items-center justify-center gap-2"
|
||
>
|
||
<Upload size={18} />
|
||
Pilih Berkas
|
||
</button>
|
||
</div>
|
||
) : (
|
||
<div className="space-y-4">
|
||
<div className="relative rounded-xl overflow-hidden bg-muted w-full">
|
||
<img
|
||
ref={imageRef}
|
||
src={previewUrl}
|
||
alt="Preview"
|
||
className="w-full max-h-80 object-contain"
|
||
onLoad={(e) => {
|
||
const img = e.currentTarget;
|
||
setImageDimensions({
|
||
width: img.naturalWidth,
|
||
height: img.naturalHeight,
|
||
});
|
||
}}
|
||
/>
|
||
{/* Scanner area detection overlay */}
|
||
{imageDimensions && (
|
||
<div className="absolute inset-0 flex items-center justify-center pointer-events-none">
|
||
{/* Outer dark overlay */}
|
||
<div className="absolute inset-0 bg-black/20" />
|
||
|
||
{/* Scan area frame - responsive to image */}
|
||
<div
|
||
className="relative flex items-center justify-center"
|
||
style={{
|
||
width: `${Math.min(imageDimensions.width * 0.7, 280)}px`,
|
||
height: `${Math.min(imageDimensions.height * 0.7, 320)}px`,
|
||
}}
|
||
>
|
||
{/* Corner markers */}
|
||
<div className="absolute top-0 left-0 w-6 h-6 border-t-2 border-l-2 border-lime-300" />
|
||
<div className="absolute top-0 right-0 w-6 h-6 border-t-2 border-r-2 border-lime-300" />
|
||
<div className="absolute bottom-0 left-0 w-6 h-6 border-b-2 border-l-2 border-lime-300" />
|
||
<div className="absolute bottom-0 right-0 w-6 h-6 border-b-2 border-r-2 border-lime-300" />
|
||
|
||
{/* Center text */}
|
||
<div className="text-white text-center flex flex-col gap-1">
|
||
<span className="text-xs font-semibold tracking-widest">AREA SCAN</span>
|
||
<span className="text-[10px] text-lime-200 font-medium">
|
||
{imageDimensions.width} × {imageDimensions.height}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
<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 z-10"
|
||
onClick={() => {
|
||
setPreviewUrl(null);
|
||
setFileName(null);
|
||
setImageDimensions(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 flex-wrap gap-3">
|
||
<Button
|
||
variant="outline"
|
||
onClick={() => {
|
||
setPreviewUrl(null);
|
||
setFileName(null);
|
||
setImageDimensions(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>
|
||
|
||
{/* Right Sidebar */}
|
||
<aside className="lg:col-span-1 flex flex-col gap-5">
|
||
{/* Card 1: Panduan Pengambilan Foto */}
|
||
<Card className="w-full h-max">
|
||
<CardContent className="px-6 py-4">
|
||
<div className="flex items-center gap-3 mb-4">
|
||
<div className="inline-flex h-9 w-9 items-center justify-center rounded-full">
|
||
<CircleAlert className="text-emerald-600" size={20} />
|
||
</div>
|
||
<h2 className="font-bold text-emerald-800">
|
||
Panduan Pengambilan Foto
|
||
</h2>
|
||
</div>
|
||
|
||
<ul className="space-y-3">
|
||
<li className="flex items-center gap-3">
|
||
<div className="h-9 w-9 rounded-lg bg-emerald-50 flex items-center justify-center shrink-0">
|
||
<ZoomIn className="text-emerald-600" size={20} />
|
||
</div>
|
||
<div className="text-sm text-slate-700">
|
||
Jarak 15–30 cm dari daun
|
||
</div>
|
||
</li>
|
||
<li className="flex items-center gap-3">
|
||
<div className="h-9 w-9 rounded-lg bg-emerald-50 flex items-center justify-center shrink-0">
|
||
<Sun className="text-emerald-600" size={20} />
|
||
</div>
|
||
<div className="text-sm text-slate-700">
|
||
Pencahayaan cukup merata
|
||
</div>
|
||
</li>
|
||
<li className="flex items-center gap-3">
|
||
<div className="h-9 w-9 rounded-lg bg-emerald-50 flex items-center justify-center shrink-0">
|
||
<AlignCenter className="text-emerald-600" size={20} />
|
||
</div>
|
||
<div className="text-sm text-slate-700">
|
||
Posisi daun mengisi bingkai dengan jelas
|
||
</div>
|
||
</li>
|
||
<li className="flex items-center gap-3">
|
||
<div className="h-9 w-9 rounded-lg bg-emerald-50 flex items-center justify-center shrink-0">
|
||
<Camera className="text-emerald-600" size={20} />
|
||
</div>
|
||
<div className="text-sm text-slate-700">
|
||
Hindari bayangan atau pantulan pada daun & blur pada gambar
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
|
||
<div className="mt-4">
|
||
<div className="rounded-lg overflow-hidden mt-4">
|
||
<div className="relative h-36 overflow-hidden bg-[url('/src/assets/images/scan-guide-bg.png')] bg-cover bg-center text-white md:h-44">
|
||
<div className="absolute inset-0 bg-black/25" />
|
||
<div className="absolute inset-0 bg-linear-to-b from-black/5 via-transparent to-black/35" />
|
||
<div className="relative z-10 flex h-full flex-col items-center justify-center gap-5 text-center">
|
||
<div className="relative flex h-full w-30 items-center justify-center mt-8">
|
||
<span className="absolute left-0 top-0 h-4 w-4 border-l-2 border-t-2 border-l-lime-300 border-t-lime-300" />
|
||
<span className="absolute right-0 top-0 h-4 w-4 border-r-2 border-t-2 border-r-lime-300 border-t-lime-300" />
|
||
<span className="absolute bottom-0 left-0 h-4 w-4 border-b-2 border-l-2 border-b-lime-300 border-l-lime-300" />
|
||
<span className="absolute bottom-0 right-0 h-4 w-4 border-b-2 border-r-2 border-b-lime-300 border-r-lime-300" />
|
||
<span className="relative z-10 text-xs font-semibold tracking-[0.28em] text-white">
|
||
AREA SCAN
|
||
</span>
|
||
</div>
|
||
<div className="text-[11px] font-medium text-lime-100 bg-black/30 w-full py-1 rounded">
|
||
Posisi ideal: daun memenuhi bingkai
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* Card 2: Persyaratan Berkas */}
|
||
<Card className="w-full h-max">
|
||
<CardContent className="px-6 py-4">
|
||
<h3 className="font-bold text-emerald-800 flex items-center gap-3 mb-4">
|
||
Persyaratan Berkas
|
||
</h3>
|
||
<div className="flex flex-col gap-2">
|
||
{[
|
||
{ label: "Format", value: "PNG, JPG, JPEG" },
|
||
{ label: "Ukuran Maks.", value: "5 MB" },
|
||
{ label: "Resolusi Min.", value: "512 × 512 px" },
|
||
{ label: "Objek Foto", value: "Daun jagung tunggal" },
|
||
].map((r, i) => (
|
||
<div
|
||
key={i}
|
||
className="flex items-center justify-between py-1.5"
|
||
style={{
|
||
borderBottom: i < 3 ? "1px solid #f0f0f0" : "none",
|
||
}}
|
||
>
|
||
<span
|
||
className="text-gray-400"
|
||
style={{ fontSize: "0.75rem" }}
|
||
>
|
||
{r.label}
|
||
</span>
|
||
<span className="text-sm font-medium text-gray-700">
|
||
{r.value}
|
||
</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</aside>
|
||
</div>
|
||
|
||
{/* Result Modal */}
|
||
<Modal
|
||
open={previewOpen}
|
||
onClose={() => {
|
||
setPreviewOpen(false);
|
||
setDiagnosisPreview(null);
|
||
}}
|
||
title={diagnosisPreview?.disease?.commonName ?? "Hasil Diagnosis"}
|
||
size="md"
|
||
footer={
|
||
diagnosisPreview && (
|
||
<div className="flex items-center justify-end gap-3">
|
||
<Button
|
||
variant="outline"
|
||
onClick={() => {
|
||
setPreviewOpen(false);
|
||
setDiagnosisPreview(null);
|
||
}}
|
||
>
|
||
Tutup
|
||
</Button>
|
||
<Button
|
||
onClick={() => navigate(`/diagnoses/${diagnosisPreview.id}`)}
|
||
className="bg-green-600 hover:bg-green-700"
|
||
>
|
||
Lihat Detail Lengkap
|
||
</Button>
|
||
</div>
|
||
)
|
||
}
|
||
>
|
||
{diagnosisPreview ? (
|
||
<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-3">
|
||
Riwayat Diagnosis Terbaru
|
||
</h4>
|
||
{diagnosesQuery.isLoading && (
|
||
<div className="text-sm text-muted-foreground">
|
||
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 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>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
) : null}
|
||
</Modal>
|
||
</div>
|
||
);
|
||
}
|