Dodo
88 lines
2.4 KiB
TypeScript
88 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCaption,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from "@/components/ui/table";
|
|
import { DashboardCard } from "@/components/dashboard-card";
|
|
import { ArrowRightIcon } from "@/components/ui/phosphor-icons";
|
|
import type { HouseholdRow } from "@/lib/poverty-types";
|
|
|
|
interface RecentHouseholdsProps {
|
|
households: HouseholdRow[];
|
|
}
|
|
|
|
export function RecentHouseholds({ households }: RecentHouseholdsProps) {
|
|
return (
|
|
<DashboardCard className="relative gap-0 md:col-span-2">
|
|
<CardHeader className="border-b">
|
|
<CardTitle className="text-base">Pendataan Terbaru</CardTitle>
|
|
<CardDescription>
|
|
Warga terbaru yang masuk basis data kemiskinan.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="mask-b-from-50% mask-b-to-100% px-0">
|
|
{households.length === 0 ? (
|
|
<div className="flex h-48 items-center justify-center text-xs text-muted-foreground">
|
|
Belum ada data warga.
|
|
</div>
|
|
) : (
|
|
<Table>
|
|
<TableCaption className="sr-only">
|
|
Warga terbaru dengan nama kepala keluarga, prioritas, dan
|
|
penghasilan.
|
|
</TableCaption>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead className="ps-6">Kepala Keluarga</TableHead>
|
|
<TableHead>Prioritas</TableHead>
|
|
<TableHead className="pe-6 text-right tabular-nums">
|
|
Penghasilan
|
|
</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{households.map((h) => (
|
|
<TableRow className="h-12" key={h.id}>
|
|
<TableCell className="max-w-40 truncate ps-6 font-medium">
|
|
{h.head_name}
|
|
</TableCell>
|
|
<TableCell className="text-muted-foreground">
|
|
{h.fuzzy_label ?? h.poverty_level}
|
|
</TableCell>
|
|
<TableCell className="pe-6 text-right tabular-nums">
|
|
Rp {h.penghasilan.toLocaleString("id-ID")}
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
)}
|
|
</CardContent>
|
|
<div className="mask-t-from-30% absolute inset-x-0 bottom-0 flex h-1/5 items-center justify-center bg-background">
|
|
<Button
|
|
className="relative"
|
|
variant="ghost"
|
|
render={<a href="/dashboard/poverty" />}
|
|
nativeButton={false}
|
|
>
|
|
Lihat Semua
|
|
<ArrowRightIcon aria-hidden="true" />
|
|
</Button>
|
|
</div>
|
|
</DashboardCard>
|
|
);
|
|
}
|