-
-
BellSystems Admin Panel
-
Phase 0 — Scaffolding complete
+import { Routes, Route, Navigate } from "react-router-dom";
+import { useAuth } from "./auth/AuthContext";
+import LoginPage from "./auth/LoginPage";
+import MainLayout from "./layout/MainLayout";
+
+function ProtectedRoute({ children }) {
+ const { user, loading } = useAuth();
+
+ if (loading) {
+ return (
+
-
- )
+ );
+ }
+
+ if (!user) {
+ return
;
+ }
+
+ return children;
}
-export default App
+function DashboardPage() {
+ const { user } = useAuth();
+ return (
+
+
Dashboard
+
+ Welcome, {user?.name}. You are logged in as{" "}
+ {user?.role}.
+
+
+ );
+}
+
+export default function App() {
+ return (
+
+ } />
+
+
+
+ }
+ >
+ } />
+ {/* Phase 2+ routes:
+ } />
+ } />
+ } />
+ } />
+ */}
+ } />
+
+
+ );
+}
diff --git a/frontend/src/api/client.js b/frontend/src/api/client.js
index 5325f6b..86a1c87 100644
--- a/frontend/src/api/client.js
+++ b/frontend/src/api/client.js
@@ -1 +1,63 @@
-// TODO: Axios/fetch wrapper with JWT
+const API_BASE = "/api";
+
+class ApiClient {
+ getToken() {
+ return localStorage.getItem("access_token");
+ }
+
+ async request(endpoint, options = {}) {
+ const url = `${API_BASE}${endpoint}`;
+ const token = this.getToken();
+
+ const headers = {
+ "Content-Type": "application/json",
+ ...options.headers,
+ };
+
+ if (token) {
+ headers["Authorization"] = `Bearer ${token}`;
+ }
+
+ const response = await fetch(url, { ...options, headers });
+
+ if (response.status === 401) {
+ localStorage.removeItem("access_token");
+ localStorage.removeItem("user");
+ window.location.href = "/login";
+ throw new Error("Session expired");
+ }
+
+ if (!response.ok) {
+ const error = await response.json().catch(() => ({}));
+ throw new Error(error.detail || `Request failed: ${response.status}`);
+ }
+
+ if (response.status === 204) return null;
+ return response.json();
+ }
+
+ get(endpoint) {
+ return this.request(endpoint, { method: "GET" });
+ }
+
+ post(endpoint, data) {
+ return this.request(endpoint, {
+ method: "POST",
+ body: JSON.stringify(data),
+ });
+ }
+
+ put(endpoint, data) {
+ return this.request(endpoint, {
+ method: "PUT",
+ body: JSON.stringify(data),
+ });
+ }
+
+ delete(endpoint) {
+ return this.request(endpoint, { method: "DELETE" });
+ }
+}
+
+const api = new ApiClient();
+export default api;
diff --git a/frontend/src/auth/AuthContext.jsx b/frontend/src/auth/AuthContext.jsx
index df8b7dd..75d78d4 100644
--- a/frontend/src/auth/AuthContext.jsx
+++ b/frontend/src/auth/AuthContext.jsx
@@ -1 +1,70 @@
-// TODO: JWT token state management
+import { createContext, useContext, useState, useEffect } from "react";
+import api from "../api/client";
+
+const AuthContext = createContext(null);
+
+export function AuthProvider({ children }) {
+ const [user, setUser] = useState(() => {
+ const stored = localStorage.getItem("user");
+ return stored ? JSON.parse(stored) : null;
+ });
+ const [loading, setLoading] = useState(true);
+
+ useEffect(() => {
+ const token = localStorage.getItem("access_token");
+ if (!token) {
+ setUser(null);
+ setLoading(false);
+ return;
+ }
+
+ try {
+ const payload = JSON.parse(atob(token.split(".")[1]));
+ if (payload.exp * 1000 < Date.now()) {
+ localStorage.removeItem("access_token");
+ localStorage.removeItem("user");
+ setUser(null);
+ }
+ } catch {
+ localStorage.removeItem("access_token");
+ localStorage.removeItem("user");
+ setUser(null);
+ }
+ setLoading(false);
+ }, []);
+
+ const login = async (email, password) => {
+ const data = await api.post("/auth/login", { email, password });
+ localStorage.setItem("access_token", data.access_token);
+ const userInfo = { name: data.name, role: data.role };
+ localStorage.setItem("user", JSON.stringify(userInfo));
+ setUser(userInfo);
+ return data;
+ };
+
+ const logout = () => {
+ localStorage.removeItem("access_token");
+ localStorage.removeItem("user");
+ setUser(null);
+ };
+
+ const hasRole = (...roles) => {
+ if (!user) return false;
+ if (user.role === "superadmin") return true;
+ return roles.includes(user.role);
+ };
+
+ return (
+
+ {children}
+
+ );
+}
+
+export function useAuth() {
+ const context = useContext(AuthContext);
+ if (!context) {
+ throw new Error("useAuth must be used within an AuthProvider");
+ }
+ return context;
+}
diff --git a/frontend/src/auth/LoginPage.jsx b/frontend/src/auth/LoginPage.jsx
index f5b6064..3d54d59 100644
--- a/frontend/src/auth/LoginPage.jsx
+++ b/frontend/src/auth/LoginPage.jsx
@@ -1 +1,81 @@
-// TODO: Login page component
+import { useState } from "react";
+import { useAuth } from "./AuthContext";
+import { useNavigate } from "react-router-dom";
+
+export default function LoginPage() {
+ const [email, setEmail] = useState("");
+ const [password, setPassword] = useState("");
+ const [error, setError] = useState("");
+ const [isLoading, setIsLoading] = useState(false);
+ const { login } = useAuth();
+ const navigate = useNavigate();
+
+ const handleSubmit = async (e) => {
+ e.preventDefault();
+ setError("");
+ setIsLoading(true);
+ try {
+ await login(email, password);
+ navigate("/", { replace: true });
+ } catch (err) {
+ setError(err.message || "Login failed");
+ } finally {
+ setIsLoading(false);
+ }
+ };
+
+ return (
+
+
+
+ BellSystems Admin
+
+
+ {error && (
+
+ {error}
+
+ )}
+
+
+
+
+ );
+}
diff --git a/frontend/src/layout/Header.jsx b/frontend/src/layout/Header.jsx
index 7daad1b..f66be16 100644
--- a/frontend/src/layout/Header.jsx
+++ b/frontend/src/layout/Header.jsx
@@ -1 +1,28 @@
-// TODO: Header component
+import { useAuth } from "../auth/AuthContext";
+
+export default function Header() {
+ const { user, logout } = useAuth();
+
+ return (
+
+ );
+}
diff --git a/frontend/src/layout/MainLayout.jsx b/frontend/src/layout/MainLayout.jsx
index 2811985..8dd3cd8 100644
--- a/frontend/src/layout/MainLayout.jsx
+++ b/frontend/src/layout/MainLayout.jsx
@@ -1 +1,17 @@
-// TODO: Main layout wrapper
+import { Outlet } from "react-router-dom";
+import Header from "./Header";
+import Sidebar from "./Sidebar";
+
+export default function MainLayout() {
+ return (
+
+ );
+}
diff --git a/frontend/src/layout/Sidebar.jsx b/frontend/src/layout/Sidebar.jsx
index 1dafa44..adddc29 100644
--- a/frontend/src/layout/Sidebar.jsx
+++ b/frontend/src/layout/Sidebar.jsx
@@ -1 +1,42 @@
-// TODO: Navigation menu
+import { NavLink } from "react-router-dom";
+import { useAuth } from "../auth/AuthContext";
+
+const navItems = [
+ { to: "/", label: "Dashboard", roles: null },
+ { to: "/melodies", label: "Melodies", roles: ["superadmin", "melody_editor", "viewer"] },
+ { to: "/devices", label: "Devices", roles: ["superadmin", "device_manager", "viewer"] },
+ { to: "/users", label: "Users", roles: ["superadmin", "user_manager", "viewer"] },
+ { to: "/mqtt", label: "MQTT", roles: ["superadmin", "device_manager", "viewer"] },
+];
+
+export default function Sidebar() {
+ const { hasRole } = useAuth();
+
+ const visibleItems = navItems.filter(
+ (item) => item.roles === null || hasRole(...item.roles)
+ );
+
+ return (
+
+ );
+}
diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
index b9a1a6d..64be51b 100644
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@@ -1,10 +1,16 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './index.css'
-import App from './App.jsx'
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
+import { AuthProvider } from "./auth/AuthContext";
+import "./index.css";
+import App from "./App.jsx";
-createRoot(document.getElementById('root')).render(
+createRoot(document.getElementById("root")).render(
-
- ,
-)
+
+
+
+
+
+
+);