feat: improve header responsiveness and update seed initialization

- Add text truncation for title on mobile screens
- Hide user info section on mobile, show simplified icons only
- Update seed.ts to create admin and demo users with proper password hashing
- Add bcryptjs for password hashing in seed script
- Update QWEN.md documentation with seed command and default users

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

src/routes/admin/route.tsx

@@ -154,7 +154,6 @@ function DashboardLayout() {
 					</Group>
 
 					<Group gap="md">
-
 						<Menu
 							shadow="md"
 							width={200}

src/routes/dashboard/bantuan.ts

@@ -1,7 +1,6 @@
-import { createFileRoute } from '@tanstack/react-router'
-import HelpPage from '@/components/help-page'
-
-export const Route = createFileRoute('/dashboard/bantuan')({
-  component: HelpPage,
-})
+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

@@ -1,7 +1,6 @@
-import BumdesPage from '@/components/bumdes-page'
-import { createFileRoute } from '@tanstack/react-router'
-
-export const Route = createFileRoute('/dashboard/bumdes')({
-  component: BumdesPage,
-})
+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

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

src/routes/dashboard/jenna-analytic.ts

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

src/routes/dashboard/keamanan.ts

@@ -1,7 +1,6 @@
-import { createFileRoute } from '@tanstack/react-router'
-import KeamananPage from '@/components/keamanan-page'
-
-export const Route = createFileRoute('/dashboard/keamanan')({
-  component: KeamananPage,
-})
+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

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

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

@@ -1,6 +1,6 @@
-import { createFileRoute } from '@tanstack/react-router'
-import AksesDanTimSettings from '@/components/pengaturan/akses-dan-tim'
+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,
-})
+export const Route = createFileRoute("/dashboard/pengaturan/akses-dan-tim")({
+	component: AksesDanTimSettings,
+});

src/routes/dashboard/pengaturan/keamanan.ts

@@ -1,7 +1,6 @@
-import { createFileRoute } from '@tanstack/react-router'
-import KeamananSettings from '@/components/pengaturan/keamanan'
-
-export const Route = createFileRoute('/dashboard/pengaturan/keamanan')({
-  component: KeamananSettings,
-})
+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

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

src/routes/dashboard/pengaturan/route.tsx

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

src/routes/dashboard/pengaturan/umum.ts

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

src/routes/dashboard/route.tsx

@@ -1,19 +1,39 @@
-import { createFileRoute, Outlet } from "@tanstack/react-router";
+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";
-import { AppShell, Burger, Group, useMantineColorScheme } from "@mantine/core";
-import { useDisclosure } from "@mantine/hooks";
 
 export const Route = createFileRoute("/dashboard")({
 	component: RouteComponent,
 });
 
 function RouteComponent() {
-	const [opened, { toggle }] = useDisclosure();
+	const [opened, { toggle, close }] = useDisclosure();
 	const { colorScheme } = useMantineColorScheme();
-	const headerBgColor = colorScheme === 'dark' ? "#11192D" : "#19355E";
-	const navbarBgColor = colorScheme === 'dark' ? "#11192D" : "white";
-	const mainBgColor = colorScheme === 'dark' ? "#11192D" : "#edf3f8ff";
+	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 }}
@@ -25,14 +45,29 @@ function RouteComponent() {
 			padding="md"
 		>
 			<AppShell.Header bg={headerBgColor}>
-				<Group h="100%" px="md">
-					<Burger opened={opened} onClick={toggle} hiddenFrom="sm" size="sm" />
+				<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' }}>
+			<AppShell.Navbar
+				p="md"
+				bg={navbarBgColor}
+				style={{ display: "flex", flexDirection: "column" }}
+			>
+				<div style={{ flex: 1, overflowY: "auto" }}>
 					<Sidebar />
 				</div>
 			</AppShell.Navbar>

src/routes/dashboard/sosial.ts

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