121 lines
3.0 KiB
JavaScript
121 lines
3.0 KiB
JavaScript
import React from 'react';
|
|
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
|
|
import { useAuthStore } from './store/authStore';
|
|
import Sidebar from './components/Sidebar';
|
|
import Navbar from './components/Navbar';
|
|
import Login from './pages/Login';
|
|
import Dashboard from './pages/Dashboard';
|
|
import Transactions from './pages/Transactions';
|
|
import Settings from './pages/Settings';
|
|
import ForgotPassword from './pages/ForgotPassword';
|
|
import Roles from './pages/Roles';
|
|
|
|
// Protected Route Component
|
|
const ProtectedRoute = ({ children }) => {
|
|
const isLoggedIn = useAuthStore((s) => s.isLoggedIn);
|
|
const loading = useAuthStore((s) => s.loading);
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="min-h-screen bg-gray-50 dark:bg-gray-900 flex items-center justify-center">
|
|
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return isLoggedIn ? children : <Navigate to="/login" />;
|
|
};
|
|
|
|
// Main Layout Component
|
|
const Layout = ({ children }) => {
|
|
const [sidebarOpen, setSidebarOpen] = React.useState(false);
|
|
|
|
const toggleSidebar = () => {
|
|
setSidebarOpen(!sidebarOpen);
|
|
};
|
|
|
|
return (
|
|
<div className="flex min-h-screen bg-gray-50 dark:bg-gray-900">
|
|
{/* Sidebar */}
|
|
<Sidebar isOpen={sidebarOpen} onToggle={toggleSidebar} />
|
|
|
|
{/* Main Content Area */}
|
|
<div className="flex flex-col flex-1 min-h-screen">
|
|
{/* Navbar */}
|
|
<div className="sticky top-0 z-20 bg-gray-50 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800">
|
|
<Navbar onSidebarToggle={toggleSidebar} />
|
|
</div>
|
|
|
|
{/* Page Content */}
|
|
<main className="flex-1 py-6 px-4 sm:px-6 lg:px-8 overflow-y-auto">
|
|
{children}
|
|
</main>
|
|
</div>
|
|
</div>
|
|
|
|
);
|
|
};
|
|
|
|
// App Routes Component
|
|
const AppRoutes = () => {
|
|
return (
|
|
<Routes>
|
|
<Route path="/login" element={<Login />} />
|
|
<Route path="/forgot-password" element={<ForgotPassword />} />
|
|
<Route
|
|
path="/"
|
|
element={
|
|
<ProtectedRoute>
|
|
<Layout>
|
|
<Dashboard />
|
|
</Layout>
|
|
</ProtectedRoute>
|
|
}
|
|
/>
|
|
<Route
|
|
path="/transactions"
|
|
element={
|
|
<ProtectedRoute>
|
|
<Layout>
|
|
<Transactions />
|
|
</Layout>
|
|
</ProtectedRoute>
|
|
}
|
|
/>
|
|
<Route
|
|
path="/settings"
|
|
element={
|
|
<ProtectedRoute>
|
|
<Layout>
|
|
<Settings />
|
|
</Layout>
|
|
</ProtectedRoute>
|
|
}
|
|
/>
|
|
<Route
|
|
path="/roles"
|
|
element={
|
|
<ProtectedRoute>
|
|
<Layout>
|
|
<Roles />
|
|
</Layout>
|
|
</ProtectedRoute>
|
|
}
|
|
/>
|
|
<Route path="*" element={<Navigate to="/" />} />
|
|
</Routes>
|
|
);
|
|
};
|
|
|
|
// Main App Component
|
|
const App = () => {
|
|
return (
|
|
<Router>
|
|
<div className="App">
|
|
<AppRoutes />
|
|
</div>
|
|
</Router>
|
|
);
|
|
};
|
|
|
|
export default App; |