Merge pull request 'nico/26-feb-26/fix-seed' (#4) from nico/26-feb-26/fix-seed into main

Reviewed-on: #4

QWEN.md

@@ -51,11 +51,13 @@ 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
@@ -109,4 +111,12 @@ 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 initial data
+- `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)

bun.lock

@@ -47,6 +47,7 @@
         "@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",
@@ -80,6 +81,7 @@
         "@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",
@@ -628,6 +630,8 @@
 
     "@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=="],
@@ -776,6 +780,8 @@
 
     "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=="],

package.json

@@ -59,6 +59,7 @@
 		"@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",
@@ -92,6 +93,7 @@
 		"@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",

prisma/seed.ts

@@ -1,13 +1,16 @@
 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 role assignment.",
+			"No ADMIN_EMAIL environment variable found. Skipping admin user creation.",
 		);
 		return;
 	}
@@ -30,9 +33,35 @@ async function seedAdminUser() {
 				console.log(`User with email ${adminEmail} already has admin role.`);
 			}
 		} else {
-			console.log(
-				`No user found with email ${adminEmail}. Skipping admin role assignment.`,
-			);
+			// 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}`);
 		}
 	} catch (error) {
 		console.error("Error seeding admin user:", error);
@@ -40,10 +69,66 @@ 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.");
 }

src/components/dashboard-content.tsx

@@ -66,6 +66,12 @@ 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";
@@ -480,42 +486,23 @@ export function DashboardContent() {
 					Grafik APBDes
 				</Title>
 				<Stack gap="xs">
-					<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>
+					{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>
+					))}
 				</Stack>
 			</Card>
 		</Stack>

src/components/header.tsx

@@ -1,121 +1,72 @@
 import {
 	ActionIcon,
-	Avatar,
 	Badge,
 	Box,
-	Divider,
 	Group,
 	Text,
-	Title,
 	useMantineColorScheme,
 } from "@mantine/core";
-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
+import { useLocation } from "@tanstack/react-router";
+import { Bell, Moon, Sun } from "lucide-react";
 
 export function Header() {
 	const location = useLocation();
 	const { colorScheme, toggleColorScheme } = useMantineColorScheme();
 	const dark = colorScheme === "dark";
-	const navigate = useNavigate();
 
-	// 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";
-		}
-	};
+	const title =
+		location.pathname === "/"
+			? "Desa Darmasaba"
+			: "Desa Darmasaba";
 
 	return (
-		<Group justify="space-between" w="100%">
-			{/* Title */}
-			<Title order={3} c={"white"}>
-				{getPageTitle()}
-			</Title>
+		<Box
+			style={{
+				display: "grid",
+				gridTemplateColumns: "1fr auto 1fr",
+				alignItems: "center",
+				width: "100%",
+			}}
+		>
+			{/* LEFT SPACER (burger sudah di luar) */}
+			<Box />
 
-			{/* 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>
+			{/* CENTER TITLE */}
+			<Text
+				c="white"
+				fw={600}
+				size="md"
+				style={{
+					textAlign: "center",
+					whiteSpace: "nowrap",
+					overflow: "hidden",
+					textOverflow: "ellipsis",
+				}}
+			>
+				{title}
+			</Text>
 
-				{/* Divider */}
-				<Divider orientation="vertical" h={30} />
+			{/* RIGHT ICONS */}
+			<Group gap="xs" justify="flex-end">
+				<ActionIcon
+					onClick={toggleColorScheme}
+					variant="subtle"
+					radius="xl"
+				>
+					{dark ? <Sun size={18} /> : <Moon size={18} />}
+				</ActionIcon>
 
-				{/* Icons */}
-				<Group gap="sm">
-					<ActionIcon
-						onClick={() => toggleColorScheme()}
-						variant="subtle"
-						size="lg"
-						radius="xl"
-						aria-label="Toggle color scheme"
+				<ActionIcon variant="subtle" radius="xl" pos="relative">
+					<Bell size={18} />
+					<Badge
+						size="xs"
+						color="red"
+						style={{ position: "absolute", top: -4, right: -4 }}
 					>
-						{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>
+						10
+					</Badge>
+				</ActionIcon>
 			</Group>
-		</Group>
+		</Box>
 	);
 }

