Phase 1 Complete by Claude Code

frontend/src/App.jsx

@@ -1,12 +1,59 @@
-function App() {
-  return (
-    <div className="min-h-screen bg-gray-100 flex items-center justify-center">
-      <div className="text-center">
-        <h1 className="text-3xl font-bold text-gray-900">BellSystems Admin Panel</h1>
-        <p className="mt-2 text-gray-600">Phase 0 — Scaffolding complete</p>
+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 (
+      <div className="min-h-screen bg-gray-100 flex items-center justify-center">
+        <p className="text-gray-500">Loading...</p>
       </div>
-    </div>
-  )
+    );
+  }
+
+  if (!user) {
+    return <Navigate to="/login" replace />;
+  }
+
+  return children;
 }
 
-export default App
+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 />} />
+        {/* Phase 2+ routes:
+        <Route path="melodies" element={<MelodyList />} />
+        <Route path="devices" element={<DeviceList />} />
+        <Route path="users" element={<UserList />} />
+        <Route path="mqtt" element={<MqttDashboard />} />
+        */}
+        <Route path="*" element={<Navigate to="/" replace />} />
+      </Route>
+    </Routes>
+  );
+}

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;

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 (
+    <AuthContext.Provider value={{ user, login, logout, loading, hasRole }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+export function useAuth() {
+  const context = useContext(AuthContext);
+  if (!context) {
+    throw new Error("useAuth must be used within an AuthProvider");
+  }
+  return context;
+}

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 (
+    <div className="min-h-screen bg-gray-100 flex items-center justify-center">
+      <div className="bg-white p-8 rounded-lg shadow-md w-full max-w-sm">
+        <h1 className="text-2xl font-bold text-gray-900 text-center mb-6">
+          BellSystems Admin
+        </h1>
+
+        {error && (
+          <div className="bg-red-50 border border-red-200 text-red-700 text-sm rounded-md p-3 mb-4">
+            {error}
+          </div>
+        )}
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
+              Email
+            </label>
+            <input
+              id="email"
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              required
+              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              placeholder="admin@bellsystems.com"
+            />
+          </div>
+
+          <div>
+            <label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-1">
+              Password
+            </label>
+            <input
+              id="password"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              required
+              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+            />
+          </div>
+
+          <button
+            type="submit"
+            disabled={isLoading}
+            className="w-full bg-blue-600 text-white py-2 rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+          >
+            {isLoading ? "Signing in..." : "Sign in"}
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}

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 (
+    <header className="bg-white border-b border-gray-200 px-6 py-3 flex items-center justify-between">
+      <h2 className="text-lg font-semibold text-gray-800">
+        BellSystems Admin Panel
+      </h2>
+
+      <div className="flex items-center gap-4">
+        <span className="text-sm text-gray-600">
+          {user?.name}
+          <span className="ml-2 px-2 py-0.5 bg-gray-100 text-gray-500 text-xs rounded-full">
+            {user?.role}
+          </span>
+        </span>
+        <button
+          onClick={logout}
+          className="text-sm text-red-600 hover:text-red-800 transition-colors"
+        >
+          Sign out
+        </button>
+      </div>
+    </header>
+  );
+}

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 (
+    <div className="flex min-h-screen bg-gray-100">
+      <Sidebar />
+      <div className="flex-1 flex flex-col">
+        <Header />
+        <main className="flex-1 p-6">
+          <Outlet />
+        </main>
+      </div>
+    </div>
+  );
+}

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 (
+    <aside className="w-56 bg-gray-900 text-white min-h-screen p-4">
+      <div className="text-xl font-bold mb-8 px-2">BellSystems</div>
+      <nav className="space-y-1">
+        {visibleItems.map((item) => (
+          <NavLink
+            key={item.to}
+            to={item.to}
+            end={item.to === "/"}
+            className={({ isActive }) =>
+              `block px-3 py-2 rounded-md text-sm transition-colors ${
+                isActive
+                  ? "bg-gray-700 text-white"
+                  : "text-gray-300 hover:bg-gray-800 hover:text-white"
+              }`
+            }
+          >
+            {item.label}
+          </NavLink>
+        ))}
+      </nav>
+    </aside>
+  );
+}

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(
   <StrictMode>
-    <App />
-  </StrictMode>,
-)
+    <BrowserRouter>
+      <AuthProvider>
+        <App />
+      </AuthProvider>
+    </BrowserRouter>
+  </StrictMode>
+);