nicoarya20/dashboard-noc-desa-darmasaba
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- Make homepage (/) accessible without authentication
- Allow all authenticated users (user & admin) to access main pages:
  - /kinerja-divisi, /pengaduan, /jenna, /demografi
  - /keuangan, /bumdes, /sosial, /keamanan
  - /bantuan, /pengaturan
- Reserve admin-only access for /admin/* routes
- Update auth middleware to handle public routes properly

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
This commit is contained in:
nico
2026-03-13 12:05:46 +08:00
parent d88cf2b100
commit 17ecd3feca
45 changed files with 3883 additions and 3718 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/routes/__root.tsx
View File

@@ -1,4 +1,5 @@
/** biome-ignore-all lint/suspicious/noExplicitAny: <explanation */
import { protectedRouteMiddleware } from "@/middleware/authMiddleware";
import { authStore } from "@/store/auth";
import "@mantine/core/styles.css";
import "@mantine/dates/styles.css";
@@ -6,25 +7,25 @@ import { createRootRoute, Outlet } from "@tanstack/react-router";
export const Route = createRootRoute({
component: RootComponent,
beforeLoad: async () => {
// Fetch session but don't block navigation
try {
const res = await fetch("/api/session", {
method: "GET",
credentials: "include",
});
if (res.ok) {
const { data } = await res.json();
authStore.user = data?.user;
authStore.session = data;
}
} catch {
// Ignore errors, allow public access
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;
}
return {};
// Apply protected route middleware for all other routes
const context = await protectedRouteMiddleware({ location });
authStore.user = context?.user as any;
authStore.session = context?.session as any;
},
});
function RootComponent() {
return <Outlet />;
}
}

51
src/routes/bantuan.tsx Normal file
View File

@@ -0,0 +1,51 @@
import { AppShell, Burger, Group, useMantineColorScheme } from "@mantine/core";
import { useDisclosure } from "@mantine/hooks";
import { createFileRoute } from "@tanstack/react-router";
import { Header } from "@/components/header";
import HelpPage from "@/components/help-page";
import { Sidebar } from "@/components/sidebar";
export const Route = createFileRoute("/bantuan")({
component: BantuanPage,
});
function BantuanPage() {
const [opened, { toggle }] = useDisclosure();
const { colorScheme } = useMantineColorScheme();
const headerBgColor = colorScheme === "dark" ? "#11192D" : "#19355E";
const navbarBgColor = colorScheme === "dark" ? "#11192D" : "white";
const mainBgColor = colorScheme === "dark" ? "#11192D" : "#edf3f8ff";
return (
<AppShell
header={{ height: 60 }}
navbar={{
width: 300,
breakpoint: "sm",
collapsed: { mobile: !opened },
}}
padding="md"
>
<AppShell.Header bg={headerBgColor}>
<Group h="100%" px="md">
<Burger opened={opened} onClick={toggle} hiddenFrom="sm" size="sm" />
<Header />
</Group>
</AppShell.Header>
<AppShell.Navbar
p="md"
bg={navbarBgColor}
style={{ display: "flex", flexDirection: "column" }}
>
<div style={{ flex: 1, overflowY: "auto" }}>
<Sidebar />
</div>
</AppShell.Navbar>
<AppShell.Main bg={mainBgColor}>
<HelpPage />
</AppShell.Main>
</AppShell>
);
}

9
src/routes/bumdes.tsx Normal file
View File

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

6
src/routes/dashboard/bantuan.ts
View File

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

6
src/routes/dashboard/bumdes.ts
View File

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

6
src/routes/dashboard/demografi-pekerjaan.ts
View File

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

5
src/routes/dashboard/index.ts
View File

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

6
src/routes/dashboard/jenna-analytic.ts
View File

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

6
src/routes/dashboard/keamanan.ts
View File

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

6
src/routes/dashboard/keuangan-anggaran.ts
View File

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

5
src/routes/dashboard/kinerja-divisi.ts
View File

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

