feat: implement settings menu with umum, notifikasi, keamanan, and akses & tim sections

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

src/components/sidebar.tsx

@@ -1,5 +1,5 @@
 import { useNavigate, useLocation } from "@tanstack/react-router";
-import { Search } from "lucide-react";
+import { Search, ChevronDown, ChevronUp } from "lucide-react";
 import {
 	Stack,
 	Group,
@@ -9,7 +9,9 @@ import {
 	NavLink as MantineNavLink,
 	Box,
 	useMantineColorScheme,
+	Collapse,
 } from "@mantine/core";
+import { useState } from "react";
 
 interface SidebarProps {
 	className?: string;
@@ -21,6 +23,11 @@ export function Sidebar({ className }: SidebarProps) {
 	const { colorScheme } = useMantineColorScheme();
 	const isActiveBg = colorScheme === 'dark' ? "#182949" : "#E6F0FF";
 	const isActiveBorder = colorScheme === 'dark' ? "#00398D" : "#1F41AE";
+	
+	// State for settings submenu collapse
+	const [settingsOpen, setSettingsOpen] = useState(
+		location.pathname.startsWith('/dashboard/pengaturan')
+	);
 
 	// Define menu items with their paths
 	const menuItems = [
@@ -34,9 +41,21 @@ export function Sidebar({ className }: SidebarProps) {
 		{ name: "Sosial", path: "/dashboard/sosial" },
 		{ name: "Keamanan", path: "/dashboard/keamanan" },
 		{ name: "Bantuan", path: "/dashboard/bantuan" },
-		{ name: "Pengaturan", path: "/dashboard/pengaturan" },
 	];
 
+	// Settings submenu items
+	const settingsItems = [
+		{ name: "Umum", path: "/dashboard/pengaturan/umum" },
+		{ name: "Notifikasi", path: "/dashboard/pengaturan/notifikasi" },
+		{ name: "Keamanan", path: "/dashboard/pengaturan/keamanan" },
+		{ name: "Akses & Tim", path: "/dashboard/pengaturan/akses-dan-tim" },
+	];
+
+	// Check if any settings submenu is active
+	const isSettingsActive = settingsItems.some(item => 
+		location.pathname === item.path
+	);
+
 	return (
 		<Box className={className}>
 			{/* Logo */}
@@ -78,7 +97,7 @@ export function Sidebar({ className }: SidebarProps) {
 			</Box>
 
 			{/* Menu Items */}
-			<Stack gap={0} px="xs" flex={1} style={{ overflowY: "auto" }}>
+			<Stack gap={0} px="xs" style={{ overflowY: "auto" }}>
 				{menuItems.map((item, index) => {
 					const isActive = location.pathname === item.path;
 					return (
@@ -107,6 +126,65 @@ export function Sidebar({ className }: SidebarProps) {
 						/>
 					);
 				})}
+
+				{/* Settings with submenu */}
+				<Box>
+					<MantineNavLink
+						onClick={() => setSettingsOpen(!settingsOpen)}
+						rightSection={settingsOpen ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
+						label="Pengaturan"
+						active={isSettingsActive}
+						variant="subtle"
+						color="blue"
+						style={{
+							background: isSettingsActive ? isActiveBg : "transparent",
+							fontWeight: isSettingsActive ? "bold" : "normal",
+							borderLeft: isSettingsActive ? `4px solid ${isActiveBorder}` : "4px solid transparent",
+							borderRadius: "8px",
+							transition: "all 200ms ease",
+							margin: "2px 0",
+						}}
+						styles={{
+							body: {
+								"&:hover": {
+									background: "#F1F5F9",
+								}
+							}
+						}}
+					/>
+					<Collapse in={settingsOpen}>
+						<Stack gap={0} ml="lg" style={{ overflowY: 'auto', maxHeight: '200px' }}>
+							{settingsItems.map((item, index) => {
+								const isActive = location.pathname === item.path;
+								return (
+									<MantineNavLink
+										key={index}
+										onClick={() => navigate({ to: item.path })}
+										label={item.name}
+										active={isActive}
+										variant="subtle"
+										color="blue"
+										style={{
+											background: isActive ? isActiveBg : "transparent",
+											fontWeight: isActive ? "bold" : "normal",
+											borderLeft: isActive ? `4px solid ${isActiveBorder}` : "4px solid transparent",
+											borderRadius: "8px",
+											transition: "all 200ms ease",
+											margin: "2px 0",
+										}}
+										styles={{
+											body: {
+												"&:hover": {
+													background: "#F1F5F9",
+												}
+											}
+										}}
+									/>
+								);
+							})}
+						</Stack>
+					</Collapse>
+				</Box>
 			</Stack>
 		</Box>
 	);

src/routeTree.gen.ts

@@ -21,6 +21,7 @@ import { Route as AdminIndexRouteImport } from './routes/admin/index'
 import { Route as UsersIdRouteImport } from './routes/users/$id'
 import { Route as ProfileEditRouteImport } from './routes/profile/edit'
 import { Route as DashboardSosialRouteImport } from './routes/dashboard/sosial'
+import { Route as DashboardPengaturanRouteImport } from './routes/dashboard/pengaturan'
 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'
@@ -32,6 +33,10 @@ 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 DashboardPengaturanUmumRouteRouteImport } from './routes/dashboard/pengaturan/umum.route'
+import { Route as DashboardPengaturanNotifikasiRouteRouteImport } from './routes/dashboard/pengaturan/notifikasi.route'
+import { Route as DashboardPengaturanKeamananRouteRouteImport } from './routes/dashboard/pengaturan/keamanan.route'
+import { Route as DashboardPengaturanAksesDanTimRouteRouteImport } from './routes/dashboard/pengaturan/akses-dan-tim.route'
 
 const SignupRoute = SignupRouteImport.update({
   id: '/signup',
@@ -93,6 +98,11 @@ const DashboardSosialRoute = DashboardSosialRouteImport.update({
   path: '/sosial',
   getParentRoute: () => DashboardRouteRoute,
 } as any)
+const DashboardPengaturanRoute = DashboardPengaturanRouteImport.update({
+  id: '/pengaturan',
+  path: '/pengaturan',
+  getParentRoute: () => DashboardRouteRoute,
+} as any)
 const DashboardPengaduanLayananPublikRoute =
   DashboardPengaduanLayananPublikRouteImport.update({
     id: '/pengaduan-layanan-publik',
@@ -151,6 +161,30 @@ const AdminApikeyRoute = AdminApikeyRouteImport.update({
   path: '/apikey',
   getParentRoute: () => AdminRouteRoute,
 } as any)
+const DashboardPengaturanUmumRouteRoute =
+  DashboardPengaturanUmumRouteRouteImport.update({
+    id: '/umum',
+    path: '/umum',
+    getParentRoute: () => DashboardPengaturanRoute,
+  } as any)
+const DashboardPengaturanNotifikasiRouteRoute =
+  DashboardPengaturanNotifikasiRouteRouteImport.update({
+    id: '/notifikasi',
+    path: '/notifikasi',
+    getParentRoute: () => DashboardPengaturanRoute,
+  } as any)
+const DashboardPengaturanKeamananRouteRoute =
+  DashboardPengaturanKeamananRouteRouteImport.update({
+    id: '/keamanan',
+    path: '/keamanan',
+    getParentRoute: () => DashboardPengaturanRoute,
+  } as any)
+const DashboardPengaturanAksesDanTimRouteRoute =
+  DashboardPengaturanAksesDanTimRouteRouteImport.update({
+    id: '/akses-dan-tim',
+    path: '/akses-dan-tim',
+    getParentRoute: () => DashboardPengaturanRoute,
+  } as any)
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
@@ -169,6 +203,7 @@ export interface FileRoutesByFullPath {
   '/dashboard/keuangan-anggaran': typeof DashboardKeuanganAnggaranRoute
   '/dashboard/kinerja-divisi': typeof DashboardKinerjaDivisiRoute
   '/dashboard/pengaduan-layanan-publik': typeof DashboardPengaduanLayananPublikRoute
+  '/dashboard/pengaturan': typeof DashboardPengaturanRouteWithChildren
   '/dashboard/sosial': typeof DashboardSosialRoute
   '/profile/edit': typeof ProfileEditRoute
   '/users/$id': typeof UsersIdRoute
@@ -176,6 +211,10 @@ export interface FileRoutesByFullPath {
   '/dashboard/': typeof DashboardIndexRoute
   '/profile/': typeof ProfileIndexRoute
   '/users/': typeof UsersIndexRoute
+  '/dashboard/pengaturan/akses-dan-tim': typeof DashboardPengaturanAksesDanTimRouteRoute
+  '/dashboard/pengaturan/keamanan': typeof DashboardPengaturanKeamananRouteRoute
+  '/dashboard/pengaturan/notifikasi': typeof DashboardPengaturanNotifikasiRouteRoute
+  '/dashboard/pengaturan/umum': typeof DashboardPengaturanUmumRouteRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
@@ -192,6 +231,7 @@ export interface FileRoutesByTo {
   '/dashboard/keuangan-anggaran': typeof DashboardKeuanganAnggaranRoute
   '/dashboard/kinerja-divisi': typeof DashboardKinerjaDivisiRoute
   '/dashboard/pengaduan-layanan-publik': typeof DashboardPengaduanLayananPublikRoute
+  '/dashboard/pengaturan': typeof DashboardPengaturanRouteWithChildren
   '/dashboard/sosial': typeof DashboardSosialRoute
   '/profile/edit': typeof ProfileEditRoute
   '/users/$id': typeof UsersIdRoute
@@ -199,6 +239,10 @@ export interface FileRoutesByTo {
   '/dashboard': typeof DashboardIndexRoute
   '/profile': typeof ProfileIndexRoute
   '/users': typeof UsersIndexRoute
+  '/dashboard/pengaturan/akses-dan-tim': typeof DashboardPengaturanAksesDanTimRouteRoute
+  '/dashboard/pengaturan/keamanan': typeof DashboardPengaturanKeamananRouteRoute
+  '/dashboard/pengaturan/notifikasi': typeof DashboardPengaturanNotifikasiRouteRoute
+  '/dashboard/pengaturan/umum': typeof DashboardPengaturanUmumRouteRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
@@ -218,6 +262,7 @@ export interface FileRoutesById {
   '/dashboard/keuangan-anggaran': typeof DashboardKeuanganAnggaranRoute
   '/dashboard/kinerja-divisi': typeof DashboardKinerjaDivisiRoute
   '/dashboard/pengaduan-layanan-publik': typeof DashboardPengaduanLayananPublikRoute
+  '/dashboard/pengaturan': typeof DashboardPengaturanRouteWithChildren
   '/dashboard/sosial': typeof DashboardSosialRoute
   '/profile/edit': typeof ProfileEditRoute
   '/users/$id': typeof UsersIdRoute
@@ -225,6 +270,10 @@ export interface FileRoutesById {
   '/dashboard/': typeof DashboardIndexRoute
   '/profile/': typeof ProfileIndexRoute
   '/users/': typeof UsersIndexRoute
+  '/dashboard/pengaturan/akses-dan-tim': typeof DashboardPengaturanAksesDanTimRouteRoute
+  '/dashboard/pengaturan/keamanan': typeof DashboardPengaturanKeamananRouteRoute
+  '/dashboard/pengaturan/notifikasi': typeof DashboardPengaturanNotifikasiRouteRoute
+  '/dashboard/pengaturan/umum': typeof DashboardPengaturanUmumRouteRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
@@ -245,6 +294,7 @@ export interface FileRouteTypes {
     | '/dashboard/keuangan-anggaran'
     | '/dashboard/kinerja-divisi'
     | '/dashboard/pengaduan-layanan-publik'
+    | '/dashboard/pengaturan'
     | '/dashboard/sosial'
     | '/profile/edit'
     | '/users/$id'
@@ -252,6 +302,10 @@ export interface FileRouteTypes {
     | '/dashboard/'
     | '/profile/'
     | '/users/'
+    | '/dashboard/pengaturan/akses-dan-tim'
+    | '/dashboard/pengaturan/keamanan'
+    | '/dashboard/pengaturan/notifikasi'
+    | '/dashboard/pengaturan/umum'
   fileRoutesByTo: FileRoutesByTo
   to:
     | '/'
@@ -268,6 +322,7 @@ export interface FileRouteTypes {
     | '/dashboard/keuangan-anggaran'
     | '/dashboard/kinerja-divisi'
     | '/dashboard/pengaduan-layanan-publik'
+    | '/dashboard/pengaturan'
     | '/dashboard/sosial'
     | '/profile/edit'
     | '/users/$id'
@@ -275,6 +330,10 @@ export interface FileRouteTypes {
     | '/dashboard'
     | '/profile'
     | '/users'
+    | '/dashboard/pengaturan/akses-dan-tim'
+    | '/dashboard/pengaturan/keamanan'
+    | '/dashboard/pengaturan/notifikasi'
+    | '/dashboard/pengaturan/umum'
   id:
     | '__root__'
     | '/'
@@ -293,6 +352,7 @@ export interface FileRouteTypes {
     | '/dashboard/keuangan-anggaran'
     | '/dashboard/kinerja-divisi'
     | '/dashboard/pengaduan-layanan-publik'
+    | '/dashboard/pengaturan'
     | '/dashboard/sosial'
     | '/profile/edit'
     | '/users/$id'
@@ -300,6 +360,10 @@ export interface FileRouteTypes {
     | '/dashboard/'
     | '/profile/'
     | '/users/'
+    | '/dashboard/pengaturan/akses-dan-tim'
+    | '/dashboard/pengaturan/keamanan'
+    | '/dashboard/pengaturan/notifikasi'
+    | '/dashboard/pengaturan/umum'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
@@ -400,6 +464,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof DashboardSosialRouteImport
       parentRoute: typeof DashboardRouteRoute
     }
+    '/dashboard/pengaturan': {
+      id: '/dashboard/pengaturan'
+      path: '/pengaturan'
+      fullPath: '/dashboard/pengaturan'
+      preLoaderRoute: typeof DashboardPengaturanRouteImport
+      parentRoute: typeof DashboardRouteRoute
+    }
     '/dashboard/pengaduan-layanan-publik': {
       id: '/dashboard/pengaduan-layanan-publik'
       path: '/pengaduan-layanan-publik'
@@ -477,6 +548,34 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AdminApikeyRouteImport
       parentRoute: typeof AdminRouteRoute
     }
+    '/dashboard/pengaturan/umum': {
+      id: '/dashboard/pengaturan/umum'
+      path: '/umum'
+      fullPath: '/dashboard/pengaturan/umum'
+      preLoaderRoute: typeof DashboardPengaturanUmumRouteRouteImport
+      parentRoute: typeof DashboardPengaturanRoute
+    }
+    '/dashboard/pengaturan/notifikasi': {
+      id: '/dashboard/pengaturan/notifikasi'
+      path: '/notifikasi'
+      fullPath: '/dashboard/pengaturan/notifikasi'
+      preLoaderRoute: typeof DashboardPengaturanNotifikasiRouteRouteImport
+      parentRoute: typeof DashboardPengaturanRoute
+    }
+    '/dashboard/pengaturan/keamanan': {
+      id: '/dashboard/pengaturan/keamanan'
+      path: '/keamanan'
+      fullPath: '/dashboard/pengaturan/keamanan'
+      preLoaderRoute: typeof DashboardPengaturanKeamananRouteRouteImport
+      parentRoute: typeof DashboardPengaturanRoute
+    }
+    '/dashboard/pengaturan/akses-dan-tim': {
+      id: '/dashboard/pengaturan/akses-dan-tim'
+      path: '/akses-dan-tim'
+      fullPath: '/dashboard/pengaturan/akses-dan-tim'
+      preLoaderRoute: typeof DashboardPengaturanAksesDanTimRouteRouteImport
+      parentRoute: typeof DashboardPengaturanRoute
+    }
   }
 }
 
@@ -498,6 +597,25 @@ const AdminRouteRouteWithChildren = AdminRouteRoute._addFileChildren(
   AdminRouteRouteChildren,
 )
 
+interface DashboardPengaturanRouteChildren {
+  DashboardPengaturanAksesDanTimRouteRoute: typeof DashboardPengaturanAksesDanTimRouteRoute
+  DashboardPengaturanKeamananRouteRoute: typeof DashboardPengaturanKeamananRouteRoute
+  DashboardPengaturanNotifikasiRouteRoute: typeof DashboardPengaturanNotifikasiRouteRoute
+  DashboardPengaturanUmumRouteRoute: typeof DashboardPengaturanUmumRouteRoute
+}
+
+const DashboardPengaturanRouteChildren: DashboardPengaturanRouteChildren = {
+  DashboardPengaturanAksesDanTimRouteRoute:
+    DashboardPengaturanAksesDanTimRouteRoute,
+  DashboardPengaturanKeamananRouteRoute: DashboardPengaturanKeamananRouteRoute,
+  DashboardPengaturanNotifikasiRouteRoute:
+    DashboardPengaturanNotifikasiRouteRoute,
+  DashboardPengaturanUmumRouteRoute: DashboardPengaturanUmumRouteRoute,
+}
+
+const DashboardPengaturanRouteWithChildren =
+  DashboardPengaturanRoute._addFileChildren(DashboardPengaturanRouteChildren)
+
 interface DashboardRouteRouteChildren {
   DashboardBantuanRoute: typeof DashboardBantuanRoute
   DashboardBumdesRoute: typeof DashboardBumdesRoute
@@ -507,6 +625,7 @@ interface DashboardRouteRouteChildren {
   DashboardKeuanganAnggaranRoute: typeof DashboardKeuanganAnggaranRoute
   DashboardKinerjaDivisiRoute: typeof DashboardKinerjaDivisiRoute
   DashboardPengaduanLayananPublikRoute: typeof DashboardPengaduanLayananPublikRoute
+  DashboardPengaturanRoute: typeof DashboardPengaturanRouteWithChildren
   DashboardSosialRoute: typeof DashboardSosialRoute
   DashboardIndexRoute: typeof DashboardIndexRoute
 }
@@ -520,6 +639,7 @@ const DashboardRouteRouteChildren: DashboardRouteRouteChildren = {
   DashboardKeuanganAnggaranRoute: DashboardKeuanganAnggaranRoute,
   DashboardKinerjaDivisiRoute: DashboardKinerjaDivisiRoute,
   DashboardPengaduanLayananPublikRoute: DashboardPengaduanLayananPublikRoute,
+  DashboardPengaturanRoute: DashboardPengaturanRouteWithChildren,
   DashboardSosialRoute: DashboardSosialRoute,
   DashboardIndexRoute: DashboardIndexRoute,
 }

src/routes/dashboard/pengaturan.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/akses-dan-tim.route.tsx

@@ -0,0 +1,6 @@
+import { createFileRoute } from '@tanstack/react-router';
+import AksesDanTimSettings from './akses-dan-tim';
+
+export const Route = createFileRoute('/dashboard/pengaturan/akses-dan-tim')({
+  component: AksesDanTimSettings,
+});

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

@@ -0,0 +1,123 @@
+import { Card, Title, Text, Space, Button, Group, Alert, Table, ActionIcon, Modal, TextInput, Select } from '@mantine/core';
+import { IconInfoCircle, IconUserPlus, IconTrash, IconEdit, IconUser } from '@tabler/icons-react';
+import { useState } from 'react';
+
+const AksesDanTimSettings = () => {
+  const [opened, setOpened] = useState(false);
+  
+  // Sample team members data
+  const teamMembers = [
+    { id: 1, name: 'Admin Utama', email: 'admin@desa.go.id', role: 'Administrator', status: 'Aktif' },
+    { id: 2, name: 'Operator Desa', email: 'operator@desa.go.id', role: 'Operator', status: 'Aktif' },
+    { id: 3, name: 'Staff Keuangan', email: 'keuangan@desa.go.id', role: 'Keuangan', status: 'Aktif' },
+    { id: 4, name: 'Staff Umum', email: 'umum@desa.go.id', role: 'Umum', status: 'Nonaktif' },
+  ];
+
+  const roles = [
+    { value: 'administrator', label: 'Administrator' },
+    { value: 'operator', label: 'Operator' },
+    { value: 'keuangan', label: 'Keuangan' },
+    { value: 'umum', label: 'Umum' },
+    { value: 'keamanan', label: 'Keamanan' },
+  ];
+
+  return (
+    <Card withBorder radius="md" p="xl">
+      <Modal
+        opened={opened}
+        onClose={() => setOpened(false)}
+        title="Tambah Anggota Tim"
+        size="lg"
+      >
+        <TextInput
+          label="Nama Lengkap"
+          placeholder="Masukkan nama lengkap anggota tim"
+          mb="md"
+        />
+        <TextInput
+          label="Alamat Email"
+          placeholder="Masukkan alamat email"
+          mb="md"
+        />
+        <Select
+          label="Peran"
+          placeholder="Pilih peran anggota tim"
+          data={roles}
+          mb="md"
+        />
+        <Group justify="flex-end" mt="xl">
+          <Button variant="outline" onClick={() => setOpened(false)}>Batal</Button>
+          <Button>Undang Anggota</Button>
+        </Group>
+      </Modal>
+
+      <Title order={2} mb="lg">Akses & Tim</Title>
+      <Text color="dimmed" mb="xl">Kelola akses dan anggota tim Anda</Text>
+
+      <Space h="lg" />
+
+      <Group justify="space-between" mb="md">
+        <Title order={4}>Anggota Tim</Title>
+        <Button leftSection={<IconUserPlus size={16} />} onClick={() => setOpened(true)}>
+          Tambah Anggota
+        </Button>
+      </Group>
+
+      <Table highlightOnHover>
+        <Table.Thead>
+          <Table.Tr>
+            <Table.Th>Nama</Table.Th>
+            <Table.Th>Email</Table.Th>
+            <Table.Th>Peran</Table.Th>
+            <Table.Th>Status</Table.Th>
+            <Table.Th>Aksi</Table.Th>
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody>
+          {teamMembers.map((member) => (
+            <Table.Tr key={member.id}>
+              <Table.Td>
+                <Group gap="sm">
+                  <IconUser size={20} />
+                  <Text>{member.name}</Text>
+                </Group>
+              </Table.Td>
+              <Table.Td>{member.email}</Table.Td>
+              <Table.Td>
+                <Text fw={500}>{member.role}</Text>
+              </Table.Td>
+              <Table.Td>
+                <Text c={member.status === 'Aktif' ? 'green' : 'red'} fw={500}>
+                  {member.status}
+                </Text>
+              </Table.Td>
+              <Table.Td>
+                <Group>
+                  <ActionIcon variant="subtle" color="blue">
+                    <IconEdit size={16} />
+                  </ActionIcon>
+                  <ActionIcon variant="subtle" color="red">
+                    <IconTrash size={16} />
+                  </ActionIcon>
+                </Group>
+              </Table.Td>
+            </Table.Tr>
+          ))}
+        </Table.Tbody>
+      </Table>
+
+      <Space h="xl" />
+
+      <Alert icon={<IconInfoCircle size={16} />} title="Informasi" color="blue" mb="md">
+        Administrator memiliki akses penuh ke semua fitur. Peran lainnya memiliki akses terbatas sesuai kebutuhan.
+      </Alert>
+
+      <Group justify="flex-end" mt="xl">
+        <Button variant="outline">Batal</Button>
+        <Button>Simpan Perubahan</Button>
+      </Group>
+    </Card>
+  );
+};
+
+export default AksesDanTimSettings;

src/routes/dashboard/pengaturan/keamanan.route.tsx

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

src/routes/dashboard/pengaturan/keamanan.tsx

@@ -0,0 +1,55 @@
+import { Card, Title, Text, Space, Button, Group, Alert, PasswordInput, Switch } from '@mantine/core';
+import { IconInfoCircle, IconLock } from '@tabler/icons-react';
+
+const KeamananSettings = () => {
+  return (
+    <Card withBorder radius="md" p="xl">
+      <Title order={2} mb="lg">Pengaturan Keamanan</Title>
+      <Text color="dimmed" mb="xl">Kelola keamanan akun Anda</Text>
+
+      <Space h="lg" />
+
+      <PasswordInput
+        label="Kata Sandi Saat Ini"
+        placeholder="Masukkan kata sandi saat ini"
+        mb="md"
+      />
+
+      <PasswordInput
+        label="Kata Sandi Baru"
+        placeholder="Masukkan kata sandi baru"
+        mb="md"
+      />
+
+      <PasswordInput
+        label="Konfirmasi Kata Sandi Baru"
+        placeholder="Konfirmasi kata sandi baru"
+        mb="md"
+      />
+
+      <Space h="md" />
+
+      <Group mb="md">
+        <Switch label="Verifikasi Dua Langkah" />
+        <Switch label="Login Otentikasi Aplikasi" />
+      </Group>
+
+      <Space h="md" />
+
+      <Alert icon={<IconLock size={16} />} title="Keamanan" color="orange" mb="md">
+        Gunakan kata sandi yang kuat dan unik. Hindari menggunakan kata sandi yang sama di banyak layanan.
+      </Alert>
+
+      <Alert icon={<IconInfoCircle size={16} />} title="Informasi" color="blue" mb="md">
+        Setelah mengganti kata sandi, Anda akan diminta logout dari semua perangkat.
+      </Alert>
+
+      <Group justify="flex-end" mt="xl">
+        <Button variant="outline">Batal</Button>
+        <Button>Perbarui Kata Sandi</Button>
+      </Group>
+    </Card>
+  );
+};
+
+export default KeamananSettings;

src/routes/dashboard/pengaturan/notifikasi.route.tsx

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

src/routes/dashboard/pengaturan/notifikasi.tsx

@@ -0,0 +1,53 @@
+import { Card, Title, Text, Space, Switch, Group, Alert, Checkbox, Button } from '@mantine/core';
+import { IconInfoCircle } from '@tabler/icons-react';
+
+const NotifikasiSettings = () => {
+  return (
+    <Card withBorder radius="md" p="xl">
+      <Title order={2} mb="lg">Pengaturan Notifikasi</Title>
+      <Text color="dimmed" mb="xl">Kelola preferensi notifikasi Anda</Text>
+
+      <Space h="lg" />
+
+      <Checkbox.Group defaultValue={['email', 'push']} mb="md">
+        <Title order={4} mb="sm">Metode Notifikasi</Title>
+        <Group>
+          <Checkbox value="email" label="Email" />
+          <Checkbox value="push" label="Notifikasi Push" />
+          <Checkbox value="sms" label="SMS" />
+        </Group>
+      </Checkbox.Group>
+
+      <Space h="md" />
+
+      <Group mb="md">
+        <Switch label="Notifikasi Email" defaultChecked />
+        <Switch label="Notifikasi Push" defaultChecked />
+      </Group>
+
+      <Space h="md" />
+
+      <Title order={4} mb="sm">Jenis Notifikasi</Title>
+      <Group direction="column" align="start">
+        <Switch label="Pengaduan Baru" defaultChecked />
+        <Switch label="Update Status Pengaduan" defaultChecked />
+        <Switch label="Laporan Mingguan" />
+        <Switch label="Pemberitahuan Keamanan" defaultChecked />
+        <Switch label="Aktivitas Akun" defaultChecked />
+      </Group>
+
+      <Space h="md" />
+
+      <Alert icon={<IconInfoCircle size={16} />} title="Tip" color="blue" mb="md">
+        Anda dapat menyesuaikan frekuensi notifikasi mingguan sesuai kebutuhan Anda.
+      </Alert>
+
+      <Group justify="flex-end" mt="xl">
+        <Button variant="outline">Batal</Button>
+        <Button>Simpan Preferensi</Button>
+      </Group>
+    </Card>
+  );
+};
+
+export default NotifikasiSettings;

src/routes/dashboard/pengaturan/umum.route.tsx

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

src/routes/dashboard/pengaturan/umum.tsx

@@ -0,0 +1,57 @@
+import { Card, Title, Text, Space, TextInput, Select, Button, Group, Switch, Alert } from '@mantine/core';
+import { IconInfoCircle } from '@tabler/icons-react';
+
+const UmumSettings = () => {
+  return (
+    <Card withBorder radius="md" p="xl">
+      <Title order={2} mb="lg">Pengaturan Umum</Title>
+      <Text color="dimmed" mb="xl">Kelola pengaturan umum aplikasi Anda</Text>
+
+      <Space h="lg" />
+
+      <TextInput
+        label="Nama Aplikasi"
+        placeholder="Masukkan nama aplikasi"
+        defaultValue="Dashboard Desa Plus"
+        mb="md"
+      />
+
+      <Select
+        label="Bahasa Aplikasi"
+        data={[
+          { value: 'id', label: 'Indonesia' },
+          { value: 'en', label: 'English' },
+        ]}
+        defaultValue="id"
+        mb="md"
+      />
+
+      <Select
+        label="Zona Waktu"
+        data={[
+          { value: 'Asia/Jakarta', label: 'Asia/Jakarta (GMT+7)' },
+          { value: 'Asia/Makassar', label: 'Asia/Makassar (GMT+8)' },
+          { value: 'Asia/Jayapura', label: 'Asia/Jayapura (GMT+9)' },
+        ]}
+        defaultValue="Asia/Jakarta"
+        mb="md"
+      />
+
+      <Group mb="md">
+        <Switch label="Mode Gelap" defaultChecked />
+        <Switch label="Notifikasi Email" defaultChecked />
+      </Group>
+
+      <Alert icon={<IconInfoCircle size={16} />} title="Informasi" color="blue" mb="md">
+        Beberapa pengaturan mungkin memerlukan restart aplikasi untuk diterapkan sepenuhnya.
+      </Alert>
+
+      <Group justify="flex-end" mt="xl">
+        <Button variant="outline">Batal</Button>
+        <Button>Simpan Perubahan</Button>
+      </Group>
+    </Card>
+  );
+};
+
+export default UmumSettings;

src/routes/dashboard/route.tsx

@@ -18,7 +18,7 @@ function RouteComponent() {
 		<AppShell
 			header={{ height: 60 }}
 			navbar={{
-				width: 250,
+				width: 300,
 				breakpoint: "sm",
 				collapsed: { mobile: !opened },
 			}}
@@ -31,8 +31,10 @@ function RouteComponent() {
 				</Group>
 			</AppShell.Header>
 
-			<AppShell.Navbar p="md" bg={navbarBgColor}>
+			<AppShell.Navbar p="md" bg={navbarBgColor} style={{ display: 'flex', flexDirection: 'column' }}>
-				<Sidebar />
+				<div style={{ flex: 1, overflowY: 'auto' }}>
+					<Sidebar />
+				</div>
 			</AppShell.Navbar>
 
 			<AppShell.Main bg={mainBgColor}>