feat: update landing page and add new library and scan pages
- Refactor landing page content and links for better user experience. - Introduce a new library page to display disease information with filtering and modal details. - Add a scan page for users to upload images for diagnosis with a preview modal. - Enhance login and registration pages with automatic navigation to the dashboard. - Integrate vite-tsconfig-paths for improved path resolution in Vite configuration.
This commit is contained in:
seriouselly
@@ -1,118 +1,116 @@
|
||||
import { useQueries, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { Link, useNavigate } from 'react-router-dom';
|
||||
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 { DiagnosisCard } from '@/components/diagnosis-card';
|
||||
import { useAuthStore } from '@/store/auth-store';
|
||||
import { useUiStore } from '@/store/ui-store';
|
||||
import { apiClient } from '@/lib/api-client';
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { Link } from "react-router-dom";
|
||||
import { BookOpen, ChevronRight, Pill, Shield, Scan } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { useUiStore } from "@/store/ui-store";
|
||||
import { apiClient } from "@/lib/api-client";
|
||||
import bg from "@/assets/images/dashboard-bg.png";
|
||||
|
||||
export function DashboardPage() {
|
||||
const { user } = useAuthStore();
|
||||
const setUser = useAuthStore((state) => state.setUser);
|
||||
const { dashboardCompact, toggleDashboardCompact } = useUiStore();
|
||||
const queryClient = useQueryClient();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const [diseasesQuery, summaryQuery, diagnosesQuery, classificationsQuery] = useQueries({
|
||||
queries: [
|
||||
{
|
||||
queryKey: ['diseases'],
|
||||
queryFn: () => apiClient.getDiseases(),
|
||||
},
|
||||
{
|
||||
queryKey: ['dashboard-summary'],
|
||||
queryFn: () => apiClient.getDashboardSummary(),
|
||||
},
|
||||
{
|
||||
queryKey: ['diagnoses'],
|
||||
queryFn: () => apiClient.getDiagnoses(),
|
||||
},
|
||||
{
|
||||
queryKey: ['manual-classifications'],
|
||||
queryFn: () => apiClient.getManualClassifications(),
|
||||
},
|
||||
],
|
||||
const { dashboardCompact } = useUiStore();
|
||||
const summaryQuery = useQuery({
|
||||
queryKey: ["dashboard-summary"],
|
||||
queryFn: () => apiClient.getDashboardSummary(),
|
||||
});
|
||||
|
||||
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);
|
||||
},
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['dashboard-summary'] });
|
||||
queryClient.invalidateQueries({ queryKey: ['manual-classifications'] });
|
||||
},
|
||||
});
|
||||
|
||||
const logoutMutation = useMutation({
|
||||
mutationFn: async () => {
|
||||
await apiClient.logout();
|
||||
},
|
||||
onSuccess: () => {
|
||||
setUser(null);
|
||||
queryClient.clear();
|
||||
navigate('/login');
|
||||
},
|
||||
});
|
||||
|
||||
const diseases = diseasesQuery.data || [];
|
||||
const summary = summaryQuery.data;
|
||||
const diagnoses = diagnosesQuery.data || [];
|
||||
const classifications = classificationsQuery.data || [];
|
||||
|
||||
const isLoadingData = diseasesQuery.isLoading || summaryQuery.isLoading;
|
||||
const hasError = diseasesQuery.error || summaryQuery.error;
|
||||
const missionCards = [
|
||||
{
|
||||
icon: Scan,
|
||||
title: "Deteksi Otomatis",
|
||||
description:
|
||||
"Upload foto daun jagung dan AI kami akan mengidentifikasi penyakit secara instan.",
|
||||
accent: "text-lime-600",
|
||||
},
|
||||
{
|
||||
icon: BookOpen,
|
||||
title: "Modul Edukasi",
|
||||
description:
|
||||
"Informasi detail tentang gejala, penyebab, dan dampak setiap penyakit daun jagung.",
|
||||
accent: "text-amber-600",
|
||||
},
|
||||
{
|
||||
icon: Shield,
|
||||
title: "Panduan Pencegahan",
|
||||
description:
|
||||
"Strategi pencegahan berbasis sains untuk melindungi tanaman Anda dari infeksi.",
|
||||
accent: "text-blue-600",
|
||||
},
|
||||
{
|
||||
icon: Pill,
|
||||
title: "Rekomendasi Obat",
|
||||
description:
|
||||
"Saran fungisida dan perawatan mandiri yang tepat sesuai jenis penyakit.",
|
||||
accent: "text-violet-600",
|
||||
},
|
||||
];
|
||||
|
||||
const diseasesQuick = [
|
||||
{ name: "Hawar Daun", sci: "Northern Leaf Blight", color: "#b91c1c" },
|
||||
{ name: "Karat Daun", sci: "Common Rust", color: "#d97706" },
|
||||
{ name: "Bercak Abu-abu", sci: "Gray Leaf Spot", color: "#6b7280" },
|
||||
{ name: "Daun Sehat", sci: "Healthy", color: "#16a34a" },
|
||||
];
|
||||
|
||||
const isLoadingData = summaryQuery.isLoading;
|
||||
const hasError = Boolean(summaryQuery.error);
|
||||
|
||||
return (
|
||||
<main className="min-h-screen px-6 py-8">
|
||||
<main className="p-6">
|
||||
<div className="mx-auto max-w-6xl space-y-8">
|
||||
<header className="flex flex-col gap-4 rounded-3xl border bg-card p-6 shadow-sm md:flex-row md:items-center md:justify-between">
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2 text-sm font-medium text-primary">
|
||||
<LayoutDashboard className="h-4 w-4" /> Dashboard
|
||||
{/* Hero header */}
|
||||
<header
|
||||
className="relative overflow-hidden rounded-3xl bg-cover bg-center bg-no-repeat shadow-sm"
|
||||
style={{ backgroundImage: `url(${bg})` }}
|
||||
>
|
||||
<div className="absolute inset-0 bg-linear-to-b from-[#2F6E1A]/60 to-black/30" />
|
||||
<div className="relative z-10 flex flex-col md:flex-row items-center justify-between gap-6 p-10">
|
||||
<div className="space-y-3 w-full md:w-2/3 text-white">
|
||||
<span className="inline-block rounded-full bg-[#1E8A2A]/80 px-4 py-2 text-xs font-semibold">
|
||||
AI FOR SMART EDUCATION
|
||||
</span>
|
||||
<h1 className="text-4xl font-extrabold">Selamat Datang di</h1>
|
||||
<h2 className="text-4xl font-extrabold tracking-tight text-[#9AD872]">
|
||||
ZeaVis Edu
|
||||
</h2>
|
||||
<p className="mt-3 max-w-xl text-white/90">
|
||||
Platform edukasi berbasis AI untuk membantu petani jagung
|
||||
Indonesia mendeteksi penyakit daun secara mandiri, cepat, dan
|
||||
akurat.
|
||||
</p>
|
||||
<div className="mt-6 flex items-center gap-4">
|
||||
<Button
|
||||
asChild
|
||||
variant="outline"
|
||||
className="bg-[#306D29] hover:bg-[#1E8A2A]/90 px-6 py-6 text-lg font-semibold text-white"
|
||||
>
|
||||
<Link to="/scan" className="inline-flex items-center gap-2">
|
||||
<Scan className="h-5 w-6" />
|
||||
Scan Daun Jagung
|
||||
</Link>
|
||||
</Button>
|
||||
<Button
|
||||
asChild
|
||||
variant="outline"
|
||||
className="px-6 py-6 text-lg font-semibold text-white hover:bg-[#1E8A2A]"
|
||||
>
|
||||
<Link
|
||||
to="/library"
|
||||
className="inline-flex items-center gap-2"
|
||||
>
|
||||
Pustaka Penyakit
|
||||
<ChevronRight className="h-5 w-6" />
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<h1 className="text-3xl font-bold tracking-tight">ZeaVis Edu Workspace</h1>
|
||||
<p className="text-muted-foreground">
|
||||
{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
|
||||
variant="outline"
|
||||
onClick={() => logoutMutation.mutate()}
|
||||
disabled={logoutMutation.isPending}
|
||||
>
|
||||
<LogOut className="h-4 w-4 mr-2" />
|
||||
{logoutMutation.isPending ? 'Keluar...' : 'Keluar'}
|
||||
</Button>
|
||||
<div className="w-full md:w-1/3" />
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Loading / Error states */}
|
||||
{isLoadingData && (
|
||||
<Card className="p-8 text-center text-muted-foreground">
|
||||
Memuat data dashboard...
|
||||
@@ -121,43 +119,66 @@ export function DashboardPage() {
|
||||
|
||||
{hasError && (
|
||||
<Card className="p-8 text-center text-red-600">
|
||||
Gagal memuat data dashboard
|
||||
<div>Gagal memuat data dashboard</div>
|
||||
<div className="mt-2 text-sm text-red-500">
|
||||
{String(summaryQuery.error?.message)}
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Main dashboard content */}
|
||||
{!isLoadingData && !hasError && (
|
||||
<>
|
||||
{summary && (
|
||||
<section className={dashboardCompact ? 'grid gap-4 md:grid-cols-4' : 'grid gap-6 md:grid-cols-4'}>
|
||||
<section
|
||||
className={
|
||||
dashboardCompact
|
||||
? "grid gap-4 md:grid-cols-4 items-stretch"
|
||||
: "grid gap-6 md:grid-cols-4 items-stretch"
|
||||
}
|
||||
>
|
||||
<div className="md:col-span-4 text-xl font-bold">
|
||||
<h3 className="text-[24px] font-extrabold text-[#214B11]">
|
||||
Proyek Urgensi
|
||||
</h3>
|
||||
<p className="text-[15px] font-normal text-muted-foreground">
|
||||
Data ringkasan terbaru dari proyek Anda untuk memantau
|
||||
perkembangan dan hasil deteksi penyakit daun jagung
|
||||
</p>
|
||||
</div>
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm font-medium text-muted-foreground">
|
||||
Total Penyakit
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-3xl font-bold">{summary.diseaseCount}</div>
|
||||
<CardContent className="h-full flex flex-col justify-start pt-2">
|
||||
<div className="text-3xl font-bold">
|
||||
{summary.diseaseCount}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm font-medium text-muted-foreground">
|
||||
Total Diagnosis
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-3xl font-bold">{summary.imageClassificationCount}</div>
|
||||
<CardContent className="h-full flex flex-col justify-start pt-2">
|
||||
<div className="text-3xl font-bold">
|
||||
{summary.imageClassificationCount}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm font-medium text-muted-foreground">
|
||||
Menunggu Review
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<CardContent className="h-full flex flex-col justify-start pt-2">
|
||||
<div className="text-3xl font-bold text-amber-600">
|
||||
{summary.needsReviewCount}
|
||||
</div>
|
||||
@@ -165,12 +186,12 @@ export function DashboardPage() {
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm font-medium text-muted-foreground">
|
||||
Risiko Tinggi
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<CardContent className="h-full flex flex-col justify-start pt-2">
|
||||
<div className="text-3xl font-bold text-red-600">
|
||||
{summary.riskDistribution.high}
|
||||
</div>
|
||||
@@ -179,91 +200,119 @@ export function DashboardPage() {
|
||||
</section>
|
||||
)}
|
||||
|
||||
<section className={dashboardCompact ? 'grid gap-4 md:grid-cols-2' : 'grid gap-6 md:grid-cols-2'}>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<BookOpen className="h-5 w-5" />
|
||||
Katalog Penyakit
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Pelajari tentang {diseases.length} penyakit daun jagung
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Button asChild className="w-full">
|
||||
<Link to="/catalog">Buka Katalog</Link>
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
{/* Mission section */}
|
||||
<section className="space-y-5 rounded-4xl bg-[#EEF4E8] py-6 md:py-8">
|
||||
<div className="space-y-1">
|
||||
<h3 className="text-[24px] font-extrabold text-[#214B11]">
|
||||
Misi Platform
|
||||
</h3>
|
||||
<p className="text-[15px] font-normal text-muted-foreground">
|
||||
Fitur inti yang kami sediakan untuk mendukung petani jagung
|
||||
Indonesia
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<TrendingUp className="h-5 w-5" />
|
||||
Distribusi Risiko
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Penyakit berdasarkan tingkat risiko
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{summary && (
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-muted-foreground">Risiko Tinggi</span>
|
||||
<span className="font-semibold">{summary.riskDistribution.high}</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-muted-foreground">Risiko Sedang</span>
|
||||
<span className="font-semibold">{summary.riskDistribution.medium}</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-muted-foreground">Risiko Rendah</span>
|
||||
<span className="font-semibold">{summary.riskDistribution.low}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
<div className="grid gap-2 md:grid-cols-2 xl:grid-cols-4">
|
||||
{missionCards.map((card) => {
|
||||
const Icon = card.icon;
|
||||
|
||||
return (
|
||||
<Card
|
||||
key={card.title}
|
||||
className="rounded-3xl border-white/70 bg-white/95 shadow-[0_8px_24px_rgba(16,24,40,0.08)] h-full"
|
||||
>
|
||||
<CardContent className="space-y-5 p-6 h-full flex flex-col justify-between">
|
||||
<div className="inline-flex h-14 w-14 items-center justify-center rounded-2xl bg-[#EFF6E8]">
|
||||
<Icon className={`h-7 w-7 ${card.accent}`} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<h4 className="text-lg font-bold text-[#214B11]">
|
||||
{card.title}
|
||||
</h4>
|
||||
<p className="text-sm leading-6 text-slate-500">
|
||||
{card.description}
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<ImageClassificationForm
|
||||
onSubmit={async (file) => {
|
||||
await createDiagnosisMutation.mutateAsync(file);
|
||||
}}
|
||||
isSubmitting={createDiagnosisMutation.isPending}
|
||||
latestResult={diagnoses[0] ?? null}
|
||||
/>
|
||||
{/* Diseases quick access */}
|
||||
<section className="space-y-4">
|
||||
<div className="mb-2 flex items-start justify-between">
|
||||
<div>
|
||||
<h3 className="text-[24px] font-extrabold text-[#214B11]">
|
||||
Penyakit yang Dapat Dideteksi
|
||||
</h3>
|
||||
<p className="text-[15px] font-normal text-muted-foreground">
|
||||
4 kelas penyakit dan kondisi daun jagung dalam sistem kami
|
||||
</p>
|
||||
</div>
|
||||
<Link
|
||||
to="/library"
|
||||
className="text-emerald-600 font-semibold inline-flex items-center gap-1"
|
||||
>
|
||||
Lihat Pustaka <ChevronRight className="w-4 h-4" />
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<ManualClassificationForm
|
||||
diseases={diseases}
|
||||
onSubmit={async (payload) => {
|
||||
await createClassificationMutation.mutateAsync(payload);
|
||||
}}
|
||||
isSubmitting={createClassificationMutation.isPending}
|
||||
/>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
|
||||
{diseasesQuick.map((d) => (
|
||||
<Card
|
||||
key={d.name}
|
||||
className="rounded-2xl bg-white p-4 shadow-sm h-full"
|
||||
>
|
||||
<CardContent className="h-full p-4 flex flex-col justify-between">
|
||||
<div className="flex items-start gap-3">
|
||||
<div
|
||||
className="mt-1 h-3 w-3 rounded-full"
|
||||
style={{ backgroundColor: d.color }}
|
||||
/>
|
||||
<div>
|
||||
<div className="text-sm font-bold text-[#214B11]">
|
||||
{d.name}
|
||||
</div>
|
||||
<div className="text-xs text-slate-400 italic mt-1">
|
||||
{d.sci}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{diagnoses.length > 0 && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<History className="h-5 w-5" />
|
||||
Riwayat Diagnosis
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
{diagnoses.length} diagnosis yang telah dibuat
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-3">
|
||||
{diagnoses.slice(0, 6).map((diagnosis) => (
|
||||
<DiagnosisCard key={diagnosis.id} diagnosis={diagnosis} />
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
{/* Scan quick access */}
|
||||
<div className="mt-15 flex items-center gap-57 bg-[#1E8A2A] rounded-3xl p-6">
|
||||
<div className="text-2xl font-bold text-white">
|
||||
<h3>Siap Mendeteksi Penyakit Daun?</h3>
|
||||
<div>
|
||||
<p className="text-sm text-[#9AD872] font-normal mt-2">
|
||||
Unggah foto daun jagung Anda dan dapatkan hasil analisis AI
|
||||
dalam hitungan detik.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
asChild
|
||||
variant="outline"
|
||||
className="bg-white hover:bg-[#1E8A2A]/90 hover:text-white px-6 py-6 text-lg font-bold text-[#214B11]"
|
||||
>
|
||||
<Link to="/scan" className="inline-flex items-center gap-2">
|
||||
<Scan className="h-5 w-6" />
|
||||
Mulai Scan Sekarang
|
||||
</Link>
|
||||
</Button>
|
||||
<Button
|
||||
asChild
|
||||
variant="outline"
|
||||
className="px-6 py-6 text-lg font-bold text-white hover:bg-[#1E8A2A]"
|
||||
></Button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -1,23 +1,31 @@
|
||||
import { ArrowRight, Leaf, ShieldCheck, Sprout } from 'lucide-react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { ArrowRight, Leaf, ShieldCheck, Sprout } from "lucide-react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Card,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
|
||||
const features = [
|
||||
{
|
||||
icon: Leaf,
|
||||
title: 'Katalog Penyakit Lengkap',
|
||||
description: 'Pelajari tentang empat penyakit daun jagung utama dengan gejala dan rekomendasi penanganan.',
|
||||
title: "Katalog Penyakit Lengkap",
|
||||
description:
|
||||
"Pelajari tentang empat penyakit daun jagung utama dengan gejala dan rekomendasi penanganan.",
|
||||
},
|
||||
{
|
||||
icon: ShieldCheck,
|
||||
title: 'Pantau Risiko Penyakit',
|
||||
description: 'Lacak distribusi risiko penyakit dan lihat laporan pengamatan terbaru di dashboard.',
|
||||
title: "Pantau Risiko Penyakit",
|
||||
description:
|
||||
"Lacak distribusi risiko penyakit dan lihat laporan pengamatan terbaru di dashboard.",
|
||||
},
|
||||
{
|
||||
icon: Sprout,
|
||||
title: 'Laporkan Pengamatan',
|
||||
description: 'Kirimkan laporan penyakit yang Anda temukan untuk membantu penelitian dan edukasi.',
|
||||
title: "Laporkan Pengamatan",
|
||||
description:
|
||||
"Kirimkan laporan penyakit yang Anda temukan untuk membantu penelitian dan edukasi.",
|
||||
},
|
||||
];
|
||||
|
||||
@@ -44,23 +52,26 @@ export function LandingPage() {
|
||||
</div>
|
||||
<div className="space-y-5">
|
||||
<h1 className="max-w-3xl text-5xl font-bold tracking-tight sm:text-6xl">
|
||||
Belajar mengenali penyakit daun jagung dan pantau pengamatan Anda.
|
||||
Belajar mengenali penyakit daun jagung dan pantau pengamatan
|
||||
Anda.
|
||||
</h1>
|
||||
<p className="max-w-2xl text-lg leading-8 text-muted-foreground">
|
||||
Jelajahi katalog penyakit daun jagung, pelajari gejala dan cara penanganannya,
|
||||
serta laporkan pengamatan Anda untuk membantu penelitian dan edukasi.
|
||||
Jelajahi katalog penyakit daun jagung, pelajari gejala dan cara
|
||||
penanganannya, serta laporkan pengamatan Anda untuk membantu
|
||||
penelitian dan edukasi.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-3 sm:flex-row">
|
||||
<Button asChild size="lg">
|
||||
<Link to="/dashboard">
|
||||
Buka Dashboard <ArrowRight className="ml-2 h-4 w-4" />
|
||||
<Link to="/scan">
|
||||
Mulai Scan Sekarang <ArrowRight className="ml-2 h-4 w-4" />
|
||||
</Link>
|
||||
</Button>
|
||||
<Button asChild size="lg" variant="outline">
|
||||
<Link to="/catalog">
|
||||
Lihat Katalog Penyakit
|
||||
</Link>
|
||||
<Link to="/library">Pustaka Penyakit</Link>
|
||||
</Button>
|
||||
<Button asChild size="lg" variant="ghost">
|
||||
<Link to="/dashboard">Dashboard</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -74,7 +85,9 @@ export function LandingPage() {
|
||||
</div>
|
||||
<div>
|
||||
<CardTitle className="text-xl">{feature.title}</CardTitle>
|
||||
<CardDescription className="mt-2 leading-6">{feature.description}</CardDescription>
|
||||
<CardDescription className="mt-2 leading-6">
|
||||
{feature.description}
|
||||
</CardDescription>
|
||||
</div>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
|
||||
@@ -0,0 +1,182 @@
|
||||
import React, { useMemo, useState } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { BookOpen } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Modal } from "@/components/ui/modal";
|
||||
import { mockDiseases } from "@/data/mock-diseases";
|
||||
|
||||
export function LibraryPage() {
|
||||
type Disease = (typeof mockDiseases)[number];
|
||||
|
||||
const [filter, setFilter] = useState<string | null>(null);
|
||||
const [expandedId, setExpandedId] = useState<string | null>(null);
|
||||
const [selected, setSelected] = useState<Disease | null>(null);
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
|
||||
const items = useMemo(() => {
|
||||
if (!filter) return mockDiseases;
|
||||
return mockDiseases.filter((d) =>
|
||||
d.name.toLowerCase().includes(filter.toLowerCase()),
|
||||
);
|
||||
}, [filter]);
|
||||
|
||||
return (
|
||||
<main className="p-6">
|
||||
<h1 className="text-2xl font-semibold mb-4">Pustaka Penyakit</h1>
|
||||
<div className="mb-4">
|
||||
<input
|
||||
placeholder="Filter penyakit..."
|
||||
value={filter ?? ""}
|
||||
onChange={(e) => setFilter(e.target.value || null)}
|
||||
className="border px-3 py-2 rounded-md w-full max-w-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-4">
|
||||
{items.map((d) => (
|
||||
<article key={d.id} className="bg-white p-4 rounded-lg shadow">
|
||||
<div className="flex gap-4">
|
||||
<img
|
||||
src={d.imageUrl}
|
||||
alt={d.name}
|
||||
className="h-28 w-48 rounded-md object-cover"
|
||||
/>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<h2 className="font-semibold text-lg">
|
||||
{d.name}{" "}
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{d.severity}
|
||||
</span>
|
||||
</h2>
|
||||
<p className="text-sm text-muted-foreground mt-2">
|
||||
{d.description}
|
||||
</p>
|
||||
{d.pathogen && (
|
||||
<div className="mt-2 text-sm">
|
||||
<strong>Patogen:</strong> {d.pathogen}
|
||||
</div>
|
||||
)}
|
||||
<div className="mt-3 flex items-center gap-3">
|
||||
<Button
|
||||
variant="default"
|
||||
onClick={() => {
|
||||
setSelected(d);
|
||||
setModalOpen(true);
|
||||
}}
|
||||
className="inline-flex items-center gap-2 bg-green-600 text-white px-3 py-1 rounded"
|
||||
>
|
||||
<BookOpen className="h-4 w-4" />
|
||||
<span className="text-sm">Baca lebih lanjut</span>
|
||||
</Button>
|
||||
<Link
|
||||
to={`/catalog/${d.slug}`}
|
||||
className="text-sm text-muted-foreground"
|
||||
>
|
||||
Lihat halaman katalog
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
className="text-sm text-primary underline"
|
||||
onClick={() =>
|
||||
setExpandedId(expandedId === d.id ? null : d.id)
|
||||
}
|
||||
>
|
||||
{expandedId === d.id ? "Tutup" : "Detail"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{expandedId === d.id && (
|
||||
<div className="mt-4 grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<h3 className="font-medium">Gejala</h3>
|
||||
<ul className="list-disc list-inside text-sm mt-2">
|
||||
{(d.symptoms || []).length > 0 ? (
|
||||
d.symptoms.map((s: string, i: number) => (
|
||||
<li key={`${d.id}-symptom-${i}`}>{s}</li>
|
||||
))
|
||||
) : (
|
||||
<li>Tidak ada gejala khusus</li>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-medium">Pencegahan</h3>
|
||||
<p className="text-sm mt-2">{d.prevention}</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<Modal
|
||||
open={modalOpen}
|
||||
onClose={() => {
|
||||
setModalOpen(false);
|
||||
setSelected(null);
|
||||
}}
|
||||
title={selected?.name}
|
||||
footer={
|
||||
selected && (
|
||||
<div className="flex items-center justify-end gap-3">
|
||||
<Link
|
||||
to={`/catalog/${selected.slug}`}
|
||||
className="px-3 py-2 rounded bg-green-600 text-white text-sm"
|
||||
>
|
||||
Buka halaman katalog
|
||||
</Link>
|
||||
<button
|
||||
onClick={() => {
|
||||
setModalOpen(false);
|
||||
setSelected(null);
|
||||
}}
|
||||
className="px-3 py-2 rounded bg-gray-200 text-sm"
|
||||
>
|
||||
Tutup
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
>
|
||||
{selected ? (
|
||||
<div className="grid grid-cols-1 gap-4">
|
||||
<img
|
||||
src={selected.imageUrl}
|
||||
alt={selected.name}
|
||||
className="w-full rounded-md object-cover"
|
||||
/>
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{selected.description}
|
||||
</p>
|
||||
{selected.pathogen && (
|
||||
<p className="mt-2">
|
||||
<strong>Patogen:</strong> {selected.pathogen}
|
||||
</p>
|
||||
)}
|
||||
<h4 className="mt-3 font-medium">Gejala</h4>
|
||||
<ul className="list-disc list-inside text-sm mt-2">
|
||||
{(selected.symptoms || []).length > 0 ? (
|
||||
selected.symptoms.map((s: string, i: number) => (
|
||||
<li key={`${selected.id}-symptom-${i}`}>{s}</li>
|
||||
))
|
||||
) : (
|
||||
<li>Tidak ada gejala khusus</li>
|
||||
)}
|
||||
</ul>
|
||||
<h4 className="mt-3 font-medium">Pencegahan</h4>
|
||||
<p className="text-sm mt-2">{selected.prevention}</p>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</Modal>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -1,25 +1,32 @@
|
||||
import { useState } from 'react';
|
||||
import { Link, useNavigate } from 'react-router-dom';
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import { AuthForm } from '@/components/auth-form';
|
||||
import { apiClient } from '@/lib/api-client';
|
||||
import { useAuthStore } from '@/store/auth-store';
|
||||
import { useEffect, useState } from "react";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { AuthForm } from "@/components/auth-form";
|
||||
import { apiClient } from "@/lib/api-client";
|
||||
import { useAuthStore } from "@/store/auth-store";
|
||||
|
||||
export function LoginPage() {
|
||||
const navigate = useNavigate();
|
||||
useEffect(() => {
|
||||
navigate("/dashboard");
|
||||
}, [navigate]);
|
||||
const queryClient = useQueryClient();
|
||||
const setUser = useAuthStore((state) => state.setUser);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const meQuery = useQuery({ queryKey: ['auth', 'me'], queryFn: () => apiClient.getMe() });
|
||||
const meQuery = useQuery({
|
||||
queryKey: ["auth", "me"],
|
||||
queryFn: () => apiClient.getMe(),
|
||||
});
|
||||
|
||||
const mutation = useMutation({
|
||||
mutationFn: apiClient.login,
|
||||
onSuccess: (response) => {
|
||||
setUser(response.user);
|
||||
queryClient.setQueryData(['auth', 'me'], response);
|
||||
navigate('/dashboard');
|
||||
queryClient.setQueryData(["auth", "me"], response);
|
||||
navigate("/dashboard");
|
||||
},
|
||||
onError: (err) => setError(err instanceof Error ? err.message : 'Login gagal'),
|
||||
onError: (err) =>
|
||||
setError(err instanceof Error ? err.message : "Login gagal"),
|
||||
});
|
||||
|
||||
return (
|
||||
@@ -29,7 +36,9 @@ export function LoginPage() {
|
||||
mode="login"
|
||||
isSubmitting={mutation.isPending}
|
||||
error={error}
|
||||
googleOAuthEnabled={Boolean(meQuery.data?.features.googleOAuthEnabled)}
|
||||
googleOAuthEnabled={Boolean(
|
||||
meQuery.data?.features.googleOAuthEnabled,
|
||||
)}
|
||||
onSubmit={async ({ email, password }) => {
|
||||
setError(null);
|
||||
return mutation.mutateAsync({ email, password });
|
||||
@@ -37,7 +46,10 @@ export function LoginPage() {
|
||||
onFieldChange={() => setError(null)}
|
||||
/>
|
||||
<p className="text-center text-sm text-muted-foreground">
|
||||
Belum punya akun? <Link className="text-primary" to="/register">Daftar</Link>
|
||||
Belum punya akun?{" "}
|
||||
<Link className="text-primary" to="/register">
|
||||
Daftar
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@@ -1,25 +1,32 @@
|
||||
import { useState } from 'react';
|
||||
import { Link, useNavigate } from 'react-router-dom';
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import { AuthForm } from '@/components/auth-form';
|
||||
import { apiClient } from '@/lib/api-client';
|
||||
import { useAuthStore } from '@/store/auth-store';
|
||||
import { useEffect, useState } from "react";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { AuthForm } from "@/components/auth-form";
|
||||
import { apiClient } from "@/lib/api-client";
|
||||
import { useAuthStore } from "@/store/auth-store";
|
||||
|
||||
export function RegisterPage() {
|
||||
const navigate = useNavigate();
|
||||
useEffect(() => {
|
||||
navigate("/dashboard");
|
||||
}, [navigate]);
|
||||
const queryClient = useQueryClient();
|
||||
const setUser = useAuthStore((state) => state.setUser);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const meQuery = useQuery({ queryKey: ['auth', 'me'], queryFn: () => apiClient.getMe() });
|
||||
const meQuery = useQuery({
|
||||
queryKey: ["auth", "me"],
|
||||
queryFn: () => apiClient.getMe(),
|
||||
});
|
||||
|
||||
const mutation = useMutation({
|
||||
mutationFn: apiClient.register,
|
||||
onSuccess: (response) => {
|
||||
setUser(response.user);
|
||||
queryClient.setQueryData(['auth', 'me'], response);
|
||||
navigate('/dashboard');
|
||||
queryClient.setQueryData(["auth", "me"], response);
|
||||
navigate("/dashboard");
|
||||
},
|
||||
onError: (err) => setError(err instanceof Error ? err.message : 'Registrasi gagal'),
|
||||
onError: (err) =>
|
||||
setError(err instanceof Error ? err.message : "Registrasi gagal"),
|
||||
});
|
||||
|
||||
return (
|
||||
@@ -29,15 +36,20 @@ export function RegisterPage() {
|
||||
mode="register"
|
||||
isSubmitting={mutation.isPending}
|
||||
error={error}
|
||||
googleOAuthEnabled={Boolean(meQuery.data?.features.googleOAuthEnabled)}
|
||||
googleOAuthEnabled={Boolean(
|
||||
meQuery.data?.features.googleOAuthEnabled,
|
||||
)}
|
||||
onSubmit={async ({ name, email, password }) => {
|
||||
setError(null);
|
||||
return mutation.mutateAsync({ name: name ?? '', email, password });
|
||||
return mutation.mutateAsync({ name: name ?? "", email, password });
|
||||
}}
|
||||
onFieldChange={() => setError(null)}
|
||||
/>
|
||||
<p className="text-center text-sm text-muted-foreground">
|
||||
Sudah punya akun? <Link className="text-primary" to="/login">Masuk</Link>
|
||||
Sudah punya akun?{" "}
|
||||
<Link className="text-primary" to="/login">
|
||||
Masuk
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@@ -0,0 +1,143 @@
|
||||
import React, { useRef, useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import { apiClient } from "@/lib/api-client";
|
||||
import { Modal } from "@/components/ui/modal";
|
||||
import type { DiagnosisRecord } from "@zeavis/shared";
|
||||
|
||||
export function ScanPage() {
|
||||
const [fileName, setFileName] = useState<string | null>(null);
|
||||
const inputRef = useRef<HTMLInputElement | null>(null);
|
||||
const navigate = useNavigate();
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const mutation = useMutation({
|
||||
mutationFn: (file: File) => apiClient.createDiagnosis(file),
|
||||
onSuccess: (diagnosis) => {
|
||||
queryClient.invalidateQueries({ queryKey: ["diagnoses"] });
|
||||
// show preview modal instead of immediate navigation
|
||||
setDiagnosisPreview(diagnosis as DiagnosisRecord);
|
||||
setPreviewOpen(true);
|
||||
},
|
||||
});
|
||||
|
||||
const handleFile = (f?: File) => {
|
||||
if (!f) return;
|
||||
setFileName(f.name);
|
||||
mutation.mutate(f);
|
||||
};
|
||||
|
||||
const [previewOpen, setPreviewOpen] = useState(false);
|
||||
const [diagnosisPreview, setDiagnosisPreview] =
|
||||
useState<DiagnosisRecord | null>(null);
|
||||
|
||||
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>
|
||||
<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>
|
||||
</aside>
|
||||
</div>
|
||||
<Modal
|
||||
open={previewOpen}
|
||||
onClose={() => {
|
||||
setPreviewOpen(false);
|
||||
setDiagnosisPreview(null);
|
||||
}}
|
||||
title={diagnosisPreview?.predictedDiseaseSlug ?? "Hasil Diagnosis"}
|
||||
size="sm"
|
||||
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"
|
||||
onClick={() => {
|
||||
setPreviewOpen(false);
|
||||
setDiagnosisPreview(null);
|
||||
}}
|
||||
>
|
||||
Tutup
|
||||
</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>
|
||||
</div>
|
||||
) : null}
|
||||
</Modal>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user