Fix Konsisten Warna Bg 2

src/components/help-page.tsx

@@ -155,7 +155,7 @@ const HelpPage = () => {
 				{stats.map((stat, index) => (
 					<HelpCard
 						key={index}
-						bg={dark ? "#141D34" : "white"}
+						bg={dark ? "#1E293B" : "white"}
 						p="lg"
 						style={{
 							textAlign: "center",
@@ -180,7 +180,7 @@ const HelpPage = () => {
 						<Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
 							<HelpCard
 								style={{ borderColor: dark ? "#141D34" : "white" }}
-								bg={dark ? "#141D34" : "white"}
+								bg={dark ? "#1E293B" : "white"}
 								icon={<IconBook size={24} color="white" />}
 								title="Panduan Memulai"
 								h="100%"
@@ -210,7 +210,7 @@ const HelpPage = () => {
 						<Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
 							<HelpCard
 								style={{ borderColor: dark ? "#141D34" : "white" }}
-								bg={dark ? "#141D34" : "white"}
+								bg={dark ? "#1E293B" : "white"}
 								icon={<IconVideo size={24} color="white" />}
 								title="Video Tutorial"
 								h="100%"
@@ -240,7 +240,7 @@ const HelpPage = () => {
 						<Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
 							<HelpCard
 								style={{ borderColor: dark ? "#141D34" : "white" }}
-								bg={dark ? "#141D34" : "white"}
+								bg={dark ? "#1E293B" : "white"}
 								icon={<IconHelpCircle size={24} color="white" />}
 								title="FAQ"
 								h="100%"
@@ -272,7 +272,7 @@ const HelpPage = () => {
 						<Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
 							<HelpCard
 								style={{ borderColor: dark ? "#141D34" : "white" }}
-								bg={dark ? "#141D34" : "white"}
+								bg={dark ? "#1E293B" : "white"}
 								icon={<IconHeadphones size={24} color="white" />}
 								title="Hubungi Support"
 								h="100%"
@@ -307,7 +307,7 @@ const HelpPage = () => {
 						<Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
 							<HelpCard
 								style={{ borderColor: dark ? "#141D34" : "white" }}
-								bg={dark ? "#141D34" : "white"}
+								bg={dark ? "#1E293B" : "white"}
 								icon={<IconFileText size={24} color="white" />}
 								title="Dokumentasi"
 								h="100%"
@@ -339,7 +339,7 @@ const HelpPage = () => {
 						<Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
 							<HelpCard
 								style={{ borderColor: dark ? "#141D34" : "white" }}
-								bg={dark ? "#141D34" : "white"}
+								bg={dark ? "#1E293B" : "white"}
 								icon={<IconMessage size={24} color="white" />}
 								title="Jenna - Virtual Assistant"
 								h="100%"

src/components/keamanan-page.tsx

@@ -5,22 +5,18 @@ import {
 	Grid,
 	GridCol,
 	Group,
-	List,
 	Stack,
 	Text,
 	ThemeIcon,
 	Title,
-	useMantineColorScheme,
+	useMantineColorScheme
 } from "@mantine/core";
 import {
 	IconAlertTriangle,
 	IconCamera,
 	IconClock,
-	IconEye,
-	IconMapPin,
-	IconShieldLock,
+	IconMapPin
 } from "@tabler/icons-react";
-import { useState } from "react";
 
 const KeamananPage = () => {
 	const { colorScheme } = useMantineColorScheme();
@@ -118,15 +114,6 @@ const KeamananPage = () => {
 
 	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 }}>
@@ -139,7 +126,7 @@ const KeamananPage = () => {
 										p="md"
 										radius="md"
 										withBorder
-										bg={dark ? "#141D34" : "white"}
+										bg={dark ? "#1E293B" : "white"}
 										style={{ borderColor: dark ? "#141D34" : "white" }}
 										h="100%"
 									>
@@ -149,10 +136,14 @@ const KeamananPage = () => {
 													{kpi.subtitle}
 												</Text>
 												<Group gap="xs" align="center">
-													<Text size="xl" fw={700} c={dark ? "dark.0" : "black"}>
+													<Text
+														size="xl"
+														fw={700}
+														c={dark ? "dark.0" : "black"}
+													>
 														{kpi.value}
 													</Text>
-													<Text size="sm" c={dark ? "dark.3" : "dimmed"}>
+													<Text size="sm" c={dark ? "white" : "dimmed"}>
 														{kpi.title}
 													</Text>
 												</Group>
@@ -174,14 +165,14 @@ const KeamananPage = () => {
 							p="md"
 							radius="md"
 							withBorder
-							bg={dark ? "#141D34" : "white"}
+							bg={dark ? "#1E293B" : "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">
+							<Text size="sm" c={dark ? "white" : "dimmed"} mb="md">
 								Titik Lokasi CCTV
 							</Text>
 
@@ -237,13 +228,13 @@ const KeamananPage = () => {
 														{cctv.status === "active" ? "Online" : "Offline"}
 													</Badge>
 												</Group>
-												<Text size="sm" c={dark ? "dark.3" : "dimmed"}>
+												<Text size="sm" c={dark ? "white" : "dimmed"}>
 													{cctv.location}
 												</Text>
 											</Stack>
 											<Group gap="xs">
 												<IconClock size={16} stroke={1.5} />
-												<Text size="sm" c={dark ? "dark.3" : "dimmed"}>
+												<Text size="sm" c={dark ? "white" : "dimmed"}>
 													{cctv.lastSeen}
 												</Text>
 											</Group>
@@ -261,14 +252,10 @@ const KeamananPage = () => {
 						p="md"
 						radius="md"
 						withBorder
-						bg={dark ? "#141D34" : "white"}
+						bg={dark ? "#1E293B" : "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
@@ -300,19 +287,19 @@ const KeamananPage = () => {
 									<Group justify="space-between">
 										<Group gap="xs">
 											<IconMapPin size={16} stroke={1.5} />
-											<Text size="sm" c={dark ? "dark.3" : "dimmed"}>
+											<Text size="sm" c={dark ? "white" : "dimmed"}>
 												{report.location}
 											</Text>
 										</Group>
 										<Group gap="xs">
 											<IconClock size={16} stroke={1.5} />
-											<Text size="sm" c={dark ? "dark.3" : "dimmed"}>
+											<Text size="sm" c={dark ? "white" : "dimmed"}>
 												{report.reportedAt}
 											</Text>
 										</Group>
 									</Group>
 
-									<Text size="sm" c={dark ? "dark.3" : "dimmed"} mt="sm">
+									<Text size="sm" c={dark ? "white" : "dimmed"} mt="sm">
 										{report.date}
 									</Text>
 								</Card>

src/components/kinerja-divisi/activity-card.tsx

@@ -1,4 +1,4 @@
-import { Box, Card, Group, Progress, Text } from "@mantine/core";
+import { Box, Card, Group, Progress, Text, useMantineColorScheme } from "@mantine/core";
 
 interface ActivityCardProps {
 	title: string;
@@ -26,13 +26,16 @@ export function ActivityCard({
 		}
 	};
 
+	const { colorScheme } = useMantineColorScheme();
+	const dark = colorScheme === "dark";
+
 	return (
 		<Card
 			radius="xl"
 			p={0}
 			withBorder={false}
 			style={{
-				backgroundColor: "#F3F4F6",
+				backgroundColor: dark ? "#334155" : "white",
 				overflow: "hidden",
 			}}
 		>

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

@@ -1,79 +1,69 @@
-import {
-	ActionIcon,
-	Alert,
-	Box,
-	Button,
-	Card,
-	Group,
-	Modal,
-	Select,
-	Space,
-	Stack,
-	Switch,
-	Table,
-	Text,
-	TextInput,
-	Title,
-	useMantineColorScheme,
-} from "@mantine/core";
-import {
-	IconEdit,
-	IconInfoCircle,
-	IconTrash,
-	IconUser,
-	IconUserPlus,
-} from "@tabler/icons-react";
-import { useState } from "react";
+import { Box, Button, Group, Stack, Switch, Text, Title } from "@mantine/core";
 
 const AksesDanTimSettings = () => {
 	return (
-		<Stack
-			pr={"50%"}
-			gap={"xl"}
-		>
+		<Stack pr={"50%"} gap={"xl"}>
 			<Box>
 				<Stack gap={"xs"}>
-					<Title order={2}>
-						Manajemen Tim
-					</Title>
-					<Button bg={"#1E3A5F"} radius={"md"} c={"white"} fullWidth >Undangan Anggota Baru</Button>
-					<Button bg={"#1E3A5F"} radius={"md"} c={"white"} fullWidth>Kelola Role & Permission</Button>
+					<Title order={2}>Manajemen Tim</Title>
+					<Button bg={"#1E3A5F"} radius={"md"} c={"white"} fullWidth>
+						Undangan Anggota Baru
+					</Button>
+					<Button bg={"#1E3A5F"} radius={"md"} c={"white"} fullWidth>
+						Kelola Role & Permission
+					</Button>
 					<Group justify="space-between">
-						<Text fw={"bold"} fz={"sm"}>Daftar Anggota Teraktif</Text>
-						<Text fw={"bold"} fz={"sm"}>12 Anggota</Text>
+						<Text fw={"bold"} fz={"sm"}>
+							Daftar Anggota Teraktif
+						</Text>
+						<Text fw={"bold"} fz={"sm"}>
+							12 Anggota
+						</Text>
 					</Group>
 				</Stack>
 			</Box>
 			<Box>
 				<Stack gap={"xs"}>
-					<Title order={2}>
-						Hak Akses
-					</Title>
+					<Title order={2}>Hak Akses</Title>
 					<Group justify="space-between">
-						<Text fw={"bold"} fz={"sm"}>Administrator</Text>
-						<Text fw={"bold"} fz={"sm"}>2 Orang</Text>
+						<Text fw={"bold"} fz={"sm"}>
+							Administrator
+						</Text>
+						<Text fw={"bold"} fz={"sm"}>
+							2 Orang
+						</Text>
 					</Group>
 					<Group justify="space-between">
-						<Text fw={"bold"} fz={"sm"}>Editor</Text>
-						<Text fw={"bold"} fz={"sm"}>5 Orang</Text>
+						<Text fw={"bold"} fz={"sm"}>
+							Editor
+						</Text>
+						<Text fw={"bold"} fz={"sm"}>
+							5 Orang
+						</Text>
 					</Group>
 					<Group justify="space-between">
-						<Text fw={"bold"} fz={"sm"}>Viewer</Text>
-						<Text fw={"bold"} fz={"sm"}>5 Orang</Text>
+						<Text fw={"bold"} fz={"sm"}>
+							Viewer
+						</Text>
+						<Text fw={"bold"} fz={"sm"}>
+							5 Orang
+						</Text>
 					</Group>
 				</Stack>
 			</Box>
 			<Box>
 				<Stack gap={"xs"}>
-					<Title order={2}>
-						Kolaborasi
-					</Title>
+					<Title order={2}>Kolaborasi</Title>
 					<Group mb="md" justify="space-between">
-						<Text fw={"bold"} fz={"sm"}>Izin Export Data</Text>
+						<Text fw={"bold"} fz={"sm"}>
+							Izin Export Data
+						</Text>
 						<Switch defaultChecked />
 					</Group>
 					<Group mb="md" justify="space-between">
-						<Text fw={"bold"} fz={"sm"}>Require Approval Untuk Perubahan</Text>
+						<Text fw={"bold"} fz={"sm"}>
+							Require Approval Untuk Perubahan
+						</Text>
 						<Switch defaultChecked />
 					</Group>
 				</Stack>

src/components/pengaturan/keamanan.tsx

@@ -1,58 +1,57 @@
-import {
-	Button,
-	Box,
-	Group,
-	Stack,
-	Switch,
-	Text,
-	Title
-} from "@mantine/core";
+import { Box, Button, Group, Stack, Switch, Text, Title } from "@mantine/core";
 
 const KeamananSettings = () => {
 	return (
-		<Stack
-			pr={"50%"}
-			gap={"xl"}
-		>
+		<Stack pr={"50%"} gap={"xl"}>
 			<Box>
 				<Stack gap={"xs"}>
-					<Title order={2}>
-						Autentikasi
-					</Title>
+					<Title order={2}>Autentikasi</Title>
 					<Group mb="md" justify="space-between">
-						<Text fw={"bold"} fz={"sm"}>Two-Factor Authentication</Text>
+						<Text fw={"bold"} fz={"sm"}>
+							Two-Factor Authentication
+						</Text>
 						<Switch defaultChecked />
 					</Group>
 					<Group mb="md" justify="space-between">
-						<Text fw={"bold"} fz={"sm"}>Biometrik Login</Text>
+						<Text fw={"bold"} fz={"sm"}>
+							Biometrik Login
+						</Text>
 						<Switch defaultChecked />
 					</Group>
 					<Group mb="md" justify="space-between">
-						<Text fw={"bold"} fz={"sm"}>IP Whitelist</Text>
+						<Text fw={"bold"} fz={"sm"}>
+							IP Whitelist
+						</Text>
 						<Switch defaultChecked />
 					</Group>
 				</Stack>
 			</Box>
 			<Box>
 				<Stack gap={"xs"}>
-					<Title order={2}>
-						Password
-					</Title>
-					<Button bg={"#1E3A5F"} radius={"md"} c={"white"} fullWidth >Ubah Password</Button>
-					<Button bg={"#1E3A5F"} radius={"md"} c={"white"} fullWidth>Riwayat Login</Button>
-					<Button bg={"#1E3A5F"} radius={"md"} c={"white"} fullWidth>Perangkat Terdaftar</Button>
+					<Title order={2}>Password</Title>
+					<Button bg={"#1E3A5F"} radius={"md"} c={"white"} fullWidth>
+						Ubah Password
+					</Button>
+					<Button bg={"#1E3A5F"} radius={"md"} c={"white"} fullWidth>
+						Riwayat Login
+					</Button>
+					<Button bg={"#1E3A5F"} radius={"md"} c={"white"} fullWidth>
+						Perangkat Terdaftar
+					</Button>
 				</Stack>
 			</Box>
 			<Box>
 				<Stack gap={"xs"}>
-					<Title order={2}>
-						Audit & Log
-					</Title>
+					<Title order={2}>Audit & Log</Title>
 					<Group mb="md" justify="space-between">
-						<Text fw={"bold"} fz={"sm"}>Log Aktivitas</Text>
+						<Text fw={"bold"} fz={"sm"}>
+							Log Aktivitas
+						</Text>
 						<Switch defaultChecked />
 					</Group>
-					<Button bg={"#1E3A5F"} radius={"md"} c={"white"} fullWidth>Download Log</Button>
+					<Button bg={"#1E3A5F"} radius={"md"} c={"white"} fullWidth>
+						Download Log
+					</Button>
 				</Stack>
 			</Box>
 			<Group justify="flex-start" mt="xl">

src/components/pengaturan/notifikasi.tsx

@@ -20,30 +20,35 @@ const NotifikasiSettings = () => {
 	const { colorScheme } = useMantineColorScheme();
 	const dark = colorScheme === "dark";
 	return (
-		<Stack
-			pr={"20%"}
-			gap={"xs"}
-		>
-			<Grid gutter={{ base: 5, xs: 'md', md: 'xl', xl: 50 }}>
+		<Stack pr={"20%"} gap={"xs"}>
+			<Grid gutter={{ base: 5, xs: "md", md: "xl", xl: 50 }}>
 				<GridCol span={6}>
 					<Stack gap={"xs"}>
 						<Title order={3} mb="sm">
 							Metode Notifikasi
 						</Title>
 						<Group mb="md" justify="space-between">
-							<Text fw={"bold"} fz={"sm"}>Laporan Harian</Text>
+							<Text fw={"bold"} fz={"sm"}>
+								Laporan Harian
+							</Text>
 							<Switch defaultChecked />
 						</Group>
 						<Group mb="md" justify="space-between">
-							<Text fw={"bold"} fz={"sm"}>Alert Sistem</Text>
+							<Text fw={"bold"} fz={"sm"}>
+								Alert Sistem
+							</Text>
 							<Switch defaultChecked />
 						</Group>
 						<Group mb="md" justify="space-between">
-							<Text fw={"bold"} fz={"sm"}>Update Keamanan</Text>
+							<Text fw={"bold"} fz={"sm"}>
+								Update Keamanan
+							</Text>
 							<Switch defaultChecked />
 						</Group>
 						<Group mb="md" justify="space-between">
-							<Text fw={"bold"} fz={"sm"}>Newsletter Bulanan</Text>
+							<Text fw={"bold"} fz={"sm"}>
+								Newsletter Bulanan
+							</Text>
 							<Switch defaultChecked />
 						</Group>
 					</Stack>
@@ -54,15 +59,21 @@ const NotifikasiSettings = () => {
 							Preferensi Alert
 						</Title>
 						<Group mb="md" justify="space-between">
-							<Text fw={"bold"} fz={"sm"}>Treshold Memori</Text>
+							<Text fw={"bold"} fz={"sm"}>
+								Treshold Memori
+							</Text>
 							<Switch defaultChecked />
 						</Group>
 						<Group mb="md" justify="space-between">
-							<Text fw={"bold"} fz={"sm"}>Treshold CPU</Text>
+							<Text fw={"bold"} fz={"sm"}>
+								Treshold CPU
+							</Text>
 							<Switch defaultChecked />
 						</Group>
 						<Group mb="md" justify="space-between">
-							<Text fw={"bold"} fz={"sm"}>Treshold Disk</Text>
+							<Text fw={"bold"} fz={"sm"}>
+								Treshold Disk
+							</Text>
 							<Switch defaultChecked />
 						</Group>
 					</Stack>
@@ -73,19 +84,27 @@ const NotifikasiSettings = () => {
 							Notifikasi Push
 						</Title>
 						<Group mb="md" justify="space-between">
-							<Text fw={"bold"} fz={"sm"}>Alert Kritis</Text>
+							<Text fw={"bold"} fz={"sm"}>
+								Alert Kritis
+							</Text>
 							<Switch defaultChecked />
 						</Group>
 						<Group mb="md" justify="space-between">
-							<Text fw={"bold"} fz={"sm"}>Aktivitas Tim</Text>
+							<Text fw={"bold"} fz={"sm"}>
+								Aktivitas Tim
+							</Text>
 							<Switch defaultChecked />
 						</Group>
 						<Group mb="md" justify="space-between">
-							<Text fw={"bold"} fz={"sm"}>Komentar & Mention</Text>
+							<Text fw={"bold"} fz={"sm"}>
+								Komentar & Mention
+							</Text>
 							<Switch defaultChecked />
 						</Group>
 						<Group mb="md" justify="space-between">
-							<Text fw={"bold"} fz={"sm"}>Bunyi Notifikasi</Text>
+							<Text fw={"bold"} fz={"sm"}>
+								Bunyi Notifikasi
+							</Text>
 							<Switch defaultChecked />
 						</Group>
 					</Stack>

src/components/pengaturan/umum.tsx

@@ -1,19 +1,9 @@
-import {
-	Box,
-	Button,
-	Group,
-	Select,
-	Switch,
-	Text,
-	Title,
-} from "@mantine/core";
+import { Box, Button, Group, Select, Switch, Text, Title } from "@mantine/core";
 import { DateInput } from "@mantine/dates";
 
 const UmumSettings = () => {
 	return (
-		<Box
-			pr={"50%"}
-		>
+		<Box pr={"50%"}>
 			<Title order={2} mb="lg">
 				Preferensi Tampilan
 			</Title>
@@ -39,22 +29,23 @@ const UmumSettings = () => {
 				mb="md"
 			/>
 
-			<DateInput
-				label="Format Tanggal"
-				mb={"xl"}
-			/>
+			<DateInput label="Format Tanggal" mb={"xl"} />
 
 			<Title order={2} mb="lg">
 				Dashboard
 			</Title>
 
 			<Group mb="md" justify="space-between">
-				<Text fw={"bold"} fz={"sm"}>Refresh Otomatis</Text>
+				<Text fw={"bold"} fz={"sm"}>
+					Refresh Otomatis
+				</Text>
 				<Switch defaultChecked />
 			</Group>
 
 			<Group mb="md" justify="space-between">
-				<Text fw={"bold"} fz={"sm"}>Interval Refresh</Text>
+				<Text fw={"bold"} fz={"sm"}>
+					Interval Refresh
+				</Text>
 				<Select
 					data={[
 						{ value: "1", label: "30d" },
@@ -67,12 +58,16 @@ const UmumSettings = () => {
 			</Group>
 
 			<Group mb="md" justify="space-between">
-				<Text fw={"bold"} fz={"sm"}>Tampilkan Grid</Text>
+				<Text fw={"bold"} fz={"sm"}>
+					Tampilkan Grid
+				</Text>
 				<Switch defaultChecked />
 			</Group>
 
 			<Group mb="md" justify="space-between">
-				<Text fw={"bold"} fz={"sm"}>Animasi Transisi</Text>
+				<Text fw={"bold"} fz={"sm"}>
+					Animasi Transisi
+				</Text>
 				<Switch defaultChecked />
 			</Group>
 

src/components/sosial-page.tsx

@@ -1,10 +1,10 @@
 import { Grid, GridCol, Stack } from "@mantine/core";
-import { SummaryCards } from "./sosial/summary-cards";
-import { HealthStats } from "./sosial/health-stats";
-import { PosyanduSchedule } from "./sosial/posyandu-schedule";
-import { Pendidikan } from "./sosial/pendidikan";
 import { Beasiswa } from "./sosial/beasiswa";
 import { EventCalendar } from "./sosial/event-calendar";
+import { HealthStats } from "./sosial/health-stats";
+import { Pendidikan } from "./sosial/pendidikan";
+import { PosyanduSchedule } from "./sosial/posyandu-schedule";
+import { SummaryCards } from "./sosial/summary-cards";
 
 const SosialPage = () => {
 	return (

src/components/sosial/beasiswa.tsx

@@ -1,5 +1,12 @@
-import { Card, Group, Stack, Text, ThemeIcon, Title } from "@mantine/core";
-import { useMantineColorScheme } from "@mantine/core";
+import {
+	Card,
+	Group,
+	Stack,
+	Text,
+	ThemeIcon,
+	Title,
+	useMantineColorScheme,
+} from "@mantine/core";
 import { IconAward } from "@tabler/icons-react";
 
 interface ScholarshipData {
@@ -30,16 +37,16 @@ export const Beasiswa = ({ data }: BeasiswaProps) => {
 			radius="xl"
 			withBorder
 			shadow="sm"
-			bg={dark ? "#141D34" : "white"}
+			bg={dark ? "#1E293B" : "white"}
 			style={{ borderColor: dark ? "#141D34" : "#e5e7eb" }}
 			h={"100%"}
 		>
 			<Group justify="space-between" align="center">
 				<Stack gap={2}>
-					<Text size="sm" c={dark ? "dark.3" : "dimmed"} fw={500}>
+					<Text size="sm" c={dark ? "white" : "dimmed"} fw={500}>
 						Beasiswa Desa
 					</Text>
-					<Text size="xl" fw={700} c={dark ? "dark.0" : "#1e3a5f"}>
+					<Text size="xl" fw={700} c={dark ? "white" : "#1e3a5f"}>
 						Penerima: {displayData.penerima}
 					</Text>
 				</Stack>
@@ -54,14 +61,14 @@ export const Beasiswa = ({ data }: BeasiswaProps) => {
 			</Group>
 			<Stack gap="xs" mt="md">
 				<Group justify="space-between">
-					<Text c={dark ? "dark.3" : "dimmed"}>Dana Tersalurkan:</Text>
-					<Text fw={700} c={dark ? "dark.0" : "#1e3a5f"}>
+					<Text c={dark ? "white" : "dimmed"}>Dana Tersalurkan:</Text>
+					<Text fw={700} c={dark ? "white" : "#1e3a5f"}>
 						{displayData.dana}
 					</Text>
 				</Group>
 				<Group justify="space-between">
-					<Text c={dark ? "dark.3" : "dimmed"}>Tahun Ajaran:</Text>
-					<Text c={dark ? "dark.0" : "#1e3a5f"}>{displayData.tahunAjaran}</Text>
+					<Text c={dark ? "white" : "dimmed"}>Tahun Ajaran:</Text>
+					<Text c={dark ? "white" : "#1e3a5f"}>{displayData.tahunAjaran}</Text>
 				</Group>
 			</Stack>
 		</Card>

src/components/sosial/event-calendar.tsx

@@ -1,5 +1,12 @@
-import { Card, Group, Stack, Text, Title, ThemeIcon } from "@mantine/core";
-import { useMantineColorScheme } from "@mantine/core";
+import {
+	Card,
+	Group,
+	Stack,
+	Text,
+	ThemeIcon,
+	Title,
+	useMantineColorScheme,
+} from "@mantine/core";
 import { IconCalendarEvent } from "@tabler/icons-react";
 
 interface EventItem {
@@ -46,7 +53,7 @@ export const EventCalendar = ({ data }: EventCalendarProps) => {
 			radius="xl"
 			withBorder
 			shadow="sm"
-			bg={dark ? "#141D34" : "white"}
+			bg={dark ? "#1E293B" : "white"}
 			style={{ borderColor: dark ? "#141D34" : "#e5e7eb" }}
 		>
 			<Title order={3} mb="md" c={dark ? "dark.0" : "#1e3a5f"}>

src/components/sosial/health-stats.tsx

@@ -1,5 +1,12 @@
-import { Card, Group, Progress, Stack, Text, Title } from "@mantine/core";
-import { useMantineColorScheme } from "@mantine/core";
+import {
+	Card,
+	Group,
+	Progress,
+	Stack,
+	Text,
+	Title,
+	useMantineColorScheme,
+} from "@mantine/core";
 
 interface HealthProgressItem {
 	label: string;
@@ -30,9 +37,9 @@ export const HealthStats = ({ data }: HealthStatsProps) => {
 			radius="xl"
 			withBorder
 			shadow="sm"
-			bg={dark ? "#141D34" : "white"}
+			bg={dark ? "#1E293B" : "white"}
 			style={{ borderColor: dark ? "#141D34" : "#e5e7eb" }}
-			h={'100%'}
+			h={"100%"}
 		>
 			<Title order={3} mb="md" c={dark ? "dark.0" : "#1e3a5f"}>
 				Statistik Kesehatan

src/components/sosial/pendidikan.tsx

@@ -1,5 +1,11 @@
-import { Card, Group, Stack, Text, Title } from "@mantine/core";
-import { useMantineColorScheme } from "@mantine/core";
+import {
+	Card,
+	Group,
+	Stack,
+	Text,
+	Title,
+	useMantineColorScheme,
+} from "@mantine/core";
 
 interface EducationData {
 	siswa: {
@@ -43,7 +49,7 @@ export const Pendidikan = ({ data }: PendidikanProps) => {
 			radius="xl"
 			withBorder
 			shadow="sm"
-			bg={dark ? "#141D34" : "white"}
+			bg={dark ? "#1E293B" : "white"}
 			style={{ borderColor: dark ? "#141D34" : "#e5e7eb" }}
 		>
 			<Title order={3} mb="md" c={dark ? "dark.0" : "#1e3a5f"}>

src/components/sosial/posyandu-schedule.tsx

@@ -1,5 +1,12 @@
-import { Badge, Card, Group, Stack, Text, Title } from "@mantine/core";
-import { useMantineColorScheme } from "@mantine/core";
+import {
+	Badge,
+	Card,
+	Group,
+	Stack,
+	Text,
+	Title,
+	useMantineColorScheme,
+} from "@mantine/core";
 
 interface PosyanduItem {
 	id: string;
@@ -51,7 +58,7 @@ export const PosyanduSchedule = ({ data }: PosyanduScheduleProps) => {
 			radius="xl"
 			withBorder
 			shadow="sm"
-			bg={dark ? "#141D34" : "white"}
+			bg={dark ? "#1E293B" : "white"}
 			style={{ borderColor: dark ? "#141D34" : "#e5e7eb" }}
 		>
 			<Title order={3} mb="md" c={dark ? "dark.0" : "#1e3a5f"}>
@@ -66,14 +73,13 @@ export const PosyanduSchedule = ({ data }: PosyanduScheduleProps) => {
 						withBorder
 						bg={dark ? "#263852ff" : "#F1F5F9"}
 						style={{ borderColor: dark ? "#263852ff" : "#F1F5F9" }}
-						hoverable
 					>
 						<Group justify="space-between">
 							<Stack gap={0}>
-								<Text fw={600} c={dark ? "dark.0" : "#1e3a5f"}>
+								<Text fw={600} c={dark ? "white" : "#1e3a5f"}>
 									{item.nama}
 								</Text>
-								<Text size="sm" c={dark ? "dark.3" : "dimmed"}>
+								<Text size="sm" c={dark ? "white" : "dimmed"}>
 									{item.tanggal}
 								</Text>
 							</Stack>

src/components/sosial/summary-cards.tsx

@@ -1,5 +1,13 @@
-import { Card, Grid, GridCol, Group, Stack, Text, ThemeIcon } from "@mantine/core";
-import { useMantineColorScheme } from "@mantine/core";
+import {
+	Card,
+	Grid,
+	GridCol,
+	Group,
+	Stack,
+	Text,
+	ThemeIcon,
+	useMantineColorScheme,
+} from "@mantine/core";
 import {
 	IconBabyCarriage,
 	IconHeartbeat,
@@ -35,7 +43,7 @@ const SummaryCard = ({
 			radius="xl"
 			withBorder
 			shadow="sm"
-			bg={dark ? "#141D34" : "white"}
+			bg={dark ? "#1E293B" : "white"}
 			style={{ borderColor: dark ? "#141D34" : "#e5e7eb" }}
 		>
 			<Group justify="space-between" align="center">
@@ -46,12 +54,12 @@ const SummaryCard = ({
 					<Text
 						size="xl"
 						fw={700}
-						c={highlight ? "red" : dark ? "dark.0" : "#1e3a5f"}
+						c={highlight ? "red" : dark ? "white" : "#1e3a5f"}
 					>
 						{value}
 					</Text>
 					{subtitle && (
-						<Text size="xs" c={dark ? "dark.4" : "gray.6"}>
+						<Text size="xs" c={dark ? "white" : "gray.6"}>
 							{subtitle}
 						</Text>
 					)}
@@ -93,8 +101,8 @@ export const SummaryCards = ({ data }: SummaryCardsProps) => {
 					value={displayData.ibuHamil}
 					subtitle="Aktif"
 					icon={<IconHeartbeat size={20} />}
-					color= "white"
-					backgroundColor= "#1E3A5F"
+					color="white"
+					backgroundColor="#1E3A5F"
 				/>
 			</GridCol>
 			<GridCol span={{ base: 12, sm: 6, lg: 3 }}>
@@ -103,8 +111,8 @@ export const SummaryCards = ({ data }: SummaryCardsProps) => {
 					value={displayData.balita}
 					subtitle="Terdaftar"
 					icon={<IconBabyCarriage size={20} />}
-					color= "white"
-					backgroundColor= "#1E3A5F"
+					color="white"
+					backgroundColor="#1E3A5F"
 				/>
 			</GridCol>
 			<GridCol span={{ base: 12, sm: 6, lg: 3 }}>
@@ -113,8 +121,8 @@ export const SummaryCards = ({ data }: SummaryCardsProps) => {
 					value={displayData.alertStunting}
 					subtitle="Perhatian"
 					icon={<IconStethoscope size={20} />}
-					color= "white"
-					backgroundColor= "#1E3A5F"
+					color="white"
+					backgroundColor="#1E3A5F"
 				/>
 			</GridCol>
 			<GridCol span={{ base: 12, sm: 6, lg: 3 }}>
@@ -123,8 +131,8 @@ export const SummaryCards = ({ data }: SummaryCardsProps) => {
 					value={displayData.posyanduAktif}
 					subtitle="Aktif"
 					icon={<IconMedicalCross size={20} />}
-					color= "white"
-					backgroundColor= "#1E3A5F"
+					color="white"
+					backgroundColor="#1E3A5F"
 				/>
 			</GridCol>
 		</Grid>

src/components/ui/help-card.tsx

@@ -51,9 +51,7 @@ export const HelpCard = ({
 					{icon && (
 						<div
 							style={{
-								backgroundColor: isDark
-									? "#263852ff"
-									: "#1E3A5F",
+								backgroundColor: isDark ? "#263852ff" : "#1E3A5F",
 								borderRadius: "8px",
 								padding: "8px",
 								display: "flex",

src/components/umkm/produk-unggulan.tsx

@@ -15,11 +15,11 @@ const MetricCard = ({ title, value, trend }: MetricCardProps) => {
 
 	return (
 		<Group justify="space-between" align="center">
-			<Text size="sm" c={dark ? "dark.3" : "dimmed"} fw={500}>
+			<Text size="sm" c={dark ? "white" : "dimmed"} fw={500}>
 				{title}
 			</Text>
 			<Stack gap={0} align="flex-end">
-				<Text size="lg" fw={700} c={dark ? "dark.0" : "#1e3a5f"}>
+				<Text size="lg" fw={700} c={dark ? "white" : "#1e3a5f"}>
 					{value}
 				</Text>
 				{trend && (
@@ -77,7 +77,7 @@ export const ProdukUnggulan = ({ data }: ProdukUnggulanProps) => {
 			radius="xl"
 			withBorder
 			shadow="sm"
-			bg={dark ? "#141D34" : "white"}
+			bg={dark ? "#1E293B" : "white"}
 			style={{ borderColor: dark ? "#141D34" : "#e5e7eb" }}
 		>
 			<Stack gap="lg">

src/components/umkm/sales-table.tsx

@@ -108,7 +108,7 @@ export const SalesTable = ({ data, onDetailClick }: SalesTableProps) => {
 			radius="xl"
 			withBorder
 			shadow="sm"
-			bg={dark ? "#141D34" : "white"}
+			bg={dark ? "#1E293B" : "white"}
 			style={{ borderColor: dark ? "#141D34" : "#e5e7eb" }}
 		>
 			<Group justify="space-between" mb="md">
@@ -209,7 +209,7 @@ export const SalesTable = ({ data, onDetailClick }: SalesTableProps) => {
 									</Text>
 								</Table.Td>
 								<Table.Td>
-									<Text size="sm" c={dark ? "dark.3" : "dimmed"}>
+									<Text size="sm" c={dark ? "white" : "dimmed"}>
 										{formatCurrency(product.bulanLalu)}
 									</Text>
 								</Table.Td>

src/components/umkm/summary-cards.tsx

@@ -6,13 +6,13 @@ import {
 	Group,
 	Stack,
 	Text,
-	useMantineColorScheme
+	useMantineColorScheme,
 } from "@mantine/core";
 import {
 	IconCategory,
 	IconCurrencyDollar,
 	IconTrendingUp,
-	IconUsers
+	IconUsers,
 } from "@tabler/icons-react";
 
 interface KpiCardProps {
@@ -24,7 +24,14 @@ interface KpiCardProps {
 	backgroundColor: string;
 }
 
-const KpiCard = ({ title, value, subtitle, icon, color, backgroundColor }: KpiCardProps) => {
+const KpiCard = ({
+	title,
+	value,
+	subtitle,
+	icon,
+	color,
+	backgroundColor,
+}: KpiCardProps) => {
 	const { colorScheme } = useMantineColorScheme();
 	const dark = colorScheme === "dark";
 
@@ -47,19 +54,23 @@ const KpiCard = ({ title, value, subtitle, icon, color, backgroundColor }: KpiCa
 			radius="xl"
 			withBorder
 			shadow="sm"
-			bg={dark ? "#141D34" : "white"}
-			style={{ borderColor: dark ? "#141D34" : "#e5e7eb" }}
+			bg={dark ? "#1E293B" : "white"}
+			style={{
+				borderColor: dark ? "#334155" : "white",
+				boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
+				transition: "transform 0.15s ease, box-shadow 0.15s ease",
+			}}
 		>
 			<Group justify="space-between" align="center">
 				<Stack gap={2}>
 					<Text size="sm" c={dark ? "dark.3" : "dimmed"} fw={500}>
 						{title}
 					</Text>
-					<Text size="xl" fw={700} c={dark ? "dark.0" : "#1e3a5f"}>
+					<Text size="xl" fw={700} c={dark ? "white" : "#1e3a5f"}>
 						{formatValue(value)}
 					</Text>
 					{subtitle && (
-						<Text size="xs" c={dark ? "dark.4" : "gray.6"}>
+						<Text size="xs" c={dark ? "white" : "gray.6"}>
 							{subtitle}
 						</Text>
 					)}
@@ -108,7 +119,7 @@ export const SummaryCards = ({ data }: SummaryCardsProps) => {
 			subtitle: "Beroperasi",
 			icon: <IconCurrencyDollar size={25} />,
 			color: "white",
-			backgroundColor: "#1E3A5F"
+			backgroundColor: "#1E3A5F",
 		},
 		{
 			title: "UMKM Terdaftar",
@@ -116,7 +127,7 @@ export const SummaryCards = ({ data }: SummaryCardsProps) => {
 			subtitle: "Total registrasi",
 			icon: <IconUsers size={25} />,
 			color: "white",
-			backgroundColor: "#1E3A5F"
+			backgroundColor: "#1E3A5F",
 		},
 		{
 			title: "Omzet",
@@ -124,7 +135,7 @@ export const SummaryCards = ({ data }: SummaryCardsProps) => {
 			subtitle: "Omzet BUMDes per bulan",
 			icon: <IconTrendingUp size={25} />,
 			color: "white",
-			backgroundColor: "#1E3A5F"
+			backgroundColor: "#1E3A5F",
 		},
 		{
 			title: "UMKM Terbanyak",
@@ -132,7 +143,7 @@ export const SummaryCards = ({ data }: SummaryCardsProps) => {
 			subtitle: `Kategori ${displayData.kategoriTerbanyak.name}`,
 			icon: <IconTrendingUp size={25} />,
 			color: "white",
-			backgroundColor: "#1E3A5F"
+			backgroundColor: "#1E3A5F",
 		},
 	];
 

src/components/umkm/top-products.tsx

@@ -84,7 +84,7 @@ export const TopProducts = ({ products }: TopProductsProps) => {
 			radius="xl"
 			withBorder
 			shadow="sm"
-			bg={dark ? "#141D34" : "white"}
+			bg={dark ? "#1E293B" : "white"}
 			style={{ borderColor: dark ? "#141D34" : "#e5e7eb" }}
 		>
 			<Title order={4} mb="md" c={dark ? "dark.0" : "#1e3a5f"}>
@@ -105,20 +105,20 @@ export const TopProducts = ({ products }: TopProductsProps) => {
 								{product.rank}
 							</Badge>
 							<Stack gap={0}>
-								<Text fw={600} c={dark ? "dark.0" : "#1e3a5f"}>
+								<Text fw={600} c={dark ? "white" : "#1e3a5f"}>
 									{product.name}
 								</Text>
-								<Text size="sm" c={dark ? "dark.3" : "dimmed"}>
+								<Text size="sm" c={dark ? "white" : "dimmed"}>
 									{product.umkmName}
 								</Text>
 								<Group gap="xs" mt={2}>
-									<Text size="xs" c={dark ? "dark.4" : "gray.6"}>
+									<Text size="xs" c={dark ? "white" : "gray.6"}>
 										Rp {formatCurrency(product.revenue)}
 									</Text>
-									<Text size="xs" c={dark ? "dark.4" : "gray.6"}>
+									<Text size="xs" c={dark ? "white" : "gray.6"}>
 										•
 									</Text>
-									<Text size="xs" c={dark ? "dark.4" : "gray.6"}>
+									<Text size="xs" c={dark ? "white" : "gray.6"}>
 										{formatNumber(product.quantitySold)} terjual
 									</Text>
 								</Group>

src/middleware/authMiddleware.tsx

@@ -61,19 +61,11 @@ type RouteRule = {
 
 const routeRules: RouteRule[] = [
 	// Public routes - no auth required
-	{
-		match: (p) => p === "/" || p === "/signin" || p === "/signup",
-		requireAuth: false,
-	},
-	// Profile routes - auth required for all roles
-	{
-		match: (p) => p === "/profile" || p.startsWith("/profile/"),
-		requireAuth: true,
-		redirectTo: "/signin",
-	},
-	// Dashboard and main pages - auth required for all roles (not just admin)
 	{
 		match: (p) =>
+			p === "/" ||
+			p === "/signin" ||
+			p === "/signup" ||
 			p.startsWith("/kinerja-divisi") ||
 			p.startsWith("/pengaduan") ||
 			p.startsWith("/jenna") ||
@@ -83,7 +75,13 @@ const routeRules: RouteRule[] = [
 			p.startsWith("/sosial") ||
 			p.startsWith("/keamanan") ||
 			p.startsWith("/bantuan") ||
-			p.startsWith("/pengaturan"),
+			p.startsWith("/pengaturan") ||
+			p.startsWith("/users"),
+		requireAuth: false,
+	},
+	// Profile routes - auth required for all roles
+	{
+		match: (p) => p === "/profile" || p.startsWith("/profile/"),
 		requireAuth: true,
 		redirectTo: "/signin",
 	},

src/routes/__root.tsx

@@ -8,21 +8,15 @@ import { createRootRoute, Outlet } from "@tanstack/react-router";
 export const Route = createRootRoute({
 	component: RootComponent,
 	beforeLoad: async ({ location }) => {
-		// Only apply auth middleware for routes that need it
-		// Public routes: /, /signin, /signup
-		const isPublicRoute =
-			location.pathname === "/" ||
-			location.pathname === "/signin" ||
-			location.pathname === "/signup";
-
-		if (isPublicRoute) {
-			return;
-		}
-
-		// Apply protected route middleware for all other routes
+		// Apply protected route middleware for all routes
+		// The middleware will determine which routes are public vs protected
 		const context = await protectedRouteMiddleware({ location });
-		authStore.user = context?.user as any;
-		authStore.session = context?.session as any;
+		
+		// Only set auth store if we have user data (for protected routes)
+		if (context?.user) {
+			authStore.user = context?.user as any;
+			authStore.session = context?.session as any;
+		}
 	},
 });
 

src/routes/admin/route.tsx

@@ -37,10 +37,6 @@ import { authStore } from "../../store/auth";
 export const Route = createFileRoute("/admin")({
 	component: DashboardLayout,
 	beforeLoad: protectedRouteMiddleware,
-	onEnter({ context }) {
-		authStore.user = context?.user as any;
-		authStore.session = context?.session as any;
-	},
 });
 
 function DashboardLayout() {

src/routes/profile/edit.tsx

@@ -21,10 +21,6 @@ import { authStore } from "../../store/auth";
 export const Route = createFileRoute("/profile/edit")({
 	component: EditProfile,
 	beforeLoad: protectedRouteMiddleware,
-	onEnter({ context }) {
-		authStore.user = context?.user as any;
-		authStore.session = context?.session as any;
-	},
 });
 
 function EditProfile() {

src/routes/profile/index.tsx

@@ -41,10 +41,6 @@ import { authStore } from "../../store/auth";
 export const Route = createFileRoute("/profile/")({
 	component: Profile,
 	beforeLoad: protectedRouteMiddleware,
-	onEnter({ context }) {
-		authStore.user = context?.user as any;
-		authStore.session = context?.session as any;
-	},
 });
 
 function Profile() {