161 lines
7.9 KiB
JavaScript
161 lines
7.9 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 BuilderList from "./melodies/builder/BuilderList";
|
|
import BuilderForm from "./melodies/builder/BuilderForm";
|
|
import DeviceList from "./devices/DeviceList";
|
|
import DeviceDetail from "./devices/DeviceDetail";
|
|
import DeviceForm from "./devices/DeviceForm";
|
|
import UserList from "./users/UserList";
|
|
import UserDetail from "./users/UserDetail";
|
|
import UserForm from "./users/UserForm";
|
|
import MqttDashboard from "./mqtt/MqttDashboard";
|
|
import CommandPanel from "./mqtt/CommandPanel";
|
|
import LogViewer from "./mqtt/LogViewer";
|
|
import NoteList from "./equipment/NoteList";
|
|
import NoteDetail from "./equipment/NoteDetail";
|
|
import NoteForm from "./equipment/NoteForm";
|
|
import StaffList from "./settings/StaffList";
|
|
import StaffDetail from "./settings/StaffDetail";
|
|
import StaffForm from "./settings/StaffForm";
|
|
|
|
function ProtectedRoute({ children }) {
|
|
const { user, loading } = useAuth();
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center" style={{ backgroundColor: "var(--bg-primary)" }}>
|
|
<p style={{ color: "var(--text-muted)" }}>Loading...</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!user) {
|
|
return <Navigate to="/login" replace />;
|
|
}
|
|
|
|
return children;
|
|
}
|
|
|
|
function PermissionGate({ section, action = "view", children }) {
|
|
const { hasPermission } = useAuth();
|
|
|
|
if (!hasPermission(section, action)) {
|
|
return (
|
|
<div className="flex flex-col items-center justify-center py-20">
|
|
<div className="rounded-lg border p-8 text-center max-w-md" style={{ backgroundColor: "var(--bg-card)", borderColor: "var(--border-primary)" }}>
|
|
<svg className="w-12 h-12 mx-auto mb-4" style={{ color: "var(--text-muted)" }} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
|
|
</svg>
|
|
<h2 className="text-lg font-semibold mb-2" style={{ color: "var(--text-heading)" }}>Access Denied</h2>
|
|
<p className="text-sm" style={{ color: "var(--text-muted)" }}>
|
|
You don't have permission to access this feature.
|
|
Please contact an administrator if you need access.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return children;
|
|
}
|
|
|
|
function RoleGate({ roles, children }) {
|
|
const { hasRole } = useAuth();
|
|
|
|
if (!hasRole(...roles)) {
|
|
return (
|
|
<div className="flex flex-col items-center justify-center py-20">
|
|
<div className="rounded-lg border p-8 text-center max-w-md" style={{ backgroundColor: "var(--bg-card)", borderColor: "var(--border-primary)" }}>
|
|
<svg className="w-12 h-12 mx-auto mb-4" style={{ color: "var(--text-muted)" }} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
|
|
</svg>
|
|
<h2 className="text-lg font-semibold mb-2" style={{ color: "var(--text-heading)" }}>Access Denied</h2>
|
|
<p className="text-sm" style={{ color: "var(--text-muted)" }}>
|
|
You don't have permission to access this feature.
|
|
Please contact an administrator if you need access.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return children;
|
|
}
|
|
|
|
function DashboardPage() {
|
|
const { user } = useAuth();
|
|
return (
|
|
<div>
|
|
<h1 className="text-2xl font-bold mb-4" style={{ color: "var(--text-heading)" }}>Dashboard</h1>
|
|
<p style={{ color: "var(--text-secondary)" }}>
|
|
Welcome, {user?.name}. You are logged in as{" "}
|
|
<span className="font-medium" style={{ color: "var(--accent)" }}>{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 />} />
|
|
|
|
{/* Melodies */}
|
|
<Route path="melodies" element={<PermissionGate section="melodies"><MelodyList /></PermissionGate>} />
|
|
<Route path="melodies/settings" element={<PermissionGate section="melodies"><MelodySettings /></PermissionGate>} />
|
|
<Route path="melodies/new" element={<PermissionGate section="melodies" action="add"><MelodyForm /></PermissionGate>} />
|
|
<Route path="melodies/builder" element={<PermissionGate section="melodies" action="edit"><BuilderList /></PermissionGate>} />
|
|
<Route path="melodies/builder/new" element={<PermissionGate section="melodies" action="edit"><BuilderForm /></PermissionGate>} />
|
|
<Route path="melodies/builder/:id" element={<PermissionGate section="melodies" action="edit"><BuilderForm /></PermissionGate>} />
|
|
<Route path="melodies/:id" element={<PermissionGate section="melodies"><MelodyDetail /></PermissionGate>} />
|
|
<Route path="melodies/:id/edit" element={<PermissionGate section="melodies" action="edit"><MelodyForm /></PermissionGate>} />
|
|
|
|
{/* Devices */}
|
|
<Route path="devices" element={<PermissionGate section="devices"><DeviceList /></PermissionGate>} />
|
|
<Route path="devices/new" element={<PermissionGate section="devices" action="add"><DeviceForm /></PermissionGate>} />
|
|
<Route path="devices/:id" element={<PermissionGate section="devices"><DeviceDetail /></PermissionGate>} />
|
|
<Route path="devices/:id/edit" element={<PermissionGate section="devices" action="edit"><DeviceForm /></PermissionGate>} />
|
|
|
|
{/* App Users */}
|
|
<Route path="users" element={<PermissionGate section="app_users"><UserList /></PermissionGate>} />
|
|
<Route path="users/new" element={<PermissionGate section="app_users" action="add"><UserForm /></PermissionGate>} />
|
|
<Route path="users/:id" element={<PermissionGate section="app_users"><UserDetail /></PermissionGate>} />
|
|
<Route path="users/:id/edit" element={<PermissionGate section="app_users" action="edit"><UserForm /></PermissionGate>} />
|
|
|
|
{/* MQTT */}
|
|
<Route path="mqtt" element={<PermissionGate section="mqtt"><MqttDashboard /></PermissionGate>} />
|
|
<Route path="mqtt/commands" element={<PermissionGate section="mqtt"><CommandPanel /></PermissionGate>} />
|
|
<Route path="mqtt/logs" element={<PermissionGate section="mqtt"><LogViewer /></PermissionGate>} />
|
|
|
|
{/* Equipment Notes */}
|
|
<Route path="equipment/notes" element={<PermissionGate section="equipment"><NoteList /></PermissionGate>} />
|
|
<Route path="equipment/notes/new" element={<PermissionGate section="equipment" action="add"><NoteForm /></PermissionGate>} />
|
|
<Route path="equipment/notes/:id" element={<PermissionGate section="equipment"><NoteDetail /></PermissionGate>} />
|
|
<Route path="equipment/notes/:id/edit" element={<PermissionGate section="equipment" action="edit"><NoteForm /></PermissionGate>} />
|
|
|
|
{/* Settings - Staff Management */}
|
|
<Route path="settings/staff" element={<RoleGate roles={["sysadmin", "admin"]}><StaffList /></RoleGate>} />
|
|
<Route path="settings/staff/new" element={<RoleGate roles={["sysadmin", "admin"]}><StaffForm /></RoleGate>} />
|
|
<Route path="settings/staff/:id" element={<RoleGate roles={["sysadmin", "admin"]}><StaffDetail /></RoleGate>} />
|
|
<Route path="settings/staff/:id/edit" element={<RoleGate roles={["sysadmin", "admin"]}><StaffForm /></RoleGate>} />
|
|
|
|
<Route path="*" element={<Navigate to="/" replace />} />
|
|
</Route>
|
|
</Routes>
|
|
);
|
|
}
|