5
src/routes/dashboard/pengaduan-layanan-publik.ts
View File

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

6
src/routes/dashboard/pengaturan/akses-dan-tim.ts
View File

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

6
src/routes/dashboard/pengaturan/keamanan.ts
View File

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

6
src/routes/dashboard/pengaturan/notifikasi.ts
View File

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

9
src/routes/dashboard/pengaturan/route.tsx
View File

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

6
src/routes/dashboard/sosial.ts
View File

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

51
src/routes/demografi-pekerjaan.tsx Normal file
View File

@@ -0,0 +1,51 @@
import { AppShell, Burger, Group, useMantineColorScheme } from "@mantine/core";
import { useDisclosure } from "@mantine/hooks";
import { createFileRoute } from "@tanstack/react-router";
import { Header } from "@/components/header";
import { Sidebar } from "@/components/sidebar";
import DemografiPekerjaan from "../components/demografi-pekerjaan";
export const Route = createFileRoute("/demografi-pekerjaan")({
component: DemografiPekerjaanPage,
});
function DemografiPekerjaanPage() {
const [opened, { toggle }] = useDisclosure();
const { colorScheme } = useMantineColorScheme();
const headerBgColor = colorScheme === "dark" ? "#11192D" : "#19355E";
const navbarBgColor = colorScheme === "dark" ? "#11192D" : "white";
const mainBgColor = colorScheme === "dark" ? "#11192D" : "#edf3f8ff";
return (
<AppShell
header={{ height: 60 }}
navbar={{
width: 300,
breakpoint: "sm",
collapsed: { mobile: !opened },
}}
padding="md"
>
<AppShell.Header bg={headerBgColor}>
<Group h="100%" px="md">
<Burger opened={opened} onClick={toggle} hiddenFrom="sm" size="sm" />
<Header />
</Group>
</AppShell.Header>
<AppShell.Navbar
p="md"
bg={navbarBgColor}
style={{ display: "flex", flexDirection: "column" }}
>
<div style={{ flex: 1, overflowY: "auto" }}>
<Sidebar />
</div>
</AppShell.Navbar>
<AppShell.Main bg={mainBgColor}>
<DemografiPekerjaan />
</AppShell.Main>
</AppShell>
);
}

52
src/routes/index.tsx
View File

@@ -1,7 +1,51 @@
import { createFileRoute, redirect } from "@tanstack/react-router";
import { AppShell, Burger, Group, useMantineColorScheme } from "@mantine/core";
import { useDisclosure } from "@mantine/hooks";
import { createFileRoute } from "@tanstack/react-router";
import { DashboardContent } from "@/components/dashboard-content";
import { Header } from "@/components/header";
import { Sidebar } from "@/components/sidebar";
export const Route = createFileRoute("/")({
beforeLoad: () => {
throw redirect({ to: "/dashboard" });
},
component: DashboardPage,
});
function DashboardPage() {
const [opened, { toggle }] = useDisclosure();
const { colorScheme } = useMantineColorScheme();
const headerBgColor = colorScheme === "dark" ? "#11192D" : "#19355E";
const navbarBgColor = colorScheme === "dark" ? "#11192D" : "white";
const mainBgColor = colorScheme === "dark" ? "#11192D" : "#edf3f8ff";
return (
<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}>
<DashboardContent />
</AppShell.Main>
</AppShell>
);
}

9
src/routes/jenna-analytic.tsx Normal file
View File

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

9
src/routes/keamanan.tsx Normal file
View File

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

51
src/routes/keuangan-anggaran.tsx Normal file
View File

