feat: update components with Mantine UI and improve dark mode support

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

src/routes/dashboard/bumdes.ts

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

src/routes/dashboard/keamanan.ts

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

src/routes/dashboard/route.tsx

@@ -1,7 +1,7 @@
 import { createFileRoute, Outlet } from "@tanstack/react-router";
 import { Header } from "@/components/header";
 import { Sidebar } from "@/components/sidebar";
-import { AppShell, Burger, Group } from "@mantine/core";
+import { AppShell, Burger, Group, useMantineColorScheme } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
 
 export const Route = createFileRoute("/dashboard")({
@@ -10,7 +10,10 @@ export const Route = createFileRoute("/dashboard")({
 
 function RouteComponent() {
 	const [opened, { toggle }] = useDisclosure();
-
+	const { colorScheme } = useMantineColorScheme();
+	const headerBgColor = colorScheme === 'dark' ? "#11192D" : "#19355E";
+	const navbarBgColor = colorScheme === 'dark' ? "#11192D" : "white";
+	const mainBgColor = colorScheme === 'dark' ? "#11192D" : "#edf3f8ff";
 	return (
 		<AppShell
 			header={{ height: 60 }}
@@ -21,18 +24,18 @@ function RouteComponent() {
 			}}
 			padding="md"
 		>
-			<AppShell.Header>
+			<AppShell.Header bg={headerBgColor}>
 				<Group h="100%" px="md">
 					<Burger opened={opened} onClick={toggle} hiddenFrom="sm" size="sm" />
 					<Header />
 				</Group>
 			</AppShell.Header>
 
-			<AppShell.Navbar p="md">
+			<AppShell.Navbar p="md" bg={navbarBgColor}>
 				<Sidebar />
 			</AppShell.Navbar>
 
-			<AppShell.Main>
+			<AppShell.Main bg={mainBgColor}>
 				<Outlet />
 			</AppShell.Main>
 		</AppShell>

src/routes/dashboard/sosial.ts

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