fix: make dashboard public and remove admin-only restriction from main pages

- Make homepage (/) accessible without authentication - Allow all authenticated users (user & admin) to access main pages: - /kinerja-divisi, /pengaduan, /jenna, /demografi - /keuangan, /bumdes, /sosial, /keamanan - /bantuan, /pengaturan - Reserve admin-only access for /admin/* routes - Update auth middleware to handle public routes properly Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
2026-03-13 12:05:46 +08:00
46 changed files with 943 additions and 1547 deletions
--- a/QWEN.md
+++ b/QWEN.md
@@ -51,13 +51,11 @@ bun install
 ```bash
 cp .env.example .env
 # Fill in your DATABASE_URL and BETTER_AUTH_SECRET
-# Optional: Set ADMIN_EMAIL and ADMIN_PASSWORD for admin user
 ```

 ### Database Initialization
 ```bash
 bun x prisma migrate dev
-bun run seed
 ```

 ### Start Development
@@ -111,12 +109,4 @@ bun run dev
 - `test:e2e`: Runs end-to-end tests
 - `build`: Builds the application for production
 - `start`: Starts the production server
- `seed`: Seeds the database with admin and demo users
-
-## Default Users (after running `bun run seed`)
-
- **Admin**: `ADMIN_EMAIL` (from env) / `ADMIN_PASSWORD` (default: `admin123`)
- **Demo Users**: 
-  - `demo1@example.com` / `demo123` (role: user)
-  - `demo2@example.com` / `demo123` (role: user)
-  - `moderator@example.com` / `demo123` (role: moderator)
+- `seed`: Seeds the database with initial data
--- a/bun.lock
+++ b/bun.lock
@@ -47,7 +47,6 @@
        "@tabler/icons-react": "^3.36.1",
        "@tailwindcss/vite": "^4.1.18",
        "@tanstack/react-router": "^1.158.1",
-        "bcryptjs": "^3.0.3",
        "better-auth": "^1.4.18",
        "class-variance-authority": "^0.7.1",
        "cmdk": "^1.0.1",
@@ -81,7 +80,6 @@
        "@tanstack/react-router-devtools": "^1.158.1",
        "@tanstack/router-cli": "1.158.1",
        "@tanstack/router-vite-plugin": "^1.158.1",
-        "@types/bcryptjs": "^3.0.0",
        "@types/bun": "latest",
        "@types/react": "^19",
        "@types/react-dom": "^19",
@@ -630,8 +628,6 @@

    "@types/babel__traverse": ["@types/babel__traverse@7.28.0", "", { "dependencies": { "@babel/types": "^7.28.2" } }, "sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q=="],

-    "@types/bcryptjs": ["@types/bcryptjs@3.0.0", "", { "dependencies": { "bcryptjs": "*" } }, "sha512-WRZOuCuaz8UcZZE4R5HXTco2goQSI2XxjGY3hbM/xDvwmqFWd4ivooImsMx65OKM6CtNKbnZ5YL+YwAwK7c1dg=="],
-
    "@types/bun": ["@types/bun@1.3.8", "", { "dependencies": { "bun-types": "1.3.8" } }, "sha512-3LvWJ2q5GerAXYxO2mffLTqOzEu5qnhEAlh48Vnu8WQfnmSwbgagjGZV6BoHKJztENYEDn6QmVd949W4uESRJA=="],

    "@types/chai": ["@types/chai@5.2.3", "", { "dependencies": { "@types/deep-eql": "*", "assertion-error": "^2.0.1" } }, "sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA=="],
@@ -780,8 +776,6 @@

    "baseline-browser-mapping": ["baseline-browser-mapping@2.9.19", "", { "bin": { "baseline-browser-mapping": "dist/cli.js" } }, "sha512-ipDqC8FrAl/76p2SSWKSI+H9tFwm7vYqXQrItCuiVPt26Km0jS+NzSsBWAaBusvSbQcfJG+JitdMm+wZAgTYqg=="],

-    "bcryptjs": ["bcryptjs@3.0.3", "", { "bin": { "bcrypt": "bin/bcrypt" } }, "sha512-GlF5wPWnSa/X5LKM1o0wz0suXIINz1iHRLvTS+sLyi7XPbe5ycmYI3DlZqVGZZtDgl4DmasFg7gOB3JYbphV5g=="],
-
    "better-auth": ["better-auth@1.4.18", "", { "dependencies": { "@better-auth/core": "1.4.18", "@better-auth/telemetry": "1.4.18", "@better-auth/utils": "0.3.0", "@better-fetch/fetch": "1.1.21", "@noble/ciphers": "^2.0.0", "@noble/hashes": "^2.0.0", "better-call": "1.1.8", "defu": "^6.1.4", "jose": "^6.1.0", "kysely": "^0.28.5", "nanostores": "^1.0.1", "zod": "^4.3.5" }, "peerDependencies": { "@lynx-js/react": "*", "@prisma/client": "^5.0.0 || ^6.0.0 || ^7.0.0", "@sveltejs/kit": "^2.0.0", "@tanstack/react-start": "^1.0.0", "@tanstack/solid-start": "^1.0.0", "better-sqlite3": "^12.0.0", "drizzle-kit": ">=0.31.4", "drizzle-orm": ">=0.41.0", "mongodb": "^6.0.0 || ^7.0.0", "mysql2": "^3.0.0", "next": "^14.0.0 || ^15.0.0 || ^16.0.0", "pg": "^8.0.0", "prisma": "^5.0.0 || ^6.0.0 || ^7.0.0", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0", "solid-js": "^1.0.0", "svelte": "^4.0.0 || ^5.0.0", "vitest": "^2.0.0 || ^3.0.0 || ^4.0.0", "vue": "^3.0.0" }, "optionalPeers": ["@lynx-js/react", "@prisma/client", "@sveltejs/kit", "@tanstack/react-start", "@tanstack/solid-start", "better-sqlite3", "drizzle-kit", "drizzle-orm", "mongodb", "mysql2", "next", "pg", "prisma", "react", "react-dom", "solid-js", "svelte", "vitest", "vue"] }, "sha512-bnyifLWBPcYVltH3RhS7CM62MoelEqC6Q+GnZwfiDWNfepXoQZBjEvn4urcERC7NTKgKq5zNBM8rvPvRBa6xcg=="],

    "better-call": ["better-call@1.1.8", "", { "dependencies": { "@better-auth/utils": "^0.3.0", "@better-fetch/fetch": "^1.1.4", "rou3": "^0.7.10", "set-cookie-parser": "^2.7.1" }, "peerDependencies": { "zod": "^4.0.0" }, "optionalPeers": ["zod"] }, "sha512-XMQ2rs6FNXasGNfMjzbyroSwKwYbZ/T3IxruSS6U2MJRsSYh3wYtG3o6H00ZlKZ/C/UPOAD97tqgQJNsxyeTXw=="],
--- a/package.json
+++ b/package.json
@@ -59,7 +59,6 @@
 		"@tabler/icons-react": "^3.36.1",
 		"@tailwindcss/vite": "^4.1.18",
 		"@tanstack/react-router": "^1.158.1",
-		"bcryptjs": "^3.0.3",
 		"better-auth": "^1.4.18",
 		"class-variance-authority": "^0.7.1",
 		"cmdk": "^1.0.1",
@@ -93,7 +92,6 @@
 		"@tanstack/react-router-devtools": "^1.158.1",
 		"@tanstack/router-cli": "1.158.1",
 		"@tanstack/router-vite-plugin": "^1.158.1",
-		"@types/bcryptjs": "^3.0.0",
 		"@types/bun": "latest",
 		"@types/react": "^19",
 		"@types/react-dom": "^19",
--- a/prisma/seed.ts
+++ b/prisma/seed.ts
@@ -1,16 +1,13 @@
 import "dotenv/config";
-import { hash } from "bcryptjs";
-import { generateId } from "better-auth";
 import { prisma } from "@/utils/db";

 async function seedAdminUser() {
 	// Load environment variables
 	const adminEmail = process.env.ADMIN_EMAIL;
-	const adminPassword = process.env.ADMIN_PASSWORD || "admin123";

 	if (!adminEmail) {
 		console.log(
-			"No ADMIN_EMAIL environment variable found. Skipping admin user creation.",
+			"No ADMIN_EMAIL environment variable found. Skipping admin role assignment.",
 		);
 		return;
 	}
@@ -33,35 +30,9 @@ async function seedAdminUser() {
 				console.log(`User with email ${adminEmail} already has admin role.`);
 			}
 		} else {
-			// Create new admin user
-			const hashedPassword = await hash(adminPassword, 12);
-			const userId = generateId();
-
-			await prisma.user.create({
-				data: {
-					id: userId,
-					email: adminEmail,
-					name: "Admin User",
-					role: "admin",
-					emailVerified: true,
-					createdAt: new Date(),
-					updatedAt: new Date(),
-				},
-			});
-
-			await prisma.account.create({
-				data: {
-					id: generateId(),
-					userId,
-					accountId: userId,
-					providerId: "credential",
-					password: hashedPassword,
-					createdAt: new Date(),
-					updatedAt: new Date(),
-				},
-			});
-
-			console.log(`Admin user created with email: ${adminEmail}`);
+			console.log(
+				`No user found with email ${adminEmail}. Skipping admin role assignment.`,
+			);
 		}
 	} catch (error) {
 		console.error("Error seeding admin user:", error);
@@ -69,66 +40,10 @@ async function seedAdminUser() {
 	}
 }

-async function seedDemoUsers() {
-	const demoUsers = [
-		{ email: "demo1@example.com", name: "Demo User 1", role: "user" },
-		{ email: "demo2@example.com", name: "Demo User 2", role: "user" },
-		{
-			email: "moderator@example.com",
-			name: "Moderator User",
-			role: "moderator",
-		},
-	];
-
-	for (const userData of demoUsers) {
-		try {
-			const existingUser = await prisma.user.findUnique({
-				where: { email: userData.email },
-			});
-
-			if (!existingUser) {
-				const userId = generateId();
-				const hashedPassword = await hash("demo123", 12);
-
-				await prisma.user.create({
-					data: {
-						id: userId,
-						email: userData.email,
-						name: userData.name,
-						role: userData.role,
-						emailVerified: true,
-						createdAt: new Date(),
-						updatedAt: new Date(),
-					},
-				});
-
-				await prisma.account.create({
-					data: {
-						id: generateId(),
-						userId,
-						accountId: userId,
-						providerId: "credential",
-						password: hashedPassword,
-						createdAt: new Date(),
-						updatedAt: new Date(),
-					},
-				});
-
-				console.log(`Demo user created: ${userData.email}`);
-			} else {
-				console.log(`Demo user already exists: ${userData.email}`);
-			}
-		} catch (error) {
-			console.error(`Error seeding user ${userData.email}:`, error);
-		}
-	}
-}
-
 async function main() {
 	console.log("Seeding database...");

 	await seedAdminUser();
-	await seedDemoUsers();

 	console.log("Database seeding completed.");
 }
--- a/src/components/dashboard-content.tsx
+++ b/src/components/dashboard-content.tsx
@@ -66,12 +66,6 @@ const eventData = [
 	{ date: "19 Oktober 2025", title: "Rapat Koordinasi" },
 ];

-const apbdesData = [
-	{ name: "Belanja", value: 70, color: "blue" },
-	{ name: "Pendapatan", value: 90, color: "green" },
-	{ name: "Pembangunan", value: 50, color: "orange" },
-];
-
 export function DashboardContent() {
 	const { colorScheme } = useMantineColorScheme();
 	const dark = colorScheme === "dark";
@@ -486,23 +480,42 @@ export function DashboardContent() {
 					Grafik APBDes
 				</Title>
 				<Stack gap="xs">
-					{apbdesData.map((data, index) => (
-						<Grid key={index} align="center">
-							<Grid.Col span={3}>
-								<Text size="sm" fw={500}>
-									{data.name}
-								</Text>
-							</Grid.Col>
-							<Grid.Col span={9}>
-								<Progress
-									value={data.value}
-									size="lg"
-									radius="xl"
-									color={data.color}
-								/>
-							</Grid.Col>
-						</Grid>
-					))}
+					<Group align="center" gap="md">
+						<Text size="sm" fw={500} w={60}>
+							Belanja
+						</Text>
+						<Progress
+							value={70}
+							size="lg"
+							radius="xl"
+							color="blue"
+							style={{ flex: 1 }}
+						/>
+					</Group>
+					<Group align="center" gap="md">
+						<Text size="sm" fw={500} w={60}>
+							Pendapatan
+						</Text>
+						<Progress
+							value={90}
+							size="lg"
+							radius="xl"
+							color="green"
+							style={{ flex: 1 }}
+						/>
+					</Group>
+					<Group align="center" gap="md">
+						<Text size="sm" fw={500} w={60}>
+							Pembangunan
+						</Text>
+						<Progress
+							value={50}
+							size="lg"
+							radius="xl"
+							color="orange"
+							style={{ flex: 1 }}
+						/>
+					</Group>
 				</Stack>
 			</Card>
 		</Stack>
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -1,72 +1,121 @@
 import {
 	ActionIcon,
+	Avatar,
 	Badge,
 	Box,
+	Divider,
 	Group,
 	Text,
+	Title,
 	useMantineColorScheme,
 } from "@mantine/core";
-import { useLocation } from "@tanstack/react-router";
-import { Bell, Moon, Sun } from "lucide-react";
+import { IconUserShield } from "@tabler/icons-react";
+import { useLocation, useNavigate } from "@tanstack/react-router";
+import { Bell, Moon, Sun, User as UserIcon } from "lucide-react"; // Renamed User to UserIcon to avoid conflict with Mantine's User component if it exists

 export function Header() {
 	const location = useLocation();
 	const { colorScheme, toggleColorScheme } = useMantineColorScheme();
 	const dark = colorScheme === "dark";
+	const navigate = useNavigate();

-	const title =
-		location.pathname === "/"
-			? "Desa Darmasaba"
-			: "Desa Darmasaba";
+	// Define page titles based on route
+	const getPageTitle = () => {
+		switch (location.pathname) {
+			case "/":
+				return "Beranda";
+			case "/kinerja-divisi":
+				return "Kinerja Divisi";
+			case "/pengaduan-layanan-publik":
+				return "Pengaduan & Layanan Publik";
+			case "/jenna-analytic":
+				return "Jenna Analytic";
+			case "/demografi-pekerjaan":
+				return "Demografi & Kependudukan";
+			case "/keuangan-anggaran":
+				return "Keuangan & Anggaran";
+			case "/bumdes":
+				return "Bumdes & UMKM Desa";
+			case "/sosial":
+				return "Sosial";
+			case "/keamanan":
+				return "Keamanan";
+			case "/bantuan":
+				return "Bantuan";
+			case "/pengaturan":
+			case "/pengaturan/umum":
+			case "/pengaturan/notifikasi":
+			case "/pengaturan/keamanan":
+			case "/pengaturan/akses-dan-tim":
+				return "Pengaturan";
+			default:
+				return "Desa Darmasaba";
+		}
+	};

 	return (
-		<Box
-			style={{
-				display: "grid",
-				gridTemplateColumns: "1fr auto 1fr",
-				alignItems: "center",
-				width: "100%",
-			}}
-		>
-			{/* LEFT SPACER (burger sudah di luar) */}
-			<Box />
+		<Group justify="space-between" w="100%">
+			{/* Title */}
+			<Title order={3} c={"white"}>
+				{getPageTitle()}
+			</Title>

