From 6722c8646a49fe73d63b7cf66b0a413af9bb6830 Mon Sep 17 00:00:00 2001
From: nico <nicoarya20@gmail.com>
Date: Fri, 13 Feb 2026 15:45:48 +0800
Subject: [PATCH] fix: improve dark mode styling in demografi-pekerjaan
 component

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
---
 src/components/bumdes-page.tsx           | 33 +++++------
 src/components/demografi-pekerjaan.tsx   | 74 ++++++++++++------------
 src/components/help-page.tsx             | 26 +++++----
 src/components/keamanan-page.tsx         | 10 ++--
 src/components/keuangan-anggaran.tsx     | 40 +++++--------
 src/components/sidebar.tsx               |  3 +-
 src/components/sosial-page.tsx           | 31 ++++------
 src/routes/dashboard/pengaturan/umum.tsx |  6 +-
 8 files changed, 101 insertions(+), 122 deletions(-)

diff --git a/src/components/bumdes-page.tsx b/src/components/bumdes-page.tsx
index 2ba84db..647bfc0 100644
--- a/src/components/bumdes-page.tsx
+++ b/src/components/bumdes-page.tsx
@@ -109,18 +109,11 @@ const BumdesPage = () => {
 
   return (
     <Stack gap="lg">
-      {/* Page Header */}
-      <Group justify="space-between" align="center">
-        <Title order={2} c={dark ? "dark.0" : "black"}>
-          BUMDes & UMKM Desa
-        </Title>
-      </Group>
-
       {/* KPI Cards */}
       <Grid gutter="md">
         {kpiData.map((kpi, index) => (
           <GridCol key={index} span={{ base: 12, sm: 6, md: 3 }}>
-            <Card withBorder radius="md" padding="lg">
+            <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"}>
@@ -145,7 +138,7 @@ const BumdesPage = () => {
       </Grid>
 
       {/* Update Penjualan Produk Header */}
-      <Card withBorder radius="md" bg={dark ? "dark.8" : "darmasaba-blue.0"}>
+      <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
@@ -174,7 +167,7 @@ const BumdesPage = () => {
         <GridCol span={{ base: 12, lg: 4 }}>
           <Stack gap="md">
             {/* Total Penjualan, Produk Aktif, Total Transaksi */}
-            <Card withBorder radius="md" p="lg">
+            <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>
@@ -192,7 +185,7 @@ const BumdesPage = () => {
             </Card>
 
             {/* Top 3 Produk Terlaris */}
-            <Card withBorder radius="md" p="lg">
+            <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) => (
@@ -226,7 +219,7 @@ const BumdesPage = () => {
 
         {/* Detail Penjualan Produk (Right Column) */}
         <GridCol span={{ base: 12, lg: 8 }}>
-          <Card withBorder radius="md" p="lg">
+          <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
@@ -245,13 +238,13 @@ const BumdesPage = () => {
             <Table striped highlightOnHover withColumnBorders>
               <Table.Thead>
                 <Table.Tr>
-                  <Table.Th><Text c={dark ? "dark.3" : "dimmed"}>Produk</Text></Table.Th>
-                  <Table.Th><Text c={dark ? "dark.3" : "dimmed"}>Penjualan Bulan Ini</Text></Table.Th>
-                  <Table.Th><Text c={dark ? "dark.3" : "dimmed"}>Bulan Lalu</Text></Table.Th>
-                  <Table.Th><Text c={dark ? "dark.3" : "dimmed"}>Trend</Text></Table.Th>
-                  <Table.Th><Text c={dark ? "dark.3" : "dimmed"}>Volume</Text></Table.Th>
-                  <Table.Th><Text c={dark ? "dark.3" : "dimmed"}>Stok</Text></Table.Th>
-                  <Table.Th><Text c={dark ? "dark.3" : "dimmed"}>Aksi</Text></Table.Th>
+                  <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>
@@ -264,7 +257,7 @@ const BumdesPage = () => {
                       <Text fz={"sm"} c={dark ? "dark.0" : "black"}>{product.penjualanBulanIni}</Text>
                     </Table.Td>
                     <Table.Td>
-                      <Text fz={"sm"} c={dark ? "dark.3" : "dimmed"}>{product.bulanLalu}</Text>
+                      <Text fz={"sm"} c={dark ? "white" : "dimmed"}>{product.bulanLalu}</Text>
                     </Table.Td>
                     <Table.Td>
                       <Group gap="xs">
diff --git a/src/components/demografi-pekerjaan.tsx b/src/components/demografi-pekerjaan.tsx
index 649fa87..99240af 100644
--- a/src/components/demografi-pekerjaan.tsx
+++ b/src/components/demografi-pekerjaan.tsx
@@ -1,8 +1,6 @@
 import React from "react";
 import {
-	Button,
 	Card,
-	Badge,
 	Title,
 	Text,
 	Group,
@@ -10,7 +8,7 @@ import {
 	Grid,
 	Box,
 	Table,
-	Progress,
+	useMantineColorScheme,
 } from "@mantine/core";
 import { IconBabyCarriage, IconSkull, IconArrowUp, IconArrowDown } from "@tabler/icons-react";
 import { BarChart, PieChart } from "@mantine/charts";
@@ -30,7 +28,10 @@ const kpiData = [
 				strokeWidth={1.5}
 				stroke="currentColor"
 				className="h-6 w-6 text-muted-foreground"
+				role="img"
+				aria-label="Icon penduduk"
 			>
+				<title>Total Penduduk</title>
 				<path
 					strokeLinecap="round"
 					strokeLinejoin="round"
@@ -52,7 +53,10 @@ const kpiData = [
 				strokeWidth={1.5}
 				stroke="currentColor"
 				className="h-6 w-6 text-muted-foreground"
+				role="img"
+				aria-label="Icon kepala keluarga"
 			>
+				<title>Kepala Keluarga</title>
 				<path
 					strokeLinecap="round"
 					strokeLinejoin="round"
@@ -67,7 +71,7 @@ const kpiData = [
 		value: "23",
 		sub: "Tahun ini",
 		icon: (
-			<IconBabyCarriage className="h-6 w-6 text-muted-foreground" />
+			<IconBabyCarriage className="h-6 w-6 text-muted-foreground" role="img" aria-label="Icon kelahiran" />
 		),
 	},
 	{
@@ -84,7 +88,10 @@ const kpiData = [
 				strokeWidth={1.5}
 				stroke="currentColor"
 				className="h-6 w-6 text-muted-foreground"
+				role="img"
+				aria-label="Icon kemiskinan"
 			>
+				<title>Kemiskinan</title>
 				<path
 					strokeLinecap="round"
 					strokeLinejoin="round"
@@ -136,31 +143,26 @@ const dynamicStats = [
 ];
 
 const DemografiPekerjaan = () => {
+	const { colorScheme } = useMantineColorScheme();
+	const dark = colorScheme === "dark";
 	return (
 		<Box className="space-y-6">
 			<Stack gap="xl">
-				<Group justify="space-between" align="center">
-					<Title order={2} fw={700}>
-						Demografi & Kependudukan
-					</Title>
-					<Button variant="filled">Export Data</Button>
-				</Group>
-
 				{/* KPI Cards */}
 				<Grid gutter="lg">
 					{kpiData.map((kpi) => (
 						<Grid.Col key={kpi.id} span={{ base: 12, md: 6, lg: 3 }}>
-							<Card shadow="sm" padding="lg" radius="md" withBorder>
+							<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">
+									<Text size="sm" fw={500} c={dark ? "dark.3" : "dimmed"}>
 										{kpi.title}
 									</Text>
 									{React.cloneElement(kpi.icon, {
 										className: "h-6 w-6",
-										color: "var(--mantine-color-dimmed)",
+										color: dark ? "var(--mantine-color-dark-3)" : "var(--mantine-color-dimmed)",
 									})}
 								</Group>
-								<Title order={3} fw={700} mt="xs">
+								<Title order={3} fw={700} c={dark ? "dark.0" : "black"} mt="xs">
 									{kpi.value}
 								</Title>
 								{kpi.delta && (
@@ -171,7 +173,7 @@ const DemografiPekerjaan = () => {
 												? "green"
 												: kpi.deltaType === "negative"
 													? "red"
-													: "dimmed"
+													: dark ? "dark.3" : "dimmed"
 										}
 										mt={4}
 									>
@@ -179,7 +181,7 @@ const DemografiPekerjaan = () => {
 									</Text>
 								)}
 								{kpi.sub && (
-									<Text size="xs" c="dimmed" mt={2}>
+									<Text size="xs" c={dark ? "dark.3" : "dimmed"} mt={2}>
 										{kpi.sub}
 									</Text>
 								)}
@@ -192,7 +194,7 @@ const DemografiPekerjaan = () => {
 				<Grid gutter="lg">
 					{/* Grafik Pengelompokan Umur */}
 					<Grid.Col span={{ base: 12, lg: 6 }}>
-						<Card shadow="sm" padding="lg" radius="md" withBorder>
+						<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>
@@ -208,7 +210,7 @@ const DemografiPekerjaan = () => {
 
 					{/* Demografi Pekerjaan */}
 					<Grid.Col span={{ base: 12, lg: 6 }}>
-						<Card shadow="sm" padding="lg" radius="md" withBorder>
+						<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>
@@ -227,7 +229,7 @@ const DemografiPekerjaan = () => {
 				<Grid gutter="lg">
 					{/* Distribusi Agama */}
 					<Grid.Col span={{ base: 12, lg: 6 }}>
-						<Card shadow="sm" padding="lg" radius="md" withBorder>
+						<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>
@@ -248,27 +250,27 @@ const DemografiPekerjaan = () => {
 
 					{/* Data per Banjar */}
 					<Grid.Col span={{ base: 12, lg: 6 }}>
-						<Card shadow="sm" padding="lg" radius="md" withBorder>
-							<Title order={3} fw={500} mb="md">
+						<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>Banjar</Table.Th>
-										<Table.Th>Penduduk</Table.Th>
-										<Table.Th>KK</Table.Th>
-										<Table.Th>Miskin</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={index}>
-											<Table.Td>{item.banjar}</Table.Td>
-											<Table.Td>{item.population.toLocaleString()}</Table.Td>
-											<Table.Td>{item.kk.toLocaleString()}</Table.Td>
+										<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="red">{item.poor.toLocaleString()}</Text>
+												<Text c={dark ? "red.4" : "red"}>{item.poor.toLocaleString()}</Text>
 											</Table.Td>
 										</Table.Tr>
 									))}
@@ -279,17 +281,17 @@ const DemografiPekerjaan = () => {
 				</Grid>
 
 				{/* Statistik Dinamika Penduduk */}
-				<Card shadow="sm" padding="lg" radius="md" withBorder>
-					<Title order={3} fw={500} mb="md">
+				<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={index} span={{ base: 12, md: 3 }}>
-								<Card shadow="sm" padding="lg" radius="md" withBorder>
+							<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="dimmed">
+											<Text size="sm" fw={500} c={dark ? "dark.3" : "dimmed"}>
 												{stat.title}
 											</Text>
 											<Title order={4} fw={700} c={stat.color}>
diff --git a/src/components/help-page.tsx b/src/components/help-page.tsx
index 3440a4b..d43a0c3 100644
--- a/src/components/help-page.tsx
+++ b/src/components/help-page.tsx
@@ -1,9 +1,11 @@
-import { Container, Grid, Title, Text, SimpleGrid, Box, Accordion, Stack } from '@mantine/core';
+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';
 
 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' },
@@ -89,7 +91,7 @@ const HelpPage = () => {
       {/* Statistics Section */}
       <SimpleGrid cols={3} spacing="lg" mb="xl">
         {stats.map((stat, index) => (
-          <HelpCard key={index} p="lg" style={{ textAlign: 'center' }} h="100%">
+          <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>
@@ -101,7 +103,7 @@ const HelpPage = () => {
           <Grid gutter="lg" justify="center">
             {/* Panduan Memulai */}
             <Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
-              <HelpCard icon={<IconBook size={24} />} title="Panduan Memulai" h="100%">
+              <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}`)}>
@@ -115,7 +117,7 @@ const HelpPage = () => {
 
             {/* Video Tutorial */}
             <Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
-              <HelpCard icon={<IconVideo size={24} />} title="Video Tutorial" h="100%">
+              <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}`)}>
@@ -129,10 +131,10 @@ const HelpPage = () => {
 
             {/* FAQ */}
             <Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
-              <HelpCard icon={<IconHelpCircle size={24} />} title="FAQ" h="100%">
-                <Accordion variant="separated">
+              <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 key={index} value={`faq-${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>
@@ -149,7 +151,7 @@ const HelpPage = () => {
           <Grid>
             {/* Hubungi Support */}
             <Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
-              <HelpCard icon={<IconHeadphones size={24} />} title="Hubungi Support" h="100%">
+              <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>
@@ -168,7 +170,7 @@ const HelpPage = () => {
 
             {/* Dokumentasi */}
             <Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
-              <HelpCard icon={<IconFileText size={24} />} title="Dokumentasi" h="100%">
+              <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}`)}>
@@ -182,7 +184,7 @@ const HelpPage = () => {
 
             {/* Jenna - Virtual Assistant */}
             <Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
-              <HelpCard icon={<IconMessage size={24} />} title="Jenna - Virtual Assistant" h="100%">
+              <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) => (
@@ -190,8 +192,8 @@ const HelpPage = () => {
                         key={msg.id}
                         style={{
                           alignSelf: msg.sender === 'user' ? 'flex-end' : 'flex-start',
-                          backgroundColor: msg.sender === 'user' ? '#3B82F6' : '#F3F4F6',
-                          color: msg.sender === 'user' ? 'white' : 'black',
+                          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',
diff --git a/src/components/keamanan-page.tsx b/src/components/keamanan-page.tsx
index 4b281bb..18e3599 100644
--- a/src/components/keamanan-page.tsx
+++ b/src/components/keamanan-page.tsx
@@ -101,7 +101,7 @@ const KeamananPage = () => {
       <Grid gutter="md">
         {kpiData.map((kpi, index) => (
           <GridCol key={index} span={{ base: 12, sm: 6, md: 6 }}>
-            <Card withBorder radius="md" padding="lg">
+            <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"}>
@@ -128,7 +128,7 @@ const KeamananPage = () => {
       <Grid gutter="md">
         {/* Peta Keamanan CCTV */}
         <GridCol span={{ base: 12, lg: 6 }}>
-          <Card withBorder radius="md" p="lg">
+          <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>
             
@@ -154,7 +154,7 @@ const KeamananPage = () => {
             <Stack mt="md" gap="sm">
               <Title order={4} c={dark ? "dark.0" : "black"}>Daftar CCTV</Title>
               {cctvLocations.map((cctv, index) => (
-                <Card key={index} withBorder radius="md" p="md">
+                <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">
@@ -181,12 +181,12 @@ const KeamananPage = () => {
 
         {/* Daftar Laporan Keamanan */}
         <GridCol span={{ base: 12, lg: 6 }}>
-          <Card withBorder radius="md" p="lg">
+          <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} withBorder radius="md" p="md">
+                <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 
diff --git a/src/components/keuangan-anggaran.tsx b/src/components/keuangan-anggaran.tsx
index e0b1e46..1a6f0cb 100644
--- a/src/components/keuangan-anggaran.tsx
+++ b/src/components/keuangan-anggaran.tsx
@@ -10,6 +10,7 @@ import {
 	Grid,
 	Box,
 	Progress,
+	useMantineColorScheme,
 } from "@mantine/core";
 import { IconTrendingUp, IconTrendingDown, IconCurrency } from "@tabler/icons-react";
 import { BarChart } from "@mantine/charts";
@@ -115,31 +116,16 @@ const apbdReport = {
 };
 
 const KeuanganAnggaran = () => {
+	const { colorScheme } = useMantineColorScheme();
+	const dark = colorScheme === "dark";
 	return (
 		<Box>
 			<Stack gap="xl">
-				<Group justify="space-between" align="center">
-					<Title order={2} fw={700}>
-						Keuangan & Anggaran
-					</Title>
-					<Button variant="filled">Export Laporan</Button>
-				</Group>
-
 				{/* KPI Cards */}
 				<Grid gutter="lg">
 					{kpiData.map((kpi) => (
 						<Grid.Col key={kpi.id} span={{ base: 12, md: 6, lg: 3 }}>
-							<Card 
-								shadow="sm" 
-								padding="lg" 
-								radius="md" 
-								withBorder
-								style={{ 
-									display: 'flex',
-									flexDirection: 'column',
-									height: '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}
@@ -181,7 +167,7 @@ const KeuanganAnggaran = () => {
 				<Grid gutter="lg">
 					{/* Grafik Pemasukan vs Pengeluaran */}
 					<Grid.Col span={{ base: 12, lg: 6 }}>
-						<Card shadow="sm" padding="lg" radius="md" withBorder>
+						<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>
@@ -200,7 +186,7 @@ const KeuanganAnggaran = () => {
 
 					{/* Alokasi Anggaran Per Sektor */}
 					<Grid.Col span={{ base: 12, lg: 6 }}>
-						<Card shadow="sm" padding="lg" radius="md" withBorder>
+						<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>
@@ -219,7 +205,7 @@ const KeuanganAnggaran = () => {
 				<Grid gutter="lg">
 					{/* Dana Bantuan & Hibah */}
 					<Grid.Col span={{ base: 12, lg: 6 }}>
-						<Card shadow="sm" padding="lg" radius="md" withBorder>
+						<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,8 +229,8 @@ const KeuanganAnggaran = () => {
 												Rp {fund.amount.toLocaleString()}jt
 											</Text>
 										</Box>
-										<Badge 
-											variant="light" 
+										<Badge
+											variant="light"
 											color={fund.status === "cair" ? "green" : "yellow"}
 										>
 											{fund.status}
@@ -257,11 +243,11 @@ const KeuanganAnggaran = () => {
 
 					{/* Laporan APBDes */}
 					<Grid.Col span={{ base: 12, lg: 6 }}>
-						<Card shadow="sm" padding="lg" radius="md" withBorder>
+						<Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }}>
 							<Title order={3} fw={500} mb="md">
 								Laporan APBDes
 							</Title>
-							
+
 							<Box mb="md">
 								<Title order={4} mb="sm">Pendapatan</Title>
 								<Stack gap="xs">
@@ -281,7 +267,7 @@ const KeuanganAnggaran = () => {
 									</Group>
 								</Stack>
 							</Box>
-							
+
 							<Box>
 								<Title order={4} mb="sm">Belanja</Title>
 								<Stack gap="xs">
@@ -301,7 +287,7 @@ const KeuanganAnggaran = () => {
 									</Group>
 								</Stack>
 							</Box>
-							
+
 							<Box mt="md" pt="md" style={{ borderTop: '1px solid var(--mantine-color-gray-3)' }}>
 								<Group justify="space-between">
 									<Text fw={700}>Saldo:</Text>
diff --git a/src/components/sidebar.tsx b/src/components/sidebar.tsx
index 71dfc2b..43b3730 100644
--- a/src/components/sidebar.tsx
+++ b/src/components/sidebar.tsx
@@ -21,6 +21,7 @@ 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";
 	
@@ -89,7 +90,7 @@ export function Sidebar({ className }: SidebarProps) {
 					styles={{
 						input: {
 							"&::placeholder": {
-								color: "var(--mantine-color-gray-5)",
+								color: dark ? "#F1F5F9" : "#263852ff",
 							},
 						},
 					}}
diff --git a/src/components/sosial-page.tsx b/src/components/sosial-page.tsx
index ca52708..7df45f0 100644
--- a/src/components/sosial-page.tsx
+++ b/src/components/sosial-page.tsx
@@ -82,17 +82,10 @@ const SosialPage = () => {
 
   return (
     <Stack gap="lg">
-      {/* Page Header */}
-      <Group justify="space-between" align="center">
-        <Title order={2} c={dark ? "dark.0" : "black"}>
-          Sosial Desa
-        </Title>
-      </Group>
-
       {/* Health Statistics Cards */}
       <Grid gutter="md">
         <GridCol span={{ base: 12, sm: 6, md: 3 }}>
-          <Card withBorder radius="md" padding="lg">
+          <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"}>
@@ -110,7 +103,7 @@ const SosialPage = () => {
         </GridCol>
 
         <GridCol span={{ base: 12, sm: 6, md: 3 }}>
-          <Card withBorder radius="md" padding="lg">
+          <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"}>
@@ -128,7 +121,7 @@ const SosialPage = () => {
         </GridCol>
 
         <GridCol span={{ base: 12, sm: 6, md: 3 }}>
-          <Card withBorder radius="md" padding="lg">
+          <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"}>
@@ -146,7 +139,7 @@ const SosialPage = () => {
         </GridCol>
 
         <GridCol span={{ base: 12, sm: 6, md: 3 }}>
-          <Card withBorder radius="md" padding="lg">
+          <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"}>
@@ -165,7 +158,7 @@ const SosialPage = () => {
       </Grid>
 
       {/* Health Progress Bars */}
-      <Card withBorder radius="md" p="lg">
+      <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) => (
@@ -192,15 +185,15 @@ const SosialPage = () => {
       <Grid gutter="md">
         {/* Jadwal Posyandu */}
         <GridCol span={{ base: 12, lg: 6 }}>
-          <Card withBorder radius="md" p="lg">
+          <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} withBorder radius="md" p="md">
+                <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.3" : "dimmed"}>{item.tanggal}</Text>
+                      <Text size="sm" c={dark ? "dark.0" : "black"}>{item.tanggal}</Text>
                     </Stack>
                     <Badge variant="light" color="darmasaba-blue">
                       {item.jam}
@@ -214,7 +207,7 @@ const SosialPage = () => {
 
         {/* Pendidikan */}
         <GridCol span={{ base: 12, lg: 6 }}>
-          <Card withBorder radius="md" p="lg">
+          <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">
@@ -234,7 +227,7 @@ const SosialPage = () => {
                 <Text fw={700} c={dark ? "dark.0" : "black"}>{educationStats.siswa.sma}</Text>
               </Group>
               
-              <Card withBorder radius="md" p="md" mt="md">
+              <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>
@@ -252,7 +245,7 @@ const SosialPage = () => {
       <Grid gutter="md">
         {/* Beasiswa Desa */}
         <GridCol span={{ base: 12, lg: 6 }}>
-          <Card withBorder radius="md" p="lg" bg={dark ? "dark.8" : "darmasaba-blue.0"}>
+          <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>
@@ -269,7 +262,7 @@ const SosialPage = () => {
 
         {/* Kalender Event Budaya */}
         <GridCol span={{ base: 12, lg: 6 }}>
-          <Card withBorder radius="md" p="lg">
+          <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) => (
diff --git a/src/routes/dashboard/pengaturan/umum.tsx b/src/routes/dashboard/pengaturan/umum.tsx
index dec4903..628af57 100644
--- a/src/routes/dashboard/pengaturan/umum.tsx
+++ b/src/routes/dashboard/pengaturan/umum.tsx
@@ -1,9 +1,11 @@
-import { Card, Title, Text, Space, TextInput, Select, Button, Group, Switch, Alert } from '@mantine/core';
+import { Card, Title, Text, Space, TextInput, Select, Button, Group, Switch, Alert, 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">
+    <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>