100 lines
2.4 KiB
TypeScript
100 lines
2.4 KiB
TypeScript
import { Grid, Stack } from "@mantine/core";
|
|
import { ActivityCard } from "./kinerja-divisi/activity-card";
|
|
import { ArchiveCard } from "./kinerja-divisi/archive-card";
|
|
import { DiscussionPanel } from "./kinerja-divisi/discussion-panel";
|
|
import { DivisionList } from "./kinerja-divisi/division-list";
|
|
import { DocumentChart } from "./kinerja-divisi/document-chart";
|
|
import { EventCard } from "./kinerja-divisi/event-card";
|
|
import { ProgressChart } from "./kinerja-divisi/progress-chart";
|
|
|
|
// Data for program kegiatan (Section 1)
|
|
const programKegiatanData = [
|
|
{
|
|
title: "Rakor 2025",
|
|
date: "3 Juli 2025",
|
|
progress: 90,
|
|
status: "Selesai" as const,
|
|
},
|
|
{
|
|
title: "Pemutakhiran Indeks Desa",
|
|
date: "3 Juli 2025",
|
|
progress: 85,
|
|
status: "Selesai" as const,
|
|
},
|
|
{
|
|
title: "Mengurus Akta Cerai Warga",
|
|
date: "3 Juli 2025",
|
|
progress: 80,
|
|
status: "Selesai" as const,
|
|
},
|
|
{
|
|
title: "Pasek 7 Desa Adat",
|
|
date: "3 Juli 2025",
|
|
progress: 92,
|
|
status: "Selesai" as const,
|
|
},
|
|
];
|
|
|
|
// Data for arsip digital (Section 5)
|
|
const archiveData = [
|
|
{ name: "Surat Keputusan" },
|
|
{ name: "Dokumentasi" },
|
|
{ name: "Laporan Keuangan" },
|
|
{ name: "Notulensi Rapat" },
|
|
];
|
|
|
|
const KinerjaDivisi = () => {
|
|
return (
|
|
<Stack gap="lg">
|
|
{/* SECTION 1 — PROGRAM KEGIATAN */}
|
|
<Grid gutter="md">
|
|
{programKegiatanData.map((kegiatan, index) => (
|
|
<Grid.Col key={index} span={{ base: 12, md: 6, lg: 3 }}>
|
|
<ActivityCard
|
|
title={kegiatan.title}
|
|
date={kegiatan.date}
|
|
progress={kegiatan.progress}
|
|
status={kegiatan.status}
|
|
/>
|
|
</Grid.Col>
|
|
))}
|
|
</Grid>
|
|
|
|
{/* SECTION 2 — GRID DASHBOARD (3 Columns) */}
|
|
<Grid gutter="lg">
|
|
{/* Left Column - Division List */}
|
|
<Grid.Col span={{ base: 12, lg: 3 }}>
|
|
<DivisionList />
|
|
</Grid.Col>
|
|
|
|
{/* Middle Column - Document Chart */}
|
|
<Grid.Col span={{ base: 12, lg: 5 }}>
|
|
<DocumentChart />
|
|
</Grid.Col>
|
|
|
|
{/* Right Column - Progress Chart */}
|
|
<Grid.Col span={{ base: 12, lg: 4 }}>
|
|
<ProgressChart />
|
|
</Grid.Col>
|
|
</Grid>
|
|
|
|
{/* SECTION 3 — DISCUSSION PANEL */}
|
|
<DiscussionPanel />
|
|
|
|
{/* SECTION 4 — ACARA HARI INI */}
|
|
<EventCard />
|
|
|
|
{/* SECTION 5 — ARSIP DIGITAL PERANGKAT DESA */}
|
|
<Grid gutter="md">
|
|
{archiveData.map((item, index) => (
|
|
<Grid.Col key={index} span={{ base: 12, md: 6 }}>
|
|
<ArchiveCard item={item} />
|
|
</Grid.Col>
|
|
))}
|
|
</Grid>
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
export default KinerjaDivisi;
|