-			{/* CENTER TITLE */}
-			<Text
-				c="white"
-				fw={600}
-				size="md"
-				style={{
-					textAlign: "center",
-					whiteSpace: "nowrap",
-					overflow: "hidden",
-					textOverflow: "ellipsis",
-				}}
-			>
-				{title}
-			</Text>
+			{/* Right Section */}
+			<Group gap="md">
+				{/* User Info */}
+				<Group gap="sm">
+					<Box ta="right">
+						<Text c={"white"} size="sm" fw={500}>
+							I. B. Surya Prabhawa M...
+						</Text>
+						<Text c={"white"} size="xs">
+							Kepala Desa
+						</Text>
+					</Box>
+					<Avatar color="blue" radius="xl">
+						<UserIcon color="white" style={{ width: "70%", height: "70%" }} />
+					</Avatar>
+				</Group>

-			{/* RIGHT ICONS */}
-			<Group gap="xs" justify="flex-end">
-				<ActionIcon
-					onClick={toggleColorScheme}
-					variant="subtle"
-					radius="xl"
-				>
-					{dark ? <Sun size={18} /> : <Moon size={18} />}
-				</ActionIcon>
+				{/* Divider */}
+				<Divider orientation="vertical" h={30} />

-				<ActionIcon variant="subtle" radius="xl" pos="relative">
-					<Bell size={18} />
-					<Badge
-						size="xs"
-						color="red"
-						style={{ position: "absolute", top: -4, right: -4 }}
+				{/* Icons */}
+				<Group gap="sm">
+					<ActionIcon
+						onClick={() => toggleColorScheme()}
+						variant="subtle"
+						size="lg"
+						radius="xl"
+						aria-label="Toggle color scheme"
 					>
-						10
-					</Badge>
-				</ActionIcon>
+						{dark ? (
+							<Sun color="white" style={{ width: "70%", height: "70%" }} />
+						) : (
+							<Moon color="white" style={{ width: "70%", height: "70%" }} />
+						)}
+					</ActionIcon>
+					<ActionIcon variant="subtle" size="lg" radius="xl" pos="relative">
+						<Bell color="white" style={{ width: "70%", height: "70%" }} />
+						<Badge
+							size="xs"
+							color="red"
+							variant="filled"
+							style={{ position: "absolute", top: 0, right: 0 }}
+							radius={"xl"}
+						>
+							10
+						</Badge>
+					</ActionIcon>
+					<ActionIcon variant="subtle" size="lg" radius="xl">
+						<IconUserShield
+							color="white"
+							style={{ width: "70%", height: "70%" }}
+							onClick={() => navigate({ to: "/signin" })}
+						/>
+					</ActionIcon>
+				</Group>
 			</Group>
-		</Box>
+		</Group>
 	);
 }
