From be74399bcca6ed813323968c16af679e5311ffdd Mon Sep 17 00:00:00 2001
From: Gopichand Dandimeni
 <dandimenichand.230105181015@sandipuniversity.edu.in>
Date: Tue, 6 Jan 2026 13:50:28 +0530
Subject: [PATCH] feat: add enhanced navigation system with active route
 indicators

---
 .../src/app/routes/AppRoutes.tsx              | 18 +++--
 .../Dashboard/V1/Component/Pages/APIPage.tsx  | 53 +++++++++++++
 .../Dashboard/V1/Component/Pages/ChatPage.tsx | 25 +++++++
 .../V1/Component/Pages/DocumentsPage.tsx      | 35 +++++++++
 .../V1/Component/Pages/SettingsPage.tsx       | 48 ++++++++++++
 .../src/shared/component/v1/Breadcrumb.tsx    | 60 +++++++++++++++
 .../src/shared/component/v1/Navbar.tsx        | 75 ++++++++++++++-----
 7 files changed, 287 insertions(+), 27 deletions(-)
 create mode 100644 LocalMind-Frontend/src/features/Dashboard/V1/Component/Pages/APIPage.tsx
 create mode 100644 LocalMind-Frontend/src/features/Dashboard/V1/Component/Pages/ChatPage.tsx
 create mode 100644 LocalMind-Frontend/src/features/Dashboard/V1/Component/Pages/DocumentsPage.tsx
 create mode 100644 LocalMind-Frontend/src/features/Dashboard/V1/Component/Pages/SettingsPage.tsx
 create mode 100644 LocalMind-Frontend/src/shared/component/v1/Breadcrumb.tsx

diff --git a/LocalMind-Frontend/src/app/routes/AppRoutes.tsx b/LocalMind-Frontend/src/app/routes/AppRoutes.tsx
index af480f1..7970da0 100644
--- a/LocalMind-Frontend/src/app/routes/AppRoutes.tsx
+++ b/LocalMind-Frontend/src/app/routes/AppRoutes.tsx
@@ -2,6 +2,10 @@ import React from 'react'
 import { Route, Routes } from 'react-router-dom'
 import HomePage from '../../features/Dashboard/V1/Component/Pages/HomePage'
 import LoginPage from '../../shared/component/v1/LoginPage'