src/components/help-page.tsx

@@ -143,13 +143,6 @@ 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) => (

src/components/kinerja-divisi.tsx

@@ -122,10 +122,10 @@ const KinerjaDivisi = () => {
 
 	// Activity progress statistics
 	const activityProgressStats = [
-		{ name: "Selesai", value: 12 },
-		{ name: "Dikerjakan", value: 8 },
-		{ name: "Segera Dikerjakan", value: 5 },
-		{ name: "Dibatalkan", value: 2 },
+		{ 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" },
 	];
 
 	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,33 +434,27 @@ const KinerjaDivisi = () => {
 							Progres Kegiatan
 						</Title>
 						<ResponsiveContainer width="100%" height={200}>
-							<PieChart>
+							<PieChart
+								margin={{ top: 20, right: 80, bottom: 20, left: 80 }}
+							>
 								<Pie
 									data={activityProgressStats}
 									cx="50%"
 									cy="50%"
-									labelLine={false}
-									outerRadius={80}
-									fill="#8884d8"
+									labelLine
+									outerRadius={65}
 									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)",
+											}
 											: {}
 									}
 								/>

src/components/sidebar.tsx

@@ -27,29 +27,35 @@ export function Sidebar({ className }: SidebarProps) {
 
 	// State for settings submenu collapse
 	const [settingsOpen, setSettingsOpen] = useState(
-		location.pathname.startsWith("/pengaturan"),
+		location.pathname.startsWith("/dashboard/pengaturan"),
 	);
 
 	// Define menu items with their paths
 	const menuItems = [
-		{ 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" },
+		{ 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" },
 	];
 
 	// Settings submenu items
 	const settingsItems = [
-		{ name: "Umum", path: "/pengaturan/umum" },
-		{ name: "Notifikasi", path: "/pengaturan/notifikasi" },
-		{ name: "Keamanan", path: "/pengaturan/keamanan" },
-		{ name: "Akses & Tim", path: "/pengaturan/akses-dan-tim" },
+		{ 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" },
 	];
 
 	// Check if any settings submenu is active

src/index.ts

@@ -6,6 +6,8 @@ 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);
@@ -198,10 +200,11 @@ if (!isProduction) {
 	});
 }
 
-app.listen(3000);
+app.listen(PORT);
 
 console.log(
-	`🚀 Server running at http://localhost:3000 in ${isProduction ? "production" : "development"} mode`,
+	`🚀 Server running at http://localhost:${PORT} in ${isProduction ? "production" : "development"} mode`,
 );
 
 export type ApiApp = typeof app;
+

src/middleware/authMiddleware.tsx

@@ -60,39 +60,16 @@ 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.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"),
+		match: (p) => p === "/dashboard" || p.startsWith("/dashboard/"),
 		requireAuth: true,
 		requiredRole: "admin",
-		redirectTo: "/signin",
+		redirectTo: "/profile",
 	},
 ];
 
@@ -121,22 +98,15 @@ 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);
 		}

src/routeTree.gen.ts

@@ -9,38 +9,35 @@
 // 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 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 DashboardRouteRouteImport } from './routes/dashboard/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 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 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 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',
@@ -51,49 +48,9 @@ const SigninRoute = SigninRouteImport.update({
   path: '/signin',
   getParentRoute: () => rootRouteImport,
 } as any)
