Added Login and Profile Page

Author: PranshuLakhotia

frontend/package-lock.json

@@ -15,6 +15,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hot-toast": "^2.5.2",
+    "react-router-dom": "^7.5.0",
     "recharts": "^2.15.1",
     "tailwind-merge": "^3.0.2"
   },

frontend/package.json

@@ -1,59 +1,104 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
+import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
 import { AnimatePresence } from 'framer-motion';
-
 import Sidebar from './components/layout/Sidebar';
 import Dashboard from './components/dashboard/Dashboard';
-import  BotIntegrationPage from './components/integration/BotIntegrationPage';
+import BotIntegrationPage from './components/integration/BotIntegrationPage';
 import ContributorsPage from './components/contributors/ContributorsPage';
 import PullRequestsPage from './components/pages/PullRequestsPage';
 import Settings from './components/pages/SettingsPage';
-import AnalyticsPage from './components/pages/AnalyticsPage'
+import AnalyticsPage from './components/pages/AnalyticsPage';
 import SupportPage from './components/pages/SupportPage';
-
+import LoginPage from './components/pages/LoginPage';
+import ProfilePage from './components/pages/ProfilePage';
 
 function App() {
   const [isSidebarOpen, setIsSidebarOpen] = useState(true);
   const [activePage, setActivePage] = useState('dashboard');
+  const [isAuthenticated, setIsAuthenticated] = useState<boolean>(false);
+
+  useEffect(() => {
+    const auth = localStorage.getItem('isAuthenticated');
+    setIsAuthenticated(auth === 'true');
+  }, []);
+
+  const handleLogin = () => {
+    setIsAuthenticated(true);
+    localStorage.setItem('isAuthenticated', 'true');
+  };
+
+  const handleLogout = () => {
+    setIsAuthenticated(false);
+    localStorage.removeItem('isAuthenticated');
+  };
 
   const renderPage = () => {
     switch (activePage) {
-        case 'dashboard':
-            return <Dashboard />;
-        case 'integration':
-            return <BotIntegrationPage />;
-        case 'contributors':
-            return <ContributorsPage />;
-        case 'analytics':
-            return <AnalyticsPage/>
-        case 'prs':
-            return <PullRequestsPage />;
-        case 'support':
-            return <SupportPage/>
-        case 'settings':
-            return <Settings />;
-        default:
-            return <Dashboard />;
+      case 'dashboard':
+        return <Dashboard />;
+      case 'integration':
+        return <BotIntegrationPage />;
+      case 'contributors':
+        return <ContributorsPage />;
+      case 'analytics':
+        return <AnalyticsPage />;
+      case 'prs':
+        return <PullRequestsPage />;
+      case 'support':
+        return <SupportPage />;
+      case 'settings':
+        return <Settings />;
+      case 'profile':
+        return <ProfilePage />;
+      default:
+        return <Dashboard />;
     }
   };
 
   return (
-    <div className="min-h-screen bg-gray-950 text-white">
-      <Sidebar 
-        isOpen={isSidebarOpen} 
-        setIsOpen={setIsSidebarOpen}
-        activePage={activePage}
-        setActivePage={setActivePage}
-      />
-      
-      <main className={`transition-all duration-300 ${isSidebarOpen ? 'ml-64' : 'ml-20'}`}>
-        <div className="p-8">
-          <AnimatePresence mode="wait">
-            {renderPage()}
-          </AnimatePresence>
-        </div>
-      </main>
-    </div>
+    <Router>
+      <div className="min-h-screen bg-gray-950 text-white">
+        <Routes>
+          <Route
+            path="/login"
+            element={
+              isAuthenticated ? (
+                <Navigate to="/" replace />
+              ) : (
+                <LoginPage onLogin={handleLogin} />
+              )
+            }
+          />
+          <Route
+            path="/*"
+            element={
+              isAuthenticated ? (
+                <div className="flex">
+                  <Sidebar
+                    isOpen={isSidebarOpen}
+                    setIsOpen={setIsSidebarOpen}
+                    activePage={activePage}
+                    setActivePage={setActivePage}
+                  />
+                  <main
+                    className={`transition-all duration-300 flex-1 ${
+                      isSidebarOpen ? 'ml-64' : 'ml-20'
+                    }`}
+                  >
+                    <div className="p-8">
+                      <AnimatePresence mode="wait">{renderPage()}</AnimatePresence>
+                    </div>
+                  </main>
+                </div>
+              ) : (
+                <Navigate to="/login" replace />
+              )
+            }
+          />
+        </Routes>
+      </div>
+    </Router>
   );
 }
 
-export default App;
+export default App;

frontend/src/App.tsx

@@ -9,7 +9,8 @@ import {
   GitPullRequest,
   MessageCircleQuestion,
   Menu,
-  Settings
+  Settings,
+  User
 } from 'lucide-react';
 
 interface SidebarProps {
@@ -37,6 +38,7 @@ const Sidebar: React.FC<SidebarProps> = ({ isOpen, setIsOpen, activePage, setAct
         { icon: <GitPullRequest size={20} />, label: 'Pull Requests', id: 'prs' },
         { icon: <MessageCircleQuestion size={20} />, label: 'Support', id: 'support' },
         { icon: <Settings size={20} />, label: 'Settings', id: 'settings' },
+        { icon: <User size={20} />, label: 'Profile', id: 'profile' },
       ].map((item) => (
         <button
           key={item.id}