From c8897ba69cf04ae540972bee64556eb2e0ae422d Mon Sep 17 00:00:00 2001
From: jessikitty <jess.rogerson.29@outlook.com>
Date: Tue, 27 Jan 2026 22:29:34 +1100
Subject: [PATCH] Update App.tsx with routing and authentication

---
 frontend/src/App.tsx | 155 ++++++++++++++++++++++---------------------
 1 file changed, 79 insertions(+), 76 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index d628be3..1759338 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,83 +1,86 @@
-import { useState } from 'react'
+import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+import { AuthProvider, useAuth } from './contexts/AuthContext';
+import Login from './pages/Login';
+import Dashboard from './pages/Dashboard';
 
-function App() {
-  const [count, setCount] = useState(0)
+// Protected route wrapper
+function ProtectedRoute({ children }: { children: React.ReactNode }) {
+  const { user, isLoading } = useAuth();
 
-  return (
-    <div className="min-h-screen bg-gray-900 text-white flex items-center justify-center">
-      <div className="max-w-4xl mx-auto p-8">
+  if (isLoading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gray-50">
         <div className="text-center">
-          <h1 className="text-5xl font-bold mb-4 bg-gradient-to-r from-blue-500 to-purple-600 bg-clip-text text-transparent">
-            🏠 Family Hub
-          </h1>
-          <p className="text-xl text-gray-300 mb-8">
-            Home Management System
-          </p>
-          
-          <div className="bg-gray-800 rounded-lg p-8 shadow-xl mb-8">
-            <h2 className="text-2xl font-semibold mb-4">Welcome!</h2>
-            <p className="text-gray-400 mb-6">
-              Family Hub is starting up. The backend API should be available at{' '}
-              <a 
-                href="http://localhost:8000/docs" 
-                className="text-blue-400 hover:text-blue-300 underline"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                http://localhost:8000/docs
-              </a>
-            </p>
-            
-            <div className="mb-6">
-              <button
-                onClick={() => setCount((count) => count + 1)}
-                className="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg transition-colors"
-              >
-                Count is {count}
-              </button>
-            </div>
-
-            <div className="text-left space-y-4 text-sm text-gray-400">
-              <div>
-                <h3 className="text-white font-semibold mb-2">✅ Phase 1 Complete:</h3>
-                <ul className="list-disc list-inside space-y-1 ml-4">
-                  <li>Backend API with authentication</li>
-                  <li>Database models for users, chores, meals</li>
-                  <li>React frontend foundation</li>
-                  <li>Docker setup</li>
-                </ul>
-              </div>
-              
-              <div>
-                <h3 className="text-white font-semibold mb-2">🚧 Coming Next (Phase 2):</h3>
-                <ul className="list-disc list-inside space-y-1 ml-4">
-                  <li>Chore management system</li>
-                  <li>User login interface</li>
-                  <li>Dashboard with today's tasks</li>
-                  <li>Assignment and completion tracking</li>
-                </ul>
-              </div>
-            </div>
-          </div>
-
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
-            <div className="bg-gray-800 p-4 rounded-lg">
-              <h3 className="font-semibold mb-2">📅 Calendar</h3>
-              <p className="text-gray-400">Phase 3</p>
-            </div>
-            <div className="bg-gray-800 p-4 rounded-lg">
-              <h3 className="font-semibold mb-2">🍽️ Meals</h3>
-              <p className="text-gray-400">Phase 4</p>
-            </div>
-            <div className="bg-gray-800 p-4 rounded-lg">
-              <h3 className="font-semibold mb-2">🏡 Home Assistant</h3>
-              <p className="text-gray-400">Phase 6</p>
-            </div>
-          </div>
+          <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
+          <p className="mt-4 text-gray-600">Loading...</p>
         </div>
       </div>
-    </div>
-  )
+    );
+  }
+
+  if (!user) {
+    return <Navigate to="/login" replace />;
+  }
+
+  return <>{children}</>;
 }
 
-export default App
+// Public route wrapper (redirects to dashboard if already logged in)
+function PublicRoute({ children }: { children: React.ReactNode }) {
+  const { user, isLoading } = useAuth();
+
+  if (isLoading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gray-50">
+        <div className="text-center">
+          <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
+          <p className="mt-4 text-gray-600">Loading...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (user) {
+    return <Navigate to="/dashboard" replace />;
+  }
+
+  return <>{children}</>;
+}
+
+function App() {
+  return (
+    <Router>
+      <AuthProvider>
+        <Routes>
+          {/* Public routes */}
+          <Route
+            path="/login"
+            element={
+              <PublicRoute>
+                <Login />
+              </PublicRoute>
+            }
+          />
+
+          {/* Protected routes */}
+          <Route
+            path="/dashboard"
+            element={
+              <ProtectedRoute>
+                <Dashboard />
+              </ProtectedRoute>
+            }
+          />
+
+          {/* Default route */}
+          <Route path="/" element={<Navigate to="/dashboard" replace />} />
+
+          {/* 404 catch-all */}
+          <Route path="*" element={<Navigate to="/dashboard" replace />} />
+        </Routes>
+      </AuthProvider>
+    </Router>
+  );
+}
+
+export default App;