-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',
+const DashboardRouteRoute = DashboardRouteRouteImport.update({
+  id: '/dashboard',
+  path: '/dashboard',
   getParentRoute: () => rootRouteImport,
 } as any)
 const AdminRouteRoute = AdminRouteRouteImport.update({
@@ -116,6 +73,11 @@ 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: '/',
@@ -131,25 +93,53 @@ const ProfileEditRoute = ProfileEditRouteImport.update({
   path: '/profile/edit',
   getParentRoute: () => rootRouteImport,
 } as any)
-const PengaturanUmumRoute = PengaturanUmumRouteImport.update({
-  id: '/umum',
-  path: '/umum',
-  getParentRoute: () => PengaturanRouteRoute,
+const DashboardSosialRoute = DashboardSosialRouteImport.update({
+  id: '/sosial',
+  path: '/sosial',
+  getParentRoute: () => DashboardRouteRoute,
 } as any)
-const PengaturanNotifikasiRoute = PengaturanNotifikasiRouteImport.update({
-  id: '/notifikasi',
-  path: '/notifikasi',
-  getParentRoute: () => PengaturanRouteRoute,
+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,
 } as any)
-const PengaturanKeamananRoute = PengaturanKeamananRouteImport.update({
+const DashboardKeuanganAnggaranRoute =
+  DashboardKeuanganAnggaranRouteImport.update({
+    id: '/keuangan-anggaran',
+    path: '/keuangan-anggaran',
+    getParentRoute: () => DashboardRouteRoute,
+  } as any)
+const DashboardKeamananRoute = DashboardKeamananRouteImport.update({
   id: '/keamanan',
   path: '/keamanan',
-  getParentRoute: () => PengaturanRouteRoute,
+  getParentRoute: () => DashboardRouteRoute,
 } as any)
-const PengaturanAksesDanTimRoute = PengaturanAksesDanTimRouteImport.update({
-  id: '/akses-dan-tim',
-  path: '/akses-dan-tim',
-  getParentRoute: () => PengaturanRouteRoute,
+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,
 } as any)
 const AdminUsersRoute = AdminUsersRouteImport.update({
   id: '/users',
@@ -166,192 +156,222 @@ 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
-  '/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
+  '/dashboard': typeof DashboardRouteRouteWithChildren
   '/signin': typeof SigninRoute
   '/signup': typeof SignupRoute
-  '/sosial': typeof SosialRoute
+  '/dashboard/pengaturan': typeof DashboardPengaturanRouteRouteWithChildren
   '/admin/apikey': typeof AdminApikeyRoute
   '/admin/settings': typeof AdminSettingsRoute
   '/admin/users': typeof AdminUsersRoute
-  '/pengaturan/akses-dan-tim': typeof PengaturanAksesDanTimRoute
-  '/pengaturan/keamanan': typeof PengaturanKeamananRoute
-  '/pengaturan/notifikasi': typeof PengaturanNotifikasiRoute
-  '/pengaturan/umum': typeof PengaturanUmumRoute
+  '/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
   '/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
-  '/sosial': typeof SosialRoute
+  '/dashboard/pengaturan': typeof DashboardPengaturanRouteRouteWithChildren
   '/admin/apikey': typeof AdminApikeyRoute
   '/admin/settings': typeof AdminSettingsRoute
   '/admin/users': typeof AdminUsersRoute
-  '/pengaturan/akses-dan-tim': typeof PengaturanAksesDanTimRoute
-  '/pengaturan/keamanan': typeof PengaturanKeamananRoute
-  '/pengaturan/notifikasi': typeof PengaturanNotifikasiRoute
-  '/pengaturan/umum': typeof PengaturanUmumRoute
+  '/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
   '/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
-  '/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
+  '/dashboard': typeof DashboardRouteRouteWithChildren
   '/signin': typeof SigninRoute
   '/signup': typeof SignupRoute
-  '/sosial': typeof SosialRoute
+  '/dashboard/pengaturan': typeof DashboardPengaturanRouteRouteWithChildren
   '/admin/apikey': typeof AdminApikeyRoute
   '/admin/settings': typeof AdminSettingsRoute
   '/admin/users': typeof AdminUsersRoute
-  '/pengaturan/akses-dan-tim': typeof PengaturanAksesDanTimRoute
-  '/pengaturan/keamanan': typeof PengaturanKeamananRoute
-  '/pengaturan/notifikasi': typeof PengaturanNotifikasiRoute
-  '/pengaturan/umum': typeof PengaturanUmumRoute
+  '/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
   '/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'
-    | '/pengaturan'
-    | '/bantuan'
-    | '/bumdes'
-    | '/demografi-pekerjaan'
-    | '/jenna-analytic'
-    | '/keamanan'
-    | '/keuangan-anggaran'
-    | '/kinerja-divisi'
-    | '/pengaduan-layanan-publik'
+    | '/dashboard'
     | '/signin'
     | '/signup'
-    | '/sosial'
+    | '/dashboard/pengaturan'
     | '/admin/apikey'
     | '/admin/settings'
     | '/admin/users'
-    | '/pengaturan/akses-dan-tim'
-    | '/pengaturan/keamanan'
-    | '/pengaturan/notifikasi'
-    | '/pengaturan/umum'
+    | '/dashboard/bantuan'
+    | '/dashboard/bumdes'
+    | '/dashboard/demografi-pekerjaan'
+    | '/dashboard/jenna-analytic'
+    | '/dashboard/keamanan'
+    | '/dashboard/keuangan-anggaran'
+    | '/dashboard/kinerja-divisi'
+    | '/dashboard/pengaduan-layanan-publik'
+    | '/dashboard/sosial'
     | '/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'
-    | '/sosial'
+    | '/dashboard/pengaturan'
     | '/admin/apikey'
     | '/admin/settings'
     | '/admin/users'
-    | '/pengaturan/akses-dan-tim'
-    | '/pengaturan/keamanan'
-    | '/pengaturan/notifikasi'
-    | '/pengaturan/umum'
+    | '/dashboard/bantuan'
+    | '/dashboard/bumdes'
+    | '/dashboard/demografi-pekerjaan'
+    | '/dashboard/jenna-analytic'
+    | '/dashboard/keamanan'
+    | '/dashboard/keuangan-anggaran'
+    | '/dashboard/kinerja-divisi'
+    | '/dashboard/pengaduan-layanan-publik'
+    | '/dashboard/sosial'
     | '/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'
-    | '/pengaturan'
-    | '/bantuan'
-    | '/bumdes'
-    | '/demografi-pekerjaan'
-    | '/jenna-analytic'
-    | '/keamanan'
-    | '/keuangan-anggaran'
-    | '/kinerja-divisi'
-    | '/pengaduan-layanan-publik'
+    | '/dashboard'
     | '/signin'
     | '/signup'
-    | '/sosial'
+    | '/dashboard/pengaturan'
     | '/admin/apikey'
     | '/admin/settings'
     | '/admin/users'
-    | '/pengaturan/akses-dan-tim'
-    | '/pengaturan/keamanan'
-    | '/pengaturan/notifikasi'
-    | '/pengaturan/umum'
+    | '/dashboard/bantuan'
+    | '/dashboard/bumdes'
+    | '/dashboard/demografi-pekerjaan'
+    | '/dashboard/jenna-analytic'
+    | '/dashboard/keamanan'
+    | '/dashboard/keuangan-anggaran'
+    | '/dashboard/kinerja-divisi'
+    | '/dashboard/pengaduan-layanan-publik'
+    | '/dashboard/sosial'
     | '/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
-  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
+  DashboardRouteRoute: typeof DashboardRouteRouteWithChildren
   SigninRoute: typeof SigninRoute
   SignupRoute: typeof SignupRoute
-  SosialRoute: typeof SosialRoute
   ProfileEditRoute: typeof ProfileEditRoute
   UsersIdRoute: typeof UsersIdRoute
   ProfileIndexRoute: typeof ProfileIndexRoute
@@ -360,13 +380,6 @@ 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'
@@ -381,67 +394,11 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof SigninRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/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
+    '/dashboard': {
+      id: '/dashboard'
+      path: '/dashboard'
+      fullPath: '/dashboard'
+      preLoaderRoute: typeof DashboardRouteRouteImport
       parentRoute: typeof rootRouteImport
     }
     '/admin': {
@@ -472,6 +429,13 @@ 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: '/'
@@ -493,33 +457,68 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ProfileEditRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/pengaturan/umum': {
-      id: '/pengaturan/umum'
-      path: '/umum'
-      fullPath: '/pengaturan/umum'
-      preLoaderRoute: typeof PengaturanUmumRouteImport
-      parentRoute: typeof PengaturanRouteRoute
+    '/dashboard/sosial': {
+      id: '/dashboard/sosial'
+      path: '/sosial'
+      fullPath: '/dashboard/sosial'
+      preLoaderRoute: typeof DashboardSosialRouteImport
+      parentRoute: typeof DashboardRouteRoute
     }
-    '/pengaturan/notifikasi': {
-      id: '/pengaturan/notifikasi'
-      path: '/notifikasi'
-      fullPath: '/pengaturan/notifikasi'
-      preLoaderRoute: typeof PengaturanNotifikasiRouteImport
-      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/keamanan': {
-      id: '/pengaturan/keamanan'
+    '/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'
       path: '/keamanan'
-      fullPath: '/pengaturan/keamanan'
-      preLoaderRoute: typeof PengaturanKeamananRouteImport
-      parentRoute: typeof PengaturanRouteRoute
+      fullPath: '/dashboard/keamanan'
+      preLoaderRoute: typeof DashboardKeamananRouteImport
+      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
+    '/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
     }
     '/admin/users': {
       id: '/admin/users'
@@ -542,6 +541,41 @@ 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
+    }
   }
 }
 
@@ -563,39 +597,64 @@ const AdminRouteRouteWithChildren = AdminRouteRoute._addFileChildren(
   AdminRouteRouteChildren,
 )
 
-interface PengaturanRouteRouteChildren {
-  PengaturanAksesDanTimRoute: typeof PengaturanAksesDanTimRoute
-  PengaturanKeamananRoute: typeof PengaturanKeamananRoute
-  PengaturanNotifikasiRoute: typeof PengaturanNotifikasiRoute
-  PengaturanUmumRoute: typeof PengaturanUmumRoute
+interface DashboardPengaturanRouteRouteChildren {
+  DashboardPengaturanAksesDanTimRoute: typeof DashboardPengaturanAksesDanTimRoute
+  DashboardPengaturanKeamananRoute: typeof DashboardPengaturanKeamananRoute
+  DashboardPengaturanNotifikasiRoute: typeof DashboardPengaturanNotifikasiRoute
+  DashboardPengaturanUmumRoute: typeof DashboardPengaturanUmumRoute
 }
 
-const PengaturanRouteRouteChildren: PengaturanRouteRouteChildren = {
-  PengaturanAksesDanTimRoute: PengaturanAksesDanTimRoute,
-  PengaturanKeamananRoute: PengaturanKeamananRoute,
-  PengaturanNotifikasiRoute: PengaturanNotifikasiRoute,
-  PengaturanUmumRoute: 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 PengaturanRouteRouteWithChildren = PengaturanRouteRoute._addFileChildren(
-  PengaturanRouteRouteChildren,
+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 rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
   AdminRouteRoute: AdminRouteRouteWithChildren,
-  PengaturanRouteRoute: PengaturanRouteRouteWithChildren,
-  BantuanRoute: BantuanRoute,
-  BumdesRoute: BumdesRoute,
-  DemografiPekerjaanRoute: DemografiPekerjaanRoute,
-  JennaAnalyticRoute: JennaAnalyticRoute,
-  KeamananRoute: KeamananRoute,
-  KeuanganAnggaranRoute: KeuanganAnggaranRoute,
-  KinerjaDivisiRoute: KinerjaDivisiRoute,
-  PengaduanLayananPublikRoute: PengaduanLayananPublikRoute,
+  DashboardRouteRoute: DashboardRouteRouteWithChildren,
   SigninRoute: SigninRoute,
   SignupRoute: SignupRoute,
-  SosialRoute: SosialRoute,
   ProfileEditRoute: ProfileEditRoute,
   UsersIdRoute: UsersIdRoute,
   ProfileIndexRoute: ProfileIndexRoute,

src/routes/__root.tsx

@@ -7,20 +7,8 @@ import { createRootRoute, Outlet } from "@tanstack/react-router";
 
 export const Route = createRootRoute({
 	component: RootComponent,
-	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 });
+	beforeLoad: protectedRouteMiddleware,
+	onEnter({ context }) {
 		authStore.user = context?.user as any;
 		authStore.session = context?.session as any;
 	},

src/routes/bantuan.tsx

@@ -1,51 +0,0 @@
-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>
-	);
-}

src/routes/bumdes.tsx

@@ -1,9 +0,0 @@
-import { createFileRoute } from "@tanstack/react-router";
-
-export const Route = createFileRoute("/bumdes")({
-	component: RouteComponent,
-});
-
-function RouteComponent() {
-	return <div>Hello "/bumdes"!</div>;
-}

src/routes/dashboard/bantuan.ts

@@ -0,0 +1,6 @@
+import { createFileRoute } from "@tanstack/react-router";
+import HelpPage from "@/components/help-page";
+
+export const Route = createFileRoute("/dashboard/bantuan")({
+	component: HelpPage,
+});

src/routes/dashboard/bumdes.ts

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

src/routes/dashboard/demografi-pekerjaan.ts

@@ -0,0 +1,6 @@
+import { createFileRoute } from "@tanstack/react-router";
+import DemografiPekerjaan from "../../components/demografi-pekerjaan";
+
+export const Route = createFileRoute("/dashboard/demografi-pekerjaan")({
+	component: DemografiPekerjaan,
+});

src/routes/dashboard/index.ts

@@ -0,0 +1,5 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { DashboardContent } from "@/components/dashboard-content";
+export const Route = createFileRoute("/dashboard/")({
+	component: DashboardContent,
+});

src/routes/dashboard/jenna-analytic.ts

@@ -0,0 +1,6 @@
+import { createFileRoute } from "@tanstack/react-router";
+import JennaAnalytic from "@/components/jenna-analytic";
+
+export const Route = createFileRoute("/dashboard/jenna-analytic")({
+	component: JennaAnalytic,
+});

src/routes/dashboard/keamanan.ts

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

src/routes/dashboard/keuangan-anggaran.ts

@@ -0,0 +1,6 @@
+import { createFileRoute } from "@tanstack/react-router";
+import KeuanganAnggaran from "@/components/keuangan-anggaran";
+
+export const Route = createFileRoute("/dashboard/keuangan-anggaran")({
+	component: KeuanganAnggaran,
+});

src/routes/dashboard/kinerja-divisi.ts

@@ -0,0 +1,5 @@
+import { createFileRoute } from "@tanstack/react-router";
+import KinerjaDivisi from "@/components/kinerja-divisi";
+export const Route = createFileRoute("/dashboard/kinerja-divisi")({
+	component: KinerjaDivisi,
+});

src/routes/dashboard/pengaduan-layanan-publik.ts

@@ -0,0 +1,5 @@
+import { createFileRoute } from "@tanstack/react-router";
+import PengaduanLayananPublik from "@/components/pengaduan-layanan-publik";
+export const Route = createFileRoute("/dashboard/pengaduan-layanan-publik")({
+	component: PengaduanLayananPublik,
+});

src/routes/dashboard/pengaturan/akses-dan-tim.ts

@@ -0,0 +1,6 @@
+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,
+});

src/routes/dashboard/pengaturan/keamanan.ts

@@ -0,0 +1,6 @@
+import { createFileRoute } from "@tanstack/react-router";
+import KeamananSettings from "@/components/pengaturan/keamanan";
+
+export const Route = createFileRoute("/dashboard/pengaturan/keamanan")({
+	component: KeamananSettings,
+});

src/routes/dashboard/pengaturan/notifikasi.ts

@@ -0,0 +1,6 @@
+import { createFileRoute } from "@tanstack/react-router";
+import NotifikasiSettings from "@/components/pengaturan/notifikasi";
+
+export const Route = createFileRoute("/dashboard/pengaturan/notifikasi")({
+	component: NotifikasiSettings,
+});

src/routes/dashboard/pengaturan/route.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute, Outlet } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/dashboard/pengaturan")({
+	component: () => (
+		<div className="p-2">
+			<Outlet />
+		</div>
+	),
+});

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("/pengaturan/umum")({
+export const Route = createFileRoute("/dashboard/pengaturan/umum")({
 	component: UmumSettings,
 });

src/routes/dashboard/route.tsx

@@ -0,0 +1,80 @@
+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>
+	);
+}

src/routes/dashboard/sosial.ts

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

src/routes/demografi-pekerjaan.tsx

@@ -1,51 +0,0 @@
-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>
-	);
-}

src/routes/index.tsx

@@ -1,51 +1,788 @@
-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";
+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";
 
 export const Route = createFileRoute("/")({
-	component: DashboardPage,
+	component: HomePage,
 });
 
-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";
+// 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);
+	}, []);
 
 	return (
-		<AppShell
-			header={{ height: 60 }}
-			navbar={{
-				width: 300,
-				breakpoint: "sm",
-				collapsed: { mobile: !opened },
+		<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",
 			}}
-			padding="md"
 		>
-			<AppShell.Header bg={headerBgColor}>
-				<Group h="100%" px="md">
-					<Burger opened={opened} onClick={toggle} hiddenFrom="sm" size="sm" />
-					<Header />
+			<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>
 				</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}>