@@ -0,0 +1,51 @@
import { AppShell, Burger, Group, useMantineColorScheme } from "@mantine/core";
import { useDisclosure } from "@mantine/hooks";
import { createFileRoute } from "@tanstack/react-router";
import { Header } from "@/components/header";
import KeuanganAnggaran from "@/components/keuangan-anggaran";
import { Sidebar } from "@/components/sidebar";
export const Route = createFileRoute("/keuangan-anggaran")({
component: KeuanganAnggaranPage,
});
function KeuanganAnggaranPage() {
const [opened, { toggle }] = useDisclosure();
const { colorScheme } = useMantineColorScheme();
const headerBgColor = colorScheme === "dark" ? "#11192D" : "#19355E";
const navbarBgColor = colorScheme === "dark" ? "#11192D" : "white";
const mainBgColor = colorScheme === "dark" ? "#11192D" : "#edf3f8ff";
return (
<AppShell
header={{ height: 60 }}
navbar={{
width: 300,
breakpoint: "sm",
collapsed: { mobile: !opened },
}}
padding="md"
>
<AppShell.Header bg={headerBgColor}>
<Group h="100%" px="md">
<Burger opened={opened} onClick={toggle} hiddenFrom="sm" size="sm" />
<Header />
</Group>
</AppShell.Header>
<AppShell.Navbar
p="md"
bg={navbarBgColor}
style={{ display: "flex", flexDirection: "column" }}
>
<div style={{ flex: 1, overflowY: "auto" }}>
<Sidebar />
</div>
</AppShell.Navbar>
<AppShell.Main bg={mainBgColor}>
<KeuanganAnggaran />
</AppShell.Main>
</AppShell>
);
}

51
src/routes/kinerja-divisi.tsx Normal file
View File

@@ -0,0 +1,51 @@
import { AppShell, Burger, Group, useMantineColorScheme } from "@mantine/core";
import { useDisclosure } from "@mantine/hooks";
import { createFileRoute } from "@tanstack/react-router";
import { Header } from "@/components/header";
import KinerjaDivisi from "@/components/kinerja-divisi";
import { Sidebar } from "@/components/sidebar";
export const Route = createFileRoute("/kinerja-divisi")({
component: KinerjaDivisiPage,
});
function KinerjaDivisiPage() {
const [opened, { toggle }] = useDisclosure();
const { colorScheme } = useMantineColorScheme();
const headerBgColor = colorScheme === "dark" ? "#11192D" : "#19355E";
const navbarBgColor = colorScheme === "dark" ? "#11192D" : "white";
const mainBgColor = colorScheme === "dark" ? "#11192D" : "#edf3f8ff";
return (
<AppShell
header={{ height: 60 }}
navbar={{
width: 300,
breakpoint: "sm",
collapsed: { mobile: !opened },
}}
padding="md"
>
<AppShell.Header bg={headerBgColor}>
<Group h="100%" px="md">
<Burger opened={opened} onClick={toggle} hiddenFrom="sm" size="sm" />
<Header />
</Group>
</AppShell.Header>
<AppShell.Navbar
p="md"
bg={navbarBgColor}
style={{ display: "flex", flexDirection: "column" }}
>
<div style={{ flex: 1, overflowY: "auto" }}>
<Sidebar />
</div>
</AppShell.Navbar>
<AppShell.Main bg={mainBgColor}>
<KinerjaDivisi />
</AppShell.Main>
</AppShell>
);
}

51
src/routes/pengaduan-layanan-publik.tsx Normal file
View File

@@ -0,0 +1,51 @@
import { AppShell, Burger, Group, useMantineColorScheme } from "@mantine/core";
import { useDisclosure } from "@mantine/hooks";
import { createFileRoute } from "@tanstack/react-router";
import { Header } from "@/components/header";
import PengaduanLayananPublik from "@/components/pengaduan-layanan-publik";
import { Sidebar } from "@/components/sidebar";
export const Route = createFileRoute("/pengaduan-layanan-publik")({
component: PengaduanLayananPublikPage,
});
function PengaduanLayananPublikPage() {
const [opened, { toggle }] = useDisclosure();
const { colorScheme } = useMantineColorScheme();
const headerBgColor = colorScheme === "dark" ? "#11192D" : "#19355E";
const navbarBgColor = colorScheme === "dark" ? "#11192D" : "white";
const mainBgColor = colorScheme === "dark" ? "#11192D" : "#edf3f8ff";
return (
<AppShell
header={{ height: 60 }}
navbar={{
width: 300,
breakpoint: "sm",
collapsed: { mobile: !opened },
}}
padding="md"
>
<AppShell.Header bg={headerBgColor}>
<Group h="100%" px="md">
<Burger opened={opened} onClick={toggle} hiddenFrom="sm" size="sm" />
<Header />
</Group>
</AppShell.Header>
<AppShell.Navbar
p="md"
bg={navbarBgColor}
style={{ display: "flex", flexDirection: "column" }}
>
<div style={{ flex: 1, overflowY: "auto" }}>
<Sidebar />
</div>
</AppShell.Navbar>
<AppShell.Main bg={mainBgColor}>
<PengaduanLayananPublik />
</AppShell.Main>
</AppShell>
);
}

