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

feat: harmonize page headers to match Scan Tanaman title style

Browse Source
This commit is contained in:
seriouselly
2026-06-06 01:37:38 +07:00
parent 1b31ea31a2
commit 5129bbe958
4 changed files with 190 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/pages/catalog-page.tsx
+4 -2
View File
@@ -44,8 +44,10 @@ export function CatalogPage() {
<div className="space-y-6"> <div className="space-y-6">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div> <div>
<p className="text-sm font-medium text-primary">Edukasi Penyakit</p> <h1 className="text-2xl font-bold text-emerald-800">Pustaka Penyakit</h1>
<h1 className="text-3xl font-bold tracking-tight">Katalog Penyakit</h1> <p className="text-gray-500 mt-1 text-md">
Referensi lengkap penyakit dan kondisi daun jagung yang dapat dideteksi oleh sistem AI ZeaVis Edu
</p>
</div> </div>
</div> </div>
apps/web/src/pages/diagnoses-page.tsx
+60 -64
View File
@@ -75,10 +75,10 @@ export function DiagnosesPage() {
<div className="space-y-6"> <div className="space-y-6">
<div className="flex items-center justify-between gap-4"> <div className="flex items-center justify-between gap-4">
<div> <div>
<p className="text-sm font-medium text-primary"> <h1 className="text-2xl font-bold text-emerald-800">Diagnosa Tanaman</h1>
Manajemen Diagnosis <p className="text-gray-500 mt-1 text-md">
Lihat hasil diagnosa dari scan yang telah dilakukan
</p> </p>
<h1 className="text-3xl font-bold">Daftar Diagnosis</h1>
</div> </div>
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<Button asChild variant="outline"> <Button asChild variant="outline">
@@ -87,68 +87,66 @@ export function DiagnosesPage() {
</div> </div>
</div> </div>
<Card> <div className="flex flex-wrap items-center gap-3">
<CardContent className="flex flex-col gap-4 p-4"> <label className="text-sm font-medium">Status</label>
<div className="flex flex-wrap items-center gap-3"> <select
<label className="text-sm font-medium">Status</label> value={statusFilter}
<select onChange={(e) => handleStatusChange(e.target.value)}
value={statusFilter} className="rounded-md border border-border bg-background px-3 py-2 text-sm"
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}>
{STATUS_OPTIONS.map((opt) => ( {opt.label}
<option key={opt.value} value={opt.value}> </option>
{opt.label} ))}
</option> </select>
))}
</select>
<label className="text-sm font-medium">Risiko</label> <label className="text-sm font-medium">Risiko</label>
<select <select
value={riskFilter} value={riskFilter}
onChange={(e) => handleRiskChange(e.target.value)} onChange={(e) => handleRiskChange(e.target.value)}
className="rounded-md border border-border bg-background px-3 py-2 text-sm" className="rounded-md border border-border bg-background px-3 py-2 text-sm"
> >
{RISK_OPTIONS.map((opt) => ( {RISK_OPTIONS.map((opt) => (
<option key={opt.value} value={opt.value}> <option key={opt.value} value={opt.value}>
{opt.label} {opt.label}
</option> </option>
))} ))}
</select> </select>
<div className="ml-auto text-sm text-muted-foreground"> <div className="ml-auto text-sm text-muted-foreground">
Total: {filtered.length} Total: {filtered.length}
</div> </div>
</div> </div>
{query.isLoading ? ( {query.isLoading ? (
<div className="py-12 text-center text-muted-foreground"> <div className="py-12 text-center text-muted-foreground">
Memuat diagnosis... Memuat diagnosis...
</div> </div>
) : query.isError ? ( ) : query.isError ? (
<div className="py-12 text-center text-red-600"> <div className="py-12 text-center text-red-600">
Gagal memuat diagnosis Gagal memuat diagnosis
</div> </div>
) : filtered.length === 0 ? ( ) : filtered.length === 0 ? (
<div className="py-12 text-center"> <div className="py-12 text-center">
<p className="text-muted-foreground"> <p className="text-muted-foreground">
Tidak ada diagnosis sesuai filter Tidak ada diagnosis sesuai filter
</p> </p>
{diagnoses.length === 0 && ( {diagnoses.length === 0 && (
<p className="mt-2 text-sm text-muted-foreground"> <p className="mt-2 text-sm text-muted-foreground">
Mulai dengan{" "} Mulai dengan{" "}
<Link to="/scan" className="text-primary underline"> <Link to="/scan" className="text-primary underline">
melakukan scan daun melakukan scan daun
</Link> </Link>
. .
</p> </p>
)} )}
</div> </div>
) : ( ) : (
<div className="grid gap-4 md:grid-cols-2"> <div className="grid gap-6 md:grid-cols-2">
{filtered.map((d) => ( {filtered.map((d) => (
<Card key={d.id} className="h-full"> <Card key={d.id} className="h-full">
<CardContent className="flex gap-4 p-4 items-start"> <CardContent className="flex gap-4 p-4 items-start">
<img <img
src={d.imageUrl} src={d.imageUrl}
alt="Daun" alt="Daun"
@@ -192,8 +190,6 @@ export function DiagnosesPage() {
))} ))}
</div> </div>
)} )}
</CardContent>
</Card>
</div> </div>
); );
} }
apps/web/src/pages/expert-reviews-page.tsx
+121 -52
View File
@@ -1,24 +1,35 @@
import { FormEvent, useMemo, useState } from 'react'; import { FormEvent, useMemo, useState } from "react";
import { useSearchParams } from 'react-router-dom'; import { useSearchParams } from "react-router-dom";
import { useMutation, useQueries, useQueryClient } from '@tanstack/react-query'; import { useMutation, useQueries, useQueryClient } from "@tanstack/react-query";
import type { DiseaseSlug } from '@zeavis/shared'; import type { DiseaseSlug } from "@zeavis/shared";
import { Button } from '@/components/ui/button'; import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import {
import { DiagnosisStatusBadge } from '@/components/diagnosis-status-badge'; Card,
import { apiClient } from '@/lib/api-client'; CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { DiagnosisStatusBadge } from "@/components/diagnosis-status-badge";
import { apiClient } from "@/lib/api-client";
export function ExpertReviewsPage() { export function ExpertReviewsPage() {
const [searchParams, setSearchParams] = useSearchParams(); const [searchParams, setSearchParams] = useSearchParams();
const selectedId = searchParams.get('diagnosis'); const selectedId = searchParams.get("diagnosis");
const [verdict, setVerdict] = useState<'verified' | 'corrected'>('verified'); const [verdict, setVerdict] = useState<"verified" | "corrected">("verified");
const [correctedDiseaseSlug, setCorrectedDiseaseSlug] = useState<DiseaseSlug | ''>(''); const [correctedDiseaseSlug, setCorrectedDiseaseSlug] = useState<
const [notes, setNotes] = useState(''); DiseaseSlug | ""
>("");
const [notes, setNotes] = useState("");
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const [reviewsQuery, diseasesQuery] = useQueries({ const [reviewsQuery, diseasesQuery] = useQueries({
queries: [ queries: [
{ queryKey: ['expert-reviews'], queryFn: () => apiClient.getExpertReviews() }, {
{ queryKey: ['diseases'], queryFn: () => apiClient.getDiseases() }, queryKey: ["expert-reviews"],
queryFn: () => apiClient.getExpertReviews(),
},
{ queryKey: ["diseases"], queryFn: () => apiClient.getDiseases() },
], ],
}); });
@@ -33,15 +44,18 @@ export function ExpertReviewsPage() {
mutationFn: () => mutationFn: () =>
apiClient.reviewDiagnosis(selected!.id, { apiClient.reviewDiagnosis(selected!.id, {
verdict, verdict,
correctedDiseaseSlug: verdict === 'corrected' ? correctedDiseaseSlug || undefined : undefined, correctedDiseaseSlug:
verdict === "corrected"
? correctedDiseaseSlug || undefined
: undefined,
notes, notes,
}), }),
onSuccess: () => { onSuccess: () => {
setNotes(''); setNotes("");
setVerdict('verified'); setVerdict("verified");
setCorrectedDiseaseSlug(''); setCorrectedDiseaseSlug("");
queryClient.invalidateQueries({ queryKey: ['expert-reviews'] }); queryClient.invalidateQueries({ queryKey: ["expert-reviews"] });
queryClient.invalidateQueries({ queryKey: ['dashboard-summary'] }); queryClient.invalidateQueries({ queryKey: ["dashboard-summary"] });
}, },
}); });
@@ -57,8 +71,11 @@ export function ExpertReviewsPage() {
<div className="space-y-6"> <div className="space-y-6">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div> <div>
<p className="text-sm font-medium text-primary">Review Pakar</p> <h1 className="text-2xl font-bold text-emerald-800">Review Pakar</h1>
<h1 className="text-3xl font-bold">Diagnosis Menunggu Review</h1> <p className="text-gray-500 mt-1 text-md">
Tinjau hasil diagnosa dari scan yang telah dilakukan dan berikan
feedback untuk meningkatkan akurasi sistem AI ZeaVis Edu
</p>
</div> </div>
</div> </div>
@@ -67,14 +84,20 @@ export function ExpertReviewsPage() {
<div className="space-y-3"> <div className="space-y-3">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<h2 className="font-semibold">Daftar Diagnosis</h2> <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> <span className="rounded-full bg-muted px-2.5 py-0.5 text-xs font-medium">
{reviews.length}
</span>
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
{isLoading ? ( {isLoading ? (
<p className="text-sm text-muted-foreground">Memuat diagnosis...</p> <p className="text-sm text-muted-foreground">
Memuat diagnosis...
</p>
) : reviews.length === 0 ? ( ) : reviews.length === 0 ? (
<p className="text-sm text-muted-foreground">Tidak ada diagnosis yang menunggu review</p> <p className="text-sm text-muted-foreground">
Tidak ada diagnosis yang menunggu review
</p>
) : ( ) : (
reviews.map((review) => ( reviews.map((review) => (
<button <button
@@ -83,8 +106,8 @@ export function ExpertReviewsPage() {
onClick={() => setSearchParams({ diagnosis: review.id })} onClick={() => setSearchParams({ diagnosis: review.id })}
className={`w-full text-left transition ${ className={`w-full text-left transition ${
selected?.id === review.id selected?.id === review.id
? 'ring-2 ring-primary' ? "ring-2 ring-primary"
: 'hover:border-primary' : "hover:border-primary"
}`} }`}
> >
<Card className="transition hover:border-primary"> <Card className="transition hover:border-primary">
@@ -96,13 +119,22 @@ export function ExpertReviewsPage() {
/> />
<div className="min-w-0 flex-1 space-y-1"> <div className="min-w-0 flex-1 space-y-1">
<div className="flex flex-wrap items-center justify-between gap-1"> <div className="flex flex-wrap items-center justify-between gap-1">
<h3 className="text-sm font-semibold">{review.disease?.commonName ?? 'Diagnosis gagal'}</h3> <h3 className="text-sm font-semibold">
<DiagnosisStatusBadge status={review.status} className="text-xs" /> {review.disease?.commonName ?? "Diagnosis gagal"}
</h3>
<DiagnosisStatusBadge
status={review.status}
className="text-xs"
/>
</div> </div>
<p className="text-xs text-muted-foreground"> <p className="text-xs text-muted-foreground">
{review.confidence === null ? 'Tidak ada confidence' : `${(review.confidence * 100).toFixed(1)}%`} {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> </p>
<p className="text-xs text-muted-foreground">{new Date(review.createdAt).toLocaleString('id-ID')}</p>
</div> </div>
</CardContent> </CardContent>
</Card> </Card>
@@ -125,15 +157,17 @@ export function ExpertReviewsPage() {
{/* Detail card */} {/* Detail card */}
<Card> <Card>
<CardHeader> <CardHeader>
<CardTitle>{selected.disease?.commonName ?? 'Diagnosis gagal'}</CardTitle> <CardTitle>
{selected.disease?.commonName ?? "Diagnosis gagal"}
</CardTitle>
<CardDescription> <CardDescription>
{new Date(selected.createdAt).toLocaleString('id-ID')} {new Date(selected.createdAt).toLocaleString("id-ID")}
</CardDescription> </CardDescription>
</CardHeader> </CardHeader>
<CardContent className="space-y-4"> <CardContent className="space-y-4">
<img <img
src={selected.imageUrl} src={selected.imageUrl}
alt={`Gambar daun jagung untuk ${selected.disease?.commonName ?? 'diagnosis'}`} alt={`Gambar daun jagung untuk ${selected.disease?.commonName ?? "diagnosis"}`}
className="h-64 w-full rounded-lg object-cover" className="h-64 w-full rounded-lg object-cover"
/> />
@@ -145,7 +179,9 @@ export function ExpertReviewsPage() {
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<span className="text-sm font-medium">Confidence</span> <span className="text-sm font-medium">Confidence</span>
<span className="text-sm"> <span className="text-sm">
{selected.confidence === null ? 'N/A' : `${(selected.confidence * 100).toFixed(1)}%`} {selected.confidence === null
? "N/A"
: `${(selected.confidence * 100).toFixed(1)}%`}
</span> </span>
</div> </div>
</div> </div>
@@ -155,9 +191,16 @@ export function ExpertReviewsPage() {
<h4 className="text-sm font-medium">Prediksi Teratas</h4> <h4 className="text-sm font-medium">Prediksi Teratas</h4>
<div className="space-y-1"> <div className="space-y-1">
{selected.predictions.map((pred) => ( {selected.predictions.map((pred) => (
<div key={pred.id} className="flex items-center justify-between text-sm"> <div
<span className="text-muted-foreground">{pred.modelLabel}</span> key={pred.id}
<span className="font-medium">{(pred.confidence * 100).toFixed(1)}%</span> 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> </div>
@@ -176,29 +219,41 @@ export function ExpertReviewsPage() {
<div className="space-y-2"> <div className="space-y-2">
<label className="text-sm font-medium">Keputusan</label> <label className="text-sm font-medium">Keputusan</label>
<div className="flex gap-3"> <div className="flex gap-3">
<label htmlFor="verdict-verified" className="flex items-center gap-2"> <label
htmlFor="verdict-verified"
className="flex items-center gap-2"
>
<input <input
id="verdict-verified" id="verdict-verified"
type="radio" type="radio"
name="verdict" name="verdict"
value="verified" value="verified"
checked={verdict === 'verified'} checked={verdict === "verified"}
onChange={(e) => { onChange={(e) => {
setVerdict(e.target.value as 'verified' | 'corrected'); setVerdict(
setCorrectedDiseaseSlug(''); e.target.value as "verified" | "corrected",
);
setCorrectedDiseaseSlug("");
}} }}
className="h-4 w-4" className="h-4 w-4"
/> />
<span className="text-sm">Terverifikasi</span> <span className="text-sm">Terverifikasi</span>
</label> </label>
<label htmlFor="verdict-corrected" className="flex items-center gap-2"> <label
htmlFor="verdict-corrected"
className="flex items-center gap-2"
>
<input <input
id="verdict-corrected" id="verdict-corrected"
type="radio" type="radio"
name="verdict" name="verdict"
value="corrected" value="corrected"
checked={verdict === 'corrected'} checked={verdict === "corrected"}
onChange={(e) => setVerdict(e.target.value as 'verified' | 'corrected')} onChange={(e) =>
setVerdict(
e.target.value as "verified" | "corrected",
)
}
className="h-4 w-4" className="h-4 w-4"
/> />
<span className="text-sm">Dikoreksi</span> <span className="text-sm">Dikoreksi</span>
@@ -206,16 +261,23 @@ export function ExpertReviewsPage() {
</div> </div>
</div> </div>
{verdict === 'corrected' && ( {verdict === "corrected" && (
<div className="space-y-2"> <div className="space-y-2">
<label htmlFor="disease" className="text-sm font-medium"> <label
htmlFor="disease"
className="text-sm font-medium"
>
Penyakit yang Benar Penyakit yang Benar
</label> </label>
<select <select
id="disease" id="disease"
value={correctedDiseaseSlug} value={correctedDiseaseSlug}
onChange={(e) => setCorrectedDiseaseSlug(e.target.value as DiseaseSlug | '')} onChange={(e) =>
required={verdict === 'corrected'} 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" className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm"
> >
<option value="">Pilih penyakit...</option> <option value="">Pilih penyakit...</option>
@@ -245,15 +307,22 @@ export function ExpertReviewsPage() {
<Button <Button
type="submit" type="submit"
disabled={mutation.isPending || (verdict === 'corrected' && !correctedDiseaseSlug) || !notes.trim()} disabled={
mutation.isPending ||
(verdict === "corrected" && !correctedDiseaseSlug) ||
!notes.trim()
}
className="w-full" className="w-full"
> >
{mutation.isPending ? 'Mengirim...' : 'Kirim Review'} {mutation.isPending ? "Mengirim..." : "Kirim Review"}
</Button> </Button>
{mutation.isError && ( {mutation.isError && (
<p className="text-sm text-red-500"> <p className="text-sm text-red-500">
Error: {mutation.error instanceof Error ? mutation.error.message : 'Terjadi kesalahan'} Error:{" "}
{mutation.error instanceof Error
? mutation.error.message
: "Terjadi kesalahan"}
</p> </p>
)} )}
</form> </form>
apps/web/src/pages/library-page.tsx
+5 -3
View File
@@ -26,10 +26,12 @@ export function LibraryPage() {
return ( return (
<div className="space-y-6"> <div className="space-y-6">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between gap-4">
<div> <div>
<p className="text-sm font-medium text-primary">Edukasi Penyakit</p> <h1 className="text-2xl font-bold text-emerald-800">Pustaka Penyakit</h1>
<h1 className="text-3xl font-bold">Pustaka Penyakit</h1> <p className="text-gray-500 mt-1 text-md">
Referensi lengkap penyakit daun jagung yang dapat dideteksi oleh sistem AI
</p>
</div> </div>
</div> </div>