-				<DashboardContent />
-			</AppShell.Main>
-		</AppShell>
+				<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"
+			>
+				{(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>
 	);
 }

src/routes/jenna-analytic.tsx

@@ -1,9 +0,0 @@
-import { createFileRoute } from "@tanstack/react-router";
-
-export const Route = createFileRoute("/jenna-analytic")({
-	component: RouteComponent,
-});
-
-function RouteComponent() {
-	return <div>Hello "/jenna-analytic"!</div>;
-}

src/routes/keamanan.tsx

@@ -1,9 +0,0 @@
-import { createFileRoute } from "@tanstack/react-router";
-
-export const Route = createFileRoute("/keamanan")({
-	component: RouteComponent,
-});
-
-function RouteComponent() {
-	return <div>Hello "/keamanan"!</div>;
-}

src/routes/keuangan-anggaran.tsx

@@ -1,51 +0,0 @@
-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>
-	);
-}

src/routes/kinerja-divisi.tsx

@@ -1,51 +0,0 @@
-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>
-	);
-}

src/routes/pengaduan-layanan-publik.tsx

@@ -1,51 +0,0 @@
-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>
-	);
-}

src/routes/pengaturan/akses-dan-tim.tsx

@@ -1,9 +0,0 @@
-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>;
-}

src/routes/pengaturan/keamanan.tsx

