Files
webgis_pemetaan_kemiskinan/src/App.tsx
T
2026-05-17 00:53:43 +07:00

106 lines
2.5 KiB
TypeScript

import { Routes, Route, Navigate } from "react-router";
import { useAuth } from "@/hooks/useAuth";
import AppLayout from "@/components/AppLayout";
import Login from "./pages/Login";
import NotFound from "./pages/NotFound";
import Dashboard from "./pages/Dashboard";
import MapPage from "./pages/MapPage";
import RecipientsPage from "./pages/RecipientsPage";
import PlacesOfWorshipPage from "./pages/PlacesOfWorshipPage";
import VerificationPage from "./pages/VerificationPage";
import UsersPage from "./pages/UsersPage";
import SettingsPage from "./pages/SettingsPage";
function ProtectedRoute({
children,
allowedRoles,
}: {
children: React.ReactNode;
allowedRoles?: string[];
}) {
const { user, isLoading } = useAuth();
if (isLoading) {
return (
<div className="flex items-center justify-center min-h-screen">
<div className="animate-spin h-8 w-8 border-4 border-primary border-t-transparent rounded-full" />
</div>
);
}
if (!user) {
return <Navigate to="/login" replace />;
}
if (allowedRoles && !allowedRoles.includes(user.role)) {
return <Navigate to="/" replace />;
}
return <AppLayout>{children}</AppLayout>;
}
export default function App() {
return (
<Routes>
<Route path="/login" element={<Login />} />
<Route
path="/"
element={
<ProtectedRoute>
<Dashboard />
</ProtectedRoute>
}
/>
<Route
path="/map"
element={
<ProtectedRoute>
<MapPage />
</ProtectedRoute>
}
/>
<Route
path="/recipients"
element={
<ProtectedRoute>
<RecipientsPage />
</ProtectedRoute>
}
/>
<Route
path="/places"
element={
<ProtectedRoute>
<PlacesOfWorshipPage />
</ProtectedRoute>
}
/>
<Route
path="/verification"
element={
<ProtectedRoute allowedRoles={["admin", "officer"]}>
<VerificationPage />
</ProtectedRoute>
}
/>
<Route
path="/users"
element={
<ProtectedRoute allowedRoles={["admin"]}>
<UsersPage />
</ProtectedRoute>
}
/>
<Route
path="/settings"
element={
<ProtectedRoute allowedRoles={["admin"]}>
<SettingsPage />
</ProtectedRoute>
}
/>
<Route path="*" element={<NotFound />} />
</Routes>
);
}