Dodo
91 lines
3.8 KiB
TypeScript
91 lines
3.8 KiB
TypeScript
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||
import type { HouseholdRow } from "@/lib/poverty-types";
|
||
|
||
const LABEL_BADGE: Record<string, string> = {
|
||
"SANGAT TINGGI": "bg-red-100 text-red-700 border-red-200",
|
||
"TINGGI": "bg-orange-100 text-orange-700 border-orange-200",
|
||
"SEDANG": "bg-amber-100 text-amber-700 border-amber-200",
|
||
"RENDAH": "bg-emerald-100 text-emerald-700 border-emerald-200",
|
||
"TIDAK PRIORITAS": "bg-blue-100 text-blue-700 border-blue-200",
|
||
};
|
||
|
||
interface PovertyInspectorTopProps {
|
||
selected: HouseholdRow | null;
|
||
}
|
||
|
||
export function PovertyInspectorTop({ selected }: PovertyInspectorTopProps) {
|
||
return (
|
||
<Card className="bg-background rounded-none border-none shadow-none ring-0 flex flex-col h-full">
|
||
<CardHeader className="border-b bg-muted/20 px-6 py-4 flex flex-col justify-center">
|
||
<CardTitle className="text-base font-semibold flex items-center gap-2">
|
||
<span className="h-2 w-2 rounded-full bg-primary" />
|
||
Inspektur Warga
|
||
</CardTitle>
|
||
<CardDescription>
|
||
{selected ? `Analisis untuk ${selected.head_name}.` : "Pilih warga dari direktori."}
|
||
</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="px-6 py-6 flex-1 flex flex-col justify-center">
|
||
{selected ? (
|
||
<>
|
||
<h3 className="text-2xl font-bold text-foreground truncate">{selected.head_name}</h3>
|
||
<span className={`inline-block mt-2 text-[10px] uppercase font-bold tracking-wider px-2 py-0.5 rounded border w-fit ${LABEL_BADGE[selected.fuzzy_label ?? ""] ?? "bg-muted text-muted-foreground border-border"}`}>
|
||
{selected.fuzzy_label ?? "Belum dianalisis"}
|
||
</span>
|
||
</>
|
||
) : (
|
||
<p className="text-sm text-muted-foreground">Belum ada warga dipilih.</p>
|
||
)}
|
||
</CardContent>
|
||
</Card>
|
||
);
|
||
}
|
||
|
||
interface PovertyInspectorBottomProps {
|
||
selected: HouseholdRow | null;
|
||
}
|
||
|
||
export function PovertyInspectorBottom({ selected }: PovertyInspectorBottomProps) {
|
||
const score = selected?.fuzzy_score != null ? Number(selected.fuzzy_score).toFixed(1) : "—";
|
||
|
||
return (
|
||
<Card className="bg-background rounded-none border-none shadow-none ring-0 flex flex-col justify-between h-full">
|
||
<CardContent className="px-0 py-6 flex flex-col justify-between flex-1">
|
||
<div className="grid grid-cols-2 gap-4 px-6">
|
||
<div className="p-3 rounded-lg border bg-muted/10">
|
||
<span className="text-xs text-muted-foreground">Skor Fuzzy</span>
|
||
<p className="text-xl font-bold mt-1 text-foreground tabular-nums">{score}</p>
|
||
</div>
|
||
<div className="p-3 rounded-lg border bg-muted/10">
|
||
<span className="text-xs text-muted-foreground">Penghasilan</span>
|
||
<p className="text-xl font-bold mt-1 text-foreground tabular-nums">
|
||
{selected ? `Rp ${Number(selected.penghasilan).toLocaleString("id-ID")}` : "—"}
|
||
</p>
|
||
</div>
|
||
<div className="p-3 rounded-lg border bg-muted/10">
|
||
<span className="text-xs text-muted-foreground">Tanggungan</span>
|
||
<p className="text-xl font-bold mt-1 text-foreground tabular-nums">
|
||
{selected ? `${selected.family_count} jiwa` : "—"}
|
||
</p>
|
||
</div>
|
||
<div className="p-3 rounded-lg border bg-muted/10">
|
||
<span className="text-xs text-muted-foreground">Rumah · Aset</span>
|
||
<p className="text-xl font-bold mt-1 text-foreground tabular-nums">
|
||
{selected ? `${selected.kondisi_rumah} · ${selected.kepemilikan_aset}` : "—"}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="border-t mt-6 pt-6 px-6 text-xs text-muted-foreground flex flex-col gap-2">
|
||
<p>
|
||
Skor fuzzy 0–100 dihitung dari penghasilan, tanggungan, kondisi rumah, dan kepemilikan aset. Semakin tinggi skor, semakin prioritas untuk bantuan.
|
||
</p>
|
||
<p>
|
||
Kondisi rumah dan kepemilikan aset dinilai pada skala 1–10 saat pendataan di peta.
|
||
</p>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
);
|
||
}
|