@@ -1,9 +0,0 @@
-import { createFileRoute } from "@tanstack/react-router";
-
-export const Route = createFileRoute("/pengaturan/keamanan")({
-	component: RouteComponent,
-});
-
-function RouteComponent() {
-	return <div>Hello "/pengaturan/keamanan"!</div>;
-}

src/routes/pengaturan/notifikasi.tsx

@@ -1,9 +0,0 @@
-import { createFileRoute } from "@tanstack/react-router";
-
-export const Route = createFileRoute("/pengaturan/notifikasi")({
-	component: RouteComponent,
-});
-
-function RouteComponent() {
-	return <div>Hello "/pengaturan/notifikasi"!</div>;
-}

src/routes/pengaturan/route.tsx

@@ -1,52 +0,0 @@
-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>
-	);
-}

src/routes/sosial.tsx

@@ -1,9 +0,0 @@
-import { createFileRoute } from "@tanstack/react-router";
-
-export const Route = createFileRoute("/sosial")({
-	component: RouteComponent,
-});
-
-function RouteComponent() {
-	return <div>Hello "/sosial"!</div>;
-}

src/utils/api-client.ts

@@ -2,11 +2,7 @@ import createClient from "openapi-fetch";
 import type { paths } from "../../generated/api";
 import { VITE_PUBLIC_URL } from "./env";
 
