Files
bellsystems-cp/frontend/src/App.jsx

74 lines
2.3 KiB
JavaScript

import { Routes, Route, Navigate } from "react-router-dom";
import { useAuth } from "./auth/AuthContext";
import LoginPage from "./auth/LoginPage";
import MainLayout from "./layout/MainLayout";
import MelodyList from "./melodies/MelodyList";
import MelodyDetail from "./melodies/MelodyDetail";
import MelodyForm from "./melodies/MelodyForm";
import MelodySettings from "./melodies/MelodySettings";
import DeviceList from "./devices/DeviceList";
import DeviceDetail from "./devices/DeviceDetail";
import DeviceForm from "./devices/DeviceForm";
function ProtectedRoute({ children }) {
const { user, loading } = useAuth();
if (loading) {
return (
<div className="min-h-screen bg-gray-100 flex items-center justify-center">
<p className="text-gray-500">Loading...</p>
</div>
);
}
if (!user) {
return <Navigate to="/login" replace />;
}
return children;
}
function DashboardPage() {
const { user } = useAuth();
return (
<div>
<h1 className="text-2xl font-bold text-gray-900 mb-4">Dashboard</h1>
<p className="text-gray-600">
Welcome, {user?.name}. You are logged in as{" "}
<span className="font-medium">{user?.role}</span>.
</p>
</div>
);
}
export default function App() {
return (
<Routes>
<Route path="/login" element={<LoginPage />} />
<Route
element={
<ProtectedRoute>
<MainLayout />
</ProtectedRoute>
}
>
<Route index element={<DashboardPage />} />
<Route path="melodies" element={<MelodyList />} />
<Route path="melodies/settings" element={<MelodySettings />} />
<Route path="melodies/new" element={<MelodyForm />} />
<Route path="melodies/:id" element={<MelodyDetail />} />
<Route path="melodies/:id/edit" element={<MelodyForm />} />
<Route path="devices" element={<DeviceList />} />
<Route path="devices/new" element={<DeviceForm />} />
<Route path="devices/:id" element={<DeviceDetail />} />
<Route path="devices/:id/edit" element={<DeviceForm />} />
{/* Phase 4+ routes:
<Route path="users" element={<UserList />} />
<Route path="mqtt" element={<MqttDashboard />} />
*/}
<Route path="*" element={<Navigate to="/" replace />} />
</Route>
</Routes>
);
}