Implement fullstack education catalog with disease detail pages, API routes, and shared types

- Add disease detail page component with data fetching and error handling - Create shared types for diseases and classifications - Implement API routes for diseases, classifications, and dashboard summary - Develop reusable components for risk badge and disease card - Build catalog page with search and filter functionality - Update dashboard page with data-backed summary and manual classification form - Register new routes in the web application - Ensure type safety and consistency across shared modules
2026-05-22 14:26:13 +00:00
parent d0c17d67b2
commit 84c1f46841
24 changed files with 2378 additions and 54 deletions
@@ -0,0 +1,109 @@
+import { useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { Link } from 'react-router-dom';
+import type { RiskLevel } from '@zeavis/shared';
+import { Button } from '@/components/ui/button';
+import { Card } from '@/components/ui/card';
+import { DiseaseCard } from '@/components/disease-card';
+import { apiClient } from '@/lib/api-client';
+
+export function CatalogPage() {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [riskFilter, setRiskFilter] = useState<RiskLevel | 'all'>('all');
+
+  const { data: diseases, isLoading, error } = useQuery({
+    queryKey: ['diseases'],
+    queryFn: () => apiClient.getDiseases(),
+  });
+
+  const filteredDiseases = (diseases || []).filter((disease) => {
+    const matchesSearch =
+      disease.commonName.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      disease.label.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      disease.summary.toLowerCase().includes(searchQuery.toLowerCase());
+
+    const matchesRisk = riskFilter === 'all' || disease.riskLevel === riskFilter;
+
+    return matchesSearch && matchesRisk;
+  });
+
+  return (
+    <main className="min-h-screen px-6 py-8">
+      <div className="mx-auto max-w-6xl space-y-8">
+        <header className="space-y-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <h1 className="text-3xl font-bold tracking-tight">Katalog Penyakit</h1>
+              <p className="mt-2 text-muted-foreground">
+                Pelajari tentang penyakit daun jagung dan cara penanganannya
+              </p>
+            </div>
+            <Button asChild variant="outline">
+              <Link to="/dashboard">Kembali ke Dashboard</Link>
+            </Button>
+          </div>
+        </header>
+
+        <div className="space-y-4">
+          <div className="flex flex-col gap-4 md:flex-row md:items-end">
+            <div className="flex-1">
+              <label htmlFor="search" className="block text-sm font-medium mb-2">
+                Cari penyakit
+              </label>
+              <input
+                id="search"
+                type="text"
+                placeholder="Cari berdasarkan nama atau gejala..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm"
+              />
+            </div>
+            <div>
+              <label htmlFor="risk-filter" className="block text-sm font-medium mb-2">
+                Filter risiko
+              </label>
+              <select
+                id="risk-filter"
+                value={riskFilter}
+                onChange={(e) => setRiskFilter(e.target.value as RiskLevel | 'all')}
+                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>
+
+        {isLoading && (
+          <Card className="p-8 text-center text-muted-foreground">
+            Memuat katalog...
+          </Card>
+        )}
+
+        {error && (
+          <Card className="p-8 text-center text-red-600">
+            Katalog belum tersedia
+          </Card>
+        )}
+
+        {!isLoading && !error && filteredDiseases.length === 0 && (
+          <Card className="p-8 text-center text-muted-foreground">
+            Tidak ada penyakit yang cocok dengan filter ini.
+          </Card>
+        )}
+
+        {!isLoading && !error && filteredDiseases.length > 0 && (
+          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+            {filteredDiseases.map((disease) => (
+              <DiseaseCard key={disease.slug} disease={disease} />
+            ))}
+          </div>
+        )}
+      </div>
+    </main>
+  );
+}