+import ChatPage from '../../features/Dashboard/V1/Component/Pages/ChatPage'
+import DocumentsPage from '../../features/Dashboard/V1/Component/Pages/DocumentsPage'
+import SettingsPage from '../../features/Dashboard/V1/Component/Pages/SettingsPage'
+import APIPage from '../../features/Dashboard/V1/Component/Pages/APIPage'
 
 const AppRoutes: React.FC = () => {
   return (
@@ -9,16 +13,16 @@ const AppRoutes: React.FC = () => {
       {/* Homepage */}
       <Route path="/" element={<HomePage />} />
 
-      {/* Sign Up / Login Page */}
-      <Route path="/login" element={<LoginPage />} />
+      {/* Main Application Pages */}
+      <Route path="/chat" element={<ChatPage />} />
+      <Route path="/documents" element={<DocumentsPage />} />
+      <Route path="/settings" element={<SettingsPage />} />
+      <Route path="/api" element={<APIPage />} />
 
-      {/* Register Page - TODO: Create dedicated RegisterPage component */}
+      {/* Authentication Pages */}
+      <Route path="/login" element={<LoginPage />} />
       <Route path="/register" element={<LoginPage />} />
-
-      {/* Forgot Password Page - TODO: Create ForgotPasswordPage component */}
       <Route path="/forgot-password" element={<LoginPage />} />
-
-      {/* Chat Page */}
     </Routes>
   )
 }
diff --git a/LocalMind-Frontend/src/features/Dashboard/V1/Component/Pages/APIPage.tsx b/LocalMind-Frontend/src/features/Dashboard/V1/Component/Pages/APIPage.tsx
new file mode 100644
index 0000000..9c09dc4
--- /dev/null
+++ b/LocalMind-Frontend/src/features/Dashboard/V1/Component/Pages/APIPage.tsx
@@ -0,0 +1,53 @@
+import React from 'react'
+import Breadcrumb from '../../../../../shared/component/v1/Breadcrumb'
+
+const APIPage: React.FC = () => {
+  return (
+    <div className="min-h-screen bg-[#1E1E1E] text-white pt-20 px-6">
+      <div className="max-w-6xl mx-auto">
+        <Breadcrumb />
+        <header className="mb-8">
+          <h1 className="text-3xl font-bold mb-2">API Information</h1>
+          <p className="text-gray-400">Manage API keys and view documentation</p>
+        </header>
+        
+        <div className="space-y-6">
+          <div className="bg-zinc-900/50 rounded-lg p-6 border border-zinc-700">
+            <h3 className="text-xl font-semibold mb-4">API Keys</h3>
+            <div className="space-y-4">
+              <div className="flex items-center justify-between p-4 bg-zinc-800 rounded-lg">
+                <div>
+                  <h4 className="font-medium">Production Key</h4>
+                  <p className="text-sm text-gray-400 font-mono">lm_****************************</p>
+                </div>
+                <button className="px-4 py-2 bg-red-600 text-sm rounded-lg hover:bg-red-700">
+                  Revoke
+                </button>
+              </div>
+            </div>
+            <button className="mt-4 px-4 py-2 bg-blue-600 text-sm rounded-lg hover:bg-blue-700">
+              Generate New Key
+            </button>
+          </div>
+          
+          <div className="bg-zinc-900/50 rounded-lg p-6 border border-zinc-700">
+            <h3 className="text-xl font-semibold mb-4">API Endpoints</h3>
+            <div className="space-y-3">
+              <div className="p-3 bg-zinc-800 rounded font-mono text-sm">
+                <span className="text-green-400">POST</span> /api/v1/chat/send-message
+              </div>
+              <div className="p-3 bg-zinc-800 rounded font-mono text-sm">
+                <span className="text-blue-400">GET</span> /api/v1/upload/files
+              </div>
+              <div className="p-3 bg-zinc-800 rounded font-mono text-sm">
+                <span className="text-yellow-400">PUT</span> /api/v1/user/ai-config
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default APIPage
\ No newline at end of file
diff --git a/LocalMind-Frontend/src/features/Dashboard/V1/Component/Pages/ChatPage.tsx b/LocalMind-Frontend/src/features/Dashboard/V1/Component/Pages/ChatPage.tsx
new file mode 100644
index 0000000..2a8d295
--- /dev/null
+++ b/LocalMind-Frontend/src/features/Dashboard/V1/Component/Pages/ChatPage.tsx
@@ -0,0 +1,25 @@
+import React from 'react'
+import Breadcrumb from '../../../../../shared/component/v1/Breadcrumb'
+
+const ChatPage: React.FC = () => {
+  return (
+    <div className="min-h-screen bg-[#1E1E1E] text-white pt-20 px-6">
+      <div className="max-w-6xl mx-auto">
+        <Breadcrumb />
+        <header className="mb-8">
+          <h1 className="text-3xl font-bold mb-2">Chat Interface</h1>
+          <p className="text-gray-400">Interact with AI models in real-time</p>
+        </header>
+        
+        <div className="bg-zinc-900/50 rounded-lg p-6 border border-zinc-700">
+          <div className="text-center py-20">
+            <h3 className="text-xl mb-4">Chat Interface Coming Soon</h3>
+            <p className="text-gray-400">Real-time AI chat system will be available here</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default ChatPage
\ No newline at end of file
diff --git a/LocalMind-Frontend/src/features/Dashboard/V1/Component/Pages/DocumentsPage.tsx b/LocalMind-Frontend/src/features/Dashboard/V1/Component/Pages/DocumentsPage.tsx
new file mode 100644
index 0000000..336a4d7
--- /dev/null
+++ b/LocalMind-Frontend/src/features/Dashboard/V1/Component/Pages/DocumentsPage.tsx
@@ -0,0 +1,35 @@
+import React from 'react'
+import Breadcrumb from '../../../../../shared/component/v1/Breadcrumb'
+
+const DocumentsPage: React.FC = () => {
+  return (
+    <div className="min-h-screen bg-[#1E1E1E] text-white pt-20 px-6">
+      <div className="max-w-6xl mx-auto">
+        <Breadcrumb />
+        <header className="mb-8">
+          <h1 className="text-3xl font-bold mb-2">Document Upload & RAG</h1>
+          <p className="text-gray-400">Upload documents and train your AI with custom data</p>
+        </header>
+        
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          <div className="bg-zinc-900/50 rounded-lg p-6 border border-zinc-700">
+            <h3 className="text-xl font-semibold mb-4">Upload Documents</h3>
+            <div className="border-2 border-dashed border-zinc-600 rounded-lg p-8 text-center">
+              <p className="text-gray-400 mb-4">Drag & drop files here or click to browse</p>
+              <p className="text-sm text-gray-500">Supported: Excel, CSV, PDF, TXT</p>
+            </div>
+          </div>
+          
+          <div className="bg-zinc-900/50 rounded-lg p-6 border border-zinc-700">
+            <h3 className="text-xl font-semibold mb-4">Uploaded Files</h3>
+            <div className="text-center py-8">
+              <p className="text-gray-400">No files uploaded yet</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default DocumentsPage
\ No newline at end of file
diff --git a/LocalMind-Frontend/src/features/Dashboard/V1/Component/Pages/SettingsPage.tsx b/LocalMind-Frontend/src/features/Dashboard/V1/Component/Pages/SettingsPage.tsx
new file mode 100644
index 0000000..e314442
--- /dev/null
+++ b/LocalMind-Frontend/src/features/Dashboard/V1/Component/Pages/SettingsPage.tsx
@@ -0,0 +1,48 @@
+import React from 'react'
+import Breadcrumb from '../../../../../shared/component/v1/Breadcrumb'
+
+const SettingsPage: React.FC = () => {
+  return (
+    <div className="min-h-screen bg-[#1E1E1E] text-white pt-20 px-6">
+      <div className="max-w-6xl mx-auto">
+        <Breadcrumb />
+        <header className="mb-8">
+          <h1 className="text-3xl font-bold mb-2">Model Configuration</h1>
+          <p className="text-gray-400">Configure AI models and API settings</p>
+        </header>
+        
+        <div className="space-y-6">
+          <div className="bg-zinc-900/50 rounded-lg p-6 border border-zinc-700">
+            <h3 className="text-xl font-semibold mb-4">Local Models (Ollama)</h3>
+            <div className="space-y-4">
+              <div className="flex items-center justify-between p-4 bg-zinc-800 rounded-lg">
+                <div>
+                  <h4 className="font-medium">LLaMA 2</h4>
+                  <p className="text-sm text-gray-400">7B parameter model</p>
+                </div>
+                <span className="px-3 py-1 bg-green-600 text-xs rounded-full">Available</span>
+              </div>
+            </div>
+          </div>
+          
+          <div className="bg-zinc-900/50 rounded-lg p-6 border border-zinc-700">
+            <h3 className="text-xl font-semibold mb-4">Cloud Models</h3>
+            <div className="space-y-4">
+              <div className="flex items-center justify-between p-4 bg-zinc-800 rounded-lg">
+                <div>
+                  <h4 className="font-medium">Google Gemini</h4>
+                  <p className="text-sm text-gray-400">Configure API key</p>
+                </div>
+                <button className="px-4 py-2 bg-blue-600 text-sm rounded-lg hover:bg-blue-700">
+                  Configure
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default SettingsPage
\ No newline at end of file
diff --git a/LocalMind-Frontend/src/shared/component/v1/Breadcrumb.tsx b/LocalMind-Frontend/src/shared/component/v1/Breadcrumb.tsx
new file mode 100644
index 0000000..34492f3
--- /dev/null
+++ b/LocalMind-Frontend/src/shared/component/v1/Breadcrumb.tsx
@@ -0,0 +1,60 @@
+import React from 'react'
+import { Link, useLocation } from 'react-router-dom'
+
+interface BreadcrumbItem {
+  label: string
+  path: string
+}
+
+const Breadcrumb: React.FC = () => {
+  const location = useLocation()
+  
+  const getBreadcrumbs = (): BreadcrumbItem[] => {
+    const pathMap: Record<string, string> = {
+      '/': 'Home',
+      '/chat': 'Chat Interface',
+      '/documents': 'Documents & RAG',
+      '/settings': 'Model Settings',
+      '/api': 'API Information'
+    }
+
+    const currentPath = location.pathname
+    const breadcrumbs: BreadcrumbItem[] = []
+
+    if (currentPath !== '/') {
+      breadcrumbs.push({ label: 'Home', path: '/' })
+    }
+
+    if (pathMap[currentPath]) {
+      breadcrumbs.push({ label: pathMap[currentPath], path: currentPath })
+    }
+
+    return breadcrumbs
+  }
+
+  const breadcrumbs = getBreadcrumbs()
+
+  if (breadcrumbs.length <= 1) return null
+
+  return (
+    <nav className="flex items-center space-x-2 text-sm text-gray-400 mb-6">
+      {breadcrumbs.map((item, index) => (
+        <React.Fragment key={item.path}>
+          {index > 0 && <span className="text-gray-600">/</span>}
+          {index === breadcrumbs.length - 1 ? (
+            <span className="text-white font-medium">{item.label}</span>
+          ) : (
+            <Link 
+              to={item.path} 
+              className="hover:text-white transition-colors"
+            >
+              {item.label}
+            </Link>
+          )}
+        </React.Fragment>
+      ))}
+    </nav>
+  )
+}
+
+export default Breadcrumb
\ No newline at end of file
diff --git a/LocalMind-Frontend/src/shared/component/v1/Navbar.tsx b/LocalMind-Frontend/src/shared/component/v1/Navbar.tsx
index bfe080a..f556ad4 100644
--- a/LocalMind-Frontend/src/shared/component/v1/Navbar.tsx
+++ b/LocalMind-Frontend/src/shared/component/v1/Navbar.tsx
@@ -1,39 +1,74 @@
 import React from 'react'
 import Artificialintelligence from '../../../assets/Artificial intelligence.png'
-import { NavLink } from 'react-router-dom'
+import { NavLink, useLocation } from 'react-router-dom'
 
 const Navbar: React.FC = () => {
+  const location = useLocation()
+  const isAppRoute = ['/chat', '/documents', '/settings', '/api'].includes(location.pathname)
+
   const navLinkClass = ({ isActive }: { isActive: boolean }) =>
-    isActive ? 'text-white line-through opacity-80' : 'text-white'
+    `px-4 py-2 rounded-lg font-medium transition-all duration-200 ${
+      isActive 
+        ? 'bg-blue-600 text-white shadow-lg' 
+        : 'text-gray-300 hover:text-white hover:bg-zinc-700/50'
+    }`
+
+  const publicNavLinkClass = ({ isActive }: { isActive: boolean }) =>
+    isActive ? 'text-white border-b-2 border-blue-500' : 'text-gray-300 hover:text-white'
 
   return (
-    <div className="fixed top-2 left-1/2 z-30 flex gap-x-50 items-center justify-between -translate-x-1/2 bg-zinc-900/40 backdrop-blur-md px-5 py-2 rounded-full border border-zinc-500/50 text-white">
+    <div className="fixed top-2 left-1/2 z-30 flex gap-x-8 items-center justify-between -translate-x-1/2 bg-zinc-900/40 backdrop-blur-md px-6 py-3 rounded-full border border-zinc-500/50 text-white min-w-fit">
       <div className="flex gap-x-4 items-center">
         <img src={Artificialintelligence} className="w-6 h-6" alt="LocalMind logo" />
-        <h1 className="uppercase font-Satoshi tracking-wider font-bold text-xl">LocalMind</h1>
+        <NavLink to="/" className="uppercase font-Satoshi tracking-wider font-bold text-xl hover:text-blue-400 transition-colors">
+          LocalMind
+        </NavLink>
       </div>
 
-      <div className="flex gap-x-5 items-center">
-        <NavLink to="/" className={navLinkClass}>
-          Home
-        </NavLink>
-        <NavLink to="/docs" className={navLinkClass}>
-          Docs
-        </NavLink>
-        <NavLink to="/models" className={navLinkClass}>
-          Models
-        </NavLink>
-        <NavLink to="/play-ground" className={navLinkClass}>
-          PlayGround
-        </NavLink>
+      <div className="flex gap-x-2 items-center">
+        {isAppRoute ? (
+          // App Navigation (when user is in main app sections)
+          <>
+            <NavLink to="/chat" className={navLinkClass}>
+              💬 Chat
+            </NavLink>
+            <NavLink to="/documents" className={navLinkClass}>
+              📚 Documents
+            </NavLink>
+            <NavLink to="/settings" className={navLinkClass}>
+              ⚙️ Settings
+            </NavLink>
+            <NavLink to="/api" className={navLinkClass}>
+              🔌 API
+            </NavLink>
+          </>
+        ) : (
+          // Public Navigation (for homepage, etc.)
+          <>
+            <NavLink to="/" className={publicNavLinkClass}>
+              Home
+            </NavLink>
+            <NavLink to="/chat" className={publicNavLinkClass}>
+              Chat
+            </NavLink>
+            <NavLink to="/documents" className={publicNavLinkClass}>
+              Documents
+            </NavLink>
+            <NavLink to="/settings" className={publicNavLinkClass}>
+              Settings
+            </NavLink>
+          </>
+        )}
       </div>
 
       <NavLink
         to="/login"
         className={({ isActive }) =>
-          isActive
-            ? 'bg-blue-600 text-white px-8 py-1.5 rounded-full font-medium transition-colors hover:bg-blue-700 whitespace-nowrap'
-            : 'bg-blue-500 text-white px-8 py-1.5 rounded-full font-medium transition-colors hover:bg-blue-600 whitespace-nowrap'
+          `px-6 py-2 rounded-full font-medium transition-all duration-200 whitespace-nowrap ${
+            isActive
+              ? 'bg-blue-700 text-white shadow-lg'
+              : 'bg-blue-600 text-white hover:bg-blue-700 hover:shadow-lg'
+          }`
         }
       >
         Sign Up