From d714c09efcf11682225979cfe4a77de8b954c5b8 Mon Sep 17 00:00:00 2001
From: nico <nicoarya20@gmail.com>
Date: Wed, 18 Mar 2026 00:43:44 +0700
Subject: [PATCH] Fix New UI Pengaduan

---
 src/components/demografi-pekerjaan.tsx | 894 ++++++++++++++++---------
 1 file changed, 583 insertions(+), 311 deletions(-)

diff --git a/src/components/demografi-pekerjaan.tsx b/src/components/demografi-pekerjaan.tsx
index cf189d2..2baf56a 100644
--- a/src/components/demografi-pekerjaan.tsx
+++ b/src/components/demografi-pekerjaan.tsx
@@ -1,116 +1,73 @@
-import { BarChart, PieChart } from "@mantine/charts";
 import {
+	Badge,
 	Box,
 	Card,
 	Grid,
+	GridCol,
 	Group,
+	Progress,
 	Stack,
-	Table,
 	Text,
+	ThemeIcon,
 	Title,
 	useMantineColorScheme,
 } from "@mantine/core";
 import {
-	IconArrowDown,
-	IconArrowUp,
-	IconBabyCarriage,
-	IconSkull,
-} from "@tabler/icons-react";
-import React from "react";
+	Users,
+	Home,
+	Baby,
+	TrendingDown,
+	BarChart3,
+	PieChart as PieChartIcon,
+	Building2,
+} from "lucide-react";
+import {
+	Bar,
+	BarChart,
+	CartesianGrid,
+	Cell,
+	Pie,
+	PieChart,
+	ResponsiveContainer,
+	Tooltip,
+	XAxis,
+	YAxis,
+} from "recharts";
 
-// Sample Data
+// KPI Data
 const kpiData = [
 	{
 		id: 1,
 		title: "Total Penduduk",
 		value: "5.634",
-		sub: "Aktif terdaftar",
-		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"
-				role="img"
-				aria-label="Icon penduduk"
-			>
-				<title>Total Penduduk</title>
-				<path
-					strokeLinecap="round"
-					strokeLinejoin="round"
-					d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z"
-				/>
-			</svg>
-		),
+		subtitle: "Aktif terdaftar",
+		icon: Users,
 	},
 	{
 		id: 2,
 		title: "Kepala Keluarga",
 		value: "1.354",
-		sub: "Total KK",
-		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"
-				role="img"
-				aria-label="Icon kepala keluarga"
-			>
-				<title>Kepala Keluarga</title>
-				<path
-					strokeLinecap="round"
-					strokeLinejoin="round"
-					d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
-				/>
-			</svg>
-		),
+		subtitle: "Total KK",
+		icon: Home,
 	},
 	{
 		id: 3,
 		title: "Kelahiran",
 		value: "23",
-		sub: "Tahun ini",
-		icon: (
-			<IconBabyCarriage
-				className="h-6 w-6 text-muted-foreground"
-				role="img"
-				aria-label="Icon kelahiran"
-			/>
-		),
+		subtitle: "Tahun ini",
+		icon: Baby,
 	},
 	{
 		id: 4,
 		title: "Kemiskinan",
 		value: "324",
-		delta: "-10% dari tahun lalu",
-		deltaType: "positive",
-		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"
-				role="img"
-				aria-label="Icon kemiskinan"
-			>
-				<title>Kemiskinan</title>
-				<path
-					strokeLinecap="round"
-					strokeLinejoin="round"
-					d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"
-				/>
-			</svg>
-		),
+		subtitle: "-10% dari tahun lalu",
+		trend: "positive",
+		icon: TrendingDown,
 	},
 ];
 