9
src/routes/pengaturan/akses-dan-tim.tsx Normal file
View File

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

9
src/routes/pengaturan/keamanan.tsx Normal file
View File

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

9
src/routes/pengaturan/notifikasi.tsx Normal file
View File

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

23
src/routes/dashboard/route.tsx → src/routes/pengaturan/route.tsx
View File

@@ -1,3 +1,4 @@
<<<<<<< HEAD:src/routes/dashboard/route.tsx
import {
AppShell,
Burger,
@@ -8,13 +9,19 @@ import {
import { useDisclosure, useMediaQuery } from "@mantine/hooks";
import { createFileRoute, Outlet, useRouterState } from "@tanstack/react-router";
import { useEffect } from "react";
=======
import { AppShell, Burger, Group, useMantineColorScheme } from "@mantine/core";
import { useDisclosure } from "@mantine/hooks";
import { createFileRoute, Outlet } from "@tanstack/react-router";
>>>>>>> 89c8ca8 (fix: make dashboard public and remove admin-only restriction from main pages):src/routes/pengaturan/route.tsx
import { Header } from "@/components/header";
import { Sidebar } from "@/components/sidebar";
export const Route = createFileRoute("/dashboard")({
component: RouteComponent,
export const Route = createFileRoute("/pengaturan")({
component: PengaturanLayout,
});
<<<<<<< HEAD:src/routes/dashboard/route.tsx
function RouteComponent() {
const [opened, { toggle, close }] = useDisclosure();
const { colorScheme } = useMantineColorScheme();
@@ -23,10 +30,16 @@ function RouteComponent() {
const isMobile = useMediaQuery("(max-width: 48em)");
=======
function PengaturanLayout() {
const [opened, { toggle }] = useDisclosure();
const { colorScheme } = useMantineColorScheme();
>>>>>>> 89c8ca8 (fix: make dashboard public and remove admin-only restriction from main pages):src/routes/pengaturan/route.tsx
const headerBgColor = colorScheme === "dark" ? "#11192D" : "#19355E";
const navbarBgColor = colorScheme === "dark" ? "#11192D" : "white";
const mainBgColor = colorScheme === "dark" ? "#11192D" : "#edf3f8ff";
<<<<<<< HEAD:src/routes/dashboard/route.tsx
// ✅ AUTO CLOSE NAVBAR ON ROUTE CHANGE (MOBILE ONLY)
useEffect(() => {
if (isMobile && opened) {
@@ -34,6 +47,8 @@ function RouteComponent() {
}
}, [routerState.location.pathname]);
=======
>>>>>>> 89c8ca8 (fix: make dashboard public and remove admin-only restriction from main pages):src/routes/pengaturan/route.tsx
return (
<AppShell
header={{ height: 60 }}
@@ -73,7 +88,9 @@ function RouteComponent() {
</AppShell.Navbar>
<AppShell.Main bg={mainBgColor}>
<Outlet />
<div className="p-2">
<Outlet />
</div>
</AppShell.Main>
</AppShell>
);

2
src/routes/dashboard/pengaturan/umum.ts → src/routes/pengaturan/umum.tsx
View File

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

9
src/routes/sosial.tsx Normal file
View File

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