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>
|
||||
|
||||
Reference in New Issue
Block a user