+// Age Distribution Data
 const ageDistributionData = [
 	{ ageRange: "17-25", total: 850 },
 	{ ageRange: "26-35", total: 1200 },
@@ -120,6 +77,7 @@ const ageDistributionData = [
 	{ ageRange: "65+", total: 484 },
 ];
 
+// Job Distribution Data
 const jobDistributionData = [
 	{ job: "Sipil", total: 1200 },
 	{ job: "Guru", total: 850 },
@@ -128,283 +86,597 @@ const jobDistributionData = [
 	{ job: "Wiraswasta", total: 984 },
 ];
 
+// Religion Data
 const religionData = [
-	{ religion: "Hindu", total: 4234, color: "red" },
-	{ religion: "Islam", total: 856, color: "blue" },
-	{ religion: "Kristen", total: 412, color: "green" },
-	{ religion: "Buddha", total: 202, color: "yellow" },
+	{ name: "Hindu", value: 4234, color: "#EF4444" },
+	{ name: "Islam", value: 856, color: "#3B82F6" },
+	{ name: "Kristen", value: 412, color: "#22C55E" },
+	{ name: "Buddha", value: 202, color: "#FACC15" },
 ];
 
+// Banjar Data
 const banjarData = [
-	{ banjar: "Banjar Darmasaba", population: 1200, kk: 300, poor: 45 },
-	{ banjar: "Banjar Manesa", population: 950, kk: 240, poor: 32 },
-	{ banjar: "Banjar Cabe", population: 800, kk: 200, poor: 28 },
-	{ banjar: "Banjar Penenjoan", population: 1100, kk: 280, poor: 38 },
-	{ banjar: "Banjar Baler Pasar", population: 984, kk: 250, poor: 42 },
-	{ banjar: "Banjar Bucu", population: 600, kk: 184, poor: 25 },
+	{ banjar: "Darmasaba", population: 1200, kk: 300, poor: 45 },
+	{ banjar: "Manesa", population: 950, kk: 240, poor: 32 },
+	{ banjar: "Cabe", population: 800, kk: 200, poor: 28 },
+	{ banjar: "Penenjoan", population: 1100, kk: 280, poor: 38 },
+	{ banjar: "Baler Pasar", population: 984, kk: 250, poor: 42 },
+	{ banjar: "Bucu", population: 600, kk: 184, poor: 25 },
 ];
 
+// Dynamic Stats Data
 const dynamicStats = [
 	{
 		title: "Kelahiran",
 		value: "23",
-		icon: <IconBabyCarriage size={16} />,
-		color: "green",
+		icon: Baby,
+		color: "#22C55E",
 	},
 	{
 		title: "Kematian",
 		value: "12",
-		icon: <IconSkull size={16} />,
-		color: "red",
+		icon: TrendingDown,
+		color: "#EF4444",
 	},
 	{
 		title: "Pindah Masuk",
 		value: "45",
-		icon: <IconArrowDown size={16} />,
-		color: "blue",
+		icon: Users,
+		color: "#3B82F6",
 	},
 	{
 		title: "Pindah Keluar",
 		value: "32",
-		icon: <IconArrowUp size={16} />,
-		color: "orange",
+		icon: Users,
+		color: "#3B82F6",
 	},
 ];
 
+// Sektor Unggulan Data
+const sektorUnggulanData = [
+	{ sektor: "Pertanian", value: 65 },
+	{ sektor: "Perdagangan", value: 45 },
+	{ sektor: "Industri", value: 38 },
+	{ sektor: "Jasa", value: 52 },
+];
+
 const DemografiPekerjaan = () => {
 	const { colorScheme } = useMantineColorScheme();
 	const dark = colorScheme === "dark";
-	return (
-		<Box className="space-y-6">
-			<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" }}
-							>
-								<Group justify="space-between" align="flex-start" mb="xs">
-									<Text size="sm" fw={500} c={dark ? "dark.3" : "dimmed"}>
-										{kpi.title}
-									</Text>
-									{React.cloneElement(kpi.icon, {
-										className: "h-6 w-6",
-										color: dark
-											? "var(--mantine-color-dark-3)"
-											: "var(--mantine-color-dimmed)",
-									})}
-								</Group>
-								<Title order={3} fw={700} c={dark ? "dark.0" : "black"} mt="xs">
-									{kpi.value}
-								</Title>
-								{kpi.delta && (
-									<Text
-										size="xs"
-										c={
-											kpi.deltaType === "positive"
-												? "green"
-												: kpi.deltaType === "negative"
-													? "red"
-													: dark
-														? "dark.3"
-														: "dimmed"
-										}
-										mt={4}
-									>
-										{kpi.delta}
-									</Text>
-								)}
-								{kpi.sub && (
-									<Text size="xs" c={dark ? "dark.3" : "dimmed"} mt={2}>
-										{kpi.sub}
-									</Text>
-								)}
-							</Card>
-						</Grid.Col>
-					))}
-				</Grid>
 
-				{/* Charts Section */}
-				<Grid gutter="lg">
-					{/* Grafik Pengelompokan Umur */}
-					<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">
-								Grafik Pengelompokan Umur
-							</Title>
-							<BarChart
-								h={300}
-								data={ageDistributionData}
-								dataKey="ageRange"
-								series={[{ name: "total", color: "darmasaba-navy" }]}
-								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 === "positive" && (
+											<TrendingDown size={14} color="#22C55E" />
+										)}
+										<Text
+											size="xs"
+											c={
+												item.trend === "positive"
+													? "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>
 
-					{/* Demografi Pekerjaan */}
-					<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">
+			{/* ROW 2 - 3 COLUMNS */}
+			<Grid gutter="lg">
+				{/* LEFT: PENGELOMPOKAN UMUR */}
+				<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">
+								<BarChart3 size={14} />
+							</ThemeIcon>
+							<Title order={4} c={dark ? "white" : "gray.9"}>
+								Pengelompokan Umur
+							</Title>
+						</Group>
+						<ResponsiveContainer width="100%" height={250}>
+							<BarChart data={ageDistributionData}>
+								<CartesianGrid
+									strokeDasharray="3 3"
+									vertical={false}
+									stroke={dark ? "#334155" : "#e5e7eb"}
+								/>
+								<XAxis
+									dataKey="ageRange"
+									axisLine={false}
+									tickLine={false}
+									tick={{
+										fill: dark ? "#E2E8F0" : "#374151",
+										fontSize: 12,
+									}}
+								/>
+								<YAxis
+									axisLine={false}
+									tickLine={false}
+									tick={{
+										fill: dark ? "#E2E8F0" : "#374151",
+										fontSize: 12,
+									}}
+								/>
+								<Tooltip
+									contentStyle={{
+										backgroundColor: dark ? "#1E293B" : "white",
+										borderColor: dark ? "#334155" : "#e5e7eb",
+										borderRadius: "8px",
+									}}
+									labelStyle={{ color: dark ? "#E2E8F0" : "#374151" }}
+								/>
+								<Bar
+									dataKey="total"
+									fill="#1E3A5F"
+									radius={[8, 8, 0, 0]}
+									maxBarSize={40}
+								/>
+							</BarChart>
+						</ResponsiveContainer>
+					</Card>
+				</Grid.Col>
+
+				{/* CENTER: DEMOGRAFI PEKERJAAN */}
+				<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">
+								<Building2 size={14} />
+							</ThemeIcon>
+							<Title order={4} c={dark ? "white" : "gray.9"}>
 								Demografi Pekerjaan
 							</Title>
-							<BarChart
-								h={300}
-								data={jobDistributionData}
-								dataKey="job"
-								series={[{ name: "total", color: "darmasaba-navy" }]}
-								withLegend
-							/>
-						</Card>
-					</Grid.Col>
-				</Grid>
+						</Group>
+						<ResponsiveContainer width="100%" height={250}>
+							<BarChart data={jobDistributionData} 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,
+									}}
+								/>
+								<YAxis
+									type="category"
+									dataKey="job"
+									axisLine={false}
+									tickLine={false}
+									tick={{
+										fill: dark ? "#E2E8F0" : "#374151",
+										fontSize: 12,
+									}}
+									width={90}
+								/>
+								<Tooltip
+									contentStyle={{
+										backgroundColor: dark ? "#1E293B" : "white",
+										borderColor: dark ? "#334155" : "#e5e7eb",
+										borderRadius: "8px",
+									}}
+								/>
+								<Bar
+									dataKey="total"
+									fill="#1E3A5F"
+									radius={[0, 8, 8, 0]}
+									maxBarSize={30}
+								/>
+							</BarChart>
+						</ResponsiveContainer>
+					</Card>
+				</Grid.Col>
 
