diff --git a/src/components/keamanan-page.tsx b/src/components/keamanan-page.tsx
index 8937a27..6453ae1 100644
--- a/src/components/keamanan-page.tsx
+++ b/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();
@@ -125,8 +121,6 @@ const KeamananPage = () => {
 				</Title>
 			</Group>
 
-
-
 			<Grid gutter="md">
 				{/* Peta Keamanan CCTV */}
 				<GridCol span={{ base: 12, lg: 6 }}>
@@ -149,7 +143,11 @@ 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"}>
@@ -265,10 +263,6 @@ const KeamananPage = () => {
 						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
diff --git a/src/components/pengaturan/akses-dan-tim.tsx b/src/components/pengaturan/akses-dan-tim.tsx
index a9b429a..4bb51ff 100644
--- a/src/components/pengaturan/akses-dan-tim.tsx
+++ b/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>
diff --git a/src/components/pengaturan/keamanan.tsx b/src/components/pengaturan/keamanan.tsx
index 56b25dd..25cb68b 100644
--- a/src/components/pengaturan/keamanan.tsx
+++ b/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">
diff --git a/src/components/pengaturan/notifikasi.tsx b/src/components/pengaturan/notifikasi.tsx
index 3b81c30..3f3adfd 100644
--- a/src/components/pengaturan/notifikasi.tsx
+++ b/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>
diff --git a/src/components/pengaturan/umum.tsx b/src/components/pengaturan/umum.tsx
index f7482a5..582e045 100644
--- a/src/components/pengaturan/umum.tsx
+++ b/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>
 
diff --git a/src/components/sosial-page.tsx b/src/components/sosial-page.tsx
index 24c2fd6..fa86972 100644
--- a/src/components/sosial-page.tsx
+++ b/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 (
diff --git a/src/components/sosial/beasiswa.tsx b/src/components/sosial/beasiswa.tsx
index 79ab93c..8b8905d 100644
--- a/src/components/sosial/beasiswa.tsx
+++ b/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 {
diff --git a/src/components/sosial/event-calendar.tsx b/src/components/sosial/event-calendar.tsx
index 92d72ee..fcd3aeb 100644
--- a/src/components/sosial/event-calendar.tsx
+++ b/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 {
diff --git a/src/components/sosial/health-stats.tsx b/src/components/sosial/health-stats.tsx
index 8dca29d..c165265 100644
--- a/src/components/sosial/health-stats.tsx
+++ b/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;
@@ -32,7 +39,7 @@ export const HealthStats = ({ data }: HealthStatsProps) => {
 			shadow="sm"
 			bg={dark ? "#141D34" : "white"}
 			style={{ borderColor: dark ? "#141D34" : "#e5e7eb" }}
-			h={'100%'}
+			h={"100%"}
 		>
 			<Title order={3} mb="md" c={dark ? "dark.0" : "#1e3a5f"}>
 				Statistik Kesehatan
diff --git a/src/components/sosial/pendidikan.tsx b/src/components/sosial/pendidikan.tsx
index b3afc60..c9c584f 100644
--- a/src/components/sosial/pendidikan.tsx
+++ b/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: {
diff --git a/src/components/sosial/posyandu-schedule.tsx b/src/components/sosial/posyandu-schedule.tsx
index e180c4d..6d86c3c 100644
--- a/src/components/sosial/posyandu-schedule.tsx
+++ b/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;
diff --git a/src/components/sosial/summary-cards.tsx b/src/components/sosial/summary-cards.tsx
index 1268969..cb6bc19 100644
--- a/src/components/sosial/summary-cards.tsx
+++ b/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,
@@ -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>
diff --git a/src/components/ui/help-card.tsx b/src/components/ui/help-card.tsx
index 30f1351..e17a01e 100644
--- a/src/components/ui/help-card.tsx
+++ b/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",
diff --git a/src/components/umkm/summary-cards.tsx b/src/components/umkm/summary-cards.tsx
index 8e103c5..62be861 100644
--- a/src/components/umkm/summary-cards.tsx
+++ b/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";
 
@@ -108,7 +115,7 @@ export const SummaryCards = ({ data }: SummaryCardsProps) => {
 			subtitle: "Beroperasi",
 			icon: <IconCurrencyDollar size={25} />,
 			color: "white",
-			backgroundColor: "#1E3A5F"
+			backgroundColor: "#1E3A5F",
 		},
 		{
 			title: "UMKM Terdaftar",
@@ -116,7 +123,7 @@ export const SummaryCards = ({ data }: SummaryCardsProps) => {
 			subtitle: "Total registrasi",
 			icon: <IconUsers size={25} />,
 			color: "white",
-			backgroundColor: "#1E3A5F"
+			backgroundColor: "#1E3A5F",
 		},
 		{
 			title: "Omzet",
@@ -124,7 +131,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 +139,7 @@ export const SummaryCards = ({ data }: SummaryCardsProps) => {
 			subtitle: `Kategori ${displayData.kategoriTerbanyak.name}`,
 			icon: <IconTrendingUp size={25} />,
 			color: "white",
-			backgroundColor: "#1E3A5F"
+			backgroundColor: "#1E3A5F",
 		},
 	];