MythEclipse/zeavis-edu
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(frontend): align catalog with dashboard, make disease cards clickable, fix stat cards

Browse Source 
- Make dashboard disease quick-access cards clickable → link to /catalog/:slug
- Update catalog page to match dashboard styling (4-column grid, consistent
  card design with colored dot, risk badge, line-clamp summary)
- Add URL param support to catalog (?risk=high) so dashboard's
  "Risiko Tinggi" stat card link works
- Remove confusing "Total Penyakit" stat card (was counting catalog rows,
  always 4). Replace with "Total Diagnosa" linking to /diagnoses,
  "Gagal" stat, and rename "Risiko Tinggi" to "Kategori Risiko Tinggi"
  linking to /catalog?risk=high

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Asep Haryana Saputra
2026-06-02 07:22:28 +00:00
co-authored by Claude Opus 4.7
parent ba24cf1a05
commit 4d6ca4912c
2 changed files with 168 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/pages/catalog-page.tsx
+122 -47
View File
@@ -1,80 +1,105 @@
import { useState } from 'react'; import { useState, useEffect } from 'react';
import { useQuery } from '@tanstack/react-query'; import { useQuery } from '@tanstack/react-query';
import { Link } from 'react-router-dom'; import { Link, useSearchParams } from 'react-router-dom';
import { ArrowLeft, Shield, AlertCircle } from 'lucide-react';
import type { RiskLevel } from '@zeavis/shared'; import type { RiskLevel } from '@zeavis/shared';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card'; import { Card, CardContent } from '@/components/ui/card';
import { DiseaseCard } from '@/components/disease-card'; import { RiskBadge } from '@/components/risk-badge';
import { apiClient } from '@/lib/api-client'; import { apiClient } from '@/lib/api-client';
export function CatalogPage() { export function CatalogPage() {
const [searchParams, setSearchParams] = useSearchParams();
const initialRisk = searchParams.get('risk') as RiskLevel | null;
const [searchQuery, setSearchQuery] = useState(''); const [searchQuery, setSearchQuery] = useState('');
const [riskFilter, setRiskFilter] = useState<RiskLevel | 'all'>('all'); const [riskFilter, setRiskFilter] = useState<RiskLevel | 'all'>(initialRisk ?? 'all');
// Sync URL params with state
useEffect(() => {
if (initialRisk && initialRisk !== riskFilter) {
setRiskFilter(initialRisk);
}
}, [initialRisk]);
const { data: diseases, isLoading, error } = useQuery({ const { data: diseases, isLoading, error } = useQuery({
queryKey: ['diseases'], queryKey: ['diseases'],
queryFn: () => apiClient.getDiseases(), queryFn: () => apiClient.getDiseases(),
}); });
const filteredDiseases = (diseases || []).filter((disease) => { const filteredDiseases = (diseases || [])
const matchesSearch = .sort((a, b) => a.displayOrder - b.displayOrder)
disease.commonName.toLowerCase().includes(searchQuery.toLowerCase()) || .filter((disease) => {
disease.label.toLowerCase().includes(searchQuery.toLowerCase()) || const matchesSearch =
disease.summary.toLowerCase().includes(searchQuery.toLowerCase()); disease.commonName.toLowerCase().includes(searchQuery.toLowerCase()) ||
disease.label.toLowerCase().includes(searchQuery.toLowerCase()) ||
disease.summary.toLowerCase().includes(searchQuery.toLowerCase()) ||
disease.symptoms.some((s) => s.toLowerCase().includes(searchQuery.toLowerCase()));
const matchesRisk = riskFilter === 'all' || disease.riskLevel === riskFilter; const matchesRisk = riskFilter === 'all' || disease.riskLevel === riskFilter;
return matchesSearch && matchesRisk; return matchesSearch && matchesRisk;
}); });
return ( return (
<main className="min-h-screen px-6 py-8"> <main className="min-h-screen px-6 py-8 bg-[#ECF4E8]">
<div className="mx-auto max-w-6xl space-y-8"> <div className="mx-auto max-w-6xl space-y-8">
<header className="space-y-4"> <header className="space-y-4">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div> <div className="flex items-center gap-4">
<h1 className="text-3xl font-bold tracking-tight">Katalog Penyakit</h1> <Button asChild variant="ghost" className="p-2">
<p className="mt-2 text-muted-foreground"> <Link to="/dashboard">
Pelajari tentang penyakit daun jagung dan cara penanganannya <ArrowLeft className="h-5 w-5" />
</p> </Link>
</Button>
<div>
<p className="text-sm font-medium text-primary">Edukasi Penyakit</p>
<h1 className="text-3xl font-bold tracking-tight">Katalog Penyakit</h1>
</div>
</div> </div>
<Button asChild variant="outline">
<Link to="/dashboard">Kembali ke Dashboard</Link>
</Button>
</div> </div>
</header> </header>
<div className="space-y-4"> {/* Filters */}
<div className="flex flex-col gap-4 md:flex-row md:items-end"> <div className="flex flex-col gap-4 md:flex-row md:items-end">
<div className="flex-1"> <div className="flex-1">
<label htmlFor="search" className="block text-sm font-medium mb-2"> <label htmlFor="search" className="block text-sm font-medium mb-2">
Cari penyakit Cari penyakit
</label> </label>
<div className="relative">
<AlertCircle className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
<input <input
id="search" id="search"
type="text" type="text"
placeholder="Cari berdasarkan nama atau gejala..." placeholder="Cari berdasarkan nama atau gejala..."
value={searchQuery} value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)} onChange={(e) => setSearchQuery(e.target.value)}
className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm" className="w-full rounded-md border border-border bg-background pl-10 pr-3 py-2 text-sm"
/> />
</div> </div>
<div> </div>
<label htmlFor="risk-filter" className="block text-sm font-medium mb-2"> <div>
Filter risiko <label htmlFor="risk-filter" className="block text-sm font-medium mb-2">
</label> Filter risiko
<select </label>
id="risk-filter" <select
value={riskFilter} id="risk-filter"
onChange={(e) => setRiskFilter(e.target.value as RiskLevel | 'all')} value={riskFilter}
className="rounded-md border border-border bg-background px-3 py-2 text-sm" onChange={(e) => {
> const v = e.target.value as RiskLevel | 'all';
<option value="all">Semua Risiko</option> setRiskFilter(v);
<option value="low">Risiko Rendah</option> const next = new URLSearchParams(searchParams);
<option value="medium">Risiko Sedang</option> if (v === 'all') next.delete('risk');
<option value="high">Risiko Tinggi</option> else next.set('risk', v);
</select> setSearchParams(next);
</div> }}
className="rounded-md border border-border bg-background px-3 py-2 text-sm"
>
<option value="all">Semua Risiko</option>
<option value="low">Risiko Rendah</option>
<option value="medium">Risiko Sedang</option>
<option value="high">Risiko Tinggi</option>
</select>
</div> </div>
</div> </div>
@@ -97,9 +122,59 @@ export function CatalogPage() {
)} )}
{!isLoading && !error && filteredDiseases.length > 0 && ( {!isLoading && !error && filteredDiseases.length > 0 && (
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3"> <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
{filteredDiseases.map((disease) => ( {filteredDiseases.map((disease) => (
<DiseaseCard key={disease.slug} disease={disease} /> <Link
key={disease.slug}
to={`/catalog/${disease.slug}`}
className="block transition-transform hover:scale-[1.03]"
>
<Card className="h-full rounded-2xl bg-white shadow-sm hover:shadow-md">
<CardContent className="p-5 space-y-4">
<div className="flex items-start justify-between gap-2">
<div>
<h3 className="text-lg font-bold text-[#214B11]">
{disease.commonName}
</h3>
<p className="text-sm text-slate-400 italic">
{disease.label}
</p>
</div>
<RiskBadge level={disease.riskLevel} />
</div>
<p className="text-sm text-muted-foreground line-clamp-3">
{disease.summary}
</p>
{disease.symptoms.length > 0 && (
<div>
<h4 className="text-xs font-semibold text-muted-foreground mb-1">
Gejala:
</h4>
<ul className="space-y-1">
{disease.symptoms.slice(0, 2).map((symptom, index) => (
<li key={index} className="text-xs text-muted-foreground flex items-start gap-1.5">
<span className="text-primary mt-0.5">•</span>
{symptom}
</li>
))}
</ul>
</div>
)}
<div className="flex items-center justify-between pt-2 border-t">
<div
className="h-2.5 w-2.5 rounded-full"
style={{ backgroundColor: disease.accentColor }}
/>
<span className="text-xs text-primary font-medium">
Lihat detail →
</span>
</div>
</CardContent>
</Card>
</Link>
))} ))}
</div> </div>
)} )}
apps/web/src/pages/dashboard-page.tsx
+46 -39
View File
@@ -30,6 +30,7 @@ export function DashboardPage() {
name: d.commonName, name: d.commonName,
sci: d.label, sci: d.label,
color: d.accentColor, color: d.accentColor,
slug: d.slug,
})), })),
[diseases] [diseases]
); );
@@ -156,26 +157,12 @@ export function DashboardPage() {
perkembangan dan hasil deteksi penyakit daun jagung perkembangan dan hasil deteksi penyakit daun jagung
</p> </p>
</div> </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>
{/* Total Diagnoses — the actual count from diagnoses table */}
<Card> <Card>
<CardHeader className="pb-2"> <CardHeader className="pb-2">
<CardTitle className="text-sm font-medium text-muted-foreground"> <CardTitle className="text-sm font-medium text-muted-foreground">
Total Diagnosis Total Diagnosa
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>
<CardContent className="h-full flex flex-col justify-start pt-2"> <CardContent className="h-full flex flex-col justify-start pt-2">
@@ -188,6 +175,7 @@ export function DashboardPage() {
</CardContent> </CardContent>
</Card> </Card>
{/* Menunggu Review */}
<Card> <Card>
<CardHeader className="pb-2"> <CardHeader className="pb-2">
<CardTitle className="text-sm font-medium text-muted-foreground"> <CardTitle className="text-sm font-medium text-muted-foreground">
@@ -204,18 +192,36 @@ export function DashboardPage() {
</CardContent> </CardContent>
</Card> </Card>
{/* Diagnosa Gagal */}
<Card> <Card>
<CardHeader className="pb-2"> <CardHeader className="pb-2">
<CardTitle className="text-sm font-medium text-muted-foreground"> <CardTitle className="text-sm font-medium text-muted-foreground">
Risiko Tinggi Gagal
</CardTitle>
</CardHeader>
<CardContent className="h-full flex flex-col justify-start pt-2">
<div className="text-3xl font-bold text-red-600">
—
</div>
<Link to="/diagnoses?status=failed" className="text-red-600 ml-auto hover:underline">
Lihat daftar
</Link>
</CardContent>
</Card>
{/* Risiko Tinggi — catalog count, link to catalog filtered */}
<Card>
<CardHeader className="pb-2">
<CardTitle className="text-sm font-medium text-muted-foreground">
Kategori Risiko Tinggi
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>
<CardContent className="h-full flex flex-col justify-start pt-2"> <CardContent className="h-full flex flex-col justify-start pt-2">
<div className="text-3xl font-bold text-red-600"> <div className="text-3xl font-bold text-red-600">
{summary.riskDistribution.high} {summary.riskDistribution.high}
</div> </div>
<Link to="/diagnoses?risk=high" className="text-red-600 ml-auto hover:underline"> <Link to="/catalog?risk=high" className="text-red-600 ml-auto hover:underline">
Lihat daftar Lihat pustaka
</Link> </Link>
</CardContent> </CardContent>
</Card> </Card>
@@ -262,7 +268,7 @@ export function DashboardPage() {
</div> </div>
</section> </section>
{/* Diseases quick access - now API-driven */} {/* Diseases quick access - now clickable, link to catalog/:slug */}
<section className="space-y-4"> <section className="space-y-4">
<div className="mb-2 flex items-start justify-between"> <div className="mb-2 flex items-start justify-between">
<div> <div>
@@ -288,27 +294,28 @@ export function DashboardPage() {
) : ( ) : (
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4"> <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
{diseasesQuick.map((d) => ( {diseasesQuick.map((d) => (
<Card <Link key={d.slug} to={`/catalog/${d.slug}`}>
key={d.name} <Card
className="rounded-2xl bg-white p-4 shadow-sm h-full" className="rounded-2xl bg-white p-4 shadow-sm h-full transition-transform hover:scale-[1.03] hover:shadow-md cursor-pointer"
> >
<CardContent className="h-full p-4 flex flex-col justify-between"> <CardContent className="h-full p-4 flex flex-col justify-between">
<div className="flex items-start gap-3"> <div className="flex items-start gap-3">
<div <div
className="mt-1 h-3 w-3 rounded-full" className="mt-1 h-3 w-3 rounded-full shrink-0"
style={{ backgroundColor: d.color }} style={{ backgroundColor: d.color }}
/> />
<div> <div>
<div className="text-sm font-bold text-[#214B11]"> <div className="text-sm font-bold text-[#214B11]">
{d.name} {d.name}
</div> </div>
<div className="text-xs text-slate-400 italic mt-1"> <div className="text-xs text-slate-400 italic mt-1">
{d.sci} {d.sci}
</div>
</div> </div>
</div> </div>
</div> </CardContent>
</CardContent> </Card>
</Card> </Link>
))} ))}
</div> </div>
)} )}