Merge branch 'main' of https://github.com/ATLAS-PJK-GM007/ZeaVis-Edu into selly/frontend
This commit is contained in:
seriouselly
@@ -1,80 +1,95 @@
|
||||
import { useState } from 'react';
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Link, useSearchParams } from 'react-router-dom';
|
||||
import { AlertCircle } from 'lucide-react';
|
||||
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 { Card, CardContent } from '@/components/ui/card';
|
||||
import { RiskBadge } from '@/components/risk-badge';
|
||||
import { apiClient } from '@/lib/api-client';
|
||||
|
||||
export function CatalogPage() {
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
const initialRisk = searchParams.get('risk') as RiskLevel | null;
|
||||
|
||||
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({
|
||||
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 filteredDiseases = (diseases || [])
|
||||
.sort((a, b) => a.displayOrder - b.displayOrder)
|
||||
.filter((disease) => {
|
||||
const matchesSearch =
|
||||
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 (
|
||||
<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-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<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 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>
|
||||
{/* Filters */}
|
||||
<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>
|
||||
<div className="relative">
|
||||
<AlertCircle className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
||||
<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"
|
||||
className="w-full rounded-md border border-border bg-background pl-10 pr-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>
|
||||
<label htmlFor="risk-filter" className="block text-sm font-medium mb-2">
|
||||
Filter risiko
|
||||
</label>
|
||||
<select
|
||||
id="risk-filter"
|
||||
value={riskFilter}
|
||||
onChange={(e) => {
|
||||
const v = e.target.value as RiskLevel | 'all';
|
||||
setRiskFilter(v);
|
||||
const next = new URLSearchParams(searchParams);
|
||||
if (v === 'all') next.delete('risk');
|
||||
else next.set('risk', v);
|
||||
setSearchParams(next);
|
||||
}}
|
||||
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>
|
||||
|
||||
@@ -97,13 +112,62 @@ export function CatalogPage() {
|
||||
)}
|
||||
|
||||
{!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) => (
|
||||
<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 flex-wrap items-start justify-between gap-2">
|
||||
<div className="min-w-0">
|
||||
<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>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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,25 @@ 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,
|
||||
slug: d.slug,
|
||||
})),
|
||||
[diseases]
|
||||
);
|
||||
|
||||
const missionCards = [
|
||||
{
|
||||
@@ -47,299 +66,283 @@ 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="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 text-sm ml-auto hover:underline"
|
||||
>
|
||||
Lihat daftar
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<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 text-sm ml-auto hover:underline"
|
||||
>
|
||||
Lihat daftar
|
||||
</Link>
|
||||
</CardContent>
|
||||
</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 text-sm 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 text-sm 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">
|
||||
<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 */}
|
||||
<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 hover:underline"
|
||||
>
|
||||
Lihat Pustaka <ChevronRight className="w-4 h-4" />
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<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="font-bold text-[#214B11]">
|
||||
{d.name}
|
||||
</div>
|
||||
<div className="text-sm text-slate-400 italic mt-1">
|
||||
{d.sci}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</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>
|
||||
<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-white hover:bg-[#1E8A2A]/90 hover:text-white px-6 py-6 text-lg font-bold text-[#214B11]"
|
||||
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" />
|
||||
Mulai Scan Sekarang
|
||||
Scan Daun Jagung
|
||||
</Link>
|
||||
</Button>
|
||||
<Button
|
||||
asChild
|
||||
variant="outline"
|
||||
className="px-6 py-6 text-lg font-bold text-white hover:bg-[#1E8A2A]"
|
||||
></Button>
|
||||
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>
|
||||
</main>
|
||||
</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="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>
|
||||
|
||||
{/* Total Diagnoses — the actual count from diagnoses table */}
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm font-medium text-muted-foreground">
|
||||
Total Diagnosa
|
||||
</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>
|
||||
|
||||
{/* Menunggu Review */}
|
||||
<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>
|
||||
|
||||
{/* Diagnosa Gagal */}
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm font-medium text-muted-foreground">
|
||||
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>
|
||||
</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="/catalog?risk=high" className="text-red-600 ml-auto hover:underline">
|
||||
Lihat pustaka
|
||||
</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">
|
||||
<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 clickable, link to catalog/:slug */}
|
||||
<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) => (
|
||||
<Link key={d.slug} to={`/catalog/${d.slug}`}>
|
||||
<Card
|
||||
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">
|
||||
<div className="flex items-start gap-3">
|
||||
<div
|
||||
className="mt-1 h-3 w-3 rounded-full shrink-0"
|
||||
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>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{/* 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>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,19 +1,40 @@
|
||||
import { useMemo, useState } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { Link, useSearchParams } from "react-router-dom";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { DiagnosisStatusBadge } from "@/components/diagnosis-status-badge";
|
||||
import { RiskBadge } from "@/components/risk-badge";
|
||||
import { apiClient } from "@/lib/api-client";
|
||||
import type { DiagnosisStatus, RiskLevel } from "@zeavis/shared";
|
||||
|
||||
const STATUS_OPTIONS: { value: "all" | DiagnosisStatus; label: string }[] = [
|
||||
{ value: "all", label: "Semua" },
|
||||
{ value: "ai_verified", label: "Terverifikasi AI" },
|
||||
{ value: "needs_review", label: "Menunggu Review" },
|
||||
{ value: "expert_verified", label: "Diverifikasi Pakar" },
|
||||
{ value: "expert_corrected", label: "Dikoreksi Pakar" },
|
||||
{ value: "failed", label: "Gagal" },
|
||||
];
|
||||
|
||||
const RISK_OPTIONS: { value: "all" | RiskLevel; label: string }[] = [
|
||||
{ value: "all", label: "Semua Risiko" },
|
||||
{ value: "high", label: "Risiko Tinggi" },
|
||||
{ value: "medium", label: "Risiko Sedang" },
|
||||
{ value: "low", label: "Risiko Rendah" },
|
||||
];
|
||||
|
||||
export function DiagnosesPage() {
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
const initialStatus = searchParams.get("status") as DiagnosisStatus | null;
|
||||
const initialRisk = searchParams.get("risk") as RiskLevel | null;
|
||||
|
||||
const [statusFilter, setStatusFilter] = useState<
|
||||
"all" | "needs_review" | "verified" | "failed"
|
||||
>("all");
|
||||
"all" | DiagnosisStatus
|
||||
>(initialStatus ?? "all");
|
||||
const [riskFilter, setRiskFilter] = useState<
|
||||
"all" | "high" | "medium" | "low"
|
||||
>("all");
|
||||
"all" | RiskLevel
|
||||
>(initialRisk ?? "all");
|
||||
|
||||
const query = useQuery({
|
||||
queryKey: ["diagnoses"],
|
||||
@@ -32,114 +53,148 @@ export function DiagnosesPage() {
|
||||
});
|
||||
}, [diagnoses, statusFilter, riskFilter]);
|
||||
|
||||
const handleStatusChange = (value: string) => {
|
||||
const v = value as "all" | DiagnosisStatus;
|
||||
setStatusFilter(v);
|
||||
const next = new URLSearchParams(searchParams);
|
||||
if (v === "all") next.delete("status");
|
||||
else next.set("status", v);
|
||||
setSearchParams(next);
|
||||
};
|
||||
|
||||
const handleRiskChange = (value: string) => {
|
||||
const v = value as "all" | RiskLevel;
|
||||
setRiskFilter(v);
|
||||
const next = new URLSearchParams(searchParams);
|
||||
if (v === "all") next.delete("risk");
|
||||
else next.set("risk", v);
|
||||
setSearchParams(next);
|
||||
};
|
||||
|
||||
return (
|
||||
<main className="min-h-screen px-6 py-8">
|
||||
<div className="mx-auto max-w-6xl space-y-6">
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-primary">
|
||||
Manajemen Diagnosis
|
||||
</p>
|
||||
<h1 className="text-3xl font-bold">Daftar Diagnosis</h1>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<Link to="/dashboard">
|
||||
<Button variant="outline">Dashboard</Button>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-primary">
|
||||
Manajemen Diagnosis
|
||||
</p>
|
||||
<h1 className="text-3xl font-bold">Daftar Diagnosis</h1>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<Button asChild variant="outline">
|
||||
<Link to="/scan">Scan Baru</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardContent className="flex flex-col gap-4 p-4">
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
<label className="text-sm font-medium">Status</label>
|
||||
<select
|
||||
value={statusFilter}
|
||||
onChange={(e) => setStatusFilter(e.target.value as any)}
|
||||
className="rounded-md border border-border bg-background px-2 py-1"
|
||||
>
|
||||
<option value="all">All</option>
|
||||
<option value="needs_review">Needs review</option>
|
||||
<option value="verified">Verified</option>
|
||||
<option value="failed">Failed</option>
|
||||
</select>
|
||||
<Card>
|
||||
<CardContent className="flex flex-col gap-4 p-4">
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
<label className="text-sm font-medium">Status</label>
|
||||
<select
|
||||
value={statusFilter}
|
||||
onChange={(e) => handleStatusChange(e.target.value)}
|
||||
className="rounded-md border border-border bg-background px-3 py-2 text-sm"
|
||||
>
|
||||
{STATUS_OPTIONS.map((opt) => (
|
||||
<option key={opt.value} value={opt.value}>
|
||||
{opt.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
<label className="text-sm font-medium">Risiko</label>
|
||||
<select
|
||||
value={riskFilter}
|
||||
onChange={(e) => setRiskFilter(e.target.value as any)}
|
||||
className="rounded-md border border-border bg-background px-2 py-1"
|
||||
>
|
||||
<option value="all">All</option>
|
||||
<option value="high">High</option>
|
||||
<option value="medium">Medium</option>
|
||||
<option value="low">Low</option>
|
||||
</select>
|
||||
<label className="text-sm font-medium">Risiko</label>
|
||||
<select
|
||||
value={riskFilter}
|
||||
onChange={(e) => handleRiskChange(e.target.value)}
|
||||
className="rounded-md border border-border bg-background px-3 py-2 text-sm"
|
||||
>
|
||||
{RISK_OPTIONS.map((opt) => (
|
||||
<option key={opt.value} value={opt.value}>
|
||||
{opt.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
<div className="ml-auto text-sm text-muted-foreground">
|
||||
Total: {filtered.length}
|
||||
</div>
|
||||
<div className="ml-auto text-sm text-muted-foreground">
|
||||
Total: {filtered.length}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{query.isLoading ? (
|
||||
<div className="p-6 text-center text-muted-foreground">
|
||||
Memuat diagnosis...
|
||||
</div>
|
||||
) : query.isError ? (
|
||||
<div className="p-6 text-center text-red-600">
|
||||
Gagal memuat diagnosis
|
||||
</div>
|
||||
) : filtered.length === 0 ? (
|
||||
<div className="p-6 text-center text-muted-foreground">
|
||||
{query.isLoading ? (
|
||||
<div className="py-12 text-center text-muted-foreground">
|
||||
Memuat diagnosis...
|
||||
</div>
|
||||
) : query.isError ? (
|
||||
<div className="py-12 text-center text-red-600">
|
||||
Gagal memuat diagnosis
|
||||
</div>
|
||||
) : filtered.length === 0 ? (
|
||||
<div className="py-12 text-center">
|
||||
<p className="text-muted-foreground">
|
||||
Tidak ada diagnosis sesuai filter
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
{filtered.map((d) => (
|
||||
<Card key={d.id} className="h-full">
|
||||
<CardContent className="flex gap-4 p-4 items-start">
|
||||
<img
|
||||
src={d.imageUrl}
|
||||
alt="Daun"
|
||||
className="h-24 w-24 rounded-md object-cover"
|
||||
/>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold">
|
||||
{d.disease?.commonName ?? "Unknown"}
|
||||
</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{d.predictedDiseaseSlug ?? ""}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col items-end gap-1">
|
||||
<DiagnosisStatusBadge status={d.status} />
|
||||
<RiskBadge level={d.disease?.riskLevel ?? "low"} />
|
||||
</div>
|
||||
</p>
|
||||
{diagnoses.length === 0 && (
|
||||
<p className="mt-2 text-sm text-muted-foreground">
|
||||
Mulai dengan{" "}
|
||||
<Link to="/scan" className="text-primary underline">
|
||||
melakukan scan daun
|
||||
</Link>
|
||||
.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
{filtered.map((d) => (
|
||||
<Card key={d.id} className="h-full">
|
||||
<CardContent className="flex gap-4 p-4 items-start">
|
||||
<img
|
||||
src={d.imageUrl}
|
||||
alt="Daun"
|
||||
className="h-24 w-24 rounded-md object-cover bg-muted"
|
||||
/>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<div className="min-w-0">
|
||||
<h3 className="text-lg font-semibold truncate">
|
||||
{d.disease?.commonName ?? "Diagnosis gagal"}
|
||||
</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{d.disease?.label ?? d.predictedDiseaseSlug}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-3 flex items-center justify-between gap-4">
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{new Date(d.createdAt).toLocaleString("id-ID")}
|
||||
</div>
|
||||
<Link
|
||||
to={`/diagnoses/${d.id}`}
|
||||
className="text-emerald-600 font-semibold"
|
||||
>
|
||||
Lihat detail
|
||||
</Link>
|
||||
<div className="flex flex-col items-end gap-1 shrink-0">
|
||||
<DiagnosisStatusBadge status={d.status} />
|
||||
<RiskBadge level={d.disease?.riskLevel ?? "low"} />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<div className="mt-2 flex items-center justify-between gap-4">
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{new Date(d.createdAt).toLocaleString("id-ID")}
|
||||
{d.confidence !== null && (
|
||||
<span className="ml-2">
|
||||
• {(d.confidence * 100).toFixed(0)}%
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<Link
|
||||
to={`/diagnoses/${d.id}`}
|
||||
className="text-emerald-600 font-semibold text-sm shrink-0"
|
||||
>
|
||||
Lihat detail
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { useParams, Link } from 'react-router-dom';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { isDiseaseSlug } from '@zeavis/shared';
|
||||
import { ArrowLeft, BookOpen, AlertCircle } from 'lucide-react';
|
||||
import { ArrowLeft, AlertCircle, BookOpen } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { RiskBadge } from '@/components/risk-badge';
|
||||
@@ -20,37 +20,37 @@ export function DiseaseDetailPage() {
|
||||
|
||||
if (!validatedSlug || error || (!isLoading && !disease)) {
|
||||
return (
|
||||
<main className="min-h-screen px-6 py-8">
|
||||
<div className="mx-auto max-w-4xl">
|
||||
<Button asChild variant="ghost" className="mb-8">
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<Button asChild variant="ghost">
|
||||
<Link to="/catalog">
|
||||
<ArrowLeft className="mr-2 h-4 w-4" />
|
||||
Kembali ke Katalog
|
||||
</Link>
|
||||
</Button>
|
||||
<Card className="p-8 text-center">
|
||||
<p className="text-muted-foreground">Materi tidak ditemukan</p>
|
||||
</Card>
|
||||
</div>
|
||||
</main>
|
||||
<Card className="p-8 text-center">
|
||||
<p className="text-muted-foreground">Materi tidak ditemukan</p>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<main className="min-h-screen px-6 py-8">
|
||||
<div className="mx-auto max-w-4xl">
|
||||
<Button asChild variant="ghost" className="mb-8">
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<Button asChild variant="ghost">
|
||||
<Link to="/catalog">
|
||||
<ArrowLeft className="mr-2 h-4 w-4" />
|
||||
Kembali ke Katalog
|
||||
</Link>
|
||||
</Button>
|
||||
<Card className="p-8 text-center">
|
||||
<p className="text-muted-foreground">Memuat materi...</p>
|
||||
</Card>
|
||||
</div>
|
||||
</main>
|
||||
<Card className="p-8 text-center">
|
||||
<p className="text-muted-foreground">Memuat materi...</p>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -59,88 +59,86 @@ export function DiseaseDetailPage() {
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="min-h-screen px-6 py-8">
|
||||
<div className="mx-auto max-w-4xl space-y-8">
|
||||
<div className="flex items-center justify-between">
|
||||
<Button asChild variant="ghost">
|
||||
<Link to="/catalog">
|
||||
<ArrowLeft className="mr-2 h-4 w-4" />
|
||||
Kembali ke Katalog
|
||||
</Link>
|
||||
</Button>
|
||||
<Button asChild variant="outline">
|
||||
<Link to="/dashboard">
|
||||
<BookOpen className="mr-2 h-4 w-4" />
|
||||
Dashboard
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<h1 className="text-4xl font-bold tracking-tight">{disease.commonName}</h1>
|
||||
<p className="mt-2 text-lg text-muted-foreground">{disease.label}</p>
|
||||
</div>
|
||||
<RiskBadge level={disease.riskLevel} />
|
||||
</div>
|
||||
<p className="text-lg leading-relaxed">{disease.summary}</p>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Deskripsi</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="leading-relaxed text-muted-foreground">{disease.description}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Gejala</CardTitle>
|
||||
<CardDescription>Tanda-tanda yang perlu diperhatikan</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ul className="space-y-3">
|
||||
{disease.symptoms.map((symptom, index) => (
|
||||
<li key={index} className="flex gap-3">
|
||||
<AlertCircle className="h-5 w-5 flex-shrink-0 text-primary mt-0.5" />
|
||||
<span className="text-muted-foreground">{symptom}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Rekomendasi Penanganan</CardTitle>
|
||||
<CardDescription>Langkah-langkah untuk mengendalikan penyakit</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ol className="space-y-3">
|
||||
{disease.recommendations.map((recommendation, index) => (
|
||||
<li key={index} className="flex gap-3">
|
||||
<span className="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-primary text-xs font-semibold text-primary-foreground">
|
||||
{index + 1}
|
||||
</span>
|
||||
<span className="text-muted-foreground pt-0.5">{recommendation}</span>
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div className="flex gap-3 pt-4">
|
||||
<Button asChild className="flex-1">
|
||||
<Link to="/catalog">Lihat Katalog Lengkap</Link>
|
||||
</Button>
|
||||
<Button asChild variant="outline" className="flex-1">
|
||||
<Link to="/dashboard">Kembali ke Dashboard</Link>
|
||||
</Button>
|
||||
</div>
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<Button asChild variant="ghost">
|
||||
<Link to="/catalog">
|
||||
<ArrowLeft className="mr-2 h-4 w-4" />
|
||||
Kembali ke Katalog
|
||||
</Link>
|
||||
</Button>
|
||||
<Button asChild variant="outline">
|
||||
<Link to="/dashboard">
|
||||
<BookOpen className="mr-2 h-4 w-4" />
|
||||
Dashboard
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<h1 className="text-4xl font-bold tracking-tight">{disease.commonName}</h1>
|
||||
<p className="mt-2 text-lg text-muted-foreground">{disease.label}</p>
|
||||
</div>
|
||||
<RiskBadge level={disease.riskLevel} />
|
||||
</div>
|
||||
<p className="text-lg leading-relaxed">{disease.summary}</p>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Deskripsi</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="leading-relaxed text-muted-foreground">{disease.description}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Gejala</CardTitle>
|
||||
<CardDescription>Tanda-tanda yang perlu diperhatikan</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ul className="space-y-3">
|
||||
{disease.symptoms.map((symptom, index) => (
|
||||
<li key={index} className="flex gap-3">
|
||||
<AlertCircle className="h-5 w-5 flex-shrink-0 text-primary mt-0.5" />
|
||||
<span className="text-muted-foreground">{symptom}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Rekomendasi Penanganan</CardTitle>
|
||||
<CardDescription>Langkah-langkah untuk mengendalikan penyakit</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ol className="space-y-3">
|
||||
{disease.recommendations.map((recommendation, index) => (
|
||||
<li key={index} className="flex gap-3">
|
||||
<span className="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-primary text-xs font-semibold text-primary-foreground">
|
||||
{index + 1}
|
||||
</span>
|
||||
<span className="text-muted-foreground pt-0.5">{recommendation}</span>
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div className="flex gap-3 pt-4">
|
||||
<Button asChild className="flex-1">
|
||||
<Link to="/catalog">Lihat Katalog Lengkap</Link>
|
||||
</Button>
|
||||
<Button asChild variant="outline" className="flex-1">
|
||||
<Link to="/dashboard">Kembali ke Dashboard</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { FormEvent, useMemo, useState } from 'react';
|
||||
import { Link, useSearchParams } from 'react-router-dom';
|
||||
import { useSearchParams } from 'react-router-dom';
|
||||
import { useMutation, useQueries, useQueryClient } from '@tanstack/react-query';
|
||||
import type { DiseaseSlug } from '@zeavis/shared';
|
||||
import { Button } from '@/components/ui/button';
|
||||
@@ -24,14 +24,18 @@ export function ExpertReviewsPage() {
|
||||
|
||||
const reviews = reviewsQuery.data || [];
|
||||
const diseases = diseasesQuery.data || [];
|
||||
const selected = useMemo(() => reviews.find((item) => item.id === selectedId) ?? reviews[0] ?? null, [reviews, selectedId]);
|
||||
const selected = useMemo(
|
||||
() => reviews.find((item) => item.id === selectedId) ?? reviews[0] ?? null,
|
||||
[reviews, selectedId],
|
||||
);
|
||||
|
||||
const mutation = useMutation({
|
||||
mutationFn: () => apiClient.reviewDiagnosis(selected!.id, {
|
||||
verdict,
|
||||
correctedDiseaseSlug: verdict === 'corrected' ? correctedDiseaseSlug || undefined : undefined,
|
||||
notes,
|
||||
}),
|
||||
mutationFn: () =>
|
||||
apiClient.reviewDiagnosis(selected!.id, {
|
||||
verdict,
|
||||
correctedDiseaseSlug: verdict === 'corrected' ? correctedDiseaseSlug || undefined : undefined,
|
||||
notes,
|
||||
}),
|
||||
onSuccess: () => {
|
||||
setNotes('');
|
||||
setVerdict('verified');
|
||||
@@ -47,231 +51,224 @@ export function ExpertReviewsPage() {
|
||||
await mutation.mutateAsync();
|
||||
}
|
||||
|
||||
const isLoading = reviewsQuery.isPending || diseasesQuery.isPending;
|
||||
|
||||
return (
|
||||
<main className="min-h-screen bg-background">
|
||||
<header className="border-b bg-card">
|
||||
<div className="mx-auto flex max-w-7xl items-center justify-between p-6">
|
||||
<h1 className="text-2xl font-bold">Expert Reviews</h1>
|
||||
<Link to="/dashboard">
|
||||
<Button variant="outline">Dashboard</Button>
|
||||
</Link>
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-primary">Review Pakar</p>
|
||||
<h1 className="text-3xl font-bold">Diagnosis Menunggu Review</h1>
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
|
||||
<div className="mx-auto max-w-7xl p-6">
|
||||
<div className="grid gap-6 lg:grid-cols-3">
|
||||
{/* Left: List of reviews */}
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="font-semibold">Diagnoses to Review</h2>
|
||||
<span className="rounded-full bg-muted px-2.5 py-0.5 text-xs font-medium">{reviews.length}</span>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
{reviewsQuery.isPending || diseasesQuery.isPending ? (
|
||||
<p className="text-sm text-muted-foreground">Loading reviews and diseases...</p>
|
||||
) : reviews.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">No diagnoses pending review</p>
|
||||
) : (
|
||||
reviews.map((review) => (
|
||||
<button
|
||||
key={review.id}
|
||||
type="button"
|
||||
onClick={() => setSearchParams({ diagnosis: review.id })}
|
||||
className={`w-full text-left transition ${
|
||||
selected?.id === review.id
|
||||
? 'ring-2 ring-primary'
|
||||
: 'hover:border-primary'
|
||||
}`}
|
||||
>
|
||||
<Card className="transition hover:border-primary">
|
||||
<CardContent className="flex gap-3 p-3">
|
||||
<img
|
||||
src={review.imageUrl}
|
||||
alt="Daun jagung"
|
||||
className="h-20 w-20 rounded-lg object-cover"
|
||||
/>
|
||||
<div className="min-w-0 flex-1 space-y-1">
|
||||
<div className="flex flex-wrap items-center justify-between gap-1">
|
||||
<h3 className="text-sm font-semibold">{review.disease?.commonName ?? 'Diagnosis gagal'}</h3>
|
||||
<DiagnosisStatusBadge status={review.status} className="text-xs" />
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{review.confidence === null ? 'Tidak ada confidence' : `${(review.confidence * 100).toFixed(1)}%`}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground">{new Date(review.createdAt).toLocaleString('id-ID')}</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</button>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
<div className="grid gap-6 lg:grid-cols-3">
|
||||
{/* Left: List of reviews */}
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="font-semibold">Daftar Diagnosis</h2>
|
||||
<span className="rounded-full bg-muted px-2.5 py-0.5 text-xs font-medium">{reviews.length}</span>
|
||||
</div>
|
||||
|
||||
{/* Right: Detail and form */}
|
||||
<div className="lg:col-span-2 space-y-6">
|
||||
{reviewsQuery.isPending || diseasesQuery.isPending ? (
|
||||
<Card>
|
||||
<CardContent className="p-6 text-center text-muted-foreground">
|
||||
Loading reviews and diseases...
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : selected ? (
|
||||
<>
|
||||
{/* Detail card */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>{selected.disease?.commonName ?? 'Diagnosis gagal'}</CardTitle>
|
||||
<CardDescription>
|
||||
{new Date(selected.createdAt).toLocaleString('id-ID')}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<img
|
||||
src={selected.imageUrl}
|
||||
alt={`Gambar daun jagung untuk ${selected.disease?.commonName ?? 'diagnosis'}`}
|
||||
className="h-64 w-full rounded-lg object-cover"
|
||||
/>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm font-medium">Status</span>
|
||||
<DiagnosisStatusBadge status={selected.status} />
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm font-medium">Confidence</span>
|
||||
<span className="text-sm">
|
||||
{selected.confidence === null ? 'N/A' : `${(selected.confidence * 100).toFixed(1)}%`}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Top predictions */}
|
||||
{selected.predictions.length > 0 && (
|
||||
<div className="space-y-2">
|
||||
<h4 className="text-sm font-medium">Top Predictions</h4>
|
||||
<div className="space-y-1">
|
||||
{selected.predictions.map((pred) => (
|
||||
<div key={pred.id} className="flex items-center justify-between text-sm">
|
||||
<span className="text-muted-foreground">{pred.modelLabel}</span>
|
||||
<span className="font-medium">{(pred.confidence * 100).toFixed(1)}%</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Review form */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">Expert Review</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
{/* Verdict selection */}
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium">Verdict</label>
|
||||
<div className="flex gap-3">
|
||||
<label htmlFor="verdict-verified" className="flex items-center gap-2">
|
||||
<input
|
||||
id="verdict-verified"
|
||||
type="radio"
|
||||
name="verdict"
|
||||
value="verified"
|
||||
checked={verdict === 'verified'}
|
||||
onChange={(e) => {
|
||||
setVerdict(e.target.value as 'verified' | 'corrected');
|
||||
setCorrectedDiseaseSlug('');
|
||||
}}
|
||||
className="h-4 w-4"
|
||||
/>
|
||||
<span className="text-sm">Verified</span>
|
||||
</label>
|
||||
<label htmlFor="verdict-corrected" className="flex items-center gap-2">
|
||||
<input
|
||||
id="verdict-corrected"
|
||||
type="radio"
|
||||
name="verdict"
|
||||
value="corrected"
|
||||
checked={verdict === 'corrected'}
|
||||
onChange={(e) => setVerdict(e.target.value as 'verified' | 'corrected')}
|
||||
className="h-4 w-4"
|
||||
/>
|
||||
<span className="text-sm">Corrected</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Disease selection (only if corrected) */}
|
||||
{verdict === 'corrected' && (
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="disease" className="text-sm font-medium">
|
||||
Correct Disease
|
||||
</label>
|
||||
<select
|
||||
id="disease"
|
||||
value={correctedDiseaseSlug}
|
||||
onChange={(e) => setCorrectedDiseaseSlug(e.target.value as DiseaseSlug | '')}
|
||||
required={verdict === 'corrected'}
|
||||
className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm"
|
||||
>
|
||||
<option value="">Select a disease...</option>
|
||||
{diseases.map((disease) => (
|
||||
<option key={disease.slug} value={disease.slug}>
|
||||
{disease.commonName}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Notes */}
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="notes" className="text-sm font-medium">
|
||||
Notes <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<textarea
|
||||
id="notes"
|
||||
value={notes}
|
||||
onChange={(e) => setNotes(e.target.value)}
|
||||
placeholder="Enter your review notes..."
|
||||
required
|
||||
className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
rows={4}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Submit button */}
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={mutation.isPending || (verdict === 'corrected' && !correctedDiseaseSlug) || !notes.trim()}
|
||||
className="w-full"
|
||||
>
|
||||
{mutation.isPending ? 'Submitting...' : 'Submit Review'}
|
||||
</Button>
|
||||
|
||||
{mutation.isError && (
|
||||
<p className="text-sm text-red-500">
|
||||
Error: {mutation.error instanceof Error ? mutation.error.message : 'Unknown error'}
|
||||
</p>
|
||||
)}
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</>
|
||||
<div className="space-y-2">
|
||||
{isLoading ? (
|
||||
<p className="text-sm text-muted-foreground">Memuat diagnosis...</p>
|
||||
) : reviews.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">Tidak ada diagnosis yang menunggu review</p>
|
||||
) : (
|
||||
<Card>
|
||||
<CardContent className="p-6 text-center text-muted-foreground">
|
||||
No diagnoses available for review
|
||||
</CardContent>
|
||||
</Card>
|
||||
reviews.map((review) => (
|
||||
<button
|
||||
key={review.id}
|
||||
type="button"
|
||||
onClick={() => setSearchParams({ diagnosis: review.id })}
|
||||
className={`w-full text-left transition ${
|
||||
selected?.id === review.id
|
||||
? 'ring-2 ring-primary'
|
||||
: 'hover:border-primary'
|
||||
}`}
|
||||
>
|
||||
<Card className="transition hover:border-primary">
|
||||
<CardContent className="flex gap-3 p-3">
|
||||
<img
|
||||
src={review.imageUrl}
|
||||
alt="Daun jagung"
|
||||
className="h-20 w-20 rounded-lg object-cover"
|
||||
/>
|
||||
<div className="min-w-0 flex-1 space-y-1">
|
||||
<div className="flex flex-wrap items-center justify-between gap-1">
|
||||
<h3 className="text-sm font-semibold">{review.disease?.commonName ?? 'Diagnosis gagal'}</h3>
|
||||
<DiagnosisStatusBadge status={review.status} className="text-xs" />
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{review.confidence === null ? 'Tidak ada confidence' : `${(review.confidence * 100).toFixed(1)}%`}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground">{new Date(review.createdAt).toLocaleString('id-ID')}</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</button>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right: Detail and form */}
|
||||
<div className="lg:col-span-2 space-y-6">
|
||||
{isLoading ? (
|
||||
<Card>
|
||||
<CardContent className="p-6 text-center text-muted-foreground">
|
||||
Memuat diagnosis...
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : selected ? (
|
||||
<>
|
||||
{/* Detail card */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>{selected.disease?.commonName ?? 'Diagnosis gagal'}</CardTitle>
|
||||
<CardDescription>
|
||||
{new Date(selected.createdAt).toLocaleString('id-ID')}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<img
|
||||
src={selected.imageUrl}
|
||||
alt={`Gambar daun jagung untuk ${selected.disease?.commonName ?? 'diagnosis'}`}
|
||||
className="h-64 w-full rounded-lg object-cover"
|
||||
/>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm font-medium">Status</span>
|
||||
<DiagnosisStatusBadge status={selected.status} />
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm font-medium">Confidence</span>
|
||||
<span className="text-sm">
|
||||
{selected.confidence === null ? 'N/A' : `${(selected.confidence * 100).toFixed(1)}%`}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{selected.predictions.length > 0 && (
|
||||
<div className="space-y-2">
|
||||
<h4 className="text-sm font-medium">Prediksi Teratas</h4>
|
||||
<div className="space-y-1">
|
||||
{selected.predictions.map((pred) => (
|
||||
<div key={pred.id} className="flex items-center justify-between text-sm">
|
||||
<span className="text-muted-foreground">{pred.modelLabel}</span>
|
||||
<span className="font-medium">{(pred.confidence * 100).toFixed(1)}%</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Review form */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">Review Pakar</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium">Keputusan</label>
|
||||
<div className="flex gap-3">
|
||||
<label htmlFor="verdict-verified" className="flex items-center gap-2">
|
||||
<input
|
||||
id="verdict-verified"
|
||||
type="radio"
|
||||
name="verdict"
|
||||
value="verified"
|
||||
checked={verdict === 'verified'}
|
||||
onChange={(e) => {
|
||||
setVerdict(e.target.value as 'verified' | 'corrected');
|
||||
setCorrectedDiseaseSlug('');
|
||||
}}
|
||||
className="h-4 w-4"
|
||||
/>
|
||||
<span className="text-sm">Terverifikasi</span>
|
||||
</label>
|
||||
<label htmlFor="verdict-corrected" className="flex items-center gap-2">
|
||||
<input
|
||||
id="verdict-corrected"
|
||||
type="radio"
|
||||
name="verdict"
|
||||
value="corrected"
|
||||
checked={verdict === 'corrected'}
|
||||
onChange={(e) => setVerdict(e.target.value as 'verified' | 'corrected')}
|
||||
className="h-4 w-4"
|
||||
/>
|
||||
<span className="text-sm">Dikoreksi</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{verdict === 'corrected' && (
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="disease" className="text-sm font-medium">
|
||||
Penyakit yang Benar
|
||||
</label>
|
||||
<select
|
||||
id="disease"
|
||||
value={correctedDiseaseSlug}
|
||||
onChange={(e) => setCorrectedDiseaseSlug(e.target.value as DiseaseSlug | '')}
|
||||
required={verdict === 'corrected'}
|
||||
className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm"
|
||||
>
|
||||
<option value="">Pilih penyakit...</option>
|
||||
{diseases.map((disease) => (
|
||||
<option key={disease.slug} value={disease.slug}>
|
||||
{disease.commonName}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="notes" className="text-sm font-medium">
|
||||
Catatan <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<textarea
|
||||
id="notes"
|
||||
value={notes}
|
||||
onChange={(e) => setNotes(e.target.value)}
|
||||
placeholder="Tulis catatan review Anda..."
|
||||
required
|
||||
className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
rows={4}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={mutation.isPending || (verdict === 'corrected' && !correctedDiseaseSlug) || !notes.trim()}
|
||||
className="w-full"
|
||||
>
|
||||
{mutation.isPending ? 'Mengirim...' : 'Kirim Review'}
|
||||
</Button>
|
||||
|
||||
{mutation.isError && (
|
||||
<p className="text-sm text-red-500">
|
||||
Error: {mutation.error instanceof Error ? mutation.error.message : 'Terjadi kesalahan'}
|
||||
</p>
|
||||
)}
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</>
|
||||
) : (
|
||||
<Card>
|
||||
<CardContent className="p-6 text-center text-muted-foreground">
|
||||
Tidak ada diagnosis yang tersedia untuk review
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,182 +1,95 @@
|
||||
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";
|
||||
import { useState } from "react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { DiseaseCard } from "@/components/disease-card";
|
||||
import { apiClient } from "@/lib/api-client";
|
||||
import type { RiskLevel } from "@zeavis/shared";
|
||||
|
||||
export function LibraryPage() {
|
||||
type Disease = (typeof mockDiseases)[number];
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [riskFilter, setRiskFilter] = useState<RiskLevel | "all">("all");
|
||||
|
||||
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 { data: diseases, isLoading, error } = useQuery({
|
||||
queryKey: ["diseases"],
|
||||
queryFn: () => apiClient.getDiseases(),
|
||||
});
|
||||
|
||||
const items = useMemo(() => {
|
||||
if (!filter) return mockDiseases;
|
||||
return mockDiseases.filter((d) =>
|
||||
d.name.toLowerCase().includes(filter.toLowerCase()),
|
||||
);
|
||||
}, [filter]);
|
||||
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="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 className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-primary">Edukasi Penyakit</p>
|
||||
<h1 className="text-3xl font-bold">Pustaka Penyakit</h1>
|
||||
</div>
|
||||
</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 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>
|
||||
|
||||
<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>
|
||||
{isLoading && (
|
||||
<div className="py-12 text-center text-muted-foreground">
|
||||
Memuat pustaka penyakit...
|
||||
</div>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<div className="py-12 text-center text-red-600">
|
||||
Gagal memuat pustaka penyakit
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!isLoading && !error && filteredDiseases.length === 0 && (
|
||||
<div className="py-12 text-center text-muted-foreground">
|
||||
Tidak ada penyakit yang cocok dengan filter ini.
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useEffect, useState } from "react";
|
||||
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";
|
||||
@@ -7,9 +7,6 @@ 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);
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useEffect, useState } from "react";
|
||||
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";
|
||||
@@ -7,9 +7,6 @@ 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);
|
||||
|
||||
@@ -1,9 +1,12 @@
|
||||
import React, { useRef, useState } from "react";
|
||||
import { useRef, useState } from "react";
|
||||
import { useNavigate, Link } from "react-router-dom";
|
||||
import { useMutation, useQueryClient, useQuery } from "@tanstack/react-query";
|
||||
import { apiClient } from "@/lib/api-client";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Modal } from "@/components/ui/modal";
|
||||
import { DiagnosisStatusBadge } from "@/components/diagnosis-status-badge";
|
||||
import type { DiagnosisRecord } from "@zeavis/shared";
|
||||
import { apiClient } from "@/lib/api-client";
|
||||
import {
|
||||
AlignCenter,
|
||||
Camera,
|
||||
@@ -16,6 +19,7 @@ import {
|
||||
|
||||
export function ScanPage() {
|
||||
const [fileName, setFileName] = useState<string | null>(null);
|
||||
const [previewUrl, setPreviewUrl] = useState<string | null>(null);
|
||||
const inputRef = useRef<HTMLInputElement | null>(null);
|
||||
const navigate = useNavigate();
|
||||
const queryClient = useQueryClient();
|
||||
@@ -24,16 +28,28 @@ export function ScanPage() {
|
||||
mutationFn: (file: File) => apiClient.createDiagnosis(file),
|
||||
onSuccess: (diagnosis) => {
|
||||
queryClient.invalidateQueries({ queryKey: ["diagnoses"] });
|
||||
// show preview modal instead of immediate navigation
|
||||
setDiagnosisPreview(diagnosis);
|
||||
setPreviewOpen(true);
|
||||
setFileName(null);
|
||||
setPreviewUrl(null);
|
||||
if (inputRef.current) inputRef.current.value = "";
|
||||
},
|
||||
});
|
||||
|
||||
const handleFile = (f?: File) => {
|
||||
if (!f) return;
|
||||
if (f.size > 5 * 1024 * 1024) {
|
||||
alert("Ukuran file melebihi batas 5MB");
|
||||
return;
|
||||
}
|
||||
setFileName(f.name);
|
||||
mutation.mutate(f);
|
||||
setPreviewUrl(URL.createObjectURL(f));
|
||||
};
|
||||
|
||||
const handleUpload = () => {
|
||||
const file = inputRef.current?.files?.[0];
|
||||
if (!file) return;
|
||||
mutation.mutate(file);
|
||||
};
|
||||
|
||||
const [previewOpen, setPreviewOpen] = useState(false);
|
||||
@@ -290,95 +306,120 @@ export function ScanPage() {
|
||||
setPreviewOpen(false);
|
||||
setDiagnosisPreview(null);
|
||||
}}
|
||||
title={diagnosisPreview?.predictedDiseaseSlug ?? "Hasil Diagnosis"}
|
||||
size="sm"
|
||||
title={diagnosisPreview?.disease?.commonName ?? "Hasil Diagnosis"}
|
||||
size="md"
|
||||
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"
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
setPreviewOpen(false);
|
||||
setDiagnosisPreview(null);
|
||||
}}
|
||||
>
|
||||
Tutup
|
||||
</button>
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => navigate(`/diagnoses/${diagnosisPreview.id}`)}
|
||||
className="bg-green-600 hover:bg-green-700"
|
||||
>
|
||||
Lihat Detail Lengkap
|
||||
</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 className="space-y-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<DiagnosisStatusBadge status={diagnosisPreview.status} />
|
||||
{diagnosisPreview.confidence !== null && (
|
||||
<span className="text-sm font-medium">
|
||||
Confidence: {(diagnosisPreview.confidence * 100).toFixed(1)}%
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{diagnosisPreview.disease && (
|
||||
<div>
|
||||
<h3 className="font-semibold text-lg">
|
||||
{diagnosisPreview.disease.commonName}
|
||||
</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{diagnosisPreview.disease.summary}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{diagnosisPreview.failureReason && (
|
||||
<div className="p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-600">
|
||||
{diagnosisPreview.failureReason}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{diagnosisPreview.predictions.length > 0 && (
|
||||
<div>
|
||||
<h4 className="text-sm font-medium mb-2">Semua Prediksi</h4>
|
||||
<div className="space-y-2">
|
||||
{diagnosisPreview.predictions
|
||||
.sort((a, b) => a.rank - b.rank)
|
||||
.map((pred) => (
|
||||
<div
|
||||
key={pred.id}
|
||||
className="flex items-center justify-between rounded-lg border p-2 text-sm"
|
||||
>
|
||||
<span>{pred.modelLabel}</span>
|
||||
<span className="font-semibold">
|
||||
{(pred.confidence * 100).toFixed(1)}%
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="pt-4 border-t">
|
||||
<h4 className="text-sm font-medium mb-2">
|
||||
Daftar Diagnosis Terbaru
|
||||
<h4 className="text-sm font-medium mb-3">
|
||||
Riwayat Diagnosis Terbaru
|
||||
</h4>
|
||||
{diagnosesQuery.isLoading && (
|
||||
<div className="text-sm text-muted-foreground">
|
||||
Memuat daftar...
|
||||
</div>
|
||||
)}
|
||||
{diagnosesQuery.isError && (
|
||||
<div className="text-sm text-red-600">
|
||||
Gagal memuat daftar diagnosis
|
||||
Memuat riwayat...
|
||||
</div>
|
||||
)}
|
||||
{!diagnosesQuery.isLoading && !diagnosesQuery.isError && (
|
||||
<div className="space-y-2">
|
||||
{(diagnosesQuery.data ?? []).slice(0, 5).map((d) => (
|
||||
<div
|
||||
key={d.id}
|
||||
className="flex items-center justify-between rounded-md p-2 hover:bg-muted"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<img
|
||||
src={d.imageUrl}
|
||||
alt="thumb"
|
||||
className="h-10 w-10 rounded object-cover"
|
||||
/>
|
||||
<div className="text-sm">
|
||||
<div className="font-medium">
|
||||
{d.disease?.commonName ?? d.predictedDiseaseSlug}
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
{new Date(d.createdAt).toLocaleString("id-ID")}
|
||||
{(diagnosesQuery.data ?? [])
|
||||
.slice(0, 5)
|
||||
.map((d) => (
|
||||
<div
|
||||
key={d.id}
|
||||
className="flex items-center justify-between rounded-md p-2 hover:bg-muted"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<img
|
||||
src={d.imageUrl}
|
||||
alt="thumb"
|
||||
className="h-10 w-10 rounded object-cover bg-muted"
|
||||
/>
|
||||
<div className="text-sm">
|
||||
<div className="font-medium">
|
||||
{d.disease?.commonName ?? "Unknown"}
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
{new Date(d.createdAt).toLocaleString("id-ID")}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Link
|
||||
to={`/diagnoses/${d.id}`}
|
||||
className="text-emerald-600 text-sm font-semibold"
|
||||
>
|
||||
Lihat
|
||||
</Link>
|
||||
</div>
|
||||
<Link
|
||||
to={`/diagnoses/${d.id}`}
|
||||
className="text-emerald-600 text-sm font-semibold"
|
||||
>
|
||||
Lihat
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user