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
@@ -1,5 +1,6 @@
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useMemo } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { BookOpen, ChevronRight, Pill, Shield, Scan } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
@@ -14,7 +15,24 @@ export function DashboardPage() {
|
||||
queryFn: () => apiClient.getDashboardSummary(),
|
||||
});
|
||||
|
||||
const diseasesQuery = useQuery({
|
||||
queryKey: ["diseases"],
|
||||
queryFn: () => apiClient.getDiseases(),
|
||||
});
|
||||
|
||||
const summary = summaryQuery.data;
|
||||
const diseases = diseasesQuery.data ?? [];
|
||||
|
||||
const diseasesQuick = useMemo(() =>
|
||||
diseases
|
||||
.sort((a, b) => a.displayOrder - b.displayOrder)
|
||||
.map((d) => ({
|
||||
name: d.commonName,
|
||||
sci: d.label,
|
||||
color: d.accentColor,
|
||||
})),
|
||||
[diseases]
|
||||
);
|
||||
|
||||
const missionCards = [
|
||||
{
|
||||
@@ -47,230 +65,227 @@ export function DashboardPage() {
|
||||
},
|
||||
];
|
||||
|
||||
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="p-6">
|
||||
<div className="mx-auto max-w-6xl space-y-8">
|
||||
{/* 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>
|
||||
<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...
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{hasError && (
|
||||
<Card className="p-8 text-center text-red-600">
|
||||
<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 items-stretch"
|
||||
: "grid gap-6 md:grid-cols-4 items-stretch"
|
||||
}
|
||||
<div className="space-y-8">
|
||||
{/* 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-gradient-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"
|
||||
>
|
||||
<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-2">
|
||||
<CardTitle className="text-sm font-medium text-muted-foreground">
|
||||
Total Penyakit
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="h-full flex flex-col justify-start pt-2">
|
||||
<div className="text-3xl font-bold">
|
||||
{summary.diseaseCount}
|
||||
</div>
|
||||
<Link to="/diagnoses" className="text-emerald-600 ml-auto hover:underline">
|
||||
Lihat daftar
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<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="/catalog"
|
||||
className="inline-flex items-center gap-2"
|
||||
>
|
||||
Pustaka Penyakit
|
||||
<ChevronRight className="h-5 w-6" />
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/3" />
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm font-medium text-muted-foreground">
|
||||
Total Diagnosis
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="h-full flex flex-col justify-start pt-2">
|
||||
<div className="text-3xl font-bold">
|
||||
{summary.imageClassificationCount}
|
||||
</div>
|
||||
<Link to="/diagnoses" className="text-emerald-600 ml-auto hover:underline">
|
||||
Lihat daftar
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
{/* Loading / Error states */}
|
||||
{isLoadingData && (
|
||||
<Card className="p-8 text-center text-muted-foreground">
|
||||
Memuat data dashboard...
|
||||
</Card>
|
||||
)}
|
||||
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm font-medium text-muted-foreground">
|
||||
Menunggu Review
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="h-full flex flex-col justify-start pt-2">
|
||||
<div className="text-3xl font-bold text-amber-600">
|
||||
{summary.needsReviewCount}
|
||||
</div>
|
||||
<Link to="/diagnoses?status=needs_review" className="text-amber-600 ml-auto hover:underline">
|
||||
Lihat daftar
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
{hasError && (
|
||||
<Card className="p-8 text-center text-red-600">
|
||||
<div>Gagal memuat data dashboard</div>
|
||||
<div className="mt-2 text-sm text-red-500">
|
||||
{String(summaryQuery.error?.message)}
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm font-medium text-muted-foreground">
|
||||
Risiko Tinggi
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="h-full flex flex-col justify-start pt-2">
|
||||
<div className="text-3xl font-bold text-red-600">
|
||||
{summary.riskDistribution.high}
|
||||
</div>
|
||||
<Link to="/diagnoses?risk=high" className="text-red-600 ml-auto hover:underline">
|
||||
Lihat daftar
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* Mission section */}
|
||||
<section className="space-y-5 rounded-4xl bg-[#EEF4E8] py-6 md:py-8">
|
||||
<div className="space-y-1">
|
||||
{/* Main dashboard content */}
|
||||
{!isLoadingData && !hasError && (
|
||||
<>
|
||||
{summary && (
|
||||
<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]">
|
||||
Misi Platform
|
||||
Proyek Urgensi
|
||||
</h3>
|
||||
<p className="text-[15px] font-normal text-muted-foreground">
|
||||
Fitur inti yang kami sediakan untuk mendukung petani jagung
|
||||
Indonesia
|
||||
Data ringkasan terbaru dari proyek Anda untuk memantau
|
||||
perkembangan dan hasil deteksi penyakit daun jagung
|
||||
</p>
|
||||
</div>
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm font-medium text-muted-foreground">
|
||||
Total Penyakit
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="h-full flex flex-col justify-start pt-2">
|
||||
<div className="text-3xl font-bold">
|
||||
{summary.diseaseCount}
|
||||
</div>
|
||||
<Link to="/diagnoses" className="text-emerald-600 ml-auto hover:underline">
|
||||
Lihat daftar
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div className="grid gap-2 md:grid-cols-2 xl:grid-cols-4">
|
||||
{missionCards.map((card) => {
|
||||
const Icon = card.icon;
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm font-medium text-muted-foreground">
|
||||
Total Diagnosis
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="h-full flex flex-col justify-start pt-2">
|
||||
<div className="text-3xl font-bold">
|
||||
{summary.imageClassificationCount}
|
||||
</div>
|
||||
<Link to="/diagnoses" className="text-emerald-600 ml-auto hover:underline">
|
||||
Lihat daftar
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
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>
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm font-medium text-muted-foreground">
|
||||
Menunggu Review
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="h-full flex flex-col justify-start pt-2">
|
||||
<div className="text-3xl font-bold text-amber-600">
|
||||
{summary.needsReviewCount}
|
||||
</div>
|
||||
<Link to="/diagnoses?status=needs_review" className="text-amber-600 ml-auto hover:underline">
|
||||
Lihat daftar
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm font-medium text-muted-foreground">
|
||||
Risiko Tinggi
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="h-full flex flex-col justify-start pt-2">
|
||||
<div className="text-3xl font-bold text-red-600">
|
||||
{summary.riskDistribution.high}
|
||||
</div>
|
||||
<Link to="/diagnoses?risk=high" className="text-red-600 ml-auto hover:underline">
|
||||
Lihat daftar
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* 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>
|
||||
{/* 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>
|
||||
|
||||
<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>
|
||||
|
||||
{/* Diseases quick access - now API-driven */}
|
||||
<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">
|
||||
{diseases.length} kelas penyakit dan kondisi daun jagung dalam sistem kami
|
||||
</p>
|
||||
</div>
|
||||
<Link
|
||||
to="/catalog"
|
||||
className="text-emerald-600 font-semibold inline-flex items-center gap-1"
|
||||
>
|
||||
Lihat Pustaka <ChevronRight className="w-4 h-4" />
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{diseasesQuery.isLoading ? (
|
||||
<div className="text-center text-muted-foreground py-4">
|
||||
Memuat data penyakit...
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
|
||||
{diseasesQuick.map((d) => (
|
||||
<Card
|
||||
@@ -296,38 +311,31 @@ export function DashboardPage() {
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{/* 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>
|
||||
{/* Scan quick access */}
|
||||
<div className="mt-12 flex items-center gap-6 bg-[#1E8A2A] rounded-3xl p-6">
|
||||
<div className="flex-1 text-white">
|
||||
<h3 className="text-2xl font-bold">Siap Mendeteksi Penyakit Daun?</h3>
|
||||
<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>
|
||||
</main>
|
||||
<Button
|
||||
asChild
|
||||
variant="outline"
|
||||
className="bg-white hover:bg-[#1E8A2A]/90 hover:text-white px-6 py-6 text-lg font-bold text-[#214B11] shrink-0"
|
||||
>
|
||||
<Link to="/scan" className="inline-flex items-center gap-2">
|
||||
<Scan className="h-5 w-6" />
|
||||
Mulai Scan Sekarang
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user