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>
+  );
+}