--- a/src/components/help-page.tsx
+++ b/src/components/help-page.tsx
@@ -143,6 +143,13 @@ const HelpPage = () => {

 	return (
 		<Container size="lg" py="xl">
+			<Title order={1} mb="xl" ta="center">
+				Pusat Bantuan
+			</Title>
+			<Text size="lg" color="dimmed" ta="center" mb="xl">
+				Temukan jawaban untuk pertanyaan Anda atau hubungi tim support kami
+			</Text>
+
 			{/* Statistics Section */}
 			<SimpleGrid cols={3} spacing="lg" mb="xl">
 				{stats.map((stat, index) => (
--- a/src/components/kinerja-divisi.tsx
+++ b/src/components/kinerja-divisi.tsx
@@ -122,10 +122,10 @@ const KinerjaDivisi = () => {

 	// Activity progress statistics
 	const activityProgressStats = [
-		{ name: "Selesai", value: 12, fill: "#10B981" },
-		{ name: "Dikerjakan", value: 8, fill: "#F59E0B" },
-		{ name: "Segera Dikerjakan", value: 5, fill: "#EF4444" },
-		{ name: "Dibatalkan", value: 2, fill: "#6B7280" },
+		{ name: "Selesai", value: 12 },
+		{ name: "Dikerjakan", value: 8 },
+		{ name: "Segera Dikerjakan", value: 5 },
+		{ name: "Dibatalkan", value: 2 },
 	];

 	const COLORS = ["#10B981", "#F59E0B", "#EF4444", "#6B7280"];
@@ -204,9 +204,9 @@ const KinerjaDivisi = () => {
 							contentStyle={
 								dark
 									? {
-										backgroundColor: "var(--mantine-color-dark-7)",
-										borderColor: "var(--mantine-color-dark-6)",
-									}
+											backgroundColor: "var(--mantine-color-dark-7)",
+											borderColor: "var(--mantine-color-dark-6)",
+										}
 									: {}
 							}
 						/>
@@ -402,9 +402,9 @@ const KinerjaDivisi = () => {
 									contentStyle={
 										dark
 											? {
-												backgroundColor: "var(--mantine-color-dark-7)",
-												borderColor: "var(--mantine-color-dark-6)",
-											}
+													backgroundColor: "var(--mantine-color-dark-7)",
+													borderColor: "var(--mantine-color-dark-6)",
+												}
 											: {}
 									}
 								/>
@@ -434,27 +434,33 @@ const KinerjaDivisi = () => {
 							Progres Kegiatan
 						</Title>
 						<ResponsiveContainer width="100%" height={200}>
-							<PieChart
-								margin={{ top: 20, right: 80, bottom: 20, left: 80 }}
-							>
+							<PieChart>
 								<Pie
 									data={activityProgressStats}
 									cx="50%"
 									cy="50%"
-									labelLine
-									outerRadius={65}
+									labelLine={false}
+									outerRadius={80}
+									fill="#8884d8"
 									dataKey="value"
 									label={({ name, percent }) =>
 										`${name}: ${percent ? (percent * 100).toFixed(0) : "0"}%`
 									}
-								/>
+								>
+									{activityProgressStats.map((entry, index) => (
+										<Cell
+											key={`cell-${index}`}
+											fill={COLORS[index % COLORS.length]}
+										/>
+									))}
+								</Pie>
 								<Tooltip
 									contentStyle={
 										dark
 											? {
-												backgroundColor: "var(--mantine-color-dark-7)",
-												borderColor: "var(--mantine-color-dark-6)",
-											}
+													backgroundColor: "var(--mantine-color-dark-7)",
+													borderColor: "var(--mantine-color-dark-6)",
+												}
 											: {}
 									}
 								/>
--- a/src/components/sidebar.tsx
+++ b/src/components/sidebar.tsx
@@ -27,35 +27,29 @@ export function Sidebar({ className }: SidebarProps) {

 	// State for settings submenu collapse
 	const [settingsOpen, setSettingsOpen] = useState(
-		location.pathname.startsWith("/dashboard/pengaturan"),
+		location.pathname.startsWith("/pengaturan"),
 	);

 	// Define menu items with their paths
 	const menuItems = [
-		{ name: "Beranda", path: "/dashboard" },
-		{ name: "Kinerja Divisi", path: "/dashboard/kinerja-divisi" },
-		{
-			name: "Pengaduan & Layanan Publik",
-			path: "/dashboard/pengaduan-layanan-publik",
-		},
-		{ name: "Jenna Analytic", path: "/dashboard/jenna-analytic" },
-		{
-			name: "Demografi & Kependudukan",
-			path: "/dashboard/demografi-pekerjaan",
-		},
-		{ name: "Keuangan & Anggaran", path: "/dashboard/keuangan-anggaran" },
-		{ name: "Bumdes & UMKM Desa", path: "/dashboard/bumdes" },
-		{ name: "Sosial", path: "/dashboard/sosial" },
-		{ name: "Keamanan", path: "/dashboard/keamanan" },
-		{ name: "Bantuan", path: "/dashboard/bantuan" },
+		{ name: "Beranda", path: "/" },
+		{ name: "Kinerja Divisi", path: "/kinerja-divisi" },
+		{ name: "Pengaduan & Layanan Publik", path: "/pengaduan-layanan-publik" },
+		{ name: "Jenna Analytic", path: "/jenna-analytic" },
+		{ name: "Demografi & Kependudukan", path: "/demografi-pekerjaan" },
+		{ name: "Keuangan & Anggaran", path: "/keuangan-anggaran" },
+		{ name: "Bumdes & UMKM Desa", path: "/bumdes" },
+		{ name: "Sosial", path: "/sosial" },
+		{ name: "Keamanan", path: "/keamanan" },
+		{ name: "Bantuan", path: "/bantuan" },
 	];

 	// Settings submenu items
 	const settingsItems = [
-		{ name: "Umum", path: "/dashboard/pengaturan/umum" },
-		{ name: "Notifikasi", path: "/dashboard/pengaturan/notifikasi" },
-		{ name: "Keamanan", path: "/dashboard/pengaturan/keamanan" },
-		{ name: "Akses & Tim", path: "/dashboard/pengaturan/akses-dan-tim" },
+		{ name: "Umum", path: "/pengaturan/umum" },
+		{ name: "Notifikasi", path: "/pengaturan/notifikasi" },
+		{ name: "Keamanan", path: "/pengaturan/keamanan" },
+		{ name: "Akses & Tim", path: "/pengaturan/akses-dan-tim" },
 	];

 	// Check if any settings submenu is active
--- a/src/index.ts
+++ b/src/index.ts
@@ -6,8 +6,6 @@ import { Elysia } from "elysia";
 import api from "./api";
 import { openInEditor } from "./utils/open-in-editor";

-const PORT = process.env.PORT || 3000;
-
 const isProduction = process.env.NODE_ENV === "production";

 const app = new Elysia().use(api);
@@ -200,11 +198,10 @@ if (!isProduction) {
 	});
 }

-app.listen(PORT);
+app.listen(3000);

 console.log(
-	`🚀 Server running at http://localhost:${PORT} in ${isProduction ? "production" : "development"} mode`,
+	`🚀 Server running at http://localhost:3000 in ${isProduction ? "production" : "development"} mode`,
 );

 export type ApiApp = typeof app;
-
--- a/src/middleware/authMiddleware.tsx
+++ b/src/middleware/authMiddleware.tsx
@@ -60,16 +60,39 @@ 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 === "/dashboard" || p.startsWith("/dashboard/"),
+		match: (p) =>
+			p.startsWith("/kinerja-divisi") ||
+			p.startsWith("/pengaduan") ||
+			p.startsWith("/jenna") ||
+			p.startsWith("/demografi") ||
+			p.startsWith("/keuangan") ||
+			p.startsWith("/bumdes") ||
+			p.startsWith("/sosial") ||
+			p.startsWith("/keamanan") ||
+			p.startsWith("/bantuan") ||
+			p.startsWith("/pengaturan"),
+		requireAuth: true,
+		redirectTo: "/signin",
+	},
+	// Admin routes - auth required with admin role only
+	{
+		match: (p) => p.startsWith("/admin"),
 		requireAuth: true,
 		requiredRole: "admin",
-		redirectTo: "/profile",
+		redirectTo: "/signin",
 	},
 ];

@@ -98,15 +121,22 @@ export function createProtectedRoute(options: ProtectedRouteOptions = {}) {
 		location: { pathname: string; href: string };
 	}) => {
 		const rule = findRouteRule(location.pathname);
+
+		// If no rule matches, allow access by default
 		if (!rule) return;

+		// If route explicitly doesn't require auth, allow access
+		if (rule.requireAuth === false) return;
+
 		const session = await fetchSession();
 		const user = session?.user;

+		// If auth is required but user is not logged in, redirect to login
 		if (rule.requireAuth && !user) {
 			redirectToLogin(rule.redirectTo ?? redirectTo, location.href);
 		}

+		// If specific role is required, check it
 		if (rule.requiredRole && user?.role !== rule.requiredRole) {
 			redirectToLogin(rule.redirectTo ?? redirectTo, location.href);
 		}
--- a/src/routeTree.gen.ts
+++ b/src/routeTree.gen.ts
@@ -9,35 +9,38 @@
 // Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.

 import { Route as rootRouteImport } from './routes/__root'
+import { Route as SosialRouteImport } from './routes/sosial'
 import { Route as SignupRouteImport } from './routes/signup'
 import { Route as SigninRouteImport } from './routes/signin'
-import { Route as DashboardRouteRouteImport } from './routes/dashboard/route'
+import { Route as PengaduanLayananPublikRouteImport } from './routes/pengaduan-layanan-publik'
+import { Route as KinerjaDivisiRouteImport } from './routes/kinerja-divisi'
+import { Route as KeuanganAnggaranRouteImport } from './routes/keuangan-anggaran'
+import { Route as KeamananRouteImport } from './routes/keamanan'
+import { Route as JennaAnalyticRouteImport } from './routes/jenna-analytic'
+import { Route as DemografiPekerjaanRouteImport } from './routes/demografi-pekerjaan'
+import { Route as BumdesRouteImport } from './routes/bumdes'
+import { Route as BantuanRouteImport } from './routes/bantuan'
+import { Route as PengaturanRouteRouteImport } from './routes/pengaturan/route'
 import { Route as AdminRouteRouteImport } from './routes/admin/route'
 import { Route as IndexRouteImport } from './routes/index'
 import { Route as UsersIndexRouteImport } from './routes/users/index'
 import { Route as ProfileIndexRouteImport } from './routes/profile/index'
-import { Route as DashboardIndexRouteImport } from './routes/dashboard/index'
 import { Route as AdminIndexRouteImport } from './routes/admin/index'
 import { Route as UsersIdRouteImport } from './routes/users/$id'
 import { Route as ProfileEditRouteImport } from './routes/profile/edit'
-import { Route as DashboardSosialRouteImport } from './routes/dashboard/sosial'
-import { Route as DashboardPengaduanLayananPublikRouteImport } from './routes/dashboard/pengaduan-layanan-publik'
-import { Route as DashboardKinerjaDivisiRouteImport } from './routes/dashboard/kinerja-divisi'
-import { Route as DashboardKeuanganAnggaranRouteImport } from './routes/dashboard/keuangan-anggaran'
-import { Route as DashboardKeamananRouteImport } from './routes/dashboard/keamanan'
-import { Route as DashboardJennaAnalyticRouteImport } from './routes/dashboard/jenna-analytic'
-import { Route as DashboardDemografiPekerjaanRouteImport } from './routes/dashboard/demografi-pekerjaan'
-import { Route as DashboardBumdesRouteImport } from './routes/dashboard/bumdes'
-import { Route as DashboardBantuanRouteImport } from './routes/dashboard/bantuan'
+import { Route as PengaturanUmumRouteImport } from './routes/pengaturan/umum'
+import { Route as PengaturanNotifikasiRouteImport } from './routes/pengaturan/notifikasi'
+import { Route as PengaturanKeamananRouteImport } from './routes/pengaturan/keamanan'
+import { Route as PengaturanAksesDanTimRouteImport } from './routes/pengaturan/akses-dan-tim'
 import { Route as AdminUsersRouteImport } from './routes/admin/users'
 import { Route as AdminSettingsRouteImport } from './routes/admin/settings'
 import { Route as AdminApikeyRouteImport } from './routes/admin/apikey'
-import { Route as DashboardPengaturanRouteRouteImport } from './routes/dashboard/pengaturan/route'
-import { Route as DashboardPengaturanUmumRouteImport } from './routes/dashboard/pengaturan/umum'
-import { Route as DashboardPengaturanNotifikasiRouteImport } from './routes/dashboard/pengaturan/notifikasi'
-import { Route as DashboardPengaturanKeamananRouteImport } from './routes/dashboard/pengaturan/keamanan'
-import { Route as DashboardPengaturanAksesDanTimRouteImport } from './routes/dashboard/pengaturan/akses-dan-tim'

+const SosialRoute = SosialRouteImport.update({
+  id: '/sosial',
+  path: '/sosial',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const SignupRoute = SignupRouteImport.update({
  id: '/signup',
  path: '/signup',
@@ -48,9 +51,49 @@ const SigninRoute = SigninRouteImport.update({
  path: '/signin',
  getParentRoute: () => rootRouteImport,
 } as any)
-const DashboardRouteRoute = DashboardRouteRouteImport.update({
-  id: '/dashboard',
-  path: '/dashboard',
+const PengaduanLayananPublikRoute = PengaduanLayananPublikRouteImport.update({
+  id: '/pengaduan-layanan-publik',
+  path: '/pengaduan-layanan-publik',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const KinerjaDivisiRoute = KinerjaDivisiRouteImport.update({
+  id: '/kinerja-divisi',
+  path: '/kinerja-divisi',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const KeuanganAnggaranRoute = KeuanganAnggaranRouteImport.update({
+  id: '/keuangan-anggaran',
+  path: '/keuangan-anggaran',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const KeamananRoute = KeamananRouteImport.update({
+  id: '/keamanan',
+  path: '/keamanan',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const JennaAnalyticRoute = JennaAnalyticRouteImport.update({
+  id: '/jenna-analytic',
+  path: '/jenna-analytic',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const DemografiPekerjaanRoute = DemografiPekerjaanRouteImport.update({
+  id: '/demografi-pekerjaan',
+  path: '/demografi-pekerjaan',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const BumdesRoute = BumdesRouteImport.update({
+  id: '/bumdes',
+  path: '/bumdes',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const BantuanRoute = BantuanRouteImport.update({
+  id: '/bantuan',
+  path: '/bantuan',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const PengaturanRouteRoute = PengaturanRouteRouteImport.update({
+  id: '/pengaturan',
+  path: '/pengaturan',
  getParentRoute: () => rootRouteImport,
 } as any)
 const AdminRouteRoute = AdminRouteRouteImport.update({
@@ -73,11 +116,6 @@ const ProfileIndexRoute = ProfileIndexRouteImport.update({
  path: '/profile/',
  getParentRoute: () => rootRouteImport,
 } as any)
-const DashboardIndexRoute = DashboardIndexRouteImport.update({
-  id: '/',
-  path: '/',
-  getParentRoute: () => DashboardRouteRoute,
-} as any)
 const AdminIndexRoute = AdminIndexRouteImport.update({
  id: '/',
  path: '/',
@@ -93,53 +131,25 @@ const ProfileEditRoute = ProfileEditRouteImport.update({
  path: '/profile/edit',
  getParentRoute: () => rootRouteImport,
 } as any)
-const DashboardSosialRoute = DashboardSosialRouteImport.update({
-  id: '/sosial',
-  path: '/sosial',
-  getParentRoute: () => DashboardRouteRoute,
+const PengaturanUmumRoute = PengaturanUmumRouteImport.update({
+  id: '/umum',
+  path: '/umum',
+  getParentRoute: () => PengaturanRouteRoute,
 } as any)
-const DashboardPengaduanLayananPublikRoute =
-  DashboardPengaduanLayananPublikRouteImport.update({
-    id: '/pengaduan-layanan-publik',
-    path: '/pengaduan-layanan-publik',
-    getParentRoute: () => DashboardRouteRoute,
-  } as any)
-const DashboardKinerjaDivisiRoute = DashboardKinerjaDivisiRouteImport.update({
-  id: '/kinerja-divisi',
-  path: '/kinerja-divisi',
-  getParentRoute: () => DashboardRouteRoute,
+const PengaturanNotifikasiRoute = PengaturanNotifikasiRouteImport.update({
+  id: '/notifikasi',
+  path: '/notifikasi',
+  getParentRoute: () => PengaturanRouteRoute,
 } as any)
-const DashboardKeuanganAnggaranRoute =
-  DashboardKeuanganAnggaranRouteImport.update({
-    id: '/keuangan-anggaran',
-    path: '/keuangan-anggaran',
-    getParentRoute: () => DashboardRouteRoute,
-  } as any)
-const DashboardKeamananRoute = DashboardKeamananRouteImport.update({
+const PengaturanKeamananRoute = PengaturanKeamananRouteImport.update({
  id: '/keamanan',
  path: '/keamanan',
-  getParentRoute: () => DashboardRouteRoute,
+  getParentRoute: () => PengaturanRouteRoute,
 } as any)
-const DashboardJennaAnalyticRoute = DashboardJennaAnalyticRouteImport.update({
-  id: '/jenna-analytic',
-  path: '/jenna-analytic',
-  getParentRoute: () => DashboardRouteRoute,
-} as any)
-const DashboardDemografiPekerjaanRoute =
-  DashboardDemografiPekerjaanRouteImport.update({
-    id: '/demografi-pekerjaan',
-    path: '/demografi-pekerjaan',
-    getParentRoute: () => DashboardRouteRoute,
-  } as any)
-const DashboardBumdesRoute = DashboardBumdesRouteImport.update({
-  id: '/bumdes',
-  path: '/bumdes',
-  getParentRoute: () => DashboardRouteRoute,
-} as any)
-const DashboardBantuanRoute = DashboardBantuanRouteImport.update({
-  id: '/bantuan',
-  path: '/bantuan',
-  getParentRoute: () => DashboardRouteRoute,
+const PengaturanAksesDanTimRoute = PengaturanAksesDanTimRouteImport.update({
+  id: '/akses-dan-tim',
+  path: '/akses-dan-tim',
+  getParentRoute: () => PengaturanRouteRoute,
 } as any)
 const AdminUsersRoute = AdminUsersRouteImport.update({
  id: '/users',
@@ -156,222 +166,192 @@ const AdminApikeyRoute = AdminApikeyRouteImport.update({
  path: '/apikey',
  getParentRoute: () => AdminRouteRoute,
 } as any)
-const DashboardPengaturanRouteRoute =
-  DashboardPengaturanRouteRouteImport.update({
-    id: '/pengaturan',
-    path: '/pengaturan',
-    getParentRoute: () => DashboardRouteRoute,
-  } as any)
-const DashboardPengaturanUmumRoute = DashboardPengaturanUmumRouteImport.update({
-  id: '/umum',
-  path: '/umum',
-  getParentRoute: () => DashboardPengaturanRouteRoute,
-} as any)
-const DashboardPengaturanNotifikasiRoute =
-  DashboardPengaturanNotifikasiRouteImport.update({
-    id: '/notifikasi',
-    path: '/notifikasi',
-    getParentRoute: () => DashboardPengaturanRouteRoute,
-  } as any)
-const DashboardPengaturanKeamananRoute =
-  DashboardPengaturanKeamananRouteImport.update({
-    id: '/keamanan',
-    path: '/keamanan',
-    getParentRoute: () => DashboardPengaturanRouteRoute,
-  } as any)
-const DashboardPengaturanAksesDanTimRoute =
-  DashboardPengaturanAksesDanTimRouteImport.update({
-    id: '/akses-dan-tim',
-    path: '/akses-dan-tim',
-    getParentRoute: () => DashboardPengaturanRouteRoute,
-  } as any)

 export interface FileRoutesByFullPath {
  '/': typeof IndexRoute
  '/admin': typeof AdminRouteRouteWithChildren
-  '/dashboard': typeof DashboardRouteRouteWithChildren
+  '/pengaturan': typeof PengaturanRouteRouteWithChildren
+  '/bantuan': typeof BantuanRoute
+  '/bumdes': typeof BumdesRoute
+  '/demografi-pekerjaan': typeof DemografiPekerjaanRoute
+  '/jenna-analytic': typeof JennaAnalyticRoute
+  '/keamanan': typeof KeamananRoute
+  '/keuangan-anggaran': typeof KeuanganAnggaranRoute
+  '/kinerja-divisi': typeof KinerjaDivisiRoute
+  '/pengaduan-layanan-publik': typeof PengaduanLayananPublikRoute
  '/signin': typeof SigninRoute
  '/signup': typeof SignupRoute
-  '/dashboard/pengaturan': typeof DashboardPengaturanRouteRouteWithChildren
+  '/sosial': typeof SosialRoute
  '/admin/apikey': typeof AdminApikeyRoute
  '/admin/settings': typeof AdminSettingsRoute
  '/admin/users': typeof AdminUsersRoute
-  '/dashboard/bantuan': typeof DashboardBantuanRoute
-  '/dashboard/bumdes': typeof DashboardBumdesRoute
-  '/dashboard/demografi-pekerjaan': typeof DashboardDemografiPekerjaanRoute
-  '/dashboard/jenna-analytic': typeof DashboardJennaAnalyticRoute
-  '/dashboard/keamanan': typeof DashboardKeamananRoute
-  '/dashboard/keuangan-anggaran': typeof DashboardKeuanganAnggaranRoute
-  '/dashboard/kinerja-divisi': typeof DashboardKinerjaDivisiRoute
-  '/dashboard/pengaduan-layanan-publik': typeof DashboardPengaduanLayananPublikRoute
-  '/dashboard/sosial': typeof DashboardSosialRoute
+  '/pengaturan/akses-dan-tim': typeof PengaturanAksesDanTimRoute
+  '/pengaturan/keamanan': typeof PengaturanKeamananRoute
+  '/pengaturan/notifikasi': typeof PengaturanNotifikasiRoute
+  '/pengaturan/umum': typeof PengaturanUmumRoute
  '/profile/edit': typeof ProfileEditRoute
  '/users/$id': typeof UsersIdRoute
  '/admin/': typeof AdminIndexRoute
-  '/dashboard/': typeof DashboardIndexRoute
  '/profile/': typeof ProfileIndexRoute
  '/users/': typeof UsersIndexRoute
-  '/dashboard/pengaturan/akses-dan-tim': typeof DashboardPengaturanAksesDanTimRoute
-  '/dashboard/pengaturan/keamanan': typeof DashboardPengaturanKeamananRoute
-  '/dashboard/pengaturan/notifikasi': typeof DashboardPengaturanNotifikasiRoute
-  '/dashboard/pengaturan/umum': typeof DashboardPengaturanUmumRoute
 }
 export interface FileRoutesByTo {
  '/': typeof IndexRoute
+  '/pengaturan': typeof PengaturanRouteRouteWithChildren
+  '/bantuan': typeof BantuanRoute
+  '/bumdes': typeof BumdesRoute
+  '/demografi-pekerjaan': typeof DemografiPekerjaanRoute
+  '/jenna-analytic': typeof JennaAnalyticRoute
+  '/keamanan': typeof KeamananRoute
+  '/keuangan-anggaran': typeof KeuanganAnggaranRoute
+  '/kinerja-divisi': typeof KinerjaDivisiRoute
+  '/pengaduan-layanan-publik': typeof PengaduanLayananPublikRoute
  '/signin': typeof SigninRoute
  '/signup': typeof SignupRoute
-  '/dashboard/pengaturan': typeof DashboardPengaturanRouteRouteWithChildren
+  '/sosial': typeof SosialRoute
  '/admin/apikey': typeof AdminApikeyRoute
  '/admin/settings': typeof AdminSettingsRoute
  '/admin/users': typeof AdminUsersRoute
-  '/dashboard/bantuan': typeof DashboardBantuanRoute
-  '/dashboard/bumdes': typeof DashboardBumdesRoute
-  '/dashboard/demografi-pekerjaan': typeof DashboardDemografiPekerjaanRoute
-  '/dashboard/jenna-analytic': typeof DashboardJennaAnalyticRoute
-  '/dashboard/keamanan': typeof DashboardKeamananRoute
-  '/dashboard/keuangan-anggaran': typeof DashboardKeuanganAnggaranRoute
-  '/dashboard/kinerja-divisi': typeof DashboardKinerjaDivisiRoute
-  '/dashboard/pengaduan-layanan-publik': typeof DashboardPengaduanLayananPublikRoute
-  '/dashboard/sosial': typeof DashboardSosialRoute
+  '/pengaturan/akses-dan-tim': typeof PengaturanAksesDanTimRoute
+  '/pengaturan/keamanan': typeof PengaturanKeamananRoute
+  '/pengaturan/notifikasi': typeof PengaturanNotifikasiRoute
+  '/pengaturan/umum': typeof PengaturanUmumRoute
  '/profile/edit': typeof ProfileEditRoute
  '/users/$id': typeof UsersIdRoute
  '/admin': typeof AdminIndexRoute
-  '/dashboard': typeof DashboardIndexRoute
  '/profile': typeof ProfileIndexRoute
  '/users': typeof UsersIndexRoute
-  '/dashboard/pengaturan/akses-dan-tim': typeof DashboardPengaturanAksesDanTimRoute
-  '/dashboard/pengaturan/keamanan': typeof DashboardPengaturanKeamananRoute
-  '/dashboard/pengaturan/notifikasi': typeof DashboardPengaturanNotifikasiRoute
-  '/dashboard/pengaturan/umum': typeof DashboardPengaturanUmumRoute
 }
 export interface FileRoutesById {
  __root__: typeof rootRouteImport
  '/': typeof IndexRoute
  '/admin': typeof AdminRouteRouteWithChildren
-  '/dashboard': typeof DashboardRouteRouteWithChildren
+  '/pengaturan': typeof PengaturanRouteRouteWithChildren
+  '/bantuan': typeof BantuanRoute
+  '/bumdes': typeof BumdesRoute
+  '/demografi-pekerjaan': typeof DemografiPekerjaanRoute
+  '/jenna-analytic': typeof JennaAnalyticRoute
+  '/keamanan': typeof KeamananRoute
+  '/keuangan-anggaran': typeof KeuanganAnggaranRoute
+  '/kinerja-divisi': typeof KinerjaDivisiRoute
+  '/pengaduan-layanan-publik': typeof PengaduanLayananPublikRoute
  '/signin': typeof SigninRoute
  '/signup': typeof SignupRoute
-  '/dashboard/pengaturan': typeof DashboardPengaturanRouteRouteWithChildren
+  '/sosial': typeof SosialRoute
  '/admin/apikey': typeof AdminApikeyRoute
  '/admin/settings': typeof AdminSettingsRoute
  '/admin/users': typeof AdminUsersRoute
-  '/dashboard/bantuan': typeof DashboardBantuanRoute
-  '/dashboard/bumdes': typeof DashboardBumdesRoute
-  '/dashboard/demografi-pekerjaan': typeof DashboardDemografiPekerjaanRoute
-  '/dashboard/jenna-analytic': typeof DashboardJennaAnalyticRoute
-  '/dashboard/keamanan': typeof DashboardKeamananRoute
-  '/dashboard/keuangan-anggaran': typeof DashboardKeuanganAnggaranRoute
-  '/dashboard/kinerja-divisi': typeof DashboardKinerjaDivisiRoute
-  '/dashboard/pengaduan-layanan-publik': typeof DashboardPengaduanLayananPublikRoute
-  '/dashboard/sosial': typeof DashboardSosialRoute
+  '/pengaturan/akses-dan-tim': typeof PengaturanAksesDanTimRoute
+  '/pengaturan/keamanan': typeof PengaturanKeamananRoute
+  '/pengaturan/notifikasi': typeof PengaturanNotifikasiRoute
+  '/pengaturan/umum': typeof PengaturanUmumRoute
  '/profile/edit': typeof ProfileEditRoute
  '/users/$id': typeof UsersIdRoute
  '/admin/': typeof AdminIndexRoute
-  '/dashboard/': typeof DashboardIndexRoute
  '/profile/': typeof ProfileIndexRoute
  '/users/': typeof UsersIndexRoute
-  '/dashboard/pengaturan/akses-dan-tim': typeof DashboardPengaturanAksesDanTimRoute
-  '/dashboard/pengaturan/keamanan': typeof DashboardPengaturanKeamananRoute
-  '/dashboard/pengaturan/notifikasi': typeof DashboardPengaturanNotifikasiRoute
-  '/dashboard/pengaturan/umum': typeof DashboardPengaturanUmumRoute
 }
 export interface FileRouteTypes {
  fileRoutesByFullPath: FileRoutesByFullPath
  fullPaths:
    | '/'
    | '/admin'
-    | '/dashboard'
+    | '/pengaturan'
+    | '/bantuan'
+    | '/bumdes'
+    | '/demografi-pekerjaan'
+    | '/jenna-analytic'
+    | '/keamanan'
+    | '/keuangan-anggaran'
+    | '/kinerja-divisi'
+    | '/pengaduan-layanan-publik'
    | '/signin'
    | '/signup'
-    | '/dashboard/pengaturan'
+    | '/sosial'
    | '/admin/apikey'
    | '/admin/settings'
    | '/admin/users'
-    | '/dashboard/bantuan'
-    | '/dashboard/bumdes'
-    | '/dashboard/demografi-pekerjaan'
-    | '/dashboard/jenna-analytic'
-    | '/dashboard/keamanan'
-    | '/dashboard/keuangan-anggaran'
-    | '/dashboard/kinerja-divisi'
-    | '/dashboard/pengaduan-layanan-publik'
-    | '/dashboard/sosial'
+    | '/pengaturan/akses-dan-tim'
+    | '/pengaturan/keamanan'
+    | '/pengaturan/notifikasi'
+    | '/pengaturan/umum'
    | '/profile/edit'
    | '/users/$id'
    | '/admin/'
-    | '/dashboard/'
    | '/profile/'
    | '/users/'
-    | '/dashboard/pengaturan/akses-dan-tim'
-    | '/dashboard/pengaturan/keamanan'
-    | '/dashboard/pengaturan/notifikasi'
-    | '/dashboard/pengaturan/umum'
  fileRoutesByTo: FileRoutesByTo
  to:
    | '/'
+    | '/pengaturan'
+    | '/bantuan'
+    | '/bumdes'
+    | '/demografi-pekerjaan'
+    | '/jenna-analytic'
+    | '/keamanan'
+    | '/keuangan-anggaran'
+    | '/kinerja-divisi'
+    | '/pengaduan-layanan-publik'
    | '/signin'
    | '/signup'
-    | '/dashboard/pengaturan'
+    | '/sosial'
    | '/admin/apikey'
    | '/admin/settings'
    | '/admin/users'
-    | '/dashboard/bantuan'
-    | '/dashboard/bumdes'
-    | '/dashboard/demografi-pekerjaan'
-    | '/dashboard/jenna-analytic'
-    | '/dashboard/keamanan'
-    | '/dashboard/keuangan-anggaran'
-    | '/dashboard/kinerja-divisi'
-    | '/dashboard/pengaduan-layanan-publik'
-    | '/dashboard/sosial'
+    | '/pengaturan/akses-dan-tim'
+    | '/pengaturan/keamanan'
+    | '/pengaturan/notifikasi'
+    | '/pengaturan/umum'
    | '/profile/edit'
    | '/users/$id'
    | '/admin'
-    | '/dashboard'
    | '/profile'
    | '/users'
-    | '/dashboard/pengaturan/akses-dan-tim'
-    | '/dashboard/pengaturan/keamanan'
-    | '/dashboard/pengaturan/notifikasi'
-    | '/dashboard/pengaturan/umum'
  id:
    | '__root__'
    | '/'
    | '/admin'
-    | '/dashboard'
+    | '/pengaturan'
+    | '/bantuan'
+    | '/bumdes'
+    | '/demografi-pekerjaan'
+    | '/jenna-analytic'
+    | '/keamanan'
+    | '/keuangan-anggaran'
+    | '/kinerja-divisi'
+    | '/pengaduan-layanan-publik'
    | '/signin'
    | '/signup'
-    | '/dashboard/pengaturan'
+    | '/sosial'
    | '/admin/apikey'
    | '/admin/settings'
    | '/admin/users'
-    | '/dashboard/bantuan'
-    | '/dashboard/bumdes'
-    | '/dashboard/demografi-pekerjaan'
-    | '/dashboard/jenna-analytic'
-    | '/dashboard/keamanan'
-    | '/dashboard/keuangan-anggaran'
-    | '/dashboard/kinerja-divisi'
-    | '/dashboard/pengaduan-layanan-publik'
-    | '/dashboard/sosial'
+    | '/pengaturan/akses-dan-tim'
+    | '/pengaturan/keamanan'
+    | '/pengaturan/notifikasi'
+    | '/pengaturan/umum'
    | '/profile/edit'
    | '/users/$id'
    | '/admin/'
-    | '/dashboard/'
    | '/profile/'
    | '/users/'
-    | '/dashboard/pengaturan/akses-dan-tim'
-    | '/dashboard/pengaturan/keamanan'
-    | '/dashboard/pengaturan/notifikasi'
-    | '/dashboard/pengaturan/umum'
  fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
  IndexRoute: typeof IndexRoute
  AdminRouteRoute: typeof AdminRouteRouteWithChildren
-  DashboardRouteRoute: typeof DashboardRouteRouteWithChildren
+  PengaturanRouteRoute: typeof PengaturanRouteRouteWithChildren
+  BantuanRoute: typeof BantuanRoute
+  BumdesRoute: typeof BumdesRoute
+  DemografiPekerjaanRoute: typeof DemografiPekerjaanRoute
+  JennaAnalyticRoute: typeof JennaAnalyticRoute
+  KeamananRoute: typeof KeamananRoute
+  KeuanganAnggaranRoute: typeof KeuanganAnggaranRoute
+  KinerjaDivisiRoute: typeof KinerjaDivisiRoute
+  PengaduanLayananPublikRoute: typeof PengaduanLayananPublikRoute
  SigninRoute: typeof SigninRoute
  SignupRoute: typeof SignupRoute
+  SosialRoute: typeof SosialRoute
  ProfileEditRoute: typeof ProfileEditRoute
  UsersIdRoute: typeof UsersIdRoute
  ProfileIndexRoute: typeof ProfileIndexRoute
@@ -380,6 +360,13 @@ export interface RootRouteChildren {

 declare module '@tanstack/react-router' {
  interface FileRoutesByPath {
+    '/sosial': {
+      id: '/sosial'
+      path: '/sosial'
+      fullPath: '/sosial'
+      preLoaderRoute: typeof SosialRouteImport
+      parentRoute: typeof rootRouteImport
+    }
    '/signup': {
      id: '/signup'
      path: '/signup'
@@ -394,11 +381,67 @@ declare module '@tanstack/react-router' {
      preLoaderRoute: typeof SigninRouteImport
      parentRoute: typeof rootRouteImport
    }
-    '/dashboard': {
-      id: '/dashboard'
-      path: '/dashboard'
-      fullPath: '/dashboard'
-      preLoaderRoute: typeof DashboardRouteRouteImport
+    '/pengaduan-layanan-publik': {
+      id: '/pengaduan-layanan-publik'
+      path: '/pengaduan-layanan-publik'
+      fullPath: '/pengaduan-layanan-publik'
+      preLoaderRoute: typeof PengaduanLayananPublikRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/kinerja-divisi': {
+      id: '/kinerja-divisi'
+      path: '/kinerja-divisi'
+      fullPath: '/kinerja-divisi'
+      preLoaderRoute: typeof KinerjaDivisiRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/keuangan-anggaran': {
+      id: '/keuangan-anggaran'
+      path: '/keuangan-anggaran'
+      fullPath: '/keuangan-anggaran'
+      preLoaderRoute: typeof KeuanganAnggaranRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/keamanan': {
+      id: '/keamanan'
+      path: '/keamanan'
+      fullPath: '/keamanan'
+      preLoaderRoute: typeof KeamananRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/jenna-analytic': {
+      id: '/jenna-analytic'
+      path: '/jenna-analytic'
+      fullPath: '/jenna-analytic'
+      preLoaderRoute: typeof JennaAnalyticRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/demografi-pekerjaan': {
+      id: '/demografi-pekerjaan'
+      path: '/demografi-pekerjaan'
+      fullPath: '/demografi-pekerjaan'
+      preLoaderRoute: typeof DemografiPekerjaanRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/bumdes': {
+      id: '/bumdes'
+      path: '/bumdes'
+      fullPath: '/bumdes'
+      preLoaderRoute: typeof BumdesRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/bantuan': {
+      id: '/bantuan'
+      path: '/bantuan'
+      fullPath: '/bantuan'
+      preLoaderRoute: typeof BantuanRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/pengaturan': {
+      id: '/pengaturan'
+      path: '/pengaturan'
+      fullPath: '/pengaturan'
+      preLoaderRoute: typeof PengaturanRouteRouteImport
      parentRoute: typeof rootRouteImport
    }
    '/admin': {
@@ -429,13 +472,6 @@ declare module '@tanstack/react-router' {
      preLoaderRoute: typeof ProfileIndexRouteImport
      parentRoute: typeof rootRouteImport
    }
-    '/dashboard/': {
-      id: '/dashboard/'
-      path: '/'
-      fullPath: '/dashboard/'
-      preLoaderRoute: typeof DashboardIndexRouteImport
-      parentRoute: typeof DashboardRouteRoute
-    }
    '/admin/': {
      id: '/admin/'
      path: '/'
@@ -457,68 +493,33 @@ declare module '@tanstack/react-router' {
      preLoaderRoute: typeof ProfileEditRouteImport
      parentRoute: typeof rootRouteImport
    }
-    '/dashboard/sosial': {
-      id: '/dashboard/sosial'
-      path: '/sosial'
-      fullPath: '/dashboard/sosial'
-      preLoaderRoute: typeof DashboardSosialRouteImport
-      parentRoute: typeof DashboardRouteRoute
+    '/pengaturan/umum': {
+      id: '/pengaturan/umum'
+      path: '/umum'
+      fullPath: '/pengaturan/umum'
+      preLoaderRoute: typeof PengaturanUmumRouteImport
+      parentRoute: typeof PengaturanRouteRoute
    }
-    '/dashboard/pengaduan-layanan-publik': {
-      id: '/dashboard/pengaduan-layanan-publik'
-      path: '/pengaduan-layanan-publik'
-      fullPath: '/dashboard/pengaduan-layanan-publik'
-      preLoaderRoute: typeof DashboardPengaduanLayananPublikRouteImport
-      parentRoute: typeof DashboardRouteRoute
+    '/pengaturan/notifikasi': {
+      id: '/pengaturan/notifikasi'
+      path: '/notifikasi'
+      fullPath: '/pengaturan/notifikasi'
+      preLoaderRoute: typeof PengaturanNotifikasiRouteImport
+      parentRoute: typeof PengaturanRouteRoute
    }
-    '/dashboard/kinerja-divisi': {
-      id: '/dashboard/kinerja-divisi'
-      path: '/kinerja-divisi'
-      fullPath: '/dashboard/kinerja-divisi'
-      preLoaderRoute: typeof DashboardKinerjaDivisiRouteImport
-      parentRoute: typeof DashboardRouteRoute
-    }
-    '/dashboard/keuangan-anggaran': {
-      id: '/dashboard/keuangan-anggaran'
-      path: '/keuangan-anggaran'
-      fullPath: '/dashboard/keuangan-anggaran'
-      preLoaderRoute: typeof DashboardKeuanganAnggaranRouteImport
-      parentRoute: typeof DashboardRouteRoute
-    }
-    '/dashboard/keamanan': {
-      id: '/dashboard/keamanan'
+    '/pengaturan/keamanan': {
+      id: '/pengaturan/keamanan'
      path: '/keamanan'
-      fullPath: '/dashboard/keamanan'
-      preLoaderRoute: typeof DashboardKeamananRouteImport
-      parentRoute: typeof DashboardRouteRoute
+      fullPath: '/pengaturan/keamanan'
+      preLoaderRoute: typeof PengaturanKeamananRouteImport
+      parentRoute: typeof PengaturanRouteRoute
    }
-    '/dashboard/jenna-analytic': {
-      id: '/dashboard/jenna-analytic'
-      path: '/jenna-analytic'
-      fullPath: '/dashboard/jenna-analytic'
-      preLoaderRoute: typeof DashboardJennaAnalyticRouteImport
-      parentRoute: typeof DashboardRouteRoute
-    }
-    '/dashboard/demografi-pekerjaan': {
-      id: '/dashboard/demografi-pekerjaan'
-      path: '/demografi-pekerjaan'
-      fullPath: '/dashboard/demografi-pekerjaan'
-      preLoaderRoute: typeof DashboardDemografiPekerjaanRouteImport
-      parentRoute: typeof DashboardRouteRoute
-    }
-    '/dashboard/bumdes': {
-      id: '/dashboard/bumdes'
-      path: '/bumdes'
-      fullPath: '/dashboard/bumdes'
-      preLoaderRoute: typeof DashboardBumdesRouteImport
-      parentRoute: typeof DashboardRouteRoute
-    }
-    '/dashboard/bantuan': {
-      id: '/dashboard/bantuan'
-      path: '/bantuan'
-      fullPath: '/dashboard/bantuan'
-      preLoaderRoute: typeof DashboardBantuanRouteImport
-      parentRoute: typeof DashboardRouteRoute
+    '/pengaturan/akses-dan-tim': {
+      id: '/pengaturan/akses-dan-tim'
+      path: '/akses-dan-tim'
+      fullPath: '/pengaturan/akses-dan-tim'
+      preLoaderRoute: typeof PengaturanAksesDanTimRouteImport
+      parentRoute: typeof PengaturanRouteRoute
    }
    '/admin/users': {
      id: '/admin/users'
@@ -541,41 +542,6 @@ declare module '@tanstack/react-router' {
      preLoaderRoute: typeof AdminApikeyRouteImport
      parentRoute: typeof AdminRouteRoute
    }
-    '/dashboard/pengaturan': {
-      id: '/dashboard/pengaturan'
-      path: '/pengaturan'
-      fullPath: '/dashboard/pengaturan'
-      preLoaderRoute: typeof DashboardPengaturanRouteRouteImport
-      parentRoute: typeof DashboardRouteRoute
-    }
-    '/dashboard/pengaturan/umum': {
-      id: '/dashboard/pengaturan/umum'
-      path: '/umum'
-      fullPath: '/dashboard/pengaturan/umum'
-      preLoaderRoute: typeof DashboardPengaturanUmumRouteImport
-      parentRoute: typeof DashboardPengaturanRouteRoute
-    }
-    '/dashboard/pengaturan/notifikasi': {
-      id: '/dashboard/pengaturan/notifikasi'
-      path: '/notifikasi'
-      fullPath: '/dashboard/pengaturan/notifikasi'
-      preLoaderRoute: typeof DashboardPengaturanNotifikasiRouteImport
-      parentRoute: typeof DashboardPengaturanRouteRoute
-    }
-    '/dashboard/pengaturan/keamanan': {
-      id: '/dashboard/pengaturan/keamanan'
-      path: '/keamanan'
-      fullPath: '/dashboard/pengaturan/keamanan'
-      preLoaderRoute: typeof DashboardPengaturanKeamananRouteImport
-      parentRoute: typeof DashboardPengaturanRouteRoute
-    }
-    '/dashboard/pengaturan/akses-dan-tim': {
-      id: '/dashboard/pengaturan/akses-dan-tim'
-      path: '/akses-dan-tim'
-      fullPath: '/dashboard/pengaturan/akses-dan-tim'
-      preLoaderRoute: typeof DashboardPengaturanAksesDanTimRouteImport
-      parentRoute: typeof DashboardPengaturanRouteRoute
-    }
  }
 }

@@ -597,64 +563,39 @@ const AdminRouteRouteWithChildren = AdminRouteRoute._addFileChildren(
  AdminRouteRouteChildren,
 )

-interface DashboardPengaturanRouteRouteChildren {
-  DashboardPengaturanAksesDanTimRoute: typeof DashboardPengaturanAksesDanTimRoute
-  DashboardPengaturanKeamananRoute: typeof DashboardPengaturanKeamananRoute
-  DashboardPengaturanNotifikasiRoute: typeof DashboardPengaturanNotifikasiRoute
-  DashboardPengaturanUmumRoute: typeof DashboardPengaturanUmumRoute
+interface PengaturanRouteRouteChildren {
+  PengaturanAksesDanTimRoute: typeof PengaturanAksesDanTimRoute
+  PengaturanKeamananRoute: typeof PengaturanKeamananRoute
+  PengaturanNotifikasiRoute: typeof PengaturanNotifikasiRoute
+  PengaturanUmumRoute: typeof PengaturanUmumRoute
 }

-const DashboardPengaturanRouteRouteChildren: DashboardPengaturanRouteRouteChildren =
-  {
-    DashboardPengaturanAksesDanTimRoute: DashboardPengaturanAksesDanTimRoute,
-    DashboardPengaturanKeamananRoute: DashboardPengaturanKeamananRoute,
-    DashboardPengaturanNotifikasiRoute: DashboardPengaturanNotifikasiRoute,
-    DashboardPengaturanUmumRoute: DashboardPengaturanUmumRoute,
-  }
-
-const DashboardPengaturanRouteRouteWithChildren =
-  DashboardPengaturanRouteRoute._addFileChildren(
-    DashboardPengaturanRouteRouteChildren,
-  )
-
-interface DashboardRouteRouteChildren {
-  DashboardPengaturanRouteRoute: typeof DashboardPengaturanRouteRouteWithChildren
-  DashboardBantuanRoute: typeof DashboardBantuanRoute
-  DashboardBumdesRoute: typeof DashboardBumdesRoute
-  DashboardDemografiPekerjaanRoute: typeof DashboardDemografiPekerjaanRoute
-  DashboardJennaAnalyticRoute: typeof DashboardJennaAnalyticRoute
-  DashboardKeamananRoute: typeof DashboardKeamananRoute
-  DashboardKeuanganAnggaranRoute: typeof DashboardKeuanganAnggaranRoute
-  DashboardKinerjaDivisiRoute: typeof DashboardKinerjaDivisiRoute
-  DashboardPengaduanLayananPublikRoute: typeof DashboardPengaduanLayananPublikRoute
-  DashboardSosialRoute: typeof DashboardSosialRoute
-  DashboardIndexRoute: typeof DashboardIndexRoute
+const PengaturanRouteRouteChildren: PengaturanRouteRouteChildren = {
+  PengaturanAksesDanTimRoute: PengaturanAksesDanTimRoute,
+  PengaturanKeamananRoute: PengaturanKeamananRoute,
+  PengaturanNotifikasiRoute: PengaturanNotifikasiRoute,
+  PengaturanUmumRoute: PengaturanUmumRoute,
 }

-const DashboardRouteRouteChildren: DashboardRouteRouteChildren = {
-  DashboardPengaturanRouteRoute: DashboardPengaturanRouteRouteWithChildren,
-  DashboardBantuanRoute: DashboardBantuanRoute,
-  DashboardBumdesRoute: DashboardBumdesRoute,
-  DashboardDemografiPekerjaanRoute: DashboardDemografiPekerjaanRoute,
-  DashboardJennaAnalyticRoute: DashboardJennaAnalyticRoute,
-  DashboardKeamananRoute: DashboardKeamananRoute,
-  DashboardKeuanganAnggaranRoute: DashboardKeuanganAnggaranRoute,
-  DashboardKinerjaDivisiRoute: DashboardKinerjaDivisiRoute,
-  DashboardPengaduanLayananPublikRoute: DashboardPengaduanLayananPublikRoute,
-  DashboardSosialRoute: DashboardSosialRoute,
-  DashboardIndexRoute: DashboardIndexRoute,
-}
-
-const DashboardRouteRouteWithChildren = DashboardRouteRoute._addFileChildren(
-  DashboardRouteRouteChildren,
+const PengaturanRouteRouteWithChildren = PengaturanRouteRoute._addFileChildren(
+  PengaturanRouteRouteChildren,
 )

 const rootRouteChildren: RootRouteChildren = {
  IndexRoute: IndexRoute,
  AdminRouteRoute: AdminRouteRouteWithChildren,
-  DashboardRouteRoute: DashboardRouteRouteWithChildren,
+  PengaturanRouteRoute: PengaturanRouteRouteWithChildren,
+  BantuanRoute: BantuanRoute,
+  BumdesRoute: BumdesRoute,
+  DemografiPekerjaanRoute: DemografiPekerjaanRoute,
+  JennaAnalyticRoute: JennaAnalyticRoute,
+  KeamananRoute: KeamananRoute,
+  KeuanganAnggaranRoute: KeuanganAnggaranRoute,
+  KinerjaDivisiRoute: KinerjaDivisiRoute,
+  PengaduanLayananPublikRoute: PengaduanLayananPublikRoute,
  SigninRoute: SigninRoute,
  SignupRoute: SignupRoute,
+  SosialRoute: SosialRoute,
  ProfileEditRoute: ProfileEditRoute,
  UsersIdRoute: UsersIdRoute,
  ProfileIndexRoute: ProfileIndexRoute,
--- a/src/routes/__root.tsx
+++ b/src/routes/__root.tsx
@@ -7,8 +7,20 @@ import { createRootRoute, Outlet } from "@tanstack/react-router";

 export const Route = createRootRoute({
 	component: RootComponent,
-	beforeLoad: protectedRouteMiddleware,
-	onEnter({ context }) {
+	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
+		const context = await protectedRouteMiddleware({ location });
 		authStore.user = context?.user as any;
 		authStore.session = context?.session as any;
 	},
--- a/src/routes/bantuan.tsx
+++ b/src/routes/bantuan.tsx
@@ -0,0 +1,51 @@
+import { AppShell, Burger, Group, useMantineColorScheme } from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
+import { createFileRoute } from "@tanstack/react-router";
+import { Header } from "@/components/header";
+import HelpPage from "@/components/help-page";
+import { Sidebar } from "@/components/sidebar";
+
+export const Route = createFileRoute("/bantuan")({
+	component: BantuanPage,
+});
+
+function BantuanPage() {
+	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 }}
+			navbar={{
+				width: 300,
+				breakpoint: "sm",
+				collapsed: { mobile: !opened },
+			}}
+			padding="md"
+		>
+			<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"
+				bg={navbarBgColor}
+				style={{ display: "flex", flexDirection: "column" }}
+			>
+				<div style={{ flex: 1, overflowY: "auto" }}>
+					<Sidebar />
+				</div>
+			</AppShell.Navbar>
+
+			<AppShell.Main bg={mainBgColor}>
+				<HelpPage />
+			</AppShell.Main>
+		</AppShell>
+	);
+}
--- a/src/routes/bumdes.tsx
+++ b/src/routes/bumdes.tsx
@@ -0,0 +1,9 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/bumdes")({
+	component: RouteComponent,
+});
+
+function RouteComponent() {
+	return <div>Hello "/bumdes"!</div>;
+}
--- a/src/routes/dashboard/bantuan.ts
+++ b/src/routes/dashboard/bantuan.ts
@@ -1,6 +0,0 @@
-import { createFileRoute } from "@tanstack/react-router";
-import HelpPage from "@/components/help-page";
-
-export const Route = createFileRoute("/dashboard/bantuan")({
-	component: HelpPage,
-});
--- a/src/routes/dashboard/bumdes.ts
+++ b/src/routes/dashboard/bumdes.ts
@@ -1,6 +0,0 @@
-import { createFileRoute } from "@tanstack/react-router";
-import BumdesPage from "@/components/bumdes-page";
-
-export const Route = createFileRoute("/dashboard/bumdes")({
-	component: BumdesPage,
-});
--- a/src/routes/dashboard/demografi-pekerjaan.ts
+++ b/src/routes/dashboard/demografi-pekerjaan.ts
@@ -1,6 +0,0 @@
-import { createFileRoute } from "@tanstack/react-router";
-import DemografiPekerjaan from "../../components/demografi-pekerjaan";
-
-export const Route = createFileRoute("/dashboard/demografi-pekerjaan")({
-	component: DemografiPekerjaan,
-});
--- a/src/routes/dashboard/index.ts
+++ b/src/routes/dashboard/index.ts
@@ -1,5 +0,0 @@
-import { createFileRoute } from "@tanstack/react-router";
-import { DashboardContent } from "@/components/dashboard-content";
-export const Route = createFileRoute("/dashboard/")({
-	component: DashboardContent,
-});
--- a/src/routes/dashboard/jenna-analytic.ts
+++ b/src/routes/dashboard/jenna-analytic.ts
@@ -1,6 +0,0 @@
-import { createFileRoute } from "@tanstack/react-router";
-import JennaAnalytic from "@/components/jenna-analytic";
-
-export const Route = createFileRoute("/dashboard/jenna-analytic")({
-	component: JennaAnalytic,
-});
--- a/src/routes/dashboard/keamanan.ts
+++ b/src/routes/dashboard/keamanan.ts
@@ -1,6 +0,0 @@
-import { createFileRoute } from "@tanstack/react-router";
-import KeamananPage from "@/components/keamanan-page";
-
-export const Route = createFileRoute("/dashboard/keamanan")({
-	component: KeamananPage,
-});
--- a/src/routes/dashboard/keuangan-anggaran.ts
+++ b/src/routes/dashboard/keuangan-anggaran.ts
@@ -1,6 +0,0 @@
-import { createFileRoute } from "@tanstack/react-router";
-import KeuanganAnggaran from "@/components/keuangan-anggaran";
-
-export const Route = createFileRoute("/dashboard/keuangan-anggaran")({
-	component: KeuanganAnggaran,
-});
--- a/src/routes/dashboard/kinerja-divisi.ts
+++ b/src/routes/dashboard/kinerja-divisi.ts
@@ -1,5 +0,0 @@
-import { createFileRoute } from "@tanstack/react-router";
-import KinerjaDivisi from "@/components/kinerja-divisi";
-export const Route = createFileRoute("/dashboard/kinerja-divisi")({
-	component: KinerjaDivisi,
-});
--- a/src/routes/dashboard/pengaduan-layanan-publik.ts
+++ b/src/routes/dashboard/pengaduan-layanan-publik.ts
@@ -1,5 +0,0 @@
-import { createFileRoute } from "@tanstack/react-router";
-import PengaduanLayananPublik from "@/components/pengaduan-layanan-publik";
-export const Route = createFileRoute("/dashboard/pengaduan-layanan-publik")({
-	component: PengaduanLayananPublik,
-});
--- a/src/routes/dashboard/pengaturan/akses-dan-tim.ts
+++ b/src/routes/dashboard/pengaturan/akses-dan-tim.ts
@@ -1,6 +0,0 @@
-import { createFileRoute } from "@tanstack/react-router";
-import AksesDanTimSettings from "@/components/pengaturan/akses-dan-tim";
-
-export const Route = createFileRoute("/dashboard/pengaturan/akses-dan-tim")({
-	component: AksesDanTimSettings,
-});
--- a/src/routes/dashboard/pengaturan/keamanan.ts
+++ b/src/routes/dashboard/pengaturan/keamanan.ts
@@ -1,6 +0,0 @@
-import { createFileRoute } from "@tanstack/react-router";
-import KeamananSettings from "@/components/pengaturan/keamanan";
-
-export const Route = createFileRoute("/dashboard/pengaturan/keamanan")({
-	component: KeamananSettings,
-});
--- a/src/routes/dashboard/pengaturan/notifikasi.ts
+++ b/src/routes/dashboard/pengaturan/notifikasi.ts
@@ -1,6 +0,0 @@
-import { createFileRoute } from "@tanstack/react-router";
-import NotifikasiSettings from "@/components/pengaturan/notifikasi";
-
-export const Route = createFileRoute("/dashboard/pengaturan/notifikasi")({
-	component: NotifikasiSettings,
-});
--- a/src/routes/dashboard/pengaturan/route.tsx
+++ b/src/routes/dashboard/pengaturan/route.tsx
@@ -1,9 +0,0 @@
-import { createFileRoute, Outlet } from "@tanstack/react-router";
-
-export const Route = createFileRoute("/dashboard/pengaturan")({
-	component: () => (
-		<div className="p-2">
-			<Outlet />
-		</div>
-	),
-});
--- a/src/routes/dashboard/route.tsx
+++ b/src/routes/dashboard/route.tsx
@@ -1,80 +0,0 @@
-import {
-	AppShell,
-	Burger,
-	Group,
-	useMantineColorScheme,
-	useMantineTheme,
-} from "@mantine/core";
-import { useDisclosure, useMediaQuery } from "@mantine/hooks";
-import { createFileRoute, Outlet, useRouterState } from "@tanstack/react-router";
-import { useEffect } from "react";
-import { Header } from "@/components/header";
-import { Sidebar } from "@/components/sidebar";
-
-export const Route = createFileRoute("/dashboard")({
-	component: RouteComponent,
-});
-
-function RouteComponent() {
-	const [opened, { toggle, close }] = useDisclosure();
-	const { colorScheme } = useMantineColorScheme();
-	const theme = useMantineTheme();
-	const routerState = useRouterState();
-
-	const isMobile = useMediaQuery("(max-width: 48em)");
-
-	const headerBgColor = colorScheme === "dark" ? "#11192D" : "#19355E";
-	const navbarBgColor = colorScheme === "dark" ? "#11192D" : "white";
-	const mainBgColor = colorScheme === "dark" ? "#11192D" : "#edf3f8ff";
-
-	// ✅ AUTO CLOSE NAVBAR ON ROUTE CHANGE (MOBILE ONLY)
-	useEffect(() => {
-		if (isMobile && opened) {
-			close();
-		}
-	}, [routerState.location.pathname]);
-
-	return (
-		<AppShell
-			header={{ height: 60 }}
-			navbar={{
-				width: 300,
-				breakpoint: "sm",
-				collapsed: { mobile: !opened },
-			}}
-			padding="md"
-		>
-			<AppShell.Header bg={headerBgColor}>
-				<Group
-					h="100%"
-					px="lg"
-					align="center"
-					wrap="nowrap"
-				>
-					<Burger
-						opened={opened}
-						onClick={toggle}
-						hiddenFrom="sm"
-						size="sm"
-					/>
-
-					<Header />
-				</Group>
-			</AppShell.Header>
-
-			<AppShell.Navbar
-				p="md"
-				bg={navbarBgColor}
-				style={{ display: "flex", flexDirection: "column" }}
-			>
-				<div style={{ flex: 1, overflowY: "auto" }}>
-					<Sidebar />
-				</div>
-			</AppShell.Navbar>
-
-			<AppShell.Main bg={mainBgColor}>
-				<Outlet />
-			</AppShell.Main>
-		</AppShell>
-	);
-}
--- a/src/routes/dashboard/sosial.ts
+++ b/src/routes/dashboard/sosial.ts
@@ -1,6 +0,0 @@
-import { createFileRoute } from "@tanstack/react-router";
-import SocialPage from "@/components/sosial-page";
-
-export const Route = createFileRoute("/dashboard/sosial")({
-	component: SocialPage,
-});
--- a/src/routes/demografi-pekerjaan.tsx
+++ b/src/routes/demografi-pekerjaan.tsx
@@ -0,0 +1,51 @@
+import { AppShell, Burger, Group, useMantineColorScheme } from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
+import { createFileRoute } from "@tanstack/react-router";
+import { Header } from "@/components/header";
+import { Sidebar } from "@/components/sidebar";
+import DemografiPekerjaan from "../components/demografi-pekerjaan";
+
+export const Route = createFileRoute("/demografi-pekerjaan")({
+	component: DemografiPekerjaanPage,
+});
+
+function DemografiPekerjaanPage() {
+	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 }}
+			navbar={{
+				width: 300,
+				breakpoint: "sm",
+				collapsed: { mobile: !opened },
+			}}
+			padding="md"
+		>
+			<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"
+				bg={navbarBgColor}
+				style={{ display: "flex", flexDirection: "column" }}
+			>
+				<div style={{ flex: 1, overflowY: "auto" }}>
+					<Sidebar />
+				</div>
+			</AppShell.Navbar>
+
+			<AppShell.Main bg={mainBgColor}>
+				<DemografiPekerjaan />
+			</AppShell.Main>
+		</AppShell>
+	);
+}
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -1,788 +1,51 @@
-import {
-	ActionIcon,
-	Avatar,
-	Box,
-	Button,
-	Card,
-	Container,
-	Grid,
-	Group,
-	Image,
-	Paper,
-	rem,
-	SimpleGrid,
-	Stack,
-	Text,
-	ThemeIcon,
-	Title,
-	Transition,
-	useMantineColorScheme,
-} from "@mantine/core";
-import {
-	IconApi,
-	IconBolt,
-	IconBrandGithub,
-	IconBrandLinkedin,
-	IconBrandTwitter,
-	IconChevronRight,
-	IconLock,
-	IconMoon,
-	IconRocket,
-	IconShield,
-	IconStack2,
-	IconSun,
-} from "@tabler/icons-react";
-import { createFileRoute, Link } from "@tanstack/react-router";
-import { useEffect, useState } from "react";
+import { AppShell, Burger, Group, useMantineColorScheme } from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
+import { createFileRoute } from "@tanstack/react-router";
+import { DashboardContent } from "@/components/dashboard-content";
+import { Header } from "@/components/header";
+import { Sidebar } from "@/components/sidebar";

 export const Route = createFileRoute("/")({
-	component: HomePage,
+	component: DashboardPage,
 });

-// Navigation items
-const NAV_ITEMS = [
-	{ label: "Home", link: "/" },
-	{ label: "Features", link: "#features" },
-	{ label: "Testimonials", link: "#testimonials" },
-	{ label: "Pricing", link: "/pricing" },
-	{ label: "Contact", link: "/contact" },
-];
-
-// Features data
-const FEATURES = [
-	{
-		icon: IconBolt,
-		title: "Lightning Fast",
-		description: "Built on Bun runtime for exceptional performance and speed.",
-	},
-	{
-		icon: IconShield,
-		title: "Secure by Design",
-		description:
-			"Enterprise-grade authentication with Better Auth integration.",
-	},
-	{
-		icon: IconApi,
-		title: "RESTful API",
-		description:
-			"Full-featured API with Elysia.js for seamless backend operations.",
-	},
-	{
-		icon: IconStack2,
-		title: "Modern Stack",
-		description: "React 19, TanStack Router, and Mantine UI for the best DX.",
-	},
-	{
-		icon: IconLock,
-		title: "API Key Auth",
-		description: "Secure API key management for external integrations.",
-	},
-	{
-		icon: IconRocket,
-		title: "Production Ready",
-		description: "Type-safe, tested, and optimized for production deployment.",
-	},
-];
-
-// Testimonials data
-const TESTIMONIALS = [
-	{
-		id: "testimonial-1",
-		name: "Alex Johnson",
-		role: "Lead Developer",
-		content:
-			"This template saved us weeks of setup time. The architecture is clean and well-thought-out.",
-		avatar:
-			"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=200&q=80",
-	},
-	{
-		id: "testimonial-2",
-		name: "Sarah Williams",
-		role: "CTO",
-		content:
-			"The performance improvements we saw after switching to this stack were remarkable. Highly recommended!",
-		avatar:
-			"https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=200&q=80",
-	},
-	{
-		id: "testimonial-3",
-		name: "Michael Chen",
-		role: "Product Manager",
-		content:
-			"The developer experience is top-notch. Everything is well-documented and easy to extend.",
-		avatar:
-			"https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=200&q=80",
-	},
-];
-
-function NavigationBar() {
-	const { colorScheme, toggleColorScheme } = useMantineColorScheme();
-	const [scrolled, setScrolled] = useState(false);
-
-	useEffect(() => {
-		const handleScroll = () => {
-			setScrolled(window.scrollY > 20);
-		};
-
-		window.addEventListener("scroll", handleScroll);
-		return () => window.removeEventListener("scroll", handleScroll);
-	}, []);
+function DashboardPage() {
+	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 (
-		<Box
-			h={70}
-			px="md"
-			style={{
-				borderBottom: "1px solid var(--mantine-color-gray-2)",
-				transition: "all 0.3s ease",
-				boxShadow: scrolled ? "0 2px 10px rgba(0,0,0,0.1)" : "none",
-				display: "flex",
-				alignItems: "center",
-				justifyContent: "space-between",
+		<AppShell
+			header={{ height: 60 }}
+			navbar={{
+				width: 300,
+				breakpoint: "sm",
+				collapsed: { mobile: !opened },
 			}}
+			padding="md"
 		>
-			<Group h="100%" justify="space-between">
-				<Group>
-					<Link to="/" style={{ textDecoration: "none" }}>
-						<Title order={3} c="blue">
-							BunStack
-						</Title>
-					</Link>
-					<Group ml={50} visibleFrom="sm" gap="lg">
-						{NAV_ITEMS.map((item) => {
-							const isActive = window.location.pathname === item.link;
-							return (
-								<Box
-									key={item.label}
-									component={Link}
-									to={item.link}
-									style={{
-										textDecoration: "none",
-										fontSize: rem(16),
-										padding: `${rem(8)} ${rem(12)}`,
-										borderRadius: rem(6),
-										transition: "all 0.2s ease",
-										color: isActive
-											? "var(--mantine-color-blue-6)"
-											: "var(--mantine-color-dimmed)",
-										fontWeight: 500,
-										cursor: "pointer",
-										display: "block",
-									}}
-									className="nav-item"
-								>
-									{item.label}
-								</Box>
-							);
-						})}
-					</Group>
+			<AppShell.Header bg={headerBgColor}>
+				<Group h="100%" px="md">
+					<Burger opened={opened} onClick={toggle} hiddenFrom="sm" size="sm" />
+					<Header />
 				</Group>
+			</AppShell.Header>

-				<Group>
-					<ActionIcon
-						variant="default"
-						onClick={() => toggleColorScheme()}
-						size="lg"
-					>
-						{colorScheme === "dark" ? (
-							<IconSun size={18} />
-						) : (
-							<IconMoon size={18} />
-						)}
-					</ActionIcon>
-					<Button component={Link} to="/signin" variant="light" size="sm">
-						Sign In
-					</Button>
-					<Button component={Link} to="/signup" size="sm">
-						Get Started
-					</Button>
-				</Group>
-			</Group>
-		</Box>
-	);
-}
-
-function HeroSection() {
-	const [loaded, setLoaded] = useState(false);
-	const [imageLoaded, setImageLoaded] = useState(false);
-
-	useEffect(() => {
-		setLoaded(true);
-	}, []);
-
-	// Simulate delay for image transition
-	useEffect(() => {
-		const timer = setTimeout(() => {
-			setImageLoaded(true);
-		}, 200);
-		return () => clearTimeout(timer);
-	}, []);
-
-	return (
-		<Box
-			pt={rem(140)} // Adjusted padding for simpler header
-			pb={rem(60)}
-		>
-			<Container size="lg">
-				<Grid gutter={{ base: rem(40), md: rem(80) }} align="center">
-					<Grid.Col span={{ base: 12, md: 6 }}>
-						<Transition
-							mounted={loaded}
-							transition="slide-up"
-							duration={600}
-							timingFunction="ease"
-						>
-							{(styles) => (
-								<Stack gap="xl" style={styles}>
-									<Title
-										order={1}
-										style={{
-											fontSize: rem(48),
-											fontWeight: 900,
-											lineHeight: 1.2,
-										}}
-									>
-										Build Faster with{" "}
-										<Text span c="blue" inherit>
-											Bun Stack
-										</Text>
-									</Title>
-									<Text size="xl" c="dimmed">
-										A modern, full-stack React template powered by Bun,
-										Elysia.js, and TanStack Router. Ship your ideas faster than
-										ever.
-									</Text>
-									<Group gap="md">
-										<Button
-											component={Link}
-											to="/admin"
-											size="lg"
-											variant="filled"
-											rightSection={<IconRocket size="1.25rem" />}
-										>
-											Get Started
-										</Button>
-										<Button
-											component={Link}
-											to="/docs"
-											size="lg"
-											variant="outline"
-										>
-											Learn More
-										</Button>
-									</Group>
-								</Stack>
-							)}
-						</Transition>
-					</Grid.Col>
-					<Grid.Col span={{ base: 12, md: 6 }}>
-						<Transition
-							mounted={imageLoaded}
-							transition="slide-left"
-							duration={800}
-							timingFunction="ease"
-						>
-							{(styles) => (
-								<Paper shadow="xl" radius="lg" p="md" withBorder style={styles}>
-									<Image
-										src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"
-										alt="Code editor showing Bun Stack code"
-										radius="md"
-									/>
-								</Paper>
-							)}
-						</Transition>
-					</Grid.Col>
-				</Grid>
-			</Container>
-		</Box>
-	);
-}
-
-function AnimatedFeatureCard({
-	feature,
-	index,
-	isVisible,
-}: {
-	feature: (typeof FEATURES)[number];
-	index: number;
-	isVisible: boolean;
-}) {
-	const [isDelayedVisible, setIsDelayedVisible] = useState(isVisible);
-
-	useEffect(() => {
-		if (isVisible) {
-			const timer = setTimeout(() => {
-				setIsDelayedVisible(true);
-			}, index * 100);
-			return () => clearTimeout(timer);
-		}
-	}, [isVisible, index]);
-
-	return (
-		<Transition
-			mounted={isDelayedVisible}
-			transition="slide-up"
-			duration={500}
-			timingFunction="ease"
-		>
-			{(styles) => (
-				<Card
-					className="feature-card"
-					padding="lg"
-					radius="md"
-					withBorder
-					shadow="sm"
-					style={styles}
-				>
-					<ThemeIcon variant="light" color="blue" size={60} radius="md">
-						<feature.icon size="1.75rem" />
-					</ThemeIcon>
-					<Stack gap={8} mt="md">
-						<Title order={4}>{feature.title}</Title>
-						<Text size="sm" c="dimmed" lh={1.5}>
-							{feature.description}
-						</Text>
-					</Stack>
-				</Card>
-			)}
-		</Transition>
-	);
-}
-
-function FeaturesSection() {
-	const [visibleFeatures, setVisibleFeatures] = useState(
-		Array(FEATURES.length).fill(false),
-	);
-
-	useEffect(() => {
-		const observer = new IntersectionObserver(
-			(entries) => {
-				entries.forEach((entry, index) => {
-					if (entry.isIntersecting) {
-						setVisibleFeatures((prev) => {
-							const newVisible = [...prev];
-							newVisible[index] = true;
-							return newVisible;
-						});
-					}
-				});
-			},
-			{ threshold: 0.1 },
-		);
-
-		const elements = document.querySelectorAll(".feature-card");
-		elements.forEach((el) => {
-			observer.observe(el);
-		});
-
-		return () => observer.disconnect();
-	}, []);
-
-	return (
-		<Container size="lg" py={rem(80)}>
-			<Stack gap="xl" align="center" mb={rem(50)}>
-				<Transition
-					mounted={true}
-					transition="fade"
-					duration={600}
-					timingFunction="ease"
-				>
-					{(styles) => (
-						<div style={styles}>
-							<Title order={2} ta="center">
-								Everything You Need
-							</Title>
-							<Text c="dimmed" size="lg" ta="center" maw={600}>
-								A complete toolkit for building modern web applications with
-								best practices built-in.
-							</Text>
-						</div>
-					)}
-				</Transition>
-			</Stack>
-			<SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="lg">
-				{FEATURES.map((feature, index) => (
-					<AnimatedFeatureCard
-						key={feature.title}
-						feature={feature}
-						index={index}
-						isVisible={visibleFeatures[index]}
-					/>
-				))}
-			</SimpleGrid>
-		</Container>
-	);
-}
-
-function AnimatedTestimonialCard({
-	testimonial,
-	index,
-	isVisible,
-}: {
-	testimonial: (typeof TESTIMONIALS)[number];
-	index: number;
-	isVisible: boolean;
-}) {
-	const [isDelayedVisible, setIsDelayedVisible] = useState(isVisible);
-
-	useEffect(() => {
-		if (isVisible) {
-			const timer = setTimeout(() => {
-				setIsDelayedVisible(true);
-			}, index * 150);
-			return () => clearTimeout(timer);
-		}
-	}, [isVisible, index]);
-
-	return (
-		<Transition
-			mounted={isDelayedVisible}
-			transition="slide-up"
-			duration={500}
-			timingFunction="ease"
-		>
-			{(styles) => (
-				<Card
-					padding="lg"
-					radius="md"
-					withBorder
-					shadow="sm"
-					className="testimonial-card"
-					style={styles}
-				>
-					<Text c="dimmed" mb="md">
-						"{testimonial.content}"
-					</Text>
-					<Group>
-						<Avatar src={testimonial.avatar} size="md" radius="xl" />
-						<Stack gap={0}>
-							<Text fw={600}>{testimonial.name}</Text>
-							<Text size="sm" c="dimmed">
-								{testimonial.role}
-							</Text>
-						</Stack>
-					</Group>
-				</Card>
-			)}
-		</Transition>
-	);
-}
-
-function TestimonialsSection() {
-	const [visibleTestimonials, setVisibleTestimonials] = useState(
-		Array(TESTIMONIALS.length).fill(false),
-	);
-
-	useEffect(() => {
-		const observer = new IntersectionObserver(
-			(entries) => {
-				entries.forEach((entry, index) => {
-					if (entry.isIntersecting) {
-						setVisibleTestimonials((prev) => {
-							const newVisible = [...prev];
-							newVisible[index] = true;
-							return newVisible;
-						});
-					}
-				});
-			},
-			{ threshold: 0.1 },
-		);
-
-		const elements = document.querySelectorAll(".testimonial-card");
-		elements.forEach((el) => {
-			observer.observe(el);
-		});
-
-		return () => observer.disconnect();
-	}, []);
-
-	return (
-		<Box py={rem(80)}>
-			<Container size="lg">
-				<Stack gap="xl" align="center" mb={rem(50)}>
-					<Transition
-						mounted={true}
-						transition="fade"
-						duration={600}
-						timingFunction="ease"
-					>
-						{(styles) => (
-							<div style={styles}>
-								<Title order={2} ta="center">
-									Loved by Developers
-								</Title>
-								<Text c="dimmed" size="lg" ta="center" maw={600}>
-									Join thousands of satisfied developers who have accelerated
-									their projects with Bun Stack.
-								</Text>
-							</div>
-						)}
-					</Transition>
-				</Stack>
-
-				<SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="lg">
-					{TESTIMONIALS.map((testimonial, index) => (
-						<AnimatedTestimonialCard
-							key={testimonial.id}
-							testimonial={testimonial}
-							index={index}
-							isVisible={visibleTestimonials[index]}
-						/>
-					))}
-				</SimpleGrid>
-			</Container>
-		</Box>
-	);
-}
-
-function CtaSection() {
-	const [loaded, setLoaded] = useState(false);
-
-	useEffect(() => {
-		setLoaded(true);
-	}, []);
-
-	return (
-		<Container size="lg" py={rem(80)}>
-			<Transition
-				mounted={loaded}
-				transition="slide-up"
-				duration={600}
-				timingFunction="ease"
+			<AppShell.Navbar
+				p="md"
+				bg={navbarBgColor}
+				style={{ display: "flex", flexDirection: "column" }}
 			>
-				{(styles) => (
-					<Paper
-						radius="lg"
-						p={rem(60)}
-						bg="blue"
-						style={{
-							...styles,
-							background:
-								"linear-gradient(135deg, var(--mantine-color-blue-6), var(--mantine-color-indigo-6))",
-						}}
-					>
-						<Stack align="center" gap="xl" ta="center">
-							<Title c="white" order={2}>
-								Ready to get started?
-							</Title>
-							<Text c="white" size="lg" maw={600}>
-								Join thousands of developers who are building faster and more
-								reliable applications with Bun Stack.
-							</Text>
-							<Group>
-								<Button
-									component={Link}
-									to="/signup"
-									size="lg"
-									variant="white"
-									color="dark"
-									rightSection={<IconChevronRight size="1.125rem" />}
-								>
-									Create Account
-								</Button>
-								<Button
-									component={Link}
-									to="/docs"
-									size="lg"
-									variant="outline"
-									color="white"
-								>
-									View Documentation
-								</Button>
-							</Group>
-						</Stack>
-					</Paper>
-				)}
-			</Transition>
-		</Container>
-	);
-}
-
-function Footer() {
-	const [loaded, setLoaded] = useState(false);
-
-	useEffect(() => {
-		const timer = setTimeout(() => {
-			setLoaded(true);
-		}, 300);
-		return () => clearTimeout(timer);
-	}, []);
-
-	return (
-		<Transition
-			mounted={loaded}
-			transition="slide-up"
-			duration={600}
-			timingFunction="ease"
-		>
-			{(styles) => (
-				<Box
-					py={rem(40)}
-					style={{
-						...styles,
-						borderTop: "1px solid var(--mantine-color-gray-2)",
-					}}
-				>
-					<Container size="lg">
-						<Grid gutter={{ base: rem(40), md: rem(80) }}>
-							<Grid.Col span={{ base: 12, md: 4 }}>
-								<Stack gap="md">
-									<Title order={3}>BunStack</Title>
-									<Text size="sm" c="dimmed">
-										The ultimate full-stack solution for modern web
-										applications.
-									</Text>
-									<Group>
-										<ActionIcon size="lg" variant="subtle" color="gray">
-											<IconBrandGithub size="1.25rem" />
-										</ActionIcon>
-										<ActionIcon size="lg" variant="subtle" color="gray">
-											<IconBrandTwitter size="1.25rem" />
-										</ActionIcon>
-										<ActionIcon size="lg" variant="subtle" color="gray">
-											<IconBrandLinkedin size="1.25rem" />
-										</ActionIcon>
-									</Group>
-								</Stack>
-							</Grid.Col>
-
-							<Grid.Col span={{ base: 12, md: 2 }}>
-								<Stack gap="xs">
-									<Title order={4}>Product</Title>
-									<Text
-										size="sm"
-										c="dimmed"
-										component={Link}
-										to="/features"
-										td="none"
-									>
-										Features
-									</Text>
-									<Text
-										size="sm"
-										c="dimmed"
-										component={Link}
-										to="/pricing"
-										td="none"
-									>
-										Pricing
-									</Text>
-									<Text
-										size="sm"
-										c="dimmed"
-										component={Link}
-										to="/docs"
-										td="none"
-									>
-										Documentation
-									</Text>
-								</Stack>
-							</Grid.Col>
-
-							<Grid.Col span={{ base: 12, md: 2 }}>
-								<Stack gap="xs">
-									<Title order={4}>Company</Title>
-									<Text
-										size="sm"
-										c="dimmed"
-										component={Link}
-										to="/about"
-										td="none"
-									>
-										About
-									</Text>
-									<Text
-										size="sm"
-										c="dimmed"
-										component={Link}
-										to="/blog"
-										td="none"
-									>
-										Blog
-									</Text>
-									<Text
-										size="sm"
-										c="dimmed"
-										component={Link}
-										to="/careers"
-										td="none"
-									>
-										Careers
-									</Text>
-								</Stack>
-							</Grid.Col>
-
-							<Grid.Col span={{ base: 12, md: 4 }}>
-								<Stack gap="xs">
-									<Title order={4}>Subscribe to our newsletter</Title>
-									<Text size="sm" c="dimmed">
-										Get the latest news and updates
-									</Text>
-									<Group>
-										<input
-											type="email"
-											placeholder="Your email"
-											style={{
-												padding: "8px 12px",
-												borderRadius: "4px",
-												border: "1px solid var(--mantine-color-gray-3)",
-												flex: 1,
-											}}
-										/>
-										<Button>Subscribe</Button>
-									</Group>
-								</Stack>
-							</Grid.Col>
-						</Grid>
-
-						<Box
-							pt={rem(40)}
-							style={{ borderTop: "1px solid var(--mantine-color-gray-2)" }}
-						>
-							<Group justify="space-between" align="center">
-								<Text size="sm" c="dimmed">
-									© 2024 Bun Stack. Built with Bun, Elysia, and React.
-								</Text>
-								<Group gap="lg">
-									<Text
-										component={Link}
-										to="/privacy"
-										size="sm"
-										c="dimmed"
-										style={{ textDecoration: "none" }}
-									>
-										Privacy Policy
-									</Text>
-									<Text
-										component={Link}
-										to="/terms"
-										size="sm"
-										c="dimmed"
-										style={{ textDecoration: "none" }}
-									>
-										Terms of Service
-									</Text>
-								</Group>
-							</Group>
-						</Box>
-					</Container>
-				</Box>
-			)}
-		</Transition>
-	);
-}
-
-function HomePage() {
-	return (
-		<Box>
-			<NavigationBar />
-			<HeroSection />
-			<FeaturesSection />
-			<TestimonialsSection />
-			<CtaSection />
-			<Footer />
-		</Box>
+				<div style={{ flex: 1, overflowY: "auto" }}>
+					<Sidebar />
+				</div>
+			</AppShell.Navbar>
+
+			<AppShell.Main bg={mainBgColor}>
+				<DashboardContent />
+			</AppShell.Main>
+		</AppShell>
 	);
 }
--- a/src/routes/jenna-analytic.tsx
+++ b/src/routes/jenna-analytic.tsx
@@ -0,0 +1,9 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/jenna-analytic")({
+	component: RouteComponent,
+});
+
+function RouteComponent() {
+	return <div>Hello "/jenna-analytic"!</div>;
+}
--- a/src/routes/keamanan.tsx
+++ b/src/routes/keamanan.tsx
@@ -0,0 +1,9 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/keamanan")({
+	component: RouteComponent,
+});
+
+function RouteComponent() {
+	return <div>Hello "/keamanan"!</div>;
+}
--- a/src/routes/keuangan-anggaran.tsx
+++ b/src/routes/keuangan-anggaran.tsx
@@ -0,0 +1,51 @@
+import { AppShell, Burger, Group, useMantineColorScheme } from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
+import { createFileRoute } from "@tanstack/react-router";
+import { Header } from "@/components/header";
+import KeuanganAnggaran from "@/components/keuangan-anggaran";
+import { Sidebar } from "@/components/sidebar";
+
+export const Route = createFileRoute("/keuangan-anggaran")({
+	component: KeuanganAnggaranPage,
+});
+
+function KeuanganAnggaranPage() {
+	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 }}
+			navbar={{
+				width: 300,
+				breakpoint: "sm",
+				collapsed: { mobile: !opened },
+			}}
+			padding="md"
+		>
+			<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"
+				bg={navbarBgColor}
+				style={{ display: "flex", flexDirection: "column" }}
+			>
+				<div style={{ flex: 1, overflowY: "auto" }}>
+					<Sidebar />
+				</div>
+			</AppShell.Navbar>
+
+			<AppShell.Main bg={mainBgColor}>
+				<KeuanganAnggaran />
+			</AppShell.Main>
+		</AppShell>
+	);
+}
--- a/src/routes/kinerja-divisi.tsx
+++ b/src/routes/kinerja-divisi.tsx
@@ -0,0 +1,51 @@
+import { AppShell, Burger, Group, useMantineColorScheme } from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
+import { createFileRoute } from "@tanstack/react-router";
+import { Header } from "@/components/header";
+import KinerjaDivisi from "@/components/kinerja-divisi";
+import { Sidebar } from "@/components/sidebar";
+
+export const Route = createFileRoute("/kinerja-divisi")({
+	component: KinerjaDivisiPage,
+});
+
+function KinerjaDivisiPage() {
+	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 }}
+			navbar={{
+				width: 300,
+				breakpoint: "sm",
+				collapsed: { mobile: !opened },
+			}}
+			padding="md"
+		>
+			<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"
+				bg={navbarBgColor}
+				style={{ display: "flex", flexDirection: "column" }}
+			>
+				<div style={{ flex: 1, overflowY: "auto" }}>
+					<Sidebar />
+				</div>
+			</AppShell.Navbar>
+
+			<AppShell.Main bg={mainBgColor}>
+				<KinerjaDivisi />
+			</AppShell.Main>
+		</AppShell>
+	);
+}
--- a/src/routes/pengaduan-layanan-publik.tsx
+++ b/src/routes/pengaduan-layanan-publik.tsx
@@ -0,0 +1,51 @@
+import { AppShell, Burger, Group, useMantineColorScheme } from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
+import { createFileRoute } from "@tanstack/react-router";
+import { Header } from "@/components/header";
+import PengaduanLayananPublik from "@/components/pengaduan-layanan-publik";
+import { Sidebar } from "@/components/sidebar";
+
+export const Route = createFileRoute("/pengaduan-layanan-publik")({
+	component: PengaduanLayananPublikPage,
+});
+
+function PengaduanLayananPublikPage() {
+	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 }}
+			navbar={{
+				width: 300,
+				breakpoint: "sm",
+				collapsed: { mobile: !opened },
+			}}
+			padding="md"
+		>
+			<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"
+				bg={navbarBgColor}
+				style={{ display: "flex", flexDirection: "column" }}
+			>
+				<div style={{ flex: 1, overflowY: "auto" }}>
+					<Sidebar />
+				</div>
+			</AppShell.Navbar>
+
+			<AppShell.Main bg={mainBgColor}>
+				<PengaduanLayananPublik />
+			</AppShell.Main>
+		</AppShell>
+	);
+}
--- a/src/routes/pengaturan/akses-dan-tim.tsx
+++ b/src/routes/pengaturan/akses-dan-tim.tsx
@@ -0,0 +1,9 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/pengaturan/akses-dan-tim")({
+	component: RouteComponent,
+});
+
+function RouteComponent() {
+	return <div>Hello "/pengaturan/akses-dan-tim"!</div>;
+}
--- a/src/routes/pengaturan/keamanan.tsx
+++ b/src/routes/pengaturan/keamanan.tsx
@@ -0,0 +1,9 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/pengaturan/keamanan")({
+	component: RouteComponent,
+});
+
+function RouteComponent() {
+	return <div>Hello "/pengaturan/keamanan"!</div>;
+}
--- a/src/routes/pengaturan/notifikasi.tsx
+++ b/src/routes/pengaturan/notifikasi.tsx
@@ -0,0 +1,9 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/pengaturan/notifikasi")({
+	component: RouteComponent,
+});
+
+function RouteComponent() {
+	return <div>Hello "/pengaturan/notifikasi"!</div>;
+}
--- a/src/routes/pengaturan/route.tsx
+++ b/src/routes/pengaturan/route.tsx
@@ -0,0 +1,52 @@
+import { AppShell, Burger, Group, useMantineColorScheme } from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
+import { createFileRoute, Outlet } from "@tanstack/react-router";
+import { Header } from "@/components/header";
+import { Sidebar } from "@/components/sidebar";
+
+export const Route = createFileRoute("/pengaturan")({
+	component: PengaturanLayout,
+});
+
+function PengaturanLayout() {
+	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 }}
+			navbar={{
+				width: 300,
+				breakpoint: "sm",
+				collapsed: { mobile: !opened },
+			}}
+			padding="md"
+		>
+			<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"
+				bg={navbarBgColor}
+				style={{ display: "flex", flexDirection: "column" }}
+			>
+				<div style={{ flex: 1, overflowY: "auto" }}>
+					<Sidebar />
+				</div>
+			</AppShell.Navbar>
+
+			<AppShell.Main bg={mainBgColor}>
+				<div className="p-2">
+					<Outlet />
+				</div>
+			</AppShell.Main>
+		</AppShell>
+	);
+}
--- a/src/routes/dashboard/pengaturan/umum.ts
+++ b/src/routes/dashboard/pengaturan/umum.ts
@@ -1,6 +1,6 @@
 import { createFileRoute } from "@tanstack/react-router";
 import UmumSettings from "@/components/pengaturan/umum";

-export const Route = createFileRoute("/dashboard/pengaturan/umum")({
+export const Route = createFileRoute("/pengaturan/umum")({
 	component: UmumSettings,
 });
--- a/src/routes/sosial.tsx
+++ b/src/routes/sosial.tsx
@@ -0,0 +1,9 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/sosial")({
+	component: RouteComponent,
+});
+
+function RouteComponent() {
+	return <div>Hello "/sosial"!</div>;
+}
--- a/src/utils/api-client.ts
+++ b/src/utils/api-client.ts
@@ -2,7 +2,11 @@ import createClient from "openapi-fetch";
 import type { paths } from "../../generated/api";
 import { VITE_PUBLIC_URL } from "./env";

-const baseUrl = VITE_PUBLIC_URL;
+const baseUrl =
+	VITE_PUBLIC_URL ||
+	(typeof window !== "undefined"
+		? window.location.origin
+		: "http://localhost:3000");

 export const apiClient = createClient<paths>({
 	baseUrl: baseUrl,
--- a/src/utils/auth.ts
+++ b/src/utils/auth.ts
@@ -1,11 +1,16 @@
 import { betterAuth } from "better-auth";
 import { prismaAdapter } from "better-auth/adapters/prisma";
 import { PrismaClient } from "../../generated/prisma";
-import { VITE_PUBLIC_URL } from "./env";
+import logger from "./logger";

-const baseUrl = VITE_PUBLIC_URL;
+const baseUrl = process.env.VITE_PUBLIC_URL;
 const prisma = new PrismaClient();

+if (!baseUrl) {
+	logger.error("VITE_PUBLIC_URL is not defined");
+	throw new Error("VITE_PUBLIC_URL is not defined");
+}
+
 // logger.info('Initializing Better Auth with Prisma adapter');
 export const auth = betterAuth({
 	baseURL: baseUrl,
@@ -32,24 +37,8 @@ export const auth = betterAuth({
 			},
 		},
 	},
-	databaseHooks: {
-		user: {
-			create: {
-				before: async (user) => {
-					if (user.email === process.env.ADMIN_EMAIL) {
-						return {
-							data: {
-								...user,
-								role: "admin",
-							},
-						};
-					}
-					return { data: user };
-				},
-			},
-		},
-	},
 	secret: process.env.BETTER_AUTH_SECRET,
+	trustedOrigins: ["http://localhost:5173", "http://localhost:3000"],
 	session: {
 		cookieCache: {
 			enabled: true,
@@ -59,6 +48,5 @@ export const auth = betterAuth({
 	},
 	advanced: {
 		cookiePrefix: "bun-react",
-		trustProxy: true,
 	},
 });
--- a/src/utils/env.ts
+++ b/src/utils/env.ts
@@ -20,21 +20,10 @@ export const getEnv = (key: string, defaultValue = ""): string => {
 	return defaultValue;
 };

-export const VITE_PUBLIC_URL = (() => {
-	// Priority: 
-	// 1. BETTER_AUTH_URL (standard for better-auth)
-	// 2. VITE_PUBLIC_URL (our app standard)
-	// 3. window.location.origin (browser fallback)
-	const envUrl = getEnv("BETTER_AUTH_URL") || getEnv("VITE_PUBLIC_URL");
-	if (envUrl) return envUrl;
-
-	// Fallback for browser
-	if (typeof window !== "undefined") {
-		return window.location.origin;
-	}
-
-	return "http://localhost:3000";
-})();
+export const VITE_PUBLIC_URL = getEnv(
+	"VITE_PUBLIC_URL",
+	"http://localhost:3000",
+);

 export const IS_DEV = (() => {
 	try {