-				{/* Agama & Data per Banjar */}
-				<Grid gutter="lg">
-					{/* Distribusi Agama */}
-					<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">
-								Distribusi Agama
+				{/* RIGHT: STATISTIK DINAMIKA PENDUDUK */}
+				<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">
+								<BarChart3 size={14} />
+							</ThemeIcon>
+							<Title order={4} c={dark ? "white" : "gray.9"}>
+								Dinamika Penduduk
 							</Title>
-							<PieChart
-								h={300}
-								data={religionData.map((item) => ({
-									name: item.religion,
-									value: item.total,
-									color: item.color,
-								}))}
-								withLabels
-								withLabelsLine
-								labelsPosition="outside"
-								labelsType="percent"
-							/>
-						</Card>
-					</Grid.Col>
-
-					{/* Data per Banjar */}
-					<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} c={dark ? "dark.0" : "black"} mb="md">
-								Data per Banjar
-							</Title>
-							<Table striped highlightOnHover>
-								<Table.Thead>
-									<Table.Tr>
-										<Table.Th>
-											<Text c={dark ? "dark.0" : "black"}>Banjar</Text>
-										</Table.Th>
-										<Table.Th>
-											<Text c={dark ? "dark.0" : "black"}>Penduduk</Text>
-										</Table.Th>
-										<Table.Th>
-											<Text c={dark ? "dark.0" : "black"}>KK</Text>
-										</Table.Th>
-										<Table.Th>
-											<Text c={dark ? "dark.0" : "black"}>Miskin</Text>
-										</Table.Th>
-									</Table.Tr>
-								</Table.Thead>
-								<Table.Tbody>
-									{banjarData.map((item, index) => (
-										<Table.Tr key={`${item.banjar}-${index}`}>
-											<Table.Td>
-												<Text c={dark ? "dark.0" : "black"}>{item.banjar}</Text>
-											</Table.Td>
-											<Table.Td>
-												<Text c={dark ? "dark.0" : "black"}>
-													{item.population.toLocaleString()}
-												</Text>
-											</Table.Td>
-											<Table.Td>
-												<Text c={dark ? "dark.0" : "black"}>
-													{item.kk.toLocaleString()}
-												</Text>
-											</Table.Td>
-											<Table.Td>
-												<Text c={dark ? "red.4" : "red"}>
-													{item.poor.toLocaleString()}
-												</Text>
-											</Table.Td>
-										</Table.Tr>
-									))}
-								</Table.Tbody>
-							</Table>
-						</Card>
-					</Grid.Col>
-				</Grid>
-
-				{/* Statistik Dinamika Penduduk */}
-				<Card
-					p="md"
-					radius="md"
-					withBorder
-					bg={dark ? "#141D34" : "white"}
-					style={{ borderColor: dark ? "#141D34" : "white" }}
-				>
-					<Title order={3} fw={500} c={dark ? "dark.0" : "black"} mb="md">
-						Statistik Dinamika Penduduk
-					</Title>
-					<Grid gutter="md">
-						{dynamicStats.map((stat, index) => (
-							<Grid.Col
-								key={`${stat.title}-${index}`}
-								span={{ base: 12, md: 3 }}
-							>
-								<Card
-									p="md"
-									radius="md"
-									withBorder
-									bg={dark ? "#141D34" : "white"}
-									style={{ borderColor: dark ? "#141D34" : "white" }}
-								>
-									<Group justify="space-between" align="center">
-										<Box>
-											<Text size="sm" fw={500} c={dark ? "dark.3" : "dimmed"}>
+						</Group>
+						<Grid gutter="sm">
+							{dynamicStats.map((stat, index) => (
+								<Grid.Col key={index} span={6}>
+									<Card
+										p="sm"
+										radius="lg"
+										bg={dark ? "#334155" : "#F1F5F9"}
+										style={{
+											transition: "transform 0.15s ease",
+											cursor: "pointer",
+										}}
+									>
+										<Stack gap={2} align="center">
+											<ThemeIcon
+												color={stat.color}
+												variant="filled"
+												size="md"
+												radius="lg"
+											>
+												<stat.icon size={14} />
+											</ThemeIcon>
+											<Text size="xs" c="dimmed" ta="center">
 												{stat.title}
 											</Text>
-											<Title order={4} fw={700} c={stat.color}>
+											<Text
+												size="lg"
+												fw={700}
+												c={stat.color}
+												style={{ lineHeight: 1 }}
+											>
 												{stat.value}
-											</Title>
-										</Box>
-										<Box c={stat.color}>{stat.icon}</Box>
+											</Text>
+										</Stack>
+									</Card>
+								</Grid.Col>
+							))}
+						</Grid>
+					</Card>
+				</Grid.Col>
+			</Grid>
+
+			{/* ROW 3 - 3 COLUMNS */}
+			<Grid gutter="lg">
+				{/* LEFT: DISTRIBUSI AGAMA */}
+				<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"}>
+								Distribusi Agama
+							</Title>
+						</Group>
+						<ResponsiveContainer width="100%" height={250}>
+							<PieChart>
+								<Pie
+									data={religionData}
+									cx="50%"
+									cy="50%"
+									innerRadius={60}
+									outerRadius={90}
+									paddingAngle={2}
+									dataKey="value"
+								>
+									{religionData.map((entry, index) => (
+										<Cell key={`cell-${index}`} fill={entry.color} />
+									))}
+								</Pie>
+								<Tooltip
+									contentStyle={{
+										backgroundColor: dark ? "#1E293B" : "white",
+										borderColor: dark ? "#334155" : "#e5e7eb",
+										borderRadius: "8px",
+									}}
+								/>
+							</PieChart>
+						</ResponsiveContainer>
+						<Stack gap="xs" mt="md">
+							{religionData.map((item, index) => (
+								<Group key={index} justify="space-between">
+									<Group gap="xs">
+										<Box
+											w={10}
+											h={10}
+											style={{
+												backgroundColor: item.color,
+												borderRadius: 2,
+											}}
+										/>
+										<Text size="sm" c={dark ? "white" : "gray.7"}>
+											{item.name}
+										</Text>
 									</Group>
-								</Card>
-							</Grid.Col>
-						))}
-					</Grid>
-				</Card>
-			</Stack>
-		</Box>
+									<Text size="sm" fw={600} c={dark ? "white" : "gray.9"}>
+										{item.value.toLocaleString()}
+									</Text>
+								</Group>
+							))}
+						</Stack>
+					</Card>
+				</Grid.Col>
+
+				{/* CENTER: DATA PER BANJAR */}
+				<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">
+								<Users size={14} />
+							</ThemeIcon>
+							<Title order={4} c={dark ? "white" : "gray.9"}>
+								Data per Banjar
+							</Title>
+						</Group>
+						<Box style={{ overflowX: "auto" }}>
+							<table style={{ width: "100%", borderCollapse: "collapse" }}>
+								<thead>
+									<tr>
+										<th
+											style={{
+												textAlign: "left",
+												padding: "8px",
+												fontSize: "12px",
+												fontWeight: 600,
+												color: dark ? "#94A3B8" : "#64748B",
+												borderBottom: `1px solid ${dark ? "#334155" : "#e5e7eb"}`,
+											}}
+										>
+											Banjar
+										</th>
+										<th
+											style={{
+												textAlign: "right",
+												padding: "8px",
+												fontSize: "12px",
+												fontWeight: 600,
+												color: dark ? "#94A3B8" : "#64748B",
+												borderBottom: `1px solid ${dark ? "#334155" : "#e5e7eb"}`,
+											}}
+										>
+											Penduduk
+										</th>
+										<th
+											style={{
+												textAlign: "right",
+												padding: "8px",
+												fontSize: "12px",
+												fontWeight: 600,
+												color: dark ? "#94A3B8" : "#64748B",
+												borderBottom: `1px solid ${dark ? "#334155" : "#e5e7eb"}`,
+											}}
+										>
+											KK
+										</th>
+										<th
+											style={{
+												textAlign: "right",
+												padding: "8px",
+												fontSize: "12px",
+												fontWeight: 600,
+												color: dark ? "#94A3B8" : "#64748B",
+												borderBottom: `1px solid ${dark ? "#334155" : "#e5e7eb"}`,
+											}}
+										>
+											Miskin
+										</th>
+									</tr>
+								</thead>
+								<tbody>
+									{banjarData.map((item, index) => (
+										<tr
+											key={index}
+											style={{
+												backgroundColor:
+													index % 2 === 0
+														? dark
+															? "#334155"
+															: "#F8FAFC"
+														: "transparent",
+												transition: "background-color 0.15s ease",
+											}}
+										>
+											<td
+												style={{
+													padding: "10px 8px",
+													fontSize: "13px",
+													fontWeight: 500,
+													color: dark ? "#E2E8F0" : "#1E293B",
+												}}
+											>
+												{item.banjar}
+											</td>
+											<td
+												style={{
+													padding: "10px 8px",
+													textAlign: "right",
+													fontSize: "13px",
+													color: dark ? "#E2E8F0" : "#1E293B",
+												}}
+											>
+												{item.population.toLocaleString()}
+											</td>
+											<td
+												style={{
+													padding: "10px 8px",
+													textAlign: "right",
+													fontSize: "13px",
+													color: dark ? "#E2E8F0" : "#1E293B",
+												}}
+											>
+												{item.kk.toLocaleString()}
+											</td>
+											<td
+												style={{
+													padding: "10px 8px",
+													textAlign: "right",
+													fontSize: "13px",
+													color: "#EF4444",
+													fontWeight: 600,
+												}}
+											>
+												{item.poor.toLocaleString()}
+											</td>
+										</tr>
+									))}
+								</tbody>
+							</table>
+						</Box>
+					</Card>
+				</Grid.Col>
+
+				{/* RIGHT: STATISTIK SEKTOR UNGGULAN */}
+				<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">
+								<BarChart3 size={14} />
+							</ThemeIcon>
+							<Title order={4} c={dark ? "white" : "gray.9"}>
+								Sektor Unggulan
+							</Title>
+						</Group>
+						<ResponsiveContainer width="100%" height={250}>
+							<BarChart data={sektorUnggulanData} 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,
+									}}
+								/>
+								<YAxis
+									type="category"
+									dataKey="sektor"
+									axisLine={false}
+									tickLine={false}
+									tick={{
+										fill: dark ? "#E2E8F0" : "#374151",
+										fontSize: 12,
+									}}
+									width={90}
+								/>
+								<Tooltip
+									contentStyle={{
+										backgroundColor: dark ? "#1E293B" : "white",
+										borderColor: dark ? "#334155" : "#e5e7eb",
+										borderRadius: "8px",
+									}}
+								/>
+								<Bar
+									dataKey="value"
+									fill="#1E3A5F"
+									radius={[0, 8, 8, 0]}
+									maxBarSize={40}
+								>
+									{sektorUnggulanData.map((entry, index) => (
+										<Cell key={`cell-${index}`} fill="#1E3A5F" />
+									))}
+								</Bar>
+							</BarChart>
+						</ResponsiveContainer>
+					</Card>
+				</Grid.Col>
+			</Grid>
+		</Stack>
 	);
 };