Upload folder using huggingface_hub

.gitattributes

@@ -2,6 +2,29 @@
 *.pt filter=lfs diff=lfs merge=lfs -text
 *.bin filter=lfs diff=lfs merge=lfs -text
 *.pkl filter=lfs diff=lfs merge=lfs -text
+.tmp-ci-venv/Lib/site-packages/dateutil/zoneinfo/dateutil-zoneinfo.tar.gz filter=lfs diff=lfs merge=lfs -text
+.tmp-ci-venv/Lib/site-packages/pip/_vendor/distlib/t64-arm.exe filter=lfs diff=lfs merge=lfs -text
+.tmp-ci-venv/Lib/site-packages/pip/_vendor/distlib/t64.exe filter=lfs diff=lfs merge=lfs -text
+.tmp-ci-venv/Lib/site-packages/pip/_vendor/distlib/w64-arm.exe filter=lfs diff=lfs merge=lfs -text
+.tmp-ci-venv/Lib/site-packages/pip/_vendor/distlib/w64.exe filter=lfs diff=lfs merge=lfs -text
+.tmp-ci-venv/Lib/site-packages/setuptools/cli-arm64.exe filter=lfs diff=lfs merge=lfs -text
+.tmp-ci-venv/Lib/site-packages/setuptools/gui-arm64.exe filter=lfs diff=lfs merge=lfs -text
+.tmp-ci-venv/Scripts/dotenv.exe filter=lfs diff=lfs merge=lfs -text
+.tmp-ci-venv/Scripts/fastapi.exe filter=lfs diff=lfs merge=lfs -text
+.tmp-ci-venv/Scripts/httpx.exe filter=lfs diff=lfs merge=lfs -text
+.tmp-ci-venv/Scripts/idna.exe filter=lfs diff=lfs merge=lfs -text
+.tmp-ci-venv/Scripts/markdown-it.exe filter=lfs diff=lfs merge=lfs -text
+.tmp-ci-venv/Scripts/normalizer.exe filter=lfs diff=lfs merge=lfs -text
+.tmp-ci-venv/Scripts/pip.exe filter=lfs diff=lfs merge=lfs -text
+.tmp-ci-venv/Scripts/pip3.11.exe filter=lfs diff=lfs merge=lfs -text
+.tmp-ci-venv/Scripts/pip3.exe filter=lfs diff=lfs merge=lfs -text
+.tmp-ci-venv/Scripts/pygmentize.exe filter=lfs diff=lfs merge=lfs -text
+.tmp-ci-venv/Scripts/pyiceberg.exe filter=lfs diff=lfs merge=lfs -text
+.tmp-ci-venv/Scripts/python.exe filter=lfs diff=lfs merge=lfs -text
+.tmp-ci-venv/Scripts/pythonw.exe filter=lfs diff=lfs merge=lfs -text
+.tmp-ci-venv/Scripts/uvicorn.exe filter=lfs diff=lfs merge=lfs -text
+.tmp-ci-venv/Scripts/watchfiles.exe filter=lfs diff=lfs merge=lfs -text
+.tmp-ci-venv/Scripts/websockets.exe filter=lfs diff=lfs merge=lfs -text
 Frontend/public/favicon.jpeg filter=lfs diff=lfs merge=lfs -text
 Frontend/public/favicon.png filter=lfs diff=lfs merge=lfs -text
 Frontend/public/team/pragati_tiwari.jpg filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -4,7 +4,10 @@ __pycache__/
 *$py.class
 venv/
 env/
-.env
+# Ignore all env files anywhere in the repo
+**/.env
+**/.env.*
+
 
 # Models (Keep them if they are small, but here they are large. 
 # We should probably only keep the ones we actually use if possible, 
@@ -29,3 +32,15 @@ dist/
 docs/helpdesk*.pdf
 docs/logs/
 *.log
+
+# Scratch and local cache
+scratch/
+.npm-cache/
+
+# GSSoC Score Tracking and Temporary Scripts
+scratch/
+.npm-cache/
+*.tmp
+../MOBILE_SETUP_TEMP.md
+../CI_YML_TEMP.yml
+../ENV_EXAMPLE_TEMP.example

Dockerfile

@@ -1,36 +1,40 @@
-# Use an official Python runtime as a parent image
-FROM python:3.10-slim
+# syntax=docker/dockerfile:1
 
-LABEL version="1.1.1" rebuild_trigger="2026-03-08-2032"
+FROM python:3.10-slim AS builder
 
-# Set the working directory to /app
-WORKDIR /app
-
-# Install system dependencies required for EasyOCR and OpenCV
-RUN apt-get update && apt-get install -y \
-    libgl1 \
-    libglib2.0-0 \
+WORKDIR /build
+RUN apt-get update && apt-get install -y --no-install-recommends \
     git \
     && rm -rf /var/lib/apt/lists/*
 
-# Copy the requirements file into the container
 COPY requirements.txt .
+RUN pip install --no-cache-dir --prefix=/install -r requirements.txt
+
+FROM python:3.10-slim AS runtime
 
-# Install dependencies (no-cache-dir keeps the docker image smaller)
-RUN pip install --no-cache-dir -r requirements.txt
+LABEL org.opencontainers.image.title="helpdesk-backend"
+LABEL org.opencontainers.image.description="HELPDESK.AI FastAPI backend (multi-stage)"
 
-# Copy all the remaining files into the container as a 'backend' directory
-# This allows absolute imports like 'from backend.services...' to work perfectly
+WORKDIR /app
+
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    libgl1 \
+    libglib2.0-0 \
+    && rm -rf /var/lib/apt/lists/* \
+    && useradd --create-home --shell /usr/sbin/nologin appuser
+
+COPY --from=builder /install /usr/local
 COPY . /app/backend
 
-# Tell Python where to look for modules (so it can find the 'backend' folder)
-ENV PYTHONPATH=/app
+ENV PYTHONPATH=/app \
+    PYTHONDONTWRITEBYTECODE=1 \
+    PYTHONUNBUFFERED=1
 
-# Expose port 7860 (Hugging Face Spaces default)
 EXPOSE 7860
 
 HEALTHCHECK --interval=30s --timeout=5s --start-period=120s --retries=3 \
     CMD ["python", "backend/healthcheck.py"]
 
-# Run the FastAPI server via Uvicorn
+USER appuser
+
 CMD ["uvicorn", "backend.main:app", "--host", "0.0.0.0", "--port", "7860"]

Frontend/eslint.config.js

@@ -35,4 +35,25 @@ export default defineConfig([
       'react-refresh/only-export-components': 'off',
         },
   },
+  {
+    files: [
+      '**/*.{test,spec}.{js,jsx}',
+      '**/__tests__/**/*.{js,jsx}',
+      'jest.setup.js',
+      'jest.fileMock.js',
+    ],
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+        ...globals.jest,
+      },
+    },
+  },
+  {
+    files: ['jest.fileMock.js'],
+    languageOptions: {
+      sourceType: 'commonjs',
+    },
+  },
 ])

Frontend/jsconfig.json

