From 366c08fbaa67b08f648631ac6611aaf0890b1551 Mon Sep 17 00:00:00 2001
From: nico <nicoarya20@gmail.com>
Date: Wed, 25 Mar 2026 16:46:59 +0800
Subject: [PATCH] Fix Konsisten Warna Bg

---
 src/components/help-page.tsx                  | 14 ++++++-------
 src/components/keamanan-page.tsx              | 20 +++++++++----------
 .../kinerja-divisi/activity-card.tsx          |  7 +++++--
 src/components/sosial/beasiswa.tsx            | 14 ++++++-------
 src/components/sosial/event-calendar.tsx      |  2 +-
 src/components/sosial/health-stats.tsx        |  2 +-
 src/components/sosial/pendidikan.tsx          |  2 +-
 src/components/sosial/posyandu-schedule.tsx   |  7 +++----
 src/components/sosial/summary-cards.tsx       |  6 +++---
 src/components/umkm/produk-unggulan.tsx       |  2 +-
 src/components/umkm/sales-table.tsx           |  2 +-
 src/components/umkm/summary-cards.tsx         |  6 +++---
 src/components/umkm/top-products.tsx          |  2 +-
 13 files changed, 44 insertions(+), 42 deletions(-)

diff --git a/src/components/help-page.tsx b/src/components/help-page.tsx
index b7e6fe6..1501704 100644
--- a/src/components/help-page.tsx
+++ b/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%"
diff --git a/src/components/keamanan-page.tsx b/src/components/keamanan-page.tsx
index 2cc042d..3eb2481 100644
--- a/src/components/keamanan-page.tsx
+++ b/src/components/keamanan-page.tsx
@@ -126,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%"
 									>
@@ -143,7 +143,7 @@ const KeamananPage = () => {
 													>
 														{kpi.value}
 													</Text>
-													<Text size="sm" c={dark ? "dark.3" : "dimmed"}>
+													<Text size="sm" c={dark ? "white" : "dimmed"}>
 														{kpi.title}
 													</Text>
 												</Group>
@@ -165,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>
 
@@ -228,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>
@@ -252,7 +252,7 @@ const KeamananPage = () => {
 						p="md"
 						radius="md"
 						withBorder
-						bg={dark ? "#141D34" : "white"}
+						bg={dark ? "#1E293B" : "white"}
 						style={{ borderColor: dark ? "#141D34" : "white" }}
 						h="100%"
 					>
@@ -287,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>
diff --git a/src/components/kinerja-divisi/activity-card.tsx b/src/components/kinerja-divisi/activity-card.tsx
index d13a766..3573548 100644
--- a/src/components/kinerja-divisi/activity-card.tsx
+++ b/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",
 			}}
 		>
diff --git a/src/components/sosial/beasiswa.tsx b/src/components/sosial/beasiswa.tsx
index 8b8905d..f3518b8 100644
--- a/src/components/sosial/beasiswa.tsx
+++ b/src/components/sosial/beasiswa.tsx
@@ -37,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>
@@ -61,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>
diff --git a/src/components/sosial/event-calendar.tsx b/src/components/sosial/event-calendar.tsx
index fcd3aeb..c62dcc7 100644
--- a/src/components/sosial/event-calendar.tsx
+++ b/src/components/sosial/event-calendar.tsx
@@ -53,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"}>
diff --git a/src/components/sosial/health-stats.tsx b/src/components/sosial/health-stats.tsx
index c165265..8eb1510 100644
--- a/src/components/sosial/health-stats.tsx
+++ b/src/components/sosial/health-stats.tsx
@@ -37,7 +37,7 @@ 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%"}
 		>
diff --git a/src/components/sosial/pendidikan.tsx b/src/components/sosial/pendidikan.tsx
index c9c584f..f1d060b 100644
--- a/src/components/sosial/pendidikan.tsx
+++ b/src/components/sosial/pendidikan.tsx
@@ -49,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"}>
diff --git a/src/components/sosial/posyandu-schedule.tsx b/src/components/sosial/posyandu-schedule.tsx
index 6d86c3c..570df29 100644
--- a/src/components/sosial/posyandu-schedule.tsx
+++ b/src/components/sosial/posyandu-schedule.tsx
@@ -58,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"}>
@@ -73,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>
diff --git a/src/components/sosial/summary-cards.tsx b/src/components/sosial/summary-cards.tsx
index cb6bc19..a3a232f 100644
--- a/src/components/sosial/summary-cards.tsx
+++ b/src/components/sosial/summary-cards.tsx
@@ -43,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">
@@ -54,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>
 					)}
diff --git a/src/components/umkm/produk-unggulan.tsx b/src/components/umkm/produk-unggulan.tsx
index bf69e66..ddf0db6 100644
--- a/src/components/umkm/produk-unggulan.tsx
+++ b/src/components/umkm/produk-unggulan.tsx
@@ -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">
diff --git a/src/components/umkm/sales-table.tsx b/src/components/umkm/sales-table.tsx
index acb2445..6b625d5 100644
--- a/src/components/umkm/sales-table.tsx
+++ b/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">
diff --git a/src/components/umkm/summary-cards.tsx b/src/components/umkm/summary-cards.tsx
index 62be861..95ae4dd 100644
--- a/src/components/umkm/summary-cards.tsx
+++ b/src/components/umkm/summary-cards.tsx
@@ -54,7 +54,7 @@ const KpiCard = ({
 			radius="xl"
 			withBorder
 			shadow="sm"
-			bg={dark ? "#141D34" : "white"}
+			bg={dark ? "#1E293B" : "white"}
 			style={{ borderColor: dark ? "#141D34" : "#e5e7eb" }}
 		>
 			<Group justify="space-between" align="center">
@@ -62,11 +62,11 @@ const KpiCard = ({
 					<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>
 					)}
diff --git a/src/components/umkm/top-products.tsx b/src/components/umkm/top-products.tsx
index c631224..bf50659 100644
--- a/src/components/umkm/top-products.tsx
+++ b/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"}>