Fix Lint-1

Refactor New Ui Semua Pengaturan
Refactor New Ui Pengaturan Umum
2026-03-25 15:07:10 +08:00 · 2026-03-25 14:38:37 +08:00 · 2026-03-25 11:56:22 +08:00 · 2026-03-25 11:10:50 +08:00 · 2026-03-25 10:32:31 +08:00 · 2026-03-25 00:09:38 +08:00
46 changed files with 2681 additions and 1647 deletions
--- a/src/components/bumdes-page.tsx
+++ b/src/components/bumdes-page.tsx
@@ -1,385 +1,38 @@
-import {
-	Badge,
-	Button,
-	Card,
-	Grid,
-	GridCol,
-	Group,
-	Select,
-	Stack,
-	Table,
-	Text,
-	Title,
-	useMantineColorScheme,
-} from "@mantine/core";
-import {
-	IconBuildingStore,
-	IconCategory,
-	IconCurrency,
-	IconUsers,
-} from "@tabler/icons-react";
-import { useState } from "react";
+import { Grid, GridCol, Stack } from "@mantine/core";
+import { HeaderToggle } from "./umkm/header-toggle";
+import { ProdukUnggulan } from "./umkm/produk-unggulan";
+import type { SalesData } from "./umkm/sales-table";
+import { SalesTable } from "./umkm/sales-table";
+import { SummaryCards } from "./umkm/summary-cards";
+import { TopProducts } from "./umkm/top-products";

 const BumdesPage = () => {
-	const { colorScheme } = useMantineColorScheme();
-	const dark = colorScheme === "dark";
-
-	const [timeFilter, setTimeFilter] = useState<string>("bulan");
-
-	// Sample data for KPI cards
-	const kpiData = [
-		{
-			title: "UMKM Aktif",
-			value: 45,
-			icon: <IconUsers size={24} />,
-			color: "darmasaba-blue",
-		},
-		{
-			title: "UMKM Terdaftar",
-			value: 68,
-			icon: <IconBuildingStore size={24} />,
-			color: "darmasaba-success",
-		},
-		{
-			title: "Omzet",
-			value: "Rp 48.000.000",
-			icon: <IconCurrency size={24} />,
-			color: "darmasaba-warning",
-		},
-		{
-			title: "Kategori UMKM",
-			value: 34,
-			icon: <IconCategory size={24} />,
-			color: "darmasaba-danger",
-		},
-	];
-
-	// Sample data for top products
-	const topProducts = [
-		{
-			rank: 1,
-			name: "Beras Premium Organik",
-			umkmOwner: "Warung Pak Joko",
-			growth: "+12%",
-		},
-		{
-			rank: 2,
-			name: "Keripik Singkong",
-			umkmOwner: "Ibu Sari Snack",
-			growth: "+8%",
-		},
-		{
-			rank: 3,
-			name: "Madu Alami",
-			umkmOwner: "Peternakan Lebah",
-			growth: "+5%",
-		},
-	];
-
-	// Sample data for product sales
-	const productSales = [
-		{
-			produk: "Beras Premium Organik",
-			penjualanBulanIni: "Rp 8.500.000",
-			bulanLalu: "Rp 8.500.000",
-			trend: 10,
-			volume: "650 Kg",
-			stok: "850 Kg",
-		},
-		{
-			produk: "Keripik Singkong",
-			penjualanBulanIni: "Rp 4.200.000",
-			bulanLalu: "Rp 3.800.000",
-			trend: 10,
-			volume: "320 Kg",
-			stok: "120 Kg",
-		},
-		{
-			produk: "Madu Alami",
-			penjualanBulanIni: "Rp 3.750.000",
-			bulanLalu: "Rp 4.100.000",
-			trend: -8,
-			volume: "150 Liter",
-			stok: "45 Liter",
-		},
-		{
-			produk: "Kecap Tradisional",
-			penjualanBulanIni: "Rp 2.800.000",
-			bulanLalu: "Rp 2.500.000",
-			trend: 12,
-			volume: "280 Botol",
-			stok: "95 Botol",
-		},
-	];
+	const handleDetailClick = (product: SalesData) => {
+		console.log("Detail clicked for:", product);
+		// TODO: Open modal or navigate to detail page
+	};

 	return (
 		<Stack gap="lg">
-			{/* KPI Cards */}
-			<Grid gutter="md">
-				{kpiData.map((kpi, index) => (
-					<GridCol key={index} span={{ base: 12, sm: 6, md: 3 }}>
-						<Card
-							p="md"
-							radius="md"
-							withBorder
-							bg={dark ? "#141D34" : "white"}
-							style={{ borderColor: dark ? "#141D34" : "white" }}
-						>
-							<Group justify="space-between" align="center">
-								<Stack gap={0}>
-									<Text size="sm" c={dark ? "dark.3" : "dimmed"}>
-										{kpi.title}
-									</Text>
-									<Text size="xl" fw={700} c={dark ? "dark.0" : "black"}>
-										{typeof kpi.value === "number"
-											? kpi.value.toLocaleString()
-											: kpi.value}
-									</Text>
-								</Stack>
-								<Badge variant="light" color={kpi.color} p={8} radius="md">
-									{kpi.icon}
-								</Badge>
-							</Group>
-						</Card>
-					</GridCol>
-				))}
-			</Grid>
+			{/* KPI Summary Cards */}
+			<SummaryCards />

-			{/* Update Penjualan Produk Header */}
-			<Card
-				p="md"
-				radius="md"
-				withBorder
-				bg={dark ? "#141D34" : "white"}
-				style={{ borderColor: dark ? "#141D34" : "white" }}
-			>
-				<Group justify="space-between" align="center" px="md" py="xs">
-					<Title order={3} c={dark ? "dark.0" : "black"}>
-						Update Penjualan Produk
-					</Title>
-					<Group>
-						<Button
-							variant={timeFilter === "minggu" ? "filled" : "light"}
-							onClick={() => setTimeFilter("minggu")}
-							color="darmasaba-blue"
-						>
-							Minggu ini
-						</Button>
-						<Button
-							variant={timeFilter === "bulan" ? "filled" : "light"}
-							onClick={() => setTimeFilter("bulan")}
-							color="darmasaba-blue"
-						>
-							Bulan ini
-						</Button>
-					</Group>
-				</Group>
-			</Card>
+			{/* Header with Time Range Toggle */}
+			<HeaderToggle />

+			{/* Main Content - 2 Column Layout */}
 			<Grid gutter="md">
-				{/* Produk Unggulan (Left Column) */}
+				{/* Left Panel - Produk Unggulan */}
 				<GridCol span={{ base: 12, lg: 4 }}>
 					<Stack gap="md">
-						{/* Total Penjualan, Produk Aktif, Total Transaksi */}
-						<Card
-							p="md"
-							radius="md"
-							withBorder
-							bg={dark ? "#141D34" : "white"}
-							style={{ borderColor: dark ? "#141D34" : "white" }}
-						>
-							<Stack gap="md">
-								<Group justify="space-between">
-									<Text size="sm" c={dark ? "dark.3" : "dimmed"}>
-										Total Penjualan
-									</Text>
-									<Text size="lg" fw={700} c={dark ? "dark.0" : "black"}>
-										Rp 28.500.000
-									</Text>
-								</Group>
-								<Group justify="space-between">
-									<Text size="sm" c={dark ? "dark.3" : "dimmed"}>
-										Produk Aktif
-									</Text>
-									<Text size="lg" fw={700} c={dark ? "dark.0" : "black"}>
-										124 Produk
-									</Text>
-								</Group>
-								<Group justify="space-between">
-									<Text size="sm" c={dark ? "dark.3" : "dimmed"}>
-										Total Transaksi
-									</Text>
-									<Text size="lg" fw={700} c={dark ? "dark.0" : "black"}>
-										1.240 Transaksi
-									</Text>
-								</Group>
-							</Stack>
-						</Card>
-
-						{/* Top 3 Produk Terlaris */}
-						<Card
-							p="md"
-							radius="md"
-							withBorder
-							bg={dark ? "#141D34" : "white"}
-							style={{ borderColor: dark ? "#141D34" : "white" }}
-						>
-							<Title order={4} mb="md" c={dark ? "dark.0" : "black"}>
-								Top 3 Produk Terlaris
-							</Title>
-							<Stack gap="sm">
-								{topProducts.map((product) => (
-									<Group
-										key={product.rank}
-										justify="space-between"
-										align="center"
-									>
-										<Group gap="sm">
-											<Badge
-												variant="filled"
-												color={
-													product.rank === 1
-														? "gold"
-														: product.rank === 2
-															? "gray"
-															: "bronze"
-												}
-												radius="xl"
-												size="lg"
-											>
-												{product.rank}
-											</Badge>
-											<Stack gap={0}>
-												<Text fw={500} c={dark ? "dark.0" : "black"}>
-													{product.name}
-												</Text>
-												<Text size="sm" c={dark ? "dark.3" : "dimmed"}>
-													{product.umkmOwner}
-												</Text>
-											</Stack>
-										</Group>
-										<Badge
-											variant="light"
-											color={product.growth.startsWith("+") ? "green" : "red"}
-										>
-											{product.growth}
-										</Badge>
-									</Group>
-								))}
-							</Stack>
-						</Card>
+						<ProdukUnggulan />
+						<TopProducts />
 					</Stack>
 				</GridCol>

-				{/* Detail Penjualan Produk (Right Column) */}
+				{/* Right Panel - Detail Penjualan Produk */}
 				<GridCol span={{ base: 12, lg: 8 }}>
-					<Card
-						p="md"
-						radius="md"
-						withBorder
-						bg={dark ? "#141D34" : "white"}
-						style={{ borderColor: dark ? "#141D34" : "white" }}
-					>
-						<Group justify="space-between" mb="md">
-							<Title order={4} c={dark ? "dark.0" : "black"}>
-								Detail Penjualan Produk
-							</Title>
-							<Select
-								placeholder="Filter kategori"
-								data={[
-									{ value: "semua", label: "Semua Kategori" },
-									{ value: "makanan", label: "Makanan" },
-									{ value: "minuman", label: "Minuman" },
-									{ value: "kerajinan", label: "Kerajinan" },
-								]}
-								defaultValue="semua"
-								w={200}
-							/>
-						</Group>
-
-						<Table striped highlightOnHover withColumnBorders>
-							<Table.Thead>
-								<Table.Tr>
-									<Table.Th>
-										<Text c={dark ? "white" : "dimmed"}>Produk</Text>
-									</Table.Th>
-									<Table.Th>
-										<Text c={dark ? "white" : "dimmed"}>
-											Penjualan Bulan Ini
-										</Text>
-									</Table.Th>
-									<Table.Th>
-										<Text c={dark ? "white" : "dimmed"}>Bulan Lalu</Text>
-									</Table.Th>
-									<Table.Th>
-										<Text c={dark ? "white" : "dimmed"}>Trend</Text>
-									</Table.Th>
-									<Table.Th>
-										<Text c={dark ? "white" : "dimmed"}>Volume</Text>
-									</Table.Th>
-									<Table.Th>
-										<Text c={dark ? "white" : "dimmed"}>Stok</Text>
-									</Table.Th>
-									<Table.Th>
-										<Text c={dark ? "white" : "dimmed"}>Aksi</Text>
-									</Table.Th>
-								</Table.Tr>
-							</Table.Thead>
-							<Table.Tbody>
-								{productSales.map((product, index) => (
-									<Table.Tr key={index}>
-										<Table.Td>
-											<Text fw={500} c={dark ? "dark.0" : "black"}>
-												{product.produk}
-											</Text>
-										</Table.Td>
-										<Table.Td>
-											<Text fz={"sm"} c={dark ? "dark.0" : "black"}>
-												{product.penjualanBulanIni}
-											</Text>
-										</Table.Td>
-										<Table.Td>
-											<Text fz={"sm"} c={dark ? "white" : "dimmed"}>
-												{product.bulanLalu}
-											</Text>
-										</Table.Td>
-										<Table.Td>
-											<Group gap="xs">
-												<Text c={product.trend >= 0 ? "green" : "red"}>
-													{product.trend >= 0 ? "↑" : "↓"}{" "}
-													{Math.abs(product.trend)}%
-												</Text>
-											</Group>
-										</Table.Td>
-										<Table.Td>
-											<Text fz={"sm"} c={dark ? "dark.0" : "black"}>
-												{product.volume}
-											</Text>
-										</Table.Td>
-										<Table.Td>
-											<Badge
-												variant="light"
-												color={
-													parseInt(product.stok) > 200 ? "green" : "yellow"
-												}
-											>
-												{product.stok}
-											</Badge>
-										</Table.Td>
-										<Table.Td>
-											<Button
-												variant="subtle"
-												size="compact-sm"
-												color="darmasaba-blue"
-											>
-												Detail
-											</Button>
-										</Table.Td>
-									</Table.Tr>
-								))}
-							</Table.Tbody>
-						</Table>
-					</Card>
+					<SalesTable onDetailClick={handleDetailClick} />
 				</GridCol>
 			</Grid>
 		</Stack>
--- a/src/components/dashboard/stat-card.tsx
+++ b/src/components/dashboard/stat-card.tsx
@@ -25,7 +25,7 @@ export function StatCard({
 	trend,
 	trendValue,
 	icon,
-	iconColor = "darmasaba-blue",
+	iconColor = "#1E3A5F",
 }: StatCardProps) {
 	const { colorScheme } = useMantineColorScheme();
 	const dark = colorScheme === "dark";
@@ -77,6 +77,7 @@ export function StatCard({
 					size="xl"
 					radius="xl"
 					color={dark ? "gray" : iconColor}
+					bg={dark ? "gray" : iconColor}
 				>
 					{icon}
 				</ThemeIcon>
--- a/src/components/demografi-pekerjaan.tsx
+++ b/src/components/demografi-pekerjaan.tsx
@@ -13,13 +13,13 @@ import {
 	useMantineColorScheme,
 } from "@mantine/core";
 import {
-	Users,
-	Home,
 	Baby,
-	TrendingDown,
 	BarChart3,
-	PieChart as PieChartIcon,
 	Building2,
+	Home,
+	PieChart as PieChartIcon,
+	TrendingDown,
+	Users,
 } from "lucide-react";
 import {
 	Bar,
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -9,11 +9,18 @@ import {
 	Title,
 	useMantineColorScheme,
 } from "@mantine/core";
-import { IconUserShield } from "@tabler/icons-react";
+import {
+	IconLayoutSidebarLeftCollapse,
+	IconUserShield,
+} from "@tabler/icons-react";
 import { useLocation, useNavigate } from "@tanstack/react-router";
-import { Bell, Moon, Sun, User as UserIcon } from "lucide-react"; // Renamed User to UserIcon to avoid conflict with Mantine's User component if it exists
+import { Bell, Moon, Sun, User as UserIcon } from "lucide-react";

-export function Header() {
+interface HeaderProps {
+	onSidebarToggle?: () => void;
+}
+
+export function Header({ onSidebarToggle }: HeaderProps) {
 	const location = useLocation();
 	const { colorScheme, toggleColorScheme } = useMantineColorScheme();
 	const dark = colorScheme === "dark";
@@ -56,9 +63,24 @@ export function Header() {
 	return (
 		<Group justify="space-between" w="100%">
 			{/* Title */}
-			<Title order={3} c={"white"}>
-				{getPageTitle()}
-			</Title>
+			<Group gap="md">
+				<ActionIcon
+					onClick={onSidebarToggle}
+					variant="subtle"
+					size="lg"
+					radius="xl"
+					visibleFrom="sm"
+					aria-label="Toggle sidebar"
+				>
+					<IconLayoutSidebarLeftCollapse
+						color="white"
+						style={{ width: "70%", height: "70%" }}
+					/>
+				</ActionIcon>
+				{/* <Title order={3} c={"white"}>
+					{getPageTitle()}
+				</Title> */}
+			</Group>

 			{/* Right Section */}
 			<Group gap="md">
--- a/src/components/help-page.tsx
+++ b/src/components/help-page.tsx
@@ -181,7 +181,7 @@ const HelpPage = () => {
 							<HelpCard
 								style={{ borderColor: dark ? "#141D34" : "white" }}
 								bg={dark ? "#141D34" : "white"}
-								icon={<IconBook size={24} />}
+								icon={<IconBook size={24} color="white" />}
 								title="Panduan Memulai"
 								h="100%"
 							>
@@ -211,7 +211,7 @@ const HelpPage = () => {
 							<HelpCard
 								style={{ borderColor: dark ? "#141D34" : "white" }}
 								bg={dark ? "#141D34" : "white"}
-								icon={<IconVideo size={24} />}
+								icon={<IconVideo size={24} color="white" />}
 								title="Video Tutorial"
 								h="100%"
 							>
@@ -241,7 +241,7 @@ const HelpPage = () => {
 							<HelpCard
 								style={{ borderColor: dark ? "#141D34" : "white" }}
 								bg={dark ? "#141D34" : "white"}
-								icon={<IconHelpCircle size={24} />}
+								icon={<IconHelpCircle size={24} color="white" />}
 								title="FAQ"
 								h="100%"
 							>
@@ -273,7 +273,7 @@ const HelpPage = () => {
 							<HelpCard
 								style={{ borderColor: dark ? "#141D34" : "white" }}
 								bg={dark ? "#141D34" : "white"}
-								icon={<IconHeadphones size={24} />}
+								icon={<IconHeadphones size={24} color="white" />}
 								title="Hubungi Support"
 								h="100%"
 							>
@@ -308,7 +308,7 @@ const HelpPage = () => {
 							<HelpCard
 								style={{ borderColor: dark ? "#141D34" : "white" }}
 								bg={dark ? "#141D34" : "white"}
-								icon={<IconFileText size={24} />}
+								icon={<IconFileText size={24} color="white" />}
 								title="Dokumentasi"
 								h="100%"
 							>
@@ -340,7 +340,7 @@ const HelpPage = () => {
 							<HelpCard
 								style={{ borderColor: dark ? "#141D34" : "white" }}
 								bg={dark ? "#141D34" : "white"}
-								icon={<IconMessage size={24} />}
+								icon={<IconMessage size={24} color="white" />}
 								title="Jenna - Virtual Assistant"
 								h="100%"
 							>
--- a/src/components/jenna-analytic.tsx
+++ b/src/components/jenna-analytic.tsx
@@ -13,10 +13,10 @@ import {
 	useMantineColorScheme,
 } from "@mantine/core";
 import {
-	MessageCircle,
-	CheckCircle,
 	AlertTriangle,
+	CheckCircle,
 	Clock,
+	MessageCircle,
 	TrendingUp,
 } from "lucide-react";
 import {
--- a/src/components/keamanan-page.tsx
+++ b/src/components/keamanan-page.tsx
@@ -5,22 +5,18 @@ import {
 	Grid,
 	GridCol,
 	Group,
-	List,
 	Stack,
 	Text,
 	ThemeIcon,
 	Title,
-	useMantineColorScheme,
+	useMantineColorScheme
 } from "@mantine/core";
 import {
 	IconAlertTriangle,
 	IconCamera,
 	IconClock,
-	IconEye,
-	IconMapPin,
-	IconShieldLock,
+	IconMapPin
 } from "@tabler/icons-react";
-import { useState } from "react";

 const KeamananPage = () => {
 	const { colorScheme } = useMantineColorScheme();
@@ -125,10 +121,53 @@ const KeamananPage = () => {
 				</Title>
 			</Group>

-			{/* KPI Cards */}
 			<Grid gutter="md">
-				{kpiData.map((kpi, index) => (
-					<GridCol key={index} span={{ base: 12, sm: 6, md: 6 }}>
+				{/* Peta Keamanan CCTV */}
+				<GridCol span={{ base: 12, lg: 6 }}>
+					<Stack gap={"xs"}>
+						{/* KPI Cards */}
+						<Grid gutter="md">
+							{kpiData.map((kpi, index) => (
+								<GridCol key={index} span={{ base: 12, sm: 6, md: 6 }}>
+									<Card
+										p="md"
+										radius="md"
+										withBorder
+										bg={dark ? "#141D34" : "white"}
+										style={{ borderColor: dark ? "#141D34" : "white" }}
+										h="100%"
+									>
+										<Group justify="space-between" align="center">
+											<Stack gap={0}>
+												<Text size="sm" c={dark ? "dark.3" : "dimmed"}>
+													{kpi.subtitle}
+												</Text>
+												<Group gap="xs" align="center">
+													<Text
+														size="xl"
+														fw={700}
+														c={dark ? "dark.0" : "black"}
+													>
+														{kpi.value}
+													</Text>
+													<Text size="sm" c={dark ? "dark.3" : "dimmed"}>
+														{kpi.title}
+													</Text>
+												</Group>
+											</Stack>
+											<ThemeIcon
+												variant="light"
+												color={kpi.color}
+												size="xl"
+												radius="xl"
+											>
+												{kpi.icon}
+											</ThemeIcon>
+										</Group>
+									</Card>
+								</GridCol>
+							))}
+						</Grid>
 						<Card
 							p="md"
 							radius="md"
@@ -137,119 +176,81 @@ const KeamananPage = () => {
 							style={{ borderColor: dark ? "#141D34" : "white" }}
 							h="100%"
 						>
-							<Group justify="space-between" align="center">
-								<Stack gap={0}>
-									<Text size="sm" c={dark ? "dark.3" : "dimmed"}>
-										{kpi.subtitle}
-									</Text>
-									<Group gap="xs" align="center">
-										<Text size="xl" fw={700} c={dark ? "dark.0" : "black"}>
-											{kpi.value}
-										</Text>
-										<Text size="sm" c={dark ? "dark.3" : "dimmed"}>
-											{kpi.title}
-										</Text>
-									</Group>
-								</Stack>
-								<ThemeIcon
-									variant="light"
-									color={kpi.color}
-									size="xl"
-									radius="xl"
-								>
-									{kpi.icon}
-								</ThemeIcon>
-							</Group>
-						</Card>
-					</GridCol>
-				))}
-			</Grid>
-
-			<Grid gutter="md">
-				{/* Peta Keamanan CCTV */}
-				<GridCol span={{ base: 12, lg: 6 }}>
-					<Card
-						p="md"
-						radius="md"
-						withBorder
-						bg={dark ? "#141D34" : "white"}
-						style={{ borderColor: dark ? "#141D34" : "white" }}
-						h="100%"
-					>
-						<Title order={3} mb="md" c={dark ? "dark.0" : "black"}>
-							Peta Keamanan CCTV
-						</Title>
-						<Text size="sm" c={dark ? "dark.3" : "dimmed"} mb="md">
-							Titik Lokasi CCTV
-						</Text>
-
-						{/* Placeholder for map */}
-						<Box
-							style={{
-								backgroundColor: dark ? "#2d3748" : "#e2e8f0",
-								borderRadius: "8px",
-								height: "400px",
-								display: "flex",
-								alignItems: "center",
-								justifyContent: "center",
-							}}
-						>
-							<Stack align="center">
-								<IconMapPin
-									size={48}
-									stroke={1.5}
-									color={dark ? "#94a3b8" : "#64748b"}
-								/>
-								<Text c={dark ? "dark.3" : "dimmed"}>Peta Lokasi CCTV</Text>
-								<Text size="sm" c={dark ? "dark.3" : "dimmed"} ta="center">
-									Integrasi dengan Google Maps atau Mapbox akan ditampilkan di
-									sini
-								</Text>
-							</Stack>
-						</Box>
-
-						{/* CCTV Locations List */}
-						<Stack mt="md" gap="sm">
-							<Title order={4} c={dark ? "dark.0" : "black"}>
-								Daftar CCTV
+							<Title order={3} mb="md" c={dark ? "dark.0" : "black"}>
+								Peta Keamanan CCTV
 							</Title>
-							{cctvLocations.map((cctv, index) => (
-								<Card
-									key={index}
-									p="md"
-									radius="md"
-									withBorder
-									bg={dark ? "#263852ff" : "#F1F5F9"}
-									style={{ borderColor: dark ? "#263852ff" : "#F1F5F9" }}
-								>
-									<Group justify="space-between">
-										<Stack gap={0}>
-											<Group gap="xs">
-												<Text fw={500} c={dark ? "dark.0" : "black"}>
-													{cctv.id}
+							<Text size="sm" c={dark ? "dark.3" : "dimmed"} mb="md">
+								Titik Lokasi CCTV
+							</Text>
+
+							{/* Placeholder for map */}
+							<Box
+								style={{
+									backgroundColor: dark ? "#2d3748" : "#e2e8f0",
+									borderRadius: "8px",
+									height: "400px",
+									display: "flex",
+									alignItems: "center",
+									justifyContent: "center",
+								}}
+							>
+								<Stack align="center">
+									<IconMapPin
+										size={48}
+										stroke={1.5}
+										color={dark ? "#94a3b8" : "#64748b"}
+									/>
+									<Text c={dark ? "dark.3" : "dimmed"}>Peta Lokasi CCTV</Text>
+									<Text size="sm" c={dark ? "dark.3" : "dimmed"} ta="center">
+										Integrasi dengan Google Maps atau Mapbox akan ditampilkan di
+										sini
+									</Text>
+								</Stack>
+							</Box>
+
+							{/* CCTV Locations List */}
+							<Stack mt="md" gap="sm">
+								<Title order={4} c={dark ? "dark.0" : "black"}>
+									Daftar CCTV
+								</Title>
+								{cctvLocations.map((cctv, index) => (
+									<Card
+										key={index}
+										p="md"
+										radius="md"
+										withBorder
+										bg={dark ? "#263852ff" : "#F1F5F9"}
+										style={{ borderColor: dark ? "#263852ff" : "#F1F5F9" }}
+									>
+										<Group justify="space-between">
+											<Stack gap={0}>
+												<Group gap="xs">
+													<Text fw={500} c={dark ? "dark.0" : "black"}>
+														{cctv.id}
+													</Text>
+													<Badge
+														variant="dot"
+														color={cctv.status === "active" ? "green" : "gray"}
+													>
+														{cctv.status === "active" ? "Online" : "Offline"}
+													</Badge>
+												</Group>
+												<Text size="sm" c={dark ? "dark.3" : "dimmed"}>
+													{cctv.location}
+												</Text>
+											</Stack>
+											<Group gap="xs">
+												<IconClock size={16} stroke={1.5} />
+												<Text size="sm" c={dark ? "dark.3" : "dimmed"}>
+													{cctv.lastSeen}
 												</Text>
-												<Badge
-													variant="dot"
-													color={cctv.status === "active" ? "green" : "gray"}
-												>
-													{cctv.status === "active" ? "Online" : "Offline"}
-												</Badge>
 											</Group>
-											<Text size="sm" c={dark ? "dark.3" : "dimmed"}>
-												{cctv.location}
-											</Text>
-										</Stack>
-										<Group gap="xs">
-											<IconClock size={16} stroke={1.5} />
-											<Text size="sm" c={dark ? "dark.3" : "dimmed"}>
-												{cctv.lastSeen}
-											</Text>
 										</Group>
-									</Group>
-								</Card>
-							))}
-						</Stack>
-					</Card>
+									</Card>
+								))}
+							</Stack>
+						</Card>
+					</Stack>
 				</GridCol>

 				{/* Daftar Laporan Keamanan */}
@@ -262,10 +263,6 @@ const KeamananPage = () => {
 						style={{ borderColor: dark ? "#141D34" : "white" }}
 						h="100%"
 					>
-						<Title order={3} mb="md" c={dark ? "dark.0" : "black"}>
-							Laporan Keamanan Lingkungan
-						</Title>
-
 						<Stack gap="sm">
 							{securityReports.map((report, index) => (
 								<Card
--- a/src/components/keuangan-anggaran.tsx
+++ b/src/components/keuangan-anggaran.tsx
@@ -1,73 +1,70 @@
-import { BarChart } from "@mantine/charts";
 import {
 	Badge,
 	Box,
-	Button,
 	Card,
 	Grid,
+	GridCol,
 	Group,
-	Progress,
 	Stack,
 	Text,
+	ThemeIcon,
 	Title,
 	useMantineColorScheme,
 } from "@mantine/core";
 import {
-	IconCurrency,
-	IconTrendingDown,
-	IconTrendingUp,
-} from "@tabler/icons-react";
-import React from "react";
+	CheckCircle,
+	Coins,
+	PieChart as PieChartIcon,
+	Receipt,
+	TrendingDown,
+	TrendingUp,
+} from "lucide-react";
+import {
+	Bar,
+	BarChart,
+	CartesianGrid,
+	Line,
+	LineChart,
+	ResponsiveContainer,
+	Tooltip,
+	XAxis,
+	YAxis,
+} from "recharts";

-// Sample Data
+// KPI Data
 const kpiData = [
 	{
 		id: 1,
 		title: "Total APBDes",
 		value: "Rp 5.2M",
-		sub: "Tahun 2025",
-		icon: <IconCurrency className="h-6 w-6 text-muted-foreground" />,
+		subtitle: "Tahun 2025",
+		icon: Coins,
 	},
 	{
 		id: 2,
 		title: "Realisasi",
 		value: "68%",
-		sub: "Rp 3.5M dari 5.2M",
-		icon: (
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				fill="none"
-				viewBox="0 0 24 24"
-				strokeWidth={1.5}
-				stroke="currentColor"
-				className="h-6 w-6 text-muted-foreground"
-			>
-				<path
-					strokeLinecap="round"
-					strokeLinejoin="round"
-					d="M9 12.75 11.25 15 15 9.75M21 12c0 1.268-.63 2.473-1.688 3.342-.48.485-.926.97-1.378 1.44c-1.472 1.58-2.306 2.787-2.91 3.514-.15.18-.207.33-.207.33A.75.75 0 0 1 15 21h-3c-1.104 0-2.08-.542-2.657-1.455-.139-.201-.264-.406-.38-.614l-.014-.025C8.85 18.067 8.156 17.2 7.5 16.325.728 12.56.728 7.44 7.5 3.675c3.04-.482 5.584.47 7.042 1.956.674.672 1.228 1.462 1.696 2.307.426.786.793 1.582 1.113 2.392h.001Z"
-				/>
-			</svg>
-		),
+		subtitle: "Rp 3.5M dari 5.2M",
+		icon: CheckCircle,
 	},
 	{
 		id: 3,
 		title: "Pemasukan",
 		value: "Rp 580jt",
-		sub: "Bulan ini",
-		delta: "+8%",
-		deltaType: "positive",
-		icon: <IconTrendingUp className="h-6 w-6 text-muted-foreground" />,
+		subtitle: "Bulan ini",
+		trend: "+8%",
+		icon: TrendingUp,
 	},
 	{
 		id: 4,
 		title: "Pengeluaran",
 		value: "Rp 520jt",
-		sub: "Bulan ini",
-		icon: <IconTrendingDown className="h-6 w-6 text-muted-foreground" />,
+		subtitle: "Bulan ini",
+		icon: TrendingDown,
 	},
 ];

+// Income & Expense Data
 const incomeExpenseData = [
 	{ month: "Apr", income: 450, expense: 380 },
 	{ month: "Mei", income: 520, expense: 420 },
@@ -78,6 +75,7 @@ const incomeExpenseData = [
 	{ month: "Okt", income: 580, expense: 520 },
 ];

+// Sector Allocation Data
 const allocationData = [
 	{ sector: "Pembangunan", amount: 1200 },
 	{ sector: "Kesehatan", amount: 800 },
@@ -87,13 +85,7 @@ const allocationData = [
 	{ sector: "Teknologi", amount: 300 },
 ];

-const assistanceFundData = [
-	{ source: "Dana Desa (DD)", amount: 1800, status: "cair" },
-	{ source: "Alokasi Dana Desa (ADD)", amount: 950, status: "cair" },
-	{ source: "Bagi Hasil Pajak", amount: 450, status: "cair" },
-	{ source: "Hibah Provinsi", amount: 300, status: "proses" },
-];
-
+// APBDes Report Data
 const apbdReport = {
 	income: [
 		{ category: "Dana Desa", amount: 1800 },
@@ -113,244 +105,410 @@ const apbdReport = {
 	totalExpenses: 2155,
 };

+// Aid & Grants Data
+const assistanceFundData = [
+	{ source: "Dana Desa (DD)", amount: 1800, status: "cair" },
+	{ source: "Alokasi Dana Desa (ADD)", amount: 950, status: "cair" },
+	{ source: "Bagi Hasil Pajak", amount: 450, status: "cair" },
+	{ source: "Hibah Provinsi", amount: 300, status: "proses" },
+];
+
 const KeuanganAnggaran = () => {
 	const { colorScheme } = useMantineColorScheme();
 	const dark = colorScheme === "dark";
-	return (
-		<Box>
-			<Stack gap="xl">
-				{/* KPI Cards */}
-				<Grid gutter="lg">
-					{kpiData.map((kpi) => (
-						<Grid.Col key={kpi.id} span={{ base: 12, md: 6, lg: 3 }}>
-							<Card
-								p="md"
-								radius="md"
-								withBorder
-								bg={dark ? "#141D34" : "white"}
-								style={{ borderColor: dark ? "#141D34" : "white" }}
-								h="100%"
-							>
-								<Group justify="space-between" align="flex-start" mb="xs">
-									<Text size="sm" fw={500} c="dimmed">
-										{kpi.title}
-									</Text>
-									{React.cloneElement(kpi.icon, {
-										className: "h-6 w-6",
-										color: "var(--mantine-color-dimmed)",
-									})}
-								</Group>
-								<Title order={3} fw={700} mt="xs">
-									{kpi.value}
-								</Title>
-								{kpi.delta && (
-									<Text
-										size="xs"
-										c={
-											kpi.deltaType === "positive"
-												? "green"
-												: kpi.deltaType === "negative"
-													? "red"
-													: "dimmed"
-										}
-										mt={4}
-									>
-										{kpi.delta}
-									</Text>
-								)}
-								{kpi.sub && (
-									<Text size="xs" c="dimmed" mt="auto">
-										{kpi.sub}
-									</Text>
-								)}
-							</Card>
-						</Grid.Col>
-					))}
-				</Grid>

-				{/* Charts Section */}
-				<Grid gutter="lg">
-					{/* Grafik Pemasukan vs Pengeluaran */}
-					<Grid.Col span={{ base: 12, lg: 6 }}>
+	return (
+		<Stack gap="lg">
+			{/* TOP SECTION - 4 STAT CARDS */}
+			<Grid gutter="md">
+				{kpiData.map((item) => (
+					<Grid.Col key={item.id} span={{ base: 12, sm: 6, lg: 3 }}>
 						<Card
 							p="md"
-							radius="md"
+							radius="xl"
 							withBorder
-							bg={dark ? "#141D34" : "white"}
-							style={{ borderColor: dark ? "#141D34" : "white" }}
+							bg={dark ? "#1E293B" : "white"}
+							style={{
+								borderColor: dark ? "#334155" : "white",
+								boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
+								transition: "transform 0.15s ease, box-shadow 0.15s ease",
+							}}
+							h="100%"
 						>
-							<Title order={3} fw={500} mb="md">
-								Pemasukan vs Pengeluaran
-							</Title>
-							<BarChart
-								h={300}
-								data={incomeExpenseData}
-								dataKey="month"
-								series={[
-									{ name: "income", color: "green", label: "Pemasukan" },
-									{ name: "expense", color: "red", label: "Pengeluaran" },
-								]}
-								withLegend
-							/>
+							<Group justify="space-between" align="flex-start" w="100%">
+								<Stack gap={2}>
+									<Text size="sm" c="dimmed">
+										{item.title}
+									</Text>
+									<Text size="xl" fw={700} c={dark ? "white" : "gray.9"}>
+										{item.value}
+									</Text>
+									<Group gap={4} align="flex-start">
+										{item.trend && <TrendingUp size={14} color="#22C55E" />}
+										<Text
+											size="xs"
+											c={item.trend ? "green" : dark ? "gray.4" : "gray.5"}
+										>
+											{item.subtitle}
+										</Text>
+									</Group>
+								</Stack>
+								<ThemeIcon
+									color="#1E3A5F"
+									variant="filled"
+									size="lg"
+									radius="xl"
+								>
+									<item.icon style={{ width: "60%", height: "60%" }} />
+								</ThemeIcon>
+							</Group>
 						</Card>
 					</Grid.Col>
+				))}
+			</Grid>

-					{/* Alokasi Anggaran Per Sektor */}
-					<Grid.Col span={{ base: 12, lg: 6 }}>
-						<Card
-							p="md"
-							radius="md"
-							withBorder
-							bg={dark ? "#141D34" : "white"}
-							style={{ borderColor: dark ? "#141D34" : "white" }}
-						>
-							<Title order={3} fw={500} mb="md">
+			{/* MAIN CHART SECTION */}
+			<Grid gutter="lg">
+				{/* LEFT: PEMASUKAN DAN PENGELUARAN (70%) */}
+				<Grid.Col span={{ base: 12, lg: 8 }}>
+					<Card
+						p="md"
+						radius="xl"
+						withBorder
+						bg={dark ? "#1E293B" : "white"}
+						style={{
+							borderColor: dark ? "#334155" : "white",
+							boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
+						}}
+						h="100%"
+					>
+						<Group gap="xs" mb="md">
+							<ThemeIcon color="#1E3A5F" variant="filled" size="sm" radius="sm">
+								<PieChartIcon size={14} />
+							</ThemeIcon>
+							<Title order={4} c={dark ? "white" : "gray.9"}>
+								Pemasukan dan Pengeluaran
+							</Title>
+						</Group>
+						<ResponsiveContainer width="100%" height={300}>
+							<LineChart data={incomeExpenseData}>
+								<CartesianGrid
+									strokeDasharray="3 3"
+									vertical={false}
+									stroke={dark ? "#334155" : "#e5e7eb"}
+								/>
+								<XAxis
+									dataKey="month"
+									axisLine={false}
+									tickLine={false}
+									tick={{
+										fill: dark ? "#E2E8F0" : "#374151",
+										fontSize: 12,
+									}}
+								/>
+								<YAxis
+									axisLine={false}
+									tickLine={false}
+									tick={{
+										fill: dark ? "#E2E8F0" : "#374151",
+										fontSize: 12,
+									}}
+									tickFormatter={(value) => `Rp ${value}jt`}
+								/>
+								<Tooltip
+									contentStyle={{
+										backgroundColor: dark ? "#1E293B" : "white",
+										borderColor: dark ? "#334155" : "#e5e7eb",
+										borderRadius: "8px",
+									}}
+									labelStyle={{ color: dark ? "#E2E8F0" : "#374151" }}
+									formatter={(value: number | undefined) => [
+										`Rp ${value}jt`,
+										"",
+									]}
+								/>
+								<Line
+									type="monotone"
+									dataKey="income"
+									stroke="#22C55E"
+									strokeWidth={2}
+									dot={{ fill: "#22C55E", strokeWidth: 2, r: 4 }}
+									activeDot={{ r: 6 }}
+									name="Pemasukan"
+								/>
+								<Line
+									type="monotone"
+									dataKey="expense"
+									stroke="#EF4444"
+									strokeWidth={2}
+									dot={{ fill: "#EF4444", strokeWidth: 2, r: 4 }}
+									activeDot={{ r: 6 }}
+									name="Pengeluaran"
+								/>
+							</LineChart>
+						</ResponsiveContainer>
+					</Card>
+				</Grid.Col>
+
+				{/* RIGHT: ALOKASI ANGGARAN PER SEKTOR (30%) */}
+				<Grid.Col span={{ base: 12, lg: 4 }}>
+					<Card
+						p="md"
+						radius="xl"
+						withBorder
+						bg={dark ? "#1E293B" : "white"}
+						style={{
+							borderColor: dark ? "#334155" : "white",
+							boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
+						}}
+						h="100%"
+					>
+						<Group gap="xs" mb="md">
+							<ThemeIcon color="#1E3A5F" variant="filled" size="sm" radius="sm">
+								<PieChartIcon size={14} />
+							</ThemeIcon>
+							<Title order={4} c={dark ? "white" : "gray.9"}>
 								Alokasi Anggaran Per Sektor
 							</Title>
-							<BarChart
-								h={300}
-								data={allocationData}
-								dataKey="sector"
-								series={[
-									{ name: "amount", color: "darmasaba-navy", label: "Jumlah" },
-								]}
-								withLegend
-								orientation="horizontal"
-							/>
-						</Card>
-					</Grid.Col>
-				</Grid>
+						</Group>
+						<ResponsiveContainer width="100%" height={300}>
+							<BarChart data={allocationData} layout="vertical">
+								<CartesianGrid
+									strokeDasharray="3 3"
+									horizontal={false}
+									stroke={dark ? "#334155" : "#e5e7eb"}
+								/>
+								<XAxis
+									type="number"
+									axisLine={false}
+									tickLine={false}
+									tick={{
+										fill: dark ? "#E2E8F0" : "#374151",
+										fontSize: 12,
+									}}
+									tickFormatter={(value) => `${value}`}
+								/>
+								<YAxis
+									type="category"
+									dataKey="sector"
+									axisLine={false}
+									tickLine={false}
+									tick={{
+										fill: dark ? "#E2E8F0" : "#374151",
+										fontSize: 11,
+									}}
+									width={100}
+								/>
+								<Tooltip
+									contentStyle={{
+										backgroundColor: dark ? "#1E293B" : "white",
+										borderColor: dark ? "#334155" : "#e5e7eb",
+										borderRadius: "8px",
+									}}
+									formatter={(value: number | undefined) => [
+										`Rp ${value}jt`,
+										"Jumlah",
+									]}
+								/>
+								<Bar
+									dataKey="amount"
+									fill="#1E3A5F"
+									radius={[0, 8, 8, 0]}
+									maxBarSize={30}
+								/>
+							</BarChart>
+						</ResponsiveContainer>
+					</Card>
+				</Grid.Col>
+			</Grid>

-				<Grid gutter="lg">
-					{/* Dana Bantuan & Hibah */}
-					<Grid.Col span={{ base: 12, lg: 6 }}>
-						<Card
-							p="md"
-							radius="md"
-							withBorder
-							bg={dark ? "#141D34" : "white"}
-							style={{ borderColor: dark ? "#141D34" : "white" }}
-						>
-							<Title order={3} fw={500} mb="md">
-								Dana Bantuan & Hibah
+			{/* BOTTOM SECTION */}
+			<Grid gutter="lg">
+				{/* LEFT: LAPORAN APBDES */}
+				<Grid.Col span={{ base: 12, lg: 6 }}>
+					<Card
+						p="md"
+						radius="xl"
+						withBorder
+						bg={dark ? "#1E293B" : "white"}
+						style={{
+							borderColor: dark ? "#334155" : "white",
+							boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
+						}}
+						h="100%"
+					>
+						<Group gap="xs" mb="md">
+							<ThemeIcon color="#1E3A5F" variant="filled" size="sm" radius="sm">
+								<Receipt size={14} />
+							</ThemeIcon>
+							<Title order={4} c={dark ? "white" : "gray.9"}>
+								Laporan APBDes
 							</Title>
-							<Stack gap="sm">
-								{assistanceFundData.map((fund, index) => (
-									<Group
-										key={index}
-										justify="space-between"
-										align="center"
-										p="sm"
-										style={{
-											border: "1px solid var(--mantine-color-gray-3)",
-											borderRadius: "var(--mantine-radius-sm)",
-										}}
-									>
+						</Group>
+
+						<Grid gutter="md">
+							{/* Pendapatan */}
+							<Grid.Col span={6}>
+								<Card p="sm" radius="lg" bg={dark ? "#064E3B" : "#DCFCE7"}>
+									<Title order={5} c="#22C55E" mb="sm">
+										Pendapatan
+									</Title>
+									<Stack gap="xs">
+										{apbdReport.income.map((item, index) => (
+											<Group key={index} justify="space-between">
+												<Text size="sm" c={dark ? "gray.3" : "gray.7"}>
+													{item.category}
+												</Text>
+												<Text size="sm" fw={600} c="#22C55E">
+													Rp {item.amount.toLocaleString()}jt
+												</Text>
+											</Group>
+										))}
+										<Group
+											justify="space-between"
+											mt="sm"
+											pt="sm"
+											style={{
+												borderTop: `1px solid ${dark ? "#065F46" : "#86EFAC"}`,
+											}}
+										>
+											<Text fw={700} c="#22C55E">
+												Total:
+											</Text>
+											<Text fw={700} c="#22C55E">
+												Rp {apbdReport.totalIncome.toLocaleString()}jt
+											</Text>
+										</Group>
+									</Stack>
+								</Card>
+							</Grid.Col>
+
+							{/* Belanja */}
+							<Grid.Col span={6}>
+								<Card p="sm" radius="lg" bg={dark ? "#7F1D1D" : "#FEE2E2"}>
+									<Title order={5} c="#EF4444" mb="sm">
+										Belanja
+									</Title>
+									<Stack gap="xs">
+										{apbdReport.expenses.map((item, index) => (
+											<Group key={index} justify="space-between">
+												<Text size="sm" c={dark ? "gray.3" : "gray.7"}>
+													{item.category}
+												</Text>
+												<Text size="sm" fw={600} c="#EF4444">
+													Rp {item.amount.toLocaleString()}jt
+												</Text>
+											</Group>
+										))}
+										<Group
+											justify="space-between"
+											mt="sm"
+											pt="sm"
+											style={{
+												borderTop: `1px solid ${dark ? "#991B1B" : "#FCA5A5"}`,
+											}}
+										>
+											<Text fw={700} c="#EF4444">
+												Total:
+											</Text>
+											<Text fw={700} c="#EF4444">
+												Rp {apbdReport.totalExpenses.toLocaleString()}jt
+											</Text>
+										</Group>
+									</Stack>
+								</Card>
+							</Grid.Col>
+						</Grid>
+
+						{/* Saldo */}
+						<Group
+							justify="space-between"
+							mt="md"
+							pt="md"
+							style={{
+								borderTop: `1px solid ${dark ? "#334155" : "#e5e7eb"}`,
+							}}
+						>
+							<Text fw={700} c={dark ? "white" : "gray.9"}>
+								Saldo:
+							</Text>
+							<Text
+								fw={700}
+								size="lg"
+								c={
+									apbdReport.totalIncome > apbdReport.totalExpenses
+										? "#22C55E"
+										: "#EF4444"
+								}
+							>
+								Rp{" "}
+								{(
+									apbdReport.totalIncome - apbdReport.totalExpenses
+								).toLocaleString()}
+								jt
+							</Text>
+						</Group>
+					</Card>
+				</Grid.Col>
+
+				{/* RIGHT: DANA BANTUAN DAN HIBAH */}
+				<Grid.Col span={{ base: 12, lg: 6 }}>
+					<Card
+						p="md"
+						radius="xl"
+						withBorder
+						bg={dark ? "#1E293B" : "white"}
+						style={{
+							borderColor: dark ? "#334155" : "white",
+							boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
+						}}
+						h="100%"
+					>
+						<Group gap="xs" mb="md">
+							<ThemeIcon color="#1E3A5F" variant="filled" size="sm" radius="sm">
+								<Coins size={14} />
+							</ThemeIcon>
+							<Title order={4} c={dark ? "white" : "gray.9"}>
+								Dana Bantuan dan Hibah
+							</Title>
+						</Group>
+						<Stack gap="sm">
+							{assistanceFundData.map((fund, index) => (
+								<Card
+									key={index}
+									p="sm"
+									radius="lg"
+									bg={dark ? "#334155" : "#F1F5F9"}
+									style={{
+										borderColor: "transparent",
+										transition: "background-color 0.15s ease",
+									}}
+								>
+									<Group justify="space-between" align="center">
 										<Box>
-											<Text size="sm" fw={500}>
+											<Text size="sm" fw={600} c={dark ? "white" : "gray.9"}>
 												{fund.source}
 											</Text>
-											<Text size="sm" c="dimmed">
+											<Text size="xs" c="dimmed">
 												Rp {fund.amount.toLocaleString()}jt
 											</Text>
 										</Box>
 										<Badge
 											variant="light"
 											color={fund.status === "cair" ? "green" : "yellow"}
+											radius="sm"
+											fw={600}
 										>
-											{fund.status}
+											{fund.status === "cair" ? "Cair" : "Proses"}
 										</Badge>
 									</Group>
-								))}
-							</Stack>
-						</Card>
-					</Grid.Col>
-
-					{/* Laporan APBDes */}
-					<Grid.Col span={{ base: 12, lg: 6 }}>
-						<Card
-							p="md"
-							radius="md"
-							withBorder
-							bg={dark ? "#141D34" : "white"}
-							style={{ borderColor: dark ? "#141D34" : "white" }}
-						>
-							<Title order={3} fw={500} mb="md">
-								Laporan APBDes
-							</Title>
-
-							<Box mb="md">
-								<Title order={4} mb="sm">
-									Pendapatan
-								</Title>
-								<Stack gap="xs">
-									{apbdReport.income.map((item, index) => (
-										<Group key={index} justify="space-between">
-											<Text size="sm">{item.category}</Text>
-											<Text size="sm" c="green">
-												Rp {item.amount.toLocaleString()}jt
-											</Text>
-										</Group>
-									))}
-									<Group justify="space-between" mt="sm">
-										<Text fw={700}>Total Pendapatan:</Text>
-										<Text fw={700} c="green">
-											Rp {apbdReport.totalIncome.toLocaleString()}jt
-										</Text>
-									</Group>
-								</Stack>
-							</Box>
-
-							<Box>
-								<Title order={4} mb="sm">
-									Belanja
-								</Title>
-								<Stack gap="xs">
-									{apbdReport.expenses.map((item, index) => (
-										<Group key={index} justify="space-between">
-											<Text size="sm">{item.category}</Text>
-											<Text size="sm" c="red">
-												Rp {item.amount.toLocaleString()}jt
-											</Text>
-										</Group>
-									))}
-									<Group justify="space-between" mt="sm">
-										<Text fw={700}>Total Belanja:</Text>
-										<Text fw={700} c="red">
-											Rp {apbdReport.totalExpenses.toLocaleString()}jt
-										</Text>
-									</Group>
-								</Stack>
-							</Box>
-
-							<Box
-								mt="md"
-								pt="md"
-								style={{ borderTop: "1px solid var(--mantine-color-gray-3)" }}
-							>
-								<Group justify="space-between">
-									<Text fw={700}>Saldo:</Text>
-									<Text
-										fw={700}
-										c={
-											apbdReport.totalIncome > apbdReport.totalExpenses
-												? "green"
-												: "red"
-										}
-									>
-										Rp{" "}
-										{(
-											apbdReport.totalIncome - apbdReport.totalExpenses
-										).toLocaleString()}
-										jt
-									</Text>
-								</Group>
-							</Box>
-						</Card>
-					</Grid.Col>
-				</Grid>
-			</Stack>
-		</Box>
+								</Card>
+							))}
+						</Stack>
+					</Card>
+				</Grid.Col>
+			</Grid>
+		</Stack>
 	);
 };

--- a/src/components/kinerja-divisi.tsx
+++ b/src/components/kinerja-divisi.tsx
@@ -1,12 +1,11 @@
 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 { ProgressChart } from "./kinerja-divisi/progress-chart";
-import { DiscussionPanel } from "./kinerja-divisi/discussion-panel";
 import { EventCard } from "./kinerja-divisi/event-card";
-import { ArchiveCard } from "./kinerja-divisi/archive-card";
-
+import { ProgressChart } from "./kinerja-divisi/progress-chart";

 // Data for program kegiatan (Section 1)
 const programKegiatanData = [
--- a/src/components/kinerja-divisi/activity-card.tsx
+++ b/src/components/kinerja-divisi/activity-card.tsx
@@ -1,4 +1,4 @@
-import { Card, Text, Progress, Group, Box } from "@mantine/core";
+import { Box, Card, Group, Progress, Text } from "@mantine/core";

 interface ActivityCardProps {
 	title: string;
@@ -86,4 +86,4 @@ export function ActivityCard({
 			</Box>
 		</Card>
 	);
-}
+}
--- a/src/components/pengaduan-layanan-publik.tsx
+++ b/src/components/pengaduan-layanan-publik.tsx
@@ -8,7 +8,7 @@ import {
 	Text,
 	ThemeIcon,
 	Title,
-	useMantineColorScheme
+	useMantineColorScheme,
 } from "@mantine/core";
 import { CheckCircle, Clock, FileText, MessageCircle } from "lucide-react";
 import {
--- a/src/components/pengaturan/akses-dan-tim.tsx
+++ b/src/components/pengaturan/akses-dan-tim.tsx
@@ -1,189 +1,78 @@
-import {
-	ActionIcon,
-	Alert,
-	Button,
-	Card,
-	Group,
-	Modal,
-	Select,
-	Space,
-	Table,
-	Text,
-	TextInput,
-	Title,
-	useMantineColorScheme,
-} from "@mantine/core";
-import {
-	IconEdit,
-	IconInfoCircle,
-	IconTrash,
-	IconUser,
-	IconUserPlus,
-} from "@tabler/icons-react";
-import { useState } from "react";
+import { Box, Button, Group, Stack, Switch, Text, Title } from "@mantine/core";

 const AksesDanTimSettings = () => {
-	const [opened, setOpened] = useState(false);
-	const { colorScheme } = useMantineColorScheme();
-	const dark = colorScheme === "dark";
-
-	// Sample team members data
-	const teamMembers = [
-		{
-			id: 1,
-			name: "Admin Utama",
-			email: "admin@desa.go.id",
-			role: "Administrator",
-			status: "Aktif",
-		},
-		{
-			id: 2,
-			name: "Operator Desa",
-			email: "operator@desa.go.id",
-			role: "Operator",
-			status: "Aktif",
-		},
-		{
-			id: 3,
-			name: "Staff Keuangan",
-			email: "keuangan@desa.go.id",
-			role: "Keuangan",
-			status: "Aktif",
-		},
-		{
-			id: 4,
-			name: "Staff Umum",
-			email: "umum@desa.go.id",
-			role: "Umum",
-			status: "Nonaktif",
-		},
-	];
-
-	const roles = [
-		{ value: "administrator", label: "Administrator" },
-		{ value: "operator", label: "Operator" },
-		{ value: "keuangan", label: "Keuangan" },
-		{ value: "umum", label: "Umum" },
-		{ value: "keamanan", label: "Keamanan" },
-	];
-
 	return (
-		<Card
-			withBorder
-			radius="md"
-			p="xl"
-			bg={dark ? "#141D34" : "white"}
-			style={{ borderColor: dark ? "#141D34" : "white" }}
-		>
-			<Modal
-				opened={opened}
-				onClose={() => setOpened(false)}
-				title="Tambah Anggota Tim"
-				size="lg"
-			>
-				<TextInput
-					label="Nama Lengkap"
-					placeholder="Masukkan nama lengkap anggota tim"
-					mb="md"
-				/>
-				<TextInput
-					label="Alamat Email"
-					placeholder="Masukkan alamat email"
-					mb="md"
-				/>
-				<Select
-					label="Peran"
-					placeholder="Pilih peran anggota tim"
-					data={roles}
-					mb="md"
-				/>
-				<Group justify="flex-end" mt="xl">
-					<Button variant="outline" onClick={() => setOpened(false)}>
-						Batal
+		<Stack pr={"50%"} gap={"xl"}>
+			<Box>
+				<Stack gap={"xs"}>
+					<Title order={2}>Manajemen Tim</Title>
+					<Button bg={"#1E3A5F"} radius={"md"} c={"white"} fullWidth>
+						Undangan Anggota Baru
 					</Button>
-					<Button>Undang Anggota</Button>
-				</Group>
-			</Modal>
-
-			<Title order={2} mb="lg">
-				Akses & Tim
-			</Title>
-			<Text color="dimmed" mb="xl">
-				Kelola akses dan anggota tim Anda
-			</Text>
-
-			<Space h="lg" />
-
-			<Group justify="space-between" mb="md">
-				<Title order={4}>Anggota Tim</Title>
-				<Button
-					leftSection={<IconUserPlus size={16} />}
-					onClick={() => setOpened(true)}
-				>
-					Tambah Anggota
-				</Button>
-			</Group>
-
-			<Table highlightOnHover>
-				<Table.Thead>
-					<Table.Tr>
-						<Table.Th>Nama</Table.Th>
-						<Table.Th>Email</Table.Th>
-						<Table.Th>Peran</Table.Th>
-						<Table.Th>Status</Table.Th>
-						<Table.Th>Aksi</Table.Th>
-					</Table.Tr>
-				</Table.Thead>
-				<Table.Tbody>
-					{teamMembers.map((member) => (
-						<Table.Tr key={member.id}>
-							<Table.Td>
-								<Group gap="sm">
-									<IconUser size={20} />
-									<Text>{member.name}</Text>
-								</Group>
-							</Table.Td>
-							<Table.Td>{member.email}</Table.Td>
-							<Table.Td>
-								<Text fw={500}>{member.role}</Text>
-							</Table.Td>
-							<Table.Td>
-								<Text c={member.status === "Aktif" ? "green" : "red"} fw={500}>
-									{member.status}
-								</Text>
-							</Table.Td>
-							<Table.Td>
-								<Group>
-									<ActionIcon variant="subtle" color="blue">
-										<IconEdit size={16} />
-									</ActionIcon>
-									<ActionIcon variant="subtle" color="red">
-										<IconTrash size={16} />
-									</ActionIcon>
-								</Group>
-							</Table.Td>
-						</Table.Tr>
-					))}
-				</Table.Tbody>
-			</Table>
-
-			<Space h="xl" />
-
-			<Alert
-				icon={<IconInfoCircle size={16} />}
-				title="Informasi"
-				color="blue"
-				mb="md"
-			>
-				Administrator memiliki akses penuh ke semua fitur. Peran lainnya
-				memiliki akses terbatas sesuai kebutuhan.
-			</Alert>
-
-			<Group justify="flex-end" mt="xl">
+					<Button bg={"#1E3A5F"} radius={"md"} c={"white"} fullWidth>
+						Kelola Role & Permission
+					</Button>
+					<Group justify="space-between">
+						<Text fw={"bold"} fz={"sm"}>
+							Daftar Anggota Teraktif
+						</Text>
+						<Text fw={"bold"} fz={"sm"}>
+							12 Anggota
+						</Text>
+					</Group>
+				</Stack>
+			</Box>
+			<Box>
+				<Stack gap={"xs"}>
+					<Title order={2}>Hak Akses</Title>
+					<Group justify="space-between">
+						<Text fw={"bold"} fz={"sm"}>
+							Administrator
+						</Text>
+						<Text fw={"bold"} fz={"sm"}>
+							2 Orang
+						</Text>
+					</Group>
+					<Group justify="space-between">
+						<Text fw={"bold"} fz={"sm"}>
+							Editor
+						</Text>
+						<Text fw={"bold"} fz={"sm"}>
+							5 Orang
+						</Text>
+					</Group>
+					<Group justify="space-between">
+						<Text fw={"bold"} fz={"sm"}>
+							Viewer
+						</Text>
+						<Text fw={"bold"} fz={"sm"}>
+							5 Orang
+						</Text>
+					</Group>
+				</Stack>
+			</Box>
+			<Box>
+				<Stack gap={"xs"}>
+					<Title order={2}>Kolaborasi</Title>
+					<Group mb="md" justify="space-between">
+						<Text fw={"bold"} fz={"sm"}>
+							Izin Export Data
+						</Text>
+						<Switch defaultChecked />
+					</Group>
+					<Group mb="md" justify="space-between">
+						<Text fw={"bold"} fz={"sm"}>
+							Require Approval Untuk Perubahan
+						</Text>
+						<Switch defaultChecked />
+					</Group>
+				</Stack>
+			</Box>
+			<Group justify="flex-start" mt="xl">
 				<Button variant="outline">Batal</Button>
 				<Button>Simpan Perubahan</Button>
 			</Group>
-		</Card>
+		</Stack>
 	);
 };

--- a/src/components/pengaturan/keamanan.tsx
+++ b/src/components/pengaturan/keamanan.tsx
@@ -1,89 +1,64 @@
-import {
-	Alert,
-	Button,
-	Card,
-	Group,
-	PasswordInput,
-	Space,
-	Switch,
-	Text,
-	Title,
-	useMantineColorScheme,
-} from "@mantine/core";
-import { IconInfoCircle, IconLock } from "@tabler/icons-react";
+import { Box, Button, Group, Stack, Switch, Text, Title } from "@mantine/core";

 const KeamananSettings = () => {
-	const { colorScheme } = useMantineColorScheme();
-	const dark = colorScheme === "dark";
 	return (
-		<Card
-			withBorder
-			radius="md"
-			p="xl"
-			bg={dark ? "#141D34" : "white"}
-			style={{ borderColor: dark ? "#141D34" : "white" }}
-		>
-			<Title order={2} mb="lg">
-				Pengaturan Keamanan
-			</Title>
-			<Text color="dimmed" mb="xl">
-				Kelola keamanan akun Anda
-			</Text>
-
-			<Space h="lg" />
-
-			<PasswordInput
-				label="Kata Sandi Saat Ini"
-				placeholder="Masukkan kata sandi saat ini"
-				mb="md"
-			/>
-
-			<PasswordInput
-				label="Kata Sandi Baru"
-				placeholder="Masukkan kata sandi baru"
-				mb="md"
-			/>
-
-			<PasswordInput
-				label="Konfirmasi Kata Sandi Baru"
-				placeholder="Konfirmasi kata sandi baru"
-				mb="md"
-			/>
-
-			<Space h="md" />
-
-			<Group mb="md">
-				<Switch label="Verifikasi Dua Langkah" />
-				<Switch label="Login Otentikasi Aplikasi" />
-			</Group>
-
-			<Space h="md" />
-
-			<Alert
-				icon={<IconLock size={16} />}
-				title="Keamanan"
-				color="orange"
-				mb="md"
-			>
-				Gunakan kata sandi yang kuat dan unik. Hindari menggunakan kata sandi
-				yang sama di banyak layanan.
-			</Alert>
-
-			<Alert
-				icon={<IconInfoCircle size={16} />}
-				title="Informasi"
-				color="blue"
-				mb="md"
-			>
-				Setelah mengganti kata sandi, Anda akan diminta logout dari semua
-				perangkat.
-			</Alert>
-
-			<Group justify="flex-end" mt="xl">
+		<Stack pr={"50%"} gap={"xl"}>
+			<Box>
+				<Stack gap={"xs"}>
+					<Title order={2}>Autentikasi</Title>
+					<Group mb="md" justify="space-between">
+						<Text fw={"bold"} fz={"sm"}>
+							Two-Factor Authentication
+						</Text>
+						<Switch defaultChecked />
+					</Group>
+					<Group mb="md" justify="space-between">
+						<Text fw={"bold"} fz={"sm"}>
+							Biometrik Login
+						</Text>
+						<Switch defaultChecked />
+					</Group>
+					<Group mb="md" justify="space-between">
+						<Text fw={"bold"} fz={"sm"}>
+							IP Whitelist
+						</Text>
+						<Switch defaultChecked />
+					</Group>
+				</Stack>
+			</Box>
+			<Box>
+				<Stack gap={"xs"}>
+					<Title order={2}>Password</Title>
+					<Button bg={"#1E3A5F"} radius={"md"} c={"white"} fullWidth>
+						Ubah Password
+					</Button>
+					<Button bg={"#1E3A5F"} radius={"md"} c={"white"} fullWidth>
+						Riwayat Login
+					</Button>
+					<Button bg={"#1E3A5F"} radius={"md"} c={"white"} fullWidth>
+						Perangkat Terdaftar
+					</Button>
+				</Stack>
+			</Box>
+			<Box>
+				<Stack gap={"xs"}>
+					<Title order={2}>Audit & Log</Title>
+					<Group mb="md" justify="space-between">
+						<Text fw={"bold"} fz={"sm"}>
+							Log Aktivitas
+						</Text>
+						<Switch defaultChecked />
+					</Group>
+					<Button bg={"#1E3A5F"} radius={"md"} c={"white"} fullWidth>
+						Download Log
+					</Button>
+				</Stack>
+			</Box>
+			<Group justify="flex-start" mt="xl">
 				<Button variant="outline">Batal</Button>
-				<Button>Perbarui Kata Sandi</Button>
+				<Button>Simpan Perubahan</Button>
 			</Group>
-		</Card>
+		</Stack>
 	);
 };

--- a/src/components/pengaturan/notifikasi.tsx
+++ b/src/components/pengaturan/notifikasi.tsx
@@ -1,10 +1,14 @@
 import {
 	Alert,
+	Box,
 	Button,
 	Card,
 	Checkbox,
+	Grid,
+	GridCol,
 	Group,
 	Space,
+	Stack,
 	Switch,
 	Text,
 	Title,
@@ -16,70 +20,101 @@ const NotifikasiSettings = () => {
 	const { colorScheme } = useMantineColorScheme();
 	const dark = colorScheme === "dark";
 	return (
-		<Card
-			withBorder
-			radius="md"
-			p="xl"
-			bg={dark ? "#141D34" : "white"}
-			style={{ borderColor: dark ? "#141D34" : "white" }}
-		>
-			<Title order={2} mb="lg">
-				Pengaturan Notifikasi
-			</Title>
-			<Text color="dimmed" mb="xl">
-				Kelola preferensi notifikasi Anda
-			</Text>
-
-			<Space h="lg" />
-
-			<Checkbox.Group defaultValue={["email", "push"]} mb="md">
-				<Title order={4} mb="sm">
-					Metode Notifikasi
-				</Title>
-				<Group>
-					<Checkbox value="email" label="Email" />
-					<Checkbox value="push" label="Notifikasi Push" />
-					<Checkbox value="sms" label="SMS" />
-				</Group>
-			</Checkbox.Group>
-
-			<Space h="md" />
-
-			<Group mb="md">
-				<Switch label="Notifikasi Email" defaultChecked />
-				<Switch label="Notifikasi Push" defaultChecked />
-			</Group>
-
-			<Space h="md" />
-
-			<Title order={4} mb="sm">
-				Jenis Notifikasi
-			</Title>
-			<Group align="start">
-				<Switch label="Pengaduan Baru" defaultChecked />
-				<Switch label="Update Status Pengaduan" defaultChecked />
-				<Switch label="Laporan Mingguan" />
-				<Switch label="Pemberitahuan Keamanan" defaultChecked />
-				<Switch label="Aktivitas Akun" defaultChecked />
-			</Group>
-
-			<Space h="md" />
-
-			<Alert
-				icon={<IconInfoCircle size={16} />}
-				title="Tip"
-				color="blue"
-				mb="md"
-			>
-				Anda dapat menyesuaikan frekuensi notifikasi mingguan sesuai kebutuhan
-				Anda.
-			</Alert>
-
-			<Group justify="flex-end" mt="xl">
+		<Stack pr={"20%"} gap={"xs"}>
+			<Grid gutter={{ base: 5, xs: "md", md: "xl", xl: 50 }}>
+				<GridCol span={6}>
+					<Stack gap={"xs"}>
+						<Title order={3} mb="sm">
+							Metode Notifikasi
+						</Title>
+						<Group mb="md" justify="space-between">
+							<Text fw={"bold"} fz={"sm"}>
+								Laporan Harian
+							</Text>
+							<Switch defaultChecked />
+						</Group>
+						<Group mb="md" justify="space-between">
+							<Text fw={"bold"} fz={"sm"}>
+								Alert Sistem
+							</Text>
+							<Switch defaultChecked />
+						</Group>
+						<Group mb="md" justify="space-between">
+							<Text fw={"bold"} fz={"sm"}>
+								Update Keamanan
+							</Text>
+							<Switch defaultChecked />
+						</Group>
+						<Group mb="md" justify="space-between">
+							<Text fw={"bold"} fz={"sm"}>
+								Newsletter Bulanan
+							</Text>
+							<Switch defaultChecked />
+						</Group>
+					</Stack>
+				</GridCol>
+				<GridCol span={6}>
+					<Stack gap={"xs"}>
+						<Title order={3} mb="sm">
+							Preferensi Alert
+						</Title>
+						<Group mb="md" justify="space-between">
+							<Text fw={"bold"} fz={"sm"}>
+								Treshold Memori
+							</Text>
+							<Switch defaultChecked />
+						</Group>
+						<Group mb="md" justify="space-between">
+							<Text fw={"bold"} fz={"sm"}>
+								Treshold CPU
+							</Text>
+							<Switch defaultChecked />
+						</Group>
+						<Group mb="md" justify="space-between">
+							<Text fw={"bold"} fz={"sm"}>
+								Treshold Disk
+							</Text>
+							<Switch defaultChecked />
+						</Group>
+					</Stack>
+				</GridCol>
+				<GridCol span={6}>
+					<Stack gap={"xs"}>
+						<Title order={3} mb="sm">
+							Notifikasi Push
+						</Title>
+						<Group mb="md" justify="space-between">
+							<Text fw={"bold"} fz={"sm"}>
+								Alert Kritis
+							</Text>
+							<Switch defaultChecked />
+						</Group>
+						<Group mb="md" justify="space-between">
+							<Text fw={"bold"} fz={"sm"}>
+								Aktivitas Tim
+							</Text>
+							<Switch defaultChecked />
+						</Group>
+						<Group mb="md" justify="space-between">
+							<Text fw={"bold"} fz={"sm"}>
+								Komentar & Mention
+							</Text>
+							<Switch defaultChecked />
+						</Group>
+						<Group mb="md" justify="space-between">
+							<Text fw={"bold"} fz={"sm"}>
+								Bunyi Notifikasi
+							</Text>
+							<Switch defaultChecked />
+						</Group>
+					</Stack>
+				</GridCol>
+			</Grid>
+			<Group justify="flex-start" mt="xl">
 				<Button variant="outline">Batal</Button>
 				<Button>Simpan Preferensi</Button>
 			</Group>
-		</Card>
+		</Stack>
 	);
 };

--- a/src/components/pengaturan/umum.tsx
+++ b/src/components/pengaturan/umum.tsx
@@ -1,44 +1,12 @@
-import {
-	Alert,
-	Button,
-	Card,
-	Group,
-	Select,
-	Space,
-	Switch,
-	Text,
-	TextInput,
-	Title,
-	useMantineColorScheme,
-} from "@mantine/core";
-import { IconInfoCircle } from "@tabler/icons-react";
+import { Box, Button, Group, Select, Switch, Text, Title } from "@mantine/core";
+import { DateInput } from "@mantine/dates";

 const UmumSettings = () => {
-	const { colorScheme } = useMantineColorScheme();
-	const dark = colorScheme === "dark";
 	return (
-		<Card
-			withBorder
-			radius="md"
-			p="xl"
-			bg={dark ? "#141D34" : "white"}
-			style={{ borderColor: dark ? "#141D34" : "white" }}
-		>
+		<Box pr={"50%"}>
 			<Title order={2} mb="lg">
-				Pengaturan Umum
+				Preferensi Tampilan
 			</Title>
-			<Text color="dimmed" mb="xl">
-				Kelola pengaturan umum aplikasi Anda
-			</Text>
-
-			<Space h="lg" />
-
-			<TextInput
-				label="Nama Aplikasi"
-				placeholder="Masukkan nama aplikasi"
-				defaultValue="Dashboard Desa Plus"
-				mb="md"
-			/>

 			<Select
 				label="Bahasa Aplikasi"
@@ -61,25 +29,53 @@ const UmumSettings = () => {
 				mb="md"
 			/>

-			<Group mb="md">
-				<Switch label="Notifikasi Email" defaultChecked />
+			<DateInput label="Format Tanggal" mb={"xl"} />
+
+			<Title order={2} mb="lg">
+				Dashboard
+			</Title>
+
+			<Group mb="md" justify="space-between">
+				<Text fw={"bold"} fz={"sm"}>
+					Refresh Otomatis
+				</Text>
+				<Switch defaultChecked />
 			</Group>

-			<Alert
-				icon={<IconInfoCircle size={16} />}
-				title="Informasi"
-				color="blue"
-				mb="md"
-			>
-				Beberapa pengaturan mungkin memerlukan restart aplikasi untuk diterapkan
-				sepenuhnya.
-			</Alert>
+			<Group mb="md" justify="space-between">
+				<Text fw={"bold"} fz={"sm"}>
+					Interval Refresh
+				</Text>
+				<Select
+					data={[
+						{ value: "1", label: "30d" },
+						{ value: "2", label: "60d" },
+						{ value: "3", label: "90d" },
+					]}
+					defaultValue="1"
+					w={90}
+				/>
+			</Group>
+
+			<Group mb="md" justify="space-between">
+				<Text fw={"bold"} fz={"sm"}>
+					Tampilkan Grid
+				</Text>
+				<Switch defaultChecked />
+			</Group>
+
+			<Group mb="md" justify="space-between">
+				<Text fw={"bold"} fz={"sm"}>
+					Animasi Transisi
+				</Text>
+				<Switch defaultChecked />
+			</Group>

 			<Group justify="flex-end" mt="xl">
 				<Button variant="outline">Batal</Button>
 				<Button>Simpan Perubahan</Button>
 			</Group>
-		</Card>
+		</Box>
 	);
 };

--- a/src/components/sidebar.tsx
+++ b/src/components/sidebar.tsx
@@ -61,10 +61,7 @@ export function Sidebar({ className }: SidebarProps) {
 	return (
 		<Box className={className}>
 			{/* Logo */}
-			<Image
-				src={dark ? "/white.png" : "/light-mode.png"}
-				alt="Logo"
-			/>
+			<Image src={dark ? "/white.png" : "/light-mode.png"} alt="Logo" />

 			{/* Search */}
 			<Box p="md">
--- a/src/components/sosial-page.tsx
+++ b/src/components/sosial-page.tsx
@@ -1,463 +1,45 @@
-import {
-	Badge,
-	Card,
-	Grid,
-	GridCol,
-	Group,
-	List,
-	Progress,
-	Stack,
-	Text,
-	ThemeIcon,
-	Title,
-	useMantineColorScheme,
-} from "@mantine/core";
-import {
-	IconAward,
-	IconBabyCarriage,
-	IconBook,
-	IconCalendarEvent,
-	IconHeartbeat,
-	IconMedicalCross,
-	IconSchool,
-	IconStethoscope,
-} from "@tabler/icons-react";
-import { useState } from "react";
+import { Grid, GridCol, Stack } from "@mantine/core";
+import { Beasiswa } from "./sosial/beasiswa";
+import { EventCalendar } from "./sosial/event-calendar";
+import { HealthStats } from "./sosial/health-stats";
+import { Pendidikan } from "./sosial/pendidikan";
+import { PosyanduSchedule } from "./sosial/posyandu-schedule";
+import { SummaryCards } from "./sosial/summary-cards";

 const SosialPage = () => {
-	const { colorScheme } = useMantineColorScheme();
-	const dark = colorScheme === "dark";
-
-	// Sample data for health statistics
-	const healthStats = {
-		ibuHamil: 87,
-		balita: 342,
-		alertStunting: 12,
-		posyanduAktif: 8,
-	};
-
-	// Sample data for health progress
-	const healthProgress = [
-		{ label: "Imunisasi Lengkap", value: 92, color: "green" },
-		{ label: "Pemeriksaan Rutin", value: 88, color: "blue" },
-		{ label: "Gizi Baik", value: 86, color: "teal" },
-		{ label: "Target Stunting", value: 14, color: "red" },
-	];
-
-	// Sample data for posyandu schedule
-	const posyanduSchedule = [
-		{
-			nama: "Posyandu Mawar",
-			tanggal: "Senin, 15 Feb 2026",
-			jam: "08:00 - 11:00",
-		},
-		{
-			nama: "Posyandu Melati",
-			tanggal: "Selasa, 16 Feb 2026",
-			jam: "08:00 - 11:00",
-		},
-		{
-			nama: "Posyandu Dahlia",
-			tanggal: "Rabu, 17 Feb 2026",
-			jam: "08:00 - 11:00",
-		},
-		{
-			nama: "Posyandu Anggrek",
-			tanggal: "Kamis, 18 Feb 2026",
-			jam: "08:00 - 11:00",
-		},
-	];
-
-	// Sample data for education stats
-	const educationStats = {
-		siswa: {
-			tk: 125,
-			sd: 480,
-			smp: 210,
-			sma: 150,
-		},
-		sekolah: {
-			jumlah: 8,
-			guru: 42,
-		},
-	};
-
-	// Sample data for scholarships
-	const scholarshipData = {
-		penerima: 45,
-		dana: "Rp 1.200.000.000",
-		tahunAjaran: "2025/2026",
-	};
-
-	// Sample data for cultural events
-	const culturalEvents = [
-		{
-			nama: "Hari Kesaktian Pancasila",
-			tanggal: "1 Oktober 2025",
-			lokasi: "Balai Desa",
-		},
-		{
-			nama: "Festival Budaya Desa",
-			tanggal: "20 Mei 2026",
-			lokasi: "Lapangan Desa",
-		},
-		{
-			nama: "Perayaan HUT Desa",
-			tanggal: "17 Agustus 2026",
-			lokasi: "Balai Desa",
-		},
-	];
-
 	return (
 		<Stack gap="lg">
-			{/* Health Statistics Cards */}
+			{/* Top Summary Cards - 4 Grid */}
+			<SummaryCards />
+
+			{/* Second Row - 2 Column Grid */}
 			<Grid gutter="md">
-				<GridCol span={{ base: 12, sm: 6, md: 3 }}>
-					<Card
-						p="md"
-						radius="md"
-						withBorder
-						bg={dark ? "#141D34" : "white"}
-						style={{ borderColor: dark ? "#141D34" : "white" }}
-					>
-						<Group justify="space-between" align="center">
-							<Stack gap={0}>
-								<Text size="sm" c={dark ? "dark.3" : "dimmed"}>
-									Ibu Hamil Aktif
-								</Text>
-								<Text size="xl" fw={700} c={dark ? "dark.0" : "black"}>
-									{healthStats.ibuHamil}
-								</Text>
-							</Stack>
-							<ThemeIcon
-								variant="light"
-								color="darmasaba-blue"
-								size="xl"
-								radius="xl"
-							>
-								<IconHeartbeat size={24} />
-							</ThemeIcon>
-						</Group>
-					</Card>
+				{/* Left - Statistik Kesehatan */}
+				<GridCol span={{ base: 12, lg: 6 }}>
+					<HealthStats />
 				</GridCol>

-				<GridCol span={{ base: 12, sm: 6, md: 3 }}>
-					<Card
-						p="md"
-						radius="md"
-						withBorder
-						bg={dark ? "#141D34" : "white"}
-						style={{ borderColor: dark ? "#141D34" : "white" }}
-					>
-						<Group justify="space-between" align="center">
-							<Stack gap={0}>
-								<Text size="sm" c={dark ? "dark.3" : "dimmed"}>
-									Balita Terdaftar
-								</Text>
-								<Text size="xl" fw={700} c={dark ? "dark.0" : "black"}>
-									{healthStats.balita}
-								</Text>
-							</Stack>
-							<ThemeIcon
-								variant="light"
-								color="darmasaba-success"
-								size="xl"
-								radius="xl"
-							>
-								<IconBabyCarriage size={24} />
-							</ThemeIcon>
-						</Group>
-					</Card>
-				</GridCol>
-
-				<GridCol span={{ base: 12, sm: 6, md: 3 }}>
-					<Card
-						p="md"
-						radius="md"
-						withBorder
-						bg={dark ? "#141D34" : "white"}
-						style={{ borderColor: dark ? "#141D34" : "white" }}
-					>
-						<Group justify="space-between" align="center">
-							<Stack gap={0}>
-								<Text size="sm" c={dark ? "dark.3" : "dimmed"}>
-									Alert Stunting
-								</Text>
-								<Text size="xl" fw={700} c="red">
-									{healthStats.alertStunting}
-								</Text>
-							</Stack>
-							<ThemeIcon variant="light" color="red" size="xl" radius="xl">
-								<IconStethoscope size={24} />
-							</ThemeIcon>
-						</Group>
-					</Card>
-				</GridCol>
-
-				<GridCol span={{ base: 12, sm: 6, md: 3 }}>
-					<Card
-						p="md"
-						radius="md"
-						withBorder
-						bg={dark ? "#141D34" : "white"}
-						style={{ borderColor: dark ? "#141D34" : "white" }}
-					>
-						<Group justify="space-between" align="center">
-							<Stack gap={0}>
-								<Text size="sm" c={dark ? "dark.3" : "dimmed"}>
-									Posyandu Aktif
-								</Text>
-								<Text size="xl" fw={700} c={dark ? "dark.0" : "black"}>
-									{healthStats.posyanduAktif}
-								</Text>
-							</Stack>
-							<ThemeIcon
-								variant="light"
-								color="darmasaba-warning"
-								size="xl"
-								radius="xl"
-							>
-								<IconMedicalCross size={24} />
-							</ThemeIcon>
-						</Group>
-					</Card>
+				{/* Right - Jadwal Posyandu */}
+				<GridCol span={{ base: 12, lg: 6 }}>
+					<PosyanduSchedule />
 				</GridCol>
 			</Grid>

-			{/* Health Progress Bars */}
-			<Card
-				p="md"
-				radius="md"
-				withBorder
-				bg={dark ? "#141D34" : "white"}
-				style={{ borderColor: dark ? "#141D34" : "white" }}
-			>
-				<Title order={3} mb="md" c={dark ? "dark.0" : "black"}>
-					Statistik Kesehatan
-				</Title>
-				<Stack gap="md">
-					{healthProgress.map((item, index) => (
-						<div key={index}>
-							<Group justify="space-between" mb={5}>
-								<Text size="sm" fw={500} c={dark ? "dark.0" : "black"}>
-									{item.label}
-								</Text>
-								<Text size="sm" fw={600} c={dark ? "dark.0" : "black"}>
-									{item.value}%
-								</Text>
-							</Group>
-							<Progress
-								value={item.value}
-								size="lg"
-								radius="xl"
-								color={item.color}
-							/>
-						</div>
-					))}
-				</Stack>
-			</Card>
-
+			{/* Third Row - 2 Column Grid */}
 			<Grid gutter="md">
-				{/* Jadwal Posyandu */}
+				{/* Left - Pendidikan */}
 				<GridCol span={{ base: 12, lg: 6 }}>
-					<Card
-						p="md"
-						radius="md"
-						withBorder
-						bg={dark ? "#141D34" : "white"}
-						style={{ borderColor: dark ? "#141D34" : "white" }}
-					>
-						<Title order={3} mb="md" c={dark ? "dark.0" : "black"}>
-							Jadwal Posyandu
-						</Title>
-						<Stack gap="sm">
-							{posyanduSchedule.map((item, index) => (
-								<Card
-									key={index}
-									p="md"
-									radius="md"
-									withBorder
-									bg={dark ? "#263852ff" : "#F1F5F9"}
-									style={{ borderColor: dark ? "#263852ff" : "#F1F5F9" }}
-									h="100%"
-								>
-									<Group justify="space-between">
-										<Stack gap={0}>
-											<Text fw={500} c={dark ? "dark.0" : "black"}>
-												{item.nama}
-											</Text>
-											<Text size="sm" c={dark ? "dark.0" : "black"}>
-												{item.tanggal}
-											</Text>
-										</Stack>
-										<Badge variant="light" color="darmasaba-blue">
-											{item.jam}
-										</Badge>
-									</Group>
-								</Card>
-							))}
-						</Stack>
-					</Card>
+					<Pendidikan />
 				</GridCol>

-				{/* Pendidikan */}
+				{/* Right - Beasiswa Desa */}
 				<GridCol span={{ base: 12, lg: 6 }}>
-					<Card
-						p="md"
-						radius="md"
-						withBorder
-						bg={dark ? "#141D34" : "white"}
-						style={{ borderColor: dark ? "#141D34" : "white" }}
-						h="100%"
-					>
-						<Title order={3} mb="md" c={dark ? "dark.0" : "black"}>
-							Pendidikan
-						</Title>
-						<Stack gap="md">
-							<Group justify="space-between">
-								<Text fw={500} c={dark ? "dark.0" : "black"}>
-									TK / PAUD
-								</Text>
-								<Text fw={700} c={dark ? "dark.0" : "black"}>
-									{educationStats.siswa.tk}
-								</Text>
-							</Group>
-							<Group justify="space-between">
-								<Text fw={500} c={dark ? "dark.0" : "black"}>
-									SD
-								</Text>
-								<Text fw={700} c={dark ? "dark.0" : "black"}>
-									{educationStats.siswa.sd}
-								</Text>
-							</Group>
-							<Group justify="space-between">
-								<Text fw={500} c={dark ? "dark.0" : "black"}>
-									SMP
-								</Text>
-								<Text fw={700} c={dark ? "dark.0" : "black"}>
-									{educationStats.siswa.smp}
-								</Text>
-							</Group>
-							<Group justify="space-between">
-								<Text fw={500} c={dark ? "dark.0" : "black"}>
-									SMA
-								</Text>
-								<Text fw={700} c={dark ? "dark.0" : "black"}>
-									{educationStats.siswa.sma}
-								</Text>
-							</Group>
-
-							<Card
-								withBorder
-								radius="md"
-								p="md"
-								mt="md"
-								bg={dark ? "#263852ff" : "#F1F5F9"}
-								style={{ borderColor: dark ? "#263852ff" : "#F1F5F9" }}
-							>
-								<Group justify="space-between">
-									<Text fw={500} c={dark ? "dark.0" : "black"}>
-										Jumlah Lembaga Pendidikan
-									</Text>
-									<Text fw={700} c={dark ? "dark.0" : "black"}>
-										{educationStats.sekolah.jumlah}
-									</Text>
-								</Group>
-								<Group justify="space-between" mt="sm">
-									<Text fw={500} c={dark ? "dark.0" : "black"}>
-										Jumlah Tenaga Pengajar
-									</Text>
-									<Text fw={700} c={dark ? "dark.0" : "black"}>
-										{educationStats.sekolah.guru}
-									</Text>
-								</Group>
-							</Card>
-						</Stack>
-					</Card>
+					<Beasiswa />
 				</GridCol>
 			</Grid>

-			<Grid gutter="md">
-				{/* Beasiswa Desa */}
-				<GridCol span={{ base: 12, lg: 6 }}>
-					<Card
-						p="md"
-						radius="md"
-						withBorder
-						bg={dark ? "#141D34" : "white"}
-						style={{ borderColor: dark ? "#141D34" : "white" }}
-						h="100%"
-					>
-						<Group justify="space-between" align="center">
-							<Stack gap={0}>
-								<Text size="sm" c={dark ? "dark.3" : "dimmed"}>
-									Beasiswa Desa
-								</Text>
-								<Text size="xl" fw={700} c={dark ? "dark.0" : "black"}>
-									Penerima: {scholarshipData.penerima}
-								</Text>
-							</Stack>
-							<ThemeIcon
-								variant="light"
-								color="darmasaba-success"
-								size="xl"
-								radius="xl"
-							>
-								<IconAward size={24} />
-							</ThemeIcon>
-						</Group>
-						<Text mt="md" c={dark ? "dark.0" : "black"}>
-							Dana Tersalurkan:{" "}
-							<Text span fw={700}>
-								{scholarshipData.dana}
-							</Text>
-						</Text>
-						<Text mt="sm" c={dark ? "dark.3" : "dimmed"}>
-							Tahun Ajaran: {scholarshipData.tahunAjaran}
-						</Text>
-					</Card>
-				</GridCol>
-
-				{/* Kalender Event Budaya */}
-				<GridCol span={{ base: 12, lg: 6 }}>
-					<Card
-						p="md"
-						radius="md"
-						withBorder
-						bg={dark ? "#141D34" : "white"}
-						style={{ borderColor: dark ? "#141D34" : "white" }}
-						h="100%"
-					>
-						<Title order={3} mb="md" c={dark ? "dark.0" : "black"}>
-							Kalender Event Budaya
-						</Title>
-						<List spacing="sm">
-							{culturalEvents.map((event, index) => (
-								<List.Item
-									key={index}
-									icon={
-										<ThemeIcon color="darmasaba-blue" size={24} radius="xl">
-											<IconCalendarEvent size={12} />
-										</ThemeIcon>
-									}
-								>
-									<Group justify="space-between">
-										<Text fw={500} c={dark ? "dark.0" : "black"}>
-											{event.nama}
-										</Text>
-										<Text size="sm" c={dark ? "dark.3" : "dimmed"}>
-											{event.lokasi}
-										</Text>
-									</Group>
-									<Text size="sm" c={dark ? "dark.3" : "dimmed"}>
-										{event.tanggal}
-									</Text>
-								</List.Item>
-							))}
-						</List>
-					</Card>
-				</GridCol>
-			</Grid>
+			{/* Bottom Section - Event Budaya */}
+			<EventCalendar />
 		</Stack>
 	);
 };
--- a/src/components/sosial/beasiswa.tsx
+++ b/src/components/sosial/beasiswa.tsx
@@ -0,0 +1,76 @@
+import {
+	Card,
+	Group,
+	Stack,
+	Text,
+	ThemeIcon,
+	Title,
+	useMantineColorScheme,
+} from "@mantine/core";
+import { IconAward } from "@tabler/icons-react";
+
+interface ScholarshipData {
+	penerima: number;
+	dana: string;
+	tahunAjaran: string;
+}
+
+interface BeasiswaProps {
+	data?: ScholarshipData;
+}
+
+export const Beasiswa = ({ data }: BeasiswaProps) => {
+	const { colorScheme } = useMantineColorScheme();
+	const dark = colorScheme === "dark";
+
+	const defaultData: ScholarshipData = {
+		penerima: 45,
+		dana: "Rp 1.200.000.000",
+		tahunAjaran: "2025/2026",
+	};
+
+	const displayData = data || defaultData;
+
+	return (
+		<Card
+			p="md"
+			radius="xl"
+			withBorder
+			shadow="sm"
+			bg={dark ? "#141D34" : "white"}
+			style={{ borderColor: dark ? "#141D34" : "#e5e7eb" }}
+			h={"100%"}
+		>
+			<Group justify="space-between" align="center">
+				<Stack gap={2}>
+					<Text size="sm" c={dark ? "dark.3" : "dimmed"} fw={500}>
+						Beasiswa Desa
+					</Text>
+					<Text size="xl" fw={700} c={dark ? "dark.0" : "#1e3a5f"}>
+						Penerima: {displayData.penerima}
+					</Text>
+				</Stack>
+				<ThemeIcon
+					variant="light"
+					color="darmasaba-success"
+					size="xl"
+					radius="xl"
+				>
+					<IconAward size={24} />
+				</ThemeIcon>
+			</Group>
+			<Stack gap="xs" mt="md">
+				<Group justify="space-between">
+					<Text c={dark ? "dark.3" : "dimmed"}>Dana Tersalurkan:</Text>
+					<Text fw={700} c={dark ? "dark.0" : "#1e3a5f"}>
+						{displayData.dana}
+					</Text>
+				</Group>
+				<Group justify="space-between">
+					<Text c={dark ? "dark.3" : "dimmed"}>Tahun Ajaran:</Text>
+					<Text c={dark ? "dark.0" : "#1e3a5f"}>{displayData.tahunAjaran}</Text>
+				</Group>
+			</Stack>
+		</Card>
+	);
+};
--- a/src/components/sosial/event-calendar.tsx
+++ b/src/components/sosial/event-calendar.tsx
@@ -0,0 +1,101 @@
+import {
+	Card,
+	Group,
+	Stack,
+	Text,
+	ThemeIcon,
+	Title,
+	useMantineColorScheme,
+} from "@mantine/core";
+import { IconCalendarEvent } from "@tabler/icons-react";
+
+interface EventItem {
+	id: string;
+	nama: string;
+	tanggal: string;
+	lokasi: string;
+}
+
+interface EventCalendarProps {
+	data?: EventItem[];
+}
+
+export const EventCalendar = ({ data }: EventCalendarProps) => {
+	const { colorScheme } = useMantineColorScheme();
+	const dark = colorScheme === "dark";
+
+	const defaultData: EventItem[] = [
+		{
+			id: "1",
+			nama: "Hari Kesaktian Pancasila",
+			tanggal: "1 Oktober 2025",
+			lokasi: "Balai Desa",
+		},
+		{
+			id: "2",
+			nama: "Festival Budaya Desa",
+			tanggal: "20 Mei 2026",
+			lokasi: "Lapangan Desa",
+		},
+		{
+			id: "3",
+			nama: "Perayaan HUT Desa",
+			tanggal: "17 Agustus 2026",
+			lokasi: "Balai Desa",
+		},
+	];
+
+	const displayData = data || defaultData;
+
+	return (
+		<Card
+			p="md"
+			radius="xl"
+			withBorder
+			shadow="sm"
+			bg={dark ? "#141D34" : "white"}
+			style={{ borderColor: dark ? "#141D34" : "#e5e7eb" }}
+		>
+			<Title order={3} mb="md" c={dark ? "dark.0" : "#1e3a5f"}>
+				Kalender Event Budaya
+			</Title>
+			<Stack gap="sm">
+				{displayData.map((event) => (
+					<Card
+						key={event.id}
+						p="md"
+						radius="md"
+						withBorder
+						bg={dark ? "#263852ff" : "#F1F5F9"}
+						style={{ borderColor: dark ? "#263852ff" : "#F1F5F9" }}
+						hoverable
+					>
+						<Group justify="space-between" mb="xs">
+							<Group gap="sm" align="center">
+								<ThemeIcon
+									color="darmasaba-blue"
+									size="md"
+									radius="xl"
+									variant="light"
+								>
+									<IconCalendarEvent size={16} />
+								</ThemeIcon>
+								<Text fw={600} c={dark ? "dark.0" : "#1e3a5f"}>
+									{event.nama}
+								</Text>
+							</Group>
+							<Text size="sm" c={dark ? "dark.3" : "dimmed"} fw={500}>
+								{event.lokasi}
+							</Text>
+						</Group>
+						<Group pl={36}>
+							<Text size="sm" c={dark ? "dark.4" : "gray.6"}>
+								{event.tanggal}
+							</Text>
+						</Group>
+					</Card>
+				))}
+			</Stack>
+		</Card>
+	);
+};
--- a/src/components/sosial/health-stats.tsx
+++ b/src/components/sosial/health-stats.tsx
@@ -0,0 +1,73 @@
+import {
+	Card,
+	Group,
+	Progress,
+	Stack,
+	Text,
+	Title,
+	useMantineColorScheme,
+} from "@mantine/core";
+
+interface HealthProgressItem {
+	label: string;
+	value: number;
+	color: string;
+}
+
+interface HealthStatsProps {
+	data?: HealthProgressItem[];
+}
+
+export const HealthStats = ({ data }: HealthStatsProps) => {
+	const { colorScheme } = useMantineColorScheme();
+	const dark = colorScheme === "dark";
+
+	const defaultData: HealthProgressItem[] = [
+		{ label: "Imunisasi Lengkap", value: 92, color: "green" },
+		{ label: "Pemeriksaan Rutin", value: 88, color: "blue" },
+		{ label: "Gizi Baik", value: 86, color: "teal" },
+		{ label: "Target Stunting", value: 14, color: "red" },
+	];
+
+	const displayData = data || defaultData;
+
+	return (
+		<Card
+			p="md"
+			radius="xl"
+			withBorder
+			shadow="sm"
+			bg={dark ? "#141D34" : "white"}
+			style={{ borderColor: dark ? "#141D34" : "#e5e7eb" }}
+			h={"100%"}
+		>
+			<Title order={3} mb="md" c={dark ? "dark.0" : "#1e3a5f"}>
+				Statistik Kesehatan
+			</Title>
+			<Stack gap="md">
+				{displayData.map((item, index) => (
+					<div key={index}>
+						<Group justify="space-between" mb={5}>
+							<Text size="sm" fw={500} c={dark ? "dark.0" : "#1e3a5f"}>
+								{item.label}
+							</Text>
+							<Text
+								size="sm"
+								fw={600}
+								c={item.color === "red" ? "red" : dark ? "dark.0" : "#1e3a5f"}
+							>
+								{item.value}%
+							</Text>
+						</Group>
+						<Progress
+							value={item.value}
+							size="lg"
+							radius="xl"
+							color={item.color}
+						/>
+					</div>
+				))}
+			</Stack>
+		</Card>
+	);
+};
--- a/src/components/sosial/pendidikan.tsx
+++ b/src/components/sosial/pendidikan.tsx
@@ -0,0 +1,120 @@
+import {
+	Card,
+	Group,
+	Stack,
+	Text,
+	Title,
+	useMantineColorScheme,
+} from "@mantine/core";
+
+interface EducationData {
+	siswa: {
+		tk: number;
+		sd: number;
+		smp: number;
+		sma: number;
+	};
+	sekolah: {
+		jumlah: number;
+		guru: number;
+	};
+}
+
+interface PendidikanProps {
+	data?: EducationData;
+}
+
+export const Pendidikan = ({ data }: PendidikanProps) => {
+	const { colorScheme } = useMantineColorScheme();
+	const dark = colorScheme === "dark";
+
+	const defaultData: EducationData = {
+		siswa: {
+			tk: 125,
+			sd: 480,
+			smp: 210,
+			sma: 150,
+		},
+		sekolah: {
+			jumlah: 8,
+			guru: 42,
+		},
+	};
+
+	const displayData = data || defaultData;
+
+	return (
+		<Card
+			p="md"
+			radius="xl"
+			withBorder
+			shadow="sm"
+			bg={dark ? "#141D34" : "white"}
+			style={{ borderColor: dark ? "#141D34" : "#e5e7eb" }}
+		>
+			<Title order={3} mb="md" c={dark ? "dark.0" : "#1e3a5f"}>
+				Pendidikan
+			</Title>
+			<Stack gap="md">
+				<Group justify="space-between">
+					<Text fw={500} c={dark ? "dark.0" : "#1e3a5f"}>
+						TK / PAUD
+					</Text>
+					<Text fw={700} c={dark ? "dark.0" : "#1e3a5f"}>
+						{displayData.siswa.tk}
+					</Text>
+				</Group>
+				<Group justify="space-between">
+					<Text fw={500} c={dark ? "dark.0" : "#1e3a5f"}>
+						SD
+					</Text>
+					<Text fw={700} c={dark ? "dark.0" : "#1e3a5f"}>
+						{displayData.siswa.sd}
+					</Text>
+				</Group>
+				<Group justify="space-between">
+					<Text fw={500} c={dark ? "dark.0" : "#1e3a5f"}>
+						SMP
+					</Text>
+					<Text fw={700} c={dark ? "dark.0" : "#1e3a5f"}>
+						{displayData.siswa.smp}
+					</Text>
+				</Group>
+				<Group justify="space-between">
+					<Text fw={500} c={dark ? "dark.0" : "#1e3a5f"}>
+						SMA
+					</Text>
+					<Text fw={700} c={dark ? "dark.0" : "#1e3a5f"}>
+						{displayData.siswa.sma}
+					</Text>
+				</Group>
+
+				<Card
+					withBorder
+					radius="md"
+					p="md"
+					mt="md"
+					bg={dark ? "#263852ff" : "#F1F5F9"}
+					style={{ borderColor: dark ? "#263852ff" : "#F1F5F9" }}
+				>
+					<Group justify="space-between">
+						<Text fw={500} c={dark ? "dark.0" : "#1e3a5f"}>
+							Jumlah Lembaga Pendidikan
+						</Text>
+						<Text fw={700} c={dark ? "dark.0" : "#1e3a5f"}>
+							{displayData.sekolah.jumlah}
+						</Text>
+					</Group>
+					<Group justify="space-between" mt="sm">
+						<Text fw={500} c={dark ? "dark.0" : "#1e3a5f"}>
+							Jumlah Tenaga Pengajar
+						</Text>
+						<Text fw={700} c={dark ? "dark.0" : "#1e3a5f"}>
+							{displayData.sekolah.guru}
+						</Text>
+					</Group>
+				</Card>
+			</Stack>
+		</Card>
+	);
+};
--- a/src/components/sosial/posyandu-schedule.tsx
+++ b/src/components/sosial/posyandu-schedule.tsx
@@ -0,0 +1,96 @@
+import {
+	Badge,
+	Card,
+	Group,
+	Stack,
+	Text,
+	Title,
+	useMantineColorScheme,
+} from "@mantine/core";
+
+interface PosyanduItem {
+	id: string;
+	nama: string;
+	tanggal: string;
+	jam: string;
+}
+
+interface PosyanduScheduleProps {
+	data?: PosyanduItem[];
+}
+
+export const PosyanduSchedule = ({ data }: PosyanduScheduleProps) => {
+	const { colorScheme } = useMantineColorScheme();
+	const dark = colorScheme === "dark";
+
+	const defaultData: PosyanduItem[] = [
+		{
+			id: "1",
+			nama: "Posyandu Mawar",
+			tanggal: "Senin, 15 Feb 2026",
+			jam: "08:00 - 11:00",
+		},
+		{
+			id: "2",
+			nama: "Posyandu Melati",
+			tanggal: "Selasa, 16 Feb 2026",
+			jam: "08:00 - 11:00",
+		},
+		{
+			id: "3",
+			nama: "Posyandu Dahlia",
+			tanggal: "Rabu, 17 Feb 2026",
+			jam: "08:00 - 11:00",
+		},
+		{
+			id: "4",
+			nama: "Posyandu Anggrek",
+			tanggal: "Kamis, 18 Feb 2026",
+			jam: "08:00 - 11:00",
+		},
+	];
+
+	const displayData = data || defaultData;
+
+	return (
+		<Card
+			p="md"
+			radius="xl"
+			withBorder
+			shadow="sm"
+			bg={dark ? "#141D34" : "white"}
+			style={{ borderColor: dark ? "#141D34" : "#e5e7eb" }}
+		>
+			<Title order={3} mb="md" c={dark ? "dark.0" : "#1e3a5f"}>
+				Jadwal Posyandu
+			</Title>
+			<Stack gap="sm">
+				{displayData.map((item) => (
+					<Card
+						key={item.id}
+						p="md"
+						radius="md"
+						withBorder
+						bg={dark ? "#263852ff" : "#F1F5F9"}
+						style={{ borderColor: dark ? "#263852ff" : "#F1F5F9" }}
+						hoverable
+					>
+						<Group justify="space-between">
+							<Stack gap={0}>
+								<Text fw={600} c={dark ? "dark.0" : "#1e3a5f"}>
+									{item.nama}
+								</Text>
+								<Text size="sm" c={dark ? "dark.3" : "dimmed"}>
+									{item.tanggal}
+								</Text>
+							</Stack>
+							<Badge variant="light" color="darmasaba-blue" size="md">
+								{item.jam}
+							</Badge>
+						</Group>
+					</Card>
+				))}
+			</Stack>
+		</Card>
+	);
+};
--- a/src/components/sosial/summary-cards.tsx
+++ b/src/components/sosial/summary-cards.tsx
@@ -0,0 +1,140 @@
+import {
+	Card,
+	Grid,
+	GridCol,
+	Group,
+	Stack,
+	Text,
+	ThemeIcon,
+	useMantineColorScheme,
+} from "@mantine/core";
+import {
+	IconBabyCarriage,
+	IconHeartbeat,
+	IconMedicalCross,
+	IconStethoscope,
+} from "@tabler/icons-react";
+
+interface SummaryCardProps {
+	title: string;
+	value: number;
+	subtitle?: string;
+	icon: React.ReactNode;
+	color: string;
+	highlight?: boolean;
+	backgroundColor: string;
+}
+
+const SummaryCard = ({
+	title,
+	value,
+	subtitle,
+	icon,
+	color,
+	highlight = false,
+	backgroundColor,
+}: SummaryCardProps) => {
+	const { colorScheme } = useMantineColorScheme();
+	const dark = colorScheme === "dark";
+
+	return (
+		<Card
+			p="md"
+			radius="xl"
+			withBorder
+			shadow="sm"
+			bg={dark ? "#141D34" : "white"}
+			style={{ borderColor: dark ? "#141D34" : "#e5e7eb" }}
+		>
+			<Group justify="space-between" align="center">
+				<Stack gap={2}>
+					<Text size="sm" c={dark ? "dark.3" : "dimmed"} fw={500}>
+						{title}
+					</Text>
+					<Text
+						size="xl"
+						fw={700}
+						c={highlight ? "red" : dark ? "dark.0" : "#1e3a5f"}
+					>
+						{value}
+					</Text>
+					{subtitle && (
+						<Text size="xs" c={dark ? "dark.4" : "gray.6"}>
+							{subtitle}
+						</Text>
+					)}
+				</Stack>
+				<ThemeIcon bg={backgroundColor} color={color} size="xl" radius="xl">
+					{icon}
+				</ThemeIcon>
+			</Group>
+		</Card>
+	);
+};
+
+interface HealthSummaryData {
+	ibuHamil: number;
+	balita: number;
+	alertStunting: number;
+	posyanduAktif: number;
+}
+
+interface SummaryCardsProps {
+	data?: HealthSummaryData;
+}
+
+export const SummaryCards = ({ data }: SummaryCardsProps) => {
+	const defaultData: HealthSummaryData = {
+		ibuHamil: 87,
+		balita: 342,
+		alertStunting: 12,
+		posyanduAktif: 8,
+	};
+
+	const displayData = data || defaultData;
+
+	return (
+		<Grid gutter="md">
+			<GridCol span={{ base: 12, sm: 6, lg: 3 }}>
+				<SummaryCard
+					title="Ibu Hamil Aktif"
+					value={displayData.ibuHamil}
+					subtitle="Aktif"
+					icon={<IconHeartbeat size={20} />}
+					color="white"
+					backgroundColor="#1E3A5F"
+				/>
+			</GridCol>
+			<GridCol span={{ base: 12, sm: 6, lg: 3 }}>
+				<SummaryCard
+					title="Balita Terdaftar"
+					value={displayData.balita}
+					subtitle="Terdaftar"
+					icon={<IconBabyCarriage size={20} />}
+					color="white"
+					backgroundColor="#1E3A5F"
+				/>
+			</GridCol>
+			<GridCol span={{ base: 12, sm: 6, lg: 3 }}>
+				<SummaryCard
+					title="Alert Stunting"
+					value={displayData.alertStunting}
+					subtitle="Perhatian"
+					icon={<IconStethoscope size={20} />}
+					color="white"
+					backgroundColor="#1E3A5F"
+				/>
+			</GridCol>
+			<GridCol span={{ base: 12, sm: 6, lg: 3 }}>
+				<SummaryCard
+					title="Posyandu Aktif"
+					value={displayData.posyanduAktif}
+					subtitle="Aktif"
+					icon={<IconMedicalCross size={20} />}
+					color="white"
+					backgroundColor="#1E3A5F"
+				/>
+			</GridCol>
+		</Grid>
+	);
+};
--- a/src/components/ui/help-card.tsx
+++ b/src/components/ui/help-card.tsx
@@ -51,9 +51,7 @@ export const HelpCard = ({
 					{icon && (
 						<div
 							style={{
-								backgroundColor: isDark
-									? theme.colors.blue[8]
-									: theme.colors.blue[0],
+								backgroundColor: isDark ? "#263852ff" : "#1E3A5F",
 								borderRadius: "8px",
 								padding: "8px",
 								display: "flex",
--- a/src/components/umkm/header-toggle.tsx
+++ b/src/components/umkm/header-toggle.tsx
@@ -0,0 +1,75 @@
+import {
+	Button,
+	Card,
+	Group,
+	Title,
+	useMantineColorScheme,
+} from "@mantine/core";
+import { useSnapshot } from "valtio";
+import { setRange, umkmStore } from "../../store/umkm";
+
+type TimeRange = "minggu" | "bulan";
+
+interface HeaderToggleProps {
+	title?: string;
+	onRangeChange?: (range: TimeRange) => void;
+}
+
+export const HeaderToggle = ({
+	title = "Update Penjualan Produk",
+	onRangeChange,
+}: HeaderToggleProps) => {
+	const { colorScheme } = useMantineColorScheme();
+	const dark = colorScheme === "dark";
+	const { selectedRange } = useSnapshot(umkmStore);
+
+	const handleRangeChange = (range: TimeRange) => {
+		setRange(range);
+		onRangeChange?.(range);
+	};
+
+	return (
+		<Card
+			p="md"
+			radius="xl"
+			withBorder
+			shadow="sm"
+			bg={dark ? "#1e3a5f" : "#1e3a5f"}
+			style={{ borderColor: dark ? "#1e3a5f" : "#1e3a5f" }}
+		>
+			<Group justify="space-between" align="center" px="md" py="xs">
+				<Title order={3} c="white">
+					{title}
+				</Title>
+				<Group gap="xs">
+					<Button
+						variant={selectedRange === "minggu" ? "white" : "transparent"}
+						onClick={() => handleRangeChange("minggu")}
+						c={selectedRange === "minggu" ? "#1e3a5f" : "white"}
+						fw={600}
+						radius="xl"
+						size="sm"
+						style={{
+							opacity: selectedRange === "minggu" ? 1 : 0.8,
+						}}
+					>
+						Minggu ini
+					</Button>
+					<Button
+						variant={selectedRange === "bulan" ? "white" : "transparent"}
+						onClick={() => handleRangeChange("bulan")}
+						c={selectedRange === "bulan" ? "#1e3a5f" : "white"}
+						fw={600}
+						radius="xl"
+						size="sm"
+						style={{
+							opacity: selectedRange === "bulan" ? 1 : 0.8,
+						}}
+					>
+						Bulan ini
+					</Button>
+				</Group>
+			</Group>
+		</Card>
+	);
+};
--- a/src/components/umkm/produk-unggulan.tsx
+++ b/src/components/umkm/produk-unggulan.tsx
@@ -0,0 +1,100 @@
+import { Card, Group, Stack, Text, useMantineColorScheme } from "@mantine/core";
+
+interface MetricCardProps {
+	title: string;
+	value: string | number;
+	trend?: {
+		value: number;
+		label: string;
+	};
+}
+
+const MetricCard = ({ title, value, trend }: MetricCardProps) => {
+	const { colorScheme } = useMantineColorScheme();
+	const dark = colorScheme === "dark";
+
+	return (
+		<Group justify="space-between" align="center">
+			<Text size="sm" c={dark ? "dark.3" : "dimmed"} fw={500}>
+				{title}
+			</Text>
+			<Stack gap={0} align="flex-end">
+				<Text size="lg" fw={700} c={dark ? "dark.0" : "#1e3a5f"}>
+					{value}
+				</Text>
+				{trend && (
+					<Text size="xs" c={trend.value >= 0 ? "green" : "red"} fw={600}>
+						{trend.value >= 0 ? "↑" : "↓"} {Math.abs(trend.value)}%{" "}
+						{trend.label}
+					</Text>
+				)}
+			</Stack>
+		</Group>
+	);
+};
+
+interface ProdukUnggulanProps {
+	data?: {
+		totalPenjualan: number;
+		produkAktif: number;
+		totalTransaksi: number;
+		trend?: {
+			value: number;
+			label: string;
+		};
+	};
+}
+
+export const ProdukUnggulan = ({ data }: ProdukUnggulanProps) => {
+	const { colorScheme } = useMantineColorScheme();
+	const dark = colorScheme === "dark";
+
+	const defaultData = {
+		totalPenjualan: 30900000,
+		produkAktif: 7,
+		totalTransaksi: 500,
+		trend: {
+			value: 18,
+			label: "vs bulan lalu",
+		},
+	};
+
+	const displayData = data || defaultData;
+
+	const formatCurrency = (value: number) => {
+		if (value >= 1000000) {
+			return `Rp ${(value / 1000000).toFixed(1)}M`;
+		}
+		if (value >= 1000) {
+			return `Rp ${(value / 1000).toFixed(0)}K`;
+		}
+		return `Rp ${value.toLocaleString()}`;
+	};
+
+	return (
+		<Card
+			p="md"
+			radius="xl"
+			withBorder
+			shadow="sm"
+			bg={dark ? "#141D34" : "white"}
+			style={{ borderColor: dark ? "#141D34" : "#e5e7eb" }}
+		>
+			<Stack gap="lg">
+				<MetricCard
+					title="Total Penjualan"
+					value={formatCurrency(displayData.totalPenjualan)}
+					trend={displayData.trend}
+				/>
+				<MetricCard
+					title="Produk Aktif"
+					value={`${displayData.produkAktif} kategori`}
+				/>
+				<MetricCard
+					title="Total Transaksi"
+					value={`${displayData.totalTransaksi} transaksi`}
+				/>
+			</Stack>
+		</Card>
+	);
+};
--- a/src/components/umkm/sales-table.tsx
+++ b/src/components/umkm/sales-table.tsx
@@ -0,0 +1,260 @@
+import {
+	Badge,
+	Button,
+	Card,
+	Group,
+	Select,
+	Table,
+	Text,
+	Title,
+	useMantineColorScheme,
+} from "@mantine/core";
+import { IconArrowDown, IconArrowUp } from "@tabler/icons-react";
+
+export interface SalesData {
+	id: string;
+	produk: string;
+	penjualanBulanIni: number;
+	bulanLalu: number;
+	trend: number;
+	volume: string;
+	stok: number;
+	unit: string;
+}
+
+interface SalesTableProps {
+	data?: SalesData[];
+	onDetailClick?: (product: SalesData) => void;
+}
+
+export const SalesTable = ({ data, onDetailClick }: SalesTableProps) => {
+	const { colorScheme } = useMantineColorScheme();
+	const dark = colorScheme === "dark";
+
+	const defaultData: SalesData[] = [
+		{
+			id: "1",
+			produk: "Beras Premium Organik",
+			penjualanBulanIni: 8500000,
+			bulanLalu: 7600000,
+			trend: 12,
+			volume: "650 Kg",
+			stok: 850,
+			unit: "Kg",
+		},
+		{
+			id: "2",
+			produk: "Keripik Singkong",
+			penjualanBulanIni: 4200000,
+			bulanLalu: 3800000,
+			trend: 11,
+			volume: "320 Kg",
+			stok: 120,
+			unit: "Kg",
+		},
+		{
+			id: "3",
+			produk: "Madu Alami",
+			penjualanBulanIni: 3750000,
+			bulanLalu: 4100000,
+			trend: -9,
+			volume: "150 Liter",
+			stok: 45,
+			unit: "Liter",
+		},
+		{
+			id: "4",
+			produk: "Kecap Tradisional",
+			penjualanBulanIni: 2800000,
+			bulanLalu: 2500000,
+			trend: 12,
+			volume: "280 Botol",
+			stok: 95,
+			unit: "Botol",
+		},
+		{
+			id: "5",
+			produk: "Sambal Bu Rudy",
+			penjualanBulanIni: 2100000,
+			bulanLalu: 2300000,
+			trend: -9,
+			volume: "180 Botol",
+			stok: 35,
+			unit: "Botol",
+		},
+	];
+
+	const displayData = data || defaultData;
+
+	const formatCurrency = (value: number) => {
+		if (value >= 1000000) {
+			return `Rp ${(value / 1000000).toFixed(1)}M`;
+		}
+		if (value >= 1000) {
+			return `Rp ${(value / 1000).toFixed(0)}K`;
+		}
+		return `Rp ${value.toLocaleString()}`;
+	};
+
+	const getStockStatus = (stock: number) => {
+		if (stock > 200) return { color: "green", label: "Aman" };
+		if (stock > 50) return { color: "yellow", label: "Sedang" };
+		return { color: "red", label: "Rendah" };
+	};
+
+	return (
+		<Card
+			p="md"
+			radius="xl"
+			withBorder
+			shadow="sm"
+			bg={dark ? "#141D34" : "white"}
+			style={{ borderColor: dark ? "#141D34" : "#e5e7eb" }}
+		>
+			<Group justify="space-between" mb="md">
+				<Title order={4} c={dark ? "dark.0" : "#1e3a5f"}>
+					Detail Penjualan Produk
+				</Title>
+				<Group gap="xs">
+					<Select
+						placeholder="Filter kategori"
+						data={[
+							{ value: "semua", label: "Semua Kategori" },
+							{ value: "makanan", label: "Makanan" },
+							{ value: "minuman", label: "Minuman" },
+							{ value: "kerajinan", label: "Kerajinan" },
+						]}
+						defaultValue="semua"
+						w={180}
+						size="sm"
+					/>
+					<Select
+						placeholder="Filter UMKM"
+						data={[
+							{ value: "semua", label: "Semua UMKM" },
+							{ value: "umkm1", label: "Warung Pak Joko" },
+							{ value: "umkm2", label: "Ibu Sari Snack" },
+						]}
+						defaultValue="semua"
+						w={180}
+						size="sm"
+					/>
+				</Group>
+			</Group>
+
+			<Table
+				stickyHeader
+				stickyHeaderOffset={60}
+				highlightOnHover
+				withRowBorders={false}
+				verticalSpacing="sm"
+			>
+				<Table.Thead>
+					<Table.Tr>
+						<Table.Th style={{ backgroundColor: dark ? "#1e3a5f" : "#f8f9fa" }}>
+							<Text size="sm" fw={600} c={dark ? "white" : "dimmed"}>
+								Produk
+							</Text>
+						</Table.Th>
+						<Table.Th style={{ backgroundColor: dark ? "#1e3a5f" : "#f8f9fa" }}>
+							<Text size="sm" fw={600} c={dark ? "white" : "dimmed"}>
+								Penjualan Bulan Ini
+							</Text>
+						</Table.Th>
+						<Table.Th style={{ backgroundColor: dark ? "#1e3a5f" : "#f8f9fa" }}>
+							<Text size="sm" fw={600} c={dark ? "white" : "dimmed"}>
+								Bulan Lalu
+							</Text>
+						</Table.Th>
+						<Table.Th style={{ backgroundColor: dark ? "#1e3a5f" : "#f8f9fa" }}>
+							<Text size="sm" fw={600} c={dark ? "white" : "dimmed"}>
+								Trend
+							</Text>
+						</Table.Th>
+						<Table.Th style={{ backgroundColor: dark ? "#1e3a5f" : "#f8f9fa" }}>
+							<Text size="sm" fw={600} c={dark ? "white" : "dimmed"}>
+								Volume
+							</Text>
+						</Table.Th>
+						<Table.Th style={{ backgroundColor: dark ? "#1e3a5f" : "#f8f9fa" }}>
+							<Text size="sm" fw={600} c={dark ? "white" : "dimmed"}>
+								Stok
+							</Text>
+						</Table.Th>
+						<Table.Th style={{ backgroundColor: dark ? "#1e3a5f" : "#f8f9fa" }}>
+							<Text size="sm" fw={600} c={dark ? "white" : "dimmed"}>
+								Aksi
+							</Text>
+						</Table.Th>
+					</Table.Tr>
+				</Table.Thead>
+				<Table.Tbody>
+					{displayData.map((product) => {
+						const stockStatus = getStockStatus(product.stok);
+						return (
+							<Table.Tr
+								key={product.id}
+								style={{
+									backgroundColor: dark ? "#141D34" : "white",
+								}}
+							>
+								<Table.Td>
+									<Text fw={600} c={dark ? "dark.0" : "#1e3a5f"}>
+										{product.produk}
+									</Text>
+								</Table.Td>
+								<Table.Td>
+									<Text size="sm" fw={600} c={dark ? "dark.0" : "#1e3a5f"}>
+										{formatCurrency(product.penjualanBulanIni)}
+									</Text>
+								</Table.Td>
+								<Table.Td>
+									<Text size="sm" c={dark ? "dark.3" : "dimmed"}>
+										{formatCurrency(product.bulanLalu)}
+									</Text>
+								</Table.Td>
+								<Table.Td>
+									<Group gap="xs">
+										{product.trend >= 0 ? (
+											<IconArrowUp size={16} color="green" />
+										) : (
+											<IconArrowDown size={16} color="red" />
+										)}
+										<Text
+											size="sm"
+											fw={600}
+											c={product.trend >= 0 ? "green" : "red"}
+										>
+											{Math.abs(product.trend)}%
+										</Text>
+									</Group>
+								</Table.Td>
+								<Table.Td>
+									<Text size="sm" c={dark ? "dark.0" : "#1e3a5f"}>
+										{product.volume}
+									</Text>
+								</Table.Td>
+								<Table.Td>
+									<Badge variant="light" color={stockStatus.color} size="sm">
+										{product.stok} {product.unit} ({stockStatus.label})
+									</Badge>
+								</Table.Td>
+								<Table.Td>
+									<Button
+										variant="subtle"
+										size="compact-sm"
+										color="darmasaba-blue"
+										radius="xl"
+										onClick={() => onDetailClick?.(product)}
+									>
+										Detail
+									</Button>
+								</Table.Td>
+							</Table.Tr>
+						);
+					})}
+				</Table.Tbody>
+			</Table>
+		</Card>
+	);
+};
--- a/src/components/umkm/summary-cards.tsx
+++ b/src/components/umkm/summary-cards.tsx
@@ -0,0 +1,155 @@
+import {
+	Avatar,
+	Card,
+	Grid,
+	GridCol,
+	Group,
+	Stack,
+	Text,
+	useMantineColorScheme,
+} from "@mantine/core";
+import {
+	IconCategory,
+	IconCurrencyDollar,
+	IconTrendingUp,
+	IconUsers,
+} from "@tabler/icons-react";
+
+interface KpiCardProps {
+	title: string;
+	value: string | number;
+	subtitle?: string;
+	icon: React.ReactNode;
+	color: string;
+	backgroundColor: string;
+}
+
+const KpiCard = ({
+	title,
+	value,
+	subtitle,
+	icon,
+	color,
+	backgroundColor,
+}: KpiCardProps) => {
+	const { colorScheme } = useMantineColorScheme();
+	const dark = colorScheme === "dark";
+
+	const formatValue = (val: string | number) => {
+		if (typeof val === "number") {
+			if (val >= 1000000) {
+				return `${(val / 1000000).toFixed(1)}M`;
+			}
+			if (val >= 1000) {
+				return `${(val / 1000).toFixed(1)}K`;
+			}
+			return val.toLocaleString();
+		}
+		return val;
+	};
+
+	return (
+		<Card
+			p="md"
+			radius="xl"
+			withBorder
+			shadow="sm"
+			bg={dark ? "#141D34" : "white"}
+			style={{ borderColor: dark ? "#141D34" : "#e5e7eb" }}
+		>
+			<Group justify="space-between" align="center">
+				<Stack gap={2}>
+					<Text size="sm" c={dark ? "dark.3" : "dimmed"} fw={500}>
+						{title}
+					</Text>
+					<Text size="xl" fw={700} c={dark ? "dark.0" : "#1e3a5f"}>
+						{formatValue(value)}
+					</Text>
+					{subtitle && (
+						<Text size="xs" c={dark ? "dark.4" : "gray.6"}>
+							{subtitle}
+						</Text>
+					)}
+				</Stack>
+				<Avatar
+					color={color}
+					bg={backgroundColor}
+					size={40}
+					radius="xl"
+					style={{
+						display: "flex",
+						alignItems: "center",
+						justifyContent: "center",
+					}}
+				>
+					{icon}
+				</Avatar>
+			</Group>
+		</Card>
+	);
+};
+
+interface SummaryCardsProps {
+	data?: {
+		umkmAktif: number;
+		umkmTerdaftar: number;
+		omzet: number;
+		kategoriTerbanyak: { count: number; name: string };
+	};
+}
+
+export const SummaryCards = ({ data }: SummaryCardsProps) => {
+	const defaultData = {
+		umkmAktif: 45,
+		umkmTerdaftar: 68,
+		omzet: 48000000,
+		kategoriTerbanyak: { count: 34, name: "Kuliner" },
+	};
+
+	const displayData = data || defaultData;
+
+	const kpiData: KpiCardProps[] = [
+		{
+			title: "UMKM Aktif",
+			value: displayData.umkmAktif,
+			subtitle: "Beroperasi",
+			icon: <IconCurrencyDollar size={25} />,
+			color: "white",
+			backgroundColor: "#1E3A5F",
+		},
+		{
+			title: "UMKM Terdaftar",
+			value: displayData.umkmTerdaftar,
+			subtitle: "Total registrasi",
+			icon: <IconUsers size={25} />,
+			color: "white",
+			backgroundColor: "#1E3A5F",
+		},
+		{
+			title: "Omzet",
+			value: displayData.omzet,
+			subtitle: "Omzet BUMDes per bulan",
+			icon: <IconTrendingUp size={25} />,
+			color: "white",
+			backgroundColor: "#1E3A5F",
+		},
+		{
+			title: "UMKM Terbanyak",
+			value: displayData.kategoriTerbanyak.count,
+			subtitle: `Kategori ${displayData.kategoriTerbanyak.name}`,
+			icon: <IconTrendingUp size={25} />,
+			color: "white",
+			backgroundColor: "#1E3A5F",
+		},
+	];
+
+	return (
+		<Grid gutter="md">
+			{kpiData.map((kpi, index) => (
+				<GridCol key={index} span={{ base: 12, sm: 6, lg: 3 }}>
+					<KpiCard {...kpi} />
+				</GridCol>
+			))}
+		</Grid>
+	);
+};
--- a/src/components/umkm/top-products.tsx
+++ b/src/components/umkm/top-products.tsx
@@ -0,0 +1,140 @@
+import {
+	Badge,
+	Card,
+	Group,
+	Stack,
+	Text,
+	Title,
+	useMantineColorScheme,
+} from "@mantine/core";
+
+interface TopProduct {
+	rank: number;
+	name: string;
+	umkmName: string;
+	revenue: number;
+	quantitySold: number;
+	trend: number;
+}
+
+interface TopProductsProps {
+	products?: TopProduct[];
+}
+
+const formatCurrency = (value: number) => {
+	if (value >= 1000000) {
+		return `${(value / 1000000).toFixed(1)}M`;
+	}
+	if (value >= 1000) {
+		return `${(value / 1000).toFixed(0)}K`;
+	}
+	return value.toString();
+};
+
+const formatNumber = (value: number) => {
+	if (value >= 1000) {
+		return `${(value / 1000).toFixed(1)}K`;
+	}
+	return value.toString();
+};
+
+export const TopProducts = ({ products }: TopProductsProps) => {
+	const { colorScheme } = useMantineColorScheme();
+	const dark = colorScheme === "dark";
+
+	const defaultProducts: TopProduct[] = [
+		{
+			rank: 1,
+			name: "Beras Premium Organik",
+			umkmName: "Warung Pak Joko",
+			revenue: 8500000,
+			quantitySold: 650,
+			trend: 12,
+		},
+		{
+			rank: 2,
+			name: "Keripik Singkong",
+			umkmName: "Ibu Sari Snack",
+			revenue: 4200000,
+			quantitySold: 320,
+			trend: 8,
+		},
+		{
+			rank: 3,
+			name: "Madu Alami",
+			umkmName: "Peternakan Lebah",
+			revenue: 3750000,
+			quantitySold: 150,
+			trend: 5,
+		},
+	];
+
+	const displayProducts = products || defaultProducts;
+
+	const getRankColor = (rank: number) => {
+		if (rank === 1) return "yellow";
+		if (rank === 2) return "gray";
+		if (rank === 3) return "orange";
+		return "blue";
+	};
+
+	return (
+		<Card
+			p="md"
+			radius="xl"
+			withBorder
+			shadow="sm"
+			bg={dark ? "#141D34" : "white"}
+			style={{ borderColor: dark ? "#141D34" : "#e5e7eb" }}
+		>
+			<Title order={4} mb="md" c={dark ? "dark.0" : "#1e3a5f"}>
+				Top 3 Produk Terlaris
+			</Title>
+			<Stack gap="sm">
+				{displayProducts.map((product) => (
+					<Group key={product.rank} justify="space-between" align="center">
+						<Group gap="sm">
+							<Badge
+								variant="filled"
+								color={getRankColor(product.rank)}
+								radius="xl"
+								size="lg"
+								w={30}
+								h={30}
+							>
+								{product.rank}
+							</Badge>
+							<Stack gap={0}>
+								<Text fw={600} c={dark ? "dark.0" : "#1e3a5f"}>
+									{product.name}
+								</Text>
+								<Text size="sm" c={dark ? "dark.3" : "dimmed"}>
+									{product.umkmName}
+								</Text>
+								<Group gap="xs" mt={2}>
+									<Text size="xs" c={dark ? "dark.4" : "gray.6"}>
+										Rp {formatCurrency(product.revenue)}
+									</Text>
+									<Text size="xs" c={dark ? "dark.4" : "gray.6"}>
+										•
+									</Text>
+									<Text size="xs" c={dark ? "dark.4" : "gray.6"}>
+										{formatNumber(product.quantitySold)} terjual
+									</Text>
+								</Group>
+							</Stack>
+						</Group>
+						<Badge
+							variant="light"
+							color={product.trend >= 0 ? "green" : "red"}
+							size="sm"
+						>
+							{product.trend >= 0 ? "+" : ""}
+							{product.trend}%
+						</Badge>
+					</Group>
+				))}
+			</Stack>
+		</Card>
+	);
+};
--- a/src/hooks/use-sidebar-fullscreen.ts
+++ b/src/hooks/use-sidebar-fullscreen.ts
@@ -0,0 +1,35 @@
+import { useDisclosure } from "@mantine/hooks";
+import { useState } from "react";
+
+export function useSidebarFullscreen() {
+	const [opened, { toggle: toggleMobile }] = useDisclosure();
+	const [sidebarCollapsed, setSidebarCollapsed] = useDisclosure(false);
+	const [clickCount, setClickCount] = useState(0);
+
+	const toggleSidebar = () => {
+		setSidebarCollapsed.toggle();
+		setClickCount(0);
+	};
+
+	const handleMainClick = () => {
+		if (!sidebarCollapsed) {
+			const newCount = clickCount + 1;
+			setClickCount(newCount);
+
+			if (newCount === 2) {
+				toggleSidebar();
+			} else {
+				setTimeout(() => setClickCount(0), 300);
+			}
+		}
+	};
+
+	return {
+		opened,
+		toggleMobile,
+		sidebarCollapsed,
+		toggleSidebar,
+		handleMainClick,
+		isCollapsed: sidebarCollapsed,
+	};
+}
--- a/src/routes/bantuan.tsx
+++ b/src/routes/bantuan.tsx
@@ -1,16 +1,22 @@
 import { AppShell, Burger, Group, useMantineColorScheme } from "@mantine/core";
-import { useDisclosure } from "@mantine/hooks";
 import { createFileRoute } from "@tanstack/react-router";
 import { Header } from "@/components/header";
 import HelpPage from "@/components/help-page";
 import { Sidebar } from "@/components/sidebar";
+import { useSidebarFullscreen } from "@/hooks/use-sidebar-fullscreen";

 export const Route = createFileRoute("/bantuan")({
-	component: BantuanPage,
+	component: BantuanRoute,
 });

-function BantuanPage() {
-	const [opened, { toggle }] = useDisclosure();
+function BantuanRoute() {
+	const {
+		opened,
+		toggleMobile,
+		sidebarCollapsed,
+		toggleSidebar,
+		handleMainClick,
+	} = useSidebarFullscreen();
 	const { colorScheme } = useMantineColorScheme();
 	const headerBgColor = colorScheme === "dark" ? "#11192D" : "#19355E";
 	const navbarBgColor = colorScheme === "dark" ? "#11192D" : "white";
@@ -22,14 +28,19 @@ function BantuanPage() {
 			navbar={{
 				width: 300,
 				breakpoint: "sm",
-				collapsed: { mobile: !opened },
+				collapsed: { mobile: !opened, desktop: sidebarCollapsed },
 			}}
 			padding="md"
 		>
 			<AppShell.Header bg={headerBgColor}>
 				<Group h="100%" px="md">
-					<Burger opened={opened} onClick={toggle} hiddenFrom="sm" size="sm" />
-					<Header />
+					<Burger
+						opened={opened}
+						onClick={toggleMobile}
+						hiddenFrom="sm"
+						size="sm"
+					/>
+					<Header onSidebarToggle={toggleSidebar} />
 				</Group>
 			</AppShell.Header>

@@ -43,7 +54,11 @@ function BantuanPage() {
 				</div>
 			</AppShell.Navbar>

-			<AppShell.Main bg={mainBgColor}>
+			<AppShell.Main
+				bg={mainBgColor}
+				onClick={handleMainClick}
+				style={{ cursor: sidebarCollapsed ? "default" : "pointer" }}
+			>
 				<HelpPage />
 			</AppShell.Main>
 		</AppShell>
--- a/src/routes/bumdes.tsx
+++ b/src/routes/bumdes.tsx
@@ -1,9 +1,66 @@
+import { AppShell, Burger, Group, useMantineColorScheme } from "@mantine/core";
 import { createFileRoute } from "@tanstack/react-router";
+import BumdesPage from "@/components/bumdes-page";
+import { Header } from "@/components/header";
+import { Sidebar } from "@/components/sidebar";
+import { useSidebarFullscreen } from "@/hooks/use-sidebar-fullscreen";

 export const Route = createFileRoute("/bumdes")({
-	component: RouteComponent,
+	component: BumdesRoute,
 });

-function RouteComponent() {
-	return <div>Hello "/bumdes"!</div>;
+function BumdesRoute() {
+	const {
+		opened,
+		toggleMobile,
+		sidebarCollapsed,
+		toggleSidebar,
+		handleMainClick,
+	} = useSidebarFullscreen();
+	const { colorScheme } = useMantineColorScheme();
+	const headerBgColor = colorScheme === "dark" ? "#11192D" : "#19355E";
+	const navbarBgColor = colorScheme === "dark" ? "#11192D" : "white";
+	const mainBgColor = colorScheme === "dark" ? "#11192D" : "#edf3f8ff";
+
+	return (
+		<AppShell
+			header={{ height: 60 }}
+			navbar={{
+				width: 300,
+				breakpoint: "sm",
+				collapsed: { mobile: !opened, desktop: sidebarCollapsed },
+			}}
+			padding="md"
+		>
+			<AppShell.Header bg={headerBgColor}>
+				<Group h="100%" px="md">
+					<Burger
+						opened={opened}
+						onClick={toggleMobile}
+						hiddenFrom="sm"
+						size="sm"
+					/>
+					<Header onSidebarToggle={toggleSidebar} />
+				</Group>
+			</AppShell.Header>
+
+			<AppShell.Navbar
+				p="md"
+				bg={navbarBgColor}
+				style={{ display: "flex", flexDirection: "column" }}
+			>
+				<div style={{ flex: 1, overflowY: "auto" }}>
+					<Sidebar />
+				</div>
+			</AppShell.Navbar>
+
+			<AppShell.Main
+				bg={mainBgColor}
+				onClick={handleMainClick}
+				style={{ cursor: sidebarCollapsed ? "default" : "pointer" }}
+			>
+				<BumdesPage />
+			</AppShell.Main>
+		</AppShell>
+	);
 }
--- a/src/routes/demografi-pekerjaan.tsx
+++ b/src/routes/demografi-pekerjaan.tsx
@@ -1,8 +1,8 @@
 import { AppShell, Burger, Group, useMantineColorScheme } from "@mantine/core";
-import { useDisclosure } from "@mantine/hooks";
 import { createFileRoute } from "@tanstack/react-router";
 import { Header } from "@/components/header";
 import { Sidebar } from "@/components/sidebar";
+import { useSidebarFullscreen } from "@/hooks/use-sidebar-fullscreen";
 import DemografiPekerjaan from "../components/demografi-pekerjaan";

 export const Route = createFileRoute("/demografi-pekerjaan")({
@@ -10,7 +10,13 @@ export const Route = createFileRoute("/demografi-pekerjaan")({
 });

 function DemografiPekerjaanPage() {
-	const [opened, { toggle }] = useDisclosure();
+	const {
+		opened,
+		toggleMobile,
+		sidebarCollapsed,
+		toggleSidebar,
+		handleMainClick,
+	} = useSidebarFullscreen();
 	const { colorScheme } = useMantineColorScheme();
 	const headerBgColor = colorScheme === "dark" ? "#11192D" : "#19355E";
 	const navbarBgColor = colorScheme === "dark" ? "#11192D" : "white";
@@ -22,14 +28,19 @@ function DemografiPekerjaanPage() {
 			navbar={{
 				width: 300,
 				breakpoint: "sm",
-				collapsed: { mobile: !opened },
+				collapsed: { mobile: !opened, desktop: sidebarCollapsed },
 			}}
 			padding="md"
 		>
 			<AppShell.Header bg={headerBgColor}>
 				<Group h="100%" px="md">
-					<Burger opened={opened} onClick={toggle} hiddenFrom="sm" size="sm" />
-					<Header />
+					<Burger
+						opened={opened}
+						onClick={toggleMobile}
+						hiddenFrom="sm"
+						size="sm"
+					/>
+					<Header onSidebarToggle={toggleSidebar} />
 				</Group>
 			</AppShell.Header>

@@ -43,7 +54,11 @@ function DemografiPekerjaanPage() {
 				</div>
 			</AppShell.Navbar>

-			<AppShell.Main bg={mainBgColor}>
+			<AppShell.Main
+				bg={mainBgColor}
+				onClick={handleMainClick}
+				style={{ cursor: sidebarCollapsed ? "default" : "pointer" }}
+			>
 				<DemografiPekerjaan />
 			</AppShell.Main>
 		</AppShell>
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -1,6 +1,7 @@
 import { AppShell, Burger, Group, useMantineColorScheme } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
 import { createFileRoute } from "@tanstack/react-router";
+import { useState } from "react";
 import { DashboardContent } from "@/components/dashboard-content";
 import { Header } from "@/components/header";
 import { Sidebar } from "@/components/sidebar";
@@ -11,25 +12,41 @@ export const Route = createFileRoute("/")({

 function DashboardPage() {
 	const [opened, { toggle }] = useDisclosure();
+	const [sidebarCollapsed, setSidebarCollapsed] = useDisclosure(false);
+	const [clickCount, setClickCount] = useState(0);
 	const { colorScheme } = useMantineColorScheme();
 	const headerBgColor = colorScheme === "dark" ? "#11192D" : "#19355E";
 	const navbarBgColor = colorScheme === "dark" ? "#11192D" : "white";
 	const mainBgColor = colorScheme === "dark" ? "#11192D" : "#edf3f8ff";

+	const handleMainClick = () => {
+		if (!sidebarCollapsed) {
+			const newCount = clickCount + 1;
+			setClickCount(newCount);
+
+			if (newCount === 2) {
+				setSidebarCollapsed.toggle();
+				setClickCount(0);
+			} else {
+				setTimeout(() => setClickCount(0), 300);
+			}
+		}
+	};
+
 	return (
 		<AppShell
 			header={{ height: 60 }}
 			navbar={{
 				width: 300,
 				breakpoint: "sm",
-				collapsed: { mobile: !opened },
+				collapsed: { mobile: !opened, desktop: sidebarCollapsed },
 			}}
 			padding="md"
 		>
 			<AppShell.Header bg={headerBgColor}>
 				<Group h="100%" px="md">
 					<Burger opened={opened} onClick={toggle} hiddenFrom="sm" size="sm" />
-					<Header />
+					<Header onSidebarToggle={setSidebarCollapsed.toggle} />
 				</Group>
 			</AppShell.Header>

@@ -43,7 +60,11 @@ function DashboardPage() {
 				</div>
 			</AppShell.Navbar>

-			<AppShell.Main bg={mainBgColor}>
+			<AppShell.Main
+				bg={mainBgColor}
+				onClick={handleMainClick}
+				style={{ cursor: sidebarCollapsed ? "default" : "pointer" }}
+			>
 				<DashboardContent />
 			</AppShell.Main>
 		</AppShell>
--- a/src/routes/jenna-analytic.tsx
+++ b/src/routes/jenna-analytic.tsx
@@ -1,16 +1,22 @@
 import { AppShell, Burger, Group, useMantineColorScheme } from "@mantine/core";
-import { useDisclosure } from "@mantine/hooks";
 import { createFileRoute } from "@tanstack/react-router";
 import { Header } from "@/components/header";
 import JennaAnalytic from "@/components/jenna-analytic";
 import { Sidebar } from "@/components/sidebar";
+import { useSidebarFullscreen } from "@/hooks/use-sidebar-fullscreen";

 export const Route = createFileRoute("/jenna-analytic")({
 	component: JennaAnalyticPage,
 });

 function JennaAnalyticPage() {
-	const [opened, { toggle }] = useDisclosure();
+	const {
+		opened,
+		toggleMobile,
+		sidebarCollapsed,
+		toggleSidebar,
+		handleMainClick,
+	} = useSidebarFullscreen();
 	const { colorScheme } = useMantineColorScheme();
 	const headerBgColor = colorScheme === "dark" ? "#11192D" : "#19355E";
 	const navbarBgColor = colorScheme === "dark" ? "#11192D" : "white";
@@ -22,14 +28,19 @@ function JennaAnalyticPage() {
 			navbar={{
 				width: 300,
 				breakpoint: "sm",
-				collapsed: { mobile: !opened },
+				collapsed: { mobile: !opened, desktop: sidebarCollapsed },
 			}}
 			padding="md"
 		>
 			<AppShell.Header bg={headerBgColor}>
 				<Group h="100%" px="md">
-					<Burger opened={opened} onClick={toggle} hiddenFrom="sm" size="sm" />
-					<Header />
+					<Burger
+						opened={opened}
+						onClick={toggleMobile}
+						hiddenFrom="sm"
+						size="sm"
+					/>
+					<Header onSidebarToggle={toggleSidebar} />
 				</Group>
 			</AppShell.Header>

@@ -43,7 +54,11 @@ function JennaAnalyticPage() {
 				</div>
 			</AppShell.Navbar>

-			<AppShell.Main bg={mainBgColor}>
+			<AppShell.Main
+				bg={mainBgColor}
+				onClick={handleMainClick}
+				style={{ cursor: sidebarCollapsed ? "default" : "pointer" }}
+			>
 				<JennaAnalytic />
 			</AppShell.Main>
 		</AppShell>
--- a/src/routes/keamanan.tsx
+++ b/src/routes/keamanan.tsx
@@ -1,9 +1,66 @@
+import { AppShell, Burger, Group, useMantineColorScheme } from "@mantine/core";
 import { createFileRoute } from "@tanstack/react-router";
+import { Header } from "@/components/header";
+import KeamananPage from "@/components/keamanan-page";
+import { Sidebar } from "@/components/sidebar";
+import { useSidebarFullscreen } from "@/hooks/use-sidebar-fullscreen";

 export const Route = createFileRoute("/keamanan")({
-	component: RouteComponent,
+	component: KeamananRoute,
 });

-function RouteComponent() {
-	return <div>Hello "/keamanan"!</div>;
+function KeamananRoute() {
+	const {
+		opened,
+		toggleMobile,
+		sidebarCollapsed,
+		toggleSidebar,
+		handleMainClick,
+	} = useSidebarFullscreen();
+	const { colorScheme } = useMantineColorScheme();
+	const headerBgColor = colorScheme === "dark" ? "#11192D" : "#19355E";
+	const navbarBgColor = colorScheme === "dark" ? "#11192D" : "white";
+	const mainBgColor = colorScheme === "dark" ? "#11192D" : "#edf3f8ff";
+
+	return (
+		<AppShell
+			header={{ height: 60 }}
+			navbar={{
+				width: 300,
+				breakpoint: "sm",
+				collapsed: { mobile: !opened, desktop: sidebarCollapsed },
+			}}
+			padding="md"
+		>
+			<AppShell.Header bg={headerBgColor}>
+				<Group h="100%" px="md">
+					<Burger
+						opened={opened}
+						onClick={toggleMobile}
+						hiddenFrom="sm"
+						size="sm"
+					/>
+					<Header onSidebarToggle={toggleSidebar} />
+				</Group>
+			</AppShell.Header>
+
+			<AppShell.Navbar
+				p="md"
+				bg={navbarBgColor}
+				style={{ display: "flex", flexDirection: "column" }}
+			>
+				<div style={{ flex: 1, overflowY: "auto" }}>
+					<Sidebar />
+				</div>
+			</AppShell.Navbar>
+
+			<AppShell.Main
+				bg={mainBgColor}
+				onClick={handleMainClick}
+				style={{ cursor: sidebarCollapsed ? "default" : "pointer" }}
+			>
+				<KeamananPage />
+			</AppShell.Main>
+		</AppShell>
+	);
 }
--- a/src/routes/keuangan-anggaran.tsx
+++ b/src/routes/keuangan-anggaran.tsx
@@ -1,16 +1,22 @@
 import { AppShell, Burger, Group, useMantineColorScheme } from "@mantine/core";
-import { useDisclosure } from "@mantine/hooks";
 import { createFileRoute } from "@tanstack/react-router";
 import { Header } from "@/components/header";
 import KeuanganAnggaran from "@/components/keuangan-anggaran";
 import { Sidebar } from "@/components/sidebar";
+import { useSidebarFullscreen } from "@/hooks/use-sidebar-fullscreen";

 export const Route = createFileRoute("/keuangan-anggaran")({
 	component: KeuanganAnggaranPage,
 });

 function KeuanganAnggaranPage() {
-	const [opened, { toggle }] = useDisclosure();
+	const {
+		opened,
+		toggleMobile,
+		sidebarCollapsed,
+		toggleSidebar,
+		handleMainClick,
+	} = useSidebarFullscreen();
 	const { colorScheme } = useMantineColorScheme();
 	const headerBgColor = colorScheme === "dark" ? "#11192D" : "#19355E";
 	const navbarBgColor = colorScheme === "dark" ? "#11192D" : "white";
@@ -22,14 +28,19 @@ function KeuanganAnggaranPage() {
 			navbar={{
 				width: 300,
 				breakpoint: "sm",
-				collapsed: { mobile: !opened },
+				collapsed: { mobile: !opened, desktop: sidebarCollapsed },
 			}}
 			padding="md"
 		>
 			<AppShell.Header bg={headerBgColor}>
 				<Group h="100%" px="md">
-					<Burger opened={opened} onClick={toggle} hiddenFrom="sm" size="sm" />
-					<Header />
+					<Burger
+						opened={opened}
+						onClick={toggleMobile}
+						hiddenFrom="sm"
+						size="sm"
+					/>
+					<Header onSidebarToggle={toggleSidebar} />
 				</Group>
 			</AppShell.Header>

@@ -43,7 +54,11 @@ function KeuanganAnggaranPage() {
 				</div>
 			</AppShell.Navbar>

-			<AppShell.Main bg={mainBgColor}>
+			<AppShell.Main
+				bg={mainBgColor}
+				onClick={handleMainClick}
+				style={{ cursor: sidebarCollapsed ? "default" : "pointer" }}
+			>
 				<KeuanganAnggaran />
 			</AppShell.Main>
 		</AppShell>
--- a/src/routes/kinerja-divisi.tsx
+++ b/src/routes/kinerja-divisi.tsx
@@ -1,16 +1,22 @@
 import { AppShell, Burger, Group, useMantineColorScheme } from "@mantine/core";
-import { useDisclosure } from "@mantine/hooks";
 import { createFileRoute } from "@tanstack/react-router";
 import { Header } from "@/components/header";
 import KinerjaDivisi from "@/components/kinerja-divisi";
 import { Sidebar } from "@/components/sidebar";
+import { useSidebarFullscreen } from "@/hooks/use-sidebar-fullscreen";

 export const Route = createFileRoute("/kinerja-divisi")({
 	component: KinerjaDivisiPage,
 });

 function KinerjaDivisiPage() {
-	const [opened, { toggle }] = useDisclosure();
+	const {
+		opened,
+		toggleMobile,
+		sidebarCollapsed,
+		toggleSidebar,
+		handleMainClick,
+	} = useSidebarFullscreen();
 	const { colorScheme } = useMantineColorScheme();
 	const headerBgColor = colorScheme === "dark" ? "#11192D" : "#19355E";
 	const navbarBgColor = colorScheme === "dark" ? "#11192D" : "white";
@@ -22,14 +28,19 @@ function KinerjaDivisiPage() {
 			navbar={{
 				width: 300,
 				breakpoint: "sm",
-				collapsed: { mobile: !opened },
+				collapsed: { mobile: !opened, desktop: sidebarCollapsed },
 			}}
 			padding="md"
 		>
 			<AppShell.Header bg={headerBgColor}>
 				<Group h="100%" px="md">
-					<Burger opened={opened} onClick={toggle} hiddenFrom="sm" size="sm" />
-					<Header />
+					<Burger
+						opened={opened}
+						onClick={toggleMobile}
+						hiddenFrom="sm"
+						size="sm"
+					/>
+					<Header onSidebarToggle={toggleSidebar} />
 				</Group>
 			</AppShell.Header>

@@ -43,7 +54,11 @@ function KinerjaDivisiPage() {
 				</div>
 			</AppShell.Navbar>

-			<AppShell.Main bg={mainBgColor}>
+			<AppShell.Main
+				bg={mainBgColor}
+				onClick={handleMainClick}
+				style={{ cursor: sidebarCollapsed ? "default" : "pointer" }}
+			>
 				<KinerjaDivisi />
 			</AppShell.Main>
 		</AppShell>
--- a/src/routes/pengaduan-layanan-publik.tsx
+++ b/src/routes/pengaduan-layanan-publik.tsx
@@ -1,16 +1,22 @@
 import { AppShell, Burger, Group, useMantineColorScheme } from "@mantine/core";
-import { useDisclosure } from "@mantine/hooks";
 import { createFileRoute } from "@tanstack/react-router";
 import { Header } from "@/components/header";
 import PengaduanLayananPublik from "@/components/pengaduan-layanan-publik";
 import { Sidebar } from "@/components/sidebar";
+import { useSidebarFullscreen } from "@/hooks/use-sidebar-fullscreen";

 export const Route = createFileRoute("/pengaduan-layanan-publik")({
 	component: PengaduanLayananPublikPage,
 });

 function PengaduanLayananPublikPage() {
-	const [opened, { toggle }] = useDisclosure();
+	const {
+		opened,
+		toggleMobile,
+		sidebarCollapsed,
+		toggleSidebar,
+		handleMainClick,
+	} = useSidebarFullscreen();
 	const { colorScheme } = useMantineColorScheme();
 	const headerBgColor = colorScheme === "dark" ? "#11192D" : "#19355E";
 	const navbarBgColor = colorScheme === "dark" ? "#11192D" : "white";
@@ -22,14 +28,19 @@ function PengaduanLayananPublikPage() {
 			navbar={{
 				width: 300,
 				breakpoint: "sm",
-				collapsed: { mobile: !opened },
+				collapsed: { mobile: !opened, desktop: sidebarCollapsed },
 			}}
 			padding="md"
 		>
 			<AppShell.Header bg={headerBgColor}>
 				<Group h="100%" px="md">
-					<Burger opened={opened} onClick={toggle} hiddenFrom="sm" size="sm" />
-					<Header />
+					<Burger
+						opened={opened}
+						onClick={toggleMobile}
+						hiddenFrom="sm"
+						size="sm"
+					/>
+					<Header onSidebarToggle={toggleSidebar} />
 				</Group>
 			</AppShell.Header>

@@ -43,7 +54,11 @@ function PengaduanLayananPublikPage() {
 				</div>
 			</AppShell.Navbar>

-			<AppShell.Main bg={mainBgColor}>
+			<AppShell.Main
+				bg={mainBgColor}
+				onClick={handleMainClick}
+				style={{ cursor: sidebarCollapsed ? "default" : "pointer" }}
+			>
 				<PengaduanLayananPublik />
 			</AppShell.Main>
 		</AppShell>
--- a/src/routes/pengaturan/akses-dan-tim.tsx
+++ b/src/routes/pengaturan/akses-dan-tim.tsx
@@ -1,9 +1,10 @@
 import { createFileRoute } from "@tanstack/react-router";
+import AksesDanTimSettings from "@/components/pengaturan/akses-dan-tim";

 export const Route = createFileRoute("/pengaturan/akses-dan-tim")({
 	component: RouteComponent,
 });

 function RouteComponent() {
-	return <div>Hello "/pengaturan/akses-dan-tim"!</div>;
+	return <AksesDanTimSettings />;
 }
--- a/src/routes/pengaturan/keamanan.tsx
+++ b/src/routes/pengaturan/keamanan.tsx
@@ -1,9 +1,10 @@
 import { createFileRoute } from "@tanstack/react-router";
+import KeamananSettings from "@/components/pengaturan/keamanan";

 export const Route = createFileRoute("/pengaturan/keamanan")({
 	component: RouteComponent,
 });

 function RouteComponent() {
-	return <div>Hello "/pengaturan/keamanan"!</div>;
+	return <KeamananSettings />;
 }
--- a/src/routes/pengaturan/notifikasi.tsx
+++ b/src/routes/pengaturan/notifikasi.tsx
@@ -1,9 +1,10 @@
 import { createFileRoute } from "@tanstack/react-router";
+import NotifikasiSettings from "@/components/pengaturan/notifikasi";

 export const Route = createFileRoute("/pengaturan/notifikasi")({
 	component: RouteComponent,
 });

 function RouteComponent() {
-	return <div>Hello "/pengaturan/notifikasi"!</div>;
+	return <NotifikasiSettings />;
 }
--- a/src/routes/pengaturan/route.tsx
+++ b/src/routes/pengaturan/route.tsx
@@ -1,5 +1,5 @@
 import { AppShell, Burger, Group, useMantineColorScheme } from "@mantine/core";
-import { useDisclosure, useMediaQuery } from "@mantine/hooks";
+import { useMediaQuery } from "@mantine/hooks";
 import {
 	createFileRoute,
 	Outlet,
@@ -8,13 +8,20 @@ import {
 import { useEffect } from "react";
 import { Header } from "@/components/header";
 import { Sidebar } from "@/components/sidebar";
+import { useSidebarFullscreen } from "@/hooks/use-sidebar-fullscreen";

 export const Route = createFileRoute("/pengaturan")({
 	component: PengaturanLayout,
 });

 function PengaturanLayout() {
-	const [opened, { toggle, close }] = useDisclosure();
+	const {
+		opened,
+		toggleMobile,
+		sidebarCollapsed,
+		toggleSidebar,
+		handleMainClick,
+	} = useSidebarFullscreen();
 	const { colorScheme } = useMantineColorScheme();

 	const isMobile = useMediaQuery("(max-width: 48em)");
@@ -27,9 +34,9 @@ function PengaturanLayout() {
 	// Auto close navbar on route change (mobile only)
 	useEffect(() => {
 		if (isMobile && opened) {
-			close();
+			toggleMobile();
 		}
-	}, [routerState.location.pathname, isMobile, opened, close]);
+	}, [routerState.location.pathname, isMobile, opened, toggleMobile]);

 	return (
 		<AppShell
@@ -37,14 +44,19 @@ function PengaturanLayout() {
 			navbar={{
 				width: 300,
 				breakpoint: "sm",
-				collapsed: { mobile: !opened },
+				collapsed: { mobile: !opened, desktop: sidebarCollapsed },
 			}}
 			padding="md"
 		>
 			<AppShell.Header bg={headerBgColor}>
 				<Group h="100%" px="lg" align="center" wrap="nowrap">
-					<Burger opened={opened} onClick={toggle} hiddenFrom="sm" size="sm" />
-					<Header />
+					<Burger
+						opened={opened}
+						onClick={toggleMobile}
+						hiddenFrom="sm"
+						size="sm"
+					/>
+					<Header onSidebarToggle={toggleSidebar} />
 				</Group>
 			</AppShell.Header>

@@ -58,7 +70,11 @@ function PengaturanLayout() {
 				</div>
 			</AppShell.Navbar>

-			<AppShell.Main bg={mainBgColor}>
+			<AppShell.Main
+				bg={mainBgColor}
+				onClick={handleMainClick}
+				style={{ cursor: sidebarCollapsed ? "default" : "pointer" }}
+			>
 				<div className="p-2">
 					<Outlet />
 				</div>
--- a/src/routes/sosial.tsx
+++ b/src/routes/sosial.tsx
@@ -1,9 +1,66 @@
+import { AppShell, Burger, Group, useMantineColorScheme } from "@mantine/core";
 import { createFileRoute } from "@tanstack/react-router";
+import { Header } from "@/components/header";
+import { Sidebar } from "@/components/sidebar";
+import SosialPage from "@/components/sosial-page";
+import { useSidebarFullscreen } from "@/hooks/use-sidebar-fullscreen";

 export const Route = createFileRoute("/sosial")({
-	component: RouteComponent,
+	component: SosialRoute,
 });

-function RouteComponent() {
-	return <div>Hello "/sosial"!</div>;
+function SosialRoute() {
+	const {
+		opened,
+		toggleMobile,
+		sidebarCollapsed,
+		toggleSidebar,
+		handleMainClick,
+	} = useSidebarFullscreen();
+	const { colorScheme } = useMantineColorScheme();
+	const headerBgColor = colorScheme === "dark" ? "#11192D" : "#19355E";
+	const navbarBgColor = colorScheme === "dark" ? "#11192D" : "white";
+	const mainBgColor = colorScheme === "dark" ? "#11192D" : "#edf3f8ff";
+
+	return (
+		<AppShell
+			header={{ height: 60 }}
+			navbar={{
+				width: 300,
+				breakpoint: "sm",
+				collapsed: { mobile: !opened, desktop: sidebarCollapsed },
+			}}
+			padding="md"
+		>
+			<AppShell.Header bg={headerBgColor}>
+				<Group h="100%" px="md">
+					<Burger
+						opened={opened}
+						onClick={toggleMobile}
+						hiddenFrom="sm"
+						size="sm"
+					/>
+					<Header onSidebarToggle={toggleSidebar} />
+				</Group>
+			</AppShell.Header>
+
+			<AppShell.Navbar
+				p="md"
+				bg={navbarBgColor}
+				style={{ display: "flex", flexDirection: "column" }}
+			>
+				<div style={{ flex: 1, overflowY: "auto" }}>
+					<Sidebar />
+				</div>
+			</AppShell.Navbar>
+
+			<AppShell.Main
+				bg={mainBgColor}
+				onClick={handleMainClick}
+				style={{ cursor: sidebarCollapsed ? "default" : "pointer" }}
+			>
+				<SosialPage />
+			</AppShell.Main>
+		</AppShell>
+	);
 }
--- a/src/store/sosial.ts
+++ b/src/store/sosial.ts
@@ -0,0 +1,30 @@
+import { proxy } from "valtio";
+
+type SelectedYear = string;
+
+interface SosialState {
+	selectedYear: SelectedYear;
+	filters: {
+		dusun: string | null;
+		kategori: string | null;
+	};
+}
+
+export const sosialStore = proxy<SosialState>({
+	selectedYear: new Date().getFullYear().toString(),
+	filters: {
+		dusun: null,
+		kategori: null,
+	},
+});
+
+export const setYear = (year: SelectedYear) => {
+	sosialStore.selectedYear = year;
+};
+
+export const setFilter = (
+	key: keyof SosialState["filters"],
+	value: string | null,
+) => {
+	sosialStore.filters[key] = value;
+};
--- a/src/store/umkm.ts
+++ b/src/store/umkm.ts
@@ -0,0 +1,30 @@
+import { proxy } from "valtio";
+
+type TimeRange = "minggu" | "bulan";
+
+interface UmkmState {
+	selectedRange: TimeRange;
+	filters: {
+		kategori: string | null;
+		umkm: string | null;
+	};
+}
+
+export const umkmStore = proxy<UmkmState>({
+	selectedRange: "bulan",
+	filters: {
+		kategori: null,
+		umkm: null,
+	},
+});
+
+export const setRange = (range: TimeRange) => {
+	umkmStore.selectedRange = range;
+};
+
+export const setFilter = (
+	key: keyof UmkmState["filters"],
+	value: string | null,
+) => {
+	umkmStore.filters[key] = value;
+};
Author	SHA1	Message	Date
nico	7c8012d277	Fix Lint-1	2026-03-25 15:07:10 +08:00
nico	687ce11a81	Refactor New Ui Semua Pengaturan	2026-03-25 14:38:37 +08:00
nico	1ba4643e23	Refactor New Ui Pengaturan Umum	2026-03-25 11:56:22 +08:00
nico	113dd7ba6f	Refactor New Ui Sosial, Keamanan, & Bantuan	2026-03-25 11:10:50 +08:00
nico	71a305cd4b	Refactor New Ui Bumdes 02	2026-03-25 10:32:31 +08:00
nico	84b96ca3be	Refactor New Ui Bumdes	2026-03-25 00:09:38 +08:00
nico	8159216a2c	Refactor ui keuangan	2026-03-24 23:17:23 +08:00