feat: improve header responsiveness and update seed initialization

- Add text truncation for title on mobile screens
- Hide user info section on mobile, show simplified icons only
- Update seed.ts to create admin and demo users with proper password hashing
- Add bcryptjs for password hashing in seed script
- Update QWEN.md documentation with seed command and default users

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>

QWEN.md

@@ -51,11 +51,13 @@ bun install
 ```bash
 cp .env.example .env
 # Fill in your DATABASE_URL and BETTER_AUTH_SECRET
+# Optional: Set ADMIN_EMAIL and ADMIN_PASSWORD for admin user
 ```
 
 ### Database Initialization
 ```bash
 bun x prisma migrate dev
+bun run seed
 ```
 
 ### Start Development
@@ -109,4 +111,12 @@ bun run dev
 - `test:e2e`: Runs end-to-end tests
 - `build`: Builds the application for production
 - `start`: Starts the production server
-- `seed`: Seeds the database with initial data
+- `seed`: Seeds the database with admin and demo users
+
+## Default Users (after running `bun run seed`)
+
+- **Admin**: `ADMIN_EMAIL` (from env) / `ADMIN_PASSWORD` (default: `admin123`)
+- **Demo Users**: 
+  - `demo1@example.com` / `demo123` (role: user)
+  - `demo2@example.com` / `demo123` (role: user)
+  - `moderator@example.com` / `demo123` (role: moderator)

bun.lock

@@ -47,6 +47,7 @@
         "@tabler/icons-react": "^3.36.1",
         "@tailwindcss/vite": "^4.1.18",
         "@tanstack/react-router": "^1.158.1",
+        "bcryptjs": "^3.0.3",
         "better-auth": "^1.4.18",
         "class-variance-authority": "^0.7.1",
         "cmdk": "^1.0.1",
@@ -80,6 +81,7 @@
         "@tanstack/react-router-devtools": "^1.158.1",
         "@tanstack/router-cli": "1.158.1",
         "@tanstack/router-vite-plugin": "^1.158.1",
+        "@types/bcryptjs": "^3.0.0",
         "@types/bun": "latest",
         "@types/react": "^19",
         "@types/react-dom": "^19",
@@ -628,6 +630,8 @@
 
     "@types/babel__traverse": ["@types/babel__traverse@7.28.0", "", { "dependencies": { "@babel/types": "^7.28.2" } }, "sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q=="],
 
+    "@types/bcryptjs": ["@types/bcryptjs@3.0.0", "", { "dependencies": { "bcryptjs": "*" } }, "sha512-WRZOuCuaz8UcZZE4R5HXTco2goQSI2XxjGY3hbM/xDvwmqFWd4ivooImsMx65OKM6CtNKbnZ5YL+YwAwK7c1dg=="],
+
     "@types/bun": ["@types/bun@1.3.8", "", { "dependencies": { "bun-types": "1.3.8" } }, "sha512-3LvWJ2q5GerAXYxO2mffLTqOzEu5qnhEAlh48Vnu8WQfnmSwbgagjGZV6BoHKJztENYEDn6QmVd949W4uESRJA=="],
 
     "@types/chai": ["@types/chai@5.2.3", "", { "dependencies": { "@types/deep-eql": "*", "assertion-error": "^2.0.1" } }, "sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA=="],
@@ -776,6 +780,8 @@
 
     "baseline-browser-mapping": ["baseline-browser-mapping@2.9.19", "", { "bin": { "baseline-browser-mapping": "dist/cli.js" } }, "sha512-ipDqC8FrAl/76p2SSWKSI+H9tFwm7vYqXQrItCuiVPt26Km0jS+NzSsBWAaBusvSbQcfJG+JitdMm+wZAgTYqg=="],
 
+    "bcryptjs": ["bcryptjs@3.0.3", "", { "bin": { "bcrypt": "bin/bcrypt" } }, "sha512-GlF5wPWnSa/X5LKM1o0wz0suXIINz1iHRLvTS+sLyi7XPbe5ycmYI3DlZqVGZZtDgl4DmasFg7gOB3JYbphV5g=="],
+
     "better-auth": ["better-auth@1.4.18", "", { "dependencies": { "@better-auth/core": "1.4.18", "@better-auth/telemetry": "1.4.18", "@better-auth/utils": "0.3.0", "@better-fetch/fetch": "1.1.21", "@noble/ciphers": "^2.0.0", "@noble/hashes": "^2.0.0", "better-call": "1.1.8", "defu": "^6.1.4", "jose": "^6.1.0", "kysely": "^0.28.5", "nanostores": "^1.0.1", "zod": "^4.3.5" }, "peerDependencies": { "@lynx-js/react": "*", "@prisma/client": "^5.0.0 || ^6.0.0 || ^7.0.0", "@sveltejs/kit": "^2.0.0", "@tanstack/react-start": "^1.0.0", "@tanstack/solid-start": "^1.0.0", "better-sqlite3": "^12.0.0", "drizzle-kit": ">=0.31.4", "drizzle-orm": ">=0.41.0", "mongodb": "^6.0.0 || ^7.0.0", "mysql2": "^3.0.0", "next": "^14.0.0 || ^15.0.0 || ^16.0.0", "pg": "^8.0.0", "prisma": "^5.0.0 || ^6.0.0 || ^7.0.0", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0", "solid-js": "^1.0.0", "svelte": "^4.0.0 || ^5.0.0", "vitest": "^2.0.0 || ^3.0.0 || ^4.0.0", "vue": "^3.0.0" }, "optionalPeers": ["@lynx-js/react", "@prisma/client", "@sveltejs/kit", "@tanstack/react-start", "@tanstack/solid-start", "better-sqlite3", "drizzle-kit", "drizzle-orm", "mongodb", "mysql2", "next", "pg", "prisma", "react", "react-dom", "solid-js", "svelte", "vitest", "vue"] }, "sha512-bnyifLWBPcYVltH3RhS7CM62MoelEqC6Q+GnZwfiDWNfepXoQZBjEvn4urcERC7NTKgKq5zNBM8rvPvRBa6xcg=="],
 
     "better-call": ["better-call@1.1.8", "", { "dependencies": { "@better-auth/utils": "^0.3.0", "@better-fetch/fetch": "^1.1.4", "rou3": "^0.7.10", "set-cookie-parser": "^2.7.1" }, "peerDependencies": { "zod": "^4.0.0" }, "optionalPeers": ["zod"] }, "sha512-XMQ2rs6FNXasGNfMjzbyroSwKwYbZ/T3IxruSS6U2MJRsSYh3wYtG3o6H00ZlKZ/C/UPOAD97tqgQJNsxyeTXw=="],

package.json

@@ -59,6 +59,7 @@
 		"@tabler/icons-react": "^3.36.1",
 		"@tailwindcss/vite": "^4.1.18",
 		"@tanstack/react-router": "^1.158.1",
+		"bcryptjs": "^3.0.3",
 		"better-auth": "^1.4.18",
 		"class-variance-authority": "^0.7.1",
 		"cmdk": "^1.0.1",
@@ -92,6 +93,7 @@
 		"@tanstack/react-router-devtools": "^1.158.1",
 		"@tanstack/router-cli": "1.158.1",
 		"@tanstack/router-vite-plugin": "^1.158.1",
+		"@types/bcryptjs": "^3.0.0",
 		"@types/bun": "latest",
 		"@types/react": "^19",
 		"@types/react-dom": "^19",

prisma/seed.ts

@@ -1,13 +1,16 @@
 import "dotenv/config";
+import { hash } from "bcryptjs";
+import { generateId } from "better-auth";
 import { prisma } from "@/utils/db";
 
 async function seedAdminUser() {
 	// Load environment variables
 	const adminEmail = process.env.ADMIN_EMAIL;
+	const adminPassword = process.env.ADMIN_PASSWORD || "admin123";
 
 	if (!adminEmail) {
 		console.log(
-			"No ADMIN_EMAIL environment variable found. Skipping admin role assignment.",
+			"No ADMIN_EMAIL environment variable found. Skipping admin user creation.",
 		);
 		return;
 	}
@@ -30,9 +33,35 @@ async function seedAdminUser() {
 				console.log(`User with email ${adminEmail} already has admin role.`);
 			}
 		} else {
-			console.log(
-				`No user found with email ${adminEmail}. Skipping admin role assignment.`,
-			);
+			// Create new admin user
+			const hashedPassword = await hash(adminPassword, 12);
+			const userId = generateId();
+
+			await prisma.user.create({
+				data: {
+					id: userId,
+					email: adminEmail,
+					name: "Admin User",
+					role: "admin",
+					emailVerified: true,
+					createdAt: new Date(),
+					updatedAt: new Date(),
+				},
+			});
+
+			await prisma.account.create({
+				data: {
+					id: generateId(),
+					userId,
+					accountId: userId,
+					providerId: "credential",
+					password: hashedPassword,
+					createdAt: new Date(),
+					updatedAt: new Date(),
+				},
+			});
+
+			console.log(`Admin user created with email: ${adminEmail}`);
 		}
 	} catch (error) {
 		console.error("Error seeding admin user:", error);
@@ -40,10 +69,66 @@ async function seedAdminUser() {
 	}
 }
 
+async function seedDemoUsers() {
+	const demoUsers = [
+		{ email: "demo1@example.com", name: "Demo User 1", role: "user" },
+		{ email: "demo2@example.com", name: "Demo User 2", role: "user" },
+		{
+			email: "moderator@example.com",
+			name: "Moderator User",
+			role: "moderator",
+		},
+	];
+
+	for (const userData of demoUsers) {
+		try {
+			const existingUser = await prisma.user.findUnique({
+				where: { email: userData.email },
+			});
+
+			if (!existingUser) {
+				const userId = generateId();
+				const hashedPassword = await hash("demo123", 12);
+
+				await prisma.user.create({
+					data: {
+						id: userId,
+						email: userData.email,
+						name: userData.name,
+						role: userData.role,
+						emailVerified: true,
+						createdAt: new Date(),
+						updatedAt: new Date(),
+					},
+				});
+
+				await prisma.account.create({
+					data: {
+						id: generateId(),
+						userId,
+						accountId: userId,
+						providerId: "credential",
+						password: hashedPassword,
+						createdAt: new Date(),
+						updatedAt: new Date(),
+					},
+				});
+
+				console.log(`Demo user created: ${userData.email}`);
+			} else {
+				console.log(`Demo user already exists: ${userData.email}`);
+			}
+		} catch (error) {
+			console.error(`Error seeding user ${userData.email}:`, error);
+		}
+	}
+}
+
 async function main() {
 	console.log("Seeding database...");
 
 	await seedAdminUser();
+	await seedDemoUsers();
 
 	console.log("Database seeding completed.");
 }

src/components/bumdes-page.tsx

@@ -1,296 +1,389 @@
-import { useState } from "react";
-import { 
-  Card, 
-  Grid, 
-  GridCol, 
-  Group, 
-  Text, 
-  Title, 
-  Button, 
-  Badge, 
-  Table, 
-  Stack,
-  Select,
-  useMantineColorScheme
+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 {
+	IconBuildingStore,
+	IconCategory,
+	IconCurrency,
+	IconUsers,
+} from "@tabler/icons-react";
+import { useState } from "react";
 
 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",
-    },
-  ];
+	const { colorScheme } = useMantineColorScheme();
+	const dark = colorScheme === "dark";
 
-  // 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%",
-    },
-  ];
+	const [timeFilter, setTimeFilter] = useState<string>("bulan");
 
-  // 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",
-    },
-  ];
+	// 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",
+		},
+	];
 
-  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>
+	// 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%",
+		},
+	];
 
-      {/* 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>
+	// 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",
+		},
+	];
 
-      <Grid gutter="md">
-        {/* Produk Unggulan (Left Column) */}
-        <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>
+	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>
 
-            {/* 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>
-          </Stack>
-        </GridCol>
+			{/* 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>
 
-        {/* Detail Penjualan Produk (Right Column) */}
-        <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>
-        </GridCol>
-      </Grid>
-    </Stack>
-  );
+			<Grid gutter="md">
+				{/* Produk Unggulan (Left Column) */}
+				<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>
+					</Stack>
+				</GridCol>
+
+				{/* Detail Penjualan Produk (Right Column) */}
+				<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>
+				</GridCol>
+			</Grid>
+		</Stack>
+	);
 };
 
-export default BumdesPage;
+export default BumdesPage;

src/components/dashboard-card.tsx

@@ -1,6 +1,6 @@
-import type { ReactNode } from "react";
 // Import Mantine components directly
-import { Group, Text, ThemeIcon, Badge } from "@mantine/core";
+import { Badge, Group, Text, ThemeIcon } from "@mantine/core";
+import type { ReactNode } from "react";
 // Import custom Card and its sub-components
 import { Card } from "./ui/card";
 

src/components/dashboard-content.tsx

@@ -13,25 +13,25 @@ import {
 	Pie,
 	PieChart,
 	ResponsiveContainer,
+	Tooltip, // Added Tooltip import
 	XAxis,
 	YAxis,
-	Tooltip, // Added Tooltip import
 } from "recharts";
 
 // Import Mantine components
 
 import {
-	Grid,
-	Stack,
-	Group,
-	Text,
-	Title,
 	ActionIcon,
-	Progress,
-	Box,
 	Badge,
-	ThemeIcon,
+	Box,
 	Card, // Added for icon containers
+	Grid,
+	Group,
+	Progress,
+	Stack,
+	Text,
+	ThemeIcon,
+	Title,
 	useMantineColorScheme, // Add this import
 } from "@mantine/core";
 