-const baseUrl =
-	VITE_PUBLIC_URL ||
-	(typeof window !== "undefined"
-		? window.location.origin
-		: "http://localhost:3000");
+const baseUrl = VITE_PUBLIC_URL;
 
 export const apiClient = createClient<paths>({
 	baseUrl: baseUrl,

src/utils/auth.ts

@@ -1,16 +1,11 @@
 import { betterAuth } from "better-auth";
 import { prismaAdapter } from "better-auth/adapters/prisma";
 import { PrismaClient } from "../../generated/prisma";
-import logger from "./logger";
+import { VITE_PUBLIC_URL } from "./env";
 
-const baseUrl = process.env.VITE_PUBLIC_URL;
+const baseUrl = 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,
@@ -37,8 +32,24 @@ 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,
@@ -48,5 +59,6 @@ export const auth = betterAuth({
 	},
 	advanced: {
 		cookiePrefix: "bun-react",
+		trustProxy: true,
 	},
 });

src/utils/env.ts

@@ -20,10 +20,21 @@ export const getEnv = (key: string, defaultValue = ""): string => {
 	return defaultValue;
 };
 
-export const VITE_PUBLIC_URL = getEnv(
-	"VITE_PUBLIC_URL",
-	"http://localhost:3000",
-);
+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 IS_DEV = (() => {
 	try {