@@ -1,6 +1,7 @@
 {
     "compilerOptions": {
         "baseUrl": ".",
+        "ignoreDeprecations": "6.0",
         "paths": {
             "@/*": [
                 "./src/*"

Frontend/package.json

@@ -6,10 +6,12 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "lint": "eslint . --report-unused-disable-directives --max-warnings 0",
+    "check:ai-secrets": "node ../scripts/check-frontend-secrets.mjs",
     "preview": "vite preview",
     "prepare": "husky install",
-    "format": "prettier --write ."
+    "format": "prettier --write .",
+    "test": "jest"
   },
   "dependencies": {
     "@google/generative-ai": "^0.24.1",
@@ -23,7 +25,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
-    "framer-motion": "^12.34.2",
+    "framer-motion": "^12.39.0",
     "html2canvas": "^1.4.1",
     "lucide-react": "^0.574.0",
     "react": "^19.2.0",
@@ -42,11 +44,18 @@
     "zustand": "^5.0.11"
   },
   "devDependencies": {
+    "@babel/core": "^7.24.0",
+    "@babel/preset-env": "^7.24.0",
+    "@babel/preset-react": "^7.24.0",
     "@eslint/js": "^9.39.1",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.1",
     "autoprefixer": "^10.4.24",
+    "babel-jest": "^29.7.0",
     "eslint": "^9.39.2",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-react": "^7.37.5",
@@ -54,11 +63,16 @@
     "eslint-plugin-react-refresh": "^0.4.24",
     "globals": "^16.5.0",
     "husky": "^9.1.7",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "lint-staged": "^16.2.7",
     "postcss": "^8.5.6",
     "prettier": "^3.8.1",
     "tailwindcss": "^3.4.19",
     "vite": "^7.3.1"
   },
-  "lint-staged": "{'*.{js,jsx}': ['eslint --fix', 'prettier --write']}"
+  "lint-staged": {
+    "*.{js,jsx}": ["eslint --fix", "prettier --write"]
+  }
 }

Frontend/src/App.jsx

@@ -5,88 +5,83 @@ import {
   Navigate,
   useLocation
 } from "react-router-dom";
-import React, { useEffect } from "react";
-import { AnimatePresence } from "framer-motion";
-import { NotFound } from "./components/ui/not-found-2";
+import React, { Suspense, useEffect, lazy } from "react";
 import useTicketStore from "./store/ticketStore";
-import Toaster from "./components/shared/Toaster";
-import BugReportWidget from "./components/shared/BugReportWidget";
 import useRealtimeNotifications from "./hooks/useRealtimeNotifications";
-
-// Auth Components
-import Login from "./pages/Login";
-import ForgotPassword from "./pages/ForgotPassword";
-import ResetPassword from "./pages/ResetPassword";
-import Signup from "./pages/Signup";
-import AdminSignup from "./pages/AdminSignup";
-import AdminLobby from "./pages/AdminLobby";
-import UserLobby from "./pages/UserLobby";
-import LandingPage from "./pages/LandingPage";
-import ContactSales from "./pages/ContactSales";
-
-// Legacy components
-import DuplicateDetection from "./user/pages/DuplicateDetection";
-import AutoResolveChat from "./user/pages/AutoResolveChat";
-import Resolved from "./user/pages/Resolved";
-import TicketTracking from "./user/pages/TicketTracking";
-// Layouts
-import UserLayout from "./user/UserLayout";
-import AdminLayout from "./admin/layout/AdminLayout";
-
-// User Pages
-import Dashboard from "./user/pages/Dashboard";
-import CreateTicket from "./user/pages/CreateTicket";
-import MyTickets from "./user/pages/MyTickets";
-import TicketResult from "./user/pages/TicketResult";
-import Profile from "./user/pages/Profile";
-import TicketDetail from "./user/pages/TicketDetail";
-import TicketProcessing from "./user/pages/AIProcessing"; // Renamed generic import just in case, but keeping AIProcessing
-import AIProcessing from "./user/pages/AIProcessing";
-import AIUnderstanding from "./user/pages/AIUnderstanding";
-import Notifications from "./user/pages/Notifications";
-import Help from "./user/pages/Help";
-import DocsPortal from "./docs/pages/DocsPortal";
-
-// New Showcase Pages
-import ApiReference from "./pages/ApiReference";
-import Changelog from "./pages/Changelog";
-import StatusPage from "./pages/StatusPage";
-import AboutUs from "./pages/AboutUs";
-import Careers from "./pages/Careers";
-import CookiePolicy from "./pages/legal/CookiePolicy";
-
-// NEW Admin Pages (Refactored)
-import AdminDashboard from "./admin/pages/AdminDashboard";
-import AdminTickets from "./admin/pages/AdminTickets";
-import AdminTicketDetail from "./admin/pages/AdminTicketDetail";
-import AdminUsers from "./admin/pages/AdminUsers";
-import AdminAnalytics from "./admin/pages/AdminAnalytics";
-import AdminProfile from "./admin/pages/AdminProfile";
-import AdminSettings from "./admin/pages/AdminSettings";
-import MasterBugReports from "./master-admin/pages/MasterBugReports";
-
-// Feature Pages
-import AutoCategorizationFeature from "./pages/features/AutoCategorizationFeature";
-import PriorityDetectionFeature from "./pages/features/PriorityDetectionFeature";
-import SmartResolutionFeature from "./pages/features/SmartResolutionFeature";
-
-// Legal Pages
-import TermsOfService from "./pages/legal/TermsOfService";
-import PrivacyPolicy from "./pages/legal/PrivacyPolicy";
-import Security from "./pages/legal/Security";
 import AdminProtectedRoute from "./components/shared/AdminProtectedRoute";
 import MasterAdminProtectedRoute from "./components/shared/MasterAdminProtectedRoute";
 import ProtectedRoute from "./components/shared/ProtectedRoute";
 import useAuthStore from "./store/authStore";
 import NotApproved from "./pages/NotApproved";
-
-// Master Admin Components
-import MasterAdminLogin from "./pages/MasterAdminLogin";
-import MasterAdminLayout from "./master-admin/layout/MasterAdminLayout";
-import MasterAdminDashboard from "./master-admin/pages/MasterAdminDashboard";
-import PendingAdminRequests from "./master-admin/pages/PendingAdminRequests";
-import AllCompanies from "./master-admin/pages/AllCompanies";
-import AllAdmins from "./master-admin/pages/AllAdmins";
+const Login = lazy(() => import("./pages/Login"));
+const AuthCallback = lazy(() => import("./pages/AuthCallback"));
+const ForgotPassword = lazy(() => import("./pages/ForgotPassword"));
+const ResetPassword = lazy(() => import("./pages/ResetPassword"));
+const Signup = lazy(() => import("./pages/Signup"));
+const AdminSignup = lazy(() => import("./pages/AdminSignup"));
+const AdminLobby = lazy(() => import("./pages/AdminLobby"));
+const UserLobby = lazy(() => import("./pages/UserLobby"));
+const LandingPage = lazy(() => import("./pages/LandingPage"));
+const ContactSales = lazy(() => import("./pages/ContactSales"));
+
+const DuplicateDetection = lazy(() => import("./user/pages/DuplicateDetection"));
+const AutoResolveChat = lazy(() => import("./user/pages/AutoResolveChat"));
+const Resolved = lazy(() => import("./user/pages/Resolved"));
+const TicketTracking = lazy(() => import("./user/pages/TicketTracking"));
+
+const UserLayout = lazy(() => import("./user/UserLayout"));
+const AdminLayout = lazy(() => import("./admin/layout/AdminLayout"));
+
+const Dashboard = lazy(() => import("./user/pages/Dashboard"));
+const CreateTicket = lazy(() => import("./user/pages/CreateTicket"));
+const MyTickets = lazy(() => import("./user/pages/MyTickets"));
+const TicketResult = lazy(() => import("./user/pages/TicketResult"));
+const Profile = lazy(() => import("./user/pages/Profile"));
+const TicketDetail = lazy(() => import("./user/pages/TicketDetail"));
+const AIProcessing = lazy(() => import("./user/pages/AIProcessing"));
+const AIUnderstanding = lazy(() => import("./user/pages/AIUnderstanding"));
+const Notifications = lazy(() => import("./user/pages/Notifications"));
+const Help = lazy(() => import("./user/pages/Help"));
+
+const AdminDashboard = lazy(() => import("./admin/pages/AdminDashboard"));
+const AdminTickets = lazy(() => import("./admin/pages/AdminTickets"));
+const AdminTicketDetail = lazy(() => import("./admin/pages/AdminTicketDetail"));
+const AdminUsers = lazy(() => import("./admin/pages/AdminUsers"));
+const AdminAnalytics = lazy(() => import("./admin/pages/AdminAnalytics"));
+const AdminProfile = lazy(() => import("./admin/pages/AdminProfile"));
+const AdminSettings = lazy(() => import("./admin/pages/AdminSettings"));
+const SLAPage = lazy(() => import("./admin/pages/SLAPage"));
+const MasterBugReports = lazy(() => import("./master-admin/pages/MasterBugReports"));
+
+const AutoCategorizationFeature = lazy(() => import("./pages/features/AutoCategorizationFeature"));
+const PriorityDetectionFeature = lazy(() => import("./pages/features/PriorityDetectionFeature"));
+const SmartResolutionFeature = lazy(() => import("./pages/features/SmartResolutionFeature"));
+
+const TermsOfService = lazy(() => import("./pages/legal/TermsOfService"));
+const PrivacyPolicy = lazy(() => import("./pages/legal/PrivacyPolicy"));
+const Security = lazy(() => import("./pages/legal/Security"));
+
+const MasterAdminLogin = lazy(() => import("./pages/MasterAdminLogin"));
+const MasterAdminLayout = lazy(() => import("./master-admin/layout/MasterAdminLayout"));
+const MasterAdminDashboard = lazy(() => import("./master-admin/pages/MasterAdminDashboard"));
+const PendingAdminRequests = lazy(() => import("./master-admin/pages/PendingAdminRequests"));
+const AllCompanies = lazy(() => import("./master-admin/pages/AllCompanies"));
+const AllAdmins = lazy(() => import("./master-admin/pages/AllAdmins"));
+const Changelog = lazy(() => import("./pages/Changelog"));
+const AboutUs = lazy(() => import("./pages/AboutUs"));
+const NotFoundPage = lazy(() => import("./components/ui/not-found-2").then((module) => ({ default: module.NotFound })));
+const Toaster = lazy(() => import("./components/shared/Toaster"));
+const BugReportWidget = lazy(() => import("./components/shared/BugReportWidget"));
+
+function RouteFallback() {
+  return (
+    <div className="flex min-h-[40vh] items-center justify-center px-6 py-16">
+      <div className="rounded-2xl border border-slate-200 bg-white px-6 py-4 text-sm font-semibold text-slate-500 shadow-sm">
+        Loading...
+      </div>
+    </div>
+  );
+}
 
 
 function TitleUpdater() {
@@ -104,6 +99,7 @@ function TitleUpdater() {
     else if (path.startsWith('/admin/analytics')) title = 'Analytics | Admin';
     else if (path.startsWith('/admin/profile')) title = 'Admin Profile';
     else if (path.startsWith('/admin/settings')) title = 'Settings | Admin';
+    else if (path.startsWith('/admin/sla')) title = 'SLA Monitor | Admin';
     // Master Admin Routes
     else if (path.startsWith('/master-admin/dashboard')) title = 'Master Dashboard';
     else if (path.startsWith('/master-admin/admin-requests')) title = 'Pending Requests | Master Admin';
@@ -119,19 +115,13 @@ function TitleUpdater() {
     else if (path === '/my-tickets') title = 'My Tickets';
     else if (path === '/profile') title = 'User Profile';
     else if (path === '/notifications') title = 'Notifications';
-    else if (path === '/docs') title = 'Documentation';
-    else if (path === '/api-reference') title = 'API Reference';
-    else if (path === '/changelog') title = 'Changelog';
-    else if (path === '/status') title = 'Status';
-    else if (path === '/about') title = 'About Us';
-    else if (path === '/careers') title = 'Careers';
-    else if (path === '/cookie-policy') title = 'Cookie Policy';
     // Public / Lobby Routes
     else if (path === '/login') title = 'Login';
     else if (path === '/signup') title = 'Create Account';
     else if (path === '/admin-signup') title = 'Admin Signup';
     else if (path === '/user-lobby') title = 'User Lobby';
     else if (path === '/admin-lobby') title = 'Admin Lobby';
+    else if (path === '/about-us') title = 'About Us';
     else if (path === '/') title = 'Welcome';
 
     document.title = title === 'HELPDESK.AI' ? title : `${title} | HELPDESK.AI`;
@@ -206,10 +196,11 @@ function AppLayout() {
             <Route path="/admin/analytics" element={<AdminAnalytics />} />
             <Route path="/admin/profile" element={<AdminProfile />} />
             <Route path="/admin/settings" element={<AdminSettings />} />
+            <Route path="/admin/sla" element={<SLAPage />} />
           </Route>
         </Route>
 
-        <Route path="*" element={<NotFound />} />
+        <Route path="*" element={<NotFoundPage />} />
       </Routes>
     </>
   );
@@ -223,81 +214,60 @@ function App() {
     initialize();
   }, [initialize]);
 
-  const isDocsSubdomain = window.location.hostname.startsWith('docs.');
-
-  if (isDocsSubdomain) {
-    return (
-      <BrowserRouter>
-        <TitleUpdater />
-        <ScrollToTop />
-        <Toaster />
-        <BugReportWidget />
-        <Routes>
-          <Route path="/" element={<DocsPortal />} />
-          <Route path="/docs" element={<Navigate to="/" replace />} />
-          <Route path="/api-reference" element={<ApiReference />} />
-          <Route path="/changelog" element={<Changelog />} />
-          <Route path="/status" element={<StatusPage />} />
-          <Route path="*" element={<DocsPortal />} />
-        </Routes>
-      </BrowserRouter>
-    );
-  }
-
   return (
     <BrowserRouter>
       <TitleUpdater />
       <ScrollToTop />
-      <Toaster />
-      <BugReportWidget />
-      <Routes>
-        {/* Public */}
-        <Route path="/" element={<LandingPage />} />
-        <Route path="/login" element={<Login />} />
-        <Route path="/forgot-password" element={<ForgotPassword />} />
-        <Route path="/reset-password" element={<ResetPassword />} />
-        <Route path="/signup" element={<Signup />} />
-        <Route path="/admin-signup" element={<AdminSignup />} />
-        <Route path="/admin-lobby" element={<AdminLobby />} />
-        <Route path="/user-lobby" element={<UserLobby />} />
-        <Route path="/not-approved" element={<NotApproved />} />
-        <Route path="/contact-sales" element={<ContactSales />} />
-        <Route path="/docs" element={<DocsPortal />} />
-        <Route path="/api-reference" element={<ApiReference />} />
-        <Route path="/changelog" element={<Changelog />} />
-        <Route path="/status" element={<StatusPage />} />
-        <Route path="/about" element={<AboutUs />} />
-        <Route path="/careers" element={<Careers />} />
-        <Route path="/cookie-policy" element={<CookiePolicy />} />
-
-        {/* Feature Pages */}
-        <Route path="/features/categorization" element={<AutoCategorizationFeature />} />
-        <Route path="/features/priority" element={<PriorityDetectionFeature />} />
-        <Route path="/features/resolution" element={<SmartResolutionFeature />} />
-
-        {/* Legal Pages */}
-        <Route path="/terms" element={<TermsOfService />} />
-        <Route path="/privacy" element={<PrivacyPolicy />} />
-        <Route path="/security" element={<Security />} />
-
-        {/* Master Admin Portal */}
-        <Route path="/master-admin-login" element={<MasterAdminLogin />} />
-
-        <Route element={<MasterAdminProtectedRoute />}>
-          <Route element={<MasterAdminLayout />}>
-            <Route path="/master-admin/dashboard" element={<MasterAdminDashboard />} />
-            <Route path="/master-admin/admin-requests" element={<PendingAdminRequests />} />
-            <Route path="/master-admin/companies" element={<AllCompanies />} />
-            <Route path="/master-admin/all-admins" element={<AllAdmins />} />
-            <Route path="/master-admin/bug-reports" element={<MasterBugReports />} />
+      <Suspense fallback={<RouteFallback />}>
+        <Toaster />
+        <BugReportWidget />
+        <Routes>
+          {/* Public */}
+          <Route path="/" element={<LandingPage />} />
+          <Route path="/login" element={<Login />} />
+          <Route path="/auth/callback" element={<AuthCallback />} />
+          <Route path="/forgot-password" element={<ForgotPassword />} />
+          <Route path="/reset-password" element={<ResetPassword />} />
+          <Route path="/signup" element={<Signup />} />
+          <Route path="/admin-signup" element={<AdminSignup />} />
+          <Route path="/admin-lobby" element={<AdminLobby />} />
+          <Route path="/user-lobby" element={<UserLobby />} />
+          <Route path="/not-approved" element={<NotApproved />} />
+          <Route path="/contact-sales" element={<ContactSales />} />
+
+          {/* Feature Pages */}
+          <Route path="/features/categorization" element={<AutoCategorizationFeature />} />
+          <Route path="/features/priority" element={<PriorityDetectionFeature />} />
+          <Route path="/features/resolution" element={<SmartResolutionFeature />} />
+
+            {/* Resources Pages */}
+            <Route path="/changelog" element={<Changelog />} />
+            <Route path="/about-us" element={<AboutUs />} />
+
+            {/* Legal Pages */}
+            <Route path="/terms" element={<TermsOfService />} />
+            <Route path="/privacy" element={<PrivacyPolicy />} />
+            <Route path="/security" element={<Security />} />
+
+          {/* Master Admin Portal */}
+          <Route path="/master-admin-login" element={<MasterAdminLogin />} />
+
+          <Route element={<MasterAdminProtectedRoute />}>
+            <Route element={<MasterAdminLayout />}>
+              <Route path="/master-admin/dashboard" element={<MasterAdminDashboard />} />
+              <Route path="/master-admin/admin-requests" element={<PendingAdminRequests />} />
+              <Route path="/master-admin/companies" element={<AllCompanies />} />
+              <Route path="/master-admin/all-admins" element={<AllAdmins />} />
+              <Route path="/master-admin/bug-reports" element={<MasterBugReports />} />
+            </Route>
           </Route>
-        </Route>
 
-        {/* Protected */}
-        <Route element={<ProtectedRoute />}>
-          <Route path="/*" element={<AppLayout />} />
-        </Route>
-      </Routes>
+          {/* Protected */}
+          <Route element={<ProtectedRoute />}>
+            <Route path="/*" element={<AppLayout />} />
+          </Route>
+        </Routes>
+      </Suspense>
     </BrowserRouter>
   );
 }

Frontend/src/admin/components/AdminSidebar.jsx

@@ -10,7 +10,8 @@ import {
     LogOut,
     Activity,
     ChevronLeft,
-    ChevronRight
+    ChevronRight,
+    Clock
 } from 'lucide-react';
 import useAuthStore from '../../store/authStore';
 
@@ -21,6 +22,7 @@ const AdminSidebar = ({ isMobile, onClose, isCollapsed, onToggleCollapse }) => {
         { label: 'Users', path: '/admin/users', icon: Users },
         { label: 'Analytics', path: '/admin/analytics', icon: BarChart3 },
         { label: 'Profile', path: '/admin/profile', icon: UserCircle },
+        { label: 'SLA Monitor', path: '/admin/sla', icon: Clock },
     ];
 
     const { logout } = useAuthStore();

Frontend/src/admin/components/TicketTable.jsx

@@ -73,6 +73,9 @@ const TicketTable = ({ tickets = [], isLoading = false, limit = null }) => {
                             ? ticket.assigned_team
                             : (teamMap[effectiveCategory] || ticket.assigned_team || 'L1 Helpdesk');
                         const statusSt = getStatusStyle(ticket.status);
+                        const translationMeta = ticket?.metadata?.translation;
+                        const isTranslated = Boolean(translationMeta?.translated);
+                        const sourceLanguageName = translationMeta?.source_language_name || translationMeta?.source_language || 'Unknown';
 
                         // Truncated subject
                         const subject = ticket.subject || ticket.summary || 'Untitled ticket';
@@ -129,9 +132,16 @@ const TicketTable = ({ tickets = [], isLoading = false, limit = null }) => {
                                             <span style={{ fontSize: '13px', fontWeight: 500, color: '#111827', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                                                 {truncSubject}
                                             </span>
-                                            <span style={{ fontSize: '11px', color: '#6b7280' }}>
-                                                {effectiveCategory || 'General'}
-                                            </span>
+                                            <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                                                <span style={{ fontSize: '11px', color: '#6b7280' }}>
+                                                    {effectiveCategory || 'General'}
+                                                </span>
+                                                {isTranslated && (
+                                                    <span style={{ fontSize: '10px', color: '#0369a1' }}>
+                                                        Translated from {sourceLanguageName}
+                                                    </span>
+                                                )}
+                                            </div>
                                         </div>
                                     </div>
                                 </td>

Frontend/src/admin/pages/AdminDashboard.jsx

@@ -1,12 +1,13 @@
 import React, { useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { Activity } from 'lucide-react';
+import { Activity, AlertTriangle, Clock, ShieldCheck, Wifi, WifiOff } from 'lucide-react';
 
 import useAuthStore from "../../store/authStore";
+import useTicketStore from "../../store/ticketStore";
+import useWebSocket from "../../hooks/useWebSocket";
 import { supabase } from "../../lib/supabaseClient";
 import StatCard from "../components/StatCard";
 import TicketTable from "../components/TicketTable";
-import { formatTimelineDate } from "../../utils/dateUtils";
 
 // Inline SVG icon components
 const TicketIcon = () => (
@@ -67,12 +68,67 @@ const aiIconMap = [
     { icon: <DuplicateIcon />, bg: '#FFF7ED', color: '#f97316' },
 ];
 
+function isTerminalTicket(ticket) {
+    const status = String(ticket?.status || '').toLowerCase();
+    return status.includes('resolv') || status.includes('closed');
+}
+
+function getSlaDeadline(ticket) {
+    const source = ticket?.sla_breach_at || ticket?.slaBreachAt;
+    const value = source ? new Date(source).getTime() : NaN;
+    return Number.isFinite(value) ? value : null;
+}
+
+function getSlaState(ticket, nowMs) {
+    if (isTerminalTicket(ticket)) return 'met';
+    if (String(ticket?.sla_status || '').toUpperCase() === 'BREACHED') return 'breached';
+    const deadline = getSlaDeadline(ticket);
+    if (!deadline) return 'active';
+    const remaining = deadline - nowMs;
+    if (remaining <= 0) return 'breached';
+    if (remaining <= 60 * 60 * 1000) return 'warning';
+    return 'active';
+}
+
+function formatSlaCountdown(deadlineMs, nowMs) {
+    if (!deadlineMs) return 'No deadline';
+    const remaining = deadlineMs - nowMs;
+    if (remaining <= 0) return 'Breached';
+    const totalMinutes = Math.ceil(remaining / 60000);
+    const hours = Math.floor(totalMinutes / 60);
+    const minutes = totalMinutes % 60;
+    if (hours > 0) return `${hours}h ${minutes}m`;
+    return `${minutes}m`;
+}
+
 const AdminDashboard = () => {
     const navigate = useNavigate();
     const { profile } = useAuthStore();
-    const [tickets, setTickets] = React.useState([]);
     const [isLoading, setIsLoading] = React.useState(true);
+    const [nowMs, setNowMs] = React.useState(() => Date.now());
+
+    // WebSocket connection for real-time ticket updates
+    const { isConnected: wsConnected, lastMessage } = useWebSocket(profile?.company);
+
+    // Read tickets from the Zustand store (populated below and updated by WS)
+    const tickets = useTicketStore((s) => s.tickets);
+    const handleWsMessage = useTicketStore((s) => s.handleWsMessage);
+    const setWsConnected = useTicketStore((s) => s.setWsConnected);
+    const upsertTicket = useTicketStore((s) => s.upsertTicket);
 
+    // Sync WebSocket connection status to store
+    React.useEffect(() => {
+        setWsConnected(wsConnected);
+    }, [wsConnected, setWsConnected]);
+
+    // Route incoming WebSocket messages into the ticket store
+    React.useEffect(() => {
+        if (lastMessage) {
+            handleWsMessage(lastMessage);
+        }
+    }, [lastMessage, handleWsMessage]);
+
+    // Initial fetch — populate store from Supabase on mount
     React.useEffect(() => {
         if (profile) {
             const fetchStats = async () => {
@@ -92,19 +148,27 @@ const AdminDashboard = () => {
                         console.warn("Retrying dashboard fetch without relation...", error);
                         const { data: basicData, error: basicError } = await supabase.from('tickets').select('*').eq('company', profile?.company).order('created_at', { ascending: false });
                         if (basicError) throw basicError;
-                        setTickets(basicData || []);
+                        // Bulk-load into store (avoid duplicates)
+                        for (const t of basicData || []) {
+                            upsertTicket(t);
+                        }
                     } else {
-                        setTickets(data || []);
+                        for (const t of data || []) {
+                            upsertTicket(t);
+                        }
                     }
                 } catch (err) { console.error("Dashboard fetch error:", err); }
                 finally { setIsLoading(false); }
             };
 
             fetchStats();
-            const interval = setInterval(fetchStats, 30000);
-            return () => clearInterval(interval);
         }
-    }, [profile]);
+    }, [profile, upsertTicket]);
+
+    React.useEffect(() => {
+        const timer = setInterval(() => setNowMs(Date.now()), 60 * 1000);
+        return () => clearInterval(timer);
+    }, []);
 
     const metrics = useMemo(() => {
         const total = tickets.length;
@@ -126,6 +190,26 @@ const AdminDashboard = () => {
         ];
     }, [tickets]);
 
+    const slaBoard = useMemo(() => {
+        const actionable = tickets.filter(t => !isTerminalTicket(t));
+        const breached = actionable.filter(t => getSlaState(t, nowMs) === 'breached');
+        const warning = actionable.filter(t => getSlaState(t, nowMs) === 'warning');
+        const active = actionable.filter(t => getSlaState(t, nowMs) === 'active');
+        const critical = actionable.filter(t => String(t.priority || '').toLowerCase() === 'critical');
+        const nextTicket = actionable
+            .map(ticket => ({ ticket, deadline: getSlaDeadline(ticket) }))
+            .filter(item => item.deadline)
+            .sort((a, b) => a.deadline - b.deadline)[0];
+
+        return {
+            breached,
+            warning,
+            active,
+            critical,
+            nextTicket,
+        };
+    }, [tickets, nowMs]);
+
     return (
         <div style={{ background: '#f8faf9', minHeight: '100vh', paddingBottom: '40px' }} className="space-y-10 -m-6 p-6 md:-m-10 md:p-10">
             {/* Header */}
@@ -135,13 +219,17 @@ const AdminDashboard = () => {
                         Dashboard
                     </h1>
                     <p style={{ color: '#6b7280', fontSize: '13px', marginTop: '4px', display: 'flex', alignItems: 'center', gap: '8px', fontWeight: 500 }}>
-                        <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#22c55e', display: 'inline-block' }}></span>
-                        Real-time updates active
+                        {wsConnected ? (
+                            <Wifi size={14} color="#22c55e" />
+                        ) : (
+                            <WifiOff size={14} color="#f97316" />
+                        )}
+                        {wsConnected ? 'WebSocket connected' : 'Reconnecting...'}
                     </p>
                 </div>
-                <div style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '6px 16px', background: '#F0FDF4', border: '1.5px solid #BBF7D0', borderRadius: '100px' }}>
-                    <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#22c55e', display: 'inline-block', animation: 'pulse-dot 2s infinite' }}></span>
-                    <span style={{ fontSize: '11px', fontWeight: 700, color: '#15803d', letterSpacing: '0.08em', textTransform: 'uppercase' }}>System Active</span>
+                <div style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '6px 16px', background: wsConnected ? '#F0FDF4' : '#FFF7ED', border: wsConnected ? '1.5px solid #BBF7D0' : '1.5px solid #FED7AA', borderRadius: '100px' }}>
+                    <span style={{ width: 6, height: 6, borderRadius: '50%', background: wsConnected ? '#22c55e' : '#f97316', display: 'inline-block', animation: 'pulse-dot 2s infinite' }}></span>
+                    <span style={{ fontSize: '11px', fontWeight: 700, color: wsConnected ? '#15803d' : '#c2410c', letterSpacing: '0.08em', textTransform: 'uppercase' }}>{wsConnected ? 'Live' : 'Reconnecting'}</span>
                 </div>
             </div>
 
@@ -161,6 +249,42 @@ const AdminDashboard = () => {
                 </button>
             </div>
 
+            <div style={{ background: '#ffffff', borderRadius: '20px', border: '1px solid #fee2e2', boxShadow: '0 2px 16px rgba(0,0,0,0.05)', padding: '24px' }}>
+                <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-6">
+                    <div>
+                        <h2 style={{ fontFamily: 'Syne, sans-serif', fontSize: '16px', fontWeight: 800, color: '#0f1f12', display: 'flex', alignItems: 'center', gap: '8px', margin: 0 }}>
+                            <Clock size={18} color="#dc2626" /> SLA Compliance
+                        </h2>
+                        <p style={{ fontSize: '11px', color: '#9ca3af', marginTop: '6px', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.08em' }}>
+                            {slaBoard.nextTicket ? `Next deadline ${formatSlaCountdown(slaBoard.nextTicket.deadline, nowMs)}` : 'No active deadlines'}
+                        </p>
+                    </div>
+                    <button
+                        onClick={() => navigate('/admin/tickets')}
+                        className="px-4 py-2 rounded-xl text-[10px] font-black uppercase tracking-widest border border-slate-200 text-slate-600 hover:border-red-200 hover:text-red-600 transition-colors"
+                    >
+                        Open Queue
+                    </button>
+                </div>
+
+                <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+                    {[
+                        { label: 'Breached', value: slaBoard.breached.length, icon: <AlertTriangle size={18} />, bg: '#fef2f2', color: '#dc2626', border: '#fecaca' },
+                        { label: 'Warning', value: slaBoard.warning.length, icon: <Clock size={18} />, bg: '#fffbeb', color: '#d97706', border: '#fde68a' },
+                        { label: 'Critical Open', value: slaBoard.critical.length, icon: <Activity size={18} />, bg: '#fff7ed', color: '#ea580c', border: '#fed7aa' },
+                        { label: 'Healthy', value: slaBoard.active.length, icon: <ShieldCheck size={18} />, bg: '#f0fdf4', color: '#16a34a', border: '#bbf7d0' },
+                    ].map(item => (
+                        <div key={item.label} style={{ background: item.bg, border: `1px solid ${item.border}`, borderRadius: '16px', padding: '18px' }}>
+                            <div className="flex items-center justify-between">
+                                <span style={{ color: item.color }}>{item.icon}</span>
+                                <span style={{ color: item.color, fontSize: '28px', fontWeight: 900, lineHeight: 1 }}>{item.value}</span>
+                            </div>
+                            <p style={{ margin: '12px 0 0', fontSize: '10px', fontWeight: 800, letterSpacing: '0.12em', textTransform: 'uppercase', color: item.color }}>{item.label}</p>
+                        </div>
+                    ))}
+                </div>
+            </div>
+
             <div className="grid grid-cols-1 lg:grid-cols-12 gap-10">
                 {/* Recent Activity */}
                 <div className="lg:col-span-8 space-y-6">
@@ -182,9 +306,9 @@ const AdminDashboard = () => {
                             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#16a34a" strokeWidth="2"><circle cx="12" cy="12" r="3"/><path d="M12 1v4M12 19v4M4.22 4.22l2.83 2.83M16.95 16.95l2.83 2.83M1 12h4M19 12h4M4.22 19.78l2.83-2.83M16.95 7.05l2.83-2.83"/></svg>
                             AI Status
                         </h2>
-                        <div style={{ display: 'flex', alignItems: 'center', gap: '6px', background: '#F0FDF4', border: '1px solid #BBF7D0', borderRadius: '100px', padding: '3px 10px' }}>
-                            <span style={{ width: 5, height: 5, borderRadius: '50%', background: '#22c55e', display: 'inline-block', animation: 'pulse-dot 2s infinite' }}></span>
-                            <span style={{ fontSize: '10px', fontWeight: 700, color: '#15803d' }}>LIVE SYNC</span>
+                        <div style={{ display: 'flex', alignItems: 'center', gap: '6px', background: wsConnected ? '#F0FDF4' : '#FFF7ED', border: wsConnected ? '1px solid #BBF7D0' : '1px solid #FED7AA', borderRadius: '100px', padding: '3px 10px' }}>
+                            <span style={{ width: 5, height: 5, borderRadius: '50%', background: wsConnected ? '#22c55e' : '#f97316', display: 'inline-block', animation: 'pulse-dot 2s infinite' }}></span>
+                            <span style={{ fontSize: '10px', fontWeight: 700, color: wsConnected ? '#15803d' : '#c2410c' }}>{wsConnected ? 'WS CONNECTED' : 'RECONNECTING'}</span>
                         </div>
                     </div>
                     <div style={{ background: '#fff', borderRadius: '20px', border: '1px solid #f0fdf4', padding: '24px' }}>
@@ -209,9 +333,9 @@ const AdminDashboard = () => {
                             <div className="pt-4 mt-4 border-t border-gray-100 flex flex-col items-center gap-2">
                                 <p style={{ fontSize: '10px', color: '#9ca3af', letterSpacing: '0.14em', fontWeight: 600, textTransform: 'uppercase' }}>All systems operating normally</p>
                                 <div style={{ display: 'flex', alignItems: 'center', gap: '6px', padding: '4px 10px', background: '#f8faf9', borderRadius: '100px', border: '1px solid #e5e7eb' }}>
-                                    <Activity size={10} color="#9ca3af" />
-                                    <span style={{ fontSize: '9px', fontWeight: 600, color: '#9ca3af', textTransform: 'uppercase', letterSpacing: '0.1em' }}>
-                                        Last Synced: {formatTimelineDate(new Date())}
+                                    {wsConnected ? <Activity size={10} color="#22c55e" /> : <Activity size={10} color="#f97316" />}
+                                    <span style={{ fontSize: '9px', fontWeight: 600, color: wsConnected ? '#16a34a' : '#9ca3af', textTransform: 'uppercase', letterSpacing: '0.1em' }}>
+                                        {wsConnected ? 'Live via WebSocket' : 'Reconnecting via WebSocket...'}
                                     </span>
                                 </div>
                             </div>

Frontend/src/admin/pages/AdminSettings.jsx

@@ -1,4 +1,6 @@
-import React from 'react';
+import { Card, CardContent } from "../../components/ui/card";
+import WebhookSettings from "../../components/shared/WebhookSettings";
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import {
     Settings,
     Cpu,
@@ -8,7 +10,15 @@ import {
     ShieldCheck
 } from 'lucide-react';
 import useAdminStore from '../store/adminStore';
-import { Card, CardContent } from "../../components/ui/card";
+import useAuthStore from '../../store/authStore';
+import { supabase } from '../../lib/supabaseClient';
+import {
+    DEFAULT_ADMIN_SETTINGS,
+    resolveCompanyId,
+    settingsFromSystemSettingsRow,
+    settingsToSystemSettingsRow
+} from '../../utils/adminSettingsPersistence';
+
 import { Select } from "../../components/ui/select";
 
 /**
@@ -17,12 +27,97 @@ import { Select } from "../../components/ui/select";
  */
 const AdminSettings = () => {
     const { settings, updateSettings } = useAdminStore();
+    const { user, profile } = useAuthStore();
+    const [isLoadingSettings, setIsLoadingSettings] = useState(false);
+    const [isSavingSettings, setIsSavingSettings] = useState(false);
+    const [statusMessage, setStatusMessage] = useState('');
+    const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
+
+    const companyId = useMemo(() => resolveCompanyId(profile, user), [profile, user]);
+
+    useEffect(() => {
+        let isMounted = true;
+
+        const loadCompanySettings = async () => {
+            if (!companyId) {
+                setStatusMessage('Company profile is required before settings can be synced.');
+                return;
+            }
+
+            setIsLoadingSettings(true);
+            setStatusMessage('');
+
+            const { data, error } = await supabase
+                .from('system_settings')
+                .select('ai_confidence_threshold, duplicate_sensitivity, enable_auto_resolve, auto_close_days, email_notifications, admin_alerts')
+                .eq('company_id', companyId)
+                .maybeSingle();
+
+            if (!isMounted) return;
+
+            if (error) {
+                setStatusMessage(`Unable to load saved settings: ${error.message}`);
+            } else if (data) {
+                updateSettings(settingsFromSystemSettingsRow(data, DEFAULT_ADMIN_SETTINGS));
+                setHasUnsavedChanges(false);
+                setStatusMessage('Saved company settings loaded.');
+            }
+
+            setIsLoadingSettings(false);
+        };
+
+        loadCompanySettings();
+
+        return () => {
+            isMounted = false;
+        };
+    }, [companyId, updateSettings]);
+
+    const saveCompanySettings = useCallback(async (nextSettings, { silent = false } = {}) => {
+        if (!companyId) {
+            setStatusMessage('Company profile is required before settings can be saved.');
+            return;
+        }
+
+        setIsSavingSettings(true);
+        if (!silent) {
+            setStatusMessage('');
+        }
+
+        const { error } = await supabase
+            .from('system_settings')
+            .upsert(settingsToSystemSettingsRow(nextSettings, companyId), { onConflict: 'company_id' });
+
+        if (error) {
+            setStatusMessage(`Unable to save settings: ${error.message}`);
+        } else {
+            setHasUnsavedChanges(false);
+            setStatusMessage('Settings saved for this company.');
+        }
+
+        setIsSavingSettings(false);
+    }, [companyId]);
 
-    // Handlers
     const handleChange = (key, value) => {
         updateSettings({ [key]: value });
+        setHasUnsavedChanges(true);
+        setStatusMessage('Saving changes...');
     };
 
+    const handleSaveSettings = useCallback(() => {
+        saveCompanySettings(settings);
+    }, [saveCompanySettings, settings]);
+
+    useEffect(() => {
+        if (!hasUnsavedChanges || isLoadingSettings || isSavingSettings) return undefined;
+
+        const saveTimer = window.setTimeout(() => {
+            saveCompanySettings(settings, { silent: true });
+        }, 800);
+
+        return () => window.clearTimeout(saveTimer);
+    }, [hasUnsavedChanges, isLoadingSettings, isSavingSettings, saveCompanySettings, settings]);
+
     return (
         <div className="max-w-4xl mx-auto py-6 space-y-10 pb-20 animate-in fade-in duration-700">
             {/* 1. Header Area */}
@@ -35,6 +130,22 @@ const AdminSettings = () => {
                         <ShieldCheck size={14} className="text-emerald-500" /> Administrator Account
                     </p>
                 </div>
+                <div className="flex flex-col items-start md:items-end gap-2">
+                    <button
+                        type="button"
+                        onClick={handleSaveSettings}
+                        disabled={!companyId || isLoadingSettings || isSavingSettings || !hasUnsavedChanges}
+                        className="inline-flex items-center gap-2 rounded-xl bg-slate-900 px-5 py-3 text-xs font-black uppercase tracking-widest text-white shadow-xl shadow-slate-200 transition-all hover:bg-indigo-600 disabled:cursor-not-allowed disabled:bg-slate-300 disabled:shadow-none"
+                    >
+                        <Save size={16} />
+                        {isSavingSettings ? 'Saving...' : 'Save Now'}
+                    </button>
+                    {statusMessage && (
+                        <p className="max-w-xs text-left md:text-right text-[10px] font-bold uppercase tracking-widest text-slate-400">
+                            {statusMessage}
+                        </p>
+                    )}
+                </div>
             </div>
 
             <div className="space-y-8">
@@ -167,8 +278,21 @@ const AdminSettings = () => {
                                 <div className={`absolute top-1 w-6 h-6 bg-white rounded-full transition-all duration-300 shadow-md ${settings.adminAlerts ? 'right-1' : 'left-1'}`}></div>
                             </button>
                         </div>
+                   </CardContent>
+                </Card>
+
+                {/* 5. Webhook Notification Settings */}
+                <Card className="border-none shadow-2xl shadow-slate-200/40 rounded-[2rem] overflow-hidden bg-white">
+                    <div className="px-8 py-6 bg-slate-50 border-b border-slate-100 flex items-center justify-between">
+                        <h3 className="text-sm font-black text-slate-900 uppercase italic tracking-tight flex items-center gap-3">
+                            <Bell size={18} className="text-blue-500" /> Slack & Teams Webhooks
+                        </h3>
+                    </div>
+                    <CardContent className="p-8">
+                        <WebhookSettings />
                     </CardContent>
                 </Card>
+
             </div>
         </div>
     );

Frontend/src/admin/pages/AdminTicketDetail.jsx

@@ -16,6 +16,7 @@ import { formatTicketId } from "../../utils/format";
 import SLABadge from "../components/SLABadge";
 import { formatFullTimestamp } from "../../utils/dateUtils";
 import TicketTimeline from "../../user/components/TicketTimeline";
+import TicketAuditTimeline from "../components/TicketAuditTimeline";
 
 const AdminTicketDetail = () => {
     const { ticket_id } = useParams();
@@ -34,6 +35,7 @@ const AdminTicketDetail = () => {
     const [imageUrl, setImageUrl] = useState(null);
     const [isUpdating, setIsUpdating] = useState(null);
     const [isLive, setIsLive] = useState(false);
+    const [showOriginalText, setShowOriginalText] = useState(false);
 
     const [correctionForm, setCorrectionForm] = useState({
         category: '',
@@ -197,6 +199,11 @@ const AdminTicketDetail = () => {
     const displayPriority = ticket.priority || 'Medium';
     const displaySummary = ticket.summary || ticket.subject || 'No Summary';
     const displayText = ticket.description || ticket.text || displaySummary;
+    const translationMeta = ticket.metadata?.translation;
+    const originalTextMeta = ticket.metadata?.original_text;
+    const isTranslated = Boolean(translationMeta?.translated && originalTextMeta?.description);
+    const sourceLanguageName = translationMeta?.source_language_name || translationMeta?.source_language || 'Unknown';
+    const renderedText = showOriginalText && isTranslated ? originalTextMeta.description : displayText;
 
     return (
         <div style={{ background: '#f8faf9', minHeight: '100vh', paddingBottom: '80px' }} className="-m-6 p-6 md:-m-10 md:p-10 space-y-6 animate-in fade-in duration-700">
@@ -237,7 +244,14 @@ const AdminTicketDetail = () => {
                             <span style={{ fontSize: '10px', fontWeight: 700, color: '#475569', background: '#f1f5f9', padding: '2px 8px', borderRadius: '100px', textTransform: 'uppercase' }}>
                                 {ticket.assignee?.full_name || 'UNASSIGNED'}
                             </span>
-                            <SLABadge priority={displayPriority} createdAt={ticket.created_at} status={displayStatus} compact />
+                            <SLABadge
+                                priority={displayPriority}
+                                createdAt={ticket.created_at}
+                                slaBreachAt={ticket.sla_breach_at}
+                                slaStatus={ticket.sla_status}
+                                status={displayStatus}
+                                compact
+                            />
                         </div>
                     </div>
                 </div>
@@ -305,8 +319,22 @@ const AdminTicketDetail = () => {
                             <span style={{ fontSize: '10px', color: '#9ca3af', fontWeight: 600, textTransform: 'uppercase' }}>{formatFullTimestamp(ticket.created_at)}</span>
                         </div>
                         <div style={{ padding: '28px' }}>
+                            {isTranslated && (
+                                <div style={{ marginBottom: '16px', border: '1px solid #bae6fd', background: '#f0f9ff', borderRadius: '12px', padding: '10px 12px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '8px' }}>
+                                    <span style={{ fontSize: '12px', fontWeight: 600, color: '#0c4a6e' }}>
+                                        Translated from {sourceLanguageName}
+                                    </span>
+                                    <button
+                                        type="button"
+                                        onClick={() => setShowOriginalText(prev => !prev)}
+                                        style={{ fontSize: '11px', fontWeight: 700, color: '#0369a1', background: 'transparent', border: 'none', cursor: 'pointer' }}
+                                    >
+                                        {showOriginalText ? 'View English' : 'View Original'}
+                                    </button>
+                                </div>
+                            )}
                             <div style={{ background: 'linear-gradient(135deg, #0f1f12, #1a3320)', color: '#ffffff', borderRadius: '16px', padding: '24px 28px', fontSize: '15px', fontStyle: 'italic', lineHeight: 1.7 }}>
-                                "{displayText}"
+                                "{renderedText}"
                             </div>
 
                             {imageUrl && (
@@ -335,6 +363,8 @@ const AdminTicketDetail = () => {
                         </div>
                         <TicketTimeline ticket={ticket} />
                     </div>
+
+                    <TicketAuditTimeline ticketId={ticket.id} companyId={ticket.company_id} />
                 </div>
 
                 {/* AI Column */}

Frontend/src/admin/pages/AdminTickets.jsx

@@ -1,8 +1,9 @@
-import React, { useState, useMemo, useEffect } from 'react';
+import React, { useCallback, useState, useMemo, useEffect } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
 import useAuthStore from "../../store/authStore";
 import useToastStore from "../../store/toastStore";
 import { supabase } from "../../lib/supabaseClient";
+import useTicketsRealtime from "../../hooks/useTicketsRealtime";
 import {
     Search,
     Filter,
@@ -29,7 +30,7 @@ import { formatTimelineDate } from "../../utils/dateUtils";
 const AdminTickets = () => {
     const navigate = useNavigate();
     const location = useLocation();
-    const { user } = useAuthStore();
+    const { user, profile } = useAuthStore();
     const { showToast } = useToastStore();
 
     // Data State
@@ -46,6 +47,27 @@ const AdminTickets = () => {
     const [teamFilter, setTeamFilter] = useState('All');
     const [agents, setAgents] = useState([]); // All staff/admins in the company
 
+    const ticketMatchesFilters = useCallback((ticket) => {
+        if (statusFilter !== 'All' && String(ticket.status || '').toLowerCase() !== statusFilter.toLowerCase()) return false;
+        if (categoryFilter !== 'All' && ticket.category !== categoryFilter) return false;
+        if (priorityFilter !== 'All' && String(ticket.priority || '').toLowerCase() !== priorityFilter.toLowerCase()) return false;
+        if (teamFilter !== 'All' && ticket.assigned_team !== teamFilter) return false;
+        return true;
+    }, [categoryFilter, priorityFilter, statusFilter, teamFilter]);
+
+    const handleRealtimeInsert = useCallback((ticket) => {
+        showToast(`New Incident Reported: #${formatTicketId(ticket.id)}`, "success");
+    }, [showToast]);
+
+    const { lastChangedTicketId } = useTicketsRealtime({
+        company: profile?.company,
+        enabled: Boolean(profile),
+        onTicketsChange: setTickets,
+        onInsert: handleRealtimeInsert,
+        shouldInclude: ticketMatchesFilters,
+        channelName: 'admin_tickets_realtime',
+    });
+
     const fetchInitialData = async () => {
         setLoading(true);
         try {
@@ -113,38 +135,6 @@ const AdminTickets = () => {
 
     useEffect(() => {
         fetchInitialData();
-
-        // 4. Real-time subscription to ticket changes
-        const { profile } = useAuthStore.getState();
-        const channel = supabase
-            .channel('admin_tickets_realtime')
-            .on(
-                'postgres_changes',
-                {
-                    event: '*',
-                    schema: 'public',
-                    table: 'tickets',
-                    filter: profile?.company ? `company=eq.${profile.company}` : undefined
-                },
-                (payload) => {
-                    console.log("Admin tickets sync event:", payload.eventType, payload.new);
-                    if (payload.eventType === 'INSERT') {
-                        setTickets(prev => [payload.new, ...prev]);
-                        showToast(`New Incident Reported: #${payload.new.id}`, "success");
-                        // Play a subtle sound or visual cue if needed
-                    } else if (payload.eventType === 'UPDATE') {
-                        setTickets(prev => prev.map(t => t.id === payload.new.id ? { ...t, ...payload.new } : t));
-                    } else if (payload.eventType === 'DELETE') {
-                        setTickets(prev => prev.filter(t => t.id === payload.old.id));
-                    }
-                }
-            )
-            .subscribe();
-
-        return () => {
-            supabase.removeChannel(channel);
-        };
-     
     }, [statusFilter, categoryFilter, priorityFilter, teamFilter]);
 
     // Seed search from URL
@@ -305,8 +295,11 @@ const AdminTickets = () => {
                             </tr>
                         </thead>
                         <tbody className="divide-y divide-slate-50">
-                            {filteredTickets.map((ticket) => (
-                                <tr key={ticket.id} className={`hover:bg-slate-50/50 transition-colors group ${isUpdating === ticket.id ? 'opacity-50 pointer-events-none' : ''}`}>
+                            {filteredTickets.map((ticket) => {
+                                const wasLiveChanged = String(lastChangedTicketId) === String(ticket.id);
+
+                                return (
+                                <tr key={ticket.id} className={`hover:bg-slate-50/50 transition-colors group ${wasLiveChanged ? 'bg-emerald-50/70 ring-1 ring-emerald-100' : ''} ${isUpdating === ticket.id ? 'opacity-50 pointer-events-none' : ''}`}>
                                     {/* Ticket ID */}
                                     <td className="px-6 py-6">
                                         <span className="font-mono text-xs font-black text-emerald-600">#{formatTicketId(ticket.id)}</span>
@@ -347,6 +340,11 @@ const AdminTickets = () => {
                                                 {ticket.category} 
                                                 <span className="text-[9px] font-medium text-slate-300">• {formatTimelineDate(ticket.created_at)}</span>
                                             </span>
+                                            {ticket?.metadata?.translation?.translated && (
+                                                <span className="text-[10px] text-sky-700 mt-1">
+                                                    Translated from {ticket.metadata.translation.source_language_name || ticket.metadata.translation.source_language || 'Unknown'}
+                                                </span>
+                                            )}
                                         </div>
                                     </td>
 
@@ -437,6 +435,8 @@ const AdminTickets = () => {
                                         <SLABadge
                                             priority={ticket.priority}
                                             createdAt={ticket.created_at}
+                                            slaBreachAt={ticket.sla_breach_at}
+                                            slaStatus={ticket.sla_status}
                                             status={ticket.status}
                                         />
                                     </td>
@@ -454,7 +454,8 @@ const AdminTickets = () => {
                                         </div>
                                     </td>
                                 </tr>
-                            ))}
+                                );
+                            })}
                         </tbody>
                     </table>
                 </div>

Frontend/src/components/shared/BugReportWidget.jsx

@@ -23,7 +23,6 @@ function useDiagnostics() {
         const browserInfo = navigator.userAgent;
         const screenInfo = `${window.innerWidth}x${window.innerHeight}`;
 
-         
         setDiagnostics(prev => ({
             ...prev,
             url: window.location.href,
@@ -31,16 +30,6 @@ function useDiagnostics() {
             screen: screenInfo
         }));
 
-        // Intercept console.error
-        const originalConsoleError = console.error;
-        console.error = function (...args) {
-            setDiagnostics(prev => ({
-                ...prev,
-                consoleErrors: [...prev.consoleErrors, args.join(' ')].slice(-10) // keep last 10
-            }));
-            originalConsoleError.apply(console, args);
-        };
-
         // Global Error Listener
         const handleError = (e) => {
             setDiagnostics(prev => ({
@@ -51,7 +40,6 @@ function useDiagnostics() {
         window.addEventListener('error', handleError);
 
         return () => {
-            console.error = originalConsoleError;
             window.removeEventListener('error', handleError);
         };
     }, []);
@@ -417,7 +405,7 @@ const BugReportWidget = ({ advanced = false, customTrigger = null }) => {
                             animate={{ opacity: 1, y: 0, scale: 1 }}
                             exit={{ opacity: 0, y: 10, scale: 0.98 }}
                             transition={{ duration: 0.2, ease: "easeOut" }}
-                            className="bg-white rounded-2xl shadow-2xl w-full max-w-2xl relative z-50 my-auto border border-slate-100 flex flex-col max-h-[90vh]"
+                            className="bg-white dark:bg-gray-800 rounded-2xl shadow-2xl w-full max-w-2xl relative z-50 my-auto border border-slate-100 dark:border-gray-700 flex flex-col max-h-[90vh]"
                         >
                             {/* Header */}
                             <div className="flex items-center justify-between p-5 border-b border-slate-100 shrink-0">
@@ -425,7 +413,7 @@ const BugReportWidget = ({ advanced = false, customTrigger = null }) => {
                                     <div className="p-2 bg-[#13ec80]/10 rounded-lg">
                                         <Bug className="w-6 h-6" />
                                     </div>
-                                    <h2 className="text-xl font-bold text-slate-800">Report a Bug</h2>
+                                    <h2 className="text-xl font-bold text-slate-800 dark:text-white">Report a Bug</h2>
                                 </div>
                                 <button
                                     onClick={handleClose}
@@ -650,7 +638,7 @@ const BugReportWidget = ({ advanced = false, customTrigger = null }) => {
                             </div>
 
                             {/* Footer */}
-                            <div className="p-5 border-t border-slate-100 bg-slate-50 rounded-b-2xl shrink-0 flex justify-end gap-3">
+                            <div className="p-5 border-t border-slate-100 dark:border-gray-700 bg-slate-50 dark:bg-gray-900 rounded-b-2xl shrink-0 flex justify-end gap-3">
                                 <button
                                     type="button"
                                     onClick={handleClose}

Frontend/src/components/shared/ProtectedRoute.jsx

@@ -1,6 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { Navigate, Outlet } from 'react-router-dom';
-import { supabase } from '../../lib/supabaseClient';
 import useAuthStore from '../../store/authStore';
 
 /**
@@ -9,31 +8,9 @@ import useAuthStore from '../../store/authStore';
  * Redirects to the login page if not authenticated.
  */
 const ProtectedRoute = () => {
-    const { user, profile, loading, getCurrentUser } = useAuthStore();
-    const [isChecking, setIsChecking] = useState(true);
+    const { user, profile, isCheckingSession } = useAuthStore();
 
-    useEffect(() => {
-        const checkSession = async () => {
-            // Re-verify the session via Supabase as requested
-            const { data: { session } } = await supabase.auth.getSession();
-
-            if (!session) {
-                // If no session found, ensure our store also knows there's no user
-                setIsChecking(false);
-                return;
-            }
-
-            // If session exists, also sync the store if needed
-            if (!user) {
-                await getCurrentUser();
-            }
-            setIsChecking(false);
-        };
-
-        checkSession();
-    }, [user, getCurrentUser]);
-
-    if (loading || isChecking) {
+    if (isCheckingSession) {
         return (
             <div className="flex h-screen w-screen items-center justify-center bg-white">
                 <div className="h-12 w-12 animate-spin rounded-full border-4 border-emerald-600 border-t-transparent"></div>

Frontend/src/components/shared/TicketChat.jsx

@@ -1,5 +1,8 @@
 import React, { useState, useRef, useEffect, useCallback } from 'react';
-import { Send, User, ShieldCheck, Bot, MessageSquare, Circle, Loader2 } from 'lucide-react';
+import { 
+    Send, User, ShieldCheck, Bot, MessageSquare, Circle, Loader2, 
+    Phone, Video, Mic, Smile, Paperclip, Play, Pause, X, Check, CheckCheck, MicOff, Volume2, Shield 
+} from 'lucide-react';
 import { supabase } from "../../lib/supabaseClient";
 import useAuthStore from "../../store/authStore";
 
@@ -15,6 +18,24 @@ const TicketChat = ({ ticketId, currentUserRole = 'user' }) => {
     const [isInternal, setIsInternal] = useState(false);
     const [isStaff, setIsStaff] = useState(false);
 
+    // Simulated calling states
+    const [activeCall, setActiveCall] = useState(null); // 'Audio' | 'Video' | null
+    const [callDuration, setCallDuration] = useState(0);
+    const [callStatus, setCallStatus] = useState('Ringing...'); // 'Ringing...' | 'Connected'
+    const callTimerRef = useRef(null);
+    const [isMuted, setIsMuted] = useState(false);
+    const [isSpeakerOn, setIsSpeakerOn] = useState(true);
+
+    // Voice note simulation states
+    const [isRecording, setIsRecording] = useState(false);
+    const [recordDuration, setRecordDuration] = useState(0);
+    const recordTimerRef = useRef(null);
+
+    // Voice playback states
+    const [playingVoiceId, setPlayingVoiceId] = useState(null);
+    const [voiceProgress, setVoiceProgress] = useState({});
+    const voicePlayTimerRef = useRef(null);
+
     const { user, profile } = useAuthStore();
     const messagesEndRef = useRef(null);
     const scrollContainerRef = useRef(null);
@@ -128,6 +149,9 @@ const TicketChat = ({ ticketId, currentUserRole = 'user' }) => {
 
         return () => {
             supabase.removeChannel(channel);
+            if (callTimerRef.current) clearInterval(callTimerRef.current);
+            if (recordTimerRef.current) clearInterval(recordTimerRef.current);
+            if (voicePlayTimerRef.current) clearInterval(voicePlayTimerRef.current);
         };
      
  
@@ -233,6 +257,125 @@ const TicketChat = ({ ticketId, currentUserRole = 'user' }) => {
         } catch { return ''; }
     };
 
+    // Voice note simulation helpers
+    const startRecording = () => {
+        setIsRecording(true);
+        setRecordDuration(0);
+        recordTimerRef.current = setInterval(() => {
+            setRecordDuration(prev => prev + 1);
+        }, 1000);
+    };
+
+    const stopRecording = async (shouldSave = true) => {
+        setIsRecording(false);
+        if (recordTimerRef.current) clearInterval(recordTimerRef.current);
+        if (shouldSave && recordDuration > 0) {
+            const durationStr = formatDuration(recordDuration);
+            const content = `🎤 Voice message (${durationStr})`;
+            const tempMessage = {
+                id: `temp-${Date.now()}`,
+                ticket_id: ticketId,
+                sender_id: user.id,
+                sender_name: profile?.full_name || user.email,
+                sender_role: profile?.role || 'user',
+                message: content,
+                is_internal: false,
+                created_at: new Date().toISOString()
+            };
+
+            setMessages(prev => [...prev, tempMessage]);
+            setTimeout(() => scrollToBottom(), 50);
+
+            try {
+                const { error } = await supabase
+                    .from('ticket_messages')
+                    .insert([{
+                        ticket_id: ticketId,
+                        sender_id: user.id,
+                        sender_name: profile?.full_name || user.email,
+                        sender_role: profile?.role || 'user',
+                        message: content
+                    }]);
+                if (error) throw error;
+            } catch (err) {
+                console.error("Error sending voice message:", err);
+                setMessages(prev => prev.filter(m => m.id !== tempMessage.id));
+            }
+        }
+    };
+
+    const playVoiceNote = (msgId, durationStr) => {
+        if (playingVoiceId === msgId) {
+            setPlayingVoiceId(null);
+            if (voicePlayTimerRef.current) clearInterval(voicePlayTimerRef.current);
+            return;
+        }
+
+        if (voicePlayTimerRef.current) clearInterval(voicePlayTimerRef.current);
+        setPlayingVoiceId(msgId);
+
+        const parts = durationStr.split(':');
+        const totalSecs = parseInt(parts[0] || '0') * 60 + parseInt(parts[1] || '0');
+        let currentSecs = voiceProgress[msgId] ? (voiceProgress[msgId] / 100) * totalSecs : 0;
+
+        voicePlayTimerRef.current = setInterval(() => {
+            currentSecs += 0.25;
+            const percentage = Math.min((currentSecs / totalSecs) * 100, 100);
+            
+            setVoiceProgress(prev => ({
+                ...prev,
+                [msgId]: percentage
+            }));
+
+            if (percentage >= 100) {
+                setPlayingVoiceId(null);
+                clearInterval(voicePlayTimerRef.current);
+                setVoiceProgress(prev => ({
+                    ...prev,
+                    [msgId]: 0
+                }));
+            }
+        }, 250);
+    };
+
+    const handleCallPress = (type) => {
+        setActiveCall(type);
+        setCallStatus('Ringing...');
+        setCallDuration(0);
+        setIsMuted(false);
+        setIsSpeakerOn(true);
+
+        setTimeout(() => {
+            setCallStatus('Connected');
+            callTimerRef.current = setInterval(() => {
+                setCallDuration(prev => prev + 1);
+            }, 1000);
+        }, 2000);
+    };
+
+    const endCall = () => {
+        setActiveCall(null);
+        if (callTimerRef.current) clearInterval(callTimerRef.current);
+    };
+
+    const formatDuration = (sec) => {
+        const mins = Math.floor(sec / 60);
+        const secs = sec % 60;
+        return `${mins}:${secs < 10 ? '0' : ''}${secs}`;
+    };
+
+    const getTickColor = (msg) => {
+        if (String(msg.id).startsWith('temp-')) return '#9ca3af'; // sending / unsaved
+        // Double blue ticks if any admin/AI replied after this message
+        const hasAdminReply = messages.some(
+            m => m.created_at &&
+                 new Date(m.created_at) > new Date(msg.created_at) &&
+                 (m.sender_role === 'admin' || m.sender_role === 'super_admin' || m.sender_role === 'ai')
+        );
+        if (hasAdminReply) return '#38bdf8'; // WhatsApp active blue ticks!
+        return '#9ca3af'; // Grey double-ticks!
+    };
+
     const grouped = [];
     let lastDate = null;
     messages.forEach((msg) => {
@@ -245,7 +388,20 @@ const TicketChat = ({ ticketId, currentUserRole = 'user' }) => {
     });
 
     return (
-        <div style={{ background: '#ffffff', borderRadius: '20px', border: '1px solid #f0fdf4', height: '100%', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
+        <div style={{ background: '#ffffff', borderRadius: '20px', border: '1px solid #f0fdf4', height: '100%', display: 'flex', flexDirection: 'column', overflow: 'hidden', position: 'relative' }}>
+            
+            {/* Pulsing Dot Styles */}
+            <style>{`
+                @keyframes pulse {
+                    0% { opacity: 0.3; }
+                    50% { opacity: 1; }
+                    100% { opacity: 0.3; }
+                }
+                .pulse-dot {
+                    animation: pulse 1.2s infinite;
+                }
+            `}</style>
+
             {/* Header */}
             <div style={{ padding: '12px 20px', borderBottom: '1px solid #f0fdf4', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                 <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
@@ -254,16 +410,18 @@ const TicketChat = ({ ticketId, currentUserRole = 'user' }) => {
                     </h2>
                 </div>
 
-                <div className="flex items-center gap-4">
+                <div className="flex items-center gap-4" style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
                     {isStaff && (
                         <div style={{ display: 'flex', alignItems: 'center', background: 'transparent', gap: '4px' }}>
                             <button
+                                type="button"
                                 onClick={() => setIsInternal(false)}
                                 style={{ padding: '4px 12px', fontSize: '10px', fontWeight: 700, borderRadius: '8px', cursor: 'pointer', border: 'none', transition: 'all 0.2s', ...( !isInternal ? { background: '#0f1f12', color: '#ffffff' } : { background: 'transparent', color: '#6b7280' } ) }}
                             >
                                 PUBLIC
                             </button>
                             <button
+                                type="button"
                                 onClick={() => setIsInternal(true)}
                                 style={{ padding: '4px 12px', fontSize: '10px', fontWeight: 700, borderRadius: '8px', cursor: 'pointer', border: 'none', transition: 'all 0.2s', ...( isInternal ? { background: '#0f1f12', color: '#ffffff' } : { background: 'transparent', color: '#6b7280' } ) }}
                             >
@@ -271,6 +429,26 @@ const TicketChat = ({ ticketId, currentUserRole = 'user' }) => {
                             </button>
                         </div>
                     )}
+
+                    {/* WhatsApp Call Header Buttons */}
+                    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                        <button
+                            type="button"
+                            onClick={() => handleCallPress('Audio')}
+                            style={{ background: 'transparent', border: 'none', cursor: 'pointer', padding: '6px', color: '#374151' }}
+                            className="hover:text-emerald-600 transition-colors"
+                        >
+                            <Phone size={18} />
+                        </button>
+                        <button
+                            type="button"
+                            onClick={() => handleCallPress('Video')}
+                            style={{ background: 'transparent', border: 'none', cursor: 'pointer', padding: '6px', color: '#374151' }}
+                            className="hover:text-emerald-600 transition-colors"
+                        >
+                            <Video size={18} />
+                        </button>
+                    </div>
                 </div>
             </div>
 
@@ -304,6 +482,12 @@ const TicketChat = ({ ticketId, currentUserRole = 'user' }) => {
                         const msg = item.data;
                         const isMe = msg.sender_id === user?.id;
                         const isAdmin = msg.sender_role === 'admin' || msg.sender_role === 'super_admin';
+                        const isVoiceNote = msg.message && msg.message.startsWith('🎤 Voice message');
+                        let voiceDuration = "0:00";
+                        if (isVoiceNote) {
+                            const match = msg.message.match(/\((.*?)\)/);
+                            if (match) voiceDuration = match[1];
+                        }
 
                         return (
                             <div key={msg.id || i} className={`flex gap-2.5 ${isMe ? 'justify-end' : 'justify-start'} group py-1`}>
@@ -322,6 +506,15 @@ const TicketChat = ({ ticketId, currentUserRole = 'user' }) => {
                                         <span className="text-[8px] font-bold text-slate-300">
                                             {formatTime(msg.created_at)}
                                         </span>
+                                        {isMe && (
+                                            <span style={{ marginLeft: '4px' }}>
+                                                {String(msg.id).startsWith('temp-') ? (
+                                                    <Check size={11} className="text-slate-300" />
+                                                ) : (
+                                                    <CheckCheck size={11} style={{ color: getTickColor(msg) }} />
+                                                )}
+                                            </span>
+                                        )}
                                     </div>
 
                                     <div style={{
@@ -334,7 +527,47 @@ const TicketChat = ({ ticketId, currentUserRole = 'user' }) => {
                                             background: '#0f1f12', color: '#ffffff', borderRadius: '14px'
                                         })
                                     }}>
-                                        {msg.message}
+                                        {isVoiceNote ? (
+                                            <div style={{ display: 'flex', alignItems: 'center', gap: '12px', width: '220px' }}>
+                                                <button
+                                                    type="button"
+                                                    onClick={() => playVoiceNote(msg.id, voiceDuration)}
+                                                    style={{ width: '32px', height: '32px', borderRadius: '50%', border: 'none', background: 'rgba(255,255,255,0.15)', color: isMe ? '#ffffff' : '#0f1f12', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }}
+                                                >
+                                                    {playingVoiceId === msg.id ? <Pause size={14} fill="currentColor" /> : <Play size={14} fill="currentColor" style={{ marginLeft: '2px' }} />}
+                                                </button>
+                                                <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: '4px' }}>
+                                                    {/* Waveform bars */}
+                                                    <div style={{ display: 'flex', alignItems: 'center', gap: '3px', height: '18px' }}>
+                                                        {[8, 14, 18, 10, 6, 12, 16, 10, 14, 20, 12, 8, 14, 18, 10, 8, 12, 6, 14, 8].map((barHeight, idx) => {
+                                                            const barProgress = (idx / 20) * 100;
+                                                            const isPlayed = (voiceProgress[msg.id] || 0) >= barProgress;
+                                                            return (
+                                                                <div
+                                                                    key={idx}
+                                                                    style={{
+                                                                        width: '2px',
+                                                                        borderRadius: '1px',
+                                                                        height: `${barHeight}px`,
+                                                                        background: isPlayed
+                                                                            ? (isMe ? '#34d399' : '#0f1f12')
+                                                                            : (isMe ? 'rgba(255,255,255,0.25)' : 'rgba(0,0,0,0.15)')
+                                                                    }}
+                                                                />
+                                                            );
+                                                        })}
+                                                    </div>
+                                                    <span style={{ fontSize: '9px', fontWeight: 600, opacity: 0.8 }}>
+                                                        {playingVoiceId === msg.id 
+                                                            ? formatDuration(Math.round(((voiceProgress[msg.id] || 0) / 100) * (parseInt(voiceDuration.split(':')[0] || '0') * 60 + parseInt(voiceDuration.split(':')[1] || '0'))))
+                                                            : voiceDuration
+                                                        }
+                                                    </span>
+                                                </div>
+                                            </div>
+                                        ) : (
+                                            msg.message
+                                        )}
                                     </div>
                                 </div>
 
@@ -358,27 +591,111 @@ const TicketChat = ({ ticketId, currentUserRole = 'user' }) => {
 
             {/* Input */}
             <div style={{ padding: '16px 20px', borderTop: '1px solid #f0fdf4', background: '#ffffff' }}>
-                <form onSubmit={handleSend} className="flex gap-3">
-                    <input
-                        ref={inputRef}
-                        type="text"
-                        value={inputValue}
-                        onChange={handleInputChange}
-                        placeholder="Type your message..."
-                        style={{ flex: 1, background: '#f9fafb', border: '1.5px solid #e5e7eb', borderRadius: '12px', padding: '10px 16px', fontSize: '13px', outline: 'none' }}
-                        className="focus:border-emerald-500 transition-colors"
-                    />
-                    <button
-                        type="submit"
-                        disabled={!inputValue.trim() || !user}
-                        style={{ padding: '10px 20px', background: '#16a34a', color: '#ffffff', borderRadius: '10px', fontWeight: 600, fontSize: '12px', border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '8px' }}
-                        className="active:scale-95 transition-transform disabled:opacity-50"
-                    >
-                        {isInternal ? <ShieldCheck size={14} /> : <Send size={14} />}
-                        <span className="hidden sm:inline">{isInternal ? 'Note' : 'Send'}</span>
-                    </button>
-                </form>
+                {isRecording ? (
+                    <div style={{ display: 'flex', alignItems: 'center', gap: '12px', background: '#f9fafb', border: '1.5px dashed #f87171', borderRadius: '12px', padding: '10px 16px', fontSize: '13px' }}>
+                        <div className="pulse-dot" style={{ width: '8px', height: '8px', borderRadius: '50%', background: '#ef4444' }} />
+                        <span style={{ flex: 1, color: '#ef4444', fontWeight: 700 }}>Recording {formatDuration(recordDuration)}</span>
+                        <button
+                            type="button"
+                            onClick={() => stopRecording(false)}
+                            style={{ background: 'transparent', border: 'none', color: '#9ca3af', cursor: 'pointer', fontSize: '11px', fontWeight: 700 }}
+                        >
+                            Cancel
+                        </button>
+                        <button
+                            type="button"
+                            onClick={() => stopRecording(true)}
+                            style={{ background: '#ef4444', border: 'none', color: '#ffffff', borderRadius: '8px', padding: '6px 12px', cursor: 'pointer', fontSize: '11px', fontWeight: 700, display: 'flex', alignItems: 'center', gap: '4px' }}
+                        >
+                            <Send size={10} />
+                            Send
+                        </button>
+                    </div>
+                ) : (
+                    <form onSubmit={handleSend} className="flex gap-3">
+                        <input
+                            ref={inputRef}
+                            type="text"
+                            value={inputValue}
+                            onChange={handleInputChange}
+                            placeholder="Type your message..."
+                            style={{ flex: 1, background: '#f9fafb', border: '1.5px solid #e5e7eb', borderRadius: '12px', padding: '10px 16px', fontSize: '13px', outline: 'none' }}
+                            className="focus:border-emerald-500 transition-colors"
+                        />
+                        <button
+                            type="button"
+                            onClick={startRecording}
+                            style={{ padding: '10px', background: 'rgba(0,0,0,0.05)', color: '#374151', borderRadius: '10px', border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
+                            className="active:scale-95 transition-transform"
+                        >
+                            <Mic size={16} />
+                        </button>
+                        <button
+                            type="submit"
+                            disabled={!inputValue.trim() || !user}
+                            style={{ padding: '10px 20px', background: '#16a34a', color: '#ffffff', borderRadius: '10px', fontWeight: 600, fontSize: '12px', border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '8px' }}
+                            className="active:scale-95 transition-transform disabled:opacity-50"
+                        >
+                            {isInternal ? <ShieldCheck size={14} /> : <Send size={14} />}
+                            <span className="hidden sm:inline">{isInternal ? 'Note' : 'Send'}</span>
+                        </button>
+                    </form>
+                )}
             </div>
+
+            {/* High-Fidelity Call Overlay Modal */}
+            {activeCall && (
+                <div style={{ position: 'absolute', top: 0, bottom: 0, left: 0, right: 0, background: '#0b132b', color: '#ffffff', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', padding: '40px 20px', zIndex: 99999 }}>
+                    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '6px', opacity: 0.6 }}>
+                        <Shield size={12} className="text-emerald-500" />
+                        <span style={{ fontSize: '9px', fontWeight: 800, letterSpacing: '0.1em' }}>SECURE END-TO-END ENCRYPTED</span>
+                    </div>
+
+                    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '14px' }}>
+                        <div style={{ width: '90px', height: '90px', borderRadius: '50%', background: '#16a34a', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '32px', fontWeight: 900, boxShadow: '0 10px 25px rgba(22,163,74,0.3)' }}>
+                            {(ticketId || 'A')[0].toUpperCase()}
+                        </div>
+                        <h3 style={{ fontSize: '20px', fontWeight: 800, margin: 0 }}>Support Desk Call</h3>
+                        <span style={{ fontSize: '13px', opacity: 0.7 }}>
+                            {callStatus === 'Connected' ? formatDuration(callDuration) : callStatus}
+                        </span>
+                    </div>
+
+                    {/* Web Video call screen camera mock */}
+                    {activeCall === 'Video' && (
+                        <div style={{ width: '100%', height: '140px', background: 'rgba(255,255,255,0.03)', borderRadius: '16px', border: '1px solid rgba(255,255,255,0.08)', position: 'relative', overflow: 'hidden', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                            <div style={{ width: '40px', height: '60px', borderRadius: '8px', background: '#1d2d44', border: '1px solid rgba(255,255,255,0.1)', position: 'absolute', bottom: '12px', right: '12px' }} />
+                            <span style={{ fontSize: '10px', opacity: 0.4 }}>Camera active stream</span>
+                        </div>
+                    )}
+
+                    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '20px' }}>
+                        <button
+                            type="button"
+                            onClick={() => setIsMuted(!isMuted)}
+                            style={{ width: '48px', height: '48px', borderRadius: '50%', border: 'none', background: isMuted ? '#ffffff' : 'rgba(255,255,255,0.08)', color: isMuted ? '#0b132b' : '#ffffff', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
+                        >
+                            {isMuted ? <MicOff size={18} /> : <Mic size={18} />}
+                        </button>
+                        
+                        <button
+                            type="button"
+                            onClick={endCall}
+                            style={{ width: '48px', height: '48px', borderRadius: '50%', border: 'none', background: '#ef4444', color: '#ffffff', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
+                        >
+                            <Phone size={18} style={{ transform: 'rotate(135deg)' }} />
+                        </button>
+
+                        <button
+                            type="button"
+                            onClick={() => setIsSpeakerOn(!isSpeakerOn)}
+                            style={{ width: '48px', height: '48px', borderRadius: '50%', border: 'none', background: isSpeakerOn ? '#ffffff' : 'rgba(255,255,255,0.08)', color: isSpeakerOn ? '#16a34a' : '#ffffff', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
+                        >
+                            <Volume2 size={18} />
+                        </button>
+                    </div>
+                </div>
+            )}
         </div>
     );
 };

Frontend/src/components/shared/WebhookSettings.jsx

@@ -0,0 +1,227 @@
+import React, { useState, useEffect } from "react";
+import { supabase } from "../../lib/supabaseClient";
+import useAuthStore from "../../store/authStore";
+
+/**
+ * WebhookSettings — Admin component to configure Slack/Teams webhook URL.
+ * Stores webhook URL per company tenant in Supabase.
+ */
+const WebhookSettings = () => {
+  const { profile } = useAuthStore();
+  const [webhookUrl, setWebhookUrl] = useState("");
+  const [isEnabled, setIsEnabled] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [fetching, setFetching] = useState(true);
+  const [message, setMessage] = useState({ text: "", type: "" });
+
+  const companyId = profile?.company_id;
+
+  useEffect(() => {
+    const fetchSettings = async () => {
+      if (!companyId) return;
+      setFetching(true);
+      try {
+        const { data, error } = await supabase
+          .from("webhook_settings")
+          .select("webhook_url, is_enabled")
+          .eq("company_id", companyId)
+          .single();
+
+        if (data) {
+          setWebhookUrl(data.webhook_url || "");
+          setIsEnabled(data.is_enabled || false);
+        }
+      } catch (err) {
+        console.log("No webhook settings found — first time setup");
+      } finally {
+        setFetching(false);
+      }
+    };
+
+    fetchSettings();
+  }, [companyId]);
+
+  const detectPlatform = (url) => {
+    if (url.includes("hooks.slack.com")) return "Slack";
+    if (url.includes("webhook.office.com") || url.includes("outlook.office.com"))
+      return "Microsoft Teams";
+    return null;
+  };
+
+  const validateUrl = (url) => {
+    if (!url) return false;
+    return url.startsWith("https://") && detectPlatform(url) !== null;
+  };
+
+  const handleSave = async () => {
+    if (!validateUrl(webhookUrl)) {
+      setMessage({
+        text: "❌ Please enter a valid Slack or Microsoft Teams webhook URL.",
+        type: "error",
+      });
+      return;
+    }
+
+    setLoading(true);
+    setMessage({ text: "", type: "" });
+
+    try {
+      const { error } = await supabase.from("webhook_settings").upsert(
+        {
+          company_id: companyId,
+          webhook_url: webhookUrl,
+          is_enabled: isEnabled,
+          updated_at: new Date().toISOString(),
+        },
+        { onConflict: "company_id" }
+      );
+
+      if (error) throw error;
+
+      setMessage({
+        text: `✅ Webhook saved successfully for ${detectPlatform(webhookUrl)}!`,
+        type: "success",
+      });
+    } catch (err) {
+      setMessage({
+        text: `❌ Failed to save: ${err.message}`,
+        type: "error",
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleToggle = async () => {
+    const newValue = !isEnabled;
+    setIsEnabled(newValue);
+
+    if (webhookUrl) {
+      await supabase.from("webhook_settings").upsert(
+        {
+          company_id: companyId,
+          webhook_url: webhookUrl,
+          is_enabled: newValue,
+          updated_at: new Date().toISOString(),
+        },
+        { onConflict: "company_id" }
+      );
+    }
+  };
+
+  if (fetching) {
+    return (
+      <div className="flex items-center justify-center p-8">
+        <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-500"></div>
+      </div>
+    );
+  }
+
+  const platform = detectPlatform(webhookUrl);
+
+  return (
+    <div className="bg-gray-900 border border-gray-700 rounded-xl p-6 max-w-2xl">
+      <div className="flex items-center gap-3 mb-6">
+        <div className="bg-blue-600 p-2 rounded-lg">
+          <svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
+              d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
+          </svg>
+        </div>
+        <div>
+          <h3 className="text-white font-semibold text-lg">Webhook Notifications</h3>
+          <p className="text-gray-400 text-sm">Get critical ticket alerts in Slack or Microsoft Teams</p>
+        </div>
+      </div>
+
+      {/* Webhook URL Input */}
+      <div className="mb-4">
+        <label className="block text-gray-300 text-sm font-medium mb-2">
+          Webhook URL
+        </label>
+        <input
+          type="url"
+          value={webhookUrl}
+          onChange={(e) => {
+            setWebhookUrl(e.target.value);
+            setMessage({ text: "", type: "" });
+          }}
+          placeholder="https://hooks.slack.com/... or https://outlook.office.com/webhook/..."
+          className="w-full bg-gray-800 border border-gray-600 rounded-lg px-4 py-3 text-white text-sm placeholder-gray-500 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-colors"
+        />
+        {/* Platform Detection Badge */}
+        {platform && (
+          <div className="mt-2 flex items-center gap-2">
+            <span className={`text-xs px-2 py-1 rounded-full font-medium ${
+              platform === "Slack"
+                ? "bg-green-900 text-green-300"
+                : "bg-blue-900 text-blue-300"
+            }`}>
+              ✓ {platform} webhook detected
+            </span>
+          </div>
+        )}
+      </div>
+
+      {/* Toggle */}
+      <div className="flex items-center justify-between mb-6 p-4 bg-gray-800 rounded-lg">
+        <div>
+          <p className="text-white text-sm font-medium">Enable Notifications</p>
+          <p className="text-gray-400 text-xs">
+            Send alerts for Critical/High priority tickets
+          </p>
+        </div>
+        <button
+          onClick={handleToggle}
+          className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none ${
+            isEnabled ? "bg-blue-600" : "bg-gray-600"
+          }`}
+        >
+          <span
+            className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
+              isEnabled ? "translate-x-6" : "translate-x-1"
+            }`}
+          />
+        </button>
+      </div>
+
+      {/* Message */}
+      {message.text && (
+        <div className={`mb-4 p-3 rounded-lg text-sm ${
+          message.type === "success"
+            ? "bg-green-900/50 text-green-300 border border-green-700"
+            : "bg-red-900/50 text-red-300 border border-red-700"
+        }`}>
+          {message.text}
+        </div>
+      )}
+
+      {/* Save Button */}
+      <button
+        onClick={handleSave}
+        disabled={loading || !webhookUrl}
+        className="w-full bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 disabled:cursor-not-allowed text-white font-medium py-3 px-4 rounded-lg transition-colors text-sm"
+      >
+        {loading ? (
+          <span className="flex items-center justify-center gap-2">
+            <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
+            Saving...
+          </span>
+        ) : (
+          "Save Webhook Settings"
+        )}
+      </button>
+
+      {/* Info */}
+      <div className="mt-4 p-3 bg-gray-800 rounded-lg">
+        <p className="text-gray-400 text-xs leading-relaxed">
+          <span className="text-yellow-400 font-medium">ℹ️ How to get webhook URL: </span>
+          For Slack: Create an Incoming Webhook in your Slack App settings.
+          For Teams: Go to channel → Connectors → Incoming Webhook.
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default WebhookSettings;

Frontend/src/config.js

@@ -6,16 +6,13 @@ const getBackendUrl = () => {
     const envUrl = import.meta.env.VITE_BACKEND_URL;
     if (envUrl) return envUrl.trim().replace(/\/$/, '');
 
-    // Dynamically deduce backend URL if running locally or on custom domain
-    if (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') {
-        return 'http://localhost:8000';
-    }
-    // Default to the live Hugging Face Space for stability in production deployment
+    // Default to the live Hugging Face Space for stability
     return 'https://ritesh19180-ai-helpdesk-api.hf.space';
 };
 
 export const API_CONFIG = {
     BACKEND_URL: getBackendUrl(),
     FRONTEND_URL: window.location.origin,
-    IS_PROD: import.meta.env.PROD
+    IS_PROD: import.meta.env.PROD,
+    USE_MOCK: import.meta.env.VITE_USE_MOCK !== 'false'  // default true
 };

Frontend/src/index.css

@@ -43,10 +43,12 @@
   }
 
   body {
-    @apply bg-[#f6f8f7] text-slate-900;
+    @apply bg-[#f6f8f7] text-slate-900 dark:bg-gray-900 dark:text-white;
   }
 
   .dark {
+    background-color: #111827;
+    color: #f9fafb;
     --background: 224 71.4% 4.1%;
     --foreground: 210 20% 98%;
     --card: 224 71.4% 4.1%;
@@ -91,16 +93,54 @@
   }
 }
 
-html{
+html {
   overflow-y: scroll;
-  scrollbar-width: none; /* Firefox */
-}
-
-html::-webkit-scrollbar{
-  width: 0;
-  height: 0;
 }
 
 body{
   overflow-x: hidden;
+}
+
+/* Dark Mode Global Overrides */
+.dark .bg-white {
+  background-color: #111827 !important;
+}
+.dark .bg-gray-50 {
+  background-color: #1f2937 !important;
+}
+.dark .bg-gray-100 {
+  background-color: #374151 !important;
+}
+.dark .text-gray-900 {
+  color: #f9fafb !important;
+}
+.dark .text-gray-800 {
+  color: #f3f4f6 !important;
+}
+.dark .text-gray-700 {
+  color: #e5e7eb !important;
+}
+.dark .text-gray-600 {
+  color: #d1d5db !important;
+}
+.dark .text-gray-500 {
+  color: #9ca3af !important;
+}
+.dark .border-gray-100 {
+  border-color: #374151 !important;
+}
+.dark .border-gray-200 {
+  border-color: #4b5563 !important;
+}
+.dark .shadow-sm {
+  box-shadow: 0 1px 2px rgba(0,0,0,0.5) !important;
+}
+.dark nav {
+  background-color: #1f2937 !important;
+}
+.dark nav a {
+  color: #e5e7eb !important;
+}
+.dark nav span {
+  color: #f9fafb !important;
 }

Frontend/src/legacy_ui/Dashboard.jsx

@@ -63,7 +63,7 @@ const Dashboard = () => {
       }
     };
     fetchTickets();
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+
   }, []);
 
   // Detect newly inserted or updated tickets for highlight animation
@@ -84,7 +84,7 @@ const Dashboard = () => {
     });
 
     prevTicketsRef.current = tickets;
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+
   }, [tickets]);
 
   // Summary Counts

Frontend/src/pages/AboutUs.jsx

@@ -1,65 +1,387 @@
-import React from 'react';
-import { useNavigate } from 'react-router-dom';
-import { ShieldCheck, Heart, Sparkles, ArrowLeft, Target, Award } from 'lucide-react';
-import { Card } from '../components/ui/card';
-
-export default function AboutUs() {
-    const navigate = useNavigate();
-
-    return (
-        <div className="min-h-screen bg-[#f6f8f7] pb-20">
-            {/* Header */}
-            <header className="w-full bg-white border-b border-gray-200 sticky top-0 z-50">
-                <div className="max-w-[1100px] mx-auto px-4 md:px-6 h-16 flex items-center justify-between">
-                    <div className="flex items-center gap-3 cursor-pointer" onClick={() => navigate('/')}>
-                        <img src="/favicon.png" alt="HELPDESK.AI Logo" className="w-7 h-7 object-contain" />
-                        <div className="flex items-baseline gap-2">
-                            <h1 className="text-xl font-black tracking-tighter text-gray-900 italic">HELPDESK.AI</h1>
-                            <span className="px-2 py-0.5 text-[10px] font-black bg-emerald-100 text-emerald-800 rounded-md uppercase tracking-wider">About</span>
-                        </div>
-                    </div>
-                    <button 
-                        onClick={() => navigate('/')}
-                        className="flex items-center gap-2 text-xs font-bold text-gray-600 hover:text-emerald-600 transition-colors bg-gray-50 hover:bg-emerald-50 px-3.5 py-2 rounded-xl border border-gray-200"
-                    >
-                        <ArrowLeft size={14} /> Back to Home
-                    </button>
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import { motion } from "framer-motion";
+import {
+  ArrowLeft,
+  FolderOpen,
+  Zap,
+  Layers,
+  ShieldCheck,
+  Database,
+  Server,
+  Laptop,
+  Github,
+  ExternalLink,
+  Users,
+  BookOpen,
+  HelpCircle,
+  Code
+} from "lucide-react";
+
+// Framer Motion Animation Variants
+const fadeInUp = {
+  hidden: { opacity: 0, y: 30 },
+  visible: { opacity: 1, y: 0, transition: { duration: 0.6, ease: "easeOut" } }
+};
+
+const staggerContainer = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.1
+    }
+  }
+};
+
+const AboutUs = () => {
+  const navigate = useNavigate();
+
+  const capabilities = [
+    {
+      icon: <FolderOpen className="w-6 h-6 text-emerald-400" />,
+      title: "AI Classification",
+      desc: "Instantly categorizes requests into Network, Hardware, Software, or Access categories using natural language understanding."
+    },
+    {
+      icon: <Zap className="w-6 h-6 text-emerald-400" />,
+      title: "Smart Resolution",
+      desc: "Leverages historical ticket resolutions to automatically generate accurate solution drafts or self-solve simple issues."
+    },
+    {
+      icon: <Layers className="w-6 h-6 text-emerald-400" />,
+      title: "Duplicate Detection",
+      desc: "Uses vector similarity search to identify and group duplicate incident reports in real time, preventing agent alert fatigue."
+    },
+    {
+      icon: <ShieldCheck className="w-6 h-6 text-emerald-400" />,
+      title: "Multi-Tenant Isolation",
+      desc: "Ensures strict enterprise-grade security isolation and customized configuration profiles for each registered organization."
+    }
+  ];
+
+  const pipelineStages = [
+    {
+      step: "01",
+      title: "Ingestion",
+      desc: "Support tickets are ingested seamlessly via email parsers, customer web widgets, or direct dashboard submission."
+    },
+    {
+      step: "02",
+      title: "Extraction",
+      desc: "System runs OCR to extract text from screenshots and applies Named Entity Recognition (NER) to pull system names and keywords."
+    },
+    {
+      step: "03",
+      title: "Classification",
+      desc: "Advanced NLP models predict the correct ticket category and calculate priority based on urgency cues."
+    },
+    {
+      step: "04",
+      title: "Similarity Scan",
+      desc: "A vector similarity scan determines if this incident is already being resolved, linking duplicate cases automatically."
+    },
+    {
+      step: "05",
+      title: "Auto-Resolution",
+      desc: "Matched resolutions are evaluated; if confidence thresholds are met, the system auto-resolves the ticket and emails the user."
+    },
+    {
+      step: "06",
+      title: "Smart Triage",
+      desc: "Unresolved tickets are automatically routed to the precise engineering team queues with complete AI logs attached."
+    }
+  ];
+
+  const techStack = [
+    {
+      category: "Frontend Experience",
+      icon: <Laptop className="w-5 h-5 text-emerald-400" />,
+      techs: ["React (Vite)", "Tailwind CSS", "Framer Motion", "Lucide React"]
+    },
+    {
+      category: "Intelligence & Backend",
+      icon: <Server className="w-5 h-5 text-emerald-400" />,
+      techs: ["FastAPI (Python)", "Hugging Face Hub", "Transformers & PyTorch", "OCR Engine"]
+    },
+    {
+      category: "Database & Services",
+      icon: <Database className="w-5 h-5 text-emerald-400" />,
+      techs: ["Supabase", "PostgreSQL", "pgvector (Similarity)", "Realtime Webhooks"]
+    }
+  ];
+
+  return (
+    <div className="min-h-screen bg-[#021510] text-white relative overflow-hidden font-sans">
+      {/* Background Ambient Glows */}
+      <div className="absolute top-0 left-0 w-[500px] h-[500px] bg-emerald-500/10 blur-[130px] rounded-full pointer-events-none" />
+      <div className="absolute bottom-0 right-0 w-[500px] h-[500px] bg-teal-400/10 blur-[130px] rounded-full pointer-events-none" />
+      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[350px] h-[350px] bg-green-500/5 blur-[120px] rounded-full pointer-events-none" />
+
+      {/* Main Container */}
+      <div className="max-w-6xl mx-auto px-6 py-12 relative z-10">
+        
+        {/* Navigation & Header */}
+        <motion.div 
+          initial={{ opacity: 0, y: -10 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5 }}
+          className="mb-12 flex justify-between items-center"
+        >
+          <button 
+            onClick={() => navigate("/")}
+            className="group inline-flex items-center gap-2 bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 hover:bg-emerald-500/20 hover:border-emerald-500/30 px-4 py-2 rounded-full text-sm font-semibold tracking-wide transition-all shadow-md"
+          >
+            <ArrowLeft size={16} className="group-hover:-translate-x-1 transition-transform" />
+            Back to Home
+          </button>
+          
+          <div className="flex items-center gap-2">
+            <span className="w-2.5 h-2.5 rounded-full bg-emerald-500 animate-pulse" />
+            <span className="text-xs font-bold text-emerald-400 uppercase tracking-widest">GSSoC 2026 Compliant</span>
+          </div>
+        </motion.div>
+
+        {/* Hero Section */}
+        <section className="text-center mb-24">
+          <motion.div
+            initial="hidden"
+            animate="visible"
+            variants={fadeInUp}
+            className="max-w-3xl mx-auto"
+          >
+            <h1 className="text-4xl md:text-6xl font-extrabold mb-6 tracking-tight leading-tight">
+              About
+              <span className="bg-gradient-to-r from-emerald-400 to-teal-300 bg-clip-text text-transparent">
+                {" "}HELPDESK.AI
+              </span>
+            </h1>
+            <p className="text-gray-400 text-lg md:text-xl leading-relaxed mb-8">
+              A modern, intelligent, and autonomous helpdesk platform designed to end manual ticket triage. By utilizing advanced Natural Language Processing and Vector similarity, we streamline support workflows from chaos to clarity.
+            </p>
+          </motion.div>
+        </section>
+
+        {/* Mission Statement */}
+        <section className="mb-28">
+          <motion.div
+            initial="hidden"
+            whileInView="visible"
+            viewport={{ once: true, margin: "-100px" }}
+            variants={fadeInUp}
+            className="bg-white/5 border border-white/10 rounded-3xl p-8 md:p-12 relative overflow-hidden backdrop-blur-xl"
+          >
+            <div className="absolute inset-0 bg-gradient-to-br from-emerald-500/5 to-transparent pointer-events-none" />
+            <div className="relative z-10 max-w-4xl mx-auto text-center">
+              <span className="text-xs font-bold uppercase tracking-widest text-emerald-400 mb-4 block">Our Vision</span>
+              <h2 className="text-2xl md:text-3xl font-bold mb-6 text-white tracking-tight">
+                "Eliminating manual ticket routing and solving repeating support incidents instantly."
+              </h2>
+              <p className="text-gray-400 leading-relaxed max-w-2xl mx-auto">
+                We believe engineering and IT support teams shouldn't spend their valuable hours reviewing, tagging, and assigning tickets. Our vision is a self-driving support ecosystem that analyzes context, remembers historical resolutions, and automates resolution at scale.
+              </p>
+            </div>
+          </motion.div>
+        </section>
+
+        {/* Core Capabilities */}
+        <section className="mb-28">
+          <div className="text-center mb-16">
+            <span className="text-xs font-bold uppercase tracking-widest text-emerald-400 mb-3 block">Platform Intelligence</span>
+            <h2 className="text-3xl font-extrabold tracking-tight">Core Capabilities</h2>
+          </div>
+
+          <motion.div 
+            initial="hidden"
+            whileInView="visible"
+            viewport={{ once: true, margin: "-50px" }}
+            variants={staggerContainer}
+            className="grid grid-cols-1 md:grid-cols-2 gap-8"
+          >
+            {capabilities.map((cap, idx) => (
+              <motion.div
+                key={idx}
+                variants={fadeInUp}
+                whileHover={{ scale: 1.01, borderColor: "rgba(16,185,129,0.3)" }}
+                className="bg-white/5 border border-white/10 p-8 rounded-3xl backdrop-blur-xl transition-colors duration-300 group"
+              >
+                <div className="w-12 h-12 rounded-2xl bg-emerald-500/10 border border-emerald-500/20 flex items-center justify-center mb-6 group-hover:bg-emerald-500/20 transition-all shadow-inner">
+                  {cap.icon}
+                </div>
+                <h3 className="text-xl font-bold mb-3 text-white">{cap.title}</h3>
+                <p className="text-gray-400 text-sm leading-relaxed">{cap.desc}</p>
+              </motion.div>
+            ))}
+          </motion.div>
+        </section>
+
+        {/* AI Pipeline Architecture */}
+        <section className="mb-28">
+          <div className="text-center mb-16">
+            <span className="text-xs font-bold uppercase tracking-widest text-emerald-400 mb-3 block">System Workflow</span>
+            <h2 className="text-3xl font-extrabold tracking-tight">AI Pipeline Architecture</h2>
+            <p className="text-gray-400 mt-2 text-sm">How HELPDESK.AI processes and resolves issues in milliseconds</p>
+          </div>
+
+          <motion.div 
+            initial="hidden"
+            whileInView="visible"
+            viewport={{ once: true, margin: "-50px" }}
+            variants={staggerContainer}
+            className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
+          >
+            {pipelineStages.map((stage, idx) => (
+              <motion.div
+                key={idx}
+                variants={fadeInUp}
+                className="bg-white/5 border border-white/10 p-6 rounded-2xl relative overflow-hidden backdrop-blur-xl hover:border-emerald-500/20 transition-colors"
+              >
+                <div className="absolute top-4 right-4 text-4xl font-extrabold text-emerald-500/10 select-none">
+                  {stage.step}
+                </div>
+                <div className="inline-flex items-center justify-center w-8 h-8 rounded-lg bg-emerald-500/10 text-emerald-400 font-bold text-xs mb-4 border border-emerald-500/25">
+                  {stage.step}
+                </div>
+                <h3 className="text-lg font-bold mb-2 text-white">{stage.title}</h3>
+                <p className="text-gray-400 text-xs leading-relaxed">{stage.desc}</p>
+              </motion.div>
+            ))}
+          </motion.div>
+        </section>
+
+        {/* Tech Stack Grid */}
+        <section className="mb-28">
+          <div className="text-center mb-16">
+            <span className="text-xs font-bold uppercase tracking-widest text-emerald-400 mb-3 block">Technology Stack</span>
+            <h2 className="text-3xl font-extrabold tracking-tight">Built with Modern Tech</h2>
+          </div>
+
+          <motion.div 
+            initial="hidden"
+            whileInView="visible"
+            viewport={{ once: true, margin: "-50px" }}
+            variants={staggerContainer}
+            className="grid grid-cols-1 md:grid-cols-3 gap-8"
+          >
+            {techStack.map((stack, idx) => (
+              <motion.div
+                key={idx}
+                variants={fadeInUp}
+                className="bg-white/5 border border-white/10 p-8 rounded-3xl backdrop-blur-xl relative overflow-hidden"
+              >
+                <div className="flex items-center gap-3 mb-6">
+                  <div className="p-2 rounded-xl bg-emerald-500/10 border border-emerald-500/20">
+                    {stack.icon}
+                  </div>
+                  <h3 className="text-lg font-bold text-white leading-tight">{stack.category}</h3>
+                </div>
+                <ul className="space-y-3">
+                  {stack.techs.map((tech, techIdx) => (
+                    <li key={techIdx} className="flex items-center gap-2.5 text-gray-400 text-sm">
+                      <span className="w-1.5 h-1.5 rounded-full bg-emerald-500" />
+                      {tech}
+                    </li>
+                  ))}
+                </ul>
+              </motion.div>
+            ))}
+          </motion.div>
+        </section>
+
+        {/* Resource Links */}
+        <section className="mb-28">
+          <div className="text-center mb-12">
+            <span className="text-xs font-bold uppercase tracking-widest text-emerald-400 mb-3 block">External Resources</span>
+            <h2 className="text-3xl font-extrabold tracking-tight">Project Documentation & Links</h2>
+          </div>
+
+          <div className="grid grid-cols-1 sm:grid-cols-3 gap-6">
+            <motion.a
+              href="https://github.com/ritesh-1918/HELPDESK.AI"
+              target="_blank"
+              rel="noopener noreferrer"
+              whileHover={{ y: -4, borderColor: "rgba(16,185,129,0.3)" }}
+              className="bg-white/5 border border-white/10 p-6 rounded-2xl flex items-center justify-between group backdrop-blur-xl transition-all"
+            >
+              <div className="flex items-center gap-4">
+                <div className="p-3 bg-emerald-500/10 rounded-xl text-emerald-400 group-hover:bg-emerald-500/20 transition-all">
+                  <Github size={22} />
                 </div>
-            </header>
-
-            <div className="max-w-[800px] mx-auto px-4 md:px-6 mt-12 space-y-12">
-                <div className="space-y-4">
-                    <div className="inline-flex items-center gap-2 px-3 py-1 bg-emerald-500/10 border border-emerald-500/20 rounded-full text-emerald-700 text-xs font-bold">
-                        <Heart size={14} /> Our Mission
-                    </div>
-                    <h1 className="text-4xl font-black text-slate-900 tracking-tight">Pioneering Intelligent Triage</h1>
-                    <p className="text-slate-600 text-base leading-relaxed">
-                        At HELPDESK.AI, we strive to build local machine learning workflows that eliminate manual ticket tagging, priority guessing, and routing bottlenecks for modern Indian businesses.
-                    </p>
+                <div>
+                  <h4 className="font-bold text-white">GitHub Repository</h4>
+                  <p className="text-xs text-gray-500">Source code & issues</p>
                 </div>
+              </div>
+              <ExternalLink size={16} className="text-gray-500 group-hover:text-emerald-400 transition-colors" />
+            </motion.a>
 
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                    <Card className="p-6 rounded-[2rem] border border-slate-200 bg-white space-y-3">
-                        <div className="w-8 h-8 rounded-xl bg-emerald-50 text-emerald-600 flex items-center justify-center">
-                            <Target size={16} />
-                        </div>
-                        <h4 className="font-extrabold text-slate-800 text-sm">Self-Healing Backups</h4>
-                        <p className="text-xs text-slate-500 leading-relaxed font-semibold">
-                            By backing up offline sentence embeddings with fast Gemini failover pipelines, we achieve 100% platform availability under tight network margins.
-                        </p>
-                    </Card>
-
-                    <Card className="p-6 rounded-[2rem] border border-slate-200 bg-white space-y-3">
-                        <div className="w-8 h-8 rounded-xl bg-blue-50 text-blue-600 flex items-center justify-center">
-                            <Award size={16} />
-                        </div>
-                        <h4 className="font-extrabold text-slate-800 text-sm">100% Indian Data Sovereignty</h4>
-                        <p className="text-xs text-slate-500 leading-relaxed font-semibold">
-                            All ticket summaries, OCR attachments, and database timelines remain securely locked under regional cloud networks.
-                        </p>
-                    </Card>
+            <motion.a
+              href="#"
+              whileHover={{ y: -4, borderColor: "rgba(16,185,129,0.3)" }}
+              className="bg-white/5 border border-white/10 p-6 rounded-2xl flex items-center justify-between group backdrop-blur-xl transition-all"
+            >
+              <div className="flex items-center gap-4">
+                <div className="p-3 bg-emerald-500/10 rounded-xl text-emerald-400 group-hover:bg-emerald-500/20 transition-all">
+                  <BookOpen size={22} />
                 </div>
+                <div>
+                  <h4 className="font-bold text-white">API Reference</h4>
+                  <p className="text-xs text-gray-500">Swagger & system docs</p>
+                </div>
+              </div>
+              <ExternalLink size={16} className="text-gray-500 group-hover:text-emerald-400 transition-colors" />
+            </motion.a>
+
+            <motion.a
+              href="#"
+              whileHover={{ y: -4, borderColor: "rgba(16,185,129,0.3)" }}
+              className="bg-white/5 border border-white/10 p-6 rounded-2xl flex items-center justify-between group backdrop-blur-xl transition-all"
+            >
+              <div className="flex items-center gap-4">
+                <div className="p-3 bg-emerald-500/10 rounded-xl text-emerald-400 group-hover:bg-emerald-500/20 transition-all">
+                  <HelpCircle size={22} />
+                </div>
+                <div>
+                  <h4 className="font-bold text-white">Platform Demo</h4>
+                  <p className="text-xs text-gray-500">Video & Presentation</p>
+                </div>
+              </div>
+              <ExternalLink size={16} className="text-gray-500 group-hover:text-emerald-400 transition-colors" />
+            </motion.a>
+          </div>
+        </section>
+
+        {/* Community & GSSoC Section */}
+        <section>
+          <motion.div
+            initial="hidden"
+            whileInView="visible"
+            viewport={{ once: true }}
+            variants={fadeInUp}
+            className="bg-gradient-to-br from-emerald-950/80 to-emerald-900/50 border border-emerald-500/25 rounded-3xl p-8 md:p-12 text-center backdrop-blur-xl"
+          >
+            <div className="max-w-2xl mx-auto">
+              <Users size={40} className="text-emerald-400 mx-auto mb-6" />
+              <h2 className="text-2xl md:text-3xl font-extrabold text-white mb-4">Join our Community</h2>
+              <p className="text-gray-300 text-sm leading-relaxed mb-8">
+                HELPDESK.AI is proudly participating in GSSoC 2026. We are built by and for the open source community. Explore our issues, raise a pull request, and help us design the future of autonomous helpdesks!
+              </p>
+              <a
+                href="https://github.com/ritesh-1918/HELPDESK.AI"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center gap-2 bg-emerald-500 hover:bg-emerald-600 text-black font-bold px-6 py-3.5 rounded-xl transition-all shadow-lg hover:shadow-emerald-500/20"
+              >
+                <Code size={18} />
+                Start Contributing
+              </a>
             </div>
-        </div>
-    );
-}
+          </motion.div>
+        </section>
+
+      </div>
+    </div>
+  );
+};
+
+export default AboutUs;

Frontend/src/pages/AdminSignup.jsx

@@ -10,6 +10,7 @@ import {
 } from "lucide-react";
 import useAuthStore from "../store/authStore";
 import { Select } from "../components/ui/select";
+import { getPasswordValidation, getPasswordValidationMessage } from "../utils/passwordValidation";
 
 /**
  * AdminSignup — Premium Multi-step Company Registration
@@ -44,6 +45,14 @@ function AdminSignup() {
 
     const navigate = useNavigate();
     const { signup, loading, user, profile } = useAuthStore();
+    const passwordRules = {
+        minLength: 8,
+        requireUppercase: true,
+        requireNumber: true,
+        requireSpecial: true,
+    };
+    const passwordChecks = getPasswordValidation(formData.password, passwordRules);
+    const passwordWarning = getPasswordValidationMessage(passwordChecks, passwordRules);
 
     // Redirect if already logged in and verified
     useEffect(() => {
@@ -52,15 +61,6 @@ function AdminSignup() {
         }
     }, [user, profile, navigate]);
 
-    // Password complexity validator — mirrors Supabase's policy
-    const validatePassword = (pw) => {
-        if (pw.length < 8) return 'Password must be at least 8 characters long.';
-        if (!/[a-z]/.test(pw)) return 'Password must contain at least one lowercase letter (a-z).';
-        if (!/[A-Z]/.test(pw)) return 'Password must contain at least one uppercase letter (A-Z).';
-        if (!/[0-9]/.test(pw)) return 'Password must contain at least one number (0-9).';
-        return null; // valid
-    };
-
     // Password strength calculation
     useEffect(() => {
         const pw = formData.password;
@@ -69,7 +69,9 @@ function AdminSignup() {
         if (/[A-Z]/.test(pw)) strength += 25;
         if (/[0-9]/.test(pw)) strength += 25;
         if (/[^A-Za-z0-9]/.test(pw)) strength += 25;
+         
         setPasswordStrength(strength);
+ 
     }, [formData.password]);
 
     const handleChange = (e) => {
@@ -87,9 +89,8 @@ function AdminSignup() {
                 setError("Please fill in all required personal information.");
                 return;
             }
-            const pwError = validatePassword(formData.password);
-            if (pwError) {
-                setError(pwError);
+            if (passwordWarning) {
+                setError(passwordWarning);
                 return;
             }
             if (formData.password !== formData.confirmPassword) {
@@ -428,15 +429,13 @@ function AdminSignup() {
                                                     {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
                                                 </button>
                                             </div>
-                                            {/* Password Requirements */}
-                                            <div className="mt-2 space-y-1">
-                                                {formData.password && (
+                                            {/* Strength Meter */}
+                                            {formData.password && (
+                                                <div className="mt-2 space-y-2">
                                                     <div className="flex justify-between items-center text-[10px] font-bold uppercase tracking-widest text-gray-400">
                                                         <span>Strength: {getStrengthText()}</span>
                                                         <span>{passwordStrength}%</span>
                                                     </div>
-                                                )}
-                                                {formData.password && (
                                                     <div className="h-1 w-full bg-gray-100 rounded-full overflow-hidden">
                                                         <motion.div
                                                             className={`h-full ${getStrengthColor()}`}
@@ -444,22 +443,14 @@ function AdminSignup() {
                                                             animate={{ width: `${passwordStrength}%` }}
                                                         />
                                                     </div>
-                                                )}
-                                                <div className="grid grid-cols-2 gap-x-3 gap-y-0.5 mt-2">
-                                                    {[
-                                                        { label: '8+ characters', ok: formData.password.length >= 8 },
-                                                        { label: 'Uppercase (A-Z)', ok: /[A-Z]/.test(formData.password) },
-                                                        { label: 'Lowercase (a-z)', ok: /[a-z]/.test(formData.password) },
-                                                        { label: 'Number (0-9)', ok: /[0-9]/.test(formData.password) },
-                                                    ].map(({ label, ok }) => (
-                                                        <span key={label} className={`text-[10px] font-semibold flex items-center gap-1 transition-colors ${
-                                                            formData.password ? (ok ? 'text-emerald-600' : 'text-red-400') : 'text-gray-300'
-                                                        }`}>
-                                                            <span>{ok ? '✓' : '○'}</span> {label}
-                                                        </span>
-                                                    ))}
+                                                    <div
+                                                        aria-live="polite"
+                                                        className={`text-[11px] font-semibold ${passwordWarning ? "text-red-600" : "text-emerald-700"}`}
+                                                    >
+                                                        {passwordWarning || "Password requirements met."}
+                                                    </div>
                                                 </div>
-                                            </div>
+                                            )}
                                         </div>
                                         <div className="space-y-2">
                                             <label className="text-xs font-bold text-gray-400 uppercase tracking-wider flex items-center gap-2">

Frontend/src/pages/Changelog.jsx

@@ -1,116 +1,297 @@
-import React from 'react';
-import { useNavigate } from 'react-router-dom';
-import { Calendar, GitCommit, ArrowLeft, Heart, Zap, Sparkles } from 'lucide-react';
-import { Card } from '../components/ui/card';
-
-export default function Changelog() {
-    const navigate = useNavigate();
-
-    const changes = [
-        {
-            version: 'v1.2.0',
-            date: 'May 2026',
-            badge: 'Latest Release',
-            highlight: 'Standalone Docs Portal & Dynamic Search',
-            items: [
-                'Created complete standalone Docs Portal (/docs) outside authenticated routing grids.',
-                'Integrated interactive on-screen endpoint payload simulation and terminal output logs.',
-                'Resolved jsconfig compiler issues by deprecating outdated ignoreDeprecations keys.',
-                'Optimized responsive layout transitions across both mobile drawer and desktop headers.'
-            ]
-        },
-        {
-            version: 'v1.1.0',
-            date: 'April 2026',
-            badge: 'Update',
-            highlight: 'Local Tesseract.js OCR and Siri Voice Recognition',
-            items: [
-                'Added client-side webkitSpeechRecognition API dictation assistant with live amplitude waveforms.',
-                'Implemented offline image OCR with local Tesseract.js engine parsing image attachment telemetry.',
-                'Connected Supabase tables to log AI entities scanned directly from ticket descriptions.',
-                'Enacted dynamic SLA fallback computations based on category routing priorities.'
-            ]
-        },
-        {
-            version: 'v1.0.0',
-            date: 'March 2026',
-            badge: 'Major Release',
-            highlight: 'Core AI Routing Engine Deployment',
-            items: [
-                'Launched main multi-tenant portal with full dashboard telemetry, tracking, and company lobbies.',
-                'Connected Gemini API fallback interfaces to self-heal local database load degradation issues.',
-                'Created admin console enabling support agents to claim, claim-override, or resolve tickets live.'
-            ]
-        }
-    ];
-
-    return (
-        <div className="min-h-screen bg-[#f6f8f7] pb-20">
-            {/* Header */}
-            <header className="w-full bg-white border-b border-gray-200 sticky top-0 z-50">
-                <div className="max-w-[1100px] mx-auto px-4 md:px-6 h-16 flex items-center justify-between">
-                    <div className="flex items-center gap-3 cursor-pointer" onClick={() => navigate('/')}>
-                        <img src="/favicon.png" alt="HELPDESK.AI Logo" className="w-7 h-7 object-contain" />
-                        <div className="flex items-baseline gap-2">
-                            <h1 className="text-xl font-black tracking-tighter text-gray-900 italic">HELPDESK.AI</h1>
-                            <span className="px-2 py-0.5 text-[10px] font-black bg-indigo-100 text-indigo-800 rounded-md uppercase tracking-wider">Changelog</span>
-                        </div>
-                    </div>
-                    <button 
-                        onClick={() => navigate('/')}
-                        className="flex items-center gap-2 text-xs font-bold text-gray-600 hover:text-emerald-600 transition-colors bg-gray-50 hover:bg-emerald-50 px-3.5 py-2 rounded-xl border border-gray-200"
-                    >
-                        <ArrowLeft size={14} /> Back to Home
-                    </button>
+import React from "react";
+import {
+  Rocket,
+  Sparkles,
+  Bug,
+  ShieldCheck,
+  CalendarDays,
+  GitCommitHorizontal,
+} from "lucide-react";
+
+import { motion } from "framer-motion";
+
+const releases = [
+  {
+    version: "v2.1.0",
+    date: "May 20, 2026",
+    type: "Major Release",
+    status: "Live",
+    features: [
+      "Introduced AI-powered smart ticket routing engine",
+      "Added enterprise analytics dashboard with live metrics",
+      "Integrated multilingual support for global organizations",
+    ],
+    enhancements: [
+      "Improved dashboard loading performance by 35%",
+      "Enhanced accessibility contrast and readability",
+      "Optimized backend request caching for faster responses",
+    ],
+    fixes: [
+      "Fixed session timeout issue after inactivity",
+      "Resolved notification synchronization bug",
+      "Fixed mobile sidebar overlap on smaller devices",
+    ],
+  },
+
+  {
+    version: "v2.0.2",
+    date: "May 10, 2026",
+    type: "Patch Update",
+    status: "Stable",
+    features: [
+      "Added bulk export functionality for support tickets",
+      "Introduced advanced ticket filtering system",
+    ],
+    enhancements: [
+      "Improved authentication flow security",
+      "Optimized API request handling",
+    ],
+    fixes: [
+      "Resolved login redirect issue",
+      "Fixed navbar responsiveness on tablets",
+    ],
+  },
+
+  {
+    version: "v2.0.0",
+    date: "April 28, 2026",
+    type: "Platform Launch",
+    status: "Released",
+    features: [
+      "Official launch of HelpDesk.AI platform",
+      "AI-based issue auto-categorization system",
+      "Role-based admin management implementation",
+    ],
+    enhancements: [
+      "Modernized UI architecture using Tailwind CSS",
+      "Improved dark mode consistency",
+    ],
+    fixes: [
+      "Initial stability improvements",
+      "Security hardening patches",
+    ],
+  },
+];
+
+const FadeIn = {
+  hidden: {
+    opacity: 0,
+    y: 40,
+  },
+  visible: {
+    opacity: 1,
+    y: 0,
+  },
+};
+
+const Section = ({
+  title,
+  icon,
+  items,
+  glow,
+}) => {
+  return (
+    <div className="mb-8">
+
+      <div className="flex items-center gap-3 mb-4">
+        <div
+          className={`p-2 rounded-xl ${glow}`}
+        >
+          {icon}
+        </div>
+
+        <h3 className="text-2xl font-semibold text-white">
+          {title}
+        </h3>
+      </div>
+
+      <div className="space-y-3">
+        {items.map((item, index) => (
+          <motion.div
+            key={index}
+            whileHover={{ x: 6 }}
+            className="flex gap-3 text-gray-300 leading-relaxed"
+          >
+            <span className="text-green-400 mt-1">
+              •
+            </span>
+
+            <p>{item}</p>
+          </motion.div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+const Changelog = () => {
+  return (
+    <div className="min-h-screen bg-[#021510] overflow-hidden text-white relative">
+
+      {/* Background Glow Effects */}
+      <div className="absolute top-0 left-0 w-[400px] h-[400px] bg-green-500/10 blur-[120px]" />
+
+      <div className="absolute bottom-0 right-0 w-[400px] h-[400px] bg-emerald-400/10 blur-[120px]" />
+
+      {/* Hero Section */}
+      <section className="relative z-10 px-6 pt-24 pb-16">
+
+        <motion.div
+          initial="hidden"
+          animate="visible"
+          variants={FadeIn}
+          transition={{ duration: 0.7 }}
+          className="max-w-6xl mx-auto text-center"
+        >
+
+          {/* Badge */}
+          <div className="inline-flex items-center gap-2 bg-green-500/10 border border-green-500/20 px-5 py-2 rounded-full text-green-400 mb-8 backdrop-blur-md">
+
+            <GitCommitHorizontal size={16} />
+
+            <span className="text-sm font-medium tracking-wide">
+              PRODUCT RELEASE NOTES
+            </span>
+          </div>
+
+          {/* Heading */}
+          <h1 className="text-5xl md:text-7xl font-bold mb-6 tracking-tight">
+
+            Platform
+            <span className="text-green-400">
+              {" "}Changelog
+            </span>
+          </h1>
+
+          {/* Description */}
+          <p className="text-gray-400 text-lg md:text-xl max-w-3xl mx-auto leading-relaxed">
+
+            Stay updated with the latest platform improvements,
+            AI enhancements, security patches, and feature
+            releases across HelpDesk.AI.
+          </p>
+
+        </motion.div>
+      </section>
+
+      {/* Timeline */}
+      <section className="relative z-10 px-6 pb-24">
+
+        <div className="max-w-5xl mx-auto relative">
+
+          {/* Vertical Line */}
+          <div className="absolute left-4 top-0 w-[2px] h-full bg-gradient-to-b from-green-500/70 via-green-500/20 to-transparent" />
+
+          {/* Release Cards */}
+          <div className="space-y-16">
+
+            {releases.map((release, index) => (
+              <motion.div
+                key={index}
+                initial="hidden"
+                whileInView="visible"
+                viewport={{ once: true }}
+                variants={FadeIn}
+                transition={{
+                  duration: 0.6,
+                  delay: index * 0.1,
+                }}
+                className="relative pl-14"
+              >
+
+                {/* Timeline Dot */}
+                <div className="absolute left-0 top-8">
+
+                  <div className="w-8 h-8 rounded-full bg-green-500 border-4 border-[#021510] shadow-[0_0_25px_rgba(34,197,94,0.8)]" />
+
                 </div>
-            </header>
 
-            <div className="max-w-[800px] mx-auto px-4 md:px-6 mt-12 space-y-12">
-                <div className="space-y-4">
-                    <div className="inline-flex items-center gap-2 px-3 py-1 bg-indigo-500/10 border border-indigo-500/20 rounded-full text-indigo-700 text-xs font-bold">
-                        <Sparkles size={14} /> System Changelog
+                {/* Card */}
+                <motion.div
+                  whileHover={{
+                    scale: 1.01,
+                  }}
+                  transition={{
+                    duration: 0.3,
+                  }}
+                  className="relative bg-white/5 border border-white/10 backdrop-blur-xl rounded-3xl p-8 md:p-10 shadow-2xl overflow-hidden"
+                >
+
+                  {/* Gradient Overlay */}
+                  <div className="absolute inset-0 bg-gradient-to-br from-green-500/5 to-transparent pointer-events-none" />
+
+                  {/* Header */}
+                  <div className="relative flex flex-wrap items-center justify-between gap-4 mb-10">
+
+                    <div className="flex items-center gap-4 flex-wrap">
+
+                      {/* Version */}
+                      <div className="bg-green-500 text-black font-bold px-5 py-2 rounded-full text-sm shadow-lg">
+                        {release.version}
+                      </div>
+
+                      {/* Type */}
+                      <div className="bg-white/10 border border-white/10 text-gray-300 px-4 py-2 rounded-full text-sm">
+                        {release.type}
+                      </div>
+
+                      {/* Status */}
+                      <div className="flex items-center gap-2 text-green-400 text-sm">
+
+                        <ShieldCheck size={16} />
+
+                        {release.status}
+                      </div>
                     </div>
-                    <h1 className="text-4xl font-black text-slate-900 tracking-tight">Product Updates & Features</h1>
-                    <p className="text-slate-600 text-base leading-relaxed">
-                        Stay informed about system features, framework optimizations, and local AI training models introduced into HELPDESK.AI.
-                    </p>
-                </div>
 
-                {/* Timeline */}
-                <div className="relative border-l border-slate-200 pl-6 ml-4 space-y-12">
-                    {changes.map((change, idx) => (
-                        <div key={change.version} className="relative">
-                            {/* Dot icon */}
-                            <span className="absolute -left-[35px] top-1.5 w-6 h-6 rounded-full bg-indigo-50 border border-indigo-300 flex items-center justify-center text-indigo-600">
-                                <GitCommit size={14} />
-                            </span>
-
-                            <div className="space-y-4">
-                                <div className="flex items-center gap-3 flex-wrap">
-                                    <span className="text-xl font-extrabold text-slate-900">{change.version}</span>
-                                    <span className="text-xs font-bold text-slate-400 flex items-center gap-1">
-                                        <Calendar size={12} /> {change.date}
-                                    </span>
-                                    <span className="px-2 py-0.5 rounded bg-emerald-50 border border-emerald-100 text-[10px] font-black text-emerald-800 uppercase tracking-widest">
-                                        {change.badge}
-                                    </span>
-                                </div>
-
-                                <Card className="p-6 rounded-[2rem] border border-slate-100 shadow-sm bg-white space-y-4">
-                                    <h4 className="font-extrabold text-slate-800 text-sm flex items-center gap-2">
-                                        <Zap size={14} className="text-indigo-500" /> {change.highlight}
-                                    </h4>
-                                    <ul className="list-disc pl-5 text-xs text-slate-600 space-y-2 leading-relaxed">
-                                        {change.items.map((item, itemIdx) => (
-                                            <li key={itemIdx}>{item}</li>
-                                        ))}
-                                    </ul>
-                                </Card>
-                            </div>
-                        </div>
-                    ))}
-                </div>
-            </div>
+                    {/* Date */}
+                    <div className="flex items-center gap-2 text-gray-400">
+
+                      <CalendarDays size={18} />
+
+                      <span>{release.date}</span>
+                    </div>
+                  </div>
+
+                  {/* Sections */}
+                  <div className="relative">
+
+                    <Section
+                      title="New Features"
+                      glow="bg-green-500/20"
+                      icon={
+                        <Rocket className="text-green-400" />
+                      }
+                      items={release.features}
+                    />
+
+                    <Section
+                      title="Enhancements"
+                      glow="bg-blue-500/20"
+                      icon={
+                        <Sparkles className="text-blue-400" />
+                      }
+                      items={release.enhancements}
+                    />
+
+                    <Section
+                      title="Bug Fixes"
+                      glow="bg-red-500/20"
+                      icon={
+                        <Bug className="text-red-400" />
+                      }
+                      items={release.fixes}
+                    />
+
+                  </div>
+                </motion.div>
+              </motion.div>
+            ))}
+          </div>
         </div>
-    );
-}
+      </section>
+    </div>
+  );
+};
+
+export default Changelog;

Frontend/src/pages/LandingPage.jsx

@@ -1,9 +1,9 @@
-import React, { useRef, useEffect, useState } from 'react';
+import React, { useRef, useEffect, useState, useMemo } from 'react';
  
 import { motion, AnimatePresence } from 'framer-motion';
 import { useNavigate } from 'react-router-dom';
 import {
-    Menu, X, Check, Activity,
+    Menu, X, Check, Activity, Moon, Sun,
     MapPin, AlertCircle, Folder, Zap, Bot, ArrowRight,
     Clock, CheckCircle,
     Star, Twitter, Linkedin, Github, Globe, MessageSquare,
@@ -14,6 +14,12 @@ import {
 import useAuthStore from '../store/authStore';
 import TeamSection from '../components/landing/TeamSection';
 
+const CTA_TRANSITION = 'transition-all duration-200 ease-out transform-gpu will-change-transform';
+const CTA_SCALE = 'hover:scale-105 active:scale-[0.98]';
+const CTA_PRIMARY_GLOW = 'shadow-lg shadow-emerald-900/20 hover:shadow-emerald-900/35';
+const CTA_ICON_SHIFT = 'transition-transform duration-200 group-hover:translate-x-1';
+const CTA_PLAY_SHIFT = 'transition-transform duration-200 group-hover:translate-x-0.5';
+
 // ---- Count-up animation component ----
 function AnimatedStat({ target, suffix = '', prefix = '', label, isWord = false }) {
     const [display, setDisplay] = useState(isWord ? target : '0');
@@ -124,9 +130,9 @@ function DemoModal({ onClose }) {
                     <div className="flex gap-3 w-full md:w-auto">
                         <button
                             onClick={() => { onClose(); window.location.href = '/admin-signup'; }}
-                            className="flex-1 md:px-8 bg-emerald-600 hover:bg-emerald-500 text-white py-3 rounded-xl font-black italic uppercase tracking-wider transition-all flex items-center justify-center gap-2 shadow-lg shadow-emerald-500/20"
+                            className={`group flex-1 md:px-8 bg-emerald-600 hover:bg-emerald-500 text-white py-3 rounded-xl font-black italic uppercase tracking-wider ${CTA_TRANSITION} ${CTA_SCALE} ${CTA_PRIMARY_GLOW} flex items-center justify-center gap-2`}
                         >
-                            Start Free <ArrowRight className="w-4 h-4 ml-1" />
+                            Start Free <ArrowRight className={`w-4 h-4 ml-1 ${CTA_ICON_SHIFT}`} />
                         </button>
                     </div>
                 </div>
@@ -145,7 +151,7 @@ export default function LandingPage() {
     const [activeStep, setActiveStep] = useState(0);
     const [isRedirecting, setIsRedirecting] = useState(false);
 
-    const steps = [
+    const steps = useMemo(() => [
         {
             num: '01',
             title: 'Messy User Input',
@@ -208,7 +214,7 @@ export default function LandingPage() {
                 </div>
             )
         }
-    ];
+    ], []);
 
     useEffect(() => {
         if (!loading && user && profile) {
@@ -225,7 +231,7 @@ export default function LandingPage() {
             period: '/mo',
             desc: 'Perfect for small teams exploring AI helpdesk.',
             cta: 'Get Started Free',
-            ctaStyle: 'border border-gray-200 text-gray-700 hover:border-emerald-900 hover:text-emerald-800',
+            ctaStyle: `border border-gray-200 text-gray-700 hover:border-emerald-900 hover:text-emerald-800 group ${CTA_TRANSITION} ${CTA_SCALE}`,
             features: ['Up to 50 tickets/mo', 'Basic AI Categorization', 'Email Support', '1 Team Member', 'Public API Access'],
             popular: false,
         },
@@ -235,7 +241,7 @@ export default function LandingPage() {
             period: '/mo',
             desc: 'For growing IT teams needing full automation.',
             cta: 'Start Free Trial',
-            ctaStyle: 'bg-emerald-900 text-white hover:bg-emerald-800 shadow-lg shadow-emerald-900/20',
+            ctaStyle: `bg-emerald-900 text-white hover:bg-emerald-800 group ${CTA_TRANSITION} ${CTA_SCALE} ${CTA_PRIMARY_GLOW}`,
             features: ['Up to 500 tickets/mo', 'Advanced AI Parsing', 'Priority Detection Engine', 'Duplicate Detection', '5 Team Members', 'Priority Email Support'],
             popular: true,
         },
@@ -245,7 +251,7 @@ export default function LandingPage() {
             period: '',
             desc: 'For large organizations with complex IT landscapes.',
             cta: 'Contact Sales',
-            ctaStyle: 'border border-gray-200 text-gray-700 hover:border-emerald-900 hover:text-emerald-800',
+            ctaStyle: `border border-gray-200 text-gray-700 hover:border-emerald-900 hover:text-emerald-800 group ${CTA_TRANSITION} ${CTA_SCALE}`,
             features: ['Unlimited tickets', 'Custom AI Fine-Tuning', 'SSO & Audit Logs', 'Dedicated SLA Manager', 'Unlimited Members', 'VAPT & Compliance Reports'],
             popular: false,
         },
@@ -273,79 +279,163 @@ export default function LandingPage() {
     };
 
     return (
-        <div className="min-h-screen bg-white font-sans text-slate-800">
+        <div className="min-h-screen bg-white dark:bg-gray-900 font-sans text-slate-800 dark:text-white">
             {showDemo && <DemoModal onClose={() => setShowDemo(false)} />}
 
             {/* ==================== NAV ==================== */}
-            <nav className="sticky top-0 z-50 bg-white/90 backdrop-blur-md border-b border-gray-100 shadow-sm">
-                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-                    <div className="flex justify-between items-center h-16">
-                        {/* Logo */}
-                        <div className="flex items-center gap-2 cursor-pointer" onClick={() => navigate('/')}>
-                            <img src="/favicon.png" alt="H" className="w-8 h-8 object-contain" />
-                            <span className="font-black text-2xl tracking-tighter text-emerald-900 italic uppercase">HelpDesk.ai</span>
-                        </div>
-
-                        {/* Desktop Links */}
-                        <div className="hidden md:flex items-center gap-8">
-                            <a href="#features" className="text-sm font-semibold text-gray-600 hover:text-emerald-800 transition-colors">Features</a>
-                            <a href="#how-it-works" className="text-sm font-semibold text-gray-600 hover:text-emerald-800 transition-colors">How It Works</a>
-                            <a href="#pricing" className="text-sm font-semibold text-gray-600 hover:text-emerald-800 transition-colors">Pricing</a>
-                        </div>
-
-                        {/* CTA Buttons */}
-                        <div className="hidden md:flex items-center gap-3">
-                            <button
-                                onClick={() => navigate('/login')}
-                                className="text-sm font-semibold text-gray-700 hover:text-emerald-800 transition-colors px-4 py-2 rounded-lg hover:bg-gray-50"
-                            >
-                                Sign In
-                            </button>
-                            <button
-                                onClick={() => setShowDemo(true)}
-                                className="text-sm font-semibold text-emerald-800 border border-emerald-200 px-4 py-2 rounded-lg hover:bg-emerald-50 transition-all flex items-center gap-1.5"
-                            >
-                                <Play className="w-3.5 h-3.5 fill-emerald-700" /> Watch Demo
-                            </button>
-                            <button
-                                onClick={() => navigate('/admin-signup')}
-                                className="bg-emerald-900 hover:bg-emerald-800 text-white px-5 py-2.5 rounded-lg text-sm font-semibold transition-all shadow-lg shadow-emerald-900/20"
-                            >
-                                Get Started Free
-                            </button>
-                        </div>
-
-                        {/* Mobile Menu Button */}
-                        <div className="md:hidden">
-                            <button onClick={() => setIsMenuOpen(!isMenuOpen)} className="text-gray-600 hover:text-emerald-800 p-2">
-                                {isMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
-                            </button>
-                        </div>
-                    </div>
-                </div>
-
-                {/* Mobile Menu */}
-                {isMenuOpen && (
-                    <div className="md:hidden bg-white border-t border-gray-100 absolute w-full shadow-xl z-50">
-                        <div className="px-5 pt-3 pb-6 space-y-4">
-                            <a href="#features" onClick={() => setIsMenuOpen(false)} className="block text-base font-semibold text-gray-700 hover:text-emerald-800 py-2">Features</a>
-                            <a href="#how-it-works" onClick={() => setIsMenuOpen(false)} className="block text-base font-semibold text-gray-700 hover:text-emerald-800 py-2">How It Works</a>
-                            <a href="#pricing" onClick={() => setIsMenuOpen(false)} className="block text-base font-semibold text-gray-700 hover:text-emerald-800 py-2">Pricing</a>
-                            <div className="pt-4 flex flex-col gap-3 border-t border-gray-100">
-                                <button onClick={() => { setIsMenuOpen(false); setShowDemo(true); }} className="w-full text-center py-2.5 text-emerald-800 font-semibold border border-emerald-200 rounded-lg flex items-center justify-center gap-2">
-                                    <Play className="w-4 h-4 fill-emerald-700" /> Watch Demo
-                                </button>
-                                <button onClick={() => navigate('/login')} className="w-full text-center py-2.5 text-gray-700 font-semibold border border-gray-100 rounded-lg">
-                                    Sign In
-                                </button>
-                                <button onClick={() => navigate('/admin-signup')} className="w-full bg-emerald-900 text-white py-3 rounded-lg font-semibold shadow">
-                                    Get Started Free
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-                )}
-            </nav>
+<nav className="sticky top-0 z-50 bg-white/90 backdrop-blur-md border-b border-gray-100 shadow-sm">
+  <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    <div className="flex items-center justify-between h-20">
+
+      {/* Logo */}
+      <div
+        className="flex items-center gap-3 cursor-pointer"
+        onClick={() => navigate('/')}
+      >
+        <img src="/favicon.png" alt="logo" className="w-10 h-10" />
+        <span className="font-black italic text-emerald-900 text-2xl">
+          HELPDESK.AI
+        </span>
+      </div>
+
+      {/* Desktop Nav */}
+      <div className="hidden lg:flex items-center gap-10">
+
+        <button
+          className="p-2 rounded-lg hover:bg-gray-100 transition"
+        >
+          <Moon className="w-6 h-6 text-gray-600" />
+        </button>
+
+        <a
+          href="#features"
+          className="font-semibold text-gray-600 hover:text-emerald-700 transition"
+        >
+          Features
+        </a>
+
+        <a
+          href="#how-it-works"
+          className="font-semibold text-gray-600 hover:text-emerald-700 transition"
+        >
+          How It Works
+        </a>
+
+        <a
+          href="#pricing"
+          className="font-semibold text-gray-600 hover:text-emerald-700 transition"
+        >
+          Pricing
+        </a>
+      </div>
+
+      {/* Desktop Actions */}
+      <div className="hidden lg:flex items-center gap-4">
+
+        <button
+          onClick={() => navigate('/login')}
+          className="font-semibold text-gray-700 hover:text-emerald-700"
+        >
+          Sign In
+        </button>
+
+        <button
+          onClick={() => setShowDemo(true)}
+          className="flex items-center gap-2 px-6 py-3 border border-emerald-200 rounded-xl text-emerald-700 font-semibold hover:bg-emerald-50 transition"
+        >
+          <Play size={16} fill="currentColor" />
+          Watch Demo
+        </button>
+
+        <button
+          onClick={() => navigate('/admin-signup')}
+          className="px-6 py-3 bg-emerald-900 hover:bg-emerald-800 text-white rounded-xl font-bold shadow-lg"
+        >
+          Get Started Free
+        </button>
+
+      </div>
+
+      {/* Mobile Buttons */}
+      <div className="flex lg:hidden items-center gap-2">
+
+        <button className="p-2">
+          <Moon className="w-5 h-5 text-gray-600" />
+        </button>
+
+        <button
+          onClick={() => setIsMenuOpen(!isMenuOpen)}
+          className="p-2 border border-gray-200 rounded-lg"
+        >
+          {isMenuOpen ? (
+            <X className="w-6 h-6" />
+          ) : (
+            <Menu className="w-6 h-6" />
+          )}
+        </button>
+
+      </div>
+
+    </div>
+  </div>
+
+  {/* Mobile Menu */}
+  {isMenuOpen && (
+    <div className="lg:hidden absolute top-full left-0 w-full border-t border-gray-100 bg-white shadow-xl dark:bg-gray-900 dark:border-gray-800">
+      <div className="flex flex-col px-4 py-5 gap-4">
+
+        <a
+          href="#features"
+          onClick={() => setIsMenuOpen(false)}
+          className="font-medium text-gray-700"
+        >
+          Features
+        </a>
+
+        <a
+          href="#how-it-works"
+          onClick={() => setIsMenuOpen(false)}
+          className="font-medium text-gray-700"
+        >
+          How It Works
+        </a>
+
+        <a
+          href="#pricing"
+          onClick={() => setIsMenuOpen(false)}
+          className="font-medium text-gray-700"
+        >
+          Pricing
+        </a>
+
+        <hr />
+
+        <button
+          onClick={() => navigate('/login')}
+          className="text-left font-medium"
+        >
+          Sign In
+        </button>
+
+        <button
+          onClick={() => setShowDemo(true)}
+          className="flex items-center gap-2 font-medium"
+        >
+          <Play size={16} />
+          Watch Demo
+        </button>
+
+        <button
+          onClick={() => navigate('/admin-signup')}
+          className="bg-emerald-900 text-white py-3 rounded-xl font-semibold"
+        >
+          Get Started Free
+        </button>
+
+      </div>
+    </div>
+  )}
+</nav>
 
             {/* ==================== HERO ==================== */}
             <section className="relative pt-12 md:pt-20 pb-20 md:pb-32 overflow-hidden">
@@ -369,15 +459,15 @@ export default function LandingPage() {
                     <div className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-6">
                         <button
                             onClick={() => navigate('/admin-signup')}
-                            className="w-full sm:w-auto px-8 py-4 bg-emerald-900 text-white rounded-xl font-bold shadow-xl shadow-emerald-900/25 hover:bg-emerald-800 hover:scale-[1.02] active:scale-[0.98] transition-all flex items-center justify-center gap-2 text-base"
+                            className={`group w-full sm:w-auto px-8 py-4 bg-emerald-900 text-white rounded-xl font-bold ${CTA_PRIMARY_GLOW} hover:bg-emerald-800 ${CTA_TRANSITION} ${CTA_SCALE} flex items-center justify-center gap-2 text-base`}
                         >
-                            Get Started Free <ArrowRight className="w-5 h-5" />
+                            Get Started Free <ArrowRight className={`w-5 h-5 ${CTA_ICON_SHIFT}`} />
                         </button>
                         <button
                             onClick={() => setShowDemo(true)}
-                            className="w-full sm:w-auto px-8 py-4 bg-white text-gray-700 border border-gray-200 rounded-xl font-semibold hover:border-emerald-500 hover:text-emerald-700 transition-all flex items-center justify-center gap-2 text-base"
+                            className={`group w-full sm:w-auto px-8 py-4 bg-white text-gray-700 border border-gray-200 rounded-xl font-semibold hover:border-emerald-500 hover:text-emerald-700 ${CTA_TRANSITION} ${CTA_SCALE} flex items-center justify-center gap-2 text-base`}
                         >
-                            <Play className="w-4 h-4 fill-gray-500" /> Watch a Demo
+                            <Play className={`w-4 h-4 fill-gray-500 ${CTA_PLAY_SHIFT}`} /> Watch a Demo
                         </button>
                     </div>
 
@@ -414,7 +504,7 @@ export default function LandingPage() {
                                         <div className="mb-4">
                                             <h3 className="text-sm font-bold text-gray-800 mb-1">Subject: Wifi down again in Lab 3??</h3>
                                             <p className="text-sm text-gray-600 leading-relaxed">
-                                                Hey support, the wifi in <span className="bg-yellow-100 px-1 rounded">downstairs lab 3</span> is acting up again.
+                                                Hey support, the wifi in <span className="bg-yellow-200 dark:bg-yellow-500/30 dark:text-yellow-200 text-yellow-900 px-1 rounded font-medium">downstairs lab 3</span> is acting up again.
                                                 Can't connect at all. Class starts in 20 mins, need this fixed ASAP!<br /><br />
                                                 Thanks,<br />Sarah
                                             </p>
@@ -645,7 +735,7 @@ export default function LandingPage() {
                             <div className="inline-flex items-center gap-2 px-3 py-1 bg-emerald-500/10 text-emerald-400 rounded-full text-[10px] md:text-xs font-bold uppercase tracking-widest border border-emerald-500/20 mb-4 md:mb-6">
                                 The Journey
                             </div>
-                            <h2 className="text-3xl sm:text-4xl md:text-6xl font-black text-white tracking-tight leading-[0.9] mb-8 md:mb-12 italic uppercase">
+                            <h2 className="text-3xl sm:text-4xl md:text-6xl font-extrabold text-white tracking-tight leading-[0.95] mb-8 md:mb-12">
                                 From Chaos <br />
                                 to <span className="text-emerald-500">Clarity.</span>
                             </h2>
@@ -656,28 +746,25 @@ export default function LandingPage() {
                                         key={idx}
                                         onMouseEnter={() => setActiveStep(idx)}
                                         onClick={() => setActiveStep(idx)}
-                                        className={`group cursor-pointer p-6 rounded-3xl transition-all duration-500 border ${activeStep === idx
+                                        className={`group cursor-pointer p-6 rounded-3xl transition-all duration-300 border ${activeStep === idx
                                             ? 'bg-white/10 border-white/20 shadow-2xl shadow-black/20'
                                             : 'bg-transparent border-transparent hover:bg-white/5 opacity-40 hover:opacity-100'
                                             }`}
                                     >
                                         <div className="flex items-start gap-4 md:gap-6">
-                                            <div className={`shrink-0 w-10 md:w-12 h-10 md:h-12 rounded-xl md:rounded-2xl flex items-center justify-center font-black text-lg md:text-xl italic transition-all duration-500 ${activeStep === idx ? 'bg-emerald-500 text-white shadow-lg shadow-emerald-500/20 rotate-12 scale-110' : 'bg-white/10 text-white/40'}`}>
+                                            <div className={`shrink-0 w-10 md:w-12 h-10 md:h-12 rounded-xl md:rounded-2xl flex items-center justify-center font-bold text-lg md:text-xl transition-all duration-300 ${activeStep === idx ? 'bg-emerald-500 text-white shadow-lg shadow-emerald-500/20 scale-105' : 'bg-white/10 text-white/40'}`}>
                                                 {step.num}
                                             </div>
                                             <div>
-                                                <h3 className={`text-xl font-black italic uppercase transition-colors duration-500 ${activeStep === idx ? 'text-white' : 'text-white/60'}`}>
+                                                <h3 className={`text-xl font-semibold tracking-tight transition-colors duration-300 ${activeStep === idx ? 'text-white' : 'text-white/60'}`}>
                                                     {step.title}
                                                 </h3>
-                                                {activeStep === idx && (
-                                                    <motion.p
-                                                        initial={{ opacity: 0, height: 0 }}
-                                                        animate={{ opacity: 1, height: 'auto' }}
-                                                        className="text-white/60 text-sm mt-3 leading-relaxed max-w-sm"
-                                                    >
-                                                        {step.desc}
-                                                    </motion.p>
-                                                )}
+                                                <p
+                                                    aria-hidden={activeStep !== idx}
+                                                    className={`text-white/60 text-sm mt-3 leading-relaxed max-w-sm overflow-hidden transition-all duration-300 ${activeStep === idx ? 'opacity-100 max-h-24' : 'opacity-0 max-h-0'}`}
+                                                >
+                                                    {step.desc}
+                                                </p>
                                             </div>
                                         </div>
                                     </div>
@@ -688,14 +775,14 @@ export default function LandingPage() {
                         {/* Right: Visual Display */}
                         <div className="w-full md:w-1/2 h-[350px] md:h-[500px] relative">
                             <div className="absolute inset-0 bg-gradient-to-br from-emerald-500/10 to-transparent rounded-[32px] md:rounded-[40px] border border-white/5 backdrop-blur-3xl overflow-hidden p-6 md:p-12 flex items-center justify-center">
-                                <AnimatePresence mode="wait">
+                                <AnimatePresence mode="sync">
                                     <motion.div
                                         key={activeStep}
-                                        initial={{ opacity: 0, scale: 0.9, y: 20 }}
+                                        initial={{ opacity: 0, scale: 0.98, y: 10 }}
                                         animate={{ opacity: 1, scale: 1, y: 0 }}
-                                        exit={{ opacity: 0, scale: 1.1, y: -20 }}
-                                        transition={{ type: 'spring', damping: 20, stiffness: 100 }}
-                                        className="w-full h-full flex flex-col items-center justify-center"
+                                        exit={{ opacity: 0, scale: 1.01, y: -8 }}
+                                        transition={{ duration: 0.28, ease: 'easeOut' }}
+                                        className="w-full h-full flex flex-col items-center justify-center will-change-transform"
                                     >
                                         <div className="mb-6 inline-flex items-center gap-2 px-4 py-1.5 bg-white/5 text-white/50 rounded-full text-[10px] font-black uppercase tracking-[0.2em]">
                                             <div className={`w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse`} />
@@ -759,7 +846,7 @@ export default function LandingPage() {
                                 <button
                                     onClick={() => handlePricingClick(name)}
                                     disabled={isRedirecting && name === 'Growth'}
-                                    className={`w-full flex items-center justify-center gap-2 py-3 rounded-xl font-semibold transition-all mb-8 text-sm ${ctaStyle} ${isRedirecting && name === 'Growth' ? 'opacity-80 cursor-not-allowed' : ''}`}
+                                    className={`w-full flex items-center justify-center gap-2 py-3 rounded-xl font-semibold mb-8 text-sm ${ctaStyle} ${isRedirecting && name === 'Growth' ? 'opacity-80 cursor-not-allowed' : ''}`}
                                 >
                                     {isRedirecting && name === 'Growth' ? (
                                         <>
@@ -802,15 +889,15 @@ export default function LandingPage() {
                     <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
                         <button
                             onClick={() => navigate('/admin-signup')}
-                            className="w-full sm:w-auto px-8 py-4 bg-white text-emerald-900 font-bold rounded-xl hover:bg-green-50 transition-all shadow-xl"
+                            className={`group w-full sm:w-auto px-8 py-4 bg-white text-emerald-900 font-bold rounded-xl hover:bg-green-50 ${CTA_TRANSITION} ${CTA_SCALE} shadow-xl`}
                         >
                             Get Started Free
                         </button>
                         <button
                             onClick={() => setShowDemo(true)}
-                            className="w-full sm:w-auto px-8 py-4 border border-white/30 text-white font-semibold rounded-xl hover:bg-white/10 transition-all flex items-center justify-center gap-2"
+                            className={`group w-full sm:w-auto px-8 py-4 border border-white/30 text-white font-semibold rounded-xl hover:bg-white/10 ${CTA_TRANSITION} ${CTA_SCALE} flex items-center justify-center gap-2`}
                         >
-                            <Play className="w-4 h-4 fill-white" /> Watch Demo
+                            <Play className={`w-4 h-4 fill-white ${CTA_PLAY_SHIFT}`} /> Watch Demo
                         </button>
                     </div>
                     <div className="mt-8">
@@ -862,17 +949,17 @@ export default function LandingPage() {
                             {
                                 heading: 'Resources',
                                 links: [
-                                    { label: 'Documentation', href: '/docs' },
-                                    { label: 'API Reference', href: '/api-reference' },
+                                    { label: 'Documentation', href: '#' },
+                                    { label: 'API Reference', href: '#' },
                                     { label: 'Changelog', href: '/changelog' },
-                                    { label: 'Status Page', href: '/status' },
+                                    { label: 'Status Page', href: '#' },
                                 ]
                             },
                             {
                                 heading: 'Company',
                                 links: [
-                                    { label: 'About Us', href: '/about' },
-                                    { label: 'Careers', href: '/careers' },
+                                    { label: 'About Us', href: '/about-us' },
+                                    { label: 'Careers', href: '#' },
                                     { label: 'Privacy Policy', href: '/privacy' },
                                     { label: 'Terms of Service', href: '/terms' },
                                 ]
@@ -883,7 +970,7 @@ export default function LandingPage() {
                                     { label: 'Security Overview', href: '/security' },
                                     { label: 'Privacy Policy', href: '/privacy' },
                                     { label: 'Terms of Service', href: '/terms' },
-                                    { label: 'Cookie Policy', href: '/cookie-policy' },
+                                    { label: 'Cookie Policy', href: '#' },
                                 ]
                             },
                         ].map(({ heading, links }) => (

Frontend/src/pages/Login.jsx

@@ -7,15 +7,17 @@ import { Eye, EyeOff, BrainCircuit, ArrowRight, Loader2, ArrowLeft } from "lucid
 
 function Login() {
   const [email, setEmail] = useState("");
+  const isDark = document.documentElement.classList.contains('dark');
   const [password, setPassword] = useState("");
   const [showPassword, setShowPassword] = useState(false);
   const [error, setError] = useState("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
   const [isMagicLink, setIsMagicLink] = useState(false);
   const [magicLinkSent, setMagicLinkSent] = useState(false);
 
   const navigate = useNavigate();
-  const { login, signInWithMagicLink, loading, user, profile } = useAuthStore();
+  const { login, signInWithMagicLink, user, profile } = useAuthStore();
 
   // Auto-redirect if already logged in
   useEffect(() => {
@@ -41,6 +43,7 @@ function Login() {
     }
 
     setError("");
+    setIsSubmitting(true);
 
     try {
       const { profile } = await login(email, password);
@@ -55,7 +58,7 @@ function Login() {
 
       if (profile.status === "rejected") {
         navigate("/not-approved");
-        return; // Navigation will happen, but just return to prevent further execution
+        return;
       }
 
       if (profile.role === "master_admin" && profile.status === "active") {
@@ -74,6 +77,8 @@ function Login() {
         errMsg = "Network Error: Failed to fetch. This usually happens if your browser's ad-blocker (like Brave Shields, uBlock Origin, etc.) is blocking Supabase requests. Please try disabling your ad-blocker for this site and refresh!";
       }
       setError(errMsg);
+    } finally {
+      setIsSubmitting(false);
     }
   };
 
@@ -85,6 +90,7 @@ function Login() {
     }
 
     setError("");
+    setIsSubmitting(true);
     try {
       await signInWithMagicLink(email);
       setMagicLinkSent(true);
@@ -95,6 +101,16 @@ function Login() {
         errMsg = "Network Error: Failed to fetch. This usually happens if your browser's ad-blocker (like Brave Shields, uBlock Origin, etc.) is blocking Supabase requests. Please try disabling your ad-blocker for this site and refresh!";
       }
       setError(errMsg);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleGoogleLogin = async () => {
+    try {
+      await loginWithGoogle();
+    } catch (err) {
+      console.error("Google login failed", err.message);
     }
   };
 
@@ -107,10 +123,11 @@ function Login() {
       <div
         className="hidden lg:flex w-1/2 items-center justify-center p-12 relative overflow-hidden"
         style={{
-          background: 'linear-gradient(160deg, #f0fdf4 0%, #dcfce7 60%, #bbf7d0 100%)',
+          background: document.documentElement.classList.contains('dark') 
+            ? 'linear-gradient(160deg, #0f2a1a 0%, #1a3a25 60%, #0d2b1a 100%)'
+            : 'linear-gradient(160deg, #f0fdf4 0%, #dcfce7 60%, #bbf7d0 100%)',
         }}
       >
-        {/* Radial glow */}
         <div
           className="absolute top-0 left-0 w-[600px] h-[600px] rounded-full pointer-events-none"
           style={{
@@ -119,7 +136,6 @@ function Login() {
         />
 
         <div className="relative z-10 max-w-lg">
-          {/* Logo / Icon */}
           <div
             className="p-3 rounded-2xl w-fit mb-8"
             style={{ background: 'rgba(34,160,69,0.08)', border: '1px solid #d1fae5' }}
@@ -127,13 +143,12 @@ function Login() {
             <BrainCircuit className="w-10 h-10" style={{ color: '#16a34a' }} />
           </div>
 
-          {/* Headline */}
           <h1
             style={{
               fontFamily: "'Syne', sans-serif",
               fontSize: '48px',
               fontWeight: 800,
-              color: '#0f1f12',
+              color: isDark ? '#ffffff' : '#0f1f12',
               letterSpacing: '-0.03em',
               lineHeight: 1.1,
               marginBottom: '24px',
@@ -143,12 +158,10 @@ function Login() {
             <span style={{ color: '#16a34a' }}>IT Support</span>
           </h1>
 
-          {/* Subtext */}
-          <p style={{ color: '#374151', fontSize: '16px', lineHeight: 1.7, marginBottom: '32px' }}>
+          <p style={{ color: isDark ? '#d1fae5' : '#374151', fontSize: '16px', lineHeight: 1.7, marginBottom: '32px' }}>
             Join thousands of IT teams using HelpDesk.ai to categorize, route, and resolve tickets instantly.
           </p>
 
-          {/* System Status Badge */}
           <div
             style={{
               background: '#ffffff',
@@ -180,9 +193,8 @@ function Login() {
       {/* ── Right Panel ── */}
       <div
         className="flex w-full lg:w-1/2 items-center justify-center p-6 relative"
-        style={{ background: '#ffffff', borderLeft: '1px solid #f0fdf4' }}
+        style={{ background: document.documentElement.classList.contains('dark') ? '#111827' : '#ffffff', borderLeft: '1px solid #f0fdf4' }}
       >
-        {/* Back Button */}
         <Link
           to="/"
           className="absolute top-8 left-8 flex items-center gap-2 transition-all group"
@@ -197,14 +209,13 @@ function Login() {
         </Link>
 
         <div className="w-full max-w-md mt-8 lg:mt-0" style={{ padding: '32px' }}>
-          {/* Header */}
           <div className="text-center" style={{ marginBottom: '40px' }}>
             <h2
               style={{
                 fontFamily: "'Syne', sans-serif",
                 fontSize: '28px',
                 fontWeight: 800,
-                color: '#0f1f12',
+                color: isDark ? '#ffffff' : '#0f1f12',
                 letterSpacing: '-0.02em',
                 marginBottom: '8px',
               }}
@@ -214,8 +225,6 @@ function Login() {
             <p style={{ color: '#6b7280', fontSize: '14px' }}>Please sign in to continue</p>
           </div>
 
-          {/* Role Toggle Removed */}
-
           {error && (
             <div className="mb-6 flex items-start gap-3" style={{ background: '#fef2f2', border: '1px solid #fee2e2', borderRadius: '12px', padding: '14px 16px' }}>
               <div className="rounded-full p-1 mt-0.5" style={{ background: '#fee2e2' }}>
@@ -242,7 +251,6 @@ function Login() {
             </div>
           ) : (
             <form onSubmit={currentSubmitHandler} className="space-y-5">
-              {/* Email Field */}
               <div>
                 <label
                   className="block mb-2"
@@ -271,7 +279,6 @@ function Login() {
                 />
               </div>
 
-              {/* Password Field */}
               {!isMagicLink && (
                 <motion.div initial={{ opacity: 0, height: 0 }} animate={{ opacity: 1, height: "auto" }} exit={{ opacity: 0, height: 0 }}>
                   <div className="flex justify-between items-center mb-2">
@@ -323,10 +330,9 @@ function Login() {
                 </motion.div>
               )}
 
-              {/* Sign In Button */}
               <button
                 type="submit"
-                disabled={loading}
+                disabled={isSubmitting}
                 className="w-full flex items-center justify-center gap-2 active:scale-[0.98] disabled:opacity-70 disabled:cursor-not-allowed"
                 style={{
                   background: 'linear-gradient(135deg, #16a34a, #22c55e)',
@@ -343,8 +349,47 @@ function Login() {
                 onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-1px)'; e.currentTarget.style.boxShadow = '0 6px 24px rgba(34,160,69,0.35)'; }}
                 onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = '0 4px 20px rgba(34,160,69,0.3)'; }}
               >
-                {loading && <Loader2 className="w-5 h-5 animate-spin" />}
-                {!loading && (isMagicLink ? "Send Magic Link" : "Sign In")}
+                {isSubmitting && <Loader2 className="w-5 h-5 animate-spin" />}
+                {!isSubmitting && (isMagicLink ? "Send Magic Link" : "Sign In")}
+              </button>
+
+              {/* Google Button */}
+              <button
+                type="button"
+                disabled={loading}
+                onClick={handleGoogleLogin}
+                className="w-full flex items-center justify-center gap-3 transition-all active:scale-[0.98] disabled:opacity-70 disabled:cursor-not-allowed"
+                style={{
+                  background: isDark ? '#1f2937' : '#ffffff',
+                  border: isDark ? '1.5px solid #374151' : '1.5px solid #e5e7eb',
+                  color: isDark ? '#f9fafb' : '#374151',
+                  borderRadius: '12px',
+                  padding: '13px',
+                  fontWeight: 500,
+                  fontSize: '15px',
+                  cursor: 'pointer',
+                  transition: 'all 0.2s',
+                }}
+                onMouseEnter={(e) => {
+                  if (!loading) {
+                    e.currentTarget.style.background = isDark ? '#374151' : '#f9fafb';
+                    e.currentTarget.style.borderColor = isDark ? '#4b5563' : '#d1d5db';
+                  }
+                }}
+                onMouseLeave={(e) => {
+                  if (!loading) {
+                    e.currentTarget.style.background = isDark ? '#1f2937' : '#ffffff';
+                    e.currentTarget.style.borderColor = isDark ? '#374151' : '#e5e7eb';
+                  }
+                }}
+              >
+                <svg className="w-5 h-5 shrink-0" viewBox="0 0 24 24" fill="currentColor">
+                  <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/>
+                  <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
+                  <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.06H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.94l2.85-2.22.81-.63z" fill="#FBBC05"/>
+                  <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.06l3.66 2.84c.87-2.6 3.3-4.52 6.16-4.52z" fill="#EA4335"/>
+                </svg>
+                <span>Continue with Google</span>
               </button>
 
               {/* Divider */}
@@ -354,7 +399,6 @@ function Login() {
                 <div className="flex-grow" style={{ borderTop: '1px solid #e5e7eb' }}></div>
               </div>
 
-              {/* Magic Link Toggle */}
               <button
                 type="button"
                 onClick={() => { setIsMagicLink(!isMagicLink); setError(""); }}
@@ -376,7 +420,6 @@ function Login() {
                 {isMagicLink ? "Sign in with Password" : "Sign in with Magic Link"}
               </button>
 
-              {/* Create Account */}
               <p className="text-center" style={{ fontSize: '14px', color: '#6b7280', marginTop: '32px' }}>
                 Don't have an account?{" "}
                 <Link to="/signup" className="hover:underline transition-all" style={{ color: '#16a34a', fontWeight: 600 }}>
@@ -391,4 +434,4 @@ function Login() {
   );
 }
 
-export default Login;
+export default Login;

Frontend/src/pages/Signup.jsx

@@ -3,6 +3,7 @@ import { useNavigate, Link } from "react-router-dom";
 import useAuthStore from "../store/authStore";
 import { supabase } from "../lib/supabaseClient";
 import { Eye, EyeOff, BrainCircuit, ArrowRight, Loader2, CheckCircle2, ChevronDown, Search, Building2, ArrowLeft } from "lucide-react";
+import { getPasswordValidation, getPasswordValidationMessage } from "../utils/passwordValidation";
 
 function Signup() {
   const [email, setEmail] = useState("");
@@ -27,6 +28,10 @@ function Signup() {
   const dropdownRef = useRef(null);
   const navigate = useNavigate();
   const { signup, user, profile } = useAuthStore();
+  const passwordRules = { minLength: 6 };
+  const passwordChecks = getPasswordValidation(password, passwordRules);
+  const passwordWarning = getPasswordValidationMessage(passwordChecks, passwordRules);
+  const confirmPasswordWarning = confirmPassword && password !== confirmPassword ? "Passwords do not match." : "";
 
   // Fetch and subscribe to companies
   useEffect(() => {
@@ -103,15 +108,6 @@ function Signup() {
     e.preventDefault();
     setError("");
 
-    // Password complexity validator — mirrors Supabase's policy
-    const validatePassword = (pw) => {
-      if (pw.length < 8) return 'Password must be at least 8 characters long.';
-      if (!/[a-z]/.test(pw)) return 'Password must contain at least one lowercase letter (a-z).';
-      if (!/[A-Z]/.test(pw)) return 'Password must contain at least one uppercase letter (A-Z).';
-      if (!/[0-9]/.test(pw)) return 'Password must contain at least one number (0-9).';
-      return null;
-    };
-
     if (!email || !password || !confirmPassword || !fullName) {
       setError("All fields are required.");
       return;
@@ -122,14 +118,13 @@ function Signup() {
       return;
     }
 
-    const pwError = validatePassword(password);
-    if (pwError) {
-      setError(pwError);
+    if (passwordWarning) {
+      setError(passwordWarning);
       return;
     }
 
-    if (password !== confirmPassword) {
-      setError("Passwords do not match.");
+    if (confirmPasswordWarning) {
+      setError(confirmPasswordWarning);
       return;
     }
 
@@ -325,28 +320,16 @@ function Signup() {
               <div className="relative">
                 <label className="block mb-2" style={labelStyle}>Password</label>
                 <div className="relative">
-                  <input type={showPassword ? "text" : "password"} placeholder="Min 8 chars" style={{ ...inputStyle, paddingRight: '44px' }} onFocus={inputFocus} onBlur={inputBlur}
+                  <input type={showPassword ? "text" : "password"} placeholder="Min 6 chars" style={{ ...inputStyle, paddingRight: '44px' }} onFocus={inputFocus} onBlur={inputBlur}
                     value={password} onChange={(e) => { setPassword(e.target.value); setError(""); }} />
                   <button type="button" onClick={() => setShowPassword(!showPassword)} className="absolute right-3 top-1/2 -translate-y-1/2" style={{ color: '#9ca3af', background: 'none', border: 'none', cursor: 'pointer' }}>
                     {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
                   </button>
                 </div>
-                {/* Live password requirement checklist */}
                 {password && (
-                  <div className="grid grid-cols-2 gap-x-2 gap-y-0.5 mt-2">
-                    {[
-                      { label: '8+ characters', ok: password.length >= 8 },
-                      { label: 'Uppercase (A-Z)', ok: /[A-Z]/.test(password) },
-                      { label: 'Lowercase (a-z)', ok: /[a-z]/.test(password) },
-                      { label: 'Number (0-9)', ok: /[0-9]/.test(password) },
-                    ].map(({ label, ok }) => (
-                      <span key={label} className={`text-[10px] font-semibold flex items-center gap-1 transition-colors ${
-                        ok ? 'text-emerald-600' : 'text-red-400'
-                      }`}>
-                        <span>{ok ? '✓' : '○'}</span> {label}
-                      </span>
-                    ))}
-                  </div>
+                  <p aria-live="polite" className={`mt-2 text-[11px] font-semibold ${passwordWarning ? "text-red-600" : "text-emerald-700"}`}>
+                    {passwordWarning || "Password looks good."}
+                  </p>
                 )}
               </div>
               <div className="relative">
@@ -358,6 +341,11 @@ function Signup() {
                     {showConfirmPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
                   </button>
                 </div>
+                {confirmPasswordWarning && (
+                  <p aria-live="polite" className="mt-2 text-[11px] font-semibold text-red-600">
+                    {confirmPasswordWarning}
+                  </p>
+                )}
               </div>
             </div>
 

Frontend/src/services/aiAssistant.js

@@ -1,5 +1,4 @@
-import { GoogleGenerativeAI } from "@google/generative-ai";
-import { API_CONFIG } from "../config";
+import { supabase } from "../lib/supabaseClient";
 
 // ============================================================
 // MULTI-API FAILOVER CONFIGURATION
@@ -8,45 +7,30 @@ import { API_CONFIG } from "../config";
 // ============================================================
 
 const buildConfigList = () => {
-    const env = import.meta.env;
     const configs = [];
 
     // Priority 1: Native Gemini — try modern flash models
-    const geminiKeys = [
-        env.VITE_GEMINI_API_KEY_1, env.VITE_GEMINI_API_KEY_2,
-        env.VITE_GEMINI_API_KEY_3, env.VITE_GEMINI_API_KEY_4
-    ].filter(Boolean);
-    // Dynamically retrieve configured model slugs or fallback to stable defaults
-    const geminiModels = (env.VITE_AI_GEMINI_MODELS || 'gemini-2.5-flash,gemini-2.5-flash-lite,gemini-2.0-flash').split(',');
-    
-    geminiKeys.forEach(key => {
-        geminiModels.forEach(model => {
-            configs.push({ provider: 'gemini', key, model: model.trim() });
-        });
+    configs.push(
+        { provider: 'gemini', model: 'gemini-2.5-flash' },
+        { provider: 'gemini', model: 'gemini-2.5-flash-lite' },
+        { provider: 'gemini', model: 'gemini-2.0-flash' }
+    );
+
+    // Priority 2: OpenRouter — updated model slugs (verified working as of 2025)
+    const openrouterModels = [
+        'meta-llama/llama-3.2-3b-instruct:free',
+        'microsoft/phi-3-mini-128k-instruct:free',
+        'mistralai/mistral-7b-instruct:free',
+        'google/gemma-2-9b-it:free',
+    ];
+    openrouterModels.forEach((model) => {
+        configs.push({ provider: 'openrouter', model });
     });
 
-    // Priority 2: OpenRouter — updated model slugs
-    const openrouterKeys = [
-        env.VITE_OPENROUTER_API_KEY_1, env.VITE_OPENROUTER_API_KEY_2,
-        env.VITE_OPENROUTER_API_KEY_3, env.VITE_OPENROUTER_API_KEY_4,
-    ].filter(Boolean);
-    const openrouterModels = (env.VITE_AI_OPENROUTER_MODELS || 'meta-llama/llama-3.2-3b-instruct:free,microsoft/phi-3-mini-128k-instruct:free,mistralai/mistral-7b-instruct:free,google/gemma-2-9b-it:free').split(',');
-    
-    openrouterKeys.forEach((key, idx) => {
-        const primaryModel = openrouterModels[idx % openrouterModels.length].trim();
-        const secondaryModel = openrouterModels[(idx + 1) % openrouterModels.length].trim();
-        configs.push({ provider: 'openrouter', key, model: primaryModel });
-        configs.push({ provider: 'openrouter', key, model: secondaryModel });
-    });
-
-    // Priority 3: Groq — use stable models
-    const groqKeys = [
-        env.VITE_GROQ_API_KEY_1, env.VITE_GROQ_API_KEY_2, env.VITE_GROQ_API_KEY_3
-    ].filter(Boolean);
-    const groqModels = (env.VITE_AI_GROQ_MODELS || 'llama-3.1-8b-instant,mixtral-8x7b-32768,gemma2-9b-it').split(',');
-    
-    groqKeys.forEach((key, idx) => {
-        configs.push({ provider: 'groq', key, model: groqModels[idx % groqModels.length].trim() });
+    // Priority 3: Groq — use stable, currently-available models
+    const groqModels = ['llama-3.1-8b-instant', 'mixtral-8x7b-32768', 'gemma2-9b-it'];
+    groqModels.forEach((model) => {
+        configs.push({ provider: 'groq', model });
     });
 
     return configs;
@@ -57,11 +41,8 @@ const buildConfigList = () => {
 // PROVIDER HANDLERS
 // ============================================================
 
-const callGemini = async (config, promptText, history, image) => {
-    const genAI = new GoogleGenerativeAI(config.key);
-    const model = genAI.getGenerativeModel({ model: config.model });
-
-    let formattedHistory = history.map(msg => {
+const buildGeminiMessages = (promptText, history, image) => {
+    const formattedHistory = history.map(msg => {
         const parts = [{ text: msg.text || "" }];
         if (msg.image) {
             const [mime, data] = msg.image.split(';base64,');
@@ -70,72 +51,110 @@ const callGemini = async (config, promptText, history, image) => {
         return { role: msg.role === 'bot' ? 'model' : 'user', parts };
     });
 
-    // Gemini requires history to start with 'user' role
-    const firstUserIdx = formattedHistory.findIndex(h => h.role === 'user');
-    if (firstUserIdx > 0) formattedHistory = formattedHistory.slice(firstUserIdx);
-    else if (firstUserIdx === -1) formattedHistory = [];
-
-    const chat = model.startChat({ history: formattedHistory, generationConfig: { maxOutputTokens: 2048 } });
-
     const messageParts = [{ text: promptText }];
     if (image) {
         const [mime, data] = image.split(';base64,');
         messageParts.push({ inlineData: { mimeType: mime.split(':')[1] || 'image/png', data } });
     }
 
-    const result = await chat.sendMessage(messageParts);
-    return result.response.text();
+    return formattedHistory.length > 0
+        ? [...formattedHistory, { role: 'user', parts: messageParts }]
+        : [{ role: 'user', parts: messageParts }];
 };
 
-const callOpenAICompat = async (config, promptText, history, image, baseUrl, extraHeaders = {}) => {
-    const messages = history.map(msg => ({
-        role: msg.role === 'bot' ? 'assistant' : 'user',
-        content: msg.text || ""
-    }));
+const buildOpenAICompatMessages = (promptText, history, image) => {
+    const messages = history.map(msg => {
+        const content = msg.image
+            ? [
+                { type: 'text', text: msg.text || '' },
+                { type: 'image_url', image_url: { url: msg.image } }
+            ]
+            : msg.text || '';
+
+        return {
+            role: msg.role === 'bot' ? 'assistant' : 'user',
+            content,
+        };
+    });
 
     const userContent = image
         ? [{ type: "text", text: promptText }, { type: "image_url", image_url: { url: image } }]
         : promptText;
 
     messages.push({ role: "user", content: userContent });
+    return messages;
+};
 
-    const response = await fetch(`${baseUrl}/chat/completions`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${config.key}`, ...extraHeaders },
-        body: JSON.stringify({ model: config.model, messages, max_tokens: 2048 })
-    });
+const extractResponseText = (data) => {
+    if (typeof data === 'string') return data;
+    if (!data || typeof data !== 'object') return '';
+
+    const openAiContent = data.choices?.[0]?.message?.content;
+    if (typeof openAiContent === 'string') return openAiContent;
+    if (Array.isArray(openAiContent)) {
+        return openAiContent
+            .map(part => part?.text || part?.content || '')
+            .filter(Boolean)
+            .join('');
+    }
+
+    const geminiParts = data.candidates?.[0]?.content?.parts;
+    if (Array.isArray(geminiParts)) {
+        return geminiParts
+            .map(part => part?.text || '')
+            .filter(Boolean)
+            .join('');
+    }
+
+    if (typeof data.candidates?.[0]?.content === 'string') {
+        return data.candidates[0].content;
+    }
+
+    if (typeof data.text === 'string') return data.text;
+
+    return '';
+};
+
+const callProxy = async (config, promptText, history, image) => {
+    const body = config.provider === 'gemini'
+        ? {
+            provider: config.provider,
+            model: config.model,
+            messages: buildGeminiMessages(promptText, history, image),
+        }
+        : {
+            provider: config.provider,
+            model: config.model,
+            messages: buildOpenAICompatMessages(promptText, history, config.provider === 'groq' ? null : image),
+        };
+
+    const { data, error } = await supabase.functions.invoke('ai-proxy', { body });
 
-    if (!response.ok) {
-        const err = new Error(`HTTP ${response.status}`);
-        err.status = response.status;
-        throw err;
+    if (error) {
+        const invokeError = new Error(error.message || 'AI proxy request failed');
+        invokeError.status = error.status || error?.context?.status;
+        throw invokeError;
     }
-    const data = await response.json();
-    return data.choices?.[0]?.message?.content || "No response received.";
+
+    const responseText = extractResponseText(data);
+    if (!responseText) {
+        throw new Error(`No response received from ${config.provider}`);
+    }
+
+    return responseText;
 };
 
 // Core failover runner — shared by both exported functions
 const runWithFailover = async (promptText, history, image) => {
     const configList = buildConfigList();
-    if (configList.length === 0) throw new Error("No AI API keys configured in .env");
+    if (configList.length === 0) throw new Error("No AI providers configured");
 
     for (let i = 0; i < configList.length; i++) {
         const config = configList[i];
         console.log(`[AI Failover] Trying ${i + 1}/${configList.length}: ${config.provider} (${config.model})`);
 
         try {
-            if (config.provider === 'gemini') {
-                return await callGemini(config, promptText, history, image);
-            } else if (config.provider === 'openrouter') {
-                return await callOpenAICompat(config, promptText, history, image,
-                    'https://openrouter.ai/api/v1',
-                    { 'HTTP-Referer': API_CONFIG.FRONTEND_URL, 'X-Title': 'AI Helpdesk' }
-                );
-            } else if (config.provider === 'groq') {
-                return await callOpenAICompat(config, promptText, history, null, // Groq = text only
-                    'https://api.groq.com/openai/v1'
-                );
-            }
+            return await callProxy(config, promptText, history, image);
         } catch (error) {
             const isRateLimit = error.status === 429
                 || error.message?.includes('429')
@@ -159,6 +178,12 @@ const localFallbackSummary = (issueText) => {
     return { summary, image_description: '' };
 };
 
+const getSlaBreachAt = (priority = 'Medium') => {
+    const hoursMap = { Critical: 2, High: 8, Medium: 24, Low: 72 };
+    const slaHours = hoursMap[priority] || 24;
+    return new Date(Date.now() + slaHours * 60 * 60 * 1000).toISOString();
+};
+
 
 // ============================================================
 // EXPORT 1: askAI — Used by the chat troubleshooting assistant
@@ -231,11 +256,15 @@ User Issue: "${issueText}"${imageNote}${imageInstruction}`;
             subcategory: parsed.subcategory,
             priority: parsed.priority,
             assigned_team: parsed.assigned_team,
-            confidence: parsed.confidence || 0.9
+            confidence: parsed.confidence || 0.9,
+            sla_breach_at: getSlaBreachAt(parsed.priority)
         };
     } catch (err) {
         // All providers failed — use smart local fallback so ticket flow never breaks
         console.warn('[analyzeTicketWithAI] All providers exhausted, using local fallback:', err.message);
-        return localFallbackSummary(issueText);
+        return {
+            ...localFallbackSummary(issueText),
+            sla_breach_at: getSlaBreachAt()
+        };
     }
 };

Frontend/src/services/api.js

@@ -2,11 +2,17 @@ import axios from 'axios';
 import { MOCK_TICKETS } from './mockData';
 import { API_CONFIG } from '../config';
 
-const USE_MOCK = true;
+const USE_MOCK = API_CONFIG.USE_MOCK;
 const API_BASE_URL = API_CONFIG.BACKEND_URL;
 
 const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
 
+const getSlaBreachAt = (priority = 'Low') => {
+  const hoursMap = { Critical: 2, High: 8, Medium: 24, Low: 72 };
+  const slaHours = hoursMap[priority] || 72;
+  return new Date(Date.now() + slaHours * 60 * 60 * 1000).toISOString();
+};
+
 // Safe helper to get data from storage or default
 const getStorage = (key, defaultData) => {
   try {
@@ -32,48 +38,81 @@ const setStorage = (key, data) => {
   }
 };
 
+// Shared mock logic for createTicket
+const createTicketMock = (ticketData) => {
+  const tickets = getStorage('tickets', MOCK_TICKETS);
+  const newTicket = {
+    ticket_id: "TCKT-" + Math.floor(Math.random() * 10000),
+    status: 'Open',
+    createdAt: new Date().toISOString(),
+    ...ticketData,
+    messages: [
+      {
+        sender: 'user',
+        message: ticketData.description || ticketData.summary || '',
+        timestamp: new Date().toISOString()
+      }
+    ]
+  };
+  tickets.unshift(newTicket); // Add to beginning
+  setStorage('tickets', tickets);
+  return { data: newTicket };
+};
+
 export const api = {
   // Login and Signup have been fully migrated to Supabase via authStore.js
   // Ensure that no component tries to use api.login or api.signup anymore.
 
-
   getTickets: async () => {
     if (USE_MOCK) {
       await delay(500);
       return getStorage('tickets', MOCK_TICKETS);
     }
+    try {
+      const response = await axios.get(`${API_BASE_URL}/tickets`);
+      const data = response?.data;
+
+      // Normalize to the mock shape: an array of tickets
+      if (Array.isArray(data)) return data;
+      if (data && Array.isArray(data.data)) return data.data;
+      if (data && Array.isArray(data.tickets)) return data.tickets;
+
+      return data;
+    } catch (error) {
+      console.error("Backend unavailable, falling back to mock:", error);
+      await delay(500);
+      return getStorage('tickets', MOCK_TICKETS);
+    }
   },
 
   createTicket: async (ticketData) => {
     if (USE_MOCK) {
       await delay(800);
-      const tickets = getStorage('tickets', MOCK_TICKETS);
-      const newTicket = {
-        ticket_id: "TCKT-" + Math.floor(Math.random() * 10000),
-        status: 'Open',
-        createdAt: new Date().toISOString(),
-        ...ticketData,
-        messages: [
-          {
-            sender: 'user',
-            message: ticketData.description || ticketData.summary || '',
-            timestamp: new Date().toISOString()
-          }
-        ]
-      };
-      tickets.unshift(newTicket); // Add to beginning
-      setStorage('tickets', tickets);
-      return { data: newTicket };
+      return createTicketMock(ticketData);
+    }
+    try {
+      const response = await axios.post(`${API_BASE_URL}/tickets/save`, ticketData);
+      const created = response?.data;
+
+      // Normalize to mock shape: { data: <createdTicket> }
+      if (created && created.data) return created;
+      return { data: created };
+    } catch (error) {
+      console.error("Backend unavailable, falling back to mock:", error);
+      await delay(800);
+      return createTicketMock(ticketData);
     }
   },
 
   predictTicket: async (issueText, imageBase64 = "") => {
     try {
+      const currentUser = JSON.parse(sessionStorage.getItem("currentUser") || "{}");
       // ALWAYS call the real backend for prediction if possible
       const response = await axios.post(`${API_BASE_URL}/ai/analyze_ticket`, {
         text: issueText,
         image_base64: imageBase64,
-        image_text: ""
+        image_text: "",
+        company_id: currentUser.company_id || currentUser.companyId || null
       });
 
       const result = response.data;
@@ -95,7 +134,10 @@ export const api = {
           reasoning: result.reasoning,
           decision_factors: result.decision_factors,
           image_description: result.image_description,
-          ocr_text: result.ocr_text
+          ocr_text: result.ocr_text,
+          is_potential_duplicate: result.is_potential_duplicate || false,
+          parent_ticket_id: result.parent_ticket_id || result.duplicate_ticket?.duplicate_ticket_id || null,
+          sla_breach_at: result.sla_breach_at || getSlaBreachAt(result.priority)
         }
       };
     } catch (error) {
@@ -112,7 +154,10 @@ export const api = {
           routing_confidence: 0.5,
           duplicate_probability: 0.0,
           summary: issueText.substring(0, 50) + "...",
-          entities: []
+          entities: [],
+          is_potential_duplicate: false,
+          parent_ticket_id: null,
+          sla_breach_at: getSlaBreachAt("Medium")
         }
       };
     }

Frontend/src/store/authStore.js

@@ -1,8 +1,63 @@
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
 import { supabase } from '../lib/supabaseClient';
+import { API_CONFIG } from '../config';
 import useTicketStore from './ticketStore';
 
+const BACKEND_URL = API_CONFIG.BACKEND_URL;
+
+const verifyServerCookieSession = async () => {
+   try {
+        const controller = new AbortController();
+        const timeout = setTimeout(() => controller.abort(), 5000);
+        const res = await fetch(`${BACKEND_URL}/auth/me`, {
+            method: 'GET',
+            credentials: 'include',
+            headers: { Accept: 'application/json' },
+            signal: controller.signal,
+        });
+        clearTimeout(timeout);
+        if (!res.ok) return null;
+        const body = await res.json();
+        return body?.user || null;
+    } catch (e) {
+        console.warn('Server cookie session check failed:', e?.message || e);
+        return null;
+    }
+};
+
+const mirrorBackendAuth = async (path, payload) => {
+    try {
+        const controller = new AbortController();
+        const timeout = setTimeout(() => controller.abort(), 5000);
+        await fetch(`${BACKEND_URL}${path}`, {
+            method: 'POST',
+            credentials: 'include',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(payload),
+            signal: controller.signal,
+        });
+        clearTimeout(timeout);
+    } catch (e) {
+        console.warn(`Backend auth ${path} failed:`, e?.message || e);
+    }
+};
+
+let currentUserPromise = null;
+
+const getProfileCache = (profile) => {
+    if (!profile?.id) return null;
+
+    return {
+        id: profile.id,
+        email: profile.email,
+        full_name: profile.full_name,
+        company: profile.company,
+        company_id: profile.company_id,
+        profile_picture: profile.profile_picture,
+    };
+};
+
 const useAuthStore = create(
     persist(
         (set, get) => ({
@@ -10,6 +65,7 @@ const useAuthStore = create(
             user: null,
             profile: null,
             loading: false,
+            isCheckingSession: true,
 
             // --- SUPABASE AUTH METHODS ---
 
@@ -18,38 +74,25 @@ const useAuthStore = create(
                 if (!user) return null;
 
                 const metadata = user.user_metadata || {};
-                const currentProfile = get().profile;
-
-                // 1. Resolve FROM METADATA or PERSISTED state
-                // Priority 1: If we have a persisted session for THIS user and it's active, keep it 
-                // to prevent temporary lobbies during refresh/tab switching.
-                if (currentProfile && currentProfile.id === user.id && currentProfile.status === 'active') {
-                    console.log("Active profile retained from state.");
-                    // Background fetch to ensure session is still valid/synced
-                    get()._syncProfile(user.id);
-                    return currentProfile;
-                }
+                set({ profile: null });
 
-                // Priority 2: Use Auth Metadata (Instant fallback)
-                const isMasterAdmin = user.email === 'masteradmin@helpdesk.ai';
+                // Always resolve authorization fields from the database. Local storage and
+                // user_metadata are client-controlled surfaces and must not grant roles.
+                const dbProfile = await get()._syncProfile(user.id);
+                if (dbProfile) {
+                    return dbProfile;
+                }
 
                 const instantProfile = {
                     id: user.id,
                     email: user.email,
-                    full_name: isMasterAdmin ? 'Master Admin' : (metadata.full_name || 'User'),
-                    role: isMasterAdmin ? 'master_admin' : (metadata.role || 'user'),
-                    status: isMasterAdmin ? 'active' : 'pending_email_verification',
+                    full_name: metadata.full_name || 'User',
+                    role: 'user',
+                    status: 'pending_email_verification',
                     company: metadata.company || ''
                 };
 
-                // 2. Sync with Database First before setting a fallback
-                // This prevents flashes of 'pending_email_verification' when returning from magic links
-                const dbProfile = await get()._syncProfile(user.id);
-                if (dbProfile) {
-                    return dbProfile;
-                }
-
-                console.log("Falling back to instant profile resolved from metadata:", instantProfile.role);
+                console.log("Falling back to non-authoritative profile:", instantProfile.role);
                 set({ profile: instantProfile });
                 return instantProfile;
             },
@@ -79,31 +122,49 @@ const useAuthStore = create(
             },
 
             getCurrentUser: async () => {
-                try {
-                    const { data: { user }, error } = await supabase.auth.getUser();
-                    if (error) throw error;
+                if (currentUserPromise) {
+                    return currentUserPromise;
+                }
+
+                currentUserPromise = (async () => {
+                    try {
+                        set({ isCheckingSession: true });
+                        const cookieUser = await verifyServerCookieSession();
+                        if (cookieUser) {
+                            set({ user: cookieUser });
+                            await get().getProfile(cookieUser);
+                            return cookieUser;
+                        }
+
+                        const { data: { user }, error } = await supabase.auth.getUser();
+                        if (error) throw error;
 
-                    if (user) {
-                        set({ user });
-                        // Don't 'await' here because we want 'loading: false' ASAP
-                        get().getProfile(user);
-                    } else {
+                        if (user) {
+                            set({ user });
+                            await get().getProfile(user);
+                        } else {
+                            set({ user: null, profile: null });
+                        }
+                        return user;
+                        // eslint-disable-next-line no-unused-vars
+                    } catch (error) {
                         set({ user: null, profile: null });
+                        return null;
+                    } finally {
+                        set({ loading: false, isCheckingSession: false });
+                        currentUserPromise = null;
                     }
-                    return user;
-                    // eslint-disable-next-line no-unused-vars
-                } catch (error) {
-                    set({ user: null, profile: null });
-                    return null;
-                } finally {
-                    set({ loading: false });
-                }
+                })();
+
+                return currentUserPromise;
             },
 
             login: async (email, password) => {
                 set({ loading: true });
                 console.log("Attempting login for:", email);
                 try {
+                    await mirrorBackendAuth('/auth/login', { email, password });
+
                     const { data, error } = await supabase.auth.signInWithPassword({
                         email,
                         password,
@@ -134,6 +195,26 @@ const useAuthStore = create(
                 }
             },
 
+            loginWithGoogle: async () => {
+                const { error } =
+                    await supabase.auth.signInWithOAuth({
+                        provider: 'google',
+                        options: {
+                            redirectTo:
+                                `${window.location.origin}/auth/callback`
+                        }
+                    });
+
+                if (error) {
+                    console.error(
+                        "Google OAuth error:",
+                        error.message
+                    );
+
+                    throw error;
+                }
+            },
+
             signInWithMagicLink: async (email) => {
                 set({ loading: true });
                 console.log("Attempting magic link / OTP login for:", email);
@@ -192,6 +273,14 @@ const useAuthStore = create(
                 console.log("Starting signup for:", email);
 
                 try {
+                    await mirrorBackendAuth('/auth/signup', {
+                        email,
+                        password,
+                        full_name: fullName,
+                        role,
+                        company,
+                    });
+
                     // 1. Auth Signup with Metadata
                     console.log("Step 1: Auth.signUp...");
                     const { data, error } = await supabase.auth.signUp({
@@ -232,6 +321,15 @@ const useAuthStore = create(
             logout: async () => {
                 set({ loading: true });
                 try {
+                    try {
+                        await fetch(`${BACKEND_URL}/auth/logout`, {
+                            method: 'POST',
+                            credentials: 'include',
+                        });
+                    } catch (e) {
+                        console.warn('Backend cookie logout failed:', e?.message || e);
+                    }
+
                     const { error } = await supabase.auth.signOut();
                     if (error) throw error;
                     set({ user: null, profile: null });
@@ -279,25 +377,31 @@ const useAuthStore = create(
 
                 supabase.auth.onAuthStateChange(async (event, session) => {
                     console.log("Auth state change:", event);
-                    if (session?.user) {
-                        set({ user: session.user });
-                        get().getProfile(session.user);
-                    } else {
+                    try {
+                        if (session?.user) {
+                            set({ user: session.user, loading: true, isCheckingSession: true });
+                            await get().getProfile(session.user);
+                        } else {
+                            set({ user: null, profile: null });
+                        }
+                    } catch (e) {
+                        console.warn("Auth state change error:", e?.message || e);
                         set({ user: null, profile: null });
+                    } finally {
+                        set({ loading: false, isCheckingSession: false });
                     }
-                    set({ loading: false });
                 });
             }
         }),
         {
             name: 'auth-storage',
             partialize: (state) => ({
-                // We keep profile persisted for quick UI transitions, 
-                // but session is handled by Supabase cookie/localStorage
-                profile: state.profile
+                // Cache display-only profile fields. Role/status must come from the DB.
+                profile: getProfileCache(state.profile)
             }),
         }
     )
 );
 
 export default useAuthStore;
+

Frontend/src/store/ticketStore.js

@@ -3,14 +3,19 @@ import { persist } from 'zustand/middleware';
 
 const useTicketStore = create(
     persist(
-        (set) => ({
+        (set, get) => ({
             aiTicket: null,
             activeTicket: null,
             autoResolvedTickets: [], // For analytics
             tickets: [], // Global queue for admins
             notifications: [], // User notifications
+            wsConnected: false, // WebSocket connection status
+
             setAITicket: (data) => set({ aiTicket: data }),
             setActiveTicket: (ticket) => set({ activeTicket: ticket }),
+
+            setWsConnected: (connected) => set({ wsConnected: connected }),
+
             addAutoResolvedTicket: (record) => set((state) => ({
                 autoResolvedTickets: [...state.autoResolvedTickets, record]
             })),
@@ -30,27 +35,68 @@ const useTicketStore = create(
                     tickets: [...state.tickets, ticket]
                 };
             }),
-            updateTicket: (ticketId, updates) => set((state) => {
-// eslint-disable-next-line no-unused-vars
-                const existingTicket = state.tickets.find(t => t.ticket_id === ticketId);
-                const updatedTickets = state.tickets.map(t => t.ticket_id === ticketId ? { ...t, ...updates } : t);
-                const shouldUpdateActive = state.activeTicket?.ticket_id === ticketId;
-
-
+            upsertTicket: (ticket) => set((state) => {
+                const ticketId = ticket?.id ?? ticket?.ticket_id;
+                if (!ticketId) return state;
 
+                const exists = state.tickets.some(t => (t.id ?? t.ticket_id) === ticketId);
+                const tickets = exists
+                    ? state.tickets.map(t => (t.id ?? t.ticket_id) === ticketId ? { ...t, ...ticket } : t)
+                    : [ticket, ...state.tickets];
+                const shouldUpdateActive = (state.activeTicket?.id ?? state.activeTicket?.ticket_id) === ticketId;
 
+                return {
+                    tickets,
+                    activeTicket: shouldUpdateActive ? { ...state.activeTicket, ...ticket } : state.activeTicket
+                };
+            }),
+            removeTicket: (ticketId) => set((state) => ({
+                tickets: state.tickets.filter(t => (t.id ?? t.ticket_id) !== ticketId),
+                activeTicket: (state.activeTicket?.id ?? state.activeTicket?.ticket_id) === ticketId
+                    ? null
+                    : state.activeTicket
+            })),
+            updateTicket: (ticketId, updates) => set((state) => {
+                const existingTicket = state.tickets.find(t => (t.id ?? t.ticket_id) === ticketId);
+                if (!existingTicket) return state;
+                const updatedTickets = state.tickets.map(t => (t.id ?? t.ticket_id) === ticketId ? { ...t, ...updates } : t);
+                const shouldUpdateActive = (state.activeTicket?.id ?? state.activeTicket?.ticket_id) === ticketId;
                 return {
                     tickets: updatedTickets,
                     activeTicket: shouldUpdateActive ? { ...state.activeTicket, ...updates } : state.activeTicket
                 };
             }),
 
-            removeTicket: (ticketId) => set((state) => ({
-    tickets: state.tickets.filter(t => t.ticket_id !== ticketId),
-    activeTicket: state.activeTicket?.ticket_id === ticketId
-        ? null
-        : state.activeTicket
-})),
+            /**
+             * Route an incoming WebSocket message to the correct store action.
+             *
+             * Call this from the component that owns the WebSocket connection
+             * (e.g. AdminDashboard) whenever a message arrives.
+             */
+            handleWsMessage: (msg) => {
+                if (!msg || !msg.type) return;
+
+                const { type, event, ticket, ticket_id } = msg;
+
+                switch (type) {
+                    case "ticket_update": {
+                        if (!ticket) break;
+                        if (event === "created") {
+                            // Avoid duplicates — use upsert
+                            get().upsertTicket(ticket);
+                        } else if (event === "updated") {
+                            get().upsertTicket(ticket);
+                        } else if (event === "deleted") {
+                            get().removeTicket(ticket_id);
+                        }
+                        break;
+                    }
+                    default:
+                        // Ignore unknown message types (e.g. heartbeat)
+                        break;
+                }
+            },
+
             appendMessage: (ticketId, message) => set((state) => {
                 const updatedTickets = state.tickets.map(t =>
                     t.ticket_id === ticketId

Frontend/src/user/components/QuickActions.jsx

@@ -7,6 +7,7 @@ const actions = [
         title: "Network Issues",
         description: "Connectivity problems, VPN access, and slow internet.",
         category: "Network",
+        templateId: "vpn-connectivity",
         icon: Network,
         iconBg: '#EDFAF3',
         iconColor: '#16a34a',
@@ -15,6 +16,7 @@ const actions = [
         title: "Software Problems",
         description: "Application crashes, license issues, and installations.",
         category: "Software",
+        templateId: "software-installation",
         icon: Laptop,
         iconBg: '#EEF2FF',
         iconColor: '#4f46e5',
@@ -23,6 +25,7 @@ const actions = [
         title: "Access Requests",
         description: "Permission changes, new account setup, and MFA.",
         category: "Access",
+        templateId: "password-reset",
         icon: ShieldCheck,
         iconBg: '#F5F0FF',
         iconColor: '#7c3aed',
@@ -33,8 +36,8 @@ const QuickActions = () => {
     const navigate = useNavigate();
     const [hoveredIdx, setHoveredIdx] = useState(null);
 
-    const handleActionClick = (category) => {
-        navigate('/create-ticket', { state: { prefilledCategory: category } });
+    const handleActionClick = (action) => {
+        navigate('/create-ticket', { state: { templateId: action.templateId, prefilledCategory: action.category } });
     };
 
     return (
@@ -42,7 +45,7 @@ const QuickActions = () => {
             {actions.map((action, index) => (
                 <div
                     key={index}
-                    onClick={() => handleActionClick(action.category)}
+                    onClick={() => handleActionClick(action)}
                     onMouseEnter={() => setHoveredIdx(index)}
                     onMouseLeave={() => setHoveredIdx(null)}
                     style={{

Frontend/src/user/components/RecentTickets.jsx

@@ -150,6 +150,11 @@ const RecentTickets = () => {
                                             <p style={{ fontSize: '14px', fontWeight: 500, color: '#111827', margin: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: '320px' }}>
                                                 {ticket.summary || ticket.subject || ticket.description || "No description provided"}
                                             </p>
+                                            {ticket?.metadata?.translation?.translated && (
+                                                <p style={{ fontSize: '11px', color: '#0369a1', margin: '4px 0 0' }}>
+                                                    Translated from {ticket.metadata.translation.source_language_name || ticket.metadata.translation.source_language || 'Unknown'}
+                                                </p>
+                                            )}
                                         </td>
                                         <td style={{ padding: '16px 28px' }}>
                                             {getStatusBadge(ticket.status)}

Frontend/src/user/components/TopNav.jsx

@@ -1,5 +1,5 @@
-import React, { useState } from 'react';
-import { Bell, Box, CheckCircle2, MessageSquare, Menu, X, LogOut, User as UserIcon, BookOpen } from 'lucide-react';
+import React, { useState, useEffect } from 'react';
+import { Bell, Box, CheckCircle2, MessageSquare, Menu, X, LogOut, User as UserIcon, Moon, Sun } from 'lucide-react';
 import { Link, useNavigate } from 'react-router-dom';
 import { Avatar, AvatarFallback, AvatarImage } from "../../components/ui/avatar";
 import { Button } from "../../components/ui/button";
@@ -8,15 +8,32 @@ import { Popover, PopoverContent, PopoverTrigger } from "../../components/ui/pop
 import useTicketStore from "../../store/ticketStore";
 // removed useNotificationStore
 import NotificationPopover from "./NotificationPopover";
-
 import useAuthStore from "../../store/authStore";
 
 const TopNav = () => {
     const navigate = useNavigate();
-    
- 
     const { profile, logout } = useAuthStore();
     const [isMenuOpen, setIsMenuOpen] = useState(false);
+    const [isDark, setIsDark] = useState(false);
+
+    useEffect(() => {
+        const saved = localStorage.getItem('theme');
+        if (saved === 'dark') {
+            document.documentElement.classList.add('dark');
+            setIsDark(true);
+        }
+    }, []);
+
+    const toggleDark = () => {
+        if (isDark) {
+            document.documentElement.classList.remove('dark');
+            localStorage.setItem('theme', 'light');
+        } else {
+            document.documentElement.classList.add('dark');
+            localStorage.setItem('theme', 'dark');
+        }
+        setIsDark(!isDark);
+    };
 
     const initials = profile?.full_name ? profile.full_name[0].toUpperCase() : (profile?.email ? profile.email[0].toUpperCase() : 'U');
 
@@ -25,29 +42,35 @@ const TopNav = () => {
         navigate('/login');
     };
 
-
-
     return (
-        <header className="w-full bg-white border-b border-gray-200 sticky top-0 z-50">
+        <header className="w-full bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700 sticky top-0 z-50">
             <div className="max-w-[1100px] mx-auto px-4 md:px-6 h-16 flex items-center justify-between">
                 {/* Left: Logo */}
                 <div className="flex items-center gap-3 cursor-pointer" onClick={() => navigate('/dashboard')}>
                     <div className="flex items-center justify-center overflow-hidden">
                         <img src="/favicon.png" alt="HELPDESK.AI Logo" className="w-7 h-7 object-contain" />
                     </div>
-                    <h1 className="text-xl font-black tracking-tighter text-gray-900 italic">HELPDESK.AI</h1>
+                    <h1 className="text-xl font-black tracking-tighter text-gray-900 dark:text-white italic">HELPDESK.AI</h1>
                 </div>
 
                 {/* Center: Navigation Links */}
                 <nav className="hidden md:flex items-center gap-8">
-                    <Link className="text-sm font-semibold text-gray-900 hover:text-emerald-600 transition-colors" to="/dashboard">Dashboard</Link>
-                    <Link className="text-sm font-semibold text-gray-500 hover:text-gray-900 transition-colors" to="/my-tickets">My Tickets</Link>
-                    <Link className="text-sm font-semibold text-gray-500 hover:text-gray-900 transition-colors" to="/help">Help</Link>
-                    <Link className="text-sm font-semibold text-gray-500 hover:text-gray-900 transition-colors" to="/docs">Documentation</Link>
+                    <Link className="text-sm font-semibold text-gray-900 dark:text-gray-100 hover:text-emerald-600 transition-colors" to="/dashboard">Dashboard</Link>
+                    <Link className="text-sm font-semibold text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors" to="/my-tickets">My Tickets</Link>
+                    <Link className="text-sm font-semibold text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors" to="/help">Help</Link>
                 </nav>
 
                 {/* Right: Profile */}
                 <div className="flex items-center gap-3">
+                    {/* Dark Mode Toggle */}
+                    <button
+                        onClick={toggleDark}
+                        className="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
+                        aria-label="Toggle dark mode"
+                    >
+                        {isDark ? <Sun size={20} className="text-yellow-400" /> : <Moon size={20} className="text-gray-600" />}
+                    </button>
+
                     <NotificationPopover />
                     <div className="hidden md:block">
                         <Avatar
@@ -60,7 +83,7 @@ const TopNav = () => {
                     </div>
                     <button
                         onClick={() => setIsMenuOpen(!isMenuOpen)}
-                        className="md:hidden p-2 text-gray-600 focus:outline-none"
+                        className="md:hidden p-2 text-gray-600 dark:text-gray-300 focus:outline-none"
                     >
                         {isMenuOpen ? <X size={24} /> : <Menu size={24} />}
                     </button>
@@ -69,54 +92,35 @@ const TopNav = () => {
 
             {/* Mobile Menu Overlay */}
             {isMenuOpen && (
-                <div className="md:hidden bg-white border-t border-gray-100 absolute w-full shadow-2xl z-50 animate-in fade-in slide-in-from-top-2 duration-200">
+                <div className="md:hidden bg-white dark:bg-gray-900 border-t border-gray-100 dark:border-gray-700 absolute w-full shadow-2xl z-50 animate-in fade-in slide-in-from-top-2 duration-200">
                     <div className="px-6 py-8 space-y-6">
-                        <div className="flex items-center gap-4 border-b border-gray-50 pb-6">
+                        <div className="flex items-center gap-4 border-b border-gray-50 dark:border-gray-700 pb-6">
                             <Avatar className="size-12 border border-gray-100">
                                 <AvatarImage src={profile?.profile_picture} />
                                 <AvatarFallback className="bg-emerald-50 text-emerald-700 font-black">{initials}</AvatarFallback>
                             </Avatar>
                             <div>
-                                <p className="font-bold text-gray-900">{profile?.full_name}</p>
+                                <p className="font-bold text-gray-900 dark:text-white">{profile?.full_name}</p>
                                 <p className="text-xs text-gray-400 font-medium">{profile?.email}</p>
                             </div>
                         </div>
 
                         <div className="space-y-4">
-                            <Link
-                                to="/dashboard"
-                                onClick={() => setIsMenuOpen(false)}
-                                className="flex items-center gap-3 text-lg font-bold text-gray-700 hover:text-emerald-700 transition-colors"
-                            >
+                            <Link to="/dashboard" onClick={() => setIsMenuOpen(false)} className="flex items-center gap-3 text-lg font-bold text-gray-700 dark:text-gray-200 hover:text-emerald-700 transition-colors">
                                 <Box size={20} className="text-gray-400" /> Dashboard
                             </Link>
-                            <Link
-                                to="/my-tickets"
-                                onClick={() => setIsMenuOpen(false)}
-                                className="flex items-center gap-3 text-lg font-bold text-gray-700 hover:text-emerald-700 transition-colors"
-                            >
+                            <Link to="/my-tickets" onClick={() => setIsMenuOpen(false)} className="flex items-center gap-3 text-lg font-bold text-gray-700 dark:text-gray-200 hover:text-emerald-700 transition-colors">
                                 <MessageSquare size={20} className="text-gray-400" /> My Tickets
                             </Link>
-                            <Link
-                                to="/profile"
-                                onClick={() => setIsMenuOpen(false)}
-                                className="flex items-center gap-3 text-lg font-bold text-gray-700 hover:text-emerald-700 transition-colors"
-                            >
+                            <Link to="/profile" onClick={() => setIsMenuOpen(false)} className="flex items-center gap-3 text-lg font-bold text-gray-700 dark:text-gray-200 hover:text-emerald-700 transition-colors">
                                 <UserIcon size={20} className="text-gray-400" /> My Profile
                             </Link>
-                            <Link
-                                to="/docs"
-                                onClick={() => setIsMenuOpen(false)}
-                                className="flex items-center gap-3 text-lg font-bold text-gray-700 hover:text-emerald-700 transition-colors"
-                            >
-                                <BookOpen size={20} className="text-gray-400" /> Documentation
-                            </Link>
                         </div>
 
-                        <div className="pt-6 border-t border-gray-50">
+                        <div className="pt-6 border-t border-gray-50 dark:border-gray-700">
                             <button
                                 onClick={handleLogout}
-                                className="w-full py-4 bg-gray-50 rounded-2xl flex items-center justify-center gap-2 text-red-600 font-bold active:scale-95 transition-all"
+                                className="w-full py-4 bg-gray-50 dark:bg-gray-800 rounded-2xl flex items-center justify-center gap-2 text-red-600 font-bold active:scale-95 transition-all"
                             >
                                 <LogOut size={18} /> Sign Out
                             </button>
@@ -128,4 +132,4 @@ const TopNav = () => {
     );
 };
 
-export default TopNav;
+export default TopNav;

Frontend/src/user/pages/AIProcessing.jsx

@@ -24,7 +24,7 @@ const steps = [
 const AIProcessing = () => {
     const navigate = useNavigate();
     const location = useLocation();
-    const { text, image_text, image_base64 } = location.state || {};
+    const { text, image_text, image_base64, template_id, template_used, user_modified, ticket_title, original_text, original_language } = location.state || {};
     const setAITicket = useTicketStore((state) => state.setAITicket);
     const { settings } = useAdminStore();
     const { user, profile } = useAuthStore();
@@ -112,9 +112,15 @@ const AIProcessing = () => {
                         profile?.company ||
                         user?.user_metadata?.company ||
                         "System",
+                    company_id: profile?.company_id || null,
                     image_url: uploadedImageUrl,
                     confidence_threshold: settings.aiConfidenceThreshold,
-                    duplicate_sensitivity: settings.duplicateSensitivity
+                    duplicate_sensitivity: settings.duplicateSensitivity,
+                    // Smart Template metadata (backend can use for improved routing)
+                    template_id: template_id || null,
+                    template_used: template_used || false,
+                    user_modified: user_modified || false,
+                    ticket_title: ticket_title || null,
                 };
 
                 const response = await fetch(
@@ -270,10 +276,10 @@ const AIProcessing = () => {
                 const aiTicketObject = {
                     ...finalTicket,
                     status: 'analyzing',
-                    originalIssue: text,
+                    originalIssue: original_text || text,
+                    originalLanguage: original_language || 'en',
                     capturedFileBase64: image_base64,
-                    ocrText: image_text,
-                    image_url: uploadedImageUrl || finalTicket.image_url
+                    ocrText: image_text
                 };
 
                 setAITicket(aiTicketObject);
@@ -343,10 +349,10 @@ const AIProcessing = () => {
 
                         ocr_text: image_text || "",
                         highlights: [],
-                        originalIssue: text,
+                        originalIssue: original_text || text,
+                        originalLanguage: original_language || 'en',
                         capturedFileBase64: image_base64,
-                        ocrText: image_text,
-                        image_url: uploadedImageUrl
+                        ocrText: image_text
                     };
 
                     setAITicket(fallbackTicket);

Frontend/src/user/pages/AutoResolveChat.jsx

@@ -19,6 +19,7 @@ const AutoResolveChat = () => {
     const { aiTicket } = useTicketStore();
     const navigate = useNavigate();
     const [messages, setMessages] = useState([]);
+    const [steps, setSteps] = useState([]);
     const [isThinking, setIsThinking] = useState(false);
     const [isFinal, setIsFinal] = useState(false);
     const [inputText, setInputText] = useState('');
@@ -77,7 +78,7 @@ const AutoResolveChat = () => {
                 }
 
                 if (newSteps.length >= 2) {
-                    // Steps parsed successfully; welcome message sent below
+                    setSteps(newSteps);
                 } else {
                     const sentences = response
                         .replace(/\*\*/g, '')
@@ -87,7 +88,12 @@ const AutoResolveChat = () => {
                         .slice(0, 4);
 
                     if (sentences.length >= 2) {
-                        // Plan parsed but not rendered; welcome message sent below
+                        const sentenceSteps = sentences.map((s, i) => ({
+                            id: i + 1,
+                            task: s,
+                            completed: false
+                        }));
+                        setSteps(sentenceSteps);
                     } else {
                         throw new Error("Could not parse steps from AI response.");
                     }
@@ -197,6 +203,12 @@ const AutoResolveChat = () => {
         else recognition.start();
     };
 
+    const toggleStep = (stepId) => {
+        setSteps(prev => prev.map(step =>
+            step.id === stepId ? { ...step, completed: !step.completed } : step
+        ));
+    };
+
     if (!aiTicket) return null;
 
     return (
@@ -249,6 +261,48 @@ const AutoResolveChat = () => {
                         </div>
                     </div>
 
+                    {/* Troubleshooting Steps */}
+                    {steps.length > 0 && (
+                        <div className="px-10 py-6 border-b border-white/40 bg-emerald-50/30">
+                            <div className="flex items-center gap-2 mb-3">
+                                <ListChecks size={16} className="text-emerald-600" />
+                                <h3 className="text-[10px] font-black text-emerald-700 uppercase tracking-[0.2em]">
+                                    Troubleshooting Plan
+                                </h3>
+                            </div>
+                            <div className="space-y-2">
+                                {steps.map((step) => (
+                                    <button
+                                        key={step.id}
+                                        onClick={() => toggleStep(step.id)}
+                                        className={`w-full text-left flex items-center gap-3 p-3 rounded-xl border transition-all duration-300 ${
+                                            step.completed
+                                                ? 'bg-emerald-100 border-emerald-200 opacity-60'
+                                                : 'bg-white border-slate-100 hover:border-emerald-200 hover:bg-emerald-50/50'
+                                        }`}
+                                    >
+                                        <div className={`w-6 h-6 rounded-full flex items-center justify-center shrink-0 transition-all duration-300 ${
+                                            step.completed
+                                                ? 'bg-emerald-500 text-white'
+                                                : 'bg-slate-100 text-slate-400'
+                                        }`}>
+                                            {step.completed ? (
+                                                <CheckCircle2 size={14} />
+                                            ) : (
+                                                <span className="text-[10px] font-black">{step.id}</span>
+                                            )}
+                                        </div>
+                                        <span className={`text-[13px] font-bold leading-snug transition-all duration-300 ${
+                                            step.completed ? 'text-slate-400 line-through' : 'text-slate-700'
+                                        }`}>
+                                            {step.task}
+                                        </span>
+                                    </button>
+                                ))}
+                            </div>
+                        </div>
+                    )}
+
                     {/* Chat Messages */}
                     <div
                         ref={scrollRef}

Frontend/src/user/pages/CreateTicket.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useRef, useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useLocation } from 'react-router-dom';
 import {
     Upload,
     X,
@@ -21,11 +21,14 @@ import { motion, AnimatePresence } from 'framer-motion';
 import { Button } from "../../components/ui/button";
 import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "../../components/ui/card";
 import { Textarea } from "../../components/ui/textarea";
-import Tesseract from 'tesseract.js';
 import { translateText, SUPPORTED_LANGUAGES } from '../../services/translationService';
+import TemplateSelector from '../components/TemplateSelector';
+import TemplateForm from '../components/TemplateForm';
+import TICKET_TEMPLATES, { serializeFieldsToText, getEmptyFormValues } from '../../data/ticketTemplates';
 
 const CreateTicket = () => {
     const [issue, setIssue] = useState('');
+    const [ticketTitle, setTicketTitle] = useState('');
     const [file, setFile] = useState(null);
     const [imagePreview, setImagePreview] = useState(null);
     const [isLoading, setIsLoading] = useState(false);
@@ -33,8 +36,10 @@ const CreateTicket = () => {
     const [extractedOCR, setExtractedOCR] = useState('');
     const [isOcrLoading, setIsOcrLoading] = useState(false);
     const [isListening, setIsListening] = useState(false);
+    const isListeningRef = useRef(false);
     const fileInputRef = useRef(null);
     const navigate = useNavigate();
+    const location = useLocation();
     const MAX_CHARS = 1000;
     const supportsSpeech = 'SpeechRecognition' in window || 'webkitSpeechRecognition' in window;
     const [selectedLanguage, setSelectedLanguage] = useState('en');
@@ -42,6 +47,13 @@ const CreateTicket = () => {
     const [isLangOpen, setIsLangOpen] = useState(false);
     const langRef = useRef(null);
 
+    // ── Smart Template state (v2: two-step highlight → activate flow) ──
+    const [highlightedTemplateId, setHighlightedTemplateId] = useState(null);  // Card highlighted (preview)
+    const [activatedTemplateId, setActivatedTemplateId] = useState(null);      // Template committed (form shown)
+    const [formValues, setFormValues] = useState({});                          // Dynamic form field values
+    const [templateUsed, setTemplateUsed] = useState(false);
+    const [userModified, setUserModified] = useState(false);
+
     // Voice UI states
     const [showVoiceModal, setShowVoiceModal] = useState(false);
     const [voiceTranscript, setVoiceTranscript] = useState('');
@@ -58,12 +70,25 @@ const CreateTicket = () => {
 
     useEffect(() => {
         return () => {
+            isListeningRef.current = false;
             if (recognitionRef.current) recognitionRef.current.stop();
             if (audioContextRef.current) audioContextRef.current.close();
             if (animationFrameRef.current) cancelAnimationFrame(animationFrameRef.current);
         };
     }, []);
 
+    // Pre-select template if navigated from QuickActions or Dashboard with a templateId
+    // v2: Now highlights the template so user sees the preview first
+    useEffect(() => {
+        const incomingTemplateId = location.state?.templateId;
+        if (incomingTemplateId) {
+            const template = TICKET_TEMPLATES.find((t) => t.id === incomingTemplateId);
+            if (template) {
+                handleHighlightTemplate(template);
+            }
+        }
+    }, []);
+
     // Close language dropdown on outside click
     useEffect(() => {
         const handleClickOutside = (event) => {
@@ -85,6 +110,7 @@ const CreateTicket = () => {
     const processOCR = async (imageFile) => {
         setIsOcrLoading(true);
         try {
+            const { default: Tesseract } = await import('tesseract.js');
             const { data: { text } } = await Tesseract.recognize(imageFile, 'eng');
             setExtractedOCR(text.trim());
         } catch (err) {
@@ -165,13 +191,22 @@ const CreateTicket = () => {
                 console.error("Speech Recognition Error:", event.error);
                 if (event.error !== 'no-speech') {
                     setError(`Microphone error: ${event.error}`);
+                    stopListening();
                 }
             };
 
             recognition.onend = () => {
-                // Only stop visualizer if we actually intended to stop
-                if (!isListening) {
-                    if (animationFrameRef.current) cancelAnimationFrame(animationFrameRef.current);
+                if (isListeningRef.current) {
+                    try {
+                        recognitionRef.current?.start();
+                    } catch {
+                        // start() may throw if already running — safely ignore
+                    }
+                } else {
+                    if (animationFrameRef.current) {
+                        cancelAnimationFrame(animationFrameRef.current);
+                        animationFrameRef.current = null;
+                    }
                 }
             };
 
@@ -179,6 +214,7 @@ const CreateTicket = () => {
             recognition.start();
 
             setIsListening(true);
+            isListeningRef.current = true;
             setShowVoiceModal(true);
             setVoiceTranscript('');
             setInterimVoice('');
@@ -192,6 +228,7 @@ const CreateTicket = () => {
 
     const stopListening = () => {
         setIsListening(false);
+        isListeningRef.current = false;
         if (recognitionRef.current) {
             recognitionRef.current.stop();
             recognitionRef.current = null;
@@ -263,11 +300,68 @@ const CreateTicket = () => {
         }
     };
 
+    // ── Smart Template handlers (v2: highlight → activate → dismiss) ──
+
+    /** Step 1: Highlight a template card (shows preview, does NOT apply) */
+    const handleHighlightTemplate = (template) => {
+        setHighlightedTemplateId(template ? template.id : null);
+        setError('');
+    };
+
+    /** Step 2: User explicitly confirms — activate template and show dynamic form */
+    const handleActivateTemplate = (template) => {
+        setActivatedTemplateId(template.id);
+        setHighlightedTemplateId(null);
+        setTicketTitle(template.title);
+        setFormValues(getEmptyFormValues(template.fields));
+        setIssue('');  // Clear manual textarea content
+        setTemplateUsed(true);
+        setUserModified(false);
+        setError('');
+    };
+
+    /** Dismiss: clear template and restore manual mode */
+    const handleDismissTemplate = () => {
+        setActivatedTemplateId(null);
+        setHighlightedTemplateId(null);
+        setTicketTitle('');
+        setIssue('');
+        setFormValues({});
+        setTemplateUsed(false);
+        setUserModified(false);
+    };
+
+    /** Handle individual field changes in the dynamic form */
+    const handleFormFieldChange = (key, value) => {
+        setFormValues((prev) => ({ ...prev, [key]: value }));
+        if (templateUsed) setUserModified(true);
+    };
+
     const handleAnalyze = async (e) => {
         e.preventDefault();
-        if (!issue.trim()) {
-            setError('Please describe your issue first.');
-            return;
+
+        // ── v2: Determine description text based on active mode ──
+        const activeTemplate = TICKET_TEMPLATES.find((t) => t.id === activatedTemplateId);
+        let descriptionText = issue; // Default: manual textarea content
+
+        if (activeTemplate) {
+            // Template mode: serialize structured form fields to text
+            descriptionText = serializeFieldsToText(activeTemplate.fields, formValues);
+
+            // Validate required fields
+            const missingFields = activeTemplate.fields
+                .filter((f) => f.required && !formValues[f.key] && formValues[f.key] !== false)
+                .map((f) => f.label);
+            if (missingFields.length > 0) {
+                setError(`Please fill in required fields: ${missingFields.join(', ')}`);
+                return;
+            }
+        } else {
+            // Manual mode: validate textarea
+            if (!issue.trim()) {
+                setError('Please describe your issue first.');
+                return;
+            }
         }
 
         if (file && !isOcrLoading && !extractedOCR.trim()) {
@@ -279,15 +373,20 @@ const CreateTicket = () => {
         setError('');
 
         try {
-            let textToSubmit = issue;
+            let textToSubmit = descriptionText;
 
             // Translate to English if a different language is selected
             if (selectedLanguage !== 'en') {
                 setIsTranslating(true);
-                textToSubmit = await translateText(issue, selectedLanguage, 'en');
+                textToSubmit = await translateText(descriptionText, selectedLanguage, 'en');
                 setIsTranslating(false);
             }
 
+            // If a title was provided, prepend it to the text for richer AI context
+            if (ticketTitle.trim()) {
+                textToSubmit = `${ticketTitle.trim()}\n\n${textToSubmit}`;
+            }
+
             let imageBase64 = "";
             let extractedOCRText = extractedOCR;
             if (file) {
@@ -304,10 +403,15 @@ const CreateTicket = () => {
             navigate('/ai-processing', {
                 state: {
                     text: textToSubmit,
-                    original_text: issue,
+                    original_text: descriptionText,
                     original_language: selectedLanguage,
                     image_base64: imageBase64,
-                    image_text: extractedOCRText
+                    image_text: extractedOCRText,
+                    // Smart Template metadata
+                    template_id: activatedTemplateId || null,
+                    template_used: templateUsed,
+                    user_modified: userModified,
+                    ticket_title: ticketTitle.trim() || null,
                 }
             });
 
@@ -346,88 +450,133 @@ const CreateTicket = () => {
 
                             <CardContent className="p-8 pt-2 flex-grow flex flex-col">
                                 <form onSubmit={handleAnalyze} className="space-y-6 flex-grow flex flex-col">
-                                    {/* Description Textarea */}
-                                    <div className="space-y-2 flex-grow flex flex-col relative">
-                                        <div className="flex items-center justify-between">
-                                            <label className="text-sm font-bold text-gray-700">Describe your issue</label>
-                                            <span className={`text-xs font-semibold ${issue.length >= MAX_CHARS ? 'text-red-500' : 'text-gray-400'}`}>
-                                                {issue.length} / {MAX_CHARS}
-                                            </span>
+
+                                    {/* ── Smart Ticket Templates (v2: two-step selection) ── */}
+                                    <TemplateSelector
+                                        selectedTemplateId={highlightedTemplateId}
+                                        activatedTemplateId={activatedTemplateId}
+                                        onHighlightTemplate={handleHighlightTemplate}
+                                        onActivateTemplate={handleActivateTemplate}
+                                        onDismissTemplate={handleDismissTemplate}
+                                        hasExistingContent={!!(issue.trim() || ticketTitle.trim())}
+                                    />
+
+                                    {/* Title Field */}
+                                    <div className="space-y-2">
+                                        <label className="text-sm font-bold text-gray-700">Title</label>
+                                        <input
+                                            type="text"
+                                            value={ticketTitle}
+                                            onChange={(e) => {
+                                                setTicketTitle(e.target.value);
+                                                if (templateUsed) setUserModified(true);
+                                            }}
+                                            placeholder="Brief summary of your issue"
+                                            className="w-full rounded-2xl border border-gray-100 bg-gray-50/50 focus:bg-white focus:border-emerald-300 focus:ring-2 focus:ring-emerald-100 transition-all text-base p-4 outline-none"
+                                            disabled={isLoading}
+                                            maxLength={200}
+                                        />
+                                    </div>
+
+                                    {/* ── v2: Conditional rendering — TemplateForm OR manual textarea ── */}
+                                    {activatedTemplateId ? (
+                                        /* Template mode: show structured dynamic form */
+                                        <div className="space-y-2">
+                                            <label className="text-sm font-bold text-gray-700">Fill in the details</label>
+                                            <TemplateForm
+                                                fields={TICKET_TEMPLATES.find(t => t.id === activatedTemplateId)?.fields || []}
+                                                values={formValues}
+                                                onChange={handleFormFieldChange}
+                                                disabled={isLoading}
+                                            />
                                         </div>
+                                    ) : (
+                                        /* Manual mode: original textarea with language selector */
+                                        <div className="space-y-2 flex-grow flex flex-col relative">
+                                            <div className="flex items-center justify-between">
+                                                <label className="text-sm font-bold text-gray-700">Describe your issue</label>
+                                                <span className={`text-xs font-semibold ${issue.length >= MAX_CHARS ? 'text-red-500' : 'text-gray-400'}`}>
+                                                    {issue.length} / {MAX_CHARS}
+                                                </span>
+                                            </div>
 
-                                        {/* Premium Language Selector */}
-                                        <div className="flex items-center gap-2">
-                                            <label className="text-xs font-bold text-gray-500 uppercase tracking-wider shrink-0">Language:</label>
-                                            <div className="relative flex-1" ref={langRef}>
-                                                <button
-                                                    type="button"
-                                                    onClick={() => setIsLangOpen(!isLangOpen)}
-                                                    className="w-full bg-gray-50 border border-gray-100 rounded-xl px-4 py-2.5 text-sm font-bold text-gray-700 flex items-center justify-between hover:bg-white hover:border-emerald-200 transition-all shadow-sm group"
-                                                >
-                                                    <span className="flex items-center gap-2">
-                                                        <Globe size={14} className="text-emerald-500" />
-                                                        {SUPPORTED_LANGUAGES.find(l => l.code === selectedLanguage)?.label}
-                                                    </span>
-                                                    <motion.div
-                                                        animate={{ rotate: isLangOpen ? 180 : 0 }}
-                                                        className="text-gray-400 group-hover:text-emerald-500 transition-colors"
+                                            {/* Premium Language Selector */}
+                                            <div className="flex items-center gap-2">
+                                                <label className="text-xs font-bold text-gray-500 uppercase tracking-wider shrink-0">Language:</label>
+                                                <div className="relative flex-1" ref={langRef}>
+                                                    <button
+                                                        type="button"
+                                                        onClick={() => setIsLangOpen(!isLangOpen)}
+                                                        className="w-full bg-gray-50 border border-gray-100 rounded-xl px-4 py-2.5 text-sm font-bold text-gray-700 flex items-center justify-between hover:bg-white hover:border-emerald-200 transition-all shadow-sm group"
                                                     >
-                                                        <ChevronDown size={16} />
-                                                    </motion.div>
-                                                </button>
-
-                                                <AnimatePresence>
-                                                    {isLangOpen && (
+                                                        <span className="flex items-center gap-2">
+                                                            <Globe size={14} className="text-emerald-500" />
+                                                            {SUPPORTED_LANGUAGES.find(l => l.code === selectedLanguage)?.label}
+                                                        </span>
                                                         <motion.div
-                                                            initial={{ opacity: 0, y: 10, scale: 0.95 }}
-                                                            animate={{ opacity: 1, y: 5, scale: 1 }}
-                                                            exit={{ opacity: 0, y: 10, scale: 0.95 }}
-                                                            className="absolute z-50 top-full left-0 right-0 bg-white border border-gray-100 rounded-2xl shadow-2xl shadow-emerald-900/10 p-2 overflow-hidden"
+                                                            animate={{ rotate: isLangOpen ? 180 : 0 }}
+                                                            className="text-gray-400 group-hover:text-emerald-500 transition-colors"
                                                         >
-                                                            <div className="max-h-[220px] overflow-y-auto custom-scrollbar space-y-1">
-                                                                {SUPPORTED_LANGUAGES.map(lang => (
-                                                                    <button
-                                                                        key={lang.code}
-                                                                        type="button"
-                                                                        onClick={() => {
-                                                                            setSelectedLanguage(lang.code);
-                                                                            setIsLangOpen(false);
-                                                                        }}
-                                                                        className={`w-full text-left px-4 py-2.5 rounded-xl text-sm font-bold transition-all flex items-center justify-between
-                                                                            ${selectedLanguage === lang.code
-                                                                                ? 'bg-emerald-50 text-emerald-700'
-                                                                                : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'
-                                                                            }`}
-                                                                    >
-                                                                        {lang.label}
-                                                                        {selectedLanguage === lang.code && <CheckCircle2 size={14} className="text-emerald-500" />}
-                                                                    </button>
-                                                                ))}
-                                                            </div>
+                                                            <ChevronDown size={16} />
                                                         </motion.div>
-                                                    )}
-                                                </AnimatePresence>
+                                                    </button>
+
+                                                    <AnimatePresence>
+                                                        {isLangOpen && (
+                                                            <motion.div
+                                                                initial={{ opacity: 0, y: 10, scale: 0.95 }}
+                                                                animate={{ opacity: 1, y: 5, scale: 1 }}
+                                                                exit={{ opacity: 0, y: 10, scale: 0.95 }}
+                                                                className="absolute z-50 top-full left-0 right-0 bg-white border border-gray-100 rounded-2xl shadow-2xl shadow-emerald-900/10 p-2 overflow-hidden"
+                                                            >
+                                                                <div className="max-h-[220px] overflow-y-auto custom-scrollbar space-y-1">
+                                                                    {SUPPORTED_LANGUAGES.map(lang => (
+                                                                        <button
+                                                                            key={lang.code}
+                                                                            type="button"
+                                                                            onClick={() => {
+                                                                                setSelectedLanguage(lang.code);
+                                                                                setIsLangOpen(false);
+                                                                            }}
+                                                                            className={`w-full text-left px-4 py-2.5 rounded-xl text-sm font-bold transition-all flex items-center justify-between
+                                                                                ${selectedLanguage === lang.code
+                                                                                    ? 'bg-emerald-50 text-emerald-700'
+                                                                                    : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'
+                                                                                }`}
+                                                                        >
+                                                                            {lang.label}
+                                                                            {selectedLanguage === lang.code && <CheckCircle2 size={14} className="text-emerald-500" />}
+                                                                        </button>
+                                                                    ))}
+                                                                </div>
+                                                            </motion.div>
+                                                        )}
+                                                    </AnimatePresence>
+                                                </div>
+                                                {selectedLanguage !== 'en' && (
+                                                    <motion.span
+                                                        initial={{ opacity: 0, x: -10 }}
+                                                        animate={{ opacity: 1, x: 0 }}
+                                                        className="text-[10px] bg-emerald-500 text-white px-2.5 py-1 rounded-full font-black uppercase tracking-widest shadow-lg shadow-emerald-200"
+                                                    >
+                                                        Translating
+                                                    </motion.span>
+                                                )}
+                                            </div>
+                                            <div className="relative flex-grow flex flex-col">
+                                                <Textarea
+                                                    value={issue}
+                                                    onChange={(e) => {
+                                                        setIssue(e.target.value.substring(0, MAX_CHARS));
+                                                        if (templateUsed) setUserModified(true);
+                                                    }}
+                                                    placeholder="Describe your problem. Example: VPN not connecting error 789"
+                                                    className="min-h-[160px] flex-grow rounded-2xl border-gray-100 bg-gray-50/50 focus:bg-white transition-all text-base p-4 resize-none"
+                                                    disabled={isLoading}
+                                                />
                                             </div>
-                                            {selectedLanguage !== 'en' && (
-                                                <motion.span
-                                                    initial={{ opacity: 0, x: -10 }}
-                                                    animate={{ opacity: 1, x: 0 }}
-                                                    className="text-[10px] bg-emerald-500 text-white px-2.5 py-1 rounded-full font-black uppercase tracking-widest shadow-lg shadow-emerald-200"
-                                                >
-                                                    Translating
-                                                </motion.span>
-                                            )}
-                                        </div>
-                                        <div className="relative flex-grow flex flex-col">
-                                            <Textarea
-                                                value={issue}
-                                                onChange={(e) => setIssue(e.target.value.substring(0, MAX_CHARS))}
-                                                placeholder="Describe your problem. Example: VPN not connecting error 789"
-                                                className="min-h-[160px] flex-grow rounded-2xl border-gray-100 bg-gray-50/50 focus:bg-white transition-all text-base p-4 resize-none"
-                                                disabled={isLoading}
-                                            />
                                         </div>
-                                    </div>
+                                    )}
 
                                     {/* Premium Voice Visualizer */}
                                     {supportsSpeech && (
@@ -571,7 +720,7 @@ const CreateTicket = () => {
                                     {/* Primary Submit Button */}
                                     <Button
                                         type="submit"
-                                        disabled={isLoading || isOcrLoading || isTranslating || !issue.trim()}
+                                        disabled={isLoading || isOcrLoading || isTranslating || (!activatedTemplateId && !issue.trim())}
                                         className="w-full h-14 bg-emerald-500 hover:bg-emerald-600 text-white font-bold text-lg rounded-2xl flex items-center justify-center gap-2 transition-all border-none shadow-emerald-200/50 shadow-lg hover:shadow-xl active:scale-[0.98] disabled:opacity-50"
                                     >
                                         {(isLoading || isTranslating) ? (

Frontend/src/user/pages/Dashboard.jsx

@@ -42,9 +42,10 @@ const Dashboard = () => {
                         <RecentTickets />
                     </section>
 
+                    {/* Footer Info */}
                     <footer className="mt-8 text-center">
                         <p className="text-xs text-gray-400 font-medium tracking-tight">
-                            &copy; {new Date().getFullYear()} {profile?.company || 'Emerald Helpdesk'}. All systems operational.
+                            &copy; 2026 Emerald Helpdesk. All systems operational.
                         </p>
                     </footer>
                 </div>

Frontend/src/user/pages/DuplicateDetection.jsx

@@ -3,11 +3,17 @@ import { useNavigate } from 'react-router-dom';
 import {
     FileText, Database, Zap,
     CheckCircle2, AlertTriangle, ArrowRight,
-    Lightbulb, SearchX, TicketCheck, Search
+    Lightbulb, SearchX, TicketCheck, Search, Bell, Link2
 } from 'lucide-react';
 import useTicketStore from "../../store/ticketStore";
 import { API_CONFIG } from "../../config";
-import { supabase } from "../../lib/supabaseClient";
+
+// ─── Animated Step Pipeline ───────────────────────────────────────────────────
+const pipelineSteps = [
+    { icon: FileText, label: 'Your Issue', desc: 'Captured & analysed' },
+    { icon: Database, label: 'Case History', desc: 'Scanned 10 000+ cases' },
+    { icon: Zap, label: 'Match Found', desc: 'Similarity calculated' },
+];
 
 // ─── Shimmer skeleton ─────────────────────────────────────────────────────────
 const Shimmer = ({ className = '' }) => (
@@ -34,33 +40,6 @@ const DuplicateDetection = () => {
     const [isLoading, setIsLoading] = useState(true);
     const [activeStep, setActiveStep] = useState(0);
     const [countdown, setCountdown] = useState(2);
-    const [totalCases, setTotalCases] = useState('10,000+');
-
-    // ─── Animated Step Pipeline (Dynamic) ───────────────────────────────────────────
-    const pipelineSteps = [
-        { icon: FileText, label: 'Your Issue', desc: 'Captured & analysed' },
-        { icon: Database, label: 'Case History', desc: `Scanned ${totalCases} cases` },
-        { icon: Zap, label: 'Match Found', desc: 'Similarity calculated' },
-    ];
-
-    // Fetch dynamic case count from Supabase database
-    useEffect(() => {
-        const fetchCaseCount = async () => {
-            try {
-                if (supabase) {
-                    const { count, error } = await supabase
-                        .from('tickets')
-                        .select('id', { count: 'exact', head: true });
-                    if (!error && count != null) {
-                        setTotalCases(count.toLocaleString());
-                    }
-                }
-            } catch (err) {
-                console.warn("[DuplicateDetection] Failed to fetch live case count fallback to default:", err);
-            }
-        };
-        fetchCaseCount();
-    }, []);
 
     // Loading delay + step animation
     useEffect(() => {
@@ -75,6 +54,7 @@ const DuplicateDetection = () => {
     }, [isLoading, aiTicket, navigate]);
 
     const isDuplicate = aiTicket?.duplicate_ticket?.is_duplicate === true;
+    const duplicateParentTicketId = aiTicket?.parent_ticket_id || aiTicket?.duplicate_ticket?.parent_ticket_id || aiTicket?.duplicate_ticket?.duplicate_ticket_id;
 
     // Auto-redirect when no duplicate
     useEffect(() => {
@@ -208,8 +188,45 @@ const DuplicateDetection = () => {
                 {/* ── Match / No-match result card ─────────────────────── */}
                 {isDuplicate ? (
                     <div className="bg-white rounded-3xl border border-slate-100 shadow-xl shadow-slate-200/40 overflow-hidden">
+                        <div className="px-8 pt-8">
+                            <div className="relative overflow-hidden rounded-3xl border border-amber-200 bg-gradient-to-br from-amber-50 via-white to-orange-50 p-6 shadow-[0_20px_60px_-24px_rgba(217,119,6,0.45)]">
+                                <div className="absolute -right-10 -top-10 h-32 w-32 rounded-full bg-amber-300/20 blur-3xl" />
+                                <div className="relative flex items-start gap-4">
+                                    <div className="rounded-2xl bg-amber-100 p-3 shadow-sm">
+                                        <Bell className="h-6 w-6 text-amber-700" />
+                                    </div>
+                                    <div className="flex-1">
+                                        <p className="text-[11px] font-black uppercase tracking-[0.22em] text-amber-700">Potential Duplicate</p>
+                                        <h2 className="mt-1 text-xl font-black text-slate-900 tracking-tight">
+                                            A similar issue was recently reported by your teammate.
+                                        </h2>
+                                        <p className="mt-2 max-w-2xl text-sm font-medium leading-6 text-slate-600">
+                                            Would you like to subscribe to updates on the existing ticket instead of creating a duplicate? You can open the parent ticket now or continue anyway if this is a new incident.
+                                        </p>
+                                        <div className="mt-5 flex flex-col gap-3 sm:flex-row">
+                                            {duplicateParentTicketId ? (
+                                                <button
+                                                    onClick={() => navigate(`/ticket/${duplicateParentTicketId}`)}
+                                                    className="inline-flex items-center justify-center gap-2 rounded-2xl bg-slate-900 px-5 py-3 text-sm font-black uppercase tracking-widest text-white transition-transform hover:scale-[1.01]"
+                                                >
+                                                    <Link2 className="h-4 w-4" />
+                                                    Open Existing Ticket
+                                                </button>
+                                            ) : null}
+                                            <button
+                                                onClick={handleCreateTicket}
+                                                className="inline-flex items-center justify-center gap-2 rounded-2xl border border-amber-200 bg-white px-5 py-3 text-sm font-black uppercase tracking-widest text-amber-900 transition-transform hover:scale-[1.01]"
+                                            >
+                                                Create Anyway
+                                            </button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
                         {/* Card header */}
-                        <div className="px-8 py-6 bg-amber-50 border-b border-amber-100 flex items-start gap-4">
+                        <div className="px-8 py-6 bg-amber-50 border-b border-amber-100 flex items-start gap-4 mt-8">
                             <div className="p-2.5 bg-amber-100 rounded-xl shrink-0">
                                 <AlertTriangle className="w-5 h-5 text-amber-600" />
                             </div>

Frontend/src/user/pages/MyTickets.jsx

@@ -120,6 +120,14 @@ function MyTickets() {
         return 'text-gray-600';
     };
 
+    const getTranslationInfo = (ticket) => {
+        const t = ticket?.metadata?.translation;
+        if (!t?.translated) return null;
+        return {
+            sourceLanguageName: t.source_language_name || t.source_language || 'Unknown',
+        };
+    };
+
     return (
         <main className="flex-1 max-w-[1200px] w-full mx-auto px-6 py-10 flex flex-col gap-8">
             {/* Header section */}
@@ -317,6 +325,11 @@ function MyTickets() {
                                                  <p className="text-sm font-semibold text-gray-900 truncate group-hover:text-emerald-700 transition-colors">
                                                      {ticket.summary || ticket.subject || ticket.description || "No subject"}
                                                  </p>
+                                                 {getTranslationInfo(ticket) && (
+                                                     <p className="text-[10px] text-slate-500 mt-1">
+                                                         Translated from {getTranslationInfo(ticket).sourceLanguageName}
+                                                     </p>
+                                                 )}
                                             </td>
                                             <td className="px-6 py-4">
                                                 <span className="text-sm font-medium text-gray-600 bg-gray-100 px-2.5 py-1 rounded-md">

Frontend/src/user/pages/TicketDetail.jsx

@@ -22,6 +22,7 @@ const TicketDetail = () => {
     const [isReopening, setIsReopening] = useState(false);
     const [showCsat, setShowCsat] = useState(false);
     const [csatHasBeenDismissed, setCsatHasBeenDismissed] = useState(false);
+    const [showOriginalText, setShowOriginalText] = useState(false);
 
     useEffect(() => {
         window.scrollTo(0, 0);
@@ -118,10 +119,14 @@ const TicketDetail = () => {
     }
 
     // Safely parse arrays and formats
-    const entities = ticket.metadata?.entities || ticket.entities || [];
+    const entities = ticket.entities || [];
     const solutionSteps = Array.isArray(ticket.solution_steps) ? ticket.solution_steps : [];
     const isAutoResolved = ticket.auto_resolve === true;
     const confidenceScore = ticket.metadata?.confidence ?? ticket.routing_confidence ?? 0.92;
+    const translationMeta = ticket.metadata?.translation;
+    const originalTextMeta = ticket.metadata?.original_text;
+    const isTranslated = Boolean(translationMeta?.translated && originalTextMeta?.description);
+    const sourceLanguageName = translationMeta?.source_language_name || translationMeta?.source_language || 'Unknown';
 
 
     const handleReopen = async () => {
@@ -184,6 +189,27 @@ const TicketDetail = () => {
 
                 {/* LEFT SIDE (Main Content) */}
                 <div className="lg:col-span-2 flex flex-col gap-6">
+                    {isTranslated && (
+                        <Card className="p-4 rounded-2xl border border-sky-100 bg-sky-50/70 shadow-sm">
+                            <div className="flex items-center justify-between gap-3">
+                                <p className="text-sm font-semibold text-sky-900">
+                                    Translated from {sourceLanguageName}
+                                </p>
+                                <button
+                                    type="button"
+                                    onClick={() => setShowOriginalText(prev => !prev)}
+                                    className="text-xs font-bold text-sky-700 hover:text-sky-900"
+                                >
+                                    {showOriginalText ? "View English" : "View Original"}
+                                </button>
+                            </div>
+                            {showOriginalText && (
+                                <p className="mt-3 text-sm text-slate-700 bg-white border border-sky-100 rounded-lg px-3 py-2">
+                                    {originalTextMeta?.description}
+                                </p>
+                            )}
+                        </Card>
+                    )}
 
                     {/* Card 1: Ticket Timeline */}
                     <Card className="p-6 sm:p-8 rounded-2xl border border-gray-100 shadow-sm bg-white">

Frontend/src/user/pages/TicketTracking.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useEffect, useState, useRef, useMemo } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
 import {
     Activity, CheckCircle2, ShieldCheck, User,
@@ -20,14 +20,20 @@ const TicketTracking = () => {
     const [error, setError] = useState(null);
     const [createdTicket, setCreatedTicket] = useState(null);
     const hasCreated = useRef(false);
+    const resolutionSteps = useMemo(() => location.state?.resolutionSteps || [], [location.state?.resolutionSteps]);
+
+    const getSlaBreachAt = (priority = 'Medium') => {
+        const hoursMap = { Critical: 2, High: 8, Medium: 24, Low: 72 };
+        const slaHours = hoursMap[priority] || 24;
+        return new Date(Date.now() + slaHours * 60 * 60 * 1000).toISOString();
+    };
+
     useEffect(() => {
         if (!aiTicket) {
             navigate('/create-ticket');
             return;
         }
 
-        const resolutionSteps = location.state?.resolutionSteps || [];
-
         const finalizeTracking = async () => {
             if (hasCreated.current) return;
             hasCreated.current = true;
@@ -42,6 +48,7 @@ const TicketTracking = () => {
                     user_id: user?.id,
                     subject: aiTicket.summary,
                     description: aiTicket.originalIssue || aiTicket.summary,
+                    original_language: aiTicket.originalLanguage || 'en',
                     category: aiTicket.category,
                     subcategory: aiTicket.subcategory,
                     priority: aiTicket.priority,
@@ -49,11 +56,13 @@ const TicketTracking = () => {
                     status: status,
                     auto_resolve: isAutoResolved,
                     is_duplicate: aiTicket.duplicate_ticket?.is_duplicate || false,
+                    is_potential_duplicate: aiTicket.is_potential_duplicate || aiTicket.duplicate_ticket?.is_potential_duplicate || false,
+                    parent_ticket_id: aiTicket.parent_ticket_id || aiTicket.duplicate_ticket?.parent_ticket_id || aiTicket.duplicate_ticket?.duplicate_ticket_id || null,
                     confidence: aiTicket.confidence,
                     image_url: aiTicket.image_url || null,
-                    company: profile?.company || "System",
+                    company: profile?.company || null,
                     company_id: profile?.company_id || null,
-                    sla_breach_at: aiTicket.sla_breach_at,
+                    sla_breach_at: aiTicket.sla_breach_at || getSlaBreachAt(aiTicket.priority),
                     metadata: {
                         confidence: aiTicket.confidence,
                         entities: aiTicket.entities,
@@ -91,7 +100,7 @@ const TicketTracking = () => {
         };
 
         finalizeTracking();
-    }, [aiTicket, addTicket, navigate, user, profile?.company, location.state]);
+    }, [aiTicket, addTicket, navigate, user, profile?.company, profile?.company_id, resolutionSteps]);
 
     if (!aiTicket) return null;
 

Frontend/vite.config.js

@@ -15,6 +15,6 @@ export default defineConfig({
     },
   },
   build: {
-    sourcemap: true
+    sourcemap: 'hidden'
   }
 })

MobileApp/App.js

@@ -1,5 +1,4 @@
 import 'react-native-gesture-handler';
-import LogRocket from '@logrocket/react-native';
 import React, { useEffect, useState } from 'react';
 import { NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
@@ -7,8 +6,8 @@ import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { StatusBar } from 'expo-status-bar';
 import { supabase } from './src/lib/supabase';
 import { COLORS } from './src/styles/theme';
-import { LayoutDashboard, Ticket, User } from 'lucide-react-native';
-import { View, ActivityIndicator } from 'react-native';
+import { LayoutDashboard, Ticket, User, Settings, ShieldAlert, Users } from 'lucide-react-native';
+import { View, ActivityIndicator, Linking } from 'react-native';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context';
 
@@ -34,6 +33,13 @@ import AIProcessingScreen from './src/screens/user/AIProcessingScreen';
 import NotificationsScreen from './src/screens/user/NotificationsScreen';
 import KnowledgeBaseScreen from './src/screens/user/KnowledgeBaseScreen';
 
+// Admin Screens
+import AdminDashboardScreen from './src/screens/admin/AdminDashboardScreen';
+import AdminTicketsScreen from './src/screens/admin/AdminTicketsScreen';
+import AdminTicketDetailScreen from './src/screens/admin/AdminTicketDetailScreen';
+import AdminUsersScreen from './src/screens/admin/AdminUsersScreen';
+import AdminSettingsScreen from './src/screens/admin/AdminSettingsScreen';
+
 const Stack = createNativeStackNavigator();
 const Tab = createBottomTabNavigator();
 
@@ -72,6 +78,45 @@ const TabNavigator = () => {
   );
 };
 
+const AdminTabNavigator = () => {
+  const insets = useSafeAreaInsets();
+  const tabBarHeight = 60 + insets.bottom;
+
+  return (
+    <Tab.Navigator
+      screenOptions={({ route }) => ({
+        tabBarIcon: ({ color, size }) => {
+          if (route.name === 'AdminDashboard') return <LayoutDashboard size={size} color={color} />;
+          if (route.name === 'Tickets') return <Ticket size={size} color={color} />;
+          if (route.name === 'Users') return <Users size={size} color={color} />;
+          if (route.name === 'Settings') return <Settings size={size} color={color} />;
+          if (route.name === 'Profile') return <User size={size} color={color} />;
+        },
+        tabBarActiveTintColor: COLORS.primary,
+        tabBarInactiveTintColor: COLORS.textMuted,
+        tabBarLabelStyle: { fontSize: 11, fontWeight: '700' },
+        tabBarStyle: {
+          height: tabBarHeight,
+          paddingBottom: insets.bottom + 8,
+          paddingTop: 10,
+          backgroundColor: '#ffffff',
+          borderTopWidth: 1,
+          borderTopColor: '#f0f0f0',
+          elevation: 0,
+          shadowOpacity: 0,
+        },
+        headerShown: false,
+      })}
+    >
+      <Tab.Screen name="AdminDashboard" component={AdminDashboardScreen} options={{ title: 'Dashboard' }} />
+      <Tab.Screen name="Tickets" component={AdminTicketsScreen} />
+      <Tab.Screen name="Users" component={AdminUsersScreen} />
+      <Tab.Screen name="Settings" component={AdminSettingsScreen} />
+      <Tab.Screen name="Profile" component={ProfileScreen} />
+    </Tab.Navigator>
+  );
+};
+
 // Inner app that has access to SafeAreaProvider context
 const AppContent = () => {
   const insets = useSafeAreaInsets();
@@ -79,36 +124,95 @@ const AppContent = () => {
   const [loading, setLoading] = useState(true);
   const [showOnboarding, setShowOnboarding] = useState(null);
   const [userStatus, setUserStatus] = useState(null); // 'active', 'pending_approval', 'rejected'
+  const [userRole, setUserRole] = useState('user'); // 'user', 'admin', 'master_admin'
 
   useEffect(() => {
-    // Initialize LogRocket
-    LogRocket.init('ky7sla/helpdeskai');
+    let finished = false;
 
     const initialize = async () => {
+      // Safety timeout wrapper: if anything hangs, force mount after 3 seconds
+      const timeoutId = setTimeout(async () => {
+        if (!finished) {
+          console.log('[AuthInit] Timeout reached (3s). Forcing mount fallback.');
+          try {
+            const onboardingDone = await AsyncStorage.getItem('@onboarding_complete');
+            setShowOnboarding(onboardingDone === null);
+          } catch (err) {
+            setShowOnboarding(false);
+          }
+          setLoading(false);
+        }
+      }, 3000);
+
       try {
-        const { data: { session } } = await supabase.auth.getSession();
+        // 1. Instantly load cached status and role from AsyncStorage (stale-while-revalidate pattern)
+        const [cachedStatus, cachedRole] = await Promise.all([
+          AsyncStorage.getItem('@user_status'),
+          AsyncStorage.getItem('@user_role'),
+        ]);
+
+        if (cachedStatus) setUserStatus(cachedStatus);
+        if (cachedRole) setUserRole(cachedRole);
+
+        // 2. Fetch session with a 2.5 second timeout wrapper to prevent slow refreshing from locking the app
+        const sessionPromise = supabase.auth.getSession();
+        const sessionTimeoutPromise = new Promise((_, reject) =>
+          setTimeout(() => reject(new Error('Session fetch timed out')), 2500)
+        );
+
+        const { data: { session } } = await Promise.race([sessionPromise, sessionTimeoutPromise]);
         setSession(session);
 
+        // 3. If session is valid, validate/fetch the user profile
         if (session?.user) {
-          // Identify user in LogRocket
-          LogRocket.identify(session.user.id, {
-            email: session.user.email,
-            name: session.user.user_metadata?.full_name || 'User',
-          });
-
-          const { data } = await supabase
+          const profilePromise = supabase
             .from('profiles')
-            .select('status')
+            .select('status, role')
             .eq('id', session.user.id)
             .single();
-          setUserStatus(data?.status || 'active');
-        }
 
-        const onboardingDone = await AsyncStorage.getItem('@onboarding_complete');
-        setShowOnboarding(onboardingDone === null);
+          const profileTimeoutPromise = new Promise((_, reject) =>
+            setTimeout(() => reject(new Error('Profile fetch timed out')), 2000)
+          );
+
+          const { data, error } = await Promise.race([profilePromise, profileTimeoutPromise]);
+          
+          if (error) {
+            console.log('[AuthInit] Profile fetch error, validating session:', error.message);
+            // Verify if session is still validly active (GetUser forces refresh if expired)
+            const { data: userData, error: userError } = await supabase.auth.getUser();
+            if (userError) {
+              console.log('[AuthInit] Token validation failed. Clearing session.');
+              setSession(null);
+              await AsyncStorage.removeItem('@user_status');
+              await AsyncStorage.removeItem('@user_role');
+            } else {
+              // Valid token but profiles table is offline; retain cached or default to safe user status
+              if (!cachedStatus) setUserStatus('active');
+              if (!cachedRole) setUserRole('user');
+            }
+          } else {
+            const status = data?.status || 'active';
+            const role = data?.role || 'user';
+            setUserStatus(status);
+            setUserRole(role);
+            await Promise.all([
+              AsyncStorage.setItem('@user_status', status),
+              AsyncStorage.setItem('@user_role', role),
+            ]);
+          }
+        }
       } catch (e) {
-        console.log('Init error', e);
+        console.log('[AuthInit] Exception caught during initialization:', e.message || e);
       } finally {
+        finished = true;
+        clearTimeout(timeoutId);
+        try {
+          const onboardingDone = await AsyncStorage.getItem('@onboarding_complete');
+          setShowOnboarding(onboardingDone === null);
+        } catch (err) {
+          setShowOnboarding(false);
+        }
         setLoading(false);
       }
     };
@@ -118,21 +222,39 @@ const AppContent = () => {
     const { data: { subscription } } = supabase.auth.onAuthStateChange(async (_event, session) => {
       setSession(session);
       if (session?.user) {
-        // Identify user in LogRocket on auth change
-        LogRocket.identify(session.user.id, {
-          email: session.user.email,
-          name: session.user.user_metadata?.full_name || 'User',
-        });
-
-        // Fetch profile status for routing
-        const { data } = await supabase
-          .from('profiles')
-          .select('status')
-          .eq('id', session.user.id)
-          .single();
-        setUserStatus(data?.status || 'active');
+        try {
+          const { data, error } = await supabase
+            .from('profiles')
+            .select('status, role')
+            .eq('id', session.user.id)
+            .single();
+          
+          if (error) {
+            console.log('[AuthChange] Profile query failed:', error.message);
+            setUserStatus('active');
+            setUserRole('user');
+          } else {
+            const status = data?.status || 'active';
+            const role = data?.role || 'user';
+            setUserStatus(status);
+            setUserRole(role);
+            await Promise.all([
+              AsyncStorage.setItem('@user_status', status),
+              AsyncStorage.setItem('@user_role', role),
+            ]);
+          }
+        } catch (err) {
+          console.warn('[AuthChange] Uncaught exception inside handler:', err);
+          setUserStatus('active');
+          setUserRole('user');
+        }
       } else {
         setUserStatus(null);
+        setUserRole('user');
+        await Promise.all([
+          AsyncStorage.removeItem('@user_status'),
+          AsyncStorage.removeItem('@user_role'),
+        ]);
       }
     });
 
@@ -150,14 +272,56 @@ const AppContent = () => {
         schema: 'public',
         table: 'profiles',
         filter: `id=eq.${session.user.id}`,
-      }, (payload) => {
-        setUserStatus(payload.new.status);
+      }, async (payload) => {
+        const status = payload.new.status;
+        const role = payload.new.role || 'user';
+        setUserStatus(status);
+        setUserRole(role);
+        await Promise.all([
+          AsyncStorage.setItem('@user_status', status),
+          AsyncStorage.setItem('@user_role', role),
+        ]);
       })
       .subscribe();
 
     return () => supabase.removeChannel(channel);
   }, [session?.user?.id]);
 
+  // Deep link listener for magic link / email verification callbacks
+  useEffect(() => {
+    const handleUrl = async ({ url }) => {
+      if (!url) return;
+      const hashIndex = url.indexOf('#');
+      if (hashIndex === -1) return;
+      const hash = url.substring(hashIndex + 1);
+      const params = {};
+      hash.split('&').forEach(pair => {
+        const [key, val] = pair.split('=');
+        if (key && val) params[key] = decodeURIComponent(val);
+      });
+      if (params.access_token && params.refresh_token) {
+        try {
+          const { data, error } = await supabase.auth.setSession({
+            access_token: params.access_token,
+            refresh_token: params.refresh_token,
+          });
+          if (error) {
+            console.warn('[DeepLink] Failed to set session:', error.message);
+          } else {
+            console.log('[DeepLink] Session set successfully for:', data.user?.email);
+          }
+        } catch (e) {
+          console.warn('[DeepLink] Error parsing magic link:', e);
+        }
+      }
+    };
+
+    const subscription = Linking.addEventListener('url', handleUrl);
+    Linking.getInitialURL().then(url => url && handleUrl({ url }));
+
+    return () => subscription.remove();
+  }, []);
+
   if (loading) {
     return (
       <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#0b1120' }}>
@@ -170,6 +334,7 @@ const AppContent = () => {
   const isActive = userStatus === 'active';
   const isPending = userStatus === 'pending_approval';
   const isRejected = userStatus === 'rejected';
+  const isAdmin = userRole === 'admin' || userRole === 'master_admin';
 
   return (
     <NotificationProvider topInset={insets.top}>
@@ -191,13 +356,20 @@ const AppContent = () => {
           ) : (
             // ─── Active user ───
             <>
-               <Stack.Screen name="MainTabs" component={TabNavigator} />
+               {isAdmin ? (
+                 <Stack.Screen name="MainTabs" component={AdminTabNavigator} />
+               ) : (
+                 <Stack.Screen name="MainTabs" component={TabNavigator} />
+               )}
               <Stack.Screen name="CreateTicket" component={CreateTicketScreen} options={{ animation: 'slide_from_bottom' }} />
               <Stack.Screen name="AIProcessing" component={AIProcessingScreen} options={{ animation: 'slide_from_right' }} />
               <Stack.Screen name="TicketTracking" component={TicketTrackingScreen} options={{ animation: 'slide_from_right' }} />
               <Stack.Screen name="TicketDetail" component={TicketDetailScreen} options={{ animation: 'slide_from_right' }} />
               <Stack.Screen name="Notifications" component={NotificationsScreen} options={{ animation: 'slide_from_right' }} />
               <Stack.Screen name="KnowledgeBase" component={KnowledgeBaseScreen} options={{ animation: 'slide_from_right' }} />
+              
+              {/* Admin specific screens */}
+              <Stack.Screen name="AdminTicketDetail" component={AdminTicketDetailScreen} options={{ animation: 'slide_from_right' }} />
             </>
           )}
         </Stack.Navigator>

MobileApp/app.json

@@ -12,13 +12,14 @@
       "resizeMode": "contain",
       "backgroundColor": "#ffffff"
     },
+    "scheme": "helpdeskai",
     "ios": {
       "supportsTablet": true
     },
     "android": {
       "package": "com.ritesh.helpdeskai",
       "adaptiveIcon": {
-        "foregroundImage": "./assets/logo_v1.png",
+        "foregroundImage": "./assets/adaptive-icon.png",
         "backgroundColor": "#0b1120"
       },
       "edgeToEdgeEnabled": true
@@ -27,7 +28,6 @@
       "favicon": "./assets/favicon.png"
     },
     "plugins": [
-      "@logrocket/react-native",
       [
         "expo-build-properties",
         {
@@ -41,7 +41,9 @@
       "policy": "sdkVersion"
     },
     "updates": {
-      "url": "https://u.expo.dev/a5830464-58a7-4737-9cc9-e5ecad2e4acf"
+      "url": "https://u.expo.dev/a5830464-58a7-4737-9cc9-e5ecad2e4acf",
+      "checkAutomatically": "ON_LOAD",
+      "fallbackToCacheTimeout": 0
     },
     "extra": {
       "eas": {

MobileApp/package-lock.json

@@ -8,7 +8,6 @@
       "name": "mobileapp_new",
       "version": "1.0.0",
       "dependencies": {
-        "@logrocket/react-native": "^2.3.2",
         "@react-native-async-storage/async-storage": "2.2.0",
         "@react-navigation/bottom-tabs": "^7.15.10",
         "@react-navigation/native": "^7.2.2",
@@ -32,6 +31,7 @@
         "react-native-screens": "~4.16.0",
         "react-native-svg": "15.12.1",
         "react-native-url-polyfill": "^3.0.0",
+        "react-native-webview": "^13.15.0",
         "zustand": "^5.0.12"
       },
       "devDependencies": {
@@ -2736,23 +2736,6 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
-    "node_modules/@logrocket/react-native": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/@logrocket/react-native/-/react-native-2.3.2.tgz",
-      "integrity": "sha512-Fi8H3HCTHj6NFcDGurxz/bXZ2A1fTCj6WVocRNmaqDSSIHL63xP01PyXqLT6xdTakO65Mlw7i37WxojLYuzgmQ==",
-      "license": "MIT",
-      "peerDependencies": {
-        "expo": ">=45.0.0",
-        "expo-build-properties": "*",
-        "react": "*",
-        "react-native": ">=0.60.0-rc.0 <1.0.x"
-      },
-      "peerDependenciesMeta": {
-        "expo": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@react-native-async-storage/async-storage": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/@react-native-async-storage/async-storage/-/async-storage-2.2.0.tgz",
@@ -8495,6 +8478,32 @@
         "react-native": "*"
       }
     },
+    "node_modules/react-native-webview": {
+      "version": "13.16.1",
+      "resolved": "https://registry.npmjs.org/react-native-webview/-/react-native-webview-13.16.1.tgz",
+      "integrity": "sha512-If0eHhoEdOYDcHsX+xBFwHMbWBGK1BvGDQDQdVkwtSIXiq1uiqjkpWVP2uQ1as94J0CzvFE9PUNDuhiX0Z6ubw==",
+      "license": "MIT",
+      "dependencies": {
+        "escape-string-regexp": "^4.0.0",
+        "invariant": "2.2.4"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
+    "node_modules/react-native-webview/node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/react-native/node_modules/@react-native/virtualized-lists": {
       "version": "0.81.5",
       "resolved": "https://registry.npmjs.org/@react-native/virtualized-lists/-/virtualized-lists-0.81.5.tgz",