@@ -68,13 +68,20 @@ const eventData = [
 
 export function DashboardContent() {
 	const { colorScheme } = useMantineColorScheme();
-	const dark = colorScheme === 'dark';
+	const dark = colorScheme === "dark";
 	return (
 		<Stack gap="lg">
 			{/* Stats Cards */}
 			<Grid gutter="md">
 				<Grid.Col span={{ base: 12, md: 6, lg: 3 }}>
-					<Card p="md" style={{borderColor: dark ? "#141D34" : "white"}} radius="md" h="100%" withBorder bg={dark ? "#141D34" : "white"}>
+					<Card
+						p="md"
+						style={{ borderColor: dark ? "#141D34" : "white" }}
+						radius="md"
+						h="100%"
+						withBorder
+						bg={dark ? "#141D34" : "white"}
+					>
 						<Group justify="space-between" align="flex-start" w="100%">
 							<Box style={{ flex: 1 }}>
 								<Text size="sm" c="dimmed" mb="xs">
@@ -92,14 +99,26 @@ export function DashboardContent() {
 									12% dari minggu lalu ↗ +12%
 								</Text>
 							</Box>
-							<ThemeIcon variant="filled" size="xl" radius="xl" color={dark ? 'gray' : 'darmasaba-blue'}>
+							<ThemeIcon
+								variant="filled"
+								size="xl"
+								radius="xl"
+								color={dark ? "gray" : "darmasaba-blue"}
+							>
 								<FileText style={{ width: "70%", height: "70%" }} />
 							</ThemeIcon>
 						</Group>
 					</Card>
 				</Grid.Col>
 				<Grid.Col span={{ base: 12, md: 6, lg: 3 }}>
-					<Card p="md" style={{borderColor: dark ? "#141D34" : "white"}} radius="md" h="100%" withBorder bg={dark ? "#141D34" : "white"}>
+					<Card
+						p="md"
+						style={{ borderColor: dark ? "#141D34" : "white" }}
+						radius="md"
+						h="100%"
+						withBorder
+						bg={dark ? "#141D34" : "white"}
+					>
 						<Group justify="space-between" align="flex-start" w="100%">
 							<Box style={{ flex: 1 }}>
 								<Text size="sm" c="dimmed" mb="xs">
@@ -114,14 +133,26 @@ export function DashboardContent() {
 									14 baru, 14 diproses
 								</Text>
 							</Box>
-							<ThemeIcon variant="filled" size="xl" radius="xl" color={dark ? 'gray' : 'darmasaba-blue'}>
+							<ThemeIcon
+								variant="filled"
+								size="xl"
+								radius="xl"
+								color={dark ? "gray" : "darmasaba-blue"}
+							>
 								<MessageCircle style={{ width: "70%", height: "70%" }} />
 							</ThemeIcon>
 						</Group>
 					</Card>
 				</Grid.Col>
 				<Grid.Col span={{ base: 12, md: 6, lg: 3 }}>
-					<Card p="md" style={{borderColor: dark ? "#141D34" : "white"}} radius="md" h="100%" withBorder bg={dark ? "#141D34" : "white"}>
+					<Card
+						p="md"
+						style={{ borderColor: dark ? "#141D34" : "white" }}
+						radius="md"
+						h="100%"
+						withBorder
+						bg={dark ? "#141D34" : "white"}
+					>
 						<Group justify="space-between" align="flex-start" w="100%">
 							<Box style={{ flex: 1 }}>
 								<Text size="sm" c="dimmed" mb="xs">
@@ -139,14 +170,26 @@ export function DashboardContent() {
 									+8%
 								</Text>
 							</Box>
-							<ThemeIcon variant="filled" size="xl" radius="xl" color={dark ? 'gray' : 'darmasaba-blue'}>
+							<ThemeIcon
+								variant="filled"
+								size="xl"
+								radius="xl"
+								color={dark ? "gray" : "darmasaba-blue"}
+							>
 								<CheckCircle style={{ width: "70%", height: "70%" }} />
 							</ThemeIcon>
 						</Group>
 					</Card>
 				</Grid.Col>
 				<Grid.Col span={{ base: 12, md: 6, lg: 3 }}>
-					<Card p="md" style={{borderColor: dark ? "#141D34" : "white"}} radius="md" h="100%" withBorder bg={dark ? "#141D34" : "white"}>
+					<Card
+						p="md"
+						style={{ borderColor: dark ? "#141D34" : "white" }}
+						radius="md"
+						h="100%"
+						withBorder
+						bg={dark ? "#141D34" : "white"}
+					>
 						<Group justify="space-between" align="flex-start" w="100%">
 							<Box style={{ flex: 1 }}>
 								<Text size="sm" c="dimmed" mb="xs">
@@ -161,7 +204,12 @@ export function DashboardContent() {
 									dari 482 responden
 								</Text>
 							</Box>
-							<ThemeIcon variant="filled" size="xl" radius="xl" color={dark ? 'gray' : 'darmasaba-blue'}>
+							<ThemeIcon
+								variant="filled"
+								size="xl"
+								radius="xl"
+								color={dark ? "gray" : "darmasaba-blue"}
+							>
 								<Users style={{ width: "70%", height: "70%" }} />
 							</ThemeIcon>
 						</Group>
@@ -171,7 +219,13 @@ export function DashboardContent() {
 			<Grid gutter="lg">
 				{/* Bar Chart */}
 				<Grid.Col span={{ base: 12, lg: 6 }}>
-					<Card p="md" style={{borderColor: dark ? "#141D34" : "white"}} radius="md" withBorder bg={dark ? "#141D34" : "white"}>
+					<Card
+						p="md"
+						style={{ borderColor: dark ? "#141D34" : "white" }}
+						radius="md"
+						withBorder
+						bg={dark ? "#141D34" : "white"}
+					>
 						<Group justify="space-between" mb="md">
 							<Box>
 								<Title order={4} mb={5}>
@@ -232,7 +286,13 @@ export function DashboardContent() {
 
 				{/* Pie Chart */}
 				<Grid.Col span={{ base: 12, lg: 6 }}>
-					<Card p="md" style={{borderColor: dark ? "#141D34" : "white"}} radius="md" withBorder bg={dark ? "#141D34" : "white"}>
+					<Card
+						p="md"
+						style={{ borderColor: dark ? "#141D34" : "white" }}
+						radius="md"
+						withBorder
+						bg={dark ? "#141D34" : "white"}
+					>
 						<Title order={4} mb={5}>
 							Tingkat Kepuasan
 						</Title>
@@ -259,19 +319,35 @@ export function DashboardContent() {
 						</ResponsiveContainer>
 						<Group justify="center" gap="md" mt="md">
 							<Group gap="xs">
-								<Box w={12} h={12} style={{ backgroundColor: COLORS[0], borderRadius: "50%" }} />
+								<Box
+									w={12}
+									h={12}
+									style={{ backgroundColor: COLORS[0], borderRadius: "50%" }}
+								/>
 								<Text size="sm">Sangat puas (0%)</Text>
 							</Group>
 							<Group gap="xs">
-								<Box w={12} h={12} style={{ backgroundColor: COLORS[1], borderRadius: "50%" }} />
+								<Box
+									w={12}
+									h={12}
+									style={{ backgroundColor: COLORS[1], borderRadius: "50%" }}
+								/>
 								<Text size="sm">Puas (0%)</Text>
 							</Group>
 							<Group gap="xs">
-								<Box w={12} h={12} style={{ backgroundColor: COLORS[2], borderRadius: "50%" }} />
+								<Box
+									w={12}
+									h={12}
+									style={{ backgroundColor: COLORS[2], borderRadius: "50%" }}
+								/>
 								<Text size="sm">Cukup (0%)</Text>
 							</Group>
 							<Group gap="xs">
-								<Box w={12} h={12} style={{ backgroundColor: COLORS[3], borderRadius: "50%" }} />
+								<Box
+									w={12}
+									h={12}
+									style={{ backgroundColor: COLORS[3], borderRadius: "50%" }}
+								/>
 								<Text size="sm">Kurang (0%)</Text>
 							</Group>
 						</Group>
@@ -283,7 +359,13 @@ export function DashboardContent() {
 			<Grid gutter="lg">
 				{/* Divisi Teraktif */}
 				<Grid.Col span={{ base: 12, lg: 6 }}>
-					<Card p="md" style={{borderColor: dark ? "#141D34" : "white"}} radius="md" withBorder bg={dark ? "#141D34" : "white"}>
+					<Card
+						p="md"
+						style={{ borderColor: dark ? "#141D34" : "white" }}
+						radius="md"
+						withBorder
+						bg={dark ? "#141D34" : "white"}
+					>
 						<Group gap="xs" mb="lg">
 							<Box>
 								{/* Original SVG icon */}
@@ -355,7 +437,13 @@ export function DashboardContent() {
 
 				{/* Kalender */}
 				<Grid.Col span={{ base: 12, lg: 6 }}>
-					<Card p="md" style={{borderColor: dark ? "#141D34" : "white"}} radius="md" withBorder bg={dark ? "#141D34" : "white"}>
+					<Card
+						p="md"
+						style={{ borderColor: dark ? "#141D34" : "white" }}
+						radius="md"
+						withBorder
+						bg={dark ? "#141D34" : "white"}
+					>
 						<Group gap="xs" mb="lg">
 							<Calendar style={{ width: 20, height: 20 }} />
 							<Title order={4}>Kalender & Kegiatan Mendatang</Title>
@@ -364,7 +452,10 @@ export function DashboardContent() {
 							{eventData.map((event, index) => (
 								<Box
 									key={index}
-									style={{ borderLeft: "4px solid var(--mantine-color-blue-filled)", paddingLeft: 12 }}
+									style={{
+										borderLeft: "4px solid var(--mantine-color-blue-filled)",
+										paddingLeft: 12,
+									}}
 								>
 									<Text size="sm" c="dimmed">
 										{event.date}
@@ -378,7 +469,13 @@ export function DashboardContent() {
 			</Grid>
 
 			{/* APBDes Chart */}
-			<Card p="md" style={{borderColor: dark ? "#141D34" : "white"}} radius="md" withBorder bg={dark ? "#141D34" : "white"}>
+			<Card
+				p="md"
+				style={{ borderColor: dark ? "#141D34" : "white" }}
+				radius="md"
+				withBorder
+				bg={dark ? "#141D34" : "white"}
+			>
 				<Title order={4} mb="lg">
 					Grafik APBDes
 				</Title>
@@ -387,19 +484,37 @@ export function DashboardContent() {
 						<Text size="sm" fw={500} w={60}>
 							Belanja
 						</Text>
-						<Progress value={70} size="lg" radius="xl" color="blue" style={{ flex: 1 }} />
+						<Progress
+							value={70}
+							size="lg"
+							radius="xl"
+							color="blue"
+							style={{ flex: 1 }}
+						/>
 					</Group>
 					<Group align="center" gap="md">
 						<Text size="sm" fw={500} w={60}>
 							Pendapatan
 						</Text>
-						<Progress value={90} size="lg" radius="xl" color="green" style={{ flex: 1 }} />
+						<Progress
+							value={90}
+							size="lg"
+							radius="xl"
+							color="green"
+							style={{ flex: 1 }}
+						/>
 					</Group>
 					<Group align="center" gap="md">
 						<Text size="sm" fw={500} w={60}>
 							Pembangunan
 						</Text>
-						<Progress value={50} size="lg" radius="xl" color="orange" style={{ flex: 1 }} />
+						<Progress
+							value={50}
+							size="lg"
+							radius="xl"
+							color="orange"
+							style={{ flex: 1 }}
+						/>
 					</Group>
 				</Stack>
 			</Card>

src/components/demografi-pekerjaan.tsx

@@ -1,17 +1,22 @@
-import React from "react";
+import { BarChart, PieChart } from "@mantine/charts";
 import {
+	Box,
 	Card,
-	Title,
-	Text,
+	Grid,
 	Group,
 	Stack,
-	Grid,
-	Box,
 	Table,
+	Text,
+	Title,
 	useMantineColorScheme,
 } from "@mantine/core";
-import { IconBabyCarriage, IconSkull, IconArrowUp, IconArrowDown } from "@tabler/icons-react";
-import { BarChart, PieChart } from "@mantine/charts";
+import {
+	IconArrowDown,
+	IconArrowUp,
+	IconBabyCarriage,
+	IconSkull,
+} from "@tabler/icons-react";
+import React from "react";
 
 // Sample Data
 const kpiData = [
@@ -71,7 +76,11 @@ const kpiData = [
 		value: "23",
 		sub: "Tahun ini",
 		icon: (
-			<IconBabyCarriage className="h-6 w-6 text-muted-foreground" role="img" aria-label="Icon kelahiran" />
+			<IconBabyCarriage
+				className="h-6 w-6 text-muted-foreground"
+				role="img"
+				aria-label="Icon kelahiran"
+			/>
 		),
 	},
 	{
@@ -136,10 +145,30 @@ const banjarData = [
 ];
 
 const dynamicStats = [
-	{ title: "Kelahiran", value: "23", icon: <IconBabyCarriage size={16} />, color: "green" },
-	{ title: "Kematian", value: "12", icon: <IconSkull size={16} />, color: "red" },
-	{ title: "Pindah Masuk", value: "45", icon: <IconArrowDown size={16} />, color: "blue" },
-	{ title: "Pindah Keluar", value: "32", icon: <IconArrowUp size={16} />, color: "orange" },
+	{
+		title: "Kelahiran",
+		value: "23",
+		icon: <IconBabyCarriage size={16} />,
+		color: "green",
+	},
+	{
+		title: "Kematian",
+		value: "12",
+		icon: <IconSkull size={16} />,
+		color: "red",
+	},
+	{
+		title: "Pindah Masuk",
+		value: "45",
+		icon: <IconArrowDown size={16} />,
+		color: "blue",
+	},
+	{
+		title: "Pindah Keluar",
+		value: "32",
+		icon: <IconArrowUp size={16} />,
+		color: "orange",
+	},
 ];
 
 const DemografiPekerjaan = () => {
@@ -152,14 +181,22 @@ const DemografiPekerjaan = () => {
 				<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" }}>
+							<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)",
+										color: dark
+											? "var(--mantine-color-dark-3)"
+											: "var(--mantine-color-dimmed)",
 									})}
 								</Group>
 								<Title order={3} fw={700} c={dark ? "dark.0" : "black"} mt="xs">
@@ -173,7 +210,9 @@ const DemografiPekerjaan = () => {
 												? "green"
 												: kpi.deltaType === "negative"
 													? "red"
-													: dark ? "dark.3" : "dimmed"
+													: dark
+														? "dark.3"
+														: "dimmed"
 										}
 										mt={4}
 									>
@@ -194,7 +233,13 @@ const DemografiPekerjaan = () => {
 				<Grid gutter="lg">
 					{/* Grafik Pengelompokan Umur */}
 					<Grid.Col span={{ base: 12, lg: 6 }}>
-						<Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }}>
+						<Card
+							p="md"
+							radius="md"
+							withBorder
+							bg={dark ? "#141D34" : "white"}
+							style={{ borderColor: dark ? "#141D34" : "white" }}
+						>
 							<Title order={3} fw={500} mb="md">
 								Grafik Pengelompokan Umur
 							</Title>
@@ -202,7 +247,7 @@ const DemografiPekerjaan = () => {
 								h={300}
 								data={ageDistributionData}
 								dataKey="ageRange"
-								series={[{ name: 'total', color: 'darmasaba-navy' }]}
+								series={[{ name: "total", color: "darmasaba-navy" }]}
 								withLegend
 							/>
 						</Card>
@@ -210,7 +255,13 @@ const DemografiPekerjaan = () => {
 
 					{/* Demografi Pekerjaan */}
 					<Grid.Col span={{ base: 12, lg: 6 }}>
-						<Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }}>
+						<Card
+							p="md"
+							radius="md"
+							withBorder
+							bg={dark ? "#141D34" : "white"}
+							style={{ borderColor: dark ? "#141D34" : "white" }}
+						>
 							<Title order={3} fw={500} mb="md">
 								Demografi Pekerjaan
 							</Title>
@@ -218,7 +269,7 @@ const DemografiPekerjaan = () => {
 								h={300}
 								data={jobDistributionData}
 								dataKey="job"
-								series={[{ name: 'total', color: 'darmasaba-navy' }]}
+								series={[{ name: "total", color: "darmasaba-navy" }]}
 								withLegend
 							/>
 						</Card>
@@ -229,16 +280,22 @@ const DemografiPekerjaan = () => {
 				<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" }}>
+						<Card
+							p="md"
+							radius="md"
+							withBorder
+							bg={dark ? "#141D34" : "white"}
+							style={{ borderColor: dark ? "#141D34" : "white" }}
+						>
 							<Title order={3} fw={500} mb="md">
 								Distribusi Agama
 							</Title>
 							<PieChart
 								h={300}
-								data={religionData.map(item => ({
+								data={religionData.map((item) => ({
 									name: item.religion,
 									value: item.total,
-									color: item.color
+									color: item.color,
 								}))}
 								withLabels
 								withLabelsLine
@@ -250,27 +307,53 @@ const DemografiPekerjaan = () => {
 
 					{/* 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" }}>
+						<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.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>
+												<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>
 									))}
@@ -281,14 +364,29 @@ const DemografiPekerjaan = () => {
 				</Grid>
 
 				{/* Statistik Dinamika Penduduk */}
-				<Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }}>
+				<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" }}>
+							<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"}>
@@ -298,9 +396,7 @@ const DemografiPekerjaan = () => {
 												{stat.value}
 											</Title>
 										</Box>
-										<Box c={stat.color}>
-											{stat.icon}
-										</Box>
+										<Box c={stat.color}>{stat.icon}</Box>
 									</Group>
 								</Card>
 							</Grid.Col>
@@ -312,4 +408,4 @@ const DemografiPekerjaan = () => {
 	);
 };
 
-export default DemografiPekerjaan;
+export default DemografiPekerjaan;

src/components/header.tsx

@@ -1,108 +1,72 @@
-import { useLocation } 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 {
+	ActionIcon,
+	Badge,
+	Box,
 	Group,
 	Text,
-	Title,
-	ActionIcon,
-	Divider,
-	Avatar,
-	Box,
-	Badge,
 	useMantineColorScheme,
 } from "@mantine/core";
+import { useLocation } from "@tanstack/react-router";
+import { Bell, Moon, Sun } from "lucide-react";
 
 export function Header() {
 	const location = useLocation();
 	const { colorScheme, toggleColorScheme } = useMantineColorScheme();
 	const dark = colorScheme === "dark";
 
-	// Define page titles based on route
-	const getPageTitle = () => {
-		switch (location.pathname) {
-			case "/":
-				return "Desa Darmasaba";
-			case "/kinerja-divisi":
-				return "Kinerja Divisi";
-			case "/pengaduan":
-				return "Pengaduan & Layanan Publik";
-			case "/analytic":
-				return "Jenna Analytic";
-			case "/demografi":
-				return "Demografi & Kependudukan";
-			case "/keuangan":
-				return "Keuangan & Anggaran";
-			case "/bumdes":
-				return "Bumdes & UMKM Desa";
-			case "/sosial":
-			case "/keamanan":
-				return "Keamanan";
-			case "/bantuan":
-				return "Bantuan";
-			case "/pengaturan":
-				return "Pengaturan";
-			default:
-				return "Desa Darmasaba";
-		}
-	};
+	const title =
+		location.pathname === "/"
+			? "Desa Darmasaba"
+			: "Desa Darmasaba";
 
 	return (
-		<Group justify="space-between" w="100%">
-			{/* Title */}
-			<Title order={3} c={"white"}>{getPageTitle()}</Title>
+		<Box
+			style={{
+				display: "grid",
+				gridTemplateColumns: "1fr auto 1fr",
+				alignItems: "center",
+				width: "100%",
+			}}
+		>
+			{/* LEFT SPACER (burger sudah di luar) */}
+			<Box />
 
-			{/* Right Section */}
-			<Group gap="md">
+			{/* CENTER TITLE */}
+			<Text
+				c="white"
+				fw={600}
+				size="md"
+				style={{
+					textAlign: "center",
+					whiteSpace: "nowrap",
+					overflow: "hidden",
+					textOverflow: "ellipsis",
+				}}
+			>
+				{title}
+			</Text>
 
+			{/* RIGHT ICONS */}
+			<Group gap="xs" justify="flex-end">
+				<ActionIcon
+					onClick={toggleColorScheme}
+					variant="subtle"
+					radius="xl"
+				>
+					{dark ? <Sun size={18} /> : <Moon size={18} />}
+				</ActionIcon>
 
-				{/* User Info */}
-				<Group gap="sm">
-					<Box ta="right">
-						<Text c={"white"} size="sm" fw={500}>
-							I. B. Surya Prabhawa M...
-						</Text>
-						<Text c={"white"} size="xs">
-							Kepala Desa
-						</Text>
-					</Box>
-					<Avatar color="blue" radius="xl">
-						<UserIcon color="white" style={{ width: "70%", height: "70%" }} />
-					</Avatar>
-				</Group>
-
-				{/* Divider */}
-				<Divider orientation="vertical" h={30} />
-
-				{/* Icons */}
-				<Group gap="sm">
-					<ActionIcon
-						onClick={() => toggleColorScheme()}
-						variant="subtle"
-						size="lg"
-						radius="xl"
-						aria-label="Toggle color scheme"
+				<ActionIcon variant="subtle" radius="xl" pos="relative">
+					<Bell size={18} />
+					<Badge
+						size="xs"
+						color="red"
+						style={{ position: "absolute", top: -4, right: -4 }}
 					>
-						{dark ? (
-							<Sun color="white" style={{ width: "70%", height: "70%" }} />
-						) : (
-							<Moon color="white" style={{ width: "70%", height: "70%" }} />
-						)}
-					</ActionIcon>
-					<ActionIcon variant="subtle" size="lg" radius="xl" pos="relative">
-						<Bell color="white" style={{ width: "70%", height: "70%" }} />
-						<Badge
-							size="xs"
-							color="red"
-							variant="filled"
-							style={{ position: "absolute", top: 0, right: 0 }}
-							radius={"xl"}
-						>
-							10
-						</Badge>
-					</ActionIcon>
-				</Group>
+						10
+					</Badge>
+				</ActionIcon>
 			</Group>
-		</Group>
+		</Box>
 	);
 }

src/components/help-page.tsx

@@ -1,248 +1,435 @@
-import { Container, Grid, Title, Text, SimpleGrid, Box, Accordion, Stack, useMantineColorScheme } from '@mantine/core';
-import { HelpCard } from '@/components/ui/help-card';
-import { IconBook, IconVideo, IconHelpCircle, IconMessage, IconFileText, IconHeadphones } from '@tabler/icons-react';
-import { useState } from 'react';
+import {
+	Accordion,
+	Box,
+	Container,
+	Grid,
+	SimpleGrid,
+	Stack,
+	Text,
+	Title,
+	useMantineColorScheme,
+} from "@mantine/core";
+import {
+	IconBook,
+	IconFileText,
+	IconHeadphones,
+	IconHelpCircle,
+	IconMessage,
+	IconVideo,
+} from "@tabler/icons-react";
+import { useState } from "react";
+import { HelpCard } from "@/components/ui/help-card";
 
 const HelpPage = () => {
-  const { colorScheme } = useMantineColorScheme();
-  const dark = colorScheme === "dark";
-  // Sample data for sections
-  const guideItems = [
-    { title: 'Cara Login', description: 'Langkah-langkah untuk login ke dashboard' },
-    { title: 'Navigasi Dashboard', description: 'Penjelasan tentang tata letak dan navigasi' },
-    { title: 'Fitur Dasar', description: 'Panduan penggunaan fitur-fitur utama' },
-    { title: 'Tips & Trik', description: 'Tips untuk meningkatkan produktivitas' },
-  ];
+	const { colorScheme } = useMantineColorScheme();
+	const dark = colorScheme === "dark";
+	// Sample data for sections
+	const guideItems = [
+		{
+			title: "Cara Login",
+			description: "Langkah-langkah untuk login ke dashboard",
+		},
+		{
+			title: "Navigasi Dashboard",
+			description: "Penjelasan tentang tata letak dan navigasi",
+		},
+		{
+			title: "Fitur Dasar",
+			description: "Panduan penggunaan fitur-fitur utama",
+		},
+		{
+			title: "Tips & Trik",
+			description: "Tips untuk meningkatkan produktivitas",
+		},
+	];
 
-  const videoItems = [
-    { title: 'Dashboard Overview', duration: '5:23' },
-    { title: 'Analisis Data', duration: '8:45' },
-    { title: 'Membuat Laporan', duration: '6:12' },
-    { title: 'Export Data', duration: '4:30' },
-  ];
+	const videoItems = [
+		{ title: "Dashboard Overview", duration: "5:23" },
+		{ title: "Analisis Data", duration: "8:45" },
+		{ title: "Membuat Laporan", duration: "6:12" },
+		{ title: "Export Data", duration: "4:30" },
+	];
 
-  const faqItems = [
-    { question: 'Bagaimana cara reset password?', answer: 'Anda dapat mereset password melalui halaman login dengan klik "Lupa Password"' },
-    { question: 'Apakah saya bisa mengakses data offline?', answer: 'Saat ini aplikasi hanya dapat diakses secara online' },
-    { question: 'Berapa lama waktu respon support?', answer: 'Tim support kami biasanya merespon dalam waktu kurang dari 24 jam' },
-    { question: 'Bagaimana cara menambahkan pengguna baru?', answer: 'Fitur penambahan pengguna dapat ditemukan di menu Pengaturan > Manajemen Pengguna' },
-  ];
+	const faqItems = [
+		{
+			question: "Bagaimana cara reset password?",
+			answer:
+				'Anda dapat mereset password melalui halaman login dengan klik "Lupa Password"',
+		},
+		{
+			question: "Apakah saya bisa mengakses data offline?",
+			answer: "Saat ini aplikasi hanya dapat diakses secara online",
+		},
+		{
+			question: "Berapa lama waktu respon support?",
+			answer:
+				"Tim support kami biasanya merespon dalam waktu kurang dari 24 jam",
+		},
+		{
+			question: "Bagaimana cara menambahkan pengguna baru?",
+			answer:
+				"Fitur penambahan pengguna dapat ditemukan di menu Pengaturan > Manajemen Pengguna",
+		},
+	];
 
-  const documentationItems = [
-    { title: 'API Reference', description: 'Dokumentasi lengkap untuk integrasi API' },
-    { title: 'Integrasi Sistem', description: 'Cara mengintegrasikan dengan sistem eksternal' },
-    { title: 'Format Data', description: 'Spesifikasi format data yang didukung' },
-    { title: 'Best Practices', description: 'Praktik terbaik dalam penggunaan platform' },
-  ];
+	const documentationItems = [
+		{
+			title: "API Reference",
+			description: "Dokumentasi lengkap untuk integrasi API",
+		},
+		{
+			title: "Integrasi Sistem",
+			description: "Cara mengintegrasikan dengan sistem eksternal",
+		},
+		{
+			title: "Format Data",
+			description: "Spesifikasi format data yang didukung",
+		},
+		{
+			title: "Best Practices",
+			description: "Praktik terbaik dalam penggunaan platform",
+		},
+	];
 
-  const stats = [
-    { value: '150+', label: 'Artikel Panduan' },
-    { value: '50+', label: 'Video Tutorial' },
-    { value: '24/7', label: 'Support Aktif' },
-  ];
+	const stats = [
+		{ value: "150+", label: "Artikel Panduan" },
+		{ value: "50+", label: "Video Tutorial" },
+		{ value: "24/7", label: "Support Aktif" },
+	];
 
-  // State for chat functionality
-  const [messages, setMessages] = useState([
-    { id: 1, text: 'Halo! Saya Jenna, asisten virtual Anda. Bagaimana saya bisa membantu hari ini?', sender: 'jenna' }
-  ]);
-  const [inputValue, setInputValue] = useState('');
-  const [isLoading, setIsLoading] = useState(false);
+	// State for chat functionality
+	const [messages, setMessages] = useState([
+		{
+			id: 1,
+			text: "Halo! Saya Jenna, asisten virtual Anda. Bagaimana saya bisa membantu hari ini?",
+			sender: "jenna",
+		},
+	]);
+	const [inputValue, setInputValue] = useState("");
+	const [isLoading, setIsLoading] = useState(false);
 
-  const handleSendMessage = () => {
-    if (inputValue.trim() === '') return;
+	const handleSendMessage = () => {
+		if (inputValue.trim() === "") return;
 
-    // Add user message
-    const newUserMessage = {
-      id: messages.length + 1,
-      text: inputValue,
-      sender: 'user'
-    };
+		// Add user message
+		const newUserMessage = {
+			id: messages.length + 1,
+			text: inputValue,
+			sender: "user",
+		};
 
-    setMessages(prev => [...prev, newUserMessage]);
-    setInputValue('');
-    setIsLoading(true);
+		setMessages((prev) => [...prev, newUserMessage]);
+		setInputValue("");
+		setIsLoading(true);
 
-    // Simulate Jenna's response after delay
-    setTimeout(() => {
-      const jennaResponse = {
-        id: messages.length + 2,
-        text: 'Terima kasih atas pertanyaan Anda. Saat ini saya adalah versi awal dari asisten virtual. Tim kami sedang mengembangkan kemampuan saya lebih lanjut.',
-        sender: 'jenna'
-      };
-      setMessages(prev => [...prev, jennaResponse]);
-      setIsLoading(false);
-    }, 1000);
-  };
+		// Simulate Jenna's response after delay
+		setTimeout(() => {
+			const jennaResponse = {
+				id: messages.length + 2,
+				text: "Terima kasih atas pertanyaan Anda. Saat ini saya adalah versi awal dari asisten virtual. Tim kami sedang mengembangkan kemampuan saya lebih lanjut.",
+				sender: "jenna",
+			};
+			setMessages((prev) => [...prev, jennaResponse]);
+			setIsLoading(false);
+		}, 1000);
+	};
 
-  const handleKeyPress = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter' && !e.shiftKey) {
-      e.preventDefault();
-      handleSendMessage();
-    }
-  };
+	const handleKeyPress = (e: React.KeyboardEvent) => {
+		if (e.key === "Enter" && !e.shiftKey) {
+			e.preventDefault();
+			handleSendMessage();
+		}
+	};
 
-  return (
-    <Container size="lg" py="xl">
-      <Title order={1} mb="xl" ta="center">Pusat Bantuan</Title>
-      <Text size="lg" color="dimmed" ta="center" mb="xl">
-        Temukan jawaban untuk pertanyaan Anda atau hubungi tim support kami
-      </Text>
+	return (
+		<Container size="lg" py="xl">
+			<Title order={1} mb="xl" ta="center">
+				Pusat Bantuan
+			</Title>
+			<Text size="lg" color="dimmed" ta="center" mb="xl">
+				Temukan jawaban untuk pertanyaan Anda atau hubungi tim support kami
+			</Text>
 
-      {/* Statistics Section */}
-      <SimpleGrid cols={3} spacing="lg" mb="xl">
-        {stats.map((stat, index) => (
-          <HelpCard key={index} bg={dark ? "#141D34" : "white"} p="lg" style={{ textAlign: 'center', borderColor: dark ? "#141D34" : "white" }} h="100%" >
-            <Text size="xl" fw={700} style={{ fontSize: '32px' }}>{stat.value}</Text>
-            <Text size="sm" color="dimmed">{stat.label}</Text>
-          </HelpCard>
-        ))}
-      </SimpleGrid>
+			{/* Statistics Section */}
+			<SimpleGrid cols={3} spacing="lg" mb="xl">
+				{stats.map((stat, index) => (
+					<HelpCard
+						key={index}
+						bg={dark ? "#141D34" : "white"}
+						p="lg"
+						style={{
+							textAlign: "center",
+							borderColor: dark ? "#141D34" : "white",
+						}}
+						h="100%"
+					>
+						<Text size="xl" fw={700} style={{ fontSize: "32px" }}>
+							{stat.value}
+						</Text>
+						<Text size="sm" color="dimmed">
+							{stat.label}
+						</Text>
+					</HelpCard>
+				))}
+			</SimpleGrid>
 
-      <Stack gap="lg">
-        <Box>
-          <Grid gutter="lg" justify="center">
-            {/* Panduan Memulai */}
-            <Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
-              <HelpCard style={{ borderColor: dark ? "#141D34" : "white" }} bg={dark ? "#141D34" : "white"} icon={<IconBook size={24} />} title="Panduan Memulai" h="100%">
-                <Box>
-                  {guideItems.map((item, index) => (
-                    <Box key={index} py="sm" style={{ borderBottom: '1px solid #eee', cursor: 'pointer' }} onClick={() => alert(`Navigasi ke ${item.title}`)}>
-                      <Text fw={500}>{item.title}</Text>
-                      <Text size="sm" color="dimmed">{item.description}</Text>
-                    </Box>
-                  ))}
-                </Box>
-              </HelpCard>
-            </Grid.Col>
+			<Stack gap="lg">
+				<Box>
+					<Grid gutter="lg" justify="center">
+						{/* Panduan Memulai */}
+						<Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
+							<HelpCard
+								style={{ borderColor: dark ? "#141D34" : "white" }}
+								bg={dark ? "#141D34" : "white"}
+								icon={<IconBook size={24} />}
+								title="Panduan Memulai"
+								h="100%"
+							>
+								<Box>
+									{guideItems.map((item, index) => (
+										<Box
+											key={index}
+											py="sm"
+											style={{
+												borderBottom: "1px solid #eee",
+												cursor: "pointer",
+											}}
+											onClick={() => alert(`Navigasi ke ${item.title}`)}
+										>
+											<Text fw={500}>{item.title}</Text>
+											<Text size="sm" color="dimmed">
+												{item.description}
+											</Text>
+										</Box>
+									))}
+								</Box>
+							</HelpCard>
+						</Grid.Col>
 
-            {/* Video Tutorial */}
-            <Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
-              <HelpCard style={{ borderColor: dark ? "#141D34" : "white" }} bg={dark ? "#141D34" : "white"} icon={<IconVideo size={24} />} title="Video Tutorial" h="100%">
-                <Box>
-                  {videoItems.map((item, index) => (
-                    <Box key={index} py="sm" style={{ borderBottom: '1px solid #eee', cursor: 'pointer' }} onClick={() => alert(`Buka video: ${item.title}`)}>
-                      <Text fw={500}>{item.title}</Text>
-                      <Text size="sm" color="dimmed">{item.duration}</Text>
-                    </Box>
-                  ))}
-                </Box>
-              </HelpCard>
-            </Grid.Col>
+						{/* Video Tutorial */}
+						<Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
+							<HelpCard
+								style={{ borderColor: dark ? "#141D34" : "white" }}
+								bg={dark ? "#141D34" : "white"}
+								icon={<IconVideo size={24} />}
+								title="Video Tutorial"
+								h="100%"
+							>
+								<Box>
+									{videoItems.map((item, index) => (
+										<Box
+											key={index}
+											py="sm"
+											style={{
+												borderBottom: "1px solid #eee",
+												cursor: "pointer",
+											}}
+											onClick={() => alert(`Buka video: ${item.title}`)}
+										>
+											<Text fw={500}>{item.title}</Text>
+											<Text size="sm" color="dimmed">
+												{item.duration}
+											</Text>
+										</Box>
+									))}
+								</Box>
+							</HelpCard>
+						</Grid.Col>
 
-            {/* FAQ */}
-            <Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
-              <HelpCard style={{ borderColor: dark ? "#141D34" : "white" }} bg={dark ? "#141D34" : "white"} icon={<IconHelpCircle size={24} />} title="FAQ" h="100%">
-                <Accordion variant="separated" >
-                  {faqItems.map((item, index) => (
-                    <Accordion.Item style={{ backgroundColor: dark ? "#263852ff" : "#F1F5F9" }} key={index} value={`faq-${index}`}>
-                      <Accordion.Control>{item.question}</Accordion.Control>
-                      <Accordion.Panel>
-                        <Text size="sm">{item.answer}</Text>
-                      </Accordion.Panel>
-                    </Accordion.Item>
-                  ))}
-                </Accordion>
-              </HelpCard>
-            </Grid.Col>
-          </Grid>
-        </Box>
+						{/* FAQ */}
+						<Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
+							<HelpCard
+								style={{ borderColor: dark ? "#141D34" : "white" }}
+								bg={dark ? "#141D34" : "white"}
+								icon={<IconHelpCircle size={24} />}
+								title="FAQ"
+								h="100%"
+							>
+								<Accordion variant="separated">
+									{faqItems.map((item, index) => (
+										<Accordion.Item
+											style={{
+												backgroundColor: dark ? "#263852ff" : "#F1F5F9",
+											}}
+											key={index}
+											value={`faq-${index}`}
+										>
+											<Accordion.Control>{item.question}</Accordion.Control>
+											<Accordion.Panel>
+												<Text size="sm">{item.answer}</Text>
+											</Accordion.Panel>
+										</Accordion.Item>
+									))}
+								</Accordion>
+							</HelpCard>
+						</Grid.Col>
+					</Grid>
+				</Box>
 
-        <Box>
-          <Grid>
-            {/* Hubungi Support */}
-            <Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
-              <HelpCard style={{ borderColor: dark ? "#141D34" : "white" }} bg={dark ? "#141D34" : "white"} icon={<IconHeadphones size={24} />} title="Hubungi Support" h="100%">
-                <Box>
-                  <Text fw={500}>Email</Text>
-                  <Text size="sm" color="dimmed" mb="md"><a href="mailto:support@example.com">support@example.com</a></Text>
+				<Box>
+					<Grid>
+						{/* Hubungi Support */}
+						<Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
+							<HelpCard
+								style={{ borderColor: dark ? "#141D34" : "white" }}
+								bg={dark ? "#141D34" : "white"}
+								icon={<IconHeadphones size={24} />}
+								title="Hubungi Support"
+								h="100%"
+							>
+								<Box>
+									<Text fw={500}>Email</Text>
+									<Text size="sm" color="dimmed" mb="md">
+										<a href="mailto:support@example.com">support@example.com</a>
+									</Text>
 
-                  <Text fw={500}>WhatsApp</Text>
-                  <Text size="sm" color="dimmed" mb="md"><a href="https://wa.me/1234567890">+62 123 456 7890</a></Text>
+									<Text fw={500}>WhatsApp</Text>
+									<Text size="sm" color="dimmed" mb="md">
+										<a href="https://wa.me/1234567890">+62 123 456 7890</a>
+									</Text>
 
-                  <Text fw={500}>Jam Kerja</Text>
-                  <Text size="sm" color="dimmed">Senin - Jumat, 09:00 - 17:00 WIB</Text>
+									<Text fw={500}>Jam Kerja</Text>
+									<Text size="sm" color="dimmed">
+										Senin - Jumat, 09:00 - 17:00 WIB
+									</Text>
 
-                  <Text fw={500} mt="md">Waktu Respon</Text>
-                  <Text size="sm" color="dimmed">Rata-rata 2-4 jam kerja</Text>
-                </Box>
-              </HelpCard>
-            </Grid.Col>
+									<Text fw={500} mt="md">
+										Waktu Respon
+									</Text>
+									<Text size="sm" color="dimmed">
+										Rata-rata 2-4 jam kerja
+									</Text>
+								</Box>
+							</HelpCard>
+						</Grid.Col>
 
-            {/* Dokumentasi */}
-            <Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
-              <HelpCard style={{ borderColor: dark ? "#141D34" : "white" }} bg={dark ? "#141D34" : "white"} icon={<IconFileText size={24} />} title="Dokumentasi" h="100%">
-                <Box>
-                  {documentationItems.map((item, index) => (
-                    <Box key={index} py="sm" style={{ borderBottom: '1px solid #eee', cursor: 'pointer' }} onClick={() => alert(`Navigasi ke dokumentasi: ${item.title}`)}>
-                      <Text fw={500}>{item.title}</Text>
-                      <Text size="sm" color="dimmed">{item.description}</Text>
-                    </Box>
-                  ))}
-                </Box>
-              </HelpCard>
-            </Grid.Col>
+						{/* Dokumentasi */}
+						<Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
+							<HelpCard
+								style={{ borderColor: dark ? "#141D34" : "white" }}
+								bg={dark ? "#141D34" : "white"}
+								icon={<IconFileText size={24} />}
+								title="Dokumentasi"
+								h="100%"
+							>
+								<Box>
+									{documentationItems.map((item, index) => (
+										<Box
+											key={index}
+											py="sm"
+											style={{
+												borderBottom: "1px solid #eee",
+												cursor: "pointer",
+											}}
+											onClick={() =>
+												alert(`Navigasi ke dokumentasi: ${item.title}`)
+											}
+										>
+											<Text fw={500}>{item.title}</Text>
+											<Text size="sm" color="dimmed">
+												{item.description}
+											</Text>
+										</Box>
+									))}
+								</Box>
+							</HelpCard>
+						</Grid.Col>
 
-            {/* Jenna - Virtual Assistant */}
-            <Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
-              <HelpCard style={{ borderColor: dark ? "#141D34" : "white" }} bg={dark ? "#141D34" : "white"} icon={<IconMessage size={24} />} title="Jenna - Virtual Assistant" h="100%">
-                <Box style={{ height: '300px', display: 'flex', flexDirection: 'column' }}>
-                  <Box style={{ flex: 1, overflowY: 'auto', marginBottom: '12px', maxHeight: '200px' }}>
-                    {messages.map((msg) => (
-                      <Box
-                        key={msg.id}
-                        style={{
-                          alignSelf: msg.sender === 'user' ? 'flex-end' : 'flex-start',
-                          backgroundColor: msg.sender === 'user' ? dark ? "#263852ff" : "#F1F5F9" : dark ? "#263852ff" : "#F1F5F9",
-                          color: msg.sender === 'user' ? dark ? "#F1F5F9" : "#263852ff" : dark ? "#F1F5F9" : "#263852ff",
-                          padding: '8px 12px',
-                          borderRadius: '8px',
-                          marginBottom: '8px',
-                          maxWidth: '80%'
-                        }}
-                      >
-                        {msg.text}
-                      </Box>
-                    ))}
-                  </Box>
+						{/* Jenna - Virtual Assistant */}
+						<Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
+							<HelpCard
+								style={{ borderColor: dark ? "#141D34" : "white" }}
+								bg={dark ? "#141D34" : "white"}
+								icon={<IconMessage size={24} />}
+								title="Jenna - Virtual Assistant"
+								h="100%"
+							>
+								<Box
+									style={{
+										height: "300px",
+										display: "flex",
+										flexDirection: "column",
+									}}
+								>
+									<Box
+										style={{
+											flex: 1,
+											overflowY: "auto",
+											marginBottom: "12px",
+											maxHeight: "200px",
+										}}
+									>
+										{messages.map((msg) => (
+											<Box
+												key={msg.id}
+												style={{
+													alignSelf:
+														msg.sender === "user" ? "flex-end" : "flex-start",
+													backgroundColor:
+														msg.sender === "user"
+															? dark
+																? "#263852ff"
+																: "#F1F5F9"
+															: dark
+																? "#263852ff"
+																: "#F1F5F9",
+													color:
+														msg.sender === "user"
+															? dark
+																? "#F1F5F9"
+																: "#263852ff"
+															: dark
+																? "#F1F5F9"
+																: "#263852ff",
+													padding: "8px 12px",
+													borderRadius: "8px",
+													marginBottom: "8px",
+													maxWidth: "80%",
+												}}
+											>
+												{msg.text}
+											</Box>
+										))}
+									</Box>
 
-                  <Box style={{ display: 'flex', gap: '8px' }}>
-                    <input
-                      type="text"
-                      value={inputValue}
-                      onChange={(e) => setInputValue(e.target.value)}
-                      onKeyPress={handleKeyPress}
-                      placeholder="Ketik pesan Anda..."
-                      style={{
-                        flex: 1,
-                        padding: '8px 12px',
-                        borderRadius: '20px',
-                        border: '1px solid #ccc',
-                      }}
-                      disabled={isLoading}
-                    />
-                    <button
-                      onClick={handleSendMessage}
-                      disabled={isLoading || inputValue.trim() === ''}
-                      style={{
-                        padding: '8px 16px',
-                        borderRadius: '20px',
-                        backgroundColor: '#3B82F6',
-                        color: 'white',
-                        border: 'none',
-                        cursor: 'pointer',
-                      }}
-                    >
-                      Kirim
-                    </button>
-                  </Box>
-                </Box>
-              </HelpCard>
-            </Grid.Col>
-          </Grid>
-        </Box>
-      </Stack>
-    </Container>
-  );
+									<Box style={{ display: "flex", gap: "8px" }}>
+										<input
+											type="text"
+											value={inputValue}
+											onChange={(e) => setInputValue(e.target.value)}
+											onKeyPress={handleKeyPress}
+											placeholder="Ketik pesan Anda..."
+											style={{
+												flex: 1,
+												padding: "8px 12px",
+												borderRadius: "20px",
+												border: "1px solid #ccc",
+											}}
+											disabled={isLoading}
+										/>
+										<button
+											onClick={handleSendMessage}
+											disabled={isLoading || inputValue.trim() === ""}
+											style={{
+												padding: "8px 16px",
+												borderRadius: "20px",
+												backgroundColor: "#3B82F6",
+												color: "white",
+												border: "none",
+												cursor: "pointer",
+											}}
+										>
+											Kirim
+										</button>
+									</Box>
+								</Box>
+							</HelpCard>
+						</Grid.Col>
+					</Grid>
+				</Box>
+			</Stack>
+		</Container>
+	);
 };
 
-export default HelpPage;
+export default HelpPage;

src/components/jenna-analytic.tsx

@@ -1,18 +1,18 @@
-import React from "react";
+import { BarChart } from "@mantine/charts";
 import {
+	Badge,
+	Box,
 	Button,
 	Card,
-	Badge,
-	Progress,
-	Title,
-	Text,
-	Group,
-	Stack,
 	Grid,
-	Box,
+	Group,
+	Progress,
+	Stack,
+	Text,
+	Title,
 	useMantineColorScheme,
 } from "@mantine/core";
-import { BarChart } from "@mantine/charts";
+import React from "react";
 
 // Sample Data
 const kpiData = [
@@ -144,7 +144,13 @@ const JennaAnalytic = () => {
 				<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" }}>
+							<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="dimmed">
 										{kpi.title}
@@ -182,7 +188,13 @@ const JennaAnalytic = () => {
 					))}
 				</Grid>
 
-				<Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }}>
+				<Card
+					p="md"
+					radius="md"
+					withBorder
+					bg={dark ? "#141D34" : "white"}
+					style={{ borderColor: dark ? "#141D34" : "white" }}
+				>
 					<Title order={3} fw={500} mb="md">
 						Interaksi Chatbot
 					</Title>
@@ -190,7 +202,7 @@ const JennaAnalytic = () => {
 						h={300}
 						data={chartData}
 						dataKey="day"
-						series={[{ name: 'total', color: 'blue' }]}
+						series={[{ name: "total", color: "blue" }]}
 						withLegend
 					/>
 				</Card>
@@ -199,16 +211,21 @@ const JennaAnalytic = () => {
 				<Grid gutter="lg">
 					{/* Grafik Interaksi Chatbot (now Bar Chart) */}
 					<Grid.Col span={{ base: 12, lg: 6 }}>
-						<Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }} h="100%">
+						<Card
+							p="md"
+							radius="md"
+							withBorder
+							bg={dark ? "#141D34" : "white"}
+							style={{ borderColor: dark ? "#141D34" : "white" }}
+							h="100%"
+						>
 							<Title order={3} fw={500} mb="md">
 								Jam Tersibuk
 							</Title>
 							<Stack gap="sm">
 								{busyHours.map((item, index) => (
 									<Box key={index}>
-										<Text size="sm">
-											{item.period}
-										</Text>
+										<Text size="sm">{item.period}</Text>
 										<Group align="center">
 											<Progress value={item.percentage} flex={1} />
 											<Text size="sm" fw={500}>
@@ -225,7 +242,14 @@ const JennaAnalytic = () => {
 					<Grid.Col span={{ base: 12, lg: 6 }}>
 						<Stack gap="lg">
 							{/* Topik Pertanyaan Terbanyak */}
-							<Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }} h="100%">
+							<Card
+								p="md"
+								radius="md"
+								withBorder
+								bg={dark ? "#141D34" : "white"}
+								style={{ borderColor: dark ? "#141D34" : "white" }}
+								h="100%"
+							>
 								<Title order={3} fw={500} mb="md">
 									Topik Pertanyaan Terbanyak
 								</Title>
@@ -251,12 +275,9 @@ const JennaAnalytic = () => {
 							{/* Jam Tersibuk */}
 						</Stack>
 					</Grid.Col>
-				</Grid >
-
-			</Stack >
-		</Box >
+				</Grid>
+			</Stack>
+		</Box>
 	);
-
-}
+};
 export default JennaAnalytic;
-

src/components/keamanan-page.tsx

@@ -1,225 +1,325 @@
-import { useState } from "react";
-import { 
-  Card, 
-  Grid, 
-  GridCol, 
-  Group, 
-  Text, 
-  Title, 
-  Stack,
-  useMantineColorScheme,
-  Badge,
-  List,
-  ThemeIcon,
-  Box
+import {
+	Badge,
+	Box,
+	Card,
+	Grid,
+	GridCol,
+	Group,
+	List,
+	Stack,
+	Text,
+	ThemeIcon,
+	Title,
+	useMantineColorScheme,
 } from "@mantine/core";
-import { 
-  IconCamera, 
-  IconAlertTriangle, 
-  IconMapPin, 
-  IconClock, 
-  IconEye, 
-  IconShieldLock
+import {
+	IconAlertTriangle,
+	IconCamera,
+	IconClock,
+	IconEye,
+	IconMapPin,
+	IconShieldLock,
 } from "@tabler/icons-react";
+import { useState } from "react";
 
 const KeamananPage = () => {
-  const { colorScheme } = useMantineColorScheme();
-  const dark = colorScheme === 'dark';
-  
-  // Sample data for KPI cards
-  const kpiData = [
-    {
-      title: "CCTV Aktif",
-      value: 20,
-      subtitle: "Kamera Online",
-      icon: <IconCamera size={24} />,
-      color: "darmasaba-success",
-    },
-    {
-      title: "Laporan Keamanan",
-      value: 15,
-      subtitle: "Minggu ini",
-      icon: <IconAlertTriangle size={24} />,
-      color: "darmasaba-danger",
-    },
-  ];
+	const { colorScheme } = useMantineColorScheme();
+	const dark = colorScheme === "dark";
 
-  // Sample data for CCTV locations
-  const cctvLocations = [
-    { id: "CCTV-01", lat: -8.5, lng: 115.2, status: "active", lastSeen: "2 jam yang lalu", location: "Balai Desa" },
-    { id: "CCTV-02", lat: -8.6, lng: 115.3, status: "active", lastSeen: "1 jam yang lalu", location: "Pintu Masuk Desa" },
-    { id: "CCTV-03", lat: -8.4, lng: 115.1, status: "offline", lastSeen: "1 hari yang lalu", location: "Taman Desa" },
-    { id: "CCTV-04", lat: -8.7, lng: 115.4, status: "active", lastSeen: "30 menit yang lalu", location: "Pasar Desa" },
-  ];
+	// Sample data for KPI cards
+	const kpiData = [
+		{
+			title: "CCTV Aktif",
+			value: 20,
+			subtitle: "Kamera Online",
+			icon: <IconCamera size={24} />,
+			color: "darmasaba-success",
+		},
+		{
+			title: "Laporan Keamanan",
+			value: 15,
+			subtitle: "Minggu ini",
+			icon: <IconAlertTriangle size={24} />,
+			color: "darmasaba-danger",
+		},
+	];
 
-  // Sample data for security reports
-  const securityReports = [
-    {
-      id: "REP-001",
-      title: "Pencurian Motor",
-      reportedAt: "2 jam yang lalu",
-      date: "12 Feb 2026, 14:30",
-      location: "Jl. Kecubung 20",
-      status: "baru",
-    },
-    {
-      id: "REP-002",
-      title: "Kerusuhan Antar Warga",
-      reportedAt: "4 jam yang lalu",
-      date: "12 Feb 2026, 12:15",
-      location: "RT 05 RW 02",
-      status: "baru",
-    },
-    {
-      id: "REP-003",
-      title: "Kebakaran Rumah",
-      reportedAt: "1 hari yang lalu",
-      date: "11 Feb 2026, 08:45",
-      location: "Jl. Flamboyan 15",
-      status: "diproses",
-    },
-    {
-      id: "REP-004",
-      title: "Kehilangan Barang",
-      reportedAt: "2 hari yang lalu",
-      date: "10 Feb 2026, 16:20",
-      location: "Taman Desa",
-      status: "selesai",
-    },
-  ];
+	// Sample data for CCTV locations
+	const cctvLocations = [
+		{
+			id: "CCTV-01",
+			lat: -8.5,
+			lng: 115.2,
+			status: "active",
+			lastSeen: "2 jam yang lalu",
+			location: "Balai Desa",
+		},
+		{
+			id: "CCTV-02",
+			lat: -8.6,
+			lng: 115.3,
+			status: "active",
+			lastSeen: "1 jam yang lalu",
+			location: "Pintu Masuk Desa",
+		},
+		{
+			id: "CCTV-03",
+			lat: -8.4,
+			lng: 115.1,
+			status: "offline",
+			lastSeen: "1 hari yang lalu",
+			location: "Taman Desa",
+		},
+		{
+			id: "CCTV-04",
+			lat: -8.7,
+			lng: 115.4,
+			status: "active",
+			lastSeen: "30 menit yang lalu",
+			location: "Pasar Desa",
+		},
+	];
 
-  return (
-    <Stack gap="lg">
-      {/* Page Header */}
-      <Group justify="space-between" align="center">
-        <Title order={2} c={dark ? "dark.0" : "black"}>
-          Keamanan Lingkungan Desa
-        </Title>
-      </Group>
+	// Sample data for security reports
+	const securityReports = [
+		{
+			id: "REP-001",
+			title: "Pencurian Motor",
+			reportedAt: "2 jam yang lalu",
+			date: "12 Feb 2026, 14:30",
+			location: "Jl. Kecubung 20",
+			status: "baru",
+		},
+		{
+			id: "REP-002",
+			title: "Kerusuhan Antar Warga",
+			reportedAt: "4 jam yang lalu",
+			date: "12 Feb 2026, 12:15",
+			location: "RT 05 RW 02",
+			status: "baru",
+		},
+		{
+			id: "REP-003",
+			title: "Kebakaran Rumah",
+			reportedAt: "1 hari yang lalu",
+			date: "11 Feb 2026, 08:45",
+			location: "Jl. Flamboyan 15",
+			status: "diproses",
+		},
+		{
+			id: "REP-004",
+			title: "Kehilangan Barang",
+			reportedAt: "2 hari yang lalu",
+			date: "10 Feb 2026, 16:20",
+			location: "Taman Desa",
+			status: "selesai",
+		},
+	];
 
-      {/* 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>
+	return (
+		<Stack gap="lg">
+			{/* Page Header */}
+			<Group justify="space-between" align="center">
+				<Title order={2} c={dark ? "dark.0" : "black"}>
+					Keamanan Lingkungan Desa
+				</Title>
+			</Group>
 
-      <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>
-              {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>
-                    </Group>
-                  </Group>
-                </Card>
-              ))}
-            </Stack>
-          </Card>
-        </GridCol>
+			{/* 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>
 
-        {/* Daftar Laporan Keamanan */}
-        <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"}>Laporan Keamanan Lingkungan</Title>
-            
-            <Stack gap="sm">
-              {securityReports.map((report, index) => (
-                <Card key={index} p="md" radius="md" withBorder bg={dark ? "#263852ff" : "#F1F5F9"} style={{ borderColor: dark ? "#263852ff" : "#F1F5F9" }}>
-                  <Group justify="space-between" mb="sm">
-                    <Text fw={500} c={dark ? "dark.0" : "black"}>{report.title}</Text>
-                    <Badge 
-                      variant="light" 
-                      color={
-                        report.status === "baru" ? "red" : 
-                        report.status === "diproses" ? "yellow" : "green"
-                      }
-                    >
-                      {report.status}
-                    </Badge>
-                  </Group>
-                  
-                  <Group justify="space-between">
-                    <Group gap="xs">
-                      <IconMapPin size={16} stroke={1.5} />
-                      <Text size="sm" c={dark ? "dark.3" : "dimmed"}>{report.location}</Text>
-                    </Group>
-                    <Group gap="xs">
-                      <IconClock size={16} stroke={1.5} />
-                      <Text size="sm" c={dark ? "dark.3" : "dimmed"}>{report.reportedAt}</Text>
-                    </Group>
-                  </Group>
-                  
-                  <Text size="sm" c={dark ? "dark.3" : "dimmed"} mt="sm">{report.date}</Text>
-                </Card>
-              ))}
-            </Stack>
-          </Card>
-        </GridCol>
-      </Grid>
-    </Stack>
-  );
+			<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>
+							{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>
+										</Group>
+									</Group>
+								</Card>
+							))}
+						</Stack>
+					</Card>
+				</GridCol>
+
+				{/* Daftar Laporan Keamanan */}
+				<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"}>
+							Laporan Keamanan Lingkungan
+						</Title>
+
+						<Stack gap="sm">
+							{securityReports.map((report, index) => (
+								<Card
+									key={index}
+									p="md"
+									radius="md"
+									withBorder
+									bg={dark ? "#263852ff" : "#F1F5F9"}
+									style={{ borderColor: dark ? "#263852ff" : "#F1F5F9" }}
+								>
+									<Group justify="space-between" mb="sm">
+										<Text fw={500} c={dark ? "dark.0" : "black"}>
+											{report.title}
+										</Text>
+										<Badge
+											variant="light"
+											color={
+												report.status === "baru"
+													? "red"
+													: report.status === "diproses"
+														? "yellow"
+														: "green"
+											}
+										>
+											{report.status}
+										</Badge>
+									</Group>
+
+									<Group justify="space-between">
+										<Group gap="xs">
+											<IconMapPin size={16} stroke={1.5} />
+											<Text size="sm" c={dark ? "dark.3" : "dimmed"}>
+												{report.location}
+											</Text>
+										</Group>
+										<Group gap="xs">
+											<IconClock size={16} stroke={1.5} />
+											<Text size="sm" c={dark ? "dark.3" : "dimmed"}>
+												{report.reportedAt}
+											</Text>
+										</Group>
+									</Group>
+
+									<Text size="sm" c={dark ? "dark.3" : "dimmed"} mt="sm">
+										{report.date}
+									</Text>
+								</Card>
+							))}
+						</Stack>
+					</Card>
+				</GridCol>
+			</Grid>
+		</Stack>
+	);
 };
 
-export default KeamananPage;
+export default KeamananPage;

src/components/keuangan-anggaran.tsx

@@ -1,19 +1,23 @@
-import React from "react";
+import { BarChart } from "@mantine/charts";
 import {
+	Badge,
+	Box,
 	Button,
 	Card,
-	Badge,
-	Title,
-	Text,
-	Group,
-	Stack,
 	Grid,
-	Box,
+	Group,
 	Progress,
+	Stack,
+	Text,
+	Title,
 	useMantineColorScheme,
 } from "@mantine/core";
-import { IconTrendingUp, IconTrendingDown, IconCurrency } from "@tabler/icons-react";
-import { BarChart } from "@mantine/charts";
+import {
+	IconCurrency,
+	IconTrendingDown,
+	IconTrendingUp,
+} from "@tabler/icons-react";
+import React from "react";
 
 // Sample Data
 const kpiData = [
@@ -22,9 +26,7 @@ const kpiData = [
 		title: "Total APBDes",
 		value: "Rp 5.2M",
 		sub: "Tahun 2025",
-		icon: (
-			<IconCurrency className="h-6 w-6 text-muted-foreground" />
-		),
+		icon: <IconCurrency className="h-6 w-6 text-muted-foreground" />,
 	},
 	{
 		id: 2,
@@ -55,18 +57,14 @@ const kpiData = [
 		sub: "Bulan ini",
 		delta: "+8%",
 		deltaType: "positive",
-		icon: (
-			<IconTrendingUp className="h-6 w-6 text-muted-foreground" />
-		),
+		icon: <IconTrendingUp className="h-6 w-6 text-muted-foreground" />,
 	},
 	{
 		id: 4,
 		title: "Pengeluaran",
 		value: "Rp 520jt",
 		sub: "Bulan ini",
-		icon: (
-			<IconTrendingDown className="h-6 w-6 text-muted-foreground" />
-		),
+		icon: <IconTrendingDown className="h-6 w-6 text-muted-foreground" />,
 	},
 ];
 
@@ -125,7 +123,14 @@ const KeuanganAnggaran = () => {
 				<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%">
+							<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}
@@ -167,7 +172,13 @@ const KeuanganAnggaran = () => {
 				<Grid gutter="lg">
 					{/* Grafik Pemasukan vs Pengeluaran */}
 					<Grid.Col span={{ base: 12, lg: 6 }}>
-						<Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }}>
+						<Card
+							p="md"
+							radius="md"
+							withBorder
+							bg={dark ? "#141D34" : "white"}
+							style={{ borderColor: dark ? "#141D34" : "white" }}
+						>
 							<Title order={3} fw={500} mb="md">
 								Pemasukan vs Pengeluaran
 							</Title>
@@ -176,8 +187,8 @@ const KeuanganAnggaran = () => {
 								data={incomeExpenseData}
 								dataKey="month"
 								series={[
-									{ name: 'income', color: 'green', label: 'Pemasukan' },
-									{ name: 'expense', color: 'red', label: 'Pengeluaran' },
+									{ name: "income", color: "green", label: "Pemasukan" },
+									{ name: "expense", color: "red", label: "Pengeluaran" },
 								]}
 								withLegend
 							/>
@@ -186,7 +197,13 @@ const KeuanganAnggaran = () => {
 
 					{/* 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" }}>
+						<Card
+							p="md"
+							radius="md"
+							withBorder
+							bg={dark ? "#141D34" : "white"}
+							style={{ borderColor: dark ? "#141D34" : "white" }}
+						>
 							<Title order={3} fw={500} mb="md">
 								Alokasi Anggaran Per Sektor
 							</Title>
@@ -194,7 +211,9 @@ const KeuanganAnggaran = () => {
 								h={300}
 								data={allocationData}
 								dataKey="sector"
-								series={[{ name: 'amount', color: 'darmasaba-navy', label: 'Jumlah' }]}
+								series={[
+									{ name: "amount", color: "darmasaba-navy", label: "Jumlah" },
+								]}
 								withLegend
 								orientation="horizontal"
 							/>
@@ -205,7 +224,13 @@ const KeuanganAnggaran = () => {
 				<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" }}>
+						<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
 							</Title>
@@ -243,13 +268,21 @@ const KeuanganAnggaran = () => {
 
 					{/* Laporan APBDes */}
 					<Grid.Col span={{ base: 12, lg: 6 }}>
-						<Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }}>
+						<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>
+								<Title order={4} mb="sm">
+									Pendapatan
+								</Title>
 								<Stack gap="xs">
 									{apbdReport.income.map((item, index) => (
 										<Group key={index} justify="space-between">
@@ -269,7 +302,9 @@ const KeuanganAnggaran = () => {
 							</Box>
 
 							<Box>
-								<Title order={4} mb="sm">Belanja</Title>
+								<Title order={4} mb="sm">
+									Belanja
+								</Title>
 								<Stack gap="xs">
 									{apbdReport.expenses.map((item, index) => (
 										<Group key={index} justify="space-between">
@@ -288,11 +323,26 @@ const KeuanganAnggaran = () => {
 								</Stack>
 							</Box>
 
-							<Box mt="md" pt="md" style={{ borderTop: '1px solid var(--mantine-color-gray-3)' }}>
+							<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
+										fw={700}
+										c={
+											apbdReport.totalIncome > apbdReport.totalExpenses
+												? "green"
+												: "red"
+										}
+									>
+										Rp{" "}
+										{(
+											apbdReport.totalIncome - apbdReport.totalExpenses
+										).toLocaleString()}
+										jt
 									</Text>
 								</Group>
 							</Box>
@@ -304,4 +354,4 @@ const KeuanganAnggaran = () => {
 	);
 };
 
-export default KeuanganAnggaran;
+export default KeuanganAnggaran;

src/components/kinerja-divisi.tsx

@@ -1,27 +1,38 @@
 import {
-	Stack,
+	ActionIcon,
+	Box,
+	Card,
+	Divider,
 	Grid,
 	GridCol,
 	Group,
-	Text,
-	Title,
-	ActionIcon,
-	Progress as MantineProgress,
-	Box,
-	Badge as MantineBadge,
-	Card,
-	useMantineColorScheme,
-	ThemeIcon,
 	List,
-	Divider,
-	Skeleton
+	Badge as MantineBadge,
+	Progress as MantineProgress,
+	Skeleton,
+	Stack,
+	Text,
+	ThemeIcon,
+	Title,
+	useMantineColorScheme,
 } from "@mantine/core";
+import {
+	Bar,
+	BarChart,
+	CartesianGrid,
+	Cell,
+	Pie,
+	PieChart,
+	ResponsiveContainer,
+	Tooltip,
+	XAxis,
+	YAxis,
+} from "recharts";
 import { Button } from "@/components/ui/button";
-import { Bar, BarChart, CartesianGrid, XAxis, YAxis, Tooltip, ResponsiveContainer, PieChart, Pie, Cell } from "recharts";
 
 const KinerjaDivisi = () => {
 	const { colorScheme } = useMantineColorScheme();
-	const dark = colorScheme === 'dark';
+	const dark = colorScheme === "dark";
 
 	// Data for division progress chart
 	const divisionProgressData = [
@@ -39,7 +50,7 @@ const KinerjaDivisi = () => {
 				{ title: "Laporan Bulanan", status: "selesai" },
 				{ title: "Arsip Dokumen", status: "berjalan" },
 				{ title: "Undangan Rapat", status: "tertunda" },
-			]
+			],
 		},
 		{
 			name: "Keuangan",
@@ -47,7 +58,7 @@ const KinerjaDivisi = () => {
 				{ title: "Laporan APBDes", status: "selesai" },
 				{ title: "Verifikasi Dana", status: "tertunda" },
 				{ title: "Pengeluaran Harian", status: "berjalan" },
-			]
+			],
 		},
 		{
 			name: "Sosial",
@@ -55,7 +66,7 @@ const KinerjaDivisi = () => {
 				{ title: "Program Bantuan", status: "selesai" },
 				{ title: "Kegiatan Posyandu", status: "berjalan" },
 				{ title: "Monitoring Stunting", status: "tertunda" },
-			]
+			],
 		},
 		{
 			name: "Humas",
@@ -63,7 +74,7 @@ const KinerjaDivisi = () => {
 				{ title: "Publikasi Kegiatan", status: "selesai" },
 				{ title: "Koordinasi Media", status: "berjalan" },
 				{ title: "Laporan Kegiatan", status: "tertunda" },
-			]
+			],
 		},
 	];
 
@@ -77,10 +88,30 @@ const KinerjaDivisi = () => {
 
 	// Activity progress
 	const activityProgress = [
-		{ name: "Pembangunan Jalan", progress: 75, date: "15 Feb 2026", status: "berjalan" },
-		{ name: "Posyandu Bulanan", progress: 100, date: "10 Feb 2026", status: "selesai" },
-		{ name: "Vaksinasi Massal", progress: 45, date: "20 Feb 2026", status: "berjalan" },
-		{ name: "Festival Budaya", progress: 20, date: "5 Mar 2026", status: "berjalan" },
+		{
+			name: "Pembangunan Jalan",
+			progress: 75,
+			date: "15 Feb 2026",
+			status: "berjalan",
+		},
+		{
+			name: "Posyandu Bulanan",
+			progress: 100,
+			date: "10 Feb 2026",
+			status: "selesai",
+		},
+		{
+			name: "Vaksinasi Massal",
+			progress: 45,
+			date: "20 Feb 2026",
+			status: "berjalan",
+		},
+		{
+			name: "Festival Budaya",
+			progress: 20,
+			date: "5 Mar 2026",
+			status: "berjalan",
+		},
 	];
 
 	// Document statistics
@@ -97,19 +128,31 @@ const KinerjaDivisi = () => {
 		{ name: "Dibatalkan", value: 2 },
 	];
 
-	const COLORS = ['#10B981', '#F59E0B', '#EF4444', '#6B7280'];
+	const COLORS = ["#10B981", "#F59E0B", "#EF4444", "#6B7280"];
 	const STATUS_COLORS: Record<string, string> = {
-		selesai: 'green',
-		berjalan: 'blue',
-		tertunda: 'red',
-		proses: 'yellow'
+		selesai: "green",
+		berjalan: "blue",
+		tertunda: "red",
+		proses: "yellow",
 	};
 
 	// Discussion data
 	const discussions = [
-		{ title: "Pembahasan APBDes 2026", sender: "Kepala Desa", timestamp: "2 jam yang lalu" },
-		{ title: "Kegiatan Posyandu", sender: "Divisi Sosial", timestamp: "5 jam yang lalu" },
-		{ title: "Festival Budaya", sender: "Divisi Humas", timestamp: "1 hari yang lalu" },
+		{
+			title: "Pembahasan APBDes 2026",
+			sender: "Kepala Desa",
+			timestamp: "2 jam yang lalu",
+		},
+		{
+			title: "Kegiatan Posyandu",
+			sender: "Divisi Sosial",
+			timestamp: "5 jam yang lalu",
+		},
+		{
+			title: "Festival Budaya",
+			sender: "Divisi Humas",
+			timestamp: "1 hari yang lalu",
+		},
 	];
 
 	// Today's agenda
@@ -121,32 +164,73 @@ const KinerjaDivisi = () => {
 	return (
 		<Stack gap="lg">
 			{/* Grafik Progres Tugas per Divisi */}
-			<Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }} >
-				<Title order={4} mb="md" c={dark ? 'white' : 'darmasaba-navy'}>
+			<Card
+				p="md"
+				radius="md"
+				withBorder
+				bg={dark ? "#141D34" : "white"}
+				style={{ borderColor: dark ? "#141D34" : "white" }}
+			>
+				<Title order={4} mb="md" c={dark ? "white" : "darmasaba-navy"}>
 					Grafik Progres Tugas per Divisi
 				</Title>
 				<ResponsiveContainer width="100%" height={300}>
 					<BarChart data={divisionProgressData}>
-						<CartesianGrid strokeDasharray="3 3" vertical={false} stroke={dark ? "#141D34" : "white"} />
+						<CartesianGrid
+							strokeDasharray="3 3"
+							vertical={false}
+							stroke={dark ? "#141D34" : "white"}
+						/>
 						<XAxis
 							dataKey="name"
 							axisLine={false}
 							tickLine={false}
-							tick={{ fill: dark ? "var(--mantine-color-text)" : "var(--mantine-color-text)" }}
+							tick={{
+								fill: dark
+									? "var(--mantine-color-text)"
+									: "var(--mantine-color-text)",
+							}}
 						/>
 						<YAxis
 							axisLine={false}
 							tickLine={false}
-							tick={{ fill: dark ? "var(--mantine-color-text)" : "var(--mantine-color-text)" }}
+							tick={{
+								fill: dark
+									? "var(--mantine-color-text)"
+									: "var(--mantine-color-text)",
+							}}
 						/>
 						<Tooltip
-							contentStyle={dark
-								? { backgroundColor: 'var(--mantine-color-dark-7)', borderColor: 'var(--mantine-color-dark-6)' }
-								: {}}
+							contentStyle={
+								dark
+									? {
+											backgroundColor: "var(--mantine-color-dark-7)",
+											borderColor: "var(--mantine-color-dark-6)",
+										}
+									: {}
+							}
+						/>
+						<Bar
+							dataKey="selesai"
+							stackId="a"
+							fill="#10B981"
+							name="Selesai"
+							radius={[4, 4, 0, 0]}
+						/>
+						<Bar
+							dataKey="berjalan"
+							stackId="a"
+							fill="#3B82F6"
+							name="Berjalan"
+							radius={[4, 4, 0, 0]}
+						/>
+						<Bar
+							dataKey="tertunda"
+							stackId="a"
+							fill="#EF4444"
+							name="Tertunda"
+							radius={[4, 4, 0, 0]}
 						/>
-						<Bar dataKey="selesai" stackId="a" fill="#10B981" name="Selesai" radius={[4, 4, 0, 0]} />
-						<Bar dataKey="berjalan" stackId="a" fill="#3B82F6" name="Berjalan" radius={[4, 4, 0, 0]} />
-						<Bar dataKey="tertunda" stackId="a" fill="#EF4444" name="Tertunda" radius={[4, 4, 0, 0]} />
 					</BarChart>
 				</ResponsiveContainer>
 			</Card>
@@ -155,17 +239,26 @@ const KinerjaDivisi = () => {
 			<Grid gutter="md">
 				{divisionTasks.map((division, index) => (
 					<GridCol key={index} span={{ base: 12, md: 6, lg: 3 }}>
-						<Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }} h="100%">
-							<Title order={4} mb="sm" c={dark ? 'white' : 'darmasaba-navy'}>
+						<Card
+							p="md"
+							radius="md"
+							withBorder
+							bg={dark ? "#141D34" : "white"}
+							style={{ borderColor: dark ? "#141D34" : "white" }}
+							h="100%"
+						>
+							<Title order={4} mb="sm" c={dark ? "white" : "darmasaba-navy"}>
 								{division.name}
 							</Title>
 							<Stack gap="sm">
 								{division.tasks.map((task, taskIndex) => (
 									<Box key={taskIndex}>
 										<Group justify="space-between">
-											<Text size="sm" c={dark ? 'white' : 'darmasaba-navy'}>{task.title}</Text>
+											<Text size="sm" c={dark ? "white" : "darmasaba-navy"}>
+												{task.title}
+											</Text>
 											<MantineBadge
-												color={STATUS_COLORS[task.status] || 'gray'}
+												color={STATUS_COLORS[task.status] || "gray"}
 												variant="light"
 											>
 												{task.status}
@@ -180,17 +273,33 @@ const KinerjaDivisi = () => {
 			</Grid>
 
 			{/* Arsip Digital Perangkat Desa */}
-			<Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }}>
-				<Title order={4} mb="md" c={dark ? 'white' : 'darmasaba-navy'}>
+			<Card
+				p="md"
+				radius="md"
+				withBorder
+				bg={dark ? "#141D34" : "white"}
+				style={{ borderColor: dark ? "#141D34" : "white" }}
+			>
+				<Title order={4} mb="md" c={dark ? "white" : "darmasaba-navy"}>
 					Arsip Digital Perangkat Desa
 				</Title>
 				<Grid gutter="md">
 					{archiveItems.map((item, index) => (
 						<GridCol key={index} span={{ base: 12, md: 6, lg: 3 }}>
-							<Card p="md" radius="md" withBorder bg={dark ? "#263852ff" : "#F1F5F9"} style={{ borderColor: dark ? "#263852ff" : "#F1F5F9" }}>
+							<Card
+								p="md"
+								radius="md"
+								withBorder
+								bg={dark ? "#263852ff" : "#F1F5F9"}
+								style={{ borderColor: dark ? "#263852ff" : "#F1F5F9" }}
+							>
 								<Group justify="space-between">
-									<Text c={dark ? 'white' : 'darmasaba-navy'} fw={500}>{item.name}</Text>
-									<Text c={dark ? 'white' : 'darmasaba-navy'} fw={700}>{item.count}</Text>
+									<Text c={dark ? "white" : "darmasaba-navy"} fw={500}>
+										{item.name}
+									</Text>
+									<Text c={dark ? "white" : "darmasaba-navy"} fw={700}>
+										{item.count}
+									</Text>
 								</Group>
 							</Card>
 						</GridCol>
@@ -199,17 +308,32 @@ const KinerjaDivisi = () => {
 			</Card>
 
 			{/* Kartu Progres Kegiatan */}
-			<Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }}>
-				<Title order={4} mb="md" c={dark ? 'white' : 'darmasaba-navy'}>
+			<Card
+				p="md"
+				radius="md"
+				withBorder
+				bg={dark ? "#141D34" : "white"}
+				style={{ borderColor: dark ? "#141D34" : "white" }}
+			>
+				<Title order={4} mb="md" c={dark ? "white" : "darmasaba-navy"}>
 					Progres Kegiatan / Program
 				</Title>
 				<Stack gap="md">
 					{activityProgress.map((activity, index) => (
-						<Card key={index} p="md" radius="md" withBorder bg={dark ? "#263852ff" : "#F1F5F9"} style={{ borderColor: dark ? "#263852ff" : "#F1F5F9" }}>
+						<Card
+							key={index}
+							p="md"
+							radius="md"
+							withBorder
+							bg={dark ? "#263852ff" : "#F1F5F9"}
+							style={{ borderColor: dark ? "#263852ff" : "#F1F5F9" }}
+						>
 							<Group justify="space-between" mb="sm">
-								<Text c={dark ? 'white' : 'darmasaba-navy'} fw={500}>{activity.name}</Text>
+								<Text c={dark ? "white" : "darmasaba-navy"} fw={500}>
+									{activity.name}
+								</Text>
 								<MantineBadge
-									color={STATUS_COLORS[activity.status] || 'gray'}
+									color={STATUS_COLORS[activity.status] || "gray"}
 									variant="light"
 								>
 									{activity.status}
@@ -223,9 +347,13 @@ const KinerjaDivisi = () => {
 									color={activity.progress === 100 ? "green" : "blue"}
 									w="calc(100% - 80px)"
 								/>
-								<Text size="sm" c={dark ? 'white' : 'darmasaba-navy'}>{activity.progress}%</Text>
+								<Text size="sm" c={dark ? "white" : "darmasaba-navy"}>
+									{activity.progress}%
+								</Text>
 							</Group>
-							<Text size="sm" c="dimmed" mt="sm">{activity.date}</Text>
+							<Text size="sm" c="dimmed" mt="sm">
+								{activity.date}
+							</Text>
 						</Card>
 					))}
 				</Stack>
@@ -234,38 +362,75 @@ const KinerjaDivisi = () => {
 			{/* Statistik Dokumen & Progres Kegiatan */}
 			<Grid gutter="md">
 				<GridCol span={{ base: 12, lg: 6 }}>
-					<Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }}>
-						<Title order={4} mb="md" c={dark ? 'white' : 'darmasaba-navy'}>
+					<Card
+						p="md"
+						radius="md"
+						withBorder
+						bg={dark ? "#141D34" : "white"}
+						style={{ borderColor: dark ? "#141D34" : "white" }}
+					>
+						<Title order={4} mb="md" c={dark ? "white" : "darmasaba-navy"}>
 							Jumlah Dokumen
 						</Title>
 						<ResponsiveContainer width="100%" height={200}>
 							<BarChart data={documentStats}>
-								<CartesianGrid strokeDasharray="3 3" vertical={false} stroke={dark ? "#141D34" : "white"} />
+								<CartesianGrid
+									strokeDasharray="3 3"
+									vertical={false}
+									stroke={dark ? "#141D34" : "white"}
+								/>
 								<XAxis
 									dataKey="name"
 									axisLine={false}
 									tickLine={false}
-									tick={{ fill: dark ? "var(--mantine-color-text)" : "var(--mantine-color-text)" }}
+									tick={{
+										fill: dark
+											? "var(--mantine-color-text)"
+											: "var(--mantine-color-text)",
+									}}
 								/>
 								<YAxis
 									axisLine={false}
 									tickLine={false}
-									tick={{ fill: dark ? "var(--mantine-color-text)" : "var(--mantine-color-text)" }}
+									tick={{
+										fill: dark
+											? "var(--mantine-color-text)"
+											: "var(--mantine-color-text)",
+									}}
 								/>
 								<Tooltip
-									contentStyle={dark
-										? { backgroundColor: 'var(--mantine-color-dark-7)', borderColor: 'var(--mantine-color-dark-6)' }
-										: {}}
+									contentStyle={
+										dark
+											? {
+													backgroundColor: "var(--mantine-color-dark-7)",
+													borderColor: "var(--mantine-color-dark-6)",
+												}
+											: {}
+									}
+								/>
+								<Bar
+									dataKey="value"
+									fill={
+										dark
+											? "var(--mantine-color-blue-6)"
+											: "var(--mantine-color-blue-filled)"
+									}
+									radius={[4, 4, 0, 0]}
 								/>
-								<Bar dataKey="value" fill={dark ? "var(--mantine-color-blue-6)" : "var(--mantine-color-blue-filled)"} radius={[4, 4, 0, 0]} />
 							</BarChart>
 						</ResponsiveContainer>
 					</Card>
 				</GridCol>
 
 				<GridCol span={{ base: 12, lg: 6 }}>
-					<Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }}>
-						<Title order={4} mb="md" c={dark ? 'white' : 'darmasaba-navy'}>
+					<Card
+						p="md"
+						radius="md"
+						withBorder
+						bg={dark ? "#141D34" : "white"}
+						style={{ borderColor: dark ? "#141D34" : "white" }}
+					>
+						<Title order={4} mb="md" c={dark ? "white" : "darmasaba-navy"}>
 							Progres Kegiatan
 						</Title>
 						<ResponsiveContainer width="100%" height={200}>
@@ -278,16 +443,26 @@ const KinerjaDivisi = () => {
 									outerRadius={80}
 									fill="#8884d8"
 									dataKey="value"
-									label={({ name, percent }) => `${name}: ${percent ? (percent * 100).toFixed(0) : '0'}%`}
+									label={({ name, percent }) =>
+										`${name}: ${percent ? (percent * 100).toFixed(0) : "0"}%`
+									}
 								>
 									{activityProgressStats.map((entry, index) => (
-										<Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
+										<Cell
+											key={`cell-${index}`}
+											fill={COLORS[index % COLORS.length]}
+										/>
 									))}
 								</Pie>
 								<Tooltip
-									contentStyle={dark
-										? { backgroundColor: 'var(--mantine-color-dark-7)', borderColor: 'var(--mantine-color-dark-6)' }
-										: {}}
+									contentStyle={
+										dark
+											? {
+													backgroundColor: "var(--mantine-color-dark-7)",
+													borderColor: "var(--mantine-color-dark-6)",
+												}
+											: {}
+									}
 								/>
 							</PieChart>
 						</ResponsiveContainer>
@@ -296,26 +471,51 @@ const KinerjaDivisi = () => {
 			</Grid>
 
 			{/* Diskusi Internal */}
-			<Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }}>
-				<Title order={4} mb="md" c={dark ? 'white' : 'darmasaba-navy'}>
+			<Card
+				p="md"
+				radius="md"
+				withBorder
+				bg={dark ? "#141D34" : "white"}
+				style={{ borderColor: dark ? "#141D34" : "white" }}
+			>
+				<Title order={4} mb="md" c={dark ? "white" : "darmasaba-navy"}>
 					Diskusi Internal
 				</Title>
 				<Stack gap="sm">
 					{discussions.map((discussion, index) => (
-						<Card key={index} p="md" radius="md" withBorder bg={dark ? "#263852ff" : "#F1F5F9"} style={{ borderColor: dark ? "#263852ff" : "#F1F5F9" }}>
+						<Card
+							key={index}
+							p="md"
+							radius="md"
+							withBorder
+							bg={dark ? "#263852ff" : "#F1F5F9"}
+							style={{ borderColor: dark ? "#263852ff" : "#F1F5F9" }}
+						>
 							<Group justify="space-between">
-								<Text c={dark ? 'white' : 'darmasaba-navy'} fw={500}>{discussion.title}</Text>
-								<Text size="sm" c="dimmed">{discussion.timestamp}</Text>
+								<Text c={dark ? "white" : "darmasaba-navy"} fw={500}>
+									{discussion.title}
+								</Text>
+								<Text size="sm" c="dimmed">
+									{discussion.timestamp}
+								</Text>
 							</Group>
-							<Text size="sm" c="dimmed">{discussion.sender}</Text>
+							<Text size="sm" c="dimmed">
+								{discussion.sender}
+							</Text>
 						</Card>
 					))}
 				</Stack>
 			</Card>
 
 			{/* Agenda / Acara Hari Ini */}
-			<Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }}>
-				<Title order={4} mb="md" c={dark ? 'white' : 'darmasaba-navy'}>
+			<Card
+				p="md"
+				radius="md"
+				withBorder
+				bg={dark ? "#141D34" : "white"}
+				style={{ borderColor: dark ? "#141D34" : "white" }}
+			>
+				<Title order={4} mb="md" c={dark ? "white" : "darmasaba-navy"}>
 					Agenda / Acara Hari Ini
 				</Title>
 				{todayAgenda.length > 0 ? (
@@ -326,7 +526,9 @@ const KinerjaDivisi = () => {
 									<Text c="dimmed">{agenda.time}</Text>
 								</Box>
 								<Divider orientation="vertical" mx="sm" />
-								<Text c={dark ? 'white' : 'darmasaba-navy'}>{agenda.event}</Text>
+								<Text c={dark ? "white" : "darmasaba-navy"}>
+									{agenda.event}
+								</Text>
 							</Group>
 						))}
 					</Stack>
@@ -340,4 +542,4 @@ const KinerjaDivisi = () => {
 	);
 };
 
-export default KinerjaDivisi;
+export default KinerjaDivisi;

src/components/pengaduan-layanan-publik.tsx

@@ -1,38 +1,54 @@
-import type React from "react";
-import { useState } from "react";
 import {
+	ActionIcon,
+	Badge,
+	Box,
 	Button,
 	Card,
+	Divider,
 	Grid,
 	GridCol,
 	Group,
-	Text,
-	Title,
-	TextInput,
-	Textarea,
-	Select,
-	Table,
-	Badge,
-	Stack,
-	useMantineColorScheme,
 	List,
-	Divider,
-	ActionIcon,
-	Box
+	Select,
+	Stack,
+	Table,
+	Text,
+	Textarea,
+	TextInput,
+	Title,
+	useMantineColorScheme,
 } from "@mantine/core";
-import { IconMessage, IconAlertTriangle, IconClock, IconCheck, IconChevronRight } from "@tabler/icons-react";
-import { Line, LineChart, Bar, BarChart, CartesianGrid, XAxis, YAxis, Tooltip, ResponsiveContainer } from "recharts";
+import {
+	IconAlertTriangle,
+	IconCheck,
+	IconChevronRight,
+	IconClock,
+	IconMessage,
+} from "@tabler/icons-react";
+import type React from "react";
+import { useState } from "react";
+import {
+	Bar,
+	BarChart,
+	CartesianGrid,
+	Line,
+	LineChart,
+	ResponsiveContainer,
+	Tooltip,
+	XAxis,
+	YAxis,
+} from "recharts";
 
 const PengaduanLayananPublik = () => {
 	const { colorScheme } = useMantineColorScheme();
-	const dark = colorScheme === 'dark';
+	const dark = colorScheme === "dark";
 
 	// Summary data
 	const summaryData = {
 		total: 42,
 		baru: 14,
 		diproses: 14,
-		selesai: 14
+		selesai: 14,
 	};
 
 	// Tren pengaduan data
@@ -42,7 +58,7 @@ const PengaduanLayananPublik = () => {
 		{ bulan: "Mar", jumlah: 42 },
 		{ bulan: "Apr", jumlah: 38 },
 		{ bulan: "Mei", jumlah: 45 },
-		{ bulan: "Jun", jumlah: 42 }
+		{ bulan: "Jun", jumlah: 42 },
 	];
 
 	// Surat terbanyak data
@@ -51,24 +67,65 @@ const PengaduanLayananPublik = () => {
 		{ jenis: "KK", jumlah: 18 },
 		{ jenis: "Domisili", jumlah: 15 },
 		{ jenis: "Usaha", jumlah: 12 },
-		{ jenis: "Lainnya", jumlah: 8 }
+		{ jenis: "Lainnya", jumlah: 8 },
 	];
 
 	// Pengajuan terbaru data
 	const pengajuanTerbaru = [
-		{ nama: "Budi Santoso", jenis: "Ketertiban Umum", waktu: "2 jam yang lalu", status: "baru" },
-		{ nama: "Siti Rahayu", jenis: "Pelayanan Kesehatan", waktu: "5 jam yang lalu", status: "diproses" },
-		{ nama: "Ahmad Fauzi", jenis: "Infrastruktur", waktu: "1 hari yang lalu", status: "selesai" },
-		{ nama: "Dewi Lestari", jenis: "Administrasi", waktu: "1 hari yang lalu", status: "baru" },
-		{ nama: "Joko Widodo", jenis: "Keamanan", waktu: "2 hari yang lalu", status: "diproses" }
+		{
+			nama: "Budi Santoso",
+			jenis: "Ketertiban Umum",
+			waktu: "2 jam yang lalu",
+			status: "baru",
+		},
+		{
+			nama: "Siti Rahayu",
+			jenis: "Pelayanan Kesehatan",
+			waktu: "5 jam yang lalu",
+			status: "diproses",
+		},
+		{
+			nama: "Ahmad Fauzi",
+			jenis: "Infrastruktur",
+			waktu: "1 hari yang lalu",
+			status: "selesai",
+		},
+		{
+			nama: "Dewi Lestari",
+			jenis: "Administrasi",
+			waktu: "1 hari yang lalu",
+			status: "baru",
+		},
+		{
+			nama: "Joko Widodo",
+			jenis: "Keamanan",
+			waktu: "2 hari yang lalu",
+			status: "diproses",
+		},
 	];
 
 	// Ide inovatif data
 	const ideInovatif = [
-		{ nama: "Andi Prasetyo", judul: "Penerapan Smart Village", kategori: "Teknologi" },
-		{ nama: "Rina Kusuma", judul: "Program Ekowisata Desa", kategori: "Ekonomi" },
-		{ nama: "Bambang Suryono", judul: "Peningkatan Sanitasi", kategori: "Kesehatan" },
-		{ nama: "Lina Marlina", judul: "Pusat Kreatif Anak Muda", kategori: "Pendidikan" }
+		{
+			nama: "Andi Prasetyo",
+			judul: "Penerapan Smart Village",
+			kategori: "Teknologi",
+		},
+		{
+			nama: "Rina Kusuma",
+			judul: "Program Ekowisata Desa",
+			kategori: "Ekonomi",
+		},
+		{
+			nama: "Bambang Suryono",
+			judul: "Peningkatan Sanitasi",
+			kategori: "Kesehatan",
+		},
+		{
+			nama: "Lina Marlina",
+			judul: "Pusat Kreatif Anak Muda",
+			kategori: "Pendidikan",
+		},
 	];
 
 	const [activeTab, setActiveTab] = useState<"complaints" | "services">(
@@ -229,10 +286,14 @@ const PengaduanLayananPublik = () => {
 	// Status badge color mapping
 	const getStatusColor = (status: string) => {
 		switch (status) {
-			case 'baru': return 'red';
-			case 'diproses': return 'yellow';
-			case 'selesai': return 'green';
-			default: return 'gray';
+			case "baru":
+				return "red";
+			case "diproses":
+				return "yellow";
+			case "selesai":
+				return "green";
+			default:
+				return "gray";
 		}
 	};
 
@@ -243,7 +304,14 @@ const PengaduanLayananPublik = () => {
 					{/* Summary Cards */}
 					<Grid gutter="md">
 						<GridCol span={{ base: 12, md: 6, lg: 3 }}>
-							<Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }}  h="100%">
+							<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"}>
@@ -266,7 +334,14 @@ const PengaduanLayananPublik = () => {
 						</GridCol>
 
 						<GridCol span={{ base: 12, md: 6, lg: 3 }}>
-							<Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }}  h="100%">
+							<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"}>
@@ -276,12 +351,7 @@ const PengaduanLayananPublik = () => {
 											{summaryData.baru}
 										</Text>
 									</Stack>
-									<Badge
-										variant="light"
-										color="red"
-										p={8}
-										radius="md"
-									>
+									<Badge variant="light" color="red" p={8} radius="md">
 										<IconAlertTriangle size={20} />
 									</Badge>
 								</Group>
@@ -289,7 +359,14 @@ const PengaduanLayananPublik = () => {
 						</GridCol>
 
 						<GridCol span={{ base: 12, md: 6, lg: 3 }}>
-							<Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }}  h="100%">
+							<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"}>
@@ -299,12 +376,7 @@ const PengaduanLayananPublik = () => {
 											{summaryData.diproses}
 										</Text>
 									</Stack>
-									<Badge
-										variant="light"
-										color="yellow"
-										p={8}
-										radius="md"
-									>
+									<Badge variant="light" color="yellow" p={8} radius="md">
 										<IconClock size={20} />
 									</Badge>
 								</Group>
@@ -312,7 +384,14 @@ const PengaduanLayananPublik = () => {
 						</GridCol>
 
 						<GridCol span={{ base: 12, md: 6, lg: 3 }}>
-							<Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }}  h="100%">
+							<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"}>
@@ -322,12 +401,7 @@ const PengaduanLayananPublik = () => {
 											{summaryData.selesai}
 										</Text>
 									</Stack>
-									<Badge
-										variant="light"
-										color="green"
-										p={8}
-										radius="md"
-									>
+									<Badge variant="light" color="green" p={8} radius="md">
 										<IconCheck size={20} />
 									</Badge>
 								</Group>
@@ -336,7 +410,13 @@ const PengaduanLayananPublik = () => {
 					</Grid>
 
 					{/* Grafik Tren Pengaduan */}
-					<Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }} >
+					<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"}>
 							Grafik Tren Pengaduan
 						</Title>
@@ -345,31 +425,58 @@ const PengaduanLayananPublik = () => {
 								<CartesianGrid
 									strokeDasharray="3 3"
 									vertical={false}
-									stroke={dark ? "var(--mantine-color-gray-7)" : "var(--mantine-color-gray-3)"}
+									stroke={
+										dark
+											? "var(--mantine-color-gray-7)"
+											: "var(--mantine-color-gray-3)"
+									}
 								/>
 								<XAxis
 									dataKey="bulan"
 									axisLine={false}
 									tickLine={false}
-									tick={{ fill: dark ? "var(--mantine-color-text)" : "var(--mantine-color-text)" }}
+									tick={{
+										fill: dark
+											? "var(--mantine-color-text)"
+											: "var(--mantine-color-text)",
+									}}
 								/>
 								<YAxis
 									axisLine={false}
 									tickLine={false}
-									tick={{ fill: dark ? "var(--mantine-color-text)" : "var(--mantine-color-text)" }}
+									tick={{
+										fill: dark
+											? "var(--mantine-color-text)"
+											: "var(--mantine-color-text)",
+									}}
 								/>
 								<Tooltip
-									contentStyle={dark
-										? { backgroundColor: 'var(--mantine-color-dark-7)', borderColor: 'var(--mantine-color-dark-6)' }
-										: {}}
+									contentStyle={
+										dark
+											? {
+													backgroundColor: "var(--mantine-color-dark-7)",
+													borderColor: "var(--mantine-color-dark-6)",
+												}
+											: {}
+									}
 								/>
 								<Line
 									type="monotone"
 									dataKey="jumlah"
-									stroke={dark ? "var(--mantine-color-blue-6)" : "var(--mantine-color-blue-filled)"}
+									stroke={
+										dark
+											? "var(--mantine-color-blue-6)"
+											: "var(--mantine-color-blue-filled)"
+									}
 									strokeWidth={2}
-									dot={{ stroke: dark ? "var(--mantine-color-blue-6)" : "var(--mantine-color-blue-filled)", strokeWidth: 2, r: 4 }}
-									activeDot={{ r: 6, stroke: '#fff', strokeWidth: 2 }}
+									dot={{
+										stroke: dark
+											? "var(--mantine-color-blue-6)"
+											: "var(--mantine-color-blue-filled)",
+										strokeWidth: 2,
+										r: 4,
+									}}
+									activeDot={{ r: 6, stroke: "#fff", strokeWidth: 2 }}
 								/>
 							</LineChart>
 						</ResponsiveContainer>
@@ -379,7 +486,14 @@ const PengaduanLayananPublik = () => {
 					<Grid gutter="md">
 						{/* Surat Terbanyak */}
 						<GridCol span={{ base: 12, lg: 4 }}>
-							<Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }}  h="100%">
+							<Card
+								p="md"
+								radius="md"
+								withBorder
+								bg={dark ? "#141D34" : "white"}
+								style={{ borderColor: dark ? "#141D34" : "white" }}
+								h="100%"
+							>
 								<Title order={4} mb="md" c={dark ? "dark.0" : "black"}>
 									Surat Terbanyak
 								</Title>
@@ -388,30 +502,51 @@ const PengaduanLayananPublik = () => {
 										<CartesianGrid
 											strokeDasharray="3 3"
 											horizontal={false}
-											stroke={dark ? "var(--mantine-color-gray-7)" : "var(--mantine-color-gray-3)"}
+											stroke={
+												dark
+													? "var(--mantine-color-gray-7)"
+													: "var(--mantine-color-gray-3)"
+											}
 										/>
 										<XAxis
 											dataKey="jumlah"
 											axisLine={false}
 											tickLine={false}
-											tick={{ fill: dark ? "var(--mantine-color-text)" : "var(--mantine-color-text)" }}
+											tick={{
+												fill: dark
+													? "var(--mantine-color-text)"
+													: "var(--mantine-color-text)",
+											}}
 										/>
 										<YAxis
 											dataKey="jenis"
 											type="category"
 											axisLine={false}
 											tickLine={false}
-											tick={{ fill: dark ? "var(--mantine-color-text)" : "var(--mantine-color-text)" }}
+											tick={{
+												fill: dark
+													? "var(--mantine-color-text)"
+													: "var(--mantine-color-text)",
+											}}
 											width={80}
 										/>
 										<Tooltip
-											contentStyle={dark
-												? { backgroundColor: 'var(--mantine-color-dark-7)', borderColor: 'var(--mantine-color-dark-6)' }
-												: {}}
+											contentStyle={
+												dark
+													? {
+															backgroundColor: "var(--mantine-color-dark-7)",
+															borderColor: "var(--mantine-color-dark-6)",
+														}
+													: {}
+											}
 										/>
 										<Bar
 											dataKey="jumlah"
-											fill={dark ? "var(--mantine-color-blue-6)" : "var(--mantine-color-blue-filled)"}
+											fill={
+												dark
+													? "var(--mantine-color-blue-6)"
+													: "var(--mantine-color-blue-filled)"
+											}
 											radius={[0, 4, 4, 0]}
 										/>
 									</BarChart>
@@ -421,7 +556,14 @@ const PengaduanLayananPublik = () => {
 
 						{/* Pengajuan Terbaru */}
 						<GridCol span={{ base: 12, lg: 4 }}>
-							<Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }}  h="100%">
+							<Card
+								p="md"
+								radius="md"
+								withBorder
+								bg={dark ? "#141D34" : "white"}
+								style={{ borderColor: dark ? "#141D34" : "white" }}
+								h="100%"
+							>
 								<Title order={4} mb="md" c={dark ? "dark.0" : "black"}>
 									Pengajuan Terbaru
 								</Title>
@@ -429,14 +571,23 @@ const PengaduanLayananPublik = () => {
 									<Box key={index}>
 										<Group justify="space-between">
 											<Stack gap={0}>
-												<Text fw={500} c={dark ? "dark.0" : "black"}>{item.nama}</Text>
-												<Text size="sm" c={dark ? "dark.3" : "dimmed"}>{item.jenis}</Text>
+												<Text fw={500} c={dark ? "dark.0" : "black"}>
+													{item.nama}
+												</Text>
+												<Text size="sm" c={dark ? "dark.3" : "dimmed"}>
+													{item.jenis}
+												</Text>
 											</Stack>
 											<Stack gap={0} align="flex-end">
-												<Badge color={getStatusColor(item.status)} variant="light">
+												<Badge
+													color={getStatusColor(item.status)}
+													variant="light"
+												>
 													{item.status}
 												</Badge>
-												<Text size="xs" c={dark ? "dark.4" : "dimmed"}>{item.waktu}</Text>
+												<Text size="xs" c={dark ? "dark.4" : "dimmed"}>
+													{item.waktu}
+												</Text>
 											</Stack>
 										</Group>
 										<Divider my="sm" />
@@ -447,7 +598,14 @@ const PengaduanLayananPublik = () => {
 
 						{/* Ajuan Ide Inovatif */}
 						<GridCol span={{ base: 12, lg: 4 }}>
-							<Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }}  h="100%">
+							<Card
+								p="md"
+								radius="md"
+								withBorder
+								bg={dark ? "#141D34" : "white"}
+								style={{ borderColor: dark ? "#141D34" : "white" }}
+								h="100%"
+							>
 								<Title order={4} mb="md" c={dark ? "dark.0" : "black"}>
 									Ajuan Ide Inovatif
 								</Title>
@@ -455,8 +613,12 @@ const PengaduanLayananPublik = () => {
 									<Box key={index}>
 										<Group justify="space-between">
 											<Stack gap={0}>
-												<Text fw={500} c={dark ? "dark.0" : "black"}>{item.judul}</Text>
-												<Text size="sm" c={dark ? "dark.3" : "dimmed"}>{item.nama}</Text>
+												<Text fw={500} c={dark ? "dark.0" : "black"}>
+													{item.judul}
+												</Text>
+												<Text size="sm" c={dark ? "dark.3" : "dimmed"}>
+													{item.nama}
+												</Text>
 											</Stack>
 											<Group>
 												<Badge color="blue" variant="light">
@@ -478,9 +640,18 @@ const PengaduanLayananPublik = () => {
 					<Grid gutter="md">
 						{/* Complaint Submission Form */}
 						<GridCol span={{ base: 12, lg: 4 }}>
-							<Card p="md" withBorder radius="md" h="100%" bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }}>
+							<Card
+								p="md"
+								withBorder
+								radius="md"
+								h="100%"
+								bg={dark ? "#141D34" : "white"}
+								style={{ borderColor: dark ? "#141D34" : "white" }}
+							>
 								<Card.Section withBorder inheritPadding py="xs">
-									<Title order={3} py="xs">Ajukan Pengaduan</Title>
+									<Title order={3} py="xs">
+										Ajukan Pengaduan
+									</Title>
 								</Card.Section>
 								<Card.Section>
 									<form onSubmit={handleSubmitComplaint}>
@@ -537,24 +708,39 @@ const PengaduanLayananPublik = () => {
 
 						{/* Complaints List */}
 						<GridCol span={{ base: 12, lg: 8 }}>
-							<Card withBorder radius="md" bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }}>
+							<Card
+								withBorder
+								radius="md"
+								bg={dark ? "#141D34" : "white"}
+								style={{ borderColor: dark ? "#141D34" : "white" }}
+							>
 								<Card.Section withBorder inheritPadding py="xs">
-									<Title order={3} py="xs">Daftar Pengaduan</Title>
+									<Title order={3} py="xs">
+										Daftar Pengaduan
+									</Title>
 								</Card.Section>
 								<Card.Section py="md" px="xs">
 									<Table withColumnBorders>
 										<Table.Thead>
 											<Table.Tr>
-												<Table.Th><Text c={dark ? "white" : "dark.3" }>Judul</Text></Table.Th>
-												<Table.Th><Text c={dark ? "white" : "dark.3" }>Kategori</Text></Table.Th>
-												<Table.Th><Text c={dark ? "white" : "dark.3" }>Status</Text></Table.Th>
-												<Table.Th><Text c={dark ? "white" : "dark.3" }>Prioritas</Text></Table.Th>
-												<Table.Th><Text c={dark ? "white" : "dark.3" }>Tanggal</Text></Table.Th>
+												<Table.Th>
+													<Text c={dark ? "white" : "dark.3"}>Judul</Text>
+												</Table.Th>
+												<Table.Th>
+													<Text c={dark ? "white" : "dark.3"}>Kategori</Text>
+												</Table.Th>
+												<Table.Th>
+													<Text c={dark ? "white" : "dark.3"}>Status</Text>
+												</Table.Th>
+												<Table.Th>
+													<Text c={dark ? "white" : "dark.3"}>Prioritas</Text>
+												</Table.Th>
+												<Table.Th>
+													<Text c={dark ? "white" : "dark.3"}>Tanggal</Text>
+												</Table.Th>
 											</Table.Tr>
 										</Table.Thead>
-										<Table.Tbody>
-											{complaintRows}
-										</Table.Tbody>
+										<Table.Tbody>{complaintRows}</Table.Tbody>
 									</Table>
 								</Card.Section>
 							</Card>
@@ -565,15 +751,19 @@ const PengaduanLayananPublik = () => {
 				<Stack gap="lg">
 					<Card withBorder radius="md">
 						<Card.Section withBorder inheritPadding py="xs">
-							<Title order={3} py="xs">Layanan Publik Tersedia</Title>
+							<Title order={3} py="xs">
+								Layanan Publik Tersedia
+							</Title>
 						</Card.Section>
 						<Card.Section pt="md">
 							<Grid gutter="md">
 								{services.map((service) => (
 									<GridCol key={service.id} span={{ base: 12, md: 6, lg: 4 }}>
 										<Card withBorder radius="md" h="100%">
-											<Title order={4} mb="sm">{service.name}</Title>
-											<Text size="sm" c={dark ? "white" : "dark.3" } mb="md">
+											<Title order={4} mb="sm">
+												{service.name}
+											</Title>
+											<Text size="sm" c={dark ? "white" : "dark.3"} mb="md">
 												{service.description}
 											</Text>
 											<Group justify="space-between">
@@ -589,11 +779,11 @@ const PengaduanLayananPublik = () => {
 												>
 													{service.status}
 												</Badge>
-												<Text size="sm" c={dark ? "white" : "dark.3" }>
+												<Text size="sm" c={dark ? "white" : "dark.3"}>
 													{service.category}
 												</Text>
 											</Group>
-											<Text size="xs" c={dark ? "white" : "dark.3" } mt="sm">
+											<Text size="xs" c={dark ? "white" : "dark.3"} mt="sm">
 												Terakhir diperbarui: {service.lastUpdated}
 											</Text>
 										</Card>
@@ -605,13 +795,17 @@ const PengaduanLayananPublik = () => {
 
 					<Card withBorder radius="md">
 						<Card.Section withBorder inheritPadding py="xs">
-							<Title order={3} py="xs">Statistik Layanan</Title>
+							<Title order={3} py="xs">
+								Statistik Layanan
+							</Title>
 						</Card.Section>
 						<Card.Section pt="md">
 							<Grid gutter="md">
 								<GridCol span={{ base: 12, md: 4 }}>
 									<Card p="md" bg={dark ? "dark.7" : "gray.0"} radius="md">
-										<Title order={4} mb="xs">Jumlah Layanan Tersedia</Title>
+										<Title order={4} mb="xs">
+											Jumlah Layanan Tersedia
+										</Title>
 										<Text size="xl" fw={700} c="darmasaba-blue">
 											12
 										</Text>
@@ -619,7 +813,9 @@ const PengaduanLayananPublik = () => {
 								</GridCol>
 								<GridCol span={{ base: 12, md: 4 }}>
 									<Card p="md" bg={dark ? "dark.7" : "gray.0"} radius="md">
-										<Title order={4} mb="xs">Layanan Terpopuler</Title>
+										<Title order={4} mb="xs">
+											Layanan Terpopuler
+										</Title>
 										<Text size="xl" fw={700} c="darmasaba-success">
 											4
 										</Text>
@@ -627,7 +823,9 @@ const PengaduanLayananPublik = () => {
 								</GridCol>
 								<GridCol span={{ base: 12, md: 4 }}>
 									<Card p="md" bg={dark ? "dark.7" : "gray.0"} radius="md">
-										<Title order={4} mb="xs">Permintaan Baru</Title>
+										<Title order={4} mb="xs">
+											Permintaan Baru
+										</Title>
 										<Text size="xl" fw={700} c="darmasaba-warning">
 											23
 										</Text>
@@ -642,4 +840,4 @@ const PengaduanLayananPublik = () => {
 	);
 };
 
-export default PengaduanLayananPublik;
+export default PengaduanLayananPublik;

src/components/pengaturan/akses-dan-tim.tsx

@@ -1,125 +1,190 @@
-import { Card, Title, Text, Space, Button, Group, Alert, Table, ActionIcon, Modal, TextInput, Select, useMantineColorScheme } from '@mantine/core';
-import { IconInfoCircle, IconUserPlus, IconTrash, IconEdit, IconUser } from '@tabler/icons-react';
-import { useState } from 'react';
+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";
 
 const AksesDanTimSettings = () => {
-  const [opened, setOpened] = useState(false);
-  const { colorScheme } = useMantineColorScheme();
-  const dark = colorScheme === 'dark';
+	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' },
-  ];
+	// 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' },
-  ];
+	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</Button>
-          <Button>Undang Anggota</Button>
-        </Group>
-      </Modal>
+	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
+					</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>
+			<Title order={2} mb="lg">
+				Akses & Tim
+			</Title>
+			<Text color="dimmed" mb="xl">
+				Kelola akses dan anggota tim Anda
+			</Text>
 
-      <Space h="lg" />
+			<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>
+			<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>
+			<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" />
+			<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>
+			<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 variant="outline">Batal</Button>
-        <Button>Simpan Perubahan</Button>
-      </Group>
-    </Card>
-  );
+			<Group justify="flex-end" mt="xl">
+				<Button variant="outline">Batal</Button>
+				<Button>Simpan Perubahan</Button>
+			</Group>
+		</Card>
+	);
 };
 
-export default AksesDanTimSettings;
+export default AksesDanTimSettings;

src/components/pengaturan/keamanan.tsx

@@ -1,57 +1,90 @@
-import { Card, Title, Text, Space, Button, Group, Alert, PasswordInput, Switch, useMantineColorScheme } from '@mantine/core';
-import { IconInfoCircle, IconLock } from '@tabler/icons-react';
+import {
+	Alert,
+	Button,
+	Card,
+	Group,
+	PasswordInput,
+	Space,
+	Switch,
+	Text,
+	Title,
+	useMantineColorScheme,
+} from "@mantine/core";
+import { IconInfoCircle, IconLock } from "@tabler/icons-react";
 
 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>
+	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" />
+			<Space h="lg" />
 
-      <PasswordInput
-        label="Kata Sandi Saat Ini"
-        placeholder="Masukkan kata sandi saat ini"
-        mb="md"
-      />
+			<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="Kata Sandi Baru"
+				placeholder="Masukkan kata sandi baru"
+				mb="md"
+			/>
 
-      <PasswordInput
-        label="Konfirmasi Kata Sandi Baru"
-        placeholder="Konfirmasi kata sandi baru"
-        mb="md"
-      />
+			<PasswordInput
+				label="Konfirmasi Kata Sandi Baru"
+				placeholder="Konfirmasi kata sandi baru"
+				mb="md"
+			/>
 
-      <Space h="md" />
+			<Space h="md" />
 
-      <Group mb="md">
-        <Switch label="Verifikasi Dua Langkah" />
-        <Switch label="Login Otentikasi Aplikasi" />
-      </Group>
+			<Group mb="md">
+				<Switch label="Verifikasi Dua Langkah" />
+				<Switch label="Login Otentikasi Aplikasi" />
+			</Group>
 
-      <Space h="md" />
+			<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={<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>
+			<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">
-        <Button variant="outline">Batal</Button>
-        <Button>Perbarui Kata Sandi</Button>
-      </Group>
-    </Card>
-  );
+			<Group justify="flex-end" mt="xl">
+				<Button variant="outline">Batal</Button>
+				<Button>Perbarui Kata Sandi</Button>
+			</Group>
+		</Card>
+	);
 };
 
-export default KeamananSettings;
+export default KeamananSettings;

src/components/pengaturan/notifikasi.tsx

@@ -1,55 +1,86 @@
-import { Card, Title, Text, Space, Switch, Group, Alert, Checkbox, Button, useMantineColorScheme } from '@mantine/core';
-import { IconInfoCircle } from '@tabler/icons-react';
+import {
+	Alert,
+	Button,
+	Card,
+	Checkbox,
+	Group,
+	Space,
+	Switch,
+	Text,
+	Title,
+	useMantineColorScheme,
+} from "@mantine/core";
+import { IconInfoCircle } from "@tabler/icons-react";
 
 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>
+	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" />
+			<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>
+			<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" />
+			<Space h="md" />
 
-      <Group mb="md">
-        <Switch label="Notifikasi Email" defaultChecked />
-        <Switch label="Notifikasi Push" defaultChecked />
-      </Group>
+			<Group mb="md">
+				<Switch label="Notifikasi Email" defaultChecked />
+				<Switch label="Notifikasi Push" defaultChecked />
+			</Group>
 
-      <Space h="md" />
+			<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>
+			<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" />
+			<Space h="md" />
 
-      <Alert icon={<IconInfoCircle size={16} />} title="Tip" color="blue" mb="md">
-        Anda dapat menyesuaikan frekuensi notifikasi mingguan sesuai kebutuhan Anda.
-      </Alert>
+			<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">
-        <Button variant="outline">Batal</Button>
-        <Button>Simpan Preferensi</Button>
-      </Group>
-    </Card>
-  );
+			<Group justify="flex-end" mt="xl">
+				<Button variant="outline">Batal</Button>
+				<Button>Simpan Preferensi</Button>
+			</Group>
+		</Card>
+	);
 };
 
-export default NotifikasiSettings;
+export default NotifikasiSettings;

src/components/pengaturan/umum.tsx

@@ -1,58 +1,86 @@
-import { Card, Title, Text, Space, TextInput, Select, Button, Group, Switch, Alert, useMantineColorScheme } from '@mantine/core';
-import { IconInfoCircle } from '@tabler/icons-react';
+import {
+	Alert,
+	Button,
+	Card,
+	Group,
+	Select,
+	Space,
+	Switch,
+	Text,
+	TextInput,
+	Title,
+	useMantineColorScheme,
+} from "@mantine/core";
+import { IconInfoCircle } from "@tabler/icons-react";
 
 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" }}>
-      <Title order={2} mb="lg">Pengaturan Umum</Title>
-      <Text color="dimmed" mb="xl">Kelola pengaturan umum aplikasi Anda</Text>
+	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 Umum
+			</Title>
+			<Text color="dimmed" mb="xl">
+				Kelola pengaturan umum aplikasi Anda
+			</Text>
 
-      <Space h="lg" />
+			<Space h="lg" />
 
-      <TextInput
-        label="Nama Aplikasi"
-        placeholder="Masukkan nama aplikasi"
-        defaultValue="Dashboard Desa Plus"
-        mb="md"
-      />
+			<TextInput
+				label="Nama Aplikasi"
+				placeholder="Masukkan nama aplikasi"
+				defaultValue="Dashboard Desa Plus"
+				mb="md"
+			/>
 
-      <Select
-        label="Bahasa Aplikasi"
-        data={[
-          { value: 'id', label: 'Indonesia' },
-          { value: 'en', label: 'English' },
-        ]}
-        defaultValue="id"
-        mb="md"
-      />
+			<Select
+				label="Bahasa Aplikasi"
+				data={[
+					{ value: "id", label: "Indonesia" },
+					{ value: "en", label: "English" },
+				]}
+				defaultValue="id"
+				mb="md"
+			/>
 
-      <Select
-        label="Zona Waktu"
-        data={[
-          { value: 'Asia/Jakarta', label: 'Asia/Jakarta (GMT+7)' },
-          { value: 'Asia/Makassar', label: 'Asia/Makassar (GMT+8)' },
-          { value: 'Asia/Jayapura', label: 'Asia/Jayapura (GMT+9)' },
-        ]}
-        defaultValue="Asia/Jakarta"
-        mb="md"
-      />
+			<Select
+				label="Zona Waktu"
+				data={[
+					{ value: "Asia/Jakarta", label: "Asia/Jakarta (GMT+7)" },
+					{ value: "Asia/Makassar", label: "Asia/Makassar (GMT+8)" },
+					{ value: "Asia/Jayapura", label: "Asia/Jayapura (GMT+9)" },
+				]}
+				defaultValue="Asia/Jakarta"
+				mb="md"
+			/>
 
-      <Group mb="md">
-        <Switch label="Notifikasi Email" defaultChecked />
-      </Group>
+			<Group mb="md">
+				<Switch label="Notifikasi Email" defaultChecked />
+			</Group>
 
-      <Alert icon={<IconInfoCircle size={16} />} title="Informasi" color="blue" mb="md">
-        Beberapa pengaturan mungkin memerlukan restart aplikasi untuk diterapkan sepenuhnya.
-      </Alert>
+			<Alert
+				icon={<IconInfoCircle size={16} />}
+				title="Informasi"
+				color="blue"
+				mb="md"
+			>
+				Beberapa pengaturan mungkin memerlukan restart aplikasi untuk diterapkan
+				sepenuhnya.
+			</Alert>
 
-      <Group justify="flex-end" mt="xl">
-        <Button variant="outline">Batal</Button>
-        <Button>Simpan Perubahan</Button>
-      </Group>
-    </Card>
-  );
+			<Group justify="flex-end" mt="xl">
+				<Button variant="outline">Batal</Button>
+				<Button>Simpan Perubahan</Button>
+			</Group>
+		</Card>
+	);
 };
 
-export default UmumSettings;
+export default UmumSettings;

src/components/sidebar.tsx

@@ -1,16 +1,16 @@
-import { useNavigate, useLocation } from "@tanstack/react-router";
-import { Search, ChevronDown, ChevronUp } from "lucide-react";
 import {
-	Stack,
-	Group,
-	Text,
 	Badge,
+	Box,
+	Collapse,
+	Group,
 	Input,
 	NavLink as MantineNavLink,
-	Box,
+	Stack,
+	Text,
 	useMantineColorScheme,
-	Collapse,
 } from "@mantine/core";
+import { useLocation, useNavigate } from "@tanstack/react-router";
+import { ChevronDown, ChevronUp, Search } from "lucide-react";
 import { useState } from "react";
 
 interface SidebarProps {
@@ -21,22 +21,28 @@ export function Sidebar({ className }: SidebarProps) {
 	const location = useLocation();
 	const navigate = useNavigate();
 	const { colorScheme } = useMantineColorScheme();
-	const dark = colorScheme === 'dark';
-	const isActiveBg = colorScheme === 'dark' ? "#182949" : "#E6F0FF";
-	const isActiveBorder = colorScheme === 'dark' ? "#00398D" : "#1F41AE";
-	
+	const dark = colorScheme === "dark";
+	const isActiveBg = colorScheme === "dark" ? "#182949" : "#E6F0FF";
+	const isActiveBorder = colorScheme === "dark" ? "#00398D" : "#1F41AE";
+
 	// State for settings submenu collapse
 	const [settingsOpen, setSettingsOpen] = useState(
-		location.pathname.startsWith('/dashboard/pengaturan')
+		location.pathname.startsWith("/dashboard/pengaturan"),
 	);
 
 	// Define menu items with their paths
 	const menuItems = [
 		{ name: "Beranda", path: "/dashboard" },
 		{ name: "Kinerja Divisi", path: "/dashboard/kinerja-divisi" },
-		{ name: "Pengaduan & Layanan Publik", path: "/dashboard/pengaduan-layanan-publik" },
+		{
+			name: "Pengaduan & Layanan Publik",
+			path: "/dashboard/pengaduan-layanan-publik",
+		},
 		{ name: "Jenna Analytic", path: "/dashboard/jenna-analytic" },
-		{ name: "Demografi & Kependudukan", path: "/dashboard/demografi-pekerjaan" },
+		{
+			name: "Demografi & Kependudukan",
+			path: "/dashboard/demografi-pekerjaan",
+		},
 		{ name: "Keuangan & Anggaran", path: "/dashboard/keuangan-anggaran" },
 		{ name: "Bumdes & UMKM Desa", path: "/dashboard/bumdes" },
 		{ name: "Sosial", path: "/dashboard/sosial" },
@@ -53,14 +59,17 @@ export function Sidebar({ className }: SidebarProps) {
 	];
 
 	// Check if any settings submenu is active
-	const isSettingsActive = settingsItems.some(item => 
-		location.pathname === item.path
+	const isSettingsActive = settingsItems.some(
+		(item) => location.pathname === item.path,
 	);
 
 	return (
 		<Box className={className}>
 			{/* Logo */}
-			<Box p="md" style={{ borderBottom: "1px solid var(--mantine-color-gray-3)" }}>
+			<Box
+				p="md"
+				style={{ borderBottom: "1px solid var(--mantine-color-gray-3)" }}
+			>
 				<Group gap="xs">
 					<Badge
 						color="dark"
@@ -112,7 +121,9 @@ export function Sidebar({ className }: SidebarProps) {
 							style={{
 								background: isActive ? isActiveBg : "transparent",
 								fontWeight: isActive ? "bold" : "normal",
-								borderLeft: isActive ? `4px solid ${isActiveBorder}` : "4px solid transparent",
+								borderLeft: isActive
+									? `4px solid ${isActiveBorder}`
+									: "4px solid transparent",
 								borderRadius: "8px",
 								transition: "all 200ms ease",
 								margin: "2px 0",
@@ -121,8 +132,8 @@ export function Sidebar({ className }: SidebarProps) {
 								body: {
 									"&:hover": {
 										background: "#F1F5F9",
-									}
-								}
+									},
+								},
 							}}
 						/>
 					);
@@ -132,7 +143,9 @@ export function Sidebar({ className }: SidebarProps) {
 				<Box>
 					<MantineNavLink
 						onClick={() => setSettingsOpen(!settingsOpen)}
-						rightSection={settingsOpen ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
+						rightSection={
+							settingsOpen ? <ChevronUp size={16} /> : <ChevronDown size={16} />
+						}
 						label="Pengaturan"
 						active={isSettingsActive}
 						variant="subtle"
@@ -140,7 +153,9 @@ export function Sidebar({ className }: SidebarProps) {
 						style={{
 							background: isSettingsActive ? isActiveBg : "transparent",
 							fontWeight: isSettingsActive ? "bold" : "normal",
-							borderLeft: isSettingsActive ? `4px solid ${isActiveBorder}` : "4px solid transparent",
+							borderLeft: isSettingsActive
+								? `4px solid ${isActiveBorder}`
+								: "4px solid transparent",
 							borderRadius: "8px",
 							transition: "all 200ms ease",
 							margin: "2px 0",
@@ -149,12 +164,16 @@ export function Sidebar({ className }: SidebarProps) {
 							body: {
 								"&:hover": {
 									background: "#F1F5F9",
-								}
-							}
+								},
+							},
 						}}
 					/>
 					<Collapse in={settingsOpen}>
-						<Stack gap={0} ml="lg" style={{ overflowY: 'auto', maxHeight: '200px' }}>
+						<Stack
+							gap={0}
+							ml="lg"
+							style={{ overflowY: "auto", maxHeight: "200px" }}
+						>
 							{settingsItems.map((item, index) => {
 								const isActive = location.pathname === item.path;
 								return (
@@ -168,7 +187,9 @@ export function Sidebar({ className }: SidebarProps) {
 										style={{
 											background: isActive ? isActiveBg : "transparent",
 											fontWeight: isActive ? "bold" : "normal",
-											borderLeft: isActive ? `4px solid ${isActiveBorder}` : "4px solid transparent",
+											borderLeft: isActive
+												? `4px solid ${isActiveBorder}`
+												: "4px solid transparent",
 											borderRadius: "8px",
 											transition: "all 200ms ease",
 											margin: "2px 0",
@@ -177,8 +198,8 @@ export function Sidebar({ className }: SidebarProps) {
 											body: {
 												"&:hover": {
 													background: "#F1F5F9",
-												}
-											}
+												},
+											},
 										}}
 									/>
 								);

src/components/sosial-page.tsx

@@ -1,289 +1,465 @@
-import { useState } from "react";
-import { 
-  Card, 
-  Grid, 
-  GridCol, 
-  Group, 
-  Text, 
-  Title, 
-  Progress, 
-  Stack,
-  useMantineColorScheme,
-  Badge,
-  List,
-  ThemeIcon
+import {
+	Badge,
+	Card,
+	Grid,
+	GridCol,
+	Group,
+	List,
+	Progress,
+	Stack,
+	Text,
+	ThemeIcon,
+	Title,
+	useMantineColorScheme,
 } from "@mantine/core";
-import { 
-  IconHeartbeat, 
-  IconBabyCarriage, 
-  IconStethoscope, 
-  IconMedicalCross, 
-  IconSchool, 
-  IconBook, 
-  IconCalendarEvent, 
-  IconAward
+import {
+	IconAward,
+	IconBabyCarriage,
+	IconBook,
+	IconCalendarEvent,
+	IconHeartbeat,
+	IconMedicalCross,
+	IconSchool,
+	IconStethoscope,
 } from "@tabler/icons-react";
+import { useState } from "react";
 
 const SosialPage = () => {
-  const { colorScheme } = useMantineColorScheme();
-  const dark = colorScheme === 'dark';
-  
-  // Sample data for health statistics
-  const healthStats = {
-    ibuHamil: 87,
-    balita: 342,
-    alertStunting: 12,
-    posyanduAktif: 8,
-  };
+	const { colorScheme } = useMantineColorScheme();
+	const dark = colorScheme === "dark";
 
-  // 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 health statistics
+	const healthStats = {
+		ibuHamil: 87,
+		balita: 342,
+		alertStunting: 12,
+		posyanduAktif: 8,
+	};
 
-  // 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 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 education stats
-  const educationStats = {
-    siswa: {
-      tk: 125,
-      sd: 480,
-      smp: 210,
-      sma: 150,
-    },
-    sekolah: {
-      jumlah: 8,
-      guru: 42,
-    }
-  };
+	// 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 scholarships
-  const scholarshipData = {
-    penerima: 45,
-    dana: "Rp 1.200.000.000",
-    tahunAjaran: "2025/2026",
-  };
+	// Sample data for education stats
+	const educationStats = {
+		siswa: {
+			tk: 125,
+			sd: 480,
+			smp: 210,
+			sma: 150,
+		},
+		sekolah: {
+			jumlah: 8,
+			guru: 42,
+		},
+	};
 
-  // 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" },
-  ];
+	// Sample data for scholarships
+	const scholarshipData = {
+		penerima: 45,
+		dana: "Rp 1.200.000.000",
+		tahunAjaran: "2025/2026",
+	};
 
-  return (
-    <Stack gap="lg">
-      {/* Health Statistics Cards */}
-      <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>
-        </GridCol>
+	// 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",
+		},
+	];
 
-        <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>
+	return (
+		<Stack gap="lg">
+			{/* Health Statistics Cards */}
+			<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>
+				</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"}>
+									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"}>
-                  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>
-        </GridCol>
-      </Grid>
+				<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>
 
-      {/* 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>
+				<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>
+				</GridCol>
+			</Grid>
 
-      <Grid gutter="md">
-        {/* Jadwal Posyandu */}
-        <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>
-        </GridCol>
+			{/* 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>
 
-        {/* Pendidikan */}
-        <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>
-        </GridCol>
-      </Grid>
+			<Grid gutter="md">
+				{/* Jadwal Posyandu */}
+				<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>
+				</GridCol>
 
-      <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>
+				{/* Pendidikan */}
+				<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>
 
-        {/* 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>
-    </Stack>
-  );
+							<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>
+				</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>
+		</Stack>
+	);
 };
 
-export default SosialPage;
+export default SosialPage;

src/components/ui/card.tsx

@@ -2,7 +2,6 @@ import {
 	Box,
 	Card as MantineCard,
 	type CardProps as MantineCardProps,
-
 	Title,
 } from "@mantine/core";
 import type React from "react";

src/components/ui/help-card.tsx

@@ -1,90 +1,86 @@
-import { Card, useMantineTheme, useComputedColorScheme } from '@mantine/core';
-import type { CardProps } from '@mantine/core';
-import type { ReactNode } from 'react';
+import type { CardProps } from "@mantine/core";
+import { Card, useComputedColorScheme, useMantineTheme } from "@mantine/core";
+import type { ReactNode } from "react";
 
 interface HelpCardProps extends CardProps {
-  children: ReactNode;
-  icon?: ReactNode;
-  title?: string;
-  minHeight?: string | number; // Allow specifying a minimum height
+	children: ReactNode;
+	icon?: ReactNode;
+	title?: string;
+	minHeight?: string | number; // Allow specifying a minimum height
 }
 
 export const HelpCard = ({
-  children,
-  icon,
-  title,
-  minHeight = 'auto', // Default to auto, but allow override
-  ...props
+	children,
+	icon,
+	title,
+	minHeight = "auto", // Default to auto, but allow override
+	...props
 }: HelpCardProps) => {
-  const theme = useMantineTheme();
-  const colorScheme = useComputedColorScheme('light');
-  const isDark = colorScheme === 'dark';
+	const theme = useMantineTheme();
+	const colorScheme = useComputedColorScheme("light");
+	const isDark = colorScheme === "dark";
 
-  return (
-    <Card
-      shadow="sm"
-      padding="xl"
-      radius="md"
-      withBorder
-      style={{
-        backgroundColor: isDark ? theme.colors.dark[7] : theme.white,
-        borderRadius: '16px',
-        transition: 'transform 0.2s ease, box-shadow 0.2s ease',
-        border: `1px solid ${
-          isDark ? theme.colors.dark[4] : theme.colors.gray[3]
-        }`,
-        minHeight, // Apply the minimum height
-        display: 'flex',
-        flexDirection: 'column',
-      }}
-      {...props}
-    >
-      {(icon || title) && (
-        <div
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            gap: '12px',
-            marginBottom: '16px',
-          }}
-        >
-          {icon && (
-            <div
-              style={{
-                backgroundColor: isDark
-                  ? theme.colors.blue[8]
-                  : theme.colors.blue[0],
-                borderRadius: '8px',
-                padding: '8px',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-              }}
-            >
-              {icon}
-            </div>
-          )}
+	return (
+		<Card
+			shadow="sm"
+			padding="xl"
+			radius="md"
+			withBorder
+			style={{
+				backgroundColor: isDark ? theme.colors.dark[7] : theme.white,
+				borderRadius: "16px",
+				transition: "transform 0.2s ease, box-shadow 0.2s ease",
+				border: `1px solid ${
+					isDark ? theme.colors.dark[4] : theme.colors.gray[3]
+				}`,
+				minHeight, // Apply the minimum height
+				display: "flex",
+				flexDirection: "column",
+			}}
+			{...props}
+		>
+			{(icon || title) && (
+				<div
+					style={{
+						display: "flex",
+						alignItems: "center",
+						gap: "12px",
+						marginBottom: "16px",
+					}}
+				>
+					{icon && (
+						<div
+							style={{
+								backgroundColor: isDark
+									? theme.colors.blue[8]
+									: theme.colors.blue[0],
+								borderRadius: "8px",
+								padding: "8px",
+								display: "flex",
+								alignItems: "center",
+								justifyContent: "center",
+							}}
+						>
+							{icon}
+						</div>
+					)}
 
-          {title && (
-            <h3
-              style={{
-                margin: 0,
-                fontSize: '16px',
-                fontWeight: 600,
-                color: isDark
-                  ? theme.colors.dark[0]
-                  : theme.colors.dark[9],
-              }}
-            >
-              {title}
-            </h3>
-          )}
-        </div>
-      )}
+					{title && (
+						<h3
+							style={{
+								margin: 0,
+								fontSize: "16px",
+								fontWeight: 600,
+								color: isDark ? theme.colors.dark[0] : theme.colors.dark[9],
+							}}
+						>
+							{title}
+						</h3>
+					)}
+				</div>
+			)}
 
-      <div style={{ flex: 1 }}>
-        {children}
-      </div>
-    </Card>
-  );
+			<div style={{ flex: 1 }}>{children}</div>
+		</Card>
+	);
 };

src/frontend.tsx

@@ -14,10 +14,9 @@ import { Inspector } from "react-dev-inspector";
 import { createRoot } from "react-dom/client";
 import { routeTree } from "./routeTree.gen";
 import "./index.css";
-import '@mantine/charts/styles.css';
+import "@mantine/charts/styles.css";
 import { IS_DEV, VITE_PUBLIC_URL } from "./utils/env";
 
-
 // Create a new router instance
 export const router = createRouter({
 	routeTree,
@@ -102,8 +101,6 @@ const theme = createTheme({
 	primaryColor: "darmasaba-blue",
 });
 
-
-
 const InspectorWrapper = IS_DEV
 	? Inspector
 	: ({ children }: { children: React.ReactNode }) => <>{children}</>;

src/index.css

@@ -1 +1 @@
-@import "tailwindcss";
+@import "tailwindcss";

src/routes/admin/route.tsx

@@ -154,7 +154,6 @@ function DashboardLayout() {
 					</Group>
 
 					<Group gap="md">
-
 						<Menu
 							shadow="md"
 							width={200}

src/routes/dashboard/bantuan.ts

@@ -1,7 +1,6 @@
-import { createFileRoute } from '@tanstack/react-router'
-import HelpPage from '@/components/help-page'
-
-export const Route = createFileRoute('/dashboard/bantuan')({
-  component: HelpPage,
-})
+import { createFileRoute } from "@tanstack/react-router";
+import HelpPage from "@/components/help-page";
 
+export const Route = createFileRoute("/dashboard/bantuan")({
+	component: HelpPage,
+});

src/routes/dashboard/bumdes.ts

@@ -1,7 +1,6 @@
-import BumdesPage from '@/components/bumdes-page'
-import { createFileRoute } from '@tanstack/react-router'
-
-export const Route = createFileRoute('/dashboard/bumdes')({
-  component: BumdesPage,
-})
+import { createFileRoute } from "@tanstack/react-router";
+import BumdesPage from "@/components/bumdes-page";
 
+export const Route = createFileRoute("/dashboard/bumdes")({
+	component: BumdesPage,
+});

src/routes/dashboard/demografi-pekerjaan.ts

@@ -1,7 +1,6 @@
-import { createFileRoute } from '@tanstack/react-router'
-import DemografiPekerjaan from '../../components/demografi-pekerjaan'
-
-export const Route = createFileRoute('/dashboard/demografi-pekerjaan')({
-  component: DemografiPekerjaan,
-})
+import { createFileRoute } from "@tanstack/react-router";
+import DemografiPekerjaan from "../../components/demografi-pekerjaan";
 
+export const Route = createFileRoute("/dashboard/demografi-pekerjaan")({
+	component: DemografiPekerjaan,
+});

src/routes/dashboard/jenna-analytic.ts

@@ -1,6 +1,6 @@
-import { createFileRoute } from '@tanstack/react-router'
-import JennaAnalytic from '@/components/jenna-analytic'
+import { createFileRoute } from "@tanstack/react-router";
+import JennaAnalytic from "@/components/jenna-analytic";
 
-export const Route = createFileRoute('/dashboard/jenna-analytic')({
-  component: JennaAnalytic,
-})
+export const Route = createFileRoute("/dashboard/jenna-analytic")({
+	component: JennaAnalytic,
+});

src/routes/dashboard/keamanan.ts

@@ -1,7 +1,6 @@
-import { createFileRoute } from '@tanstack/react-router'
-import KeamananPage from '@/components/keamanan-page'
-
-export const Route = createFileRoute('/dashboard/keamanan')({
-  component: KeamananPage,
-})
+import { createFileRoute } from "@tanstack/react-router";
+import KeamananPage from "@/components/keamanan-page";
 
+export const Route = createFileRoute("/dashboard/keamanan")({
+	component: KeamananPage,
+});

src/routes/dashboard/keuangan-anggaran.ts

@@ -1,6 +1,6 @@
-import { createFileRoute } from '@tanstack/react-router'
-import KeuanganAnggaran from '@/components/keuangan-anggaran'
+import { createFileRoute } from "@tanstack/react-router";
+import KeuanganAnggaran from "@/components/keuangan-anggaran";
 
-export const Route = createFileRoute('/dashboard/keuangan-anggaran')({
-  component: KeuanganAnggaran,
-})
+export const Route = createFileRoute("/dashboard/keuangan-anggaran")({
+	component: KeuanganAnggaran,
+});

src/routes/dashboard/pengaturan/akses-dan-tim.ts

@@ -1,6 +1,6 @@
-import { createFileRoute } from '@tanstack/react-router'
-import AksesDanTimSettings from '@/components/pengaturan/akses-dan-tim'
+import { createFileRoute } from "@tanstack/react-router";
+import AksesDanTimSettings from "@/components/pengaturan/akses-dan-tim";
 
-export const Route = createFileRoute('/dashboard/pengaturan/akses-dan-tim')({
-  component: AksesDanTimSettings,
-})
+export const Route = createFileRoute("/dashboard/pengaturan/akses-dan-tim")({
+	component: AksesDanTimSettings,
+});

src/routes/dashboard/pengaturan/keamanan.ts

@@ -1,7 +1,6 @@
-import { createFileRoute } from '@tanstack/react-router'
-import KeamananSettings from '@/components/pengaturan/keamanan'
-
-export const Route = createFileRoute('/dashboard/pengaturan/keamanan')({
-  component: KeamananSettings,
-})
+import { createFileRoute } from "@tanstack/react-router";
+import KeamananSettings from "@/components/pengaturan/keamanan";
 
+export const Route = createFileRoute("/dashboard/pengaturan/keamanan")({
+	component: KeamananSettings,
+});

src/routes/dashboard/pengaturan/notifikasi.ts

@@ -1,6 +1,6 @@
-import { createFileRoute } from '@tanstack/react-router'
-import NotifikasiSettings from '@/components/pengaturan/notifikasi'
+import { createFileRoute } from "@tanstack/react-router";
+import NotifikasiSettings from "@/components/pengaturan/notifikasi";
 
-export const Route = createFileRoute('/dashboard/pengaturan/notifikasi')({
-  component: NotifikasiSettings,
-})
+export const Route = createFileRoute("/dashboard/pengaturan/notifikasi")({
+	component: NotifikasiSettings,
+});

src/routes/dashboard/pengaturan/route.tsx

@@ -1,9 +1,9 @@
-import { createFileRoute, Outlet } from '@tanstack/react-router';
+import { createFileRoute, Outlet } from "@tanstack/react-router";
 
-export const Route = createFileRoute('/dashboard/pengaturan')({
-  component: () => (
-    <div className="p-2">
-      <Outlet />
-    </div>
-  ),
-});
+export const Route = createFileRoute("/dashboard/pengaturan")({
+	component: () => (
+		<div className="p-2">
+			<Outlet />
+		</div>
+	),
+});

src/routes/dashboard/pengaturan/umum.ts

@@ -1,7 +1,6 @@
-import UmumSettings from '@/components/pengaturan/umum'
-import { createFileRoute } from '@tanstack/react-router'
-
-export const Route = createFileRoute('/dashboard/pengaturan/umum')({
-  component: UmumSettings,
-})
+import { createFileRoute } from "@tanstack/react-router";
+import UmumSettings from "@/components/pengaturan/umum";
 
+export const Route = createFileRoute("/dashboard/pengaturan/umum")({
+	component: UmumSettings,
+});

src/routes/dashboard/route.tsx

@@ -1,19 +1,39 @@
-import { createFileRoute, Outlet } from "@tanstack/react-router";
+import {
+	AppShell,
+	Burger,
+	Group,
+	useMantineColorScheme,
+	useMantineTheme,
+} from "@mantine/core";
+import { useDisclosure, useMediaQuery } from "@mantine/hooks";
+import { createFileRoute, Outlet, useRouterState } from "@tanstack/react-router";
+import { useEffect } from "react";
 import { Header } from "@/components/header";
 import { Sidebar } from "@/components/sidebar";
-import { AppShell, Burger, Group, useMantineColorScheme } from "@mantine/core";
-import { useDisclosure } from "@mantine/hooks";
 
 export const Route = createFileRoute("/dashboard")({
 	component: RouteComponent,
 });
 
 function RouteComponent() {
-	const [opened, { toggle }] = useDisclosure();
+	const [opened, { toggle, close }] = useDisclosure();
 	const { colorScheme } = useMantineColorScheme();
-	const headerBgColor = colorScheme === 'dark' ? "#11192D" : "#19355E";
-	const navbarBgColor = colorScheme === 'dark' ? "#11192D" : "white";
-	const mainBgColor = colorScheme === 'dark' ? "#11192D" : "#edf3f8ff";
+	const theme = useMantineTheme();
+	const routerState = useRouterState();
+
+	const isMobile = useMediaQuery("(max-width: 48em)");
+
+	const headerBgColor = colorScheme === "dark" ? "#11192D" : "#19355E";
+	const navbarBgColor = colorScheme === "dark" ? "#11192D" : "white";
+	const mainBgColor = colorScheme === "dark" ? "#11192D" : "#edf3f8ff";
+
+	// ✅ AUTO CLOSE NAVBAR ON ROUTE CHANGE (MOBILE ONLY)
+	useEffect(() => {
+		if (isMobile && opened) {
+			close();
+		}
+	}, [routerState.location.pathname]);
+
 	return (
 		<AppShell
 			header={{ height: 60 }}
@@ -25,14 +45,29 @@ function RouteComponent() {
 			padding="md"
 		>
 			<AppShell.Header bg={headerBgColor}>
-				<Group h="100%" px="md">
-					<Burger opened={opened} onClick={toggle} hiddenFrom="sm" size="sm" />
+				<Group
+					h="100%"
+					px="lg"
+					align="center"
+					wrap="nowrap"
+				>
+					<Burger
+						opened={opened}
+						onClick={toggle}
+						hiddenFrom="sm"
+						size="sm"
+					/>
+
 					<Header />
 				</Group>
 			</AppShell.Header>
 
-			<AppShell.Navbar p="md" bg={navbarBgColor} style={{ display: 'flex', flexDirection: 'column' }}>
-				<div style={{ flex: 1, overflowY: 'auto' }}>
+			<AppShell.Navbar
+				p="md"
+				bg={navbarBgColor}
+				style={{ display: "flex", flexDirection: "column" }}
+			>
+				<div style={{ flex: 1, overflowY: "auto" }}>
 					<Sidebar />
 				</div>
 			</AppShell.Navbar>

src/routes/dashboard/sosial.ts

@@ -1,8 +1,6 @@
-import { createFileRoute } from '@tanstack/react-router'
-import SocialPage from '@/components/sosial-page'
-
-
-export const Route = createFileRoute('/dashboard/sosial')({
-  component: SocialPage,
-})
+import { createFileRoute } from "@tanstack/react-router";
+import SocialPage from "@/components/sosial-page";
 
+export const Route = createFileRoute("/dashboard/sosial")({
+	component: SocialPage,
+});