From dcae9a69065faab64354491f8142e14e287e00c1 Mon Sep 17 00:00:00 2001
From: RandithaK <bharkula3@gmail.com>
Date: Sat, 15 Nov 2025 13:52:34 +0530
Subject: [PATCH 01/34] chore: trigger GitOps pipeline (empty commit)


From b410798ad5d5bcfc0c15cc341226af56eebbe6ee Mon Sep 17 00:00:00 2001
From: RandithaK <bharkula3@gmail.com>
Date: Sat, 15 Nov 2025 20:26:18 +0530
Subject: [PATCH 02/34] feat: enhance PayHere payment object with additional
 fields and logging

---
 src/services/payhereService.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/services/payhereService.ts b/src/services/payhereService.ts
index e40d9fc..27df5f6 100644
--- a/src/services/payhereService.ts
+++ b/src/services/payhereService.ts
@@ -125,9 +125,14 @@ class PayHereService {
         sandbox: payment.sandbox,
         orderId: payment.order_id,
         amount: payment.amount,
-        merchantId: payment.merchant_id
+        merchantId: payment.merchant_id,
+        currency: payment.currency,
+        hash: payment.hash,
+        customerEmail: payment.email
       });
 
+      console.log('Full PayHere payment object:', payment);
+
       // Setup callbacks
       window.payhere.onCompleted = function (paymentId: string) {
         console.log('Payment completed:', paymentId);

From d04c054b99257430514c7030cf169dd0e8ccc1ed Mon Sep 17 00:00:00 2001
From: RandithaK <bharkula3@gmail.com>
Date: Sat, 15 Nov 2025 23:26:50 +0530
Subject: [PATCH 03/34] feat: update AIChatWidget to use shared API client for
 chat requests and enhance error handling

---
 README.md                                   |  8 +++++++
 src/app/components/chatbot/AIChatWidget.tsx | 24 +++++++--------------
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/README.md b/README.md
index 1a202df..778fb9c 100644
--- a/README.md
+++ b/README.md
@@ -48,3 +48,11 @@ This repository contains the source code for the TechTorque 2025 customer and em
    npm run setup-hooks
    ```
    This configures automatic linting on commit and build checking on push. See [GIT_HOOKS.md](GIT_HOOKS.md) for details.
+
+   ### 🔌 Environment
+
+   - The frontend expects an API base to be available at runtime. You can configure this via the
+      `NEXT_PUBLIC_API_BASE_URL` environment variable. When not set, the runtime defaults to
+      `http://localhost:8080` (useful in development).
+
+   - The AI chat widget reaches the AI chat proxy at `/api/v1/ai/chat` (or `{{NEXT_PUBLIC_API_BASE_URL}}/api/v1/ai/chat` when the public API base is set). This ensures the frontend talks to the configured API gateway or the local Next.js proxy.
diff --git a/src/app/components/chatbot/AIChatWidget.tsx b/src/app/components/chatbot/AIChatWidget.tsx
index 9719b94..20d7081 100644
--- a/src/app/components/chatbot/AIChatWidget.tsx
+++ b/src/app/components/chatbot/AIChatWidget.tsx
@@ -1,6 +1,7 @@
 import React, { useState, useRef, useEffect, useCallback } from 'react';
 import { Sparkles, Bolt } from 'lucide-react';
 import Cookies from 'js-cookie';
+import apiClient from '@/lib/apiClient';
 
 // --- Theme Simulation & Constants ---
 const theme = {
@@ -26,7 +27,8 @@ interface ChatResponse {
     tool_executed?: string | null;
 }
 
-const API_ENDPOINT = 'http://localhost:8091/api/v1/ai/chat';
+// Use the shared API client with a baseURL of `${API_BASE_URL}/api/v1`.
+// Then call the `ai/chat` endpoint relative to that base.
 
 const AIChatWidget: React.FC = () => {
     // State Management
@@ -70,21 +72,8 @@ const AIChatWidget: React.FC = () => {
                 token: currentToken,
             };
 
-            const response = await fetch(API_ENDPOINT, {
-                method: 'POST',
-                headers: { 
-                    'Content-Type': 'application/json',
-                    'Authorization': `Bearer ${currentToken}`,
-                },
-                body: JSON.stringify(payload),
-            });
-
-            if (!response.ok) {
-                const errorData = await response.json();
-                throw new Error(errorData.detail || `HTTP Error ${response.status}`);
-            }
-
-            const data: ChatResponse = await response.json();
+            // Let the shared `apiClient` add auth headers via request interceptor
+            const { data } = await apiClient.post<ChatResponse>('/ai/chat', payload);
 
             let replyText = data.reply;
             if (data.tool_executed) {
@@ -98,6 +87,9 @@ const AIChatWidget: React.FC = () => {
         } catch (error: unknown) {
             console.error("Chat Error:", error);
             const errorMessage: Message = {
+                // If axios/our apiClient already stripped the token on 401 it
+                // will redirect to /auth/login via the interceptor. Otherwise
+                // check HTTP status if available.
                 text: (error instanceof Error && error.message.includes('401'))
                     ? "🔒 Your session has expired. Please log in again to continue chatting!"
                     : "⚠️ Oops! I'm having trouble connecting to my services right now. Please try again in a moment! 🔄",

From 53417f8b7544a1175fe7b9918af2ac17001948a8 Mon Sep 17 00:00:00 2001
From: ChamodiSandunika <chamodisandunika2002@gmail.com>
Date: Thu, 20 Nov 2025 16:00:53 +0530
Subject: [PATCH 04/34] feat: implement toast notifications across various
 pages and components

---
 src/app/dashboard/admin/reports/page.tsx      |  8 +-
 .../dashboard/admin/service-types/page.tsx    | 16 ++--
 src/app/dashboard/admin/users/page.tsx        | 20 +++--
 .../appointments/[appointmentId]/page.tsx     |  6 +-
 .../dashboard/projects/[projectId]/page.tsx   | 19 +++--
 src/app/dashboard/time-logs/page.tsx          |  8 +-
 .../dashboard/vehicles/[vehicleId]/page.tsx   |  8 +-
 src/app/dashboard/vehicles/page.tsx           |  6 +-
 src/app/globals.css                           | 16 ++++
 src/components/TimeTracker.tsx                |  6 +-
 src/components/Toast.tsx                      | 77 +++++++++++++++++++
 src/hooks/useToast.ts                         | 44 +++++++++++
 12 files changed, 204 insertions(+), 30 deletions(-)
 create mode 100644 src/components/Toast.tsx
 create mode 100644 src/hooks/useToast.ts

diff --git a/src/app/dashboard/admin/reports/page.tsx b/src/app/dashboard/admin/reports/page.tsx
index 4aab25f..774330a 100644
--- a/src/app/dashboard/admin/reports/page.tsx
+++ b/src/app/dashboard/admin/reports/page.tsx
@@ -4,9 +4,12 @@ import { useState } from 'react';
 import { adminService } from '@/services/adminService';
 import { ReportRequest } from '@/types/admin';
 import { useDashboard } from '@/app/contexts/DashboardContext';
+import { useToast } from '@/hooks/useToast';
+import { ToastContainer } from '@/components/Toast';
 
 export default function ReportsPage() {
   const { roles, loading: rolesLoading } = useDashboard();
+  const { toasts, success, error: showError, closeToast } = useToast();
   const [generating, setGenerating] = useState(false);
   const [reportType, setReportType] = useState<'SERVICE_PERFORMANCE' | 'REVENUE' | 'EMPLOYEE_PRODUCTIVITY' | 'CUSTOMER_SATISFACTION' | 'INVENTORY' | 'APPOINTMENT_SUMMARY'>('REVENUE');
   const [format, setFormat] = useState<'JSON' | 'PDF' | 'EXCEL' | 'CSV'>('PDF');
@@ -26,10 +29,10 @@ export default function ReportsPage() {
       const report = await adminService.generateReport(request);
       // In a real implementation, you would display or download the report
       console.log('Report generated:', report);
-      alert('Report generated successfully!');
+      success('Report generated successfully!');
     } catch (err) {
       console.error('Failed to generate report:', err);
-      alert('Failed to generate report');
+      showError('Failed to generate report');
     } finally {
       setGenerating(false);
     }
@@ -143,6 +146,7 @@ export default function ReportsPage() {
           </button>
         </div>
       </div>
+      <ToastContainer toasts={toasts} onClose={closeToast} />
     </div>
   );
 }
diff --git a/src/app/dashboard/admin/service-types/page.tsx b/src/app/dashboard/admin/service-types/page.tsx
index ca8ab4c..f3e02cd 100644
--- a/src/app/dashboard/admin/service-types/page.tsx
+++ b/src/app/dashboard/admin/service-types/page.tsx
@@ -4,9 +4,12 @@ import { useState, useEffect } from 'react';
 import { adminService } from '@/services/adminService';
 import { ServiceTypeResponse, CreateServiceTypeRequest, UpdateServiceTypeRequest } from '@/types/admin';
 import { useDashboard } from '@/app/contexts/DashboardContext';
+import { useToast } from '@/hooks/useToast';
+import { ToastContainer } from '@/components/Toast';
 
 export default function ServiceTypesPage() {
   const { roles, loading: rolesLoading } = useDashboard();
+  const { toasts, success, error: showError, closeToast } = useToast();
   const [serviceTypes, setServiceTypes] = useState<ServiceTypeResponse[]>([]);
   const [loading, setLoading] = useState(true);
   const [showModal, setShowModal] = useState(false);
@@ -80,7 +83,7 @@ export default function ServiceTypesPage() {
           active: editingService.active, // Keep existing active status
         };
         await adminService.updateServiceType(editingService.id, updateData);
-        alert('Service type updated successfully!');
+        success('Service type updated successfully!');
       } else {
         // Create new service - use CreateServiceTypeRequest format
         console.log('Creating service:', formData);
@@ -92,7 +95,7 @@ export default function ServiceTypesPage() {
           durationMinutes: formData.durationMinutes,
         };
         await adminService.createServiceType(createData);
-        alert('Service type created successfully!');
+        success('Service type created successfully!');
       }
       
       // Close modal first
@@ -106,7 +109,7 @@ export default function ServiceTypesPage() {
     } catch (err) {
       console.error('Failed to save service type:', err);
       const errorMessage = err instanceof Error ? err.message : 'Failed to save service type. Please try again.';
-      alert(errorMessage);
+      showError(errorMessage);
     }
   };
 
@@ -117,12 +120,12 @@ export default function ServiceTypesPage() {
 
     try {
       await adminService.removeServiceType(service.id);
-      alert('Service type deleted successfully!');
+      success('Service type deleted successfully!');
       await loadServiceTypes();
     } catch (err) {
       console.error('Failed to delete service type:', err);
       const errorMessage = err instanceof Error ? err.message : 'Failed to delete service type. Please try again.';
-      alert(errorMessage);
+      showError(errorMessage);
     }
   };
 
@@ -144,7 +147,7 @@ export default function ServiceTypesPage() {
       await loadServiceTypes();
     } catch (err) {
       console.error('Failed to toggle service status:', err);
-      alert('Failed to update service status. Please try again.');
+      showError('Failed to update service status. Please try again.');
     }
   };
 
@@ -395,6 +398,7 @@ export default function ServiceTypesPage() {
           </div>
         </div>
       )}
+      <ToastContainer toasts={toasts} onClose={closeToast} />
     </div>
   );
 }
diff --git a/src/app/dashboard/admin/users/page.tsx b/src/app/dashboard/admin/users/page.tsx
index c303696..2ef1da9 100644
--- a/src/app/dashboard/admin/users/page.tsx
+++ b/src/app/dashboard/admin/users/page.tsx
@@ -6,9 +6,12 @@ import { authService } from '@/services/authService';
 import { UserResponse } from '@/types/admin';
 import { CreateEmployeeRequest, CreateAdminRequest } from '@/types/api';
 import { useDashboard } from '@/app/contexts/DashboardContext';
+import { useToast } from '@/hooks/useToast';
+import { ToastContainer } from '@/components/Toast';
 
 export default function AdminUsersPage() {
   const { roles: currentUserRoles } = useDashboard();
+  const { toasts, success, error: showError, closeToast } = useToast();
   const [users, setUsers] = useState<UserResponse[]>([]);
   const [loading, setLoading] = useState(true);
   const [roleFilter, setRoleFilter] = useState<string>('ALL');
@@ -76,7 +79,7 @@ export default function AdminUsersPage() {
 
       setShowCreateModal(false);
       await loadUsers();
-      alert(`${createUserType === 'employee' ? 'Employee' : 'Admin'} created successfully!`);
+      success(`${createUserType === 'employee' ? 'Employee' : 'Admin'} created successfully!`);
     } catch (err) {
       console.error('Failed to create user:', err);
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -84,7 +87,7 @@ export default function AdminUsersPage() {
       const errorMessage = error?.response?.status === 403
         ? 'Permission denied. You do not have the required permissions to create this user type.'
         : error?.response?.data?.message || 'Failed to create user. Please try again.';
-      alert(errorMessage);
+      showError(errorMessage);
     }
   };
 
@@ -102,7 +105,7 @@ export default function AdminUsersPage() {
     try {
       // Validation: Ensure at least one role is selected
       if (editingRoles.length === 0) {
-        alert('Please select at least one role for the user.');
+        showError('Please select at least one role for the user.');
         return;
       }
 
@@ -110,11 +113,11 @@ export default function AdminUsersPage() {
       setEditingUserId(null);
       setEditingRoles([]);
       await loadUsers();
-      alert('Roles updated successfully!');
+      success('Roles updated successfully!');
     } catch (err) {
       console.error('Failed to update roles:', err);
       const errorMessage = err instanceof Error ? err.message : 'Failed to update roles. Please try again.';
-      alert(errorMessage);
+      showError(errorMessage);
     }
   };
 
@@ -122,7 +125,7 @@ export default function AdminUsersPage() {
     if (editingRoles.includes(role)) {
       // Prevent removing the last role
       if (editingRoles.length === 1) {
-        alert('A user must have at least one role.');
+        showError('A user must have at least one role.');
         return;
       }
       setEditingRoles(editingRoles.filter(r => r !== role));
@@ -144,11 +147,11 @@ export default function AdminUsersPage() {
     try {
       await adminService.updateUser(user.userId, { enabled: !user.enabled });
       await loadUsers();
-      alert(`User ${action}d successfully!`);
+      success(`User ${action}d successfully!`);
     } catch (err) {
       console.error(`Failed to ${action} user:`, err);
       const errorMessage = err instanceof Error ? err.message : `Failed to ${action} user. Please try again.`;
-      alert(errorMessage);
+      showError(errorMessage);
     }
   };
 
@@ -543,6 +546,7 @@ export default function AdminUsersPage() {
           </div>
         </div>
       )}
+      <ToastContainer toasts={toasts} onClose={closeToast} />
     </div>
   );
 }
diff --git a/src/app/dashboard/appointments/[appointmentId]/page.tsx b/src/app/dashboard/appointments/[appointmentId]/page.tsx
index af74cac..dd7d8f3 100644
--- a/src/app/dashboard/appointments/[appointmentId]/page.tsx
+++ b/src/app/dashboard/appointments/[appointmentId]/page.tsx
@@ -9,6 +9,8 @@ import type { UserResponse } from '@/types/admin'
 import type { CreateInvoiceDto, InvoiceItemDto } from '@/types/payment'
 import { useDashboard } from '@/app/contexts/DashboardContext'
 import TimeTracker from '@/components/TimeTracker'
+import { useToast } from '@/hooks/useToast'
+import { ToastContainer } from '@/components/Toast'
 
 interface StatusOption {
   value: AppointmentStatus
@@ -28,6 +30,7 @@ const STATUS_OPTIONS: StatusOption[] = [
 export default function AppointmentDetailPage() {
   const router = useRouter()
   const params = useParams<{ appointmentId: string }>()
+  const { toasts, success, error: showError, closeToast } = useToast()
   const appointmentId = params.appointmentId
   const { roles, profile } = useDashboard()
 
@@ -283,7 +286,7 @@ export default function AppointmentDetailPage() {
 
       const createdInvoice = await paymentService.createInvoice(invoiceData)
 
-      alert('Invoice generated successfully!')
+      success('Invoice generated successfully!')
       setShowInvoiceForm(false)
       setError(null)
 
@@ -823,6 +826,7 @@ export default function AppointmentDetailPage() {
       {loading && (
         <div className="mt-6 automotive-card p-4 text-sm theme-text-muted">Refreshing appointment data...</div>
       )}
+      <ToastContainer toasts={toasts} onClose={closeToast} />
     </div>
   )
  }
diff --git a/src/app/dashboard/projects/[projectId]/page.tsx b/src/app/dashboard/projects/[projectId]/page.tsx
index 22f6e27..45bf9c0 100644
--- a/src/app/dashboard/projects/[projectId]/page.tsx
+++ b/src/app/dashboard/projects/[projectId]/page.tsx
@@ -5,12 +5,15 @@ import { useParams, useRouter } from 'next/navigation';
 import { projectService } from '@/services/projectService';
 import { ProjectResponseDto, ProjectStatus } from '@/types/project';
 import { useDashboard } from '@/app/contexts/DashboardContext';
+import { useToast } from '@/hooks/useToast';
+import { ToastContainer } from '@/components/Toast';
 
 export default function ProjectDetailPage() {
   const params = useParams();
   const router = useRouter();
   const { profile, roles } = useDashboard();
   const projectId = params.projectId as string;
+  const { toasts, success, error: showError, closeToast } = useToast();
 
   const [project, setProject] = useState<ProjectResponseDto | null>(null);
   const [loading, setLoading] = useState(true);
@@ -42,10 +45,11 @@ export default function ProjectDetailPage() {
       setActionLoading(true);
       await projectService.approveQuote(projectId);
       await loadProject();
+      success('Quote approved successfully!');
     } catch (err) {
       console.error('Failed to approve quote:', err);
-      alert(err instanceof Error ? err.message : 'Failed to approve quote');
-    } finally {
+      showError(err instanceof Error ? err.message : 'Failed to approve quote');
+    } finally{
       setActionLoading(false);
     }
   };
@@ -59,7 +63,7 @@ export default function ProjectDetailPage() {
       await loadProject();
     } catch (err) {
       console.error('Failed to reject quote:', err);
-      alert(err instanceof Error ? err.message : 'Failed to reject quote');
+      showError(err instanceof Error ? err.message : 'Failed to reject quote');
     } finally {
       setActionLoading(false);
     }
@@ -72,10 +76,10 @@ export default function ProjectDetailPage() {
       setActionLoading(true);
       await projectService.adminApproveProject(projectId);
       await loadProject();
-      alert('Project approved successfully! Customer has been notified.');
+      success('Project approved successfully! Customer has been notified.');
     } catch (err) {
       console.error('Failed to approve project:', err);
-      alert(err instanceof Error ? err.message : 'Failed to approve project');
+      showError(err instanceof Error ? err.message : 'Failed to approve project');
     } finally {
       setActionLoading(false);
     }
@@ -93,10 +97,10 @@ export default function ProjectDetailPage() {
       setActionLoading(true);
       await projectService.adminRejectProject(projectId, reason || undefined);
       await loadProject();
-      alert('Project rejected. Customer has been notified.');
+      success('Project rejected. Customer has been notified.');
     } catch (err) {
       console.error('Failed to reject project:', err);
-      alert(err instanceof Error ? err.message : 'Failed to reject project');
+      showError(err instanceof Error ? err.message : 'Failed to reject project');
     } finally {
       setActionLoading(false);
     }
@@ -375,6 +379,7 @@ export default function ProjectDetailPage() {
           </div>
         </div>
       </div>
+      <ToastContainer toasts={toasts} onClose={closeToast} />
     </div>
   );
 }
diff --git a/src/app/dashboard/time-logs/page.tsx b/src/app/dashboard/time-logs/page.tsx
index 8f29ec2..e02ec6a 100644
--- a/src/app/dashboard/time-logs/page.tsx
+++ b/src/app/dashboard/time-logs/page.tsx
@@ -4,9 +4,12 @@ import { useState, useEffect } from 'react';
 import { timeLoggingService } from '@/services/timeLoggingService';
 import { TimeLogResponse, TimeLogRequest } from '@/types/timeLogging';
 import { useDashboard } from '@/app/contexts/DashboardContext';
+import { useToast } from '@/hooks/useToast';
+import { ToastContainer } from '@/components/Toast';
 
 export default function TimeLogsPage() {
   const { roles, loading: rolesLoading, profile } = useDashboard();
+  const { toasts, success, error: showError, closeToast } = useToast();
   const [allTimeLogs, setAllTimeLogs] = useState<TimeLogResponse[]>([]);
   const [loading, setLoading] = useState(true);
   const [showForm, setShowForm] = useState(false);
@@ -68,7 +71,7 @@ export default function TimeLogsPage() {
       await loadTimeLogs();
     } catch (err) {
       console.error('Failed to log time:', err);
-      alert(err instanceof Error ? err.message : 'Failed to log time');
+      showError(err instanceof Error ? err.message : 'Failed to log time');
     } finally {
       setSubmitting(false);
     }
@@ -82,7 +85,7 @@ export default function TimeLogsPage() {
       await loadTimeLogs();
     } catch (err) {
       console.error('Failed to delete time log:', err);
-      alert(err instanceof Error ? err.message : 'Failed to delete time log');
+      showError(err instanceof Error ? err.message : 'Failed to delete time log');
     }
   };
 
@@ -386,6 +389,7 @@ export default function TimeLogsPage() {
           </div>
         )}
       </div>
+      <ToastContainer toasts={toasts} onClose={closeToast} />
     </div>
   );
 }
diff --git a/src/app/dashboard/vehicles/[vehicleId]/page.tsx b/src/app/dashboard/vehicles/[vehicleId]/page.tsx
index 854f162..f5d1a79 100644
--- a/src/app/dashboard/vehicles/[vehicleId]/page.tsx
+++ b/src/app/dashboard/vehicles/[vehicleId]/page.tsx
@@ -4,11 +4,14 @@ import Image from 'next/image'
 import { useRouter, useParams } from 'next/navigation';
 import { vehicleService } from '@/services/vehicleService';
 import type { Vehicle, ServiceHistory } from '@/types/vehicle';
+import { useToast } from '@/hooks/useToast';
+import { ToastContainer } from '@/components/Toast';
 
 export default function VehicleDetailsPage() {
   const router = useRouter();
   const params = useParams();
   const vehicleId = params.vehicleId as string;
+  const { toasts, success, error: showError, closeToast } = useToast();
 
   const [vehicle, setVehicle] = useState<Vehicle | null>(null);
   const [serviceHistory, setServiceHistory] = useState<ServiceHistory[]>([]);
@@ -52,10 +55,10 @@ export default function VehicleDetailsPage() {
     try {
       const fileArray = Array.from(files);
       await vehicleService.uploadVehiclePhotos(vehicleId, fileArray);
-      alert('Photos uploaded successfully!');
+      success('Photos uploaded successfully!');
     } catch (err: unknown) {
       const errorMessage = (err as { response?: { data?: { message?: string } } })?.response?.data?.message || 'Failed to upload photos';
-      alert(errorMessage);
+      showError(errorMessage);
     } finally {
       setUploadingPhotos(false);
     }
@@ -87,6 +90,7 @@ export default function VehicleDetailsPage() {
 
   return (
     <div className="container mx-auto px-4 py-8 theme-bg-primary min-h-screen">
+      <ToastContainer toasts={toasts} onClose={closeToast} />
       <div className="flex items-center justify-between mb-6">
         <button
           onClick={() => router.push('/dashboard/vehicles')}
diff --git a/src/app/dashboard/vehicles/page.tsx b/src/app/dashboard/vehicles/page.tsx
index f9a3b5e..d687265 100644
--- a/src/app/dashboard/vehicles/page.tsx
+++ b/src/app/dashboard/vehicles/page.tsx
@@ -5,8 +5,11 @@ import VehicleCard from '@/app/components/VehicleCard';
 import AddVehicleForm from '@/app/components/AddVehicleForm';
 import EditVehicleForm from '@/app/components/EditVehicleForm';
 import type { VehicleListItem } from '@/types/vehicle';
+import { useToast } from '@/hooks/useToast';
+import { ToastContainer } from '@/components/Toast';
 
 export default function VehiclesPage() {
+  const { toasts, error: showError, closeToast } = useToast();
   const [vehicles, setVehicles] = useState<VehicleListItem[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -37,7 +40,7 @@ export default function VehiclesPage() {
       await loadVehicles();
     } catch (err: unknown) {
       const errorMessage = (err as { response?: { data?: { message?: string } } })?.response?.data?.message || 'Failed to delete vehicle';
-      alert(errorMessage);
+      showError(errorMessage);
     }
   };
 
@@ -61,6 +64,7 @@ export default function VehiclesPage() {
 
   return (
     <div className="container mx-auto px-4 py-8 theme-bg-primary min-h-screen">
+      <ToastContainer toasts={toasts} onClose={closeToast} />
       <div className="flex justify-between items-center mb-8">
         <div>
           <h1 className="text-3xl font-bold theme-text-primary mb-2">My Vehicles</h1>
diff --git a/src/app/globals.css b/src/app/globals.css
index 37d2d45..9e5869e 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -51,6 +51,22 @@ html.dark {
   --shadow-accent: rgba(56, 189, 248, 0.2);
 }
 
+/* Toast animations */
+@keyframes slide-in {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+.animate-slide-in {
+  animation: slide-in 0.3s ease-out;
+}
+
 /* Base styles */
 * {
   box-sizing: border-box;
diff --git a/src/components/TimeTracker.tsx b/src/components/TimeTracker.tsx
index eeeffe9..2798eed 100644
--- a/src/components/TimeTracker.tsx
+++ b/src/components/TimeTracker.tsx
@@ -2,6 +2,8 @@
 import { useEffect, useState } from 'react'
 import { appointmentService } from '@/services/appointmentService'
 import type { TimeSessionResponse } from '@/types/appointment'
+import { useToast } from '@/hooks/useToast'
+import { ToastContainer } from './Toast'
 
 interface TimeTrackerProps {
   appointmentId: string
@@ -10,6 +12,7 @@ interface TimeTrackerProps {
 }
 
 export default function TimeTracker({ appointmentId, onClockIn, onClockOut }: TimeTrackerProps) {
+  const { toasts, success, closeToast } = useToast()
   const [timeSession, setTimeSession] = useState<TimeSessionResponse | null>(null)
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState<string | null>(null)
@@ -78,7 +81,7 @@ export default function TimeTracker({ appointmentId, onClockIn, onClockOut }: Ti
       setError(null)
       const session = await appointmentService.clockOut(appointmentId)
       setTimeSession(session)
-      alert(`Work completed! ${session.hoursWorked?.toFixed(2)} hours logged.`)
+      success(`Work completed! ${session.hoursWorked?.toFixed(2)} hours logged.`)
       onClockOut?.()
     } catch (err: unknown) {
       const message = (err as { response?: { data?: { message?: string } } })?.response?.data?.message ||
@@ -99,6 +102,7 @@ export default function TimeTracker({ appointmentId, onClockIn, onClockOut }: Ti
   if (!timeSession || !timeSession.active) {
     return (
       <div>
+        <ToastContainer toasts={toasts} onClose={closeToast} />
         {error && (
           <div className="mb-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-300 px-4 py-3 rounded-lg text-sm">
             {error}
diff --git a/src/components/Toast.tsx b/src/components/Toast.tsx
new file mode 100644
index 0000000..265d0a2
--- /dev/null
+++ b/src/components/Toast.tsx
@@ -0,0 +1,77 @@
+'use client';
+
+import { useEffect } from 'react';
+import { X, CheckCircle, AlertCircle, Info, AlertTriangle } from 'lucide-react';
+
+export type ToastType = 'success' | 'error' | 'info' | 'warning';
+
+export interface ToastMessage {
+  id: string;
+  message: string;
+  type: ToastType;
+  duration?: number;
+}
+
+interface ToastProps {
+  toast: ToastMessage;
+  onClose: (id: string) => void;
+}
+
+const Toast = ({ toast, onClose }: ToastProps) => {
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      onClose(toast.id);
+    }, toast.duration || 5000);
+
+    return () => clearTimeout(timer);
+  }, [toast, onClose]);
+
+  const icons = {
+    success: <CheckCircle className="w-5 h-5" />,
+    error: <AlertCircle className="w-5 h-5" />,
+    info: <Info className="w-5 h-5" />,
+    warning: <AlertTriangle className="w-5 h-5" />,
+  };
+
+  const styles = {
+    success: 'bg-green-50 border-green-500 text-green-800 dark:bg-green-900/30 dark:text-green-400',
+    error: 'bg-red-50 border-red-500 text-red-800 dark:bg-red-900/30 dark:text-red-400',
+    info: 'bg-blue-50 border-blue-500 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400',
+    warning: 'bg-yellow-50 border-yellow-500 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400',
+  };
+
+  return (
+    <div
+      className={`flex items-center gap-3 p-4 rounded-lg border-l-4 shadow-lg ${styles[toast.type]} animate-slide-in mb-2`}
+    >
+      <div className="flex-shrink-0">{icons[toast.type]}</div>
+      <div className="flex-1 text-sm font-medium">{toast.message}</div>
+      <button
+        onClick={() => onClose(toast.id)}
+        className="flex-shrink-0 hover:opacity-70 transition-opacity"
+        aria-label="Close"
+      >
+        <X className="w-4 h-4" />
+      </button>
+    </div>
+  );
+};
+
+interface ToastContainerProps {
+  toasts: ToastMessage[];
+  onClose: (id: string) => void;
+}
+
+export const ToastContainer = ({ toasts, onClose }: ToastContainerProps) => {
+  return (
+    <div className="fixed top-4 right-4 z-50 flex flex-col gap-2 max-w-md w-full pointer-events-none">
+      <div className="pointer-events-auto">
+        {toasts.map((toast) => (
+          <Toast key={toast.id} toast={toast} onClose={onClose} />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Toast;
diff --git a/src/hooks/useToast.ts b/src/hooks/useToast.ts
new file mode 100644
index 0000000..4e7b12f
--- /dev/null
+++ b/src/hooks/useToast.ts
@@ -0,0 +1,44 @@
+'use client';
+
+import { useState, useCallback } from 'react';
+import type { ToastMessage, ToastType } from '../components/Toast';
+
+export const useToast = () => {
+  const [toasts, setToasts] = useState<ToastMessage[]>([]);
+
+  const showToast = useCallback((message: string, type: ToastType = 'info', duration?: number) => {
+    const id = Math.random().toString(36).substring(7);
+    const newToast: ToastMessage = { id, message, type, duration };
+    setToasts((prev) => [...prev, newToast]);
+  }, []);
+
+  const success = useCallback((message: string, duration?: number) => {
+    showToast(message, 'success', duration);
+  }, [showToast]);
+
+  const error = useCallback((message: string, duration?: number) => {
+    showToast(message, 'error', duration);
+  }, [showToast]);
+
+  const info = useCallback((message: string, duration?: number) => {
+    showToast(message, 'info', duration);
+  }, [showToast]);
+
+  const warning = useCallback((message: string, duration?: number) => {
+    showToast(message, 'warning', duration);
+  }, [showToast]);
+
+  const closeToast = useCallback((id: string) => {
+    setToasts((prev) => prev.filter((toast) => toast.id !== id));
+  }, []);
+
+  return {
+    toasts,
+    showToast,
+    success,
+    error,
+    info,
+    warning,
+    closeToast,
+  };
+};

From a4be154eeda9e730fff04454ad76039688081c20 Mon Sep 17 00:00:00 2001
From: Pramudi Samarawickrama <pramupiyumika@gmail.com>
Date: Thu, 20 Nov 2025 17:20:47 +0530
Subject: [PATCH 05/34] feat: enhance light and dark theme color variables for
 improved UI consistency

---
 src/app/globals.css | 564 ++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 549 insertions(+), 15 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 37d2d45..3ceb91b 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -2,28 +2,68 @@
 
 /* CSS Variables for theme colors - Automotive Theme */
 :root {
-  /* Light theme colors - Automotive inspired */
+  /* Light theme colors - Automotive inspired with improved consistency */
   --bg-primary: #ffffff;
   --bg-secondary: #f8fafc;
   --bg-tertiary: #f1f5f9;
+  --bg-hover: #e2e8f0;
   --bg-accent: linear-gradient(135deg, #1e293b 0%, #334155 100%);
   --bg-secondary-translucent: rgba(248, 250, 252, 0.85);
+  
+  /* Text colors with clear hierarchy */
   --text-primary: #0f172a;
-  --text-secondary: #334155;
+  --text-secondary: #475569;
   --text-muted: #64748b;
+  
+  /* Border colors */
   --border-color: #e2e8f0;
+  --border-hover: #cbd5e1;
+  
+  /* Primary accent colors */
   --accent-primary: #0ea5e9;
   --accent-hover: #0284c7;
   --accent-secondary: #f59e0b;
   --accent-secondary-hover: #d97706;
+  
+  /* Status colors - Light mode optimized */
   --success: #10b981;
   --success-hover: #059669;
+  --success-bg: #d1fae5;
+  --success-border: #6ee7b7;
+  --success-text: #065f46;
+  
   --warning: #f59e0b;
   --warning-hover: #d97706;
+  --warning-bg: #fef3c7;
+  --warning-border: #fcd34d;
+  --warning-text: #92400e;
+  
   --danger: #ef4444;
   --danger-hover: #dc2626;
-  --shadow-color: rgba(15, 23, 42, 0.05);
-  --shadow-accent: rgba(14, 165, 233, 0.2);
+  --danger-bg: #fee2e2;
+  --danger-border: #fca5a5;
+  --danger-text: #991b1b;
+  
+  --info: #3b82f6;
+  --info-hover: #2563eb;
+  --info-bg: #dbeafe;
+  --info-border: #93c5fd;
+  --info-text: #1e3a8a;
+  
+  /* Neutral shades for consistent UI elements */
+  --gray-50: #f9fafb;
+  --gray-100: #f3f4f6;
+  --gray-200: #e5e7eb;
+  --gray-300: #d1d5db;
+  --gray-400: #9ca3af;
+  --gray-500: #6b7280;
+  --gray-600: #4b5563;
+  --gray-700: #374151;
+  --gray-800: #1f2937;
+  
+  /* Shadows */
+  --shadow-color: rgba(15, 23, 42, 0.08);
+  --shadow-accent: rgba(14, 165, 233, 0.25);
 }
 
 /* Dark theme colors - Automotive Night Mode */
@@ -31,22 +71,62 @@ html.dark {
   --bg-primary: #0f172a;
   --bg-secondary: #1e293b;
   --bg-tertiary: #111c32;
+  --bg-hover: #334155;
   --bg-accent: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
   --bg-secondary-translucent: rgba(30, 41, 59, 0.85);
+  
+  /* Text colors with clear hierarchy */
   --text-primary: #f8fafc;
   --text-secondary: #cbd5e1;
   --text-muted: #94a3b8;
+  
+  /* Border colors */
   --border-color: #334155;
+  --border-hover: #475569;
+  
+  /* Primary accent colors */
   --accent-primary: #38bdf8;
   --accent-hover: #0ea5e9;
   --accent-secondary: #fbbf24;
   --accent-secondary-hover: #f59e0b;
+  
+  /* Status colors - Dark mode optimized */
   --success: #22d3ee;
   --success-hover: #06b6d4;
+  --success-bg: rgba(34, 211, 238, 0.1);
+  --success-border: rgba(34, 211, 238, 0.3);
+  --success-text: #5eead4;
+  
   --warning: #fbbf24;
   --warning-hover: #f59e0b;
+  --warning-bg: rgba(251, 191, 36, 0.1);
+  --warning-border: rgba(251, 191, 36, 0.3);
+  --warning-text: #fcd34d;
+  
   --danger: #f87171;
   --danger-hover: #ef4444;
+  --danger-bg: rgba(248, 113, 113, 0.1);
+  --danger-border: rgba(248, 113, 113, 0.3);
+  --danger-text: #fca5a5;
+  
+  --info: #60a5fa;
+  --info-hover: #3b82f6;
+  --info-bg: rgba(96, 165, 250, 0.1);
+  --info-border: rgba(96, 165, 250, 0.3);
+  --info-text: #93c5fd;
+  
+  /* Neutral shades for consistent UI elements */
+  --gray-50: #1e293b;
+  --gray-100: #334155;
+  --gray-200: #475569;
+  --gray-300: #64748b;
+  --gray-400: #94a3b8;
+  --gray-500: #cbd5e1;
+  --gray-600: #e2e8f0;
+  --gray-700: #f1f5f9;
+  --gray-800: #f8fafc;
+  
+  /* Shadows */
   --shadow-color: rgba(0, 0, 0, 0.6);
   --shadow-accent: rgba(56, 189, 248, 0.2);
 }
@@ -68,11 +148,391 @@ body {
 .theme-bg-primary { background-color: var(--bg-primary); }
 .theme-bg-secondary { background-color: var(--bg-secondary); }
 .theme-bg-tertiary { background-color: var(--bg-tertiary); }
+.theme-bg-hover { background-color: var(--bg-hover); }
 .theme-text-primary { color: var(--text-primary); }
 .theme-text-secondary { color: var(--text-secondary); }
 .theme-text-muted { color: var(--text-muted); }
 .theme-border { border-color: var(--border-color); }
 
+/* Gray utility classes for consistency */
+.theme-bg-gray-50 { background-color: var(--gray-50); }
+.theme-bg-gray-100 { background-color: var(--gray-100); }
+.theme-bg-gray-200 { background-color: var(--gray-200); }
+.theme-text-gray-400 { color: var(--gray-400); }
+.theme-text-gray-500 { color: var(--gray-500); }
+.theme-text-gray-600 { color: var(--gray-600); }
+.theme-border-gray-200 { border-color: var(--gray-200); }
+.theme-border-gray-300 { border-color: var(--gray-300); }
+.theme-border-gray-700 { border-color: var(--gray-700); }
+
+/* Alert/Message styles - Status colors */
+.theme-alert-success {
+  background-color: var(--success-bg);
+  border: 1px solid var(--success-border);
+  color: var(--success-text);
+  padding: 1rem;
+  border-radius: 0.5rem;
+}
+
+.theme-alert-warning {
+  background-color: var(--warning-bg);
+  border: 1px solid var(--warning-border);
+  color: var(--warning-text);
+  padding: 1rem;
+  border-radius: 0.5rem;
+}
+
+.theme-alert-danger {
+  background-color: var(--danger-bg);
+  border: 1px solid var(--danger-border);
+  color: var(--danger-text);
+  padding: 1rem;
+  border-radius: 0.5rem;
+}
+
+.theme-alert-info {
+  background-color: var(--info-bg);
+  border: 1px solid var(--info-border);
+  color: var(--info-text);
+  padding: 1rem;
+  border-radius: 0.5rem;
+}
+
+/* Badge/Status pill styles */
+.theme-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.25rem 0.75rem;
+  border-radius: 9999px;
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+.theme-badge-success {
+  background-color: var(--success-bg);
+  color: var(--success-text);
+}
+
+.theme-badge-warning {
+  background-color: var(--warning-bg);
+  color: var(--warning-text);
+}
+
+.theme-badge-danger {
+  background-color: var(--danger-bg);
+  color: var(--danger-text);
+}
+
+.theme-badge-info {
+  background-color: var(--info-bg);
+  color: var(--info-text);
+}
+
+/* Status text colors */
+.theme-text-success { color: var(--success-text); }
+.theme-text-warning { color: var(--warning-text); }
+.theme-text-danger { color: var(--danger-text); }
+.theme-text-info { color: var(--info-text); }
+
+/* STANDARDIZED PAGE LAYOUT CLASSES */
+.dashboard-page-container {
+  min-height: 100vh;
+  background-color: var(--bg-primary);
+  padding: 2rem 1rem;
+}
+
+@media (min-width: 768px) {
+  .dashboard-page-container {
+    padding: 2rem;
+  }
+}
+
+.dashboard-page-header {
+  margin-bottom: 2rem;
+}
+
+.dashboard-page-title {
+  font-size: 1.875rem;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin-bottom: 0.5rem;
+}
+
+.dashboard-page-subtitle {
+  color: var(--text-muted);
+  font-size: 0.875rem;
+}
+
+.dashboard-content-card {
+  background-color: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 1rem;
+  padding: 1.5rem;
+  box-shadow: 0 1px 3px var(--shadow-color);
+}
+
+/* STANDARDIZED FILTER/TAB BUTTON STYLES */
+.filter-tabs-container {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+  margin-bottom: 1.5rem;
+}
+
+.filter-tab {
+  padding: 0.625rem 1.25rem;
+  border-radius: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  cursor: pointer;
+  border: 1px solid transparent;
+  white-space: nowrap;
+}
+
+.filter-tab-active {
+  background: linear-gradient(135deg, #0CA0E4 0%, #0CA0E4  100%);
+  color: white;
+  border-color: #0CA0E4;
+  font-weight: 600;
+  box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.3), 0 2px 4px -1px rgba(59, 130, 246, 0.2);
+}
+
+.filter-tab-inactive {
+  background-color: var(--bg-secondary);
+  color: var(--text-secondary);
+  border-color: var(--border-color);
+}
+
+.filter-tab-inactive:hover {
+  background-color: #0ca0e483;
+  color: #ffffff;
+  border-color: #0ca0e4b7;
+}
+
+:root.dark .filter-tab-inactive:hover {
+  background-color: rgba(59, 130, 246, 0.1);
+  color: #0CA0E4;
+  border-color: #0CA0E4;
+}
+
+/* Legacy support - keep for backward compatibility */
+.theme-filter-active {
+  background: linear-gradient(135deg, #0CA0E4 0%, #0CA0E4 100%);
+  color: white;
+  border: 1px solid #0CA0E4;
+  font-weight: 600;
+  box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.3), 0 2px 4px -1px rgba(59, 130, 246, 0.2);
+}
+
+.theme-filter-inactive {
+  background-color: var(--bg-secondary);
+  color: var(--text-secondary);
+  border: 1px solid var(--border-color);
+}
+
+.theme-filter-inactive:hover {
+  background-color: #0CA0E4;
+  color: #0CA0E4;
+  border-color: #0CA0E4;
+}
+
+:root.dark .theme-filter-inactive:hover {
+  background-color:#0CA0E4;
+  color: #0CA0E4;
+  border-color: #60a5fa;
+}
+
+/* Action button variants */
+.theme-button-action {
+  background: var(--accent-primary);
+  color: white;
+  border: none;
+  padding: 0.75rem 1.5rem;
+  border-radius: 0.5rem;
+  font-weight: 600;
+  font-size: 0.875rem;
+  transition: all 0.2s ease;
+  cursor: pointer;
+}
+
+.theme-button-action:hover {
+  background: var(--accent-hover);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px var(--shadow-accent);
+}
+
+.theme-button-action:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none;
+}
+
+/* STANDARDIZED BUTTON STYLES */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.75rem 1.5rem;
+  border-radius: 0.5rem;
+  font-weight: 600;
+  font-size: 0.875rem;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  cursor: pointer;
+  border: 1px solid transparent;
+  white-space: nowrap;
+}
+
+.btn-primary {
+  background: var(--accent-primary);
+  color: white;
+  border-color: var(--accent-primary);
+}
+
+.btn-primary:hover {
+  background: var(--accent-hover);
+  border-color: var(--accent-hover);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px var(--shadow-accent);
+}
+
+.btn-secondary {
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+  border-color: var(--border-color);
+}
+
+.btn-secondary:hover {
+  background: var(--bg-tertiary);
+  border-color: var(--border-hover);
+}
+
+.btn-danger {
+  background: var(--danger);
+  color: white;
+  border-color: var(--danger);
+}
+
+.btn-danger:hover {
+  background: var(--danger-hover);
+  border-color: var(--danger-hover);
+}
+
+.btn-success {
+  background: var(--success);
+  color: white;
+  border-color: var(--success);
+}
+
+.btn-success:hover {
+  background: var(--success-hover);
+  border-color: var(--success-hover);
+}
+
+/* STANDARDIZED EMPTY STATE STYLES */
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 4rem 2rem;
+  text-align: center;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 1rem;
+}
+
+.empty-state-icon {
+  width: 4rem;
+  height: 4rem;
+  color: var(--text-muted);
+  margin-bottom: 1rem;
+}
+
+.empty-state-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: 0.5rem;
+}
+
+.empty-state-description {
+  color: var(--text-muted);
+  margin-bottom: 1.5rem;
+}
+
+/* STANDARDIZED STAT CARD STYLES */
+.stat-card {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 0.75rem;
+  padding: 1.25rem;
+  transition: all 0.2s ease;
+}
+
+.stat-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px var(--shadow-color);
+}
+
+.stat-card-label {
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-muted);
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+}
+
+.stat-card-value {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--text-primary);
+}
+
+/* STANDARDIZED TABLE STYLES */
+.data-table {
+  width: 100%;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 0.75rem;
+  overflow: hidden;
+}
+
+.data-table-header {
+  background: var(--bg-tertiary);
+  border-bottom: 1px solid var(--border-color);
+}
+
+.data-table-header th {
+  padding: 0.75rem 1.5rem;
+  text-align: left;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-muted);
+}
+
+.data-table-body tr {
+  border-bottom: 1px solid var(--border-color);
+  transition: background-color 0.15s ease;
+}
+
+.data-table-body tr:last-child {
+  border-bottom: none;
+}
+
+.data-table-body tr:hover {
+  background: var(--bg-hover);
+}
+
+.data-table-body td {
+  padding: 1rem 1.5rem;
+  color: var(--text-secondary);
+  font-size: 0.875rem;
+}
+
 /* Enhanced form styles */
 .theme-input {
   background-color: var(--bg-primary);
@@ -94,6 +554,65 @@ body {
   color: var(--text-muted);
 }
 
+/* Form input variants for better visibility */
+.form-input,
+.form-select,
+.form-textarea {
+  width: 100%;
+  padding: 0.625rem 0.75rem;
+  border: 1px solid var(--border-color);
+  border-radius: 0.5rem;
+  background-color: var(--bg-primary);
+  color: var(--text-primary);
+  transition: all 0.2s ease;
+  font-size: 0.875rem;
+}
+
+.form-input:focus,
+.form-select:focus,
+.form-textarea:focus {
+  outline: none;
+  border-color: var(--accent-primary);
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+.form-input::placeholder,
+.form-textarea::placeholder {
+  color: var(--text-muted);
+}
+
+.form-input:disabled,
+.form-select:disabled,
+.form-textarea:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  background-color: var(--bg-tertiary);
+}
+
+/* Modal/Dialog styles */
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(4px);
+  z-index: 50;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+}
+
+.modal-content {
+  background-color: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 1rem;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
+  max-width: 42rem;
+  width: 100%;
+  max-height: 90vh;
+  overflow-y: auto;
+}
+
 /* Enhanced button styles */
 .theme-button-primary {
   background: linear-gradient(135deg, var(--accent-primary), var(--accent-hover));
@@ -247,11 +766,11 @@ html.dark .bg-grid-pattern {
 
 
 .automotive-card {
-  background: var(--bg-primary);
+  background: var(--bg-secondary);
   border: 1px solid var(--border-color);
-  border-radius: 20px;
-  box-shadow: 0 4px 15px var(--shadow-color);
-  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  border-radius: 16px;
+  box-shadow: 0 2px 8px var(--shadow-color);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   position: relative;
   overflow: hidden;
 }
@@ -262,7 +781,7 @@ html.dark .bg-grid-pattern {
   top: 0;
   left: 0;
   right: 0;
-  height: 4px;
+  height: 3px;
   background: linear-gradient(90deg, 
     var(--accent-primary), 
     var(--accent-secondary), 
@@ -277,11 +796,24 @@ html.dark .bg-grid-pattern {
 }
 
 .automotive-card:hover {
-  transform: translateY(-5px);
-  box-shadow: 
-    0 20px 40px var(--shadow-color),
-    0 0 30px var(--shadow-accent);
-  border-color: var(--accent-primary);
+  transform: translateY(-2px);
+  box-shadow: 0 8px 20px var(--shadow-color);
+  border-color: var(--border-hover);
+}
+
+/* Card without hover effects for empty states */
+.automotive-card-static {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 16px;
+  box-shadow: 0 2px 8px var(--shadow-color);
+  position: relative;
+  overflow: hidden;
+}
+
+/* Automotive accent gradient */
+.automotive-accent {
+  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
 }
 
 /* New Tech Stack Item style */
@@ -311,9 +843,11 @@ html.dark .bg-grid-pattern {
   top: 0;
   z-index: 50;
   width: 100%;
-  background: var(--bg-secondary-translucent);
+  background: var(--bg-secondary);
+  border-bottom: 1px solid var(--border-color);
   backdrop-filter: blur(10px);
   transition: all 0.3s ease-in-out;
+  box-shadow: 0 1px 3px var(--shadow-color);
 }
 
 /* How It Works - Timeline */

From 2a97e983d0801f683c5b75ffb289567fa480548b Mon Sep 17 00:00:00 2001
From: Pramudi Samarawickrama <pramupiyumika@gmail.com>
Date: Thu, 20 Nov 2025 17:21:53 +0530
Subject: [PATCH 06/34] style: update error message styling for consistency
 across components

---
 src/app/admin/page.tsx                            | 6 +++---
 src/app/auth/forgot-password/page.tsx             | 2 +-
 src/app/auth/login/page.tsx                       | 2 +-
 src/app/auth/resend-verification/page.tsx         | 2 +-
 src/app/auth/reset-password/ResetPasswordForm.tsx | 2 +-
 src/app/components/NotificationBell.tsx           | 2 +-
 6 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx
index 99eaafe..27a685d 100644
--- a/src/app/admin/page.tsx
+++ b/src/app/admin/page.tsx
@@ -108,13 +108,13 @@ export default function AdminDashboard() {
         </div>
 
         {error && (
-          <div className="mb-6 p-4 bg-red-50 dark:bg-red-900/20 rounded-lg border border-red-200 dark:border-red-800">
-            <p className="text-sm text-red-600 dark:text-red-400">{error}</p>
+          <div className="mb-6 theme-alert-danger">
+            <p className="text-sm">{error}</p>
           </div>
         )}
 
         {success && (
-          <div className="mb-6 p-4 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800">
+          <div className="mb-6 theme-alert-success">
             <p className="text-sm text-green-600 dark:text-green-400">
               {success}
             </p>
diff --git a/src/app/auth/forgot-password/page.tsx b/src/app/auth/forgot-password/page.tsx
index 139d021..bd72570 100644
--- a/src/app/auth/forgot-password/page.tsx
+++ b/src/app/auth/forgot-password/page.tsx
@@ -74,7 +74,7 @@ export default function ForgotPasswordPage() {
                 </div>
                 {error && (
                   <div className="mb-6 p-4 bg-red-50 dark:bg-red-900/20 rounded-lg border border-red-200 dark:border-red-800">
-                    <p className="text-sm text-red-600 dark:text-red-400">{error}</p>
+                    <p className="text-sm theme-text-danger">{error}</p>
                   </div>
                 )}
                 <form className="space-y-6" onSubmit={handleSubmit}>
diff --git a/src/app/auth/login/page.tsx b/src/app/auth/login/page.tsx
index ffc6ba1..f16b2f4 100644
--- a/src/app/auth/login/page.tsx
+++ b/src/app/auth/login/page.tsx
@@ -160,7 +160,7 @@ export default function LoginPage() {
                 </form>
                 {error && (
                   <div role="alert" className="mt-4 p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
-                    <p className="text-sm text-red-600 dark:text-red-400 mb-2">{error}</p>
+                    <p className="text-sm theme-text-danger mb-2">{error}</p>
                     {unverifiedEmail && (
                       <Link 
                         href={`/auth/resend-verification?email=${encodeURIComponent(unverifiedEmail)}`}
diff --git a/src/app/auth/resend-verification/page.tsx b/src/app/auth/resend-verification/page.tsx
index 683ced8..d5612a5 100644
--- a/src/app/auth/resend-verification/page.tsx
+++ b/src/app/auth/resend-verification/page.tsx
@@ -112,7 +112,7 @@ function ResendVerificationContent() {
 
       {error && (
         <div role="alert" className="mt-4 p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
-          <p className="text-sm text-red-600 dark:text-red-400">{error}</p>
+          <p className="text-sm theme-text-danger">{error}</p>
         </div>
       )}
 
diff --git a/src/app/auth/reset-password/ResetPasswordForm.tsx b/src/app/auth/reset-password/ResetPasswordForm.tsx
index e8e7a1f..ed32f49 100644
--- a/src/app/auth/reset-password/ResetPasswordForm.tsx
+++ b/src/app/auth/reset-password/ResetPasswordForm.tsx
@@ -143,7 +143,7 @@ export default function ResetPasswordForm() {
 
           {error && (
             <div className="mb-6 p-4 bg-red-50 dark:bg-red-900/20 rounded-lg border border-red-200 dark:border-red-800">
-              <p className="text-sm text-red-600 dark:text-red-400">{error}</p>
+              <p className="text-sm theme-text-danger">{error}</p>
             </div>
           )}
 
diff --git a/src/app/components/NotificationBell.tsx b/src/app/components/NotificationBell.tsx
index 39a3407..d80f410 100644
--- a/src/app/components/NotificationBell.tsx
+++ b/src/app/components/NotificationBell.tsx
@@ -102,7 +102,7 @@ export default function NotificationBell() {
           {loading ? (
             <div className="py-8 text-center theme-text-muted text-sm">Loading notifications...</div>
           ) : error ? (
-            <div className="py-8 text-center text-red-500 text-sm">{error}</div>
+            <div className="py-8 text-center theme-text-danger text-sm">{error}</div>
           ) : notifications.length === 0 ? (
             <div className="py-8 text-center theme-text-muted text-sm">No notifications yet.</div>
           ) : (

From 06eb1d2e874d1f4a1211d80eadf5f5509be91342 Mon Sep 17 00:00:00 2001
From: Pramudi Samarawickrama <pramupiyumika@gmail.com>
Date: Thu, 20 Nov 2025 17:25:13 +0530
Subject: [PATCH 07/34] style: unify error message styling across dashboards
 and payment gateway components

---
 src/app/components/PaymentGateway.tsx               | 12 ++++++------
 src/app/components/VehicleCard.tsx                  |  2 +-
 src/app/components/dashboards/AdminDashboard.tsx    |  2 +-
 src/app/components/dashboards/CustomerDashboard.tsx |  2 +-
 src/app/components/dashboards/EmployeeDashboard.tsx |  2 +-
 5 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/app/components/PaymentGateway.tsx b/src/app/components/PaymentGateway.tsx
index 40649ca..0343e1d 100644
--- a/src/app/components/PaymentGateway.tsx
+++ b/src/app/components/PaymentGateway.tsx
@@ -123,14 +123,14 @@ export default function PaymentGateway({
       </div>
 
       {error && (
-        <div className="mb-6 p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
-          <p className="text-sm text-red-600 dark:text-red-400">{error}</p>
+        <div className="mb-6 theme-alert-danger">
+          <p className="text-sm">{error}</p>
         </div>
       )}
 
       {success && (
-        <div className="mb-6 p-4 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg">
-          <p className="text-sm text-green-600 dark:text-green-400 font-semibold">Payment completed successfully!</p>
+        <div className="mb-6 theme-alert-success">
+          <p className="text-sm font-semibold">Payment completed successfully!</p>
         </div>
       )}
 
@@ -144,8 +144,8 @@ export default function PaymentGateway({
         {loading ? 'Processing...' : success ? 'Payment Completed' : 'Pay with PayHere'}
       </button>
 
-      <div className="mt-4 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
-        <p className="text-xs theme-text-muted text-center">
+      <div className="mt-4 theme-alert-info">
+        <p className="text-xs text-center">
           Secure payment powered by PayHere. Your payment information is encrypted and secure.
         </p>
       </div>
diff --git a/src/app/components/VehicleCard.tsx b/src/app/components/VehicleCard.tsx
index fcdac0f..d72a5fb 100644
--- a/src/app/components/VehicleCard.tsx
+++ b/src/app/components/VehicleCard.tsx
@@ -10,7 +10,7 @@ interface VehicleCardProps {
 
 export default function VehicleCard({ vehicle, onDelete, onEdit }: VehicleCardProps) {
   return (
-    <div className="automotive-card p-6 hover:scale-[1.02] transition-transform">
+    <div className="automotive-card p-6 hover:scale-[1.02] hover:shadow-lg transition-all">
       <div className="flex justify-between items-start mb-4">
         <div>
           <h3 className="text-xl font-bold theme-text-primary mb-1">
diff --git a/src/app/components/dashboards/AdminDashboard.tsx b/src/app/components/dashboards/AdminDashboard.tsx
index 818b715..c6bf952 100644
--- a/src/app/components/dashboards/AdminDashboard.tsx
+++ b/src/app/components/dashboards/AdminDashboard.tsx
@@ -57,7 +57,7 @@ const AdminDashboard: React.FC<AdminDashboardProps> = ({ profile }) => {
       </div>
 
       {error && (
-        <div className="mb-6 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-300 px-4 py-3 rounded-lg">
+        <div className="theme-alert-danger mb-6">
           {error}
         </div>
       )}
diff --git a/src/app/components/dashboards/CustomerDashboard.tsx b/src/app/components/dashboards/CustomerDashboard.tsx
index 00b8bd7..3b2da0a 100644
--- a/src/app/components/dashboards/CustomerDashboard.tsx
+++ b/src/app/components/dashboards/CustomerDashboard.tsx
@@ -75,7 +75,7 @@ const CustomerDashboard: React.FC<CustomerDashboardProps> = ({ profile }) => {
       </div>
 
       {error && (
-        <div className="mb-6 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-300 px-4 py-3 rounded-lg">
+        <div className="theme-alert-danger mb-6">
           {error}
         </div>
       )}
diff --git a/src/app/components/dashboards/EmployeeDashboard.tsx b/src/app/components/dashboards/EmployeeDashboard.tsx
index 4013d55..9e56ece 100644
--- a/src/app/components/dashboards/EmployeeDashboard.tsx
+++ b/src/app/components/dashboards/EmployeeDashboard.tsx
@@ -94,7 +94,7 @@ const EmployeeDashboard: React.FC<EmployeeDashboardProps> = ({ profile }) => {
       </div>
 
       {error && (
-        <div className="mb-6 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-300 px-4 py-3 rounded-lg">
+        <div className="theme-alert-danger mb-6">
           {error}
         </div>
       )}

From 60270fc598f0ca657d761e3ccb104c67e3d28d57 Mon Sep 17 00:00:00 2001
From: Pramudi Samarawickrama <pramupiyumika@gmail.com>
Date: Thu, 20 Nov 2025 17:27:21 +0530
Subject: [PATCH 08/34] style: Refactor dashboard components for improved
 styling and consistency

---
 src/app/dashboard/admin/audit-logs/page.tsx   | 10 +--
 src/app/dashboard/admin/page.tsx              | 74 +++++++++----------
 src/app/dashboard/admin/reports/page.tsx      | 14 ++--
 .../dashboard/admin/service-types/page.tsx    | 20 ++---
 src/app/dashboard/admin/users/page.tsx        | 68 ++++++++---------
 .../appointments/[appointmentId]/page.tsx     | 10 +--
 .../appointments/availability/page.tsx        |  2 +-
 src/app/dashboard/appointments/book/page.tsx  |  6 +-
 src/app/dashboard/appointments/page.tsx       | 16 ++--
 src/app/dashboard/invoices/page.tsx           | 36 ++++-----
 src/app/dashboard/layout.tsx                  | 12 +--
 src/app/dashboard/notifications/page.tsx      | 22 +++---
 12 files changed, 145 insertions(+), 145 deletions(-)

diff --git a/src/app/dashboard/admin/audit-logs/page.tsx b/src/app/dashboard/admin/audit-logs/page.tsx
index 699f8f9..c6b4b88 100644
--- a/src/app/dashboard/admin/audit-logs/page.tsx
+++ b/src/app/dashboard/admin/audit-logs/page.tsx
@@ -52,7 +52,7 @@ export default function AuditLogsPage() {
       <div className="max-w-7xl mx-auto p-6">
         <div className="animate-pulse space-y-3">
           {[...Array(10)].map((_, i) => (
-            <div key={i} className="h-20 bg-gray-200 dark:bg-gray-800 rounded-lg"></div>
+            <div key={i} className="h-20 theme-bg-tertiary rounded-lg"></div>
           ))}
         </div>
       </div>
@@ -94,10 +94,10 @@ export default function AuditLogsPage() {
         </div>
       )}
 
-      <div className="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/50 overflow-hidden">
+      <div className="dashboard-content-card overflow-hidden">
         <div className="overflow-x-auto">
           <table className="w-full">
-            <thead className="bg-gray-50 dark:bg-gray-800/50">
+            <thead className="theme-bg-tertiary">
               <tr>
                 <th className="px-6 py-3 text-left text-xs font-semibold theme-text-muted uppercase">Timestamp</th>
                 <th className="px-6 py-3 text-left text-xs font-semibold theme-text-muted uppercase">User</th>
@@ -110,7 +110,7 @@ export default function AuditLogsPage() {
               {logs.length === 0 ? (
                 <tr>
                   <td colSpan={5} className="px-6 py-12 text-center">
-                    <svg className="mx-auto w-12 h-12 text-gray-400 dark:text-gray-600 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <svg className="mx-auto w-12 h-12 theme-text-muted mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                     </svg>
                     <p className="text-sm theme-text-muted">
@@ -123,7 +123,7 @@ export default function AuditLogsPage() {
                 </tr>
               ) : (
                 logs.map((log) => (
-                  <tr key={log.logId} className="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
+                  <tr key={log.logId} className="hover:theme-bg-hover transition-colors">
                     <td className="px-6 py-4 whitespace-nowrap text-sm theme-text-secondary">
                       {formatDateTime(log.timestamp)}
                     </td>
diff --git a/src/app/dashboard/admin/page.tsx b/src/app/dashboard/admin/page.tsx
index 83f1ade..7727a8c 100644
--- a/src/app/dashboard/admin/page.tsx
+++ b/src/app/dashboard/admin/page.tsx
@@ -35,10 +35,10 @@ export default function AdminPage() {
     return (
       <div className="max-w-7xl mx-auto p-6">
         <div className="animate-pulse space-y-6">
-          <div className="h-32 bg-gray-200 dark:bg-gray-800 rounded-lg"></div>
+          <div className="h-32 theme-bg-tertiary rounded-lg"></div>
           <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
             {[...Array(8)].map((_, i) => (
-              <div key={i} className="h-32 bg-gray-200 dark:bg-gray-800 rounded-lg"></div>
+              <div key={i} className="h-32 theme-bg-tertiary rounded-lg"></div>
             ))}
           </div>
         </div>
@@ -79,11 +79,11 @@ export default function AdminPage() {
       <div className="mb-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
         <Link
           href="/dashboard/admin/users"
-          className="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/50 p-6 hover:border-blue-400 dark:hover:border-blue-500 transition-colors group"
+          className="dashboard-content-card hover:border-blue-400 dark:hover:border-blue-500 transition-all hover:shadow-lg group"
         >
           <div className="flex items-center gap-4">
             <div className="w-12 h-12 rounded-lg bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center group-hover:bg-blue-600 transition-colors">
-              <svg className="w-6 h-6 text-blue-600 dark:text-blue-400 group-hover:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <svg className="w-6 h-6 text-blue-700 dark:text-blue-400 group-hover:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
               </svg>
             </div>
@@ -96,11 +96,11 @@ export default function AdminPage() {
 
         <Link
           href="/dashboard/admin/service-types"
-          className="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/50 p-6 hover:border-green-400 dark:hover:border-green-500 transition-colors group"
+          className="dashboard-content-card hover:border-green-400 dark:hover:border-green-500 transition-all hover:shadow-lg group"
         >
           <div className="flex items-center gap-4">
             <div className="w-12 h-12 rounded-lg bg-green-100 dark:bg-green-900/30 flex items-center justify-center group-hover:bg-green-600 transition-colors">
-              <svg className="w-6 h-6 text-green-600 dark:text-green-400 group-hover:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <svg className="w-6 h-6 text-green-700 dark:text-green-400 group-hover:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
               </svg>
             </div>
@@ -113,11 +113,11 @@ export default function AdminPage() {
 
         <Link
           href="/dashboard/admin/reports"
-          className="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/50 p-6 hover:border-purple-400 dark:hover:border-purple-500 transition-colors group"
+          className="dashboard-content-card hover:border-purple-400 dark:hover:border-purple-500 transition-all hover:shadow-lg group"
         >
           <div className="flex items-center gap-4">
             <div className="w-12 h-12 rounded-lg bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center group-hover:bg-purple-600 transition-colors">
-              <svg className="w-6 h-6 text-purple-600 dark:text-purple-400 group-hover:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <svg className="w-6 h-6 text-purple-700 dark:text-purple-400 group-hover:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
               </svg>
             </div>
@@ -130,11 +130,11 @@ export default function AdminPage() {
 
         <Link
           href="/dashboard/admin/audit-logs"
-          className="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/50 p-6 hover:border-amber-400 dark:hover:border-amber-500 transition-colors group"
+          className="dashboard-content-card hover:border-amber-400 dark:hover:border-amber-500 transition-all hover:shadow-lg group"
         >
           <div className="flex items-center gap-4">
             <div className="w-12 h-12 rounded-lg bg-amber-100 dark:bg-amber-900/30 flex items-center justify-center group-hover:bg-amber-600 transition-colors">
-              <svg className="w-6 h-6 text-amber-600 dark:text-amber-400 group-hover:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <svg className="w-6 h-6 text-amber-700 dark:text-amber-400 group-hover:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
               </svg>
             </div>
@@ -152,17 +152,17 @@ export default function AdminPage() {
           <div className="mb-6">
             <h2 className="text-xl font-semibold theme-text-primary mb-4">User Statistics</h2>
             <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-              <div className="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/50 p-5">
-                <p className="text-xs uppercase tracking-wide theme-text-muted">Total customers</p>
-                <p className="text-2xl font-semibold theme-text-primary">{stats.totalCustomers ?? 0}</p>
+              <div className="stat-card">
+                <p className="stat-card-label">Total customers</p>
+                <p className="stat-card-value">{stats.totalCustomers ?? 0}</p>
               </div>
-              <div className="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/50 p-5">
-                <p className="text-xs uppercase tracking-wide theme-text-muted">Total employees</p>
-                <p className="text-2xl font-semibold theme-text-primary">{stats.totalEmployees ?? 0}</p>
+              <div className="stat-card">
+                <p className="stat-card-label">Total employees</p>
+                <p className="stat-card-value">{stats.totalEmployees ?? 0}</p>
               </div>
-              <div className="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/50 p-5">
-                <p className="text-xs uppercase tracking-wide theme-text-muted">Total vehicles</p>
-                <p className="text-2xl font-semibold theme-text-primary">{stats.totalVehicles ?? 0}</p>
+              <div className="stat-card">
+                <p className="stat-card-label">Total vehicles</p>
+                <p className="stat-card-value">{stats.totalVehicles ?? 0}</p>
               </div>
             </div>
           </div>
@@ -170,21 +170,21 @@ export default function AdminPage() {
           <div className="mb-6">
             <h2 className="text-xl font-semibold theme-text-primary mb-4">Service Statistics</h2>
             <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
-              <div className="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/50 p-5">
-                <p className="text-xs uppercase tracking-wide theme-text-muted">Active appointments</p>
-                <p className="text-2xl font-semibold theme-text-primary">{stats.activeAppointments ?? 0}</p>
+              <div className="stat-card">
+                <p className="stat-card-label">Active appointments</p>
+                <p className="stat-card-value">{stats.activeAppointments ?? 0}</p>
               </div>
-              <div className="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/50 p-5">
-                <p className="text-xs uppercase tracking-wide theme-text-muted">Completed (month)</p>
-                <p className="text-2xl font-semibold text-green-600 dark:text-green-400">{stats.completedServicesThisMonth ?? 0}</p>
+              <div className="stat-card">
+                <p className="stat-card-label">Completed (month)</p>
+                <p className="stat-card-value text-green-600 dark:text-green-400">{stats.completedServicesThisMonth ?? 0}</p>
               </div>
-              <div className="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/50 p-5">
-                <p className="text-xs uppercase tracking-wide theme-text-muted">Active projects</p>
-                <p className="text-2xl font-semibold text-purple-600 dark:text-purple-400">{stats.activeProjects ?? 0}</p>
+              <div className="stat-card">
+                <p className="stat-card-label">Active projects</p>
+                <p className="stat-card-value text-purple-600 dark:text-purple-400">{stats.activeProjects ?? 0}</p>
               </div>
-              <div className="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/50 p-5">
-                <p className="text-xs uppercase tracking-wide theme-text-muted">Pending invoices</p>
-                <p className="text-2xl font-semibold text-amber-600 dark:text-amber-400">{stats.pendingInvoices ?? 0}</p>
+              <div className="stat-card">
+                <p className="stat-card-label">Pending invoices</p>
+                <p className="stat-card-value text-amber-600 dark:text-amber-400">{stats.pendingInvoices ?? 0}</p>
               </div>
             </div>
           </div>
@@ -192,13 +192,13 @@ export default function AdminPage() {
           <div className="mb-6">
             <h2 className="text-xl font-semibold theme-text-primary mb-4">Financial Overview</h2>
             <div className="grid gap-4 sm:grid-cols-2">
-              <div className="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/50 p-5">
-                <p className="text-xs uppercase tracking-wide theme-text-muted">Revenue this month</p>
-                <p className="text-2xl font-semibold theme-text-primary">LKR {(stats.revenueThisMonth ?? 0).toLocaleString()}</p>
+              <div className="stat-card">
+                <p className="stat-card-label">Revenue this month</p>
+                <p className="stat-card-value">LKR {(stats.revenueThisMonth ?? 0).toLocaleString()}</p>
               </div>
-              <div className="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/50 p-5">
-                <p className="text-xs uppercase tracking-wide theme-text-muted">Pending invoices count</p>
-                <p className="text-2xl font-semibold text-amber-600 dark:text-amber-400">{stats.pendingInvoices ?? 0}</p>
+              <div className="stat-card">
+                <p className="stat-card-label">Pending invoices count</p>
+                <p className="stat-card-value text-amber-600 dark:text-amber-400">{stats.pendingInvoices ?? 0}</p>
               </div>
             </div>
           </div>
diff --git a/src/app/dashboard/admin/reports/page.tsx b/src/app/dashboard/admin/reports/page.tsx
index 4aab25f..e80403b 100644
--- a/src/app/dashboard/admin/reports/page.tsx
+++ b/src/app/dashboard/admin/reports/page.tsx
@@ -43,8 +43,8 @@ export default function ReportsPage() {
     return (
       <div className="max-w-4xl mx-auto p-6">
         <div className="animate-pulse space-y-4">
-          <div className="h-32 bg-gray-200 dark:bg-gray-800 rounded-lg"></div>
-          <div className="h-96 bg-gray-200 dark:bg-gray-800 rounded-lg"></div>
+          <div className="h-32 theme-bg-tertiary rounded-lg"></div>
+          <div className="h-96 theme-bg-tertiary rounded-lg"></div>
         </div>
       </div>
     );
@@ -79,7 +79,7 @@ export default function ReportsPage() {
         <p className="theme-text-muted">Generate business analytics and reports</p>
       </div>
 
-      <div className="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/50 p-8">
+      <div className="dashboard-content-card">
         <h2 className="text-xl font-semibold theme-text-primary mb-6">Generate Report</h2>
         
         <div className="space-y-6">
@@ -88,7 +88,7 @@ export default function ReportsPage() {
             <select
               value={reportType}
               onChange={(e) => setReportType(e.target.value as typeof reportType)}
-              className="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 theme-text-primary focus:ring-2 focus:ring-blue-500"
+              className="form-select"
             >
               <option value="REVENUE">Revenue Report</option>
               <option value="SERVICE_PERFORMANCE">Service Performance Report</option>
@@ -104,7 +104,7 @@ export default function ReportsPage() {
             <select
               value={format}
               onChange={(e) => setFormat(e.target.value as typeof format)}
-              className="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 theme-text-primary focus:ring-2 focus:ring-blue-500"
+              className="form-select"
             >
               <option value="PDF">PDF</option>
               <option value="EXCEL">Excel</option>
@@ -120,7 +120,7 @@ export default function ReportsPage() {
                 type="date"
                 value={dateRange.fromDate}
                 onChange={(e) => setDateRange({ ...dateRange, fromDate: e.target.value })}
-                className="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 theme-text-primary focus:ring-2 focus:ring-blue-500"
+                className="form-input"
               />
             </div>
             <div>
@@ -129,7 +129,7 @@ export default function ReportsPage() {
                 type="date"
                 value={dateRange.toDate}
                 onChange={(e) => setDateRange({ ...dateRange, toDate: e.target.value })}
-                className="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 theme-text-primary focus:ring-2 focus:ring-blue-500"
+                className="form-input"
               />
             </div>
           </div>
diff --git a/src/app/dashboard/admin/service-types/page.tsx b/src/app/dashboard/admin/service-types/page.tsx
index ca8ab4c..8ccbc84 100644
--- a/src/app/dashboard/admin/service-types/page.tsx
+++ b/src/app/dashboard/admin/service-types/page.tsx
@@ -195,7 +195,7 @@ export default function ServiceTypesPage() {
         </div>
         <button
           onClick={handleCreate}
-          className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg flex items-center gap-2 transition-colors shadow-lg"
+          className="theme-button-action px-6 py-3 rounded-lg flex items-center gap-2 shadow-lg"
         >
           <span className="text-xl">+</span>
           Add Service Type
@@ -251,7 +251,7 @@ export default function ServiceTypesPage() {
               <div className="flex gap-2 pt-4 border-t border-gray-200 dark:border-gray-700">
                 <button
                   onClick={() => handleEdit(serviceType)}
-                  className="flex-1 bg-blue-600 hover:bg-blue-700 text-white px-3 py-2 rounded text-sm transition-colors"
+                  className="flex-1 theme-button-action px-3 py-2 rounded text-sm"
                 >
                   Edit
                 </button>
@@ -280,7 +280,7 @@ export default function ServiceTypesPage() {
       {/* Create/Edit Modal */}
       {showModal && (
         <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
-          <div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
+          <div className="modal-content">
             <div className="p-6">
               <div className="flex justify-between items-center mb-6">
                 <h2 className="text-2xl font-bold theme-text-primary">
@@ -304,7 +304,7 @@ export default function ServiceTypesPage() {
                     required
                     value={formData.name}
                     onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 theme-text-primary"
+                    className="form-input"
                     placeholder="e.g., Oil Change"
                   />
                 </div>
@@ -317,7 +317,7 @@ export default function ServiceTypesPage() {
                     required
                     value={formData.category}
                     onChange={(e) => setFormData({ ...formData, category: e.target.value })}
-                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 theme-text-primary"
+                    className="form-select"
                   >
                     <option value="MAINTENANCE">Maintenance</option>
                     <option value="REPAIR">Repair</option>
@@ -334,7 +334,7 @@ export default function ServiceTypesPage() {
                   <textarea
                     value={formData.description}
                     onChange={(e) => setFormData({ ...formData, description: e.target.value })}
-                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 theme-text-primary"
+                    className="form-textarea"
                     rows={3}
                     placeholder="Describe the service..."
                   />
@@ -352,7 +352,7 @@ export default function ServiceTypesPage() {
                       step="0.01"
                       value={formData.price}
                       onChange={(e) => setFormData({ ...formData, price: e.target.value })}
-                      className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 theme-text-primary"
+                      className="form-input"
                       placeholder="5000"
                     />
                   </div>
@@ -368,7 +368,7 @@ export default function ServiceTypesPage() {
                       max="480"
                       value={formData.durationMinutes}
                       onChange={(e) => setFormData({ ...formData, durationMinutes: parseInt(e.target.value) || 0 })}
-                      className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 theme-text-primary"
+                      className="form-input"
                       placeholder="60"
                     />
                     <p className="text-xs text-gray-500 mt-1">Min: 15 min, Max: 8 hours (480 min)</p>
@@ -379,13 +379,13 @@ export default function ServiceTypesPage() {
                   <button
                     type="button"
                     onClick={() => setShowModal(false)}
-                    className="flex-1 px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors theme-text-primary"
+                    className="btn btn-secondary flex-1"
                   >
                     Cancel
                   </button>
                   <button
                     type="submit"
-                    className="flex-1 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition-colors"
+                    className="btn btn-primary flex-1"
                   >
                     {editingService ? 'Update Service' : 'Create Service'}
                   </button>
diff --git a/src/app/dashboard/admin/users/page.tsx b/src/app/dashboard/admin/users/page.tsx
index c303696..590ccf2 100644
--- a/src/app/dashboard/admin/users/page.tsx
+++ b/src/app/dashboard/admin/users/page.tsx
@@ -235,46 +235,46 @@ export default function AdminUsersPage() {
 
       {/* Stats */}
       <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-5 mb-6">
-        <div className="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/50 p-5">
-          <p className="text-xs uppercase tracking-wide theme-text-muted">Total Users</p>
-          <p className="text-2xl font-semibold theme-text-primary">{users.length}</p>
+        <div className="stat-card">
+          <p className="stat-card-label">Total Users</p>
+          <p className="stat-card-value">{users.length}</p>
         </div>
-        <div className="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/50 p-5">
-          <p className="text-xs uppercase tracking-wide theme-text-muted">Activated</p>
-          <p className="text-2xl font-semibold text-green-600 dark:text-green-400">
+        <div className="stat-card">
+          <p className="stat-card-label">Activated</p>
+          <p className="stat-card-value text-green-600 dark:text-green-400">
             {users.filter(u => u.enabled).length}
           </p>
         </div>
-        <div className="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/50 p-5">
-          <p className="text-xs uppercase tracking-wide theme-text-muted">Deactivated</p>
-          <p className="text-2xl font-semibold text-red-600 dark:text-red-400">
+        <div className="stat-card">
+          <p className="stat-card-label">Deactivated</p>
+          <p className="stat-card-value text-red-600 dark:text-red-400">
             {users.filter(u => !u.enabled).length}
           </p>
         </div>
-        <div className="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/50 p-5">
-          <p className="text-xs uppercase tracking-wide theme-text-muted">Email Verified</p>
-          <p className="text-2xl font-semibold text-blue-600 dark:text-blue-400">
+        <div className="stat-card">
+          <p className="stat-card-label">Email Verified</p>
+          <p className="stat-card-value text-blue-600 dark:text-blue-400">
             {users.filter(u => u.emailVerified).length}
           </p>
         </div>
-        <div className="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/50 p-5">
-          <p className="text-xs uppercase tracking-wide theme-text-muted">Account Locked</p>
-          <p className="text-2xl font-semibold text-orange-600 dark:text-orange-400">
+        <div className="stat-card">
+          <p className="stat-card-label">Account Locked</p>
+          <p className="stat-card-value text-orange-600 dark:text-orange-400">
             {users.filter(u => u.accountLocked).length}
           </p>
         </div>
       </div>
 
       {/* Filters */}
-      <div className="mb-6 flex flex-wrap gap-2">
+      <div className="filter-tabs-container mb-6">
         {roleFilters.map((filter) => (
           <button
             key={filter}
             onClick={() => setRoleFilter(filter)}
-            className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+            className={`filter-tab ${
               roleFilter === filter
-                ? 'bg-blue-600 text-white'
-                : 'theme-bg-secondary theme-text-secondary hover:bg-blue-50 dark:hover:bg-blue-900/30'
+                ? 'filter-tab-active'
+                : 'filter-tab-inactive'
             }`}
           >
             {filter.replace('_', ' ')}
@@ -286,14 +286,14 @@ export default function AdminUsersPage() {
       <div className="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/50 overflow-hidden">
         <div className="overflow-x-auto">
           <table className="w-full">
-            <thead className="bg-gray-50 dark:bg-gray-800/50">
+            <thead className="bg-slate-100 dark:bg-gray-800/50 border-b border-gray-200 dark:border-gray-700">
               <tr>
-                <th className="px-6 py-3 text-left text-xs font-semibold theme-text-muted uppercase">User</th>
-                <th className="px-6 py-3 text-left text-xs font-semibold theme-text-muted uppercase">Roles</th>
-                <th className="px-6 py-3 text-left text-xs font-semibold theme-text-muted uppercase">Status</th>
-                <th className="px-6 py-3 text-left text-xs font-semibold theme-text-muted uppercase">Last Login</th>
-                <th className="px-6 py-3 text-left text-xs font-semibold theme-text-muted uppercase">Created</th>
-                {isAdmin && <th className="px-6 py-3 text-left text-xs font-semibold theme-text-muted uppercase">Actions</th>}
+                <th className="px-6 py-3 text-left text-xs font-semibold text-slate-700 dark:text-gray-400 uppercase tracking-wide">User</th>
+                <th className="px-6 py-3 text-left text-xs font-semibold text-slate-700 dark:text-gray-400 uppercase tracking-wide">Roles</th>
+                <th className="px-6 py-3 text-left text-xs font-semibold text-slate-700 dark:text-gray-400 uppercase tracking-wide">Status</th>
+                <th className="px-6 py-3 text-left text-xs font-semibold text-slate-700 dark:text-gray-400 uppercase tracking-wide">Last Login</th>
+                <th className="px-6 py-3 text-left text-xs font-semibold text-slate-700 dark:text-gray-400 uppercase tracking-wide">Created</th>
+                {isAdmin && <th className="px-6 py-3 text-left text-xs font-semibold text-slate-700 dark:text-gray-400 uppercase tracking-wide">Actions</th>}
               </tr>
             </thead>
             <tbody className="divide-y divide-gray-200 dark:divide-gray-800">
@@ -430,7 +430,7 @@ export default function AdminUsersPage() {
                           <div className="flex flex-col gap-2">
                             <button
                               onClick={() => handleStartEditRoles(user)}
-                              className="px-3 py-1 bg-blue-600 hover:bg-blue-700 text-white text-xs font-medium rounded transition-colors"
+                              className="px-3 py-1 theme-button-action text-xs font-medium rounded"
                             >
                               Edit Roles
                             </button>
@@ -462,7 +462,7 @@ export default function AdminUsersPage() {
       {/* Create User Modal */}
       {showCreateModal && (
         <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
-          <div className="bg-white dark:bg-gray-900 rounded-xl max-w-md w-full p-6 border border-gray-200 dark:border-gray-800">
+          <div className="modal-content p-6">
             <h2 className="text-2xl font-bold theme-text-primary mb-4">
               Create {createUserType === 'employee' ? 'Employee' : 'Admin'}
             </h2>
@@ -473,7 +473,7 @@ export default function AdminUsersPage() {
                   type="text"
                   name="username"
                   required
-                  className="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg theme-bg-primary theme-text-primary"
+                  className="form-input"
                 />
               </div>
               <div>
@@ -482,7 +482,7 @@ export default function AdminUsersPage() {
                   type="email"
                   name="email"
                   required
-                  className="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg theme-bg-primary theme-text-primary"
+                  className="form-input"
                 />
               </div>
               <div>
@@ -492,7 +492,7 @@ export default function AdminUsersPage() {
                   name="password"
                   required
                   minLength={6}
-                  className="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg theme-bg-primary theme-text-primary"
+                  className="form-input"
                 />
               </div>
               <div>
@@ -501,7 +501,7 @@ export default function AdminUsersPage() {
                   type="text"
                   name="firstName"
                   required
-                  className="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg theme-bg-primary theme-text-primary"
+                  className="form-input"
                 />
               </div>
               <div>
@@ -510,7 +510,7 @@ export default function AdminUsersPage() {
                   type="text"
                   name="lastName"
                   required
-                  className="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg theme-bg-primary theme-text-primary"
+                  className="form-input"
                 />
               </div>
               {createUserType === 'employee' && (
@@ -520,7 +520,7 @@ export default function AdminUsersPage() {
                     type="text"
                     name="department"
                     required
-                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg theme-bg-primary theme-text-primary"
+                    className="form-input"
                   />
                 </div>
               )}
diff --git a/src/app/dashboard/appointments/[appointmentId]/page.tsx b/src/app/dashboard/appointments/[appointmentId]/page.tsx
index af74cac..657497f 100644
--- a/src/app/dashboard/appointments/[appointmentId]/page.tsx
+++ b/src/app/dashboard/appointments/[appointmentId]/page.tsx
@@ -336,7 +336,7 @@ export default function AppointmentDetailPage() {
       </div>
 
       {error && (
-        <div className="mb-6 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-300 px-4 py-3 rounded-lg">
+        <div className="mb-6 theme-alert-danger">
           {error}
         </div>
       )}
@@ -468,7 +468,7 @@ export default function AppointmentDetailPage() {
             <p className="theme-text-muted text-sm mb-4">
               Select one or more employees to assign to this appointment. You can change the assigned employees at any time. Employees will receive notifications when assigned.
             </p>
-            <div className="mb-4 p-3 bg-blue-50 dark:bg-blue-900/10 border border-blue-200 dark:border-blue-800 rounded-lg">
+            <div className="mb-4 p-3 theme-alert-info">
               <p className="text-sm theme-text-secondary">
                 💡 <strong>Tip:</strong> Currently assigned employees are pre-selected below. Uncheck to remove them or add new employees.
               </p>
@@ -523,7 +523,7 @@ export default function AppointmentDetailPage() {
             <h2 className="text-xl font-semibold theme-text-primary mb-4">⏱️ Time Tracking</h2>
 
             {appointment.vehicleArrivedAt && (
-              <div className="mb-4 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
+              <div className="mb-4 p-3 theme-alert-info">
                 <p className="text-sm theme-text-muted">
                   📍 Vehicle arrived: {new Date(appointment.vehicleArrivedAt).toLocaleString()}
                 </p>
@@ -571,7 +571,7 @@ export default function AppointmentDetailPage() {
                 />
               </div>
             ) : appointment.status === 'COMPLETED' ? (
-              <div className="p-4 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg">
+              <div className="p-4 theme-alert-success">
                 <p className="text-green-700 dark:text-green-300 font-medium">
                   ✓ Work completed successfully
                 </p>
@@ -796,7 +796,7 @@ export default function AppointmentDetailPage() {
         )}
 
         {roles?.includes('CUSTOMER') && appointment?.status === 'CUSTOMER_CONFIRMED' && (
-          <section className="automotive-card p-6 border-2 border-green-200 dark:border-green-800 bg-green-50 dark:bg-green-900/10">
+          <section className="automotive-card p-6 border-2 theme-alert-success">
             <h2 className="text-xl font-semibold text-green-600 dark:text-green-400 mb-2">✓ Appointment Complete</h2>
             <p className="text-green-700 dark:text-green-300">
               Thank you! You have confirmed the completion of this appointment. The service is now finalized.
diff --git a/src/app/dashboard/appointments/availability/page.tsx b/src/app/dashboard/appointments/availability/page.tsx
index b2c83e7..2ce0eb3 100644
--- a/src/app/dashboard/appointments/availability/page.tsx
+++ b/src/app/dashboard/appointments/availability/page.tsx
@@ -155,7 +155,7 @@ export default function AppointmentAvailabilityPage() {
 			</div>
 
 			{error && (
-				<div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-300 px-4 py-3 rounded-lg">
+				<div className="theme-alert-danger">
 					{error}
 				</div>
 			)}
diff --git a/src/app/dashboard/appointments/book/page.tsx b/src/app/dashboard/appointments/book/page.tsx
index 5dd8f5c..5dfde55 100644
--- a/src/app/dashboard/appointments/book/page.tsx
+++ b/src/app/dashboard/appointments/book/page.tsx
@@ -181,13 +181,13 @@ export default function BookAppointmentPage() {
       </div>
 
       {error && (
-        <div className="mb-6 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-300 px-4 py-3 rounded-lg">
+        <div className="mb-6 theme-alert-danger">
           {error}
         </div>
       )}
 
       {successMessage && (
-        <div className="mb-6 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 text-green-700 dark:text-green-300 px-4 py-3 rounded-lg">
+        <div className="mb-6 theme-alert-success">
           {successMessage}
         </div>
       )}
@@ -242,7 +242,7 @@ export default function BookAppointmentPage() {
         </label>
 
         {selectedServiceType && (
-          <div className="p-4 rounded-lg bg-blue-50 dark:bg-blue-900/20 text-sm theme-text-secondary">
+          <div className="p-4 rounded-lg theme-alert-info">
             <p className="font-medium theme-text-primary">Service details</p>
             <p>Duration: {selectedServiceType.estimatedDurationMinutes} minutes</p>
             {selectedServiceType.description && <p>{selectedServiceType.description}</p>}
diff --git a/src/app/dashboard/appointments/page.tsx b/src/app/dashboard/appointments/page.tsx
index dcdfe77..a5b5cab 100644
--- a/src/app/dashboard/appointments/page.tsx
+++ b/src/app/dashboard/appointments/page.tsx
@@ -88,15 +88,15 @@ export default function AppointmentsPage() {
       </div>
 
       {/* Filter Tabs */}
-      <div className="flex gap-2 mb-6 overflow-x-auto pb-2">
+      <div className="filter-tabs-container mb-6">
         {(['ALL', 'PENDING', 'CONFIRMED', 'IN_PROGRESS', 'COMPLETED', 'CANCELLED'] as const).map((status) => (
           <button
             key={status}
             onClick={() => setFilter(status)}
-            className={`px-4 py-2 rounded-lg font-medium whitespace-nowrap transition-colors ${
+            className={`filter-tab ${
               filter === status
-                ? 'bg-blue-600 text-white'
-                : 'theme-bg-secondary theme-text-secondary hover:bg-blue-50 dark:hover:bg-blue-900/20'
+                ? 'filter-tab-active'
+                : 'filter-tab-inactive'
             }`}
           >
             {status.replace('_', ' ')}
@@ -106,9 +106,9 @@ export default function AppointmentsPage() {
 
       {/* Appointments List */}
       {appointments.length === 0 ? (
-        <div className="text-center py-16 automotive-card">
+        <div className="text-center py-16 automotive-card-static">
           <svg
-            className="mx-auto w-24 h-24 text-gray-400 dark:text-gray-600 mb-4"
+            className="mx-auto w-24 h-24 theme-text-muted mb-4"
             fill="none"
             stroke="currentColor"
             viewBox="0 0 24 24"
@@ -133,7 +133,7 @@ export default function AppointmentsPage() {
           {appointments.map((appointment) => (
             <div 
               key={appointment.id} 
-              className="automotive-card p-6 hover:shadow-lg transition-shadow cursor-pointer"
+              className="automotive-card p-6 hover:shadow-lg hover:border-blue-400 dark:hover:border-blue-500 transition-all cursor-pointer"
               onClick={() => router.push(`/dashboard/appointments/${appointment.id}`)}
             >
               <div className="flex items-start justify-between">
@@ -164,7 +164,7 @@ export default function AppointmentsPage() {
                   </div>
 
                   {appointment.specialInstructions && (
-                    <div className="mt-3 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
+                    <div className="mt-3 p-3 theme-alert-info">
                       <p className="text-sm theme-text-secondary">
                         <strong>Notes:</strong> {appointment.specialInstructions}
                       </p>
diff --git a/src/app/dashboard/invoices/page.tsx b/src/app/dashboard/invoices/page.tsx
index c5ea43e..81619fb 100644
--- a/src/app/dashboard/invoices/page.tsx
+++ b/src/app/dashboard/invoices/page.tsx
@@ -134,42 +134,42 @@ export default function InvoicesPage() {
       </div>
 
       {error && (
-        <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-300 px-4 py-3 rounded-lg">
+        <div className="theme-alert-danger">
           {error}
         </div>
       )}
 
       <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
-        <div className="automotive-card p-5">
-          <p className="text-xs uppercase tracking-wide theme-text-muted">Total invoices</p>
-          <p className="text-2xl font-semibold theme-text-primary">{summary.totalCount}</p>
+        <div className="stat-card">
+          <p className="stat-card-label">Total invoices</p>
+          <p className="stat-card-value">{summary.totalCount}</p>
         </div>
-        <div className="automotive-card p-5">
-          <p className="text-xs uppercase tracking-wide theme-text-muted">Outstanding invoices</p>
-          <p className="text-2xl font-semibold theme-text-primary">{summary.outstandingCount}</p>
+        <div className="stat-card">
+          <p className="stat-card-label">Outstanding invoices</p>
+          <p className="stat-card-value">{summary.outstandingCount}</p>
         </div>
-        <div className="automotive-card p-5">
-          <p className="text-xs uppercase tracking-wide theme-text-muted">Outstanding balance</p>
-          <p className="text-2xl font-semibold theme-text-primary">{formatCurrency(summary.outstandingTotal)}</p>
+        <div className="stat-card">
+          <p className="stat-card-label">Outstanding balance</p>
+          <p className="stat-card-value">{formatCurrency(summary.outstandingTotal)}</p>
         </div>
-        <div className="automotive-card p-5">
-          <p className="text-xs uppercase tracking-wide theme-text-muted">Paid totals</p>
-          <p className="text-2xl font-semibold theme-text-primary">{formatCurrency(summary.paidTotal)}</p>
+        <div className="stat-card">
+          <p className="stat-card-label">Paid totals</p>
+          <p className="stat-card-value">{formatCurrency(summary.paidTotal)}</p>
         </div>
       </div>
 
       <div className="automotive-card p-6 space-y-4">
         <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-3">
-          <div className="flex flex-wrap gap-2">
+          <div className="filter-tabs-container">
             {STATUS_FILTERS.map((status) => (
               <button
                 key={status}
                 type="button"
                 onClick={() => setStatusFilter(status)}
-                className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+                className={`filter-tab ${
                   statusFilter === status
-                    ? 'bg-blue-600 text-white'
-                    : 'theme-bg-secondary theme-text-secondary hover:bg-blue-50 dark:hover:bg-blue-900/30'
+                    ? 'filter-tab-active'
+                    : 'filter-tab-inactive'
                 }`}
               >
                 {status === 'ALL' ? 'All' : status}
@@ -203,7 +203,7 @@ export default function InvoicesPage() {
               <Link
                 key={invoice.invoiceId}
                 href={`/dashboard/invoices/${invoice.invoiceId}`}
-                className="block rounded-xl border border-gray-200 dark:border-gray-800 hover:border-blue-400 dark:hover:border-blue-500 transition-colors"
+                className="block rounded-xl border border-gray-200 dark:border-gray-800 hover:border-blue-400 dark:hover:border-blue-500 hover:shadow-lg transition-all"
               >
                 <div className="p-5">
                   <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3">
diff --git a/src/app/dashboard/layout.tsx b/src/app/dashboard/layout.tsx
index 5e8fd99..2621f81 100644
--- a/src/app/dashboard/layout.tsx
+++ b/src/app/dashboard/layout.tsx
@@ -56,10 +56,10 @@ function DashboardShell({ children }: { children: ReactNode }) {
           <li key={item.href}>
             <Link
               href={item.href}
-              className={`block rounded-lg px-3 py-2 text-sm font-medium transition-colors ${
+              className={`block rounded-lg px-3 py-2 text-sm font-medium transition-all duration-200 ${
                 active
-                  ? 'theme-button-primary'
-                  : 'theme-text-muted hover:theme-text-primary hover:bg-blue-100/50 dark:hover:bg-blue-900/20'
+                  ? 'bg-gradient-to-r from-[#0EA3E7]/90 to-[#0386C9]/90 text-white shadow-lg shadow-blue-500/30'
+                  : 'theme-text-secondary hover:bg-gradient-to-r hover:from-[#0EA3E7]/10 hover:to-[#0386C9]/10 hover:text-[#0EA3E7] hover:shadow-md'
               }`}
               onClick={() => setMobileNavOpen(false)}
             >
@@ -75,7 +75,7 @@ function DashboardShell({ children }: { children: ReactNode }) {
     <div className="min-h-screen theme-bg-primary">
       <div className="flex min-h-screen">
         {/* Desktop sidebar */}
-        <aside className="hidden lg:flex lg:flex-col lg:w-64 lg:border-r border-gray-200 dark:border-gray-800 p-6 space-y-6">
+        <aside className="hidden lg:flex lg:flex-col lg:w-64 lg:border-r theme-border p-6 space-y-6">
           <Link href="/" className="flex items-center">
             <div className="automotive-accent w-9 h-9 rounded-full mr-3 flex items-center justify-center">
               <span className="text-white font-bold text-sm">TT</span>
@@ -99,7 +99,7 @@ function DashboardShell({ children }: { children: ReactNode }) {
 
         {/* Content area */}
         <div className="flex-1 flex flex-col min-h-screen">
-          <header className="sticky top-0 z-30 backdrop-blur supports-[backdrop-filter]:bg-white/80 supports-[backdrop-filter]:dark:bg-slate-900/80 border-b border-gray-200 dark:border-gray-800">
+          <header className="sticky top-0 z-30 backdrop-blur theme-bg-secondary border-b theme-border">
             <div className="px-4 sm:px-6 lg:px-8">
               <div className="flex items-center justify-between h-16">
                 <div className="flex items-center gap-3">
@@ -131,7 +131,7 @@ function DashboardShell({ children }: { children: ReactNode }) {
 
             {/* Mobile nav drawer */}
             {mobileNavOpen && (
-              <div className="lg:hidden border-t border-gray-200 dark:border-gray-800 px-4 pb-4">
+              <div className="lg:hidden border-t theme-border px-4 pb-4">
                 {navSections.map((section) => (
                   <div key={section.title} className="py-3">
                     <p className="text-xs uppercase tracking-wide theme-text-muted mb-2">{section.title}</p>
diff --git a/src/app/dashboard/notifications/page.tsx b/src/app/dashboard/notifications/page.tsx
index 0daa161..4ba207d 100644
--- a/src/app/dashboard/notifications/page.tsx
+++ b/src/app/dashboard/notifications/page.tsx
@@ -89,7 +89,7 @@ export default function NotificationsPage() {
 
   if (loading) {
     return (
-      <div className="max-w-4xl mx-auto p-6">
+      <div className="max-w-6xl mx-auto p-6">
         <div className="animate-pulse space-y-4">
           {[...Array(5)].map((_, i) => (
             <div key={i} className="h-24 bg-gray-200 dark:bg-gray-800 rounded-lg"></div>
@@ -100,7 +100,7 @@ export default function NotificationsPage() {
   }
 
   return (
-    <div className="max-w-4xl mx-auto p-6">
+    <div className="max-w-6xl mx-auto p-6">
       <div className="mb-8">
         <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
           <div>
@@ -120,20 +120,20 @@ export default function NotificationsPage() {
         </div>
 
         {/* Filters */}
-        <div className="flex gap-2">
+        <div className="filter-tabs-container">
           {(['ALL', 'UNREAD', 'READ'] as const).map((f) => (
             <button
               key={f}
               onClick={() => setFilter(f)}
-              className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+              className={`filter-tab ${
                 filter === f
-                  ? 'bg-blue-600 text-white'
-                  : 'theme-bg-secondary theme-text-secondary hover:bg-blue-50 dark:hover:bg-blue-900/30'
+                  ? 'filter-tab-active'
+                  : 'filter-tab-inactive'
               }`}
             >
               {f.charAt(0) + f.slice(1).toLowerCase()}
               {f === 'UNREAD' && unreadCount > 0 && (
-                <span className="ml-1.5 px-1.5 py-0.5 bg-white bg-opacity-20 rounded text-xs">{unreadCount}</span>
+                <span className="ml-1.5 px-1.5 py-0.5 bg-white dark:bg-gray-800 bg-opacity-30 dark:bg-opacity-30 rounded text-xs">{unreadCount}</span>
               )}
             </button>
           ))}
@@ -145,7 +145,7 @@ export default function NotificationsPage() {
         {filteredNotifications.length === 0 ? (
           <div className="rounded-xl border-2 border-dashed border-gray-300 dark:border-gray-700 p-12 text-center">
             <svg
-              className="mx-auto w-16 h-16 text-gray-400 dark:text-gray-600 mb-4"
+              className="mx-auto w-16 h-16 theme-text-muted mb-4"
               fill="none"
               stroke="currentColor"
               viewBox="0 0 24 24"
@@ -161,10 +161,10 @@ export default function NotificationsPage() {
           filteredNotifications.map((notification) => (
             <div
               key={notification.notificationId}
-              className={`rounded-xl border transition-all ${
+              className={`rounded-xl border transition-all hover:shadow-lg ${
                 notification.read
-                  ? 'border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/50'
-                  : 'border-blue-200 dark:border-blue-800 bg-blue-50 dark:bg-blue-900/20'
+                  ? 'border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/50 hover:border-gray-300 dark:hover:border-gray-700'
+                  : 'border-blue-200 dark:border-blue-800 bg-blue-50 dark:bg-blue-900/20 hover:border-blue-300 dark:hover:border-blue-700'
               }`}
             >
               <div className="p-5 flex items-start gap-4">

From fb0e09ba15fc13ee671af53c8483f97070809509 Mon Sep 17 00:00:00 2001
From: Pramudi Samarawickrama <pramupiyumika@gmail.com>
Date: Thu, 20 Nov 2025 17:29:59 +0530
Subject: [PATCH 09/34] style: update branding and icon styling across
 authentication pages

---
 src/app/auth/forgot-password/page.tsx     | 2 +-
 src/app/auth/login/page.tsx               | 6 +++---
 src/app/auth/otp-verify/page.tsx          | 2 +-
 src/app/auth/register/page.tsx            | 8 ++++----
 src/app/auth/resend-verification/page.tsx | 6 +++---
 src/app/auth/reset-password/page.tsx      | 6 +++---
 src/app/auth/verify-email/page.tsx        | 6 +++---
 7 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/app/auth/forgot-password/page.tsx b/src/app/auth/forgot-password/page.tsx
index bd72570..5d883ad 100644
--- a/src/app/auth/forgot-password/page.tsx
+++ b/src/app/auth/forgot-password/page.tsx
@@ -46,7 +46,7 @@ export default function ForgotPasswordPage() {
       <header className="sticky-header shadow-lg border-b theme-border">
         <div className="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8">
           <div className="flex justify-between items-center">
-            <Link href="/" className="flex items-center space-x-3 group"><div className="w-12 h-12 rounded-full bg-gradient-to-r from-blue-500 to-cyan-400 flex items-center justify-center shadow-lg transform transition-transform duration-300 group-hover:scale-110"><BoltIcon size={6} /></div><h1 className="text-2xl font-bold theme-text-primary hidden sm:block">TechTorque Auto</h1></Link>
+            <Link href="/" className="flex items-center space-x-3 group"><div className="automotive-accent w-12 h-12 rounded-full flex items-center justify-center shadow-lg transform transition-transform duration-300 group-hover:scale-110"><span className="text-white font-bold text-lg">TT</span></div><h1 className="text-2xl font-bold theme-text-primary hidden sm:block">TechTorque</h1></Link>
             <div className="flex items-center space-x-4"><Link href="/auth/login" className="theme-link hidden md:inline-block">Back to Sign In</Link><ThemeToggle /></div>
           </div>
         </div>
diff --git a/src/app/auth/login/page.tsx b/src/app/auth/login/page.tsx
index f16b2f4..cb2e2c2 100644
--- a/src/app/auth/login/page.tsx
+++ b/src/app/auth/login/page.tsx
@@ -74,11 +74,11 @@ export default function LoginPage() {
         <div className="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8">
           <div className="flex justify-between items-center">
             <Link href="/" className="flex items-center space-x-3 group">
-              <div className="w-12 h-12 rounded-full bg-gradient-to-r from-blue-500 to-cyan-400 flex items-center justify-center shadow-lg transform transition-transform duration-300 group-hover:scale-110">
-                <BoltIcon size={6} />
+              <div className="automotive-accent w-12 h-12 rounded-full flex items-center justify-center shadow-lg transform transition-transform duration-300 group-hover:scale-110">
+                <span className="text-white font-bold text-lg">TT</span>
               </div>
               <h1 className="text-2xl font-bold theme-text-primary hidden sm:block">
-                TechTorque Auto
+                TechTorque
               </h1>
             </Link>
             <div className="flex items-center space-x-4">
diff --git a/src/app/auth/otp-verify/page.tsx b/src/app/auth/otp-verify/page.tsx
index a9cbdf1..548c9ce 100644
--- a/src/app/auth/otp-verify/page.tsx
+++ b/src/app/auth/otp-verify/page.tsx
@@ -39,7 +39,7 @@ export default function OtpVerifyPage() {
       <header className="sticky-header shadow-lg border-b theme-border">
         <div className="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8">
           <div className="flex justify-between items-center">
-            <Link href="/" className="flex items-center space-x-3 group"><div className="w-12 h-12 rounded-full bg-gradient-to-r from-blue-500 to-cyan-400 flex items-center justify-center shadow-lg transform transition-transform duration-300 group-hover:scale-110"><BoltIcon size={6} /></div><h1 className="text-2xl font-bold theme-text-primary hidden sm:block">TechTorque Auto</h1></Link>
+            <Link href="/" className="flex items-center space-x-3 group"><div className="automotive-accent w-12 h-12 rounded-full flex items-center justify-center shadow-lg transform transition-transform duration-300 group-hover:scale-110"><span className="text-white font-bold text-lg">TT</span></div><h1 className="text-2xl font-bold theme-text-primary hidden sm:block">TechTorque</h1></Link>
             <div className="flex items-center space-x-4"><ThemeToggle /></div>
           </div>
         </div>
diff --git a/src/app/auth/register/page.tsx b/src/app/auth/register/page.tsx
index 1dafed5..f5cf46d 100644
--- a/src/app/auth/register/page.tsx
+++ b/src/app/auth/register/page.tsx
@@ -132,11 +132,11 @@ export default function RegisterPage() {
         <div className="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8">
           <div className="flex justify-between items-center">
             <Link href="/" className="flex items-center space-x-3 group">
-              <div className="w-12 h-12 rounded-full bg-gradient-to-r from-blue-500 to-cyan-400 flex items-center justify-center shadow-lg transform transition-transform duration-300 group-hover:scale-110">
-                <BoltIcon size={6} />
+              <div className="automotive-accent w-12 h-12 rounded-full flex items-center justify-center shadow-lg transform transition-transform duration-300 group-hover:scale-110">
+                <span className="text-white font-bold text-lg">TT</span>
               </div>
               <h1 className="text-2xl font-bold theme-text-primary hidden sm:block">
-                TechTorque Auto
+                TechTorque
               </h1>
             </Link>
             <div className="flex items-center space-x-4">
@@ -178,7 +178,7 @@ export default function RegisterPage() {
                   Account Created!
                 </h2>
                 <p className="text-base theme-text-secondary mb-2">
-                  Welcome to TechTorque Auto, {formData.fullName}!
+                  Welcome to TechTorque, {formData.fullName}!
                 </p>
                 <div className="mb-6 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
                   <p className="text-sm font-semibold theme-text-primary mb-2">
diff --git a/src/app/auth/resend-verification/page.tsx b/src/app/auth/resend-verification/page.tsx
index d5612a5..7935209 100644
--- a/src/app/auth/resend-verification/page.tsx
+++ b/src/app/auth/resend-verification/page.tsx
@@ -138,11 +138,11 @@ export default function ResendVerificationPage() {
         <div className="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8">
           <div className="flex justify-between items-center">
             <Link href="/" className="flex items-center space-x-3 group">
-              <div className="w-12 h-12 rounded-full bg-gradient-to-r from-blue-500 to-cyan-400 flex items-center justify-center shadow-lg transform transition-transform duration-300 group-hover:scale-110">
-                <BoltIcon size={6} />
+              <div className="automotive-accent w-12 h-12 rounded-full flex items-center justify-center shadow-lg transform transition-transform duration-300 group-hover:scale-110">
+                <span className="text-white font-bold text-lg">TT</span>
               </div>
               <h1 className="text-2xl font-bold theme-text-primary hidden sm:block">
-                TechTorque Auto
+                TechTorque
               </h1>
             </Link>
             <div className="flex items-center space-x-4">
diff --git a/src/app/auth/reset-password/page.tsx b/src/app/auth/reset-password/page.tsx
index 30d5461..5eb58d6 100644
--- a/src/app/auth/reset-password/page.tsx
+++ b/src/app/auth/reset-password/page.tsx
@@ -24,11 +24,11 @@ export default function ResetPasswordPage() {
         <div className="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8">
           <div className="flex justify-between items-center">
             <Link href="/" className="flex items-center space-x-3 group">
-              <div className="w-12 h-12 rounded-full bg-gradient-to-r from-blue-500 to-cyan-400 flex items-center justify-center shadow-lg transform transition-transform duration-300 group-hover:scale-110">
-                <BoltIcon size={6} />
+              <div className="automotive-accent w-12 h-12 rounded-full flex items-center justify-center shadow-lg transform transition-transform duration-300 group-hover:scale-110">
+                <span className="text-white font-bold text-lg">TT</span>
               </div>
               <h1 className="text-2xl font-bold theme-text-primary hidden sm:block">
-                TechTorque Auto
+                TechTorque
               </h1>
             </Link>
             <div className="flex items-center space-x-4">
diff --git a/src/app/auth/verify-email/page.tsx b/src/app/auth/verify-email/page.tsx
index c5cc1b0..d2065d3 100644
--- a/src/app/auth/verify-email/page.tsx
+++ b/src/app/auth/verify-email/page.tsx
@@ -27,11 +27,11 @@ export default function VerifyEmailPage() {
         <div className="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8">
           <div className="flex justify-between items-center">
             <Link href="/" className="flex items-center space-x-3 group">
-              <div className="w-12 h-12 rounded-full bg-gradient-to-r from-blue-500 to-cyan-400 flex items-center justify-center shadow-lg transform transition-transform duration-300 group-hover:scale-110">
-                <BoltIcon size={6} />
+              <div className="automotive-accent w-12 h-12 rounded-full flex items-center justify-center shadow-lg transform transition-transform duration-300 group-hover:scale-110">
+                <span className="text-white font-bold text-lg">TT</span>
               </div>
               <h1 className="text-2xl font-bold theme-text-primary hidden sm:block">
-                TechTorque Auto
+                TechTorque
               </h1>
             </Link>
             <ThemeToggle />

From ec02ad924f20fb5cb1a9e5f7d7de308c03e181cd Mon Sep 17 00:00:00 2001
From: Pramudi Samarawickrama <pramupiyumika@gmail.com>
Date: Thu, 20 Nov 2025 17:31:04 +0530
Subject: [PATCH 10/34] style: refactor component styling for readability
 across dashboard pages

---
 src/app/dashboard/payments/page.tsx           | 42 +++++++-------
 .../dashboard/projects/[projectId]/page.tsx   |  8 +--
 src/app/dashboard/projects/page.tsx           | 38 ++++++------
 src/app/dashboard/projects/request/page.tsx   |  8 +--
 src/app/dashboard/schedule/page.tsx           | 40 ++++++-------
 src/app/dashboard/services/page.tsx           | 58 +++++++++----------
 6 files changed, 96 insertions(+), 98 deletions(-)

diff --git a/src/app/dashboard/payments/page.tsx b/src/app/dashboard/payments/page.tsx
index 462d00e..f24ca3e 100644
--- a/src/app/dashboard/payments/page.tsx
+++ b/src/app/dashboard/payments/page.tsx
@@ -142,58 +142,58 @@ export default function PaymentHistoryPage() {
       </div>
 
       {error && (
-        <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-300 px-4 py-3 rounded-lg">
+        <div className="theme-alert-danger">
           {error}
         </div>
       )}
 
       <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
-        <div className="automotive-card p-5">
-          <p className="text-xs uppercase tracking-wide theme-text-muted">Payments recorded</p>
-          <p className="text-2xl font-semibold theme-text-primary">{summary.total}</p>
+        <div className="stat-card">
+          <p className="stat-card-label">Payments recorded</p>
+          <p className="stat-card-value">{summary.total}</p>
         </div>
-        <div className="automotive-card p-5">
-          <p className="text-xs uppercase tracking-wide theme-text-muted">Collected revenue</p>
-          <p className="text-2xl font-semibold theme-text-primary">{formatCurrency(summary.totalCollected)}</p>
+        <div className="stat-card">
+          <p className="stat-card-label">Collected revenue</p>
+          <p className="stat-card-value">{formatCurrency(summary.totalCollected)}</p>
         </div>
-        <div className="automotive-card p-5">
-          <p className="text-xs uppercase tracking-wide theme-text-muted">Pending payments</p>
-          <p className="text-2xl font-semibold theme-text-primary">{summary.pending}</p>
+        <div className="stat-card">
+          <p className="stat-card-label">Pending payments</p>
+          <p className="stat-card-value">{summary.pending}</p>
         </div>
-        <div className="automotive-card p-5">
-          <p className="text-xs uppercase tracking-wide theme-text-muted">Failed payments</p>
-          <p className="text-2xl font-semibold theme-text-primary">{summary.failed}</p>
+        <div className="stat-card">
+          <p className="stat-card-label">Failed payments</p>
+          <p className="stat-card-value">{summary.failed}</p>
         </div>
       </div>
 
       <div className="automotive-card p-6 space-y-4">
         <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-3">
-          <div className="flex flex-wrap gap-2">
+          <div className="filter-tabs-container">
             {STATUS_FILTERS.map((status) => (
               <button
                 key={status}
                 type="button"
                 onClick={() => setStatusFilter(status)}
-                className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+                className={`filter-tab ${
                   statusFilter === status
-                    ? 'bg-blue-600 text-white'
-                    : 'theme-bg-secondary theme-text-secondary hover:bg-blue-50 dark:hover:bg-blue-900/30'
+                    ? 'filter-tab-active'
+                    : 'filter-tab-inactive'
                 }`}
               >
                 {status === 'ALL' ? 'All statuses' : status}
               </button>
             ))}
           </div>
-          <div className="flex flex-wrap gap-2">
+          <div className="filter-tabs-container">
             {METHOD_FILTERS.map((method) => (
               <button
                 key={method}
                 type="button"
                 onClick={() => setMethodFilter(method)}
-                className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+                className={`filter-tab ${
                   methodFilter === method
-                    ? 'bg-blue-600 text-white'
-                    : 'theme-bg-secondary theme-text-secondary hover:bg-blue-50 dark:hover:bg-blue-900/30'
+                    ? 'filter-tab-active'
+                    : 'filter-tab-inactive'
                 }`}
               >
                 {method === 'ALL' ? 'All methods' : method.replace('_', ' ')}
diff --git a/src/app/dashboard/projects/[projectId]/page.tsx b/src/app/dashboard/projects/[projectId]/page.tsx
index 22f6e27..763e21e 100644
--- a/src/app/dashboard/projects/[projectId]/page.tsx
+++ b/src/app/dashboard/projects/[projectId]/page.tsx
@@ -142,12 +142,12 @@ export default function ProjectDetailPage() {
   if (error || !project) {
     return (
       <div className="max-w-5xl mx-auto p-6">
-        <div className="rounded-xl border border-red-200 dark:border-red-800 bg-red-50 dark:bg-red-900/20 p-8 text-center">
-          <h2 className="text-xl font-semibold text-red-700 dark:text-red-400 mb-2">Error Loading Project</h2>
-          <p className="text-red-600 dark:text-red-300 mb-4">{error || 'Project not found'}</p>
+        <div className="rounded-xl theme-alert-danger p-8 text-center">
+          <h2 className="text-xl font-semibold theme-text-danger mb-2">Error Loading Project</h2>
+          <p className="theme-text-danger mb-4">{error || 'Project not found'}</p>
           <button
             onClick={() => router.push('/dashboard/projects')}
-            className="px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-semibold transition-colors"
+            className="px-6 py-3 theme-button-action rounded-lg font-semibold"
           >
             Back to Projects
           </button>
diff --git a/src/app/dashboard/projects/page.tsx b/src/app/dashboard/projects/page.tsx
index 1e9c6dd..3fd2446 100644
--- a/src/app/dashboard/projects/page.tsx
+++ b/src/app/dashboard/projects/page.tsx
@@ -113,41 +113,41 @@ export default function ProjectsPage() {
       </div>
 
       {error && (
-        <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-300 px-4 py-3 rounded-lg">
+        <div className="theme-alert-danger">
           {error}
         </div>
       )}
 
       <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
-        <div className="automotive-card p-5">
-          <p className="text-xs uppercase tracking-wide theme-text-muted">Total projects</p>
-          <p className="text-2xl font-semibold theme-text-primary">{summary.total}</p>
+        <div className="stat-card">
+          <p className="stat-card-label">Total projects</p>
+          <p className="stat-card-value">{summary.total}</p>
         </div>
-        <div className="automotive-card p-5">
-          <p className="text-xs uppercase tracking-wide theme-text-muted">Pending approval</p>
-          <p className="text-2xl font-semibold theme-text-primary">{summary.pending}</p>
+        <div className="stat-card">
+          <p className="stat-card-label">Pending approval</p>
+          <p className="stat-card-value">{summary.pending}</p>
         </div>
-        <div className="automotive-card p-5">
-          <p className="text-xs uppercase tracking-wide theme-text-muted">Active projects</p>
-          <p className="text-2xl font-semibold theme-text-primary">{summary.active}</p>
+        <div className="stat-card">
+          <p className="stat-card-label">Active projects</p>
+          <p className="stat-card-value">{summary.active}</p>
         </div>
-        <div className="automotive-card p-5">
-          <p className="text-xs uppercase tracking-wide theme-text-muted">Completed</p>
-          <p className="text-2xl font-semibold theme-text-primary">{summary.completed}</p>
+        <div className="stat-card">
+          <p className="stat-card-label">Completed</p>
+          <p className="stat-card-value">{summary.completed}</p>
         </div>
       </div>
 
       <div className="automotive-card p-6 space-y-4">
-        <div className="flex flex-wrap gap-2">
+        <div className="filter-tabs-container">
           {STATUS_FILTERS.map((status) => (
             <button
               key={status}
               type="button"
               onClick={() => setStatusFilter(status)}
-              className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+              className={`filter-tab ${
                 statusFilter === status
-                  ? 'bg-blue-600 text-white'
-                  : 'theme-bg-secondary theme-text-secondary hover:bg-blue-50 dark:hover:bg-blue-900/30'
+                  ? 'filter-tab-active'
+                  : 'filter-tab-inactive'
               }`}
             >
               {status === 'ALL' ? 'All' : status.replace('_', ' ')}
@@ -158,7 +158,7 @@ export default function ProjectsPage() {
         {filteredProjects.length === 0 ? (
           <div className="py-12 text-center">
             <svg
-              className="mx-auto w-24 h-24 text-gray-400 dark:text-gray-600 mb-4"
+              className="mx-auto w-24 h-24 theme-text-muted mb-4"
               fill="none"
               stroke="currentColor"
               viewBox="0 0 24 24"
@@ -183,7 +183,7 @@ export default function ProjectsPage() {
               <Link
                 key={project.id}
                 href={`/dashboard/projects/${project.id}`}
-                className="block rounded-xl border border-gray-200 dark:border-gray-800 hover:border-blue-400 dark:hover:border-blue-500 transition-colors"
+                className="block rounded-xl border border-gray-200 dark:border-gray-800 hover:border-blue-400 dark:hover:border-blue-500 hover:shadow-lg transition-all"
               >
                 <div className="p-5">
                   <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3 mb-4">
diff --git a/src/app/dashboard/projects/request/page.tsx b/src/app/dashboard/projects/request/page.tsx
index b397221..0800fb3 100644
--- a/src/app/dashboard/projects/request/page.tsx
+++ b/src/app/dashboard/projects/request/page.tsx
@@ -118,7 +118,7 @@ export default function RequestProjectPage() {
           <p className="theme-text-muted mb-6">You need to add a vehicle before requesting a project.</p>
           <button
             onClick={() => router.push('/dashboard/vehicles/add')}
-            className="px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-semibold transition-colors"
+            className="px-6 py-3 theme-button-action rounded-lg font-semibold"
           >
             Add Vehicle
           </button>
@@ -135,8 +135,8 @@ export default function RequestProjectPage() {
       </div>
 
       {error && (
-        <div className="mb-6 p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
-          <p className="text-red-700 dark:text-red-400 text-sm">{error}</p>
+        <div className="mb-6 theme-alert-danger">
+          <p className="theme-text-danger text-sm">{error}</p>
         </div>
       )}
 
@@ -255,7 +255,7 @@ export default function RequestProjectPage() {
           <button
             type="submit"
             disabled={loading}
-            className="px-6 py-3 bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white rounded-lg font-semibold transition-colors disabled:cursor-not-allowed flex items-center gap-2"
+            className="px-6 py-3 theme-button-action rounded-lg font-semibold flex items-center gap-2"
           >
             {loading ? (
               <>
diff --git a/src/app/dashboard/schedule/page.tsx b/src/app/dashboard/schedule/page.tsx
index b792d1c..662e7d2 100644
--- a/src/app/dashboard/schedule/page.tsx
+++ b/src/app/dashboard/schedule/page.tsx
@@ -99,7 +99,7 @@ export default function SchedulePage() {
   if (!hasAccess) {
     return (
       <div className="max-w-4xl mx-auto p-6">
-        <div className="rounded-xl border border-red-200 dark:border-red-800 bg-red-50 dark:bg-red-900/20 p-8 text-center">
+        <div className="rounded-xl theme-alert-danger p-8 text-center">
           <svg
             className="mx-auto w-16 h-16 text-red-600 dark:text-red-400 mb-4"
             fill="none"
@@ -129,7 +129,7 @@ export default function SchedulePage() {
       </div>
 
       {/* Date Navigation */}
-      <div className="mb-6 rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/50 p-6">
+      <div className="dashboard-content-card mb-6">
         <div className="flex flex-col sm:flex-row items-center justify-between gap-4">
           <div className="flex items-center gap-3">
             <button
@@ -146,7 +146,7 @@ export default function SchedulePage() {
                 type="date"
                 value={selectedDate}
                 onChange={(e) => setSelectedDate(e.target.value)}
-                className="px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 theme-text-primary focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                className="form-input"
               />
               <p className="text-sm theme-text-muted mt-1">{formatDate(selectedDate)}</p>
             </div>
@@ -171,40 +171,40 @@ export default function SchedulePage() {
 
       {/* Stats */}
       <div className="grid gap-4 sm:grid-cols-4 mb-6">
-        <div className="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/50 p-5">
-          <p className="text-xs uppercase tracking-wide theme-text-muted">Total</p>
-          <p className="text-2xl font-semibold theme-text-primary">{appointments.length}</p>
+        <div className="stat-card">
+          <p className="stat-card-label">Total</p>
+          <p className="stat-card-value">{appointments.length}</p>
         </div>
-        <div className="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/50 p-5">
-          <p className="text-xs uppercase tracking-wide theme-text-muted">Confirmed</p>
-          <p className="text-2xl font-semibold text-blue-600 dark:text-blue-400">
+        <div className="stat-card">
+          <p className="stat-card-label">Confirmed</p>
+          <p className="stat-card-value text-blue-600 dark:text-blue-400">
             {appointments.filter(a => a.status === 'CONFIRMED').length}
           </p>
         </div>
-        <div className="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/50 p-5">
-          <p className="text-xs uppercase tracking-wide theme-text-muted">In Progress</p>
-          <p className="text-2xl font-semibold text-purple-600 dark:text-purple-400">
+        <div className="stat-card">
+          <p className="stat-card-label">In Progress</p>
+          <p className="stat-card-value text-purple-600 dark:text-purple-400">
             {appointments.filter(a => a.status === 'IN_PROGRESS').length}
           </p>
         </div>
-        <div className="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/50 p-5">
-          <p className="text-xs uppercase tracking-wide theme-text-muted">Completed</p>
-          <p className="text-2xl font-semibold text-green-600 dark:text-green-400">
+        <div className="stat-card">
+          <p className="stat-card-label">Completed</p>
+          <p className="stat-card-value text-green-600 dark:text-green-400">
             {appointments.filter(a => a.status === 'COMPLETED').length}
           </p>
         </div>
       </div>
 
       {/* Appointments Timeline */}
-      <div className="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/50 overflow-hidden">
-        <div className="px-6 py-4 border-b border-gray-200 dark:border-gray-800">
+      <div className="dashboard-content-card overflow-hidden">
+        <div className="px-6 py-4 border-b theme-border">
           <h2 className="text-lg font-semibold theme-text-primary">Schedule</h2>
         </div>
         
         {appointments.length === 0 ? (
-          <div className="p-12 text-center">
+          <div className="empty-state">
             <svg
-              className="mx-auto w-16 h-16 text-gray-400 dark:text-gray-600 mb-4"
+              className="mx-auto w-16 h-16 theme-text-muted mb-4"
               fill="none"
               stroke="currentColor"
               viewBox="0 0 24 24"
@@ -219,7 +219,7 @@ export default function SchedulePage() {
         ) : (
           <div className="divide-y divide-gray-200 dark:divide-gray-800">
             {appointments.map((appointment) => (
-              <div key={appointment.id} className="p-6 hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
+              <div key={appointment.id} className="p-6 hover:theme-bg-hover transition-colors">
                 <div className="flex items-start gap-4">
                   {/* Time */}
                   <div className="flex-shrink-0 w-24 text-right">
diff --git a/src/app/dashboard/services/page.tsx b/src/app/dashboard/services/page.tsx
index 54929fb..e61e328 100644
--- a/src/app/dashboard/services/page.tsx
+++ b/src/app/dashboard/services/page.tsx
@@ -73,47 +73,45 @@ export default function ServicesPage() {
 
       {/* Stats */}
       <div className="grid gap-4 sm:grid-cols-4 mb-6">
-        <div className="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/50 p-5">
-          <p className="text-xs uppercase tracking-wide theme-text-muted">Total jobs</p>
-          <p className="text-2xl font-semibold theme-text-primary">{services.length}</p>
+        <div className="stat-card">
+          <p className="stat-card-label">Total jobs</p>
+          <p className="stat-card-value">{services.length}</p>
         </div>
-        <div className="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/50 p-5">
-          <p className="text-xs uppercase tracking-wide theme-text-muted">Pending</p>
-          <p className="text-2xl font-semibold text-yellow-600 dark:text-yellow-400">
+        <div className="stat-card">
+          <p className="stat-card-label">Pending</p>
+          <p className="stat-card-value text-yellow-600 dark:text-yellow-400">
             {services.filter(s => s.status === 'PENDING').length}
           </p>
         </div>
-        <div className="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/50 p-5">
-          <p className="text-xs uppercase tracking-wide theme-text-muted">In Progress</p>
-          <p className="text-2xl font-semibold text-blue-600 dark:text-blue-400">
+        <div className="stat-card">
+          <p className="stat-card-label">In Progress</p>
+          <p className="stat-card-value text-blue-600 dark:text-blue-400">
             {services.filter(s => s.status === 'IN_PROGRESS').length}
           </p>
         </div>
-        <div className="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/50 p-5">
-          <p className="text-xs uppercase tracking-wide theme-text-muted">Completed</p>
-          <p className="text-2xl font-semibold text-green-600 dark:text-green-400">
+        <div className="stat-card">
+          <p className="stat-card-label">Completed</p>
+          <p className="stat-card-value text-green-600 dark:text-green-400">
             {services.filter(s => s.status === 'COMPLETED').length}
           </p>
         </div>
       </div>
 
       {/* Filters */}
-      <div className="mb-6">
-        <div className="flex flex-wrap gap-2">
-          {statusFilters.map((filter) => (
-            <button
-              key={filter}
-              onClick={() => setStatusFilter(filter)}
-              className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
-                statusFilter === filter
-                  ? 'bg-blue-600 text-white'
-                  : 'theme-bg-secondary theme-text-secondary hover:bg-blue-50 dark:hover:bg-blue-900/30'
-              }`}
-            >
-              {filter === 'ALL' ? 'All' : filter.replace('_', ' ')}
-            </button>
-          ))}
-        </div>
+      <div className="filter-tabs-container mb-6">
+        {statusFilters.map((filter) => (
+          <button
+            key={filter}
+            onClick={() => setStatusFilter(filter)}
+            className={`filter-tab ${
+              statusFilter === filter
+                ? 'filter-tab-active'
+                : 'filter-tab-inactive'
+            }`}
+          >
+            {filter === 'ALL' ? 'All' : filter.replace('_', ' ')}
+          </button>
+        ))}
       </div>
 
       {/* Services List */}
@@ -121,7 +119,7 @@ export default function ServicesPage() {
         {filteredServices.length === 0 ? (
           <div className="rounded-xl border-2 border-dashed border-gray-300 dark:border-gray-700 p-12 text-center">
             <svg
-              className="mx-auto w-16 h-16 text-gray-400 dark:text-gray-600 mb-4"
+              className="mx-auto w-16 h-16 theme-text-muted mb-4"
               fill="none"
               stroke="currentColor"
               viewBox="0 0 24 24"
@@ -140,7 +138,7 @@ export default function ServicesPage() {
             <Link
               key={service.id}
               href={`/dashboard/services/${service.id}`}
-              className="block rounded-xl border border-gray-200 dark:border-gray-800 hover:border-blue-400 dark:hover:border-blue-500 transition-colors"
+              className="block rounded-xl border border-gray-200 dark:border-gray-800 hover:border-blue-400 dark:hover:border-blue-500 hover:shadow-lg transition-all"
             >
               <div className="p-6">
                 <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3 mb-4">

From 6013fc97d5a36c4a439ed2eb1e4bd8979f610058 Mon Sep 17 00:00:00 2001
From: Pramudi Samarawickrama <pramupiyumika@gmail.com>
Date: Thu, 20 Nov 2025 17:32:14 +0530
Subject: [PATCH 11/34] style: update error message styling, vehicle and
 profile pages

---
 src/app/dashboard/time-logs/page.tsx          | 58 +++++++++----------
 .../dashboard/vehicles/[vehicleId]/page.tsx   |  2 +-
 src/app/dashboard/vehicles/page.tsx           |  4 +-
 src/app/profile/page.tsx                      |  6 +-
 src/components/TimeTracker.tsx                |  4 +-
 5 files changed, 37 insertions(+), 37 deletions(-)

diff --git a/src/app/dashboard/time-logs/page.tsx b/src/app/dashboard/time-logs/page.tsx
index 8f29ec2..15369fe 100644
--- a/src/app/dashboard/time-logs/page.tsx
+++ b/src/app/dashboard/time-logs/page.tsx
@@ -114,7 +114,7 @@ export default function TimeLogsPage() {
   if (!hasAccess) {
     return (
       <div className="max-w-4xl mx-auto p-6">
-        <div className="rounded-xl border border-red-200 dark:border-red-800 bg-red-50 dark:bg-red-900/20 p-8 text-center">
+        <div className="rounded-xl theme-alert-danger p-8 text-center">
           <svg
             className="mx-auto w-16 h-16 text-red-600 dark:text-red-400 mb-4"
             fill="none"
@@ -176,11 +176,11 @@ export default function TimeLogsPage() {
 
         {/* Add Time Log Form */}
         {showForm && (
-          <form onSubmit={handleSubmit} className="mb-6 rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/50 p-6">
-            <h3 className="text-lg font-semibold theme-text-primary mb-4">Log Work Hours</h3>
+          <form onSubmit={handleSubmit} className="mb-6 rounded-xl border border-gray-200 dark:border-gray-800 bg-gradient-to-br from-blue-50 to-cyan-50 dark:from-gray-900/50 dark:to-gray-800/50 p-6 shadow-sm">
+            <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">Log Work Hours</h3>
             <div className="grid gap-4 sm:grid-cols-2">
               <div>
-                <label htmlFor="workDate" className="block text-sm font-semibold theme-text-primary mb-2">
+                <label htmlFor="workDate" className="block text-sm font-semibold text-gray-700 dark:text-gray-200 mb-2">
                   Work Date <span className="text-red-500">*</span>
                 </label>
                 <input
@@ -190,11 +190,11 @@ export default function TimeLogsPage() {
                   value={formData.date}
                   onChange={(e) => setFormData({ ...formData, date: e.target.value })}
                   max={new Date().toISOString().split('T')[0]}
-                  className="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 theme-text-primary focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                  className="form-input"
                 />
               </div>
               <div>
-                <label htmlFor="hoursWorked" className="block text-sm font-semibold theme-text-primary mb-2">
+                <label htmlFor="hoursWorked" className="block text-sm font-semibold text-gray-700 dark:text-gray-200 mb-2">
                   Hours Worked <span className="text-red-500">*</span>
                 </label>
                 <input
@@ -206,18 +206,18 @@ export default function TimeLogsPage() {
                   value={formData.hours || ''}
                   onChange={(e) => setFormData({ ...formData, hours: parseFloat(e.target.value) })}
                   placeholder="e.g., 8.5"
-                  className="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 theme-text-primary focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                  className="form-input"
                 />
               </div>
               <div>
-                <label htmlFor="taskType" className="block text-sm font-semibold theme-text-primary mb-2">
+                <label htmlFor="taskType" className="block text-sm font-semibold text-gray-700 dark:text-gray-200 mb-2">
                   Task Type
                 </label>
                 <select
                   id="taskType"
                   value={formData.workType}
                   onChange={(e) => setFormData({ ...formData, workType: e.target.value })}
-                  className="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 theme-text-primary focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                  className="form-select"
                 >
                   <option value="">Select type...</option>
                   <option value="Service">Service Work</option>
@@ -230,7 +230,7 @@ export default function TimeLogsPage() {
                 </select>
               </div>
               <div>
-                <label htmlFor="serviceId" className="block text-sm font-semibold theme-text-primary mb-2">
+                <label htmlFor="serviceId" className="block text-sm font-semibold text-gray-700 dark:text-gray-200 mb-2">
                   Service ID <span className="text-red-500">*</span>
                 </label>
                 <input
@@ -240,12 +240,12 @@ export default function TimeLogsPage() {
                   value={formData.serviceId || ''}
                   onChange={(e) => setFormData({ ...formData, serviceId: e.target.value })}
                   placeholder="Enter service ID"
-                  className="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 theme-text-primary focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                  className="form-input"
                 />
               </div>
             </div>
             <div className="mt-4">
-              <label htmlFor="description" className="block text-sm font-semibold theme-text-primary mb-2">
+              <label htmlFor="description" className="block text-sm font-semibold text-gray-700 dark:text-gray-200 mb-2">
                 Description
               </label>
               <textarea
@@ -254,7 +254,7 @@ export default function TimeLogsPage() {
                 value={formData.description}
                 onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                 placeholder="Describe the work performed..."
-                className="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 theme-text-primary focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none"
+                className="form-textarea"
               />
             </div>
             <div className="mt-4 flex justify-end gap-3">
@@ -280,17 +280,17 @@ export default function TimeLogsPage() {
 
       {/* Stats */}
       <div className="grid gap-4 sm:grid-cols-3 mb-8">
-        <div className="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/50 p-5">
-          <p className="text-xs uppercase tracking-wide theme-text-muted">Total hours</p>
-          <p className="text-2xl font-semibold theme-text-primary">{totalHours.toFixed(1)}h</p>
+        <div className="stat-card">
+          <p className="stat-card-label">Total hours</p>
+          <p className="stat-card-value">{totalHours.toFixed(1)}h</p>
         </div>
-        <div className="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/50 p-5">
-          <p className="text-xs uppercase tracking-wide theme-text-muted">Total logs</p>
-          <p className="text-2xl font-semibold theme-text-primary">{filteredLogs.length}</p>
+        <div className="stat-card">
+          <p className="stat-card-label">Total logs</p>
+          <p className="stat-card-value">{filteredLogs.length}</p>
         </div>
-        <div className="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/50 p-5">
-          <p className="text-xs uppercase tracking-wide theme-text-muted">This week</p>
-          <p className="text-2xl font-semibold theme-text-primary">
+        <div className="stat-card">
+          <p className="stat-card-label">This week</p>
+          <p className="stat-card-value">
             {filteredLogs
               .filter(l => {
                 const weekAgo = Date.now() - 7 * 24 * 60 * 60 * 1000;
@@ -303,15 +303,15 @@ export default function TimeLogsPage() {
       </div>
 
       {/* Time Logs Table */}
-      <div className="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/50 overflow-hidden">
-        <div className="px-6 py-4 border-b border-gray-200 dark:border-gray-800">
+      <div className="dashboard-content-card overflow-hidden">
+        <div className="px-6 py-4 border-b theme-border">
           <h2 className="text-lg font-semibold theme-text-primary">Recent Activity</h2>
         </div>
 
         {filteredLogs.length === 0 ? (
-          <div className="p-12 text-center">
+          <div className="empty-state">
             <svg
-              className="mx-auto w-16 h-16 text-gray-400 dark:text-gray-600 mb-4"
+              className="mx-auto w-16 h-16 theme-text-muted mb-4"
               fill="none"
               stroke="currentColor"
               viewBox="0 0 24 24"
@@ -324,7 +324,7 @@ export default function TimeLogsPage() {
         ) : (
           <div className="overflow-x-auto">
             <table className="w-full">
-              <thead className="bg-gray-50 dark:bg-gray-800/50">
+              <thead className="theme-bg-tertiary">
                 <tr>
                   <th className="px-6 py-3 text-left text-xs font-semibold theme-text-muted uppercase tracking-wider">Date</th>
                   <th className="px-6 py-3 text-left text-xs font-semibold theme-text-muted uppercase tracking-wider">Hours</th>
@@ -347,7 +347,7 @@ export default function TimeLogsPage() {
                   filteredLogs.map((log, index) => {
                     const isOwnLog = profile?.username === log.employeeId;
                     return (
-                      <tr key={log.id || `log-${index}`} className="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
+                      <tr key={log.id || `log-${index}`} className="hover:theme-bg-hover transition-colors">
                         <td className="px-6 py-4 whitespace-nowrap theme-text-primary font-medium">
                           {formatDate(log.date)}
                         </td>
@@ -374,7 +374,7 @@ export default function TimeLogsPage() {
                               Delete
                             </button>
                           ) : (
-                            <span className="text-gray-400 dark:text-gray-600 text-sm">—</span>
+                            <span className="theme-text-muted text-sm">—</span>
                           )}
                         </td>
                       </tr>
diff --git a/src/app/dashboard/vehicles/[vehicleId]/page.tsx b/src/app/dashboard/vehicles/[vehicleId]/page.tsx
index 854f162..d0c1950 100644
--- a/src/app/dashboard/vehicles/[vehicleId]/page.tsx
+++ b/src/app/dashboard/vehicles/[vehicleId]/page.tsx
@@ -72,7 +72,7 @@ export default function VehicleDetailsPage() {
   if (error || !vehicle) {
     return (
       <div className="container mx-auto px-4 py-8 theme-bg-primary min-h-screen">
-        <div className="bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-300 px-4 py-3 rounded-lg">
+        <div className="theme-alert-danger">
           {error || 'Vehicle not found'}
         </div>
         <button
diff --git a/src/app/dashboard/vehicles/page.tsx b/src/app/dashboard/vehicles/page.tsx
index f9a3b5e..a7ed4f8 100644
--- a/src/app/dashboard/vehicles/page.tsx
+++ b/src/app/dashboard/vehicles/page.tsx
@@ -75,7 +75,7 @@ export default function VehiclesPage() {
       </div>
 
       {error && (
-        <div className="bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-300 px-4 py-3 rounded-lg mb-6">
+        <div className="theme-alert-danger mb-6">
           {error}
         </div>
       )}
@@ -114,7 +114,7 @@ export default function VehiclesPage() {
       {vehicles.length === 0 ? (
         <div className="text-center py-16 automotive-card">
           <svg
-            className="mx-auto w-24 h-24 text-gray-400 dark:text-gray-600 mb-4"
+            className="mx-auto w-24 h-24 theme-text-muted mb-4"
             fill="none"
             stroke="currentColor"
             viewBox="0 0 24 24"
diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx
index 13c1599..8890c37 100644
--- a/src/app/profile/page.tsx
+++ b/src/app/profile/page.tsx
@@ -278,13 +278,13 @@ export default function ProfilePage() {
         </div>
 
         {error && (
-          <div className="mb-6 p-4 bg-red-50 dark:bg-red-900/20 rounded-lg border border-red-200 dark:border-red-800">
-            <p className="text-sm text-red-600 dark:text-red-400">{error}</p>
+          <div className="mb-6 theme-alert-danger">
+            <p className="text-sm">{error}</p>
           </div>
         )}
 
         {success && (
-          <div className="mb-6 p-4 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800">
+          <div className="mb-6 theme-alert-success">
             <p className="text-sm text-green-600 dark:text-green-400">
               {success}
             </p>
diff --git a/src/components/TimeTracker.tsx b/src/components/TimeTracker.tsx
index eeeffe9..ef1d167 100644
--- a/src/components/TimeTracker.tsx
+++ b/src/components/TimeTracker.tsx
@@ -100,7 +100,7 @@ export default function TimeTracker({ appointmentId, onClockIn, onClockOut }: Ti
     return (
       <div>
         {error && (
-          <div className="mb-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-300 px-4 py-3 rounded-lg text-sm">
+          <div className="mb-4 theme-alert-danger text-sm">
             {error}
           </div>
         )}
@@ -121,7 +121,7 @@ export default function TimeTracker({ appointmentId, onClockIn, onClockOut }: Ti
   return (
     <div className="space-y-4">
       {error && (
-        <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-300 px-4 py-3 rounded-lg text-sm">
+        <div className="theme-alert-danger text-sm">
           {error}
         </div>
       )}

From 97e9022fcb7b5bf4b56dc2e1b27ee4194952d9dd Mon Sep 17 00:00:00 2001
From: Dhanuja416 <dhanuja.surasingha@gail.com>
Date: Fri, 21 Nov 2025 14:51:05 +0530
Subject: [PATCH 12/34] style: remove demo user information from login page

---
 src/app/auth/login/page.tsx | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/src/app/auth/login/page.tsx b/src/app/auth/login/page.tsx
index cb2e2c2..ad189a0 100644
--- a/src/app/auth/login/page.tsx
+++ b/src/app/auth/login/page.tsx
@@ -104,15 +104,7 @@ export default function LoginPage() {
                     <p className="mt-4 text-lg theme-text-muted">
                         Sign in to access your dashboard.
                     </p>
-                    <div className="mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
-                      <p className="text-sm font-semibold theme-text-primary mb-2">Demo Users (Real Backend):</p>
-                      <div className="text-xs theme-text-muted space-y-1">
-                        <p><strong>SuperAdmin:</strong> superadmin / superadmin123</p>
-                        <p><strong>Admin:</strong> admin / admin123</p>
-                        <p><strong>Employee:</strong> employee / emp123</p>
-                        <p><strong>Customer:</strong> customer / cust123</p>
-                      </div>
-                    </div>
+                    
                 </div>
 
         <form className="space-y-6" onSubmit={handleSubmit}>

From 9b0c77b39ec7406b5974946b46d4901b3c0b90f0 Mon Sep 17 00:00:00 2001
From: RandithaK <bharkula3@gmail.com>
Date: Sat, 22 Nov 2025 02:31:34 +0530
Subject: [PATCH 13/34] fix: prevent `apiClient` redirect on 401 for login
 requests and add error handling to `authService` login.

---
 src/lib/apiClient.ts        | 10 +++++++---
 src/services/authService.ts | 28 ++++++++++++++++++----------
 2 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/src/lib/apiClient.ts b/src/lib/apiClient.ts
index ec11b5d..9b0c34c 100644
--- a/src/lib/apiClient.ts
+++ b/src/lib/apiClient.ts
@@ -54,9 +54,13 @@ apiClient.interceptors.response.use(
   (response) => response,
   (error) => {
     if (error.response?.status === 401) {
-      Cookies.remove('tt_access_token');
-      if (typeof window !== 'undefined') {
-        window.location.href = '/auth/login';
+      // Don't redirect if we're already on the login page or if it's a login request
+      const isLoginRequest = error.config?.url?.includes('/auth/login');
+      if (!isLoginRequest) {
+        Cookies.remove('tt_access_token');
+        if (typeof window !== 'undefined') {
+          window.location.href = '/auth/login';
+        }
       }
     }
 
diff --git a/src/services/authService.ts b/src/services/authService.ts
index 468f49f..cfe8fc2 100644
--- a/src/services/authService.ts
+++ b/src/services/authService.ts
@@ -12,17 +12,25 @@ const TOKEN_COOKIE = 'tt_access_token';
 
 export const authService = {
   async login(payload: LoginRequest) {
-    // api baseURL already includes '/api/v1'
-    const res = await api.post('/auth/login', payload);
-    // backend returns token in body
-    const token = res.data?.token || res.data?.accessToken || null;
-    console.log('Login response:', res.data);
-    console.log('Extracted token:', token);
-    if (token) {
-      Cookies.set(TOKEN_COOKIE, token, { expires: 7 });
-      console.log('Token saved to cookie');
+    try {
+      // api baseURL already includes '/api/v1'
+      const res = await api.post('/auth/login', payload);
+      // backend returns token in body
+      const token = res.data?.token || res.data?.accessToken || null;
+      console.log('Login response:', res.data);
+      console.log('Extracted token:', token);
+      if (token) {
+        Cookies.set(TOKEN_COOKIE, token, { expires: 7 });
+        console.log('Token saved to cookie');
+      }
+      return res.data;
+    } catch (error: any) {
+      console.error('Login error:', error);
+      if (error.response && error.response.data && error.response.data.message) {
+        throw new Error(error.response.data.message);
+      }
+      throw error;
     }
-    return res.data;
   },
 
 

From 34dd3fd499280312a56d0a493d132743fc094798 Mon Sep 17 00:00:00 2001
From: RandithaK <bharkula3@gmail.com>
Date: Sat, 22 Nov 2025 02:31:44 +0530
Subject: [PATCH 14/34] fix: improve error handling in authService.login to
 handle Axios errors

---
 src/services/authService.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/services/authService.ts b/src/services/authService.ts
index cfe8fc2..8697ebf 100644
--- a/src/services/authService.ts
+++ b/src/services/authService.ts
@@ -1,5 +1,6 @@
 "use client";
 import api from '../lib/apiClient';
+import axios from 'axios';
 import Cookies from 'js-cookie';
 import type { 
   LoginRequest, 
@@ -24,9 +25,9 @@ export const authService = {
         console.log('Token saved to cookie');
       }
       return res.data;
-    } catch (error: any) {
+    } catch (error: unknown) {
       console.error('Login error:', error);
-      if (error.response && error.response.data && error.response.data.message) {
+      if (axios.isAxiosError(error) && error.response?.data?.message) {
         throw new Error(error.response.data.message);
       }
       throw error;

From 87b8e5726aafea99d2aa219ff46a9a7c0d5f1bef Mon Sep 17 00:00:00 2001
From: RandithaK <bharkula3@gmail.com>
Date: Sat, 22 Nov 2025 02:43:12 +0530
Subject: [PATCH 15/34] fix: update service type handling in appointment
 booking to use form state

---
 src/app/components/NotificationBell.tsx      | 2 +-
 src/app/dashboard/appointments/book/page.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/components/NotificationBell.tsx b/src/app/components/NotificationBell.tsx
index d80f410..390b073 100644
--- a/src/app/components/NotificationBell.tsx
+++ b/src/app/components/NotificationBell.tsx
@@ -85,7 +85,7 @@ export default function NotificationBell() {
       </button>
 
       {open && (
-        <div className="absolute right-0 top-full mt-2 w-80 automotive-card p-4 shadow-xl z-50 max-h-[500px] flex flex-col">
+        <div className="absolute right-0 top-full mt-1 w-80 automotive-card p-4 shadow-xl z-50 max-h-[500px] flex flex-col origin-top-right">
           <div className="flex items-center justify-between mb-4">
             <span className="font-semibold theme-text-primary text-base">Notifications</span>
             {notifications.length > 0 && (
diff --git a/src/app/dashboard/appointments/book/page.tsx b/src/app/dashboard/appointments/book/page.tsx
index 5dfde55..f9077e0 100644
--- a/src/app/dashboard/appointments/book/page.tsx
+++ b/src/app/dashboard/appointments/book/page.tsx
@@ -107,7 +107,7 @@ export default function BookAppointmentPage() {
         setCheckingAvailability(true)
         const result = await appointmentService.checkAvailability({
           date: form.date,
-          serviceType: selectedServiceType?.name || '',
+          serviceType: form.serviceTypeId,
           duration,
         })
         setAvailability(result)

From 8b47b2042c037e130197e00aa6a8f744e68052fe Mon Sep 17 00:00:00 2001
From: RandithaK <bharkula3@gmail.com>
Date: Sat, 22 Nov 2025 03:12:05 +0530
Subject: [PATCH 16/34] fix: adjust notification dropdown position to improve
 visibility

---
 src/app/components/NotificationBell.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/components/NotificationBell.tsx b/src/app/components/NotificationBell.tsx
index 390b073..3cd98bb 100644
--- a/src/app/components/NotificationBell.tsx
+++ b/src/app/components/NotificationBell.tsx
@@ -85,7 +85,7 @@ export default function NotificationBell() {
       </button>
 
       {open && (
-        <div className="absolute right-0 top-full mt-1 w-80 automotive-card p-4 shadow-xl z-50 max-h-[500px] flex flex-col origin-top-right">
+        <div className="fixed right-4 top-64 w-80 automotive-card p-4 shadow-xl z-50 max-h-[500px] flex flex-col origin-top-right">
           <div className="flex items-center justify-between mb-4">
             <span className="font-semibold theme-text-primary text-base">Notifications</span>
             {notifications.length > 0 && (

From 161ec8109546c27fd636742c2eb836fa9c137134 Mon Sep 17 00:00:00 2001
From: RandithaK <bharkula3@gmail.com>
Date: Sat, 22 Nov 2025 03:14:34 +0530
Subject: [PATCH 17/34] fix: enhance notification button styling with ripple
 effect and hover animation

---
 src/app/components/NotificationBell.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/app/components/NotificationBell.tsx b/src/app/components/NotificationBell.tsx
index 3cd98bb..adc2abc 100644
--- a/src/app/components/NotificationBell.tsx
+++ b/src/app/components/NotificationBell.tsx
@@ -58,11 +58,11 @@ export default function NotificationBell() {
       <button
         type="button"
         onClick={handleToggle}
-        className="relative inline-flex items-center justify-center w-10 h-10 rounded-full theme-button-secondary"
+        className="theme-toggle relative"
         aria-label="Notifications"
       >
         <svg
-          className="w-5 h-5 theme-text-primary"
+          className="w-5 h-5 transition-transform duration-300 hover:rotate-12"
           fill="none"
           stroke="currentColor"
           viewBox="0 0 24 24"
@@ -82,6 +82,8 @@ export default function NotificationBell() {
         {isConnected && (
           <span className="absolute bottom-0 right-0 w-2 h-2 bg-green-500 rounded-full border-2 border-white dark:border-gray-800" title="Real-time connected"></span>
         )}
+        {/* Ripple effect */}
+        <div className="absolute inset-0 rounded-full bg-current opacity-0 transition-opacity duration-200 pointer-events-none"></div>
       </button>
 
       {open && (

From f6d96f51c84d710e6c4fd90e822bd5569a34b0b4 Mon Sep 17 00:00:00 2001
From: RandithaK <bharkula3@gmail.com>
Date: Sat, 22 Nov 2025 18:37:25 +0530
Subject: [PATCH 18/34] fix: improve data handling in service responses to
 ensure consistent return types

---
 src/app/components/EditVehicleForm.tsx          |  4 +---
 src/app/dashboard/admin/service-types/page.tsx  |  5 -----
 src/app/dashboard/projects/page.tsx             | 14 +++++++-------
 src/app/dashboard/vehicles/[vehicleId]/page.tsx |  4 ++--
 src/services/adminService.ts                    |  6 ++++--
 src/services/appointmentService.ts              |  5 +++--
 src/services/projectService.ts                  |  5 +++--
 7 files changed, 20 insertions(+), 23 deletions(-)

diff --git a/src/app/components/EditVehicleForm.tsx b/src/app/components/EditVehicleForm.tsx
index 48f10a1..a99e003 100644
--- a/src/app/components/EditVehicleForm.tsx
+++ b/src/app/components/EditVehicleForm.tsx
@@ -97,10 +97,8 @@ export default function EditVehicleForm({
             name="licensePlate"
             value={formData.licensePlate}
             onChange={handleChange}
-            className="w-full px-4 py-3 border rounded-xl focus:ring-2 focus:ring-blue-500 transition-all theme-bg-primary theme-text-primary automotive-border opacity-60 cursor-not-allowed"
+            className="w-full px-4 py-3 border rounded-xl focus:ring-2 focus:ring-blue-500 transition-all theme-bg-primary theme-text-primary automotive-border"
             placeholder="e.g., ABC-1234"
-            disabled
-            readOnly
           />
         </div>
       </div>
diff --git a/src/app/dashboard/admin/service-types/page.tsx b/src/app/dashboard/admin/service-types/page.tsx
index aa33f0d..b38d30a 100644
--- a/src/app/dashboard/admin/service-types/page.tsx
+++ b/src/app/dashboard/admin/service-types/page.tsx
@@ -135,11 +135,6 @@ export default function ServiceTypesPage() {
       console.log(`Toggling service ${service.id} from ${service.active} to ${newStatus}`);
       
       await adminService.updateServiceType(service.id, {
-        name: service.name,
-        category: service.category,
-        description: service.description || '',
-        price: service.basePriceLKR,
-        durationMinutes: service.estimatedDurationMinutes,
         active: newStatus,
       });
       
diff --git a/src/app/dashboard/projects/page.tsx b/src/app/dashboard/projects/page.tsx
index 3fd2446..3a6b812 100644
--- a/src/app/dashboard/projects/page.tsx
+++ b/src/app/dashboard/projects/page.tsx
@@ -10,13 +10,13 @@ const STATUS_FILTERS = ['ALL', 'REQUESTED', 'QUOTE_PENDING', 'QUOTE_SUBMITTED',
 type StatusFilter = typeof STATUS_FILTERS[number]
 
 const statusStyles: Record<string, string> = {
-  REQUESTED: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300',
-  QUOTE_PENDING: 'bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300',
-  QUOTE_SUBMITTED: 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300',
-  QUOTE_APPROVED: 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300',
-  IN_PROGRESS: 'bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300',
-  COMPLETED: 'bg-gray-100 text-gray-800 dark:bg-gray-900/30 dark:text-gray-300',
-  CANCELLED: 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300',
+  REQUESTED: 'bg-yellow-200 text-yellow-900 dark:bg-yellow-900/30 dark:text-yellow-300',
+  QUOTE_PENDING: 'bg-amber-200 text-amber-900 dark:bg-amber-900/30 dark:text-amber-300',
+  QUOTE_SUBMITTED: 'bg-blue-200 text-blue-900 dark:bg-blue-900/30 dark:text-blue-300',
+  QUOTE_APPROVED: 'bg-green-200 text-green-900 dark:bg-green-900/30 dark:text-green-300',
+  IN_PROGRESS: 'bg-purple-200 text-purple-900 dark:bg-purple-900/30 dark:text-purple-300',
+  COMPLETED: 'bg-gray-200 text-gray-900 dark:bg-gray-900/30 dark:text-gray-300',
+  CANCELLED: 'bg-red-200 text-red-900 dark:bg-red-900/30 dark:text-red-300',
 }
 
 const formatDate = (value?: string) => {
diff --git a/src/app/dashboard/vehicles/[vehicleId]/page.tsx b/src/app/dashboard/vehicles/[vehicleId]/page.tsx
index cb5aba1..ccbecee 100644
--- a/src/app/dashboard/vehicles/[vehicleId]/page.tsx
+++ b/src/app/dashboard/vehicles/[vehicleId]/page.tsx
@@ -173,8 +173,8 @@ export default function VehicleDetailsPage() {
         </div>
 
         {/* Right: Details card */}
-        <aside className="space-y-6">
-          <div className="automotive-card p-6  sticky top-6">
+        <aside className="space-y-6 sticky top-6 h-fit">
+          <div className="automotive-card p-6">
             <div>
               <h1 className="text-2xl md:text-3xl font-bold theme-text-primary">{vehicle.year} {vehicle.make} {vehicle.model}</h1>
               <p className="text-sm theme-text-muted mt-1">VIN: <span className="font-medium theme-text-secondary">{vehicle.vin}</span></p>
diff --git a/src/services/adminService.ts b/src/services/adminService.ts
index 43637a2..12c257a 100644
--- a/src/services/adminService.ts
+++ b/src/services/adminService.ts
@@ -23,7 +23,8 @@ export const adminService = {
     search?: string;
   }): Promise<UserResponse[]> {
     const res = await api.get('/admin/users', { params });
-    return res.data.data || res.data;
+    const data = res.data.data || res.data;
+    return Array.isArray(data) ? data : (data.data || data.content || []);
   },
 
   async getUserDetails(userId: string): Promise<UserResponse> {
@@ -52,7 +53,8 @@ export const adminService = {
     const res = await api.get('/admin/service-types', {
       params: { activeOnly: false }
     });
-    return res.data.data || res.data;
+    const data = res.data.data || res.data;
+    return Array.isArray(data) ? data : (data.data || data.content || []);
   },
 
   async getServiceType(typeId: string): Promise<ServiceTypeResponse> {
diff --git a/src/services/appointmentService.ts b/src/services/appointmentService.ts
index bf62a9d..93dd46e 100644
--- a/src/services/appointmentService.ts
+++ b/src/services/appointmentService.ts
@@ -28,12 +28,13 @@ export const appointmentService = {
     toDate?: string;
   }): Promise<AppointmentResponseDto[]> {
     const res = await api.get('/appointments', { params });
-    return res.data;
+    const data = res.data.data || res.data;
+    return Array.isArray(data) ? data : (data.data || data.content || []);
   },
 
   async getAppointmentDetails(appointmentId: string): Promise<AppointmentResponseDto> {
     const res = await api.get(`/appointments/${appointmentId}`);
-    return res.data;
+    return res.data.data || res.data;
   },
 
   async updateAppointment(
diff --git a/src/services/projectService.ts b/src/services/projectService.ts
index 26813f3..39057bc 100644
--- a/src/services/projectService.ts
+++ b/src/services/projectService.ts
@@ -68,7 +68,8 @@ export const projectService = {
   
   async listCustomerProjects(): Promise<ProjectResponseDto[]> {
     const res = await api.get('/projects');
-    return res.data.data || [];
+    const data = res.data.data || res.data;
+    return Array.isArray(data) ? data : [];
   },
 
   async requestProject(data: ProjectRequestDto): Promise<ApiResponse> {
@@ -78,7 +79,7 @@ export const projectService = {
 
   async getProjectDetails(projectId: string): Promise<ProjectResponseDto> {
     const res = await api.get(`/projects/${projectId}`);
-    return res.data.data;
+    return res.data.data || res.data;
   },
 
   async submitQuote(projectId: string, quote: QuoteDto): Promise<ApiResponse> {

From e73fb2bf27fc037327b8d83db4a1d0e586bfe12b Mon Sep 17 00:00:00 2001
From: RandithaK <bharkula3@gmail.com>
Date: Sat, 22 Nov 2025 20:38:47 +0530
Subject: [PATCH 19/34] Refactor UI components to use theme variables for
 consistent styling

- Updated VehicleCard component to use theme classes for color and button styles.
- Refactored AIChatWidget to streamline state management and improve UI consistency with theme variables.
- Modified AdminDashboard, CustomerDashboard, EmployeeDashboard, and SuperAdminDashboard to replace hardcoded styles with theme classes.
- Enhanced AppointmentDetailPage and layout components to improve toast handling and navigation styles.
- Updated VehiclesPage and ProfilePhotoUpload components to utilize theme classes for loading indicators and alerts.
- Added new CSS classes for navigation items and progress bars to maintain design consistency across the application.
---
 README.md                                     |  15 +
 package.json                                  |   2 +
 scripts/check-hardcoded-colors.js             |  35 ++
 scripts/check-theme-setup.js                  |  27 ++
 src/app/admin/page.tsx                        |   2 +-
 src/app/auth/forgot-password/page.tsx         |   4 +-
 src/app/auth/login/page.tsx                   |   9 +-
 src/app/auth/otp-verify/page.tsx              |   4 +-
 src/app/auth/register/page.tsx                |  17 +-
 src/app/auth/resend-verification/page.tsx     |   9 +-
 src/app/auth/reset-password/page.tsx          |  15 +-
 src/app/auth/verify-email/page.tsx            |  17 +-
 src/app/components/AddVehicleForm.tsx         |   2 +-
 src/app/components/EditVehicleForm.tsx        |  12 +-
 src/app/components/NotificationBell.tsx       |  10 +-
 src/app/components/RoleSwitcher.tsx           |  32 +-
 src/app/components/VehicleCard.tsx            |   4 +-
 src/app/components/chatbot/AIChatWidget.tsx   | 362 ++++++++----------
 .../components/dashboards/AdminDashboard.tsx  |  10 +-
 .../dashboards/CustomerDashboard.tsx          |  28 +-
 .../dashboards/EmployeeDashboard.tsx          |   6 +-
 .../dashboards/SuperAdminDashboard.tsx        |   6 +-
 .../appointments/[appointmentId]/page.tsx     |   2 +-
 src/app/dashboard/layout.tsx                  |   4 +-
 .../dashboard/projects/[projectId]/page.tsx   |   2 +-
 src/app/dashboard/time-logs/page.tsx          |   2 +-
 src/app/dashboard/vehicles/page.tsx           |   6 +-
 src/app/globals.css                           |  46 +++
 src/app/layout.tsx                            |   2 +
 src/app/page.tsx                              |  10 +-
 src/app/payment-gateway/page.tsx              |   2 +-
 src/components/ProfilePhotoUpload.tsx         |  16 +-
 32 files changed, 384 insertions(+), 336 deletions(-)
 create mode 100644 scripts/check-hardcoded-colors.js
 create mode 100644 scripts/check-theme-setup.js

diff --git a/README.md b/README.md
index 778fb9c..21a305f 100644
--- a/README.md
+++ b/README.md
@@ -56,3 +56,18 @@ This repository contains the source code for the TechTorque 2025 customer and em
       `http://localhost:8080` (useful in development).
 
    - The AI chat widget reaches the AI chat proxy at `/api/v1/ai/chat` (or `{{NEXT_PUBLIC_API_BASE_URL}}/api/v1/ai/chat` when the public API base is set). This ensures the frontend talks to the configured API gateway or the local Next.js proxy.
+
+### 🎨 Theme & Styling (Centralized)
+
+- A single global stylesheet lives at `src/app/globals.css` and contains all theme variables for light & dark mode, plus utility classes like:
+   - `.theme-button-primary`, `.theme-button-secondary` — semantic buttons
+   - `.theme-bg-primary`, `.theme-text-primary`, `.theme-border`, etc — consistent building blocks
+   - `.automotive-accent`, `.accent-badge`, `.text-gradient-accent`, `.progress-accent` — accent utilities
+
+- Theme switching is implemented using `src/app/contexts/ThemeContext.tsx` plus a small pre-hydration script in `src/app/layout.tsx` (so the app applies the saved system preference or previously saved theme before React mounts to avoid flashes).
+
+- Quick checks added:
+   - `npm run check:theme` — verifies `globals.css` and `ThemeContext` contain expected hooks and variables.
+   - `npm run check:colors` — scans `src/` for hardcoded hex/rgb color usage (ignores `globals.css`).
+
+If you're adding new UI colors, add variables to `src/app/globals.css` and use the semantic utility classes (or create new ones) — this keeps light/dark behavior centralized and consistent across the app.
diff --git a/package.json b/package.json
index 7a7262c..876b8e2 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,8 @@
     "build": "next build --turbopack",
     "start": "next start",
     "lint": "eslint",
+    "check:colors": "node ./scripts/check-hardcoded-colors.js",
+    "check:theme": "node ./scripts/check-theme-setup.js",
     "setup-hooks": "chmod +x .githooks/pre-commit .githooks/pre-push && git config core.hooksPath .githooks && echo '✅ Git hooks configured successfully!'"
   },
   "dependencies": {
diff --git a/scripts/check-hardcoded-colors.js b/scripts/check-hardcoded-colors.js
new file mode 100644
index 0000000..0f512b5
--- /dev/null
+++ b/scripts/check-hardcoded-colors.js
@@ -0,0 +1,35 @@
+#!/usr/bin/env node
+import fs from 'fs'
+import path from 'path'
+
+const root = path.resolve(__dirname, '..', 'src')
+
+const hexRe = /#[0-9a-fA-F]{3,6}/g
+const rgbRe = /rgba?\(/gi
+
+function walk(dir) {
+  const entries = fs.readdirSync(dir, { withFileTypes: true })
+  for (const e of entries) {
+    const full = path.join(dir, e.name)
+    if (e.isDirectory()) {
+      walk(full)
+    } else if (e.isFile()) {
+      if (full.endsWith('globals.css')) continue
+      if (!full.endsWith('.css') && !full.endsWith('.tsx') && !full.endsWith('.ts') && !full.endsWith('.jsx') && !full.endsWith('.js') && !full.endsWith('.svg')) continue
+      const content = fs.readFileSync(full, 'utf8')
+      const hex = content.match(hexRe)
+      const rgb = content.match(rgbRe)
+      if ((hex && hex.length) || (rgb && rgb.length)) {
+        console.log(`Found in ${path.relative(process.cwd(), full)} -> hex:${hex ? hex.join(',') : '0'} rgb:${rgb ? rgb.length : 0}`)
+      }
+    }
+  }
+}
+
+try {
+  walk(root)
+  console.log('\nSearch complete — open the above files and replace hardcoded colors with theme variables in src/app/globals.css.')
+} catch (err) {
+  console.error(err)
+  process.exit(1)
+}
diff --git a/scripts/check-theme-setup.js b/scripts/check-theme-setup.js
new file mode 100644
index 0000000..7adccae
--- /dev/null
+++ b/scripts/check-theme-setup.js
@@ -0,0 +1,27 @@
+#!/usr/bin/env node
+import fs from 'fs'
+import path from 'path'
+
+const globals = fs.readFileSync(path.resolve(__dirname, '../src/app/globals.css'), 'utf8')
+const themeContext = fs.readFileSync(path.resolve(__dirname, '../src/app/contexts/ThemeContext.tsx'), 'utf8')
+
+let ok = true
+
+function assert(cond, msg) {
+  if (!cond) {
+    console.error('FAIL:', msg)
+    ok = false
+  } else {
+    console.log('OK:', msg)
+  }
+}
+
+assert(globals.includes(':root'), 'globals.css has :root declarations')
+assert(globals.includes('html.dark'), 'globals.css has html.dark overrides')
+assert(globals.includes('--accent-primary'), 'globals.css defines --accent-primary var')
+
+assert(themeContext.includes("localStorage.getItem('theme')"), 'ThemeContext reads localStorage')
+assert(themeContext.includes("document.documentElement.classList"), 'ThemeContext manipulates document.documentElement classList')
+
+if (!ok) process.exit(1)
+console.log('\nTheme setup basic checks passed — globals.css + ThemeContext look correctly configured.')
diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx
index 27a685d..ad05582 100644
--- a/src/app/admin/page.tsx
+++ b/src/app/admin/page.tsx
@@ -94,7 +94,7 @@ export default function AdminDashboard() {
           <div className="flex gap-4">
             <button
               onClick={() => router.push("/profile")}
-              className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors"
+              className="px-4 py-2 theme-button-primary rounded-lg transition-colors"
             >
               My Profile
             </button>
diff --git a/src/app/auth/forgot-password/page.tsx b/src/app/auth/forgot-password/page.tsx
index 5d883ad..e474f8d 100644
--- a/src/app/auth/forgot-password/page.tsx
+++ b/src/app/auth/forgot-password/page.tsx
@@ -6,8 +6,8 @@ import Link from 'next/link'
 import authService from '../../../services/authService'
 import ThemeToggle from '../../components/ThemeToggle'
 
-const Icon = ({ d, size = 10 }: { d: string; size?: number }) => ( <svg className={`w-${size} h-${size} text-white`} fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={d} /></svg>);
-const BoltIcon = ({size = 10}) => <Icon d="M13 10V3L4 14h7v7l9-11h-7z" size={size} />;
+// (removed unused Icon helper)
+
 
 // --- Forgot Password Page Component ---
 export default function ForgotPasswordPage() {
diff --git a/src/app/auth/login/page.tsx b/src/app/auth/login/page.tsx
index ad189a0..316b010 100644
--- a/src/app/auth/login/page.tsx
+++ b/src/app/auth/login/page.tsx
@@ -8,13 +8,8 @@ import authService from '../../../services/authService';
 import type { LoginRequest } from '../../../types/api';
 import ThemeToggle from '../../components/ThemeToggle';
 
-// Icon Components
-const Icon = ({ d, size = 10 }: { d: string; size?: number }) => (
-  <svg className={`w-${size} h-${size} text-white`} fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={d} />
-  </svg>
-);
-const BoltIcon = ({size = 10}) => <Icon d="M13 10V3L4 14h7v7l9-11h-7z" size={size} />;
+// (removed unused Icon helper)
+
 const LockClosedIcon = () => <svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" /></svg>;
 
 
diff --git a/src/app/auth/otp-verify/page.tsx b/src/app/auth/otp-verify/page.tsx
index 548c9ce..6d9044a 100644
--- a/src/app/auth/otp-verify/page.tsx
+++ b/src/app/auth/otp-verify/page.tsx
@@ -4,8 +4,8 @@ import React, { useState, useRef, useEffect } from 'react'
 import Link from 'next/link'
 import { useRouter } from 'next/navigation'
 import ThemeToggle from '../../components/ThemeToggle'
-const Icon = ({ d, size = 10 }: { d: string; size?: number }) => ( <svg className={`w-${size} h-${size} text-white`} fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={d} /></svg>);
-const BoltIcon = ({size = 10}) => <Icon d="M13 10V3L4 14h7v7l9-11h-7z" size={size} />;
+// (removed unused Icon helper)
+
 
 // --- OTP Page Component ---
 export default function OtpVerifyPage() {
diff --git a/src/app/auth/register/page.tsx b/src/app/auth/register/page.tsx
index f5cf46d..f86ce2e 100644
--- a/src/app/auth/register/page.tsx
+++ b/src/app/auth/register/page.tsx
@@ -6,21 +6,8 @@ import { useState } from "react";
 import authService from "../../../services/authService";
 import ThemeToggle from "../../components/ThemeToggle";
 
-// Icon Components
-const Icon = ({ d, size = 10 }: { d: string; size?: number }) => (
-  <svg
-    className={`w-${size} h-${size} text-white`}
-    fill="none"
-    stroke="currentColor"
-    viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={d} />
-  </svg>
-);
-const BoltIcon = ({ size = 10 }) => (
-  <Icon d="M13 10V3L4 14h7v7l9-11h-7z" size={size} />
-);
+// (removed unused Icon helper)
+
 const UserPlusIcon = () => (
   <svg
     className="w-5 h-5 mr-2"
diff --git a/src/app/auth/resend-verification/page.tsx b/src/app/auth/resend-verification/page.tsx
index 7935209..5a0a1f9 100644
--- a/src/app/auth/resend-verification/page.tsx
+++ b/src/app/auth/resend-verification/page.tsx
@@ -6,13 +6,8 @@ import { useSearchParams } from 'next/navigation';
 import authService from '../../../services/authService';
 import ThemeToggle from '../../components/ThemeToggle';
 
-// Icon Components
-const Icon = ({ d, size = 10 }: { d: string; size?: number }) => (
-  <svg className={`w-${size} h-${size} text-white`} fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={d} />
-  </svg>
-);
-const BoltIcon = ({size = 10}) => <Icon d="M13 10V3L4 14h7v7l9-11h-7z" size={size} />;
+// (removed unused Icon helper)
+
 const MailIcon = () => <svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /></svg>;
 
 function ResendVerificationContent() {
diff --git a/src/app/auth/reset-password/page.tsx b/src/app/auth/reset-password/page.tsx
index 5eb58d6..d64d123 100644
--- a/src/app/auth/reset-password/page.tsx
+++ b/src/app/auth/reset-password/page.tsx
@@ -3,19 +3,8 @@ import Link from "next/link";
 import ThemeToggle from "../../components/ThemeToggle";
 import ResetPasswordForm from "./ResetPasswordForm";
 
-const Icon = ({ d, size = 10 }: { d: string; size?: number }) => (
-  <svg
-    className={`w-${size} h-${size} text-white`}
-    fill="none"
-    stroke="currentColor"
-    viewBox="0 0 24 24"
-  >
-    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={d} />
-  </svg>
-);
-const BoltIcon = ({ size = 10 }) => (
-  <Icon d="M13 10V3L4 14h7v7l9-11h-7z" size={size} />
-);
+// (removed unused Icon helper)
+
 
 export default function ResetPasswordPage() {
   return (
diff --git a/src/app/auth/verify-email/page.tsx b/src/app/auth/verify-email/page.tsx
index d2065d3..cb65ec8 100644
--- a/src/app/auth/verify-email/page.tsx
+++ b/src/app/auth/verify-email/page.tsx
@@ -3,21 +3,8 @@ import Link from "next/link";
 import ThemeToggle from "../../components/ThemeToggle";
 import VerifyEmailForm from "./VerifyEmailForm";
 
-// Icon Components
-const Icon = ({ d, size = 10 }: { d: string; size?: number }) => (
-  <svg
-    className={`w-${size} h-${size} text-white`}
-    fill="none"
-    stroke="currentColor"
-    viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={d} />
-  </svg>
-);
-const BoltIcon = ({ size = 10 }) => (
-  <Icon d="M13 10V3L4 14h7v7l9-11h-7z" size={size} />
-);
+// (removed unused Icon helper)
+
 
 export default function VerifyEmailPage() {
   return (
diff --git a/src/app/components/AddVehicleForm.tsx b/src/app/components/AddVehicleForm.tsx
index c5a9c0d..fdf371e 100644
--- a/src/app/components/AddVehicleForm.tsx
+++ b/src/app/components/AddVehicleForm.tsx
@@ -60,7 +60,7 @@ export default function AddVehicleForm({ onSuccess, onCancel }: AddVehicleFormPr
       <h2 className="text-4xl font-black mb-2 theme-text-primary">Add New Vehicle</h2>
 
       {error && (
-        <div className="bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-300 px-4 py-3 rounded-lg">
+        <div className="theme-alert-danger mb-4">
           {error}
         </div>
       )}
diff --git a/src/app/components/EditVehicleForm.tsx b/src/app/components/EditVehicleForm.tsx
index a99e003..8178320 100644
--- a/src/app/components/EditVehicleForm.tsx
+++ b/src/app/components/EditVehicleForm.tsx
@@ -59,7 +59,7 @@ export default function EditVehicleForm({
       </h2>
 
       {error && (
-        <div className="bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-300 px-4 py-3 rounded-lg">
+        <div className="theme-alert-danger mb-4">
           {error}
         </div>
       )}
@@ -72,7 +72,7 @@ export default function EditVehicleForm({
             name="color"
             value={formData.color}
             onChange={handleChange}
-            className="w-full px-4 py-3 border rounded-xl focus:ring-2 focus:ring-blue-500 transition-all theme-bg-primary theme-text-primary automotive-border"
+            className="theme-input w-full"
             placeholder="e.g., Blue"
           />
         </div>
@@ -85,7 +85,7 @@ export default function EditVehicleForm({
             value={formData.mileage}
             onChange={handleChange}
             min="0"
-            className="w-full px-4 py-3 border rounded-xl focus:ring-2 focus:ring-blue-500 transition-all theme-bg-primary theme-text-primary automotive-border"
+            className="theme-input w-full"
             placeholder="e.g., 50000"
           />
         </div>
@@ -97,7 +97,7 @@ export default function EditVehicleForm({
             name="licensePlate"
             value={formData.licensePlate}
             onChange={handleChange}
-            className="w-full px-4 py-3 border rounded-xl focus:ring-2 focus:ring-blue-500 transition-all theme-bg-primary theme-text-primary automotive-border"
+            className="theme-input w-full"
             placeholder="e.g., ABC-1234"
           />
         </div>
@@ -107,7 +107,7 @@ export default function EditVehicleForm({
         <button
           type="button"
           onClick={onCancel}
-          className="theme-button-secondary px-6 py-3 font-medium rounded-xl"
+          className="theme-button-secondary"
           disabled={loading}
         >
           Cancel
@@ -115,7 +115,7 @@ export default function EditVehicleForm({
         <button
           type="submit"
           disabled={loading}
-          className="theme-button-primary px-6 py-3 font-medium rounded-xl disabled:opacity-60"
+          className="theme-button-primary disabled:opacity-60"
         >
           {loading ? 'Updating...' : 'Update Vehicle'}
         </button>
diff --git a/src/app/components/NotificationBell.tsx b/src/app/components/NotificationBell.tsx
index adc2abc..a7807d8 100644
--- a/src/app/components/NotificationBell.tsx
+++ b/src/app/components/NotificationBell.tsx
@@ -75,12 +75,12 @@ export default function NotificationBell() {
           />
         </svg>
         {unreadCount > 0 && (
-          <span className="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full px-2 py-px">
+          <span className="absolute -top-1 -right-1 theme-badge-danger text-xs rounded-full px-2 py-px">
             {unreadCount}
           </span>
         )}
         {isConnected && (
-          <span className="absolute bottom-0 right-0 w-2 h-2 bg-green-500 rounded-full border-2 border-white dark:border-gray-800" title="Real-time connected"></span>
+          <span className="absolute bottom-0 right-0 w-2 h-2 theme-bg-success rounded-full border-2 border-[var(--bg-primary)]" title="Real-time connected"></span>
         )}
         {/* Ripple effect */}
         <div className="absolute inset-0 rounded-full bg-current opacity-0 transition-opacity duration-200 pointer-events-none"></div>
@@ -112,7 +112,7 @@ export default function NotificationBell() {
               {notifications.map((notification) => (
                 <li
                   key={notification.notificationId}
-                  className={`p-3 rounded-lg border ${notification.read ? 'border-transparent theme-bg-secondary' : 'border-blue-200 dark:border-blue-800 bg-blue-50 dark:bg-blue-900/30'} transition-colors`}
+                  className={`p-3 rounded-lg border ${notification.read ? 'border-transparent theme-bg-secondary' : 'theme-alert-info'} transition-colors`}
                 >
                   <div className="flex justify-between items-start gap-2">
                     <div className="flex-1 min-w-0">
@@ -128,7 +128,7 @@ export default function NotificationBell() {
                       <button
                         type="button"
                         onClick={() => handleMarkAsRead(notification.notificationId)}
-                        className="text-xs text-blue-600 dark:text-blue-400 hover:underline whitespace-nowrap shrink-0"
+                        className="text-xs theme-text-info hover:underline whitespace-nowrap shrink-0"
                       >
                         Mark as read
                       </button>
@@ -140,7 +140,7 @@ export default function NotificationBell() {
           )}
           <Link
             href="/dashboard/notifications"
-            className="block w-full text-center mt-4 px-4 py-2 rounded-lg text-sm font-medium transition-colors bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700 theme-text-primary"
+            className="block w-full text-center mt-4 px-4 py-2 rounded-lg text-sm font-medium transition-colors theme-bg-tertiary hover:theme-bg-hover theme-text-primary"
           >
             View all notifications
           </Link>
diff --git a/src/app/components/RoleSwitcher.tsx b/src/app/components/RoleSwitcher.tsx
index 8d8f319..f91e08e 100644
--- a/src/app/components/RoleSwitcher.tsx
+++ b/src/app/components/RoleSwitcher.tsx
@@ -13,29 +13,29 @@ const roleConfig = {
   SUPER_ADMIN: {
     label: 'Super Admin',
     icon: '👑',
-    color: 'text-purple-600 dark:text-purple-400',
-    bgColor: 'bg-purple-100 dark:bg-purple-900/30',
+    color: 'theme-text-primary',
+    bgColor: 'theme-bg-secondary',
     dashboardPath: '/dashboard',
   },
   ADMIN: {
     label: 'Admin',
     icon: '⚙️',
-    color: 'text-blue-600 dark:text-blue-400',
-    bgColor: 'bg-blue-100 dark:bg-blue-900/30',
+    color: 'theme-text-info',
+    bgColor: 'theme-alert-info',
     dashboardPath: '/dashboard',
   },
   EMPLOYEE: {
     label: 'Employee',
     icon: '👷',
-    color: 'text-green-600 dark:text-green-400',
-    bgColor: 'bg-green-100 dark:bg-green-900/30',
+    color: 'theme-text-success',
+    bgColor: 'theme-alert-success',
     dashboardPath: '/dashboard',
   },
   CUSTOMER: {
     label: 'Customer',
     icon: '👤',
-    color: 'text-gray-600 dark:text-gray-400',
-    bgColor: 'bg-gray-100 dark:bg-gray-800',
+    color: 'theme-text-secondary',
+    bgColor: 'theme-bg-tertiary',
     dashboardPath: '/dashboard',
   },
 };
@@ -76,8 +76,8 @@ export default function RoleSwitcher({ roles, currentRole, onRoleChange }: RoleS
   const currentConfig = roleConfig[currentRole as keyof typeof roleConfig] || {
     label: currentRole,
     icon: '🔹',
-    color: 'text-gray-600',
-    bgColor: 'bg-gray-100',
+    color: 'theme-text-muted',
+    bgColor: 'theme-bg-secondary',
     dashboardPath: '/dashboard',
   };
 
@@ -112,17 +112,17 @@ export default function RoleSwitcher({ roles, currentRole, onRoleChange }: RoleS
 
       {/* Dropdown Menu */}
       {isOpen && (
-        <div className="absolute right-0 mt-2 w-56 rounded-lg shadow-lg theme-bg-primary border border-gray-200 dark:border-gray-700 z-50">
+        <div className="absolute right-0 mt-2 w-56 rounded-lg shadow-lg theme-bg-primary border theme-border z-50">
           <div className="p-2">
-            <div className="px-3 py-2 text-xs font-semibold theme-text-muted uppercase tracking-wide border-b border-gray-200 dark:border-gray-700 mb-2">
+            <div className="px-3 py-2 text-xs font-semibold theme-text-muted uppercase tracking-wide border-b theme-border mb-2">
               Switch View
             </div>
             {sortedRoles.map((role) => {
               const config = roleConfig[role as keyof typeof roleConfig] || {
                 label: role,
                 icon: '🔹',
-                color: 'text-gray-600',
-                bgColor: 'bg-gray-100',
+                color: 'theme-text-muted',
+                bgColor: 'theme-bg-secondary',
               };
               const isActive = role === currentRole;
 
@@ -133,7 +133,7 @@ export default function RoleSwitcher({ roles, currentRole, onRoleChange }: RoleS
                   className={`w-full flex items-center gap-3 px-3 py-2 rounded-md text-sm transition-colors ${
                     isActive
                       ? `${config.bgColor} ${config.color} font-medium`
-                      : 'theme-text-secondary hover:bg-gray-100 dark:hover:bg-gray-800'
+                      : 'theme-text-secondary hover:theme-bg-hover'
                   }`}
                 >
                   <span className="text-lg">{config.icon}</span>
@@ -151,7 +151,7 @@ export default function RoleSwitcher({ roles, currentRole, onRoleChange }: RoleS
               );
             })}
           </div>
-          <div className="border-t border-gray-200 dark:border-gray-700 px-3 py-2">
+          <div className="border-t theme-border px-3 py-2">
             <p className="text-xs theme-text-muted">
               💡 Your current view affects the dashboard and available menu items
             </p>
diff --git a/src/app/components/VehicleCard.tsx b/src/app/components/VehicleCard.tsx
index d72a5fb..fed2ba1 100644
--- a/src/app/components/VehicleCard.tsx
+++ b/src/app/components/VehicleCard.tsx
@@ -19,7 +19,7 @@ export default function VehicleCard({ vehicle, onDelete, onEdit }: VehicleCardPr
           <p className="theme-text-muted text-sm">License: {vehicle.licensePlate}</p>
         </div>
         {vehicle.color && (
-          <span className="px-3 py-1 bg-blue-100 dark:bg-blue-900/40 text-blue-800 dark:text-blue-300 text-sm rounded-full border border-blue-200 dark:border-blue-800 font-medium">
+          <span className="px-3 py-1 theme-alert-info text-sm rounded-full font-medium">
             {vehicle.color}
           </span>
         )}
@@ -51,7 +51,7 @@ export default function VehicleCard({ vehicle, onDelete, onEdit }: VehicleCardPr
               onDelete(vehicle.vehicleId);
             }
           }}
-          className="px-4 py-2.5 border automotive-border text-red-600 dark:text-red-400 rounded-xl hover:bg-red-50 dark:hover:bg-red-900/30 transition-colors font-medium"
+          className="px-4 py-2.5 border automotive-border theme-text-danger hover:theme-bg-hover transition-colors font-medium rounded-xl"
         >
           Delete
         </button>
diff --git a/src/app/components/chatbot/AIChatWidget.tsx b/src/app/components/chatbot/AIChatWidget.tsx
index ac93d99..d95776e 100644
--- a/src/app/components/chatbot/AIChatWidget.tsx
+++ b/src/app/components/chatbot/AIChatWidget.tsx
@@ -1,196 +1,166 @@
-import React, { useState, useRef, useEffect, useCallback } from 'react';
-import { Sparkles, Bolt } from 'lucide-react';
-import Cookies from 'js-cookie';
-import { config } from '@/config/runtime';
-import apiClient from '@/lib/apiClient';
-
-// --- Theme Simulation & Constants ---
-const theme = {
-    'theme-text-primary': 'text-gray-900 dark:text-gray-100',
-    'theme-text-muted': 'text-gray-500 dark:text-gray-400',
-    'theme-bg-primary': 'bg-gray-50 dark:bg-gray-800',
-    'theme-button-primary': 'bg-indigo-600 hover:bg-indigo-700 text-white',
-    'theme-button-secondary': 'bg-gray-200 dark:bg-gray-700',
-    'theme-border': 'border-gray-300 dark:border-gray-700',
-    'theme-input': 'bg-white dark:bg-gray-600 border theme-border p-2 rounded-lg focus:ring-indigo-500 focus:border-indigo-500',
-    'automotive-card': 'bg-white dark:bg-gray-800'
-};
-
-// --- TypeScript Interface Definitions ---
-interface Message {
-    text: string;
-    sender: 'user' | 'ai' | 'system';
-}
-
-interface ChatResponse {
-    reply: string;
-    session_id: string;
-    tool_executed?: string | null;
-}
-
-// Use the runtime config to get the API Gateway URL
-const API_ENDPOINT = `${config.NEXT_PUBLIC_API_BASE_URL}/api/v1/ai/chat`;
-
-const AIChatWidget: React.FC = () => {
-    // State Management
-    const [userToken, setUserToken] = useState<string | null>(null);
-    
-    const [conversationHistory, setConversationHistory] = useState<Message[]>([
-        { text: "👋 Hello! I'm TechTorque Assistant, your friendly car service companion! 🚗\n\nI can help you with:\n✅ Booking appointments\n✅ Checking service status\n✅ Vehicle information\n✅ Pricing & estimates\n\nWhat can I do for you today? 😊", sender: 'ai' }
-    ]);
-    const [inputMessage, setInputMessage] = useState<string>('');
-    const [sessionId, setSessionId] = useState<string | null>(null);
-    const [isLoading, setIsLoading] = useState<boolean>(false);
-    
-    const messagesEndRef = useRef<HTMLDivElement>(null);
-    
-    // Check for cookie on mount
-    useEffect(() => {
-        const token = Cookies.get('tt_access_token');
-        setUserToken(token || null);
-    }, []);
-
-    // Auto-scroll to latest message
-    useEffect(() => {
-        messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
-    }, [conversationHistory]);
-
-    // Core Logic
-    const sendMessage = useCallback(async (message: string) => {
-        const currentToken = Cookies.get('tt_access_token');
-        
-        if (!message.trim() || isLoading || !currentToken) return;
-
-        const userMessage: Message = { text: message, sender: 'user' };
-        setConversationHistory(prev => [...prev, userMessage]);
-        setInputMessage('');
-        setIsLoading(true);
-
-        try {
-            const payload = {
-                query: message,
-                session_id: sessionId, 
-                token: currentToken,
-            };
-
-            // Let the shared `apiClient` add auth headers via request interceptor
-            const { data } = await apiClient.post<ChatResponse>('/ai/chat', payload);
-
-            let replyText = data.reply;
-            if (data.tool_executed) {
-                replyText = `⚙️ (Tool used: ${data.tool_executed}) ${replyText}`;
-            }
-
-            const aiResponse: Message = { text: replyText, sender: 'ai' };
-            setConversationHistory(prev => [...prev, aiResponse]);
-            setSessionId(data.session_id);
-
-        } catch (error: unknown) {
-            console.error("Chat Error:", error);
-            const errorMessage: Message = {
-                // If axios/our apiClient already stripped the token on 401 it
-                // will redirect to /auth/login via the interceptor. Otherwise
-                // check HTTP status if available.
-                text: (error instanceof Error && error.message.includes('401'))
-                    ? "🔒 Your session has expired. Please log in again to continue chatting!"
-                    : "⚠️ Oops! I'm having trouble connecting to my services right now. Please try again in a moment! 🔄",
-                sender: 'system'
-            };
-            setConversationHistory(prev => [...prev, errorMessage]);
-        } finally {
-            setIsLoading(false);
-        }
-    }, [isLoading, sessionId]);
-
-    // Handler for form submission
-    const handleSubmit = (e: React.FormEvent) => {
-        e.preventDefault();
-        sendMessage(inputMessage);
-    };
-
-    return (
-        <div className={`flex flex-col h-full ${theme['automotive-card']} shadow-lg border ${theme['theme-border']} rounded-xl max-w-lg mx-auto md:max-w-xl`}>
-            
-            {/* Header */}
-            <div className={`p-4 ${theme['theme-bg-primary']} border-b ${theme['theme-border']} rounded-t-xl flex items-center`}>
-                <div className="w-8 h-8 rounded-full bg-gradient-to-r from-indigo-500 to-cyan-400 flex items-center justify-center shadow-md mr-3">
-                    <Bolt className="w-4 h-4 text-white" />
-                </div>
-                <h3 className={`text-lg font-bold ${theme['theme-text-primary']}`}>
-                    TechTorque AI Assistant
-                </h3>
-            </div>
-
-            {/* Message Display Area */}
-            <div className={`flex-1 overflow-y-auto p-5 space-y-4 ${theme['theme-bg-primary']}`}>
-                {conversationHistory.map((msg, index) => (
-                    <div
-                        key={index}
-                        className={`flex ${msg.sender === 'user' ? 'justify-end' : 'justify-start'}`}
-                    >
-                        <div className={`max-w-[85%] px-5 py-3 rounded-2xl text-base leading-relaxed ${
-                            msg.sender === 'user'
-                                ? 'bg-indigo-600 text-white rounded-br-none shadow-md'
-                                : msg.sender === 'system'
-                                ? 'bg-red-100 text-red-800 border border-red-300 rounded-tl-none'
-                                : 'bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-tl-none shadow-sm'
-                        }`}>
-                            {msg.sender === 'ai' && <Sparkles className="w-4 h-4 inline mr-1" />}
-                            <span className="whitespace-pre-wrap break-words">{msg.text}</span>
-                        </div>
-                    </div>
-                ))}
-                
-                {/* Typing Indicator */}
-                {isLoading && (
-                    <div className="flex justify-start">
-                        <div className="max-w-[85%] px-5 py-3 rounded-2xl text-base bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-tl-none shadow-sm animate-pulse">
-                            <Sparkles className="w-4 h-4 inline mr-1" />
-                            <span className="flex items-center gap-1">
-                                <span>Thinking</span>
-                                <span className="inline-flex gap-1">
-                                    <span className="animate-bounce">.</span>
-                                    <span className="animate-bounce delay-100">.</span>
-                                    <span className="animate-bounce delay-200">.</span>
-                                </span>
-                            </span>
-                        </div>
-                    </div>
-                )}
-                <div ref={messagesEndRef} /> 
-            </div>
-
-            {/* Input Form */}
-            <form onSubmit={handleSubmit} className={`p-4 border-t ${theme['theme-border']} flex space-x-3 ${theme['theme-bg-primary']} rounded-b-xl`}>
-                <input
-                    type="text"
-                    value={inputMessage}
-                    onChange={(e) => setInputMessage(e.target.value)}
-                    placeholder={!userToken ? "Please sign in to chat..." : "Ask about appointments, status, or services..."}
-                    className="flex-1 px-4 py-3 text-base border border-gray-300 dark:border-gray-600 rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-800 dark:text-white"
-                    disabled={isLoading || !userToken}
-                />
-                <button
-                    type="submit"
-                    className={`px-6 py-3 rounded-xl font-semibold text-base transition duration-150 ${
-                        isLoading || !inputMessage.trim() || !userToken
-                            ? 'bg-indigo-300 text-white cursor-not-allowed'
-                            : 'bg-indigo-600 text-white hover:bg-indigo-700 shadow-md hover:shadow-lg'
-                    }`}
-                    disabled={isLoading || !inputMessage.trim() || !userToken}
-                >
-                    Send
-                </button>
-            </form>
-            
-            {/* Login Warning Message */}
-            {!userToken && (
-                <div className={`p-2 text-center text-xs text-red-500 ${theme['theme-bg-primary']} border-t ${theme['theme-border']}`}>
-                    <p className='text-xs'>Please log in to start using the AI assistant.</p>
-                </div>
-            )}
-        </div>
-    );
-};
-
-export default AIChatWidget;
\ No newline at end of file
+"use client";
+
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import Cookies from 'js-cookie';
+import apiClient from '@/lib/apiClient';
+import { Bolt, Sparkles } from 'lucide-react';
+
+// Local helper types used only in this component
+type MessageSender = 'ai' | 'user' | 'system';
+type Message = { text: string; sender: MessageSender };
+
+interface ChatResponse {
+  reply: string;
+  session_id?: string;
+  tool_executed?: string;
+}
+
+const AIChatWidget: React.FC = () => {
+  // State Management
+
+
+  const [conversationHistory, setConversationHistory] = useState<Message[]>([
+    {
+      text:
+        "👋 Hello! I'm TechTorque Assistant, your friendly car service companion! 🚗\n\nI can help you with:\n✅ Booking appointments\n✅ Checking service status\n✅ Vehicle information\n✅ Pricing & estimates\n\nWhat can I do for you today? 😊",
+      sender: 'ai',
+    },
+  ]);
+
+  const [inputMessage, setInputMessage] = useState<string>('');
+  const [sessionId, setSessionId] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  const messagesEndRef = useRef<HTMLDivElement | null>(null);
+
+
+
+  // Auto-scroll to latest message
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [conversationHistory]);
+
+  // Core Logic
+  const sendMessage = useCallback(
+    async (message: string) => {
+      const currentToken = Cookies.get('tt_access_token');
+
+      if (!message.trim() || isLoading || !currentToken) return;
+
+      const userMessage: Message = { text: message, sender: 'user' };
+      setConversationHistory((prev) => [...prev, userMessage]);
+      setInputMessage('');
+      setIsLoading(true);
+
+      try {
+        const payload = {
+          query: message,
+          session_id: sessionId,
+          token: currentToken,
+        };
+
+        // Let the shared `apiClient` add auth headers via request interceptor
+        const { data } = await apiClient.post<ChatResponse>('/ai/chat', payload);
+
+        let replyText = data.reply;
+        if (data.tool_executed) {
+          replyText = `⚙️ (Tool used: ${data.tool_executed}) ${replyText}`;
+        }
+
+        const aiResponse: Message = { text: replyText, sender: 'ai' };
+        setConversationHistory((prev) => [...prev, aiResponse]);
+        // session_id may be undefined from the server — convert to null so it matches our state type
+        setSessionId(data.session_id ?? null);
+      } catch (error: unknown) {
+        console.error('Chat Error:', error);
+        const errorMessage: Message = {
+          text:
+            error instanceof Error && error.message.includes('401')
+              ? "🔒 Your session has expired. Please log in again to continue chatting!"
+              : "⚠️ Oops! I'm having trouble connecting to my services right now. Please try again in a moment! 🔄",
+          sender: 'system',
+        };
+        setConversationHistory((prev) => [...prev, errorMessage]);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [isLoading, sessionId]
+  );
+
+  // Handler for form submission
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    sendMessage(inputMessage);
+  };
+
+  return (
+    <div className="flex flex-col h-full automotive-card shadow-lg border theme-border rounded-xl max-w-lg mx-auto md:max-w-xl">
+      {/* Header */}
+      <div className="p-4 theme-bg-primary border-b theme-border rounded-t-xl flex items-center">
+        <div className="w-8 h-8 rounded-full bg-linear-to-r from-indigo-500 to-cyan-400 flex items-center justify-center shadow-md mr-3">
+          <Bolt className="w-4 h-4 text-white" />
+        </div>
+        <h3 className="text-lg font-bold theme-text-primary">TechTorque AI Assistant</h3>
+      </div>
+
+      {/* Message Display Area */}
+      <div className="flex-1 overflow-y-auto p-5 space-y-4 theme-bg-primary">
+        {conversationHistory.map((msg, index) => (
+          <div key={index} className={`flex ${msg.sender === 'user' ? 'justify-end' : 'justify-start'}`}>
+            <div
+              className={`max-w-[85%] px-5 py-3 rounded-2xl text-base leading-relaxed ${
+                msg.sender === 'user'
+                  ? 'theme-button-primary rounded-br-none shadow-md'
+                  : msg.sender === 'system'
+                  ? 'theme-alert-danger rounded-tl-none'
+                  : 'theme-bg-secondary theme-text-primary rounded-tl-none shadow-sm'
+              }`}
+            >
+              {msg.sender === 'ai' && <Sparkles className="w-4 h-4 inline mr-1" />}
+              <span className="whitespace-pre-wrap wrap-break-word">{msg.text}</span>
+            </div>
+          </div>
+        ))}
+
+        {/* Typing Indicator */}
+        {isLoading && (
+          <div className="flex justify-start">
+            <div className="max-w-[85%] px-5 py-3 rounded-2xl text-base theme-bg-secondary theme-text-primary rounded-tl-none shadow-sm animate-pulse">
+              <Sparkles className="w-4 h-4 inline mr-1" />
+              <span className="flex items-center gap-1">
+                <span>Thinking</span>
+                <span className="inline-flex gap-1">
+                  <span className="animate-bounce">.</span>
+                  <span className="animate-bounce delay-100">.</span>
+                  <span className="animate-bounce delay-200">.</span>
+                </span>
+              </span>
+            </div>
+          </div>
+        )}
+
+        <div ref={messagesEndRef} />
+      </div>
+
+      {/* Input area */}
+      <form onSubmit={handleSubmit} className="p-4 border-t theme-border rounded-b-xl bg-white">
+        <div className="flex items-center gap-3">
+          <textarea
+            aria-label="Chat message"
+            className="flex-1 resize-none border theme-border rounded-md px-3 py-2 text-sm focus:outline-none"
+            rows={1}
+            value={inputMessage}
+            onChange={(e) => setInputMessage(e.target.value)}
+            placeholder="Ask me about booking, services or your vehicle..."
+          />
+          <button type="submit" className="theme-button-primary px-4 py-2 rounded-md disabled:opacity-50" disabled={isLoading || !inputMessage.trim()}>
+            {isLoading ? 'Sending...' : 'Send'}
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+};
+
+export default AIChatWidget;
diff --git a/src/app/components/dashboards/AdminDashboard.tsx b/src/app/components/dashboards/AdminDashboard.tsx
index c6bf952..76993e3 100644
--- a/src/app/components/dashboards/AdminDashboard.tsx
+++ b/src/app/components/dashboards/AdminDashboard.tsx
@@ -137,7 +137,7 @@ const AdminDashboard: React.FC<AdminDashboardProps> = ({ profile }) => {
               <p className="theme-text-muted text-sm">No pending appointments requiring attention.</p>
             ) : (
               pendingAppointments.map((appointment) => (
-                <div key={appointment.id} className="border-b border-gray-200 dark:border-gray-700 pb-3">
+                <div key={appointment.id} className="border-b theme-border pb-3">
                   <div className="flex justify-between items-start">
                     <div>
                       <p className="theme-text-primary font-medium">{appointment.serviceType}</p>
@@ -147,7 +147,7 @@ const AdminDashboard: React.FC<AdminDashboardProps> = ({ profile }) => {
                     </div>
                     <Link
                       href={`/dashboard/appointments/${appointment.id}`}
-                      className="text-xs text-blue-600 dark:text-blue-400 hover:underline"
+                      className="text-xs theme-text-info hover:underline"
                     >
                       Review
                     </Link>
@@ -173,10 +173,10 @@ const AdminDashboard: React.FC<AdminDashboardProps> = ({ profile }) => {
                     <span className="theme-text-muted">{entry.month}</span>
                     <span className="theme-text-primary font-semibold">LKR {entry.revenue.toLocaleString()}</span>
                   </div>
-                  <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
+                  <div className="w-full theme-bg-secondary rounded-full h-2">
                     <div
-                      className="bg-blue-500 h-2 rounded-full"
-                      style={{ width: `${Math.min(100, (entry.revenue / maxRevenue) * 100)}%` }}
+                      className="theme-bg-accent h-2 rounded-full"
+                      style={{ width: `${Math.min(100, (entry.revenue / maxRevenue) * 100)}%`, backgroundColor: 'var(--accent-primary)' }}
                     ></div>
                   </div>
                 </div>
diff --git a/src/app/components/dashboards/CustomerDashboard.tsx b/src/app/components/dashboards/CustomerDashboard.tsx
index 3b2da0a..4292352 100644
--- a/src/app/components/dashboards/CustomerDashboard.tsx
+++ b/src/app/components/dashboards/CustomerDashboard.tsx
@@ -114,14 +114,14 @@ const CustomerDashboard: React.FC<CustomerDashboardProps> = ({ profile }) => {
               <p className="theme-text-muted text-sm">No upcoming appointments. Book your next service today.</p>
             ) : (
               upcomingAppointments.map((appointment) => (
-                <div key={appointment.id} className="border border-gray-200 dark:border-gray-700 rounded-lg p-3">
+                <div key={appointment.id} className="border theme-border rounded-lg p-3">
                   <p className="theme-text-primary font-medium text-sm">{appointment.serviceType}</p>
                   <p className="theme-text-muted text-xs">
                     {new Date(appointment.requestedDateTime).toLocaleString()}
                   </p>
                   <Link
                     href={`/dashboard/appointments/${appointment.id}`}
-                    className="text-xs text-blue-600 dark:text-blue-400 hover:underline mt-1 inline-block"
+                    className="text-xs theme-text-info hover:underline mt-1 inline-block"
                   >
                     View details
                   </Link>
@@ -153,12 +153,12 @@ const CustomerDashboard: React.FC<CustomerDashboardProps> = ({ profile }) => {
               <p className="theme-text-muted text-sm">No outstanding invoices.</p>
             ) : (
               overdueInvoices.slice(0, 3).map((invoice) => (
-                <div key={invoice.invoiceId} className="border border-gray-200 dark:border-gray-700 rounded-lg p-3">
+                <div key={invoice.invoiceId} className="border theme-border rounded-lg p-3">
                   <p className="theme-text-primary font-medium text-sm">Invoice {invoice.invoiceNumber}</p>
                   <p className="theme-text-muted text-xs mb-1">Amount due: LKR {(invoice.totalAmount ?? 0).toLocaleString()}</p>
                   <Link
                     href={`/dashboard/invoices/${invoice.invoiceId}`}
-                    className="text-xs text-blue-600 dark:text-blue-400 hover:underline"
+                    className="text-xs theme-text-info hover:underline"
                   >
                     Settle invoice
                   </Link>
@@ -182,9 +182,9 @@ const CustomerDashboard: React.FC<CustomerDashboardProps> = ({ profile }) => {
         <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
           <Link
             href="/dashboard/vehicles"
-            className="p-4 border border-gray-200 dark:border-gray-700 rounded-lg hover:border-blue-500 transition-colors text-center"
+            className="p-4 border theme-border rounded-lg hover:border-[var(--accent-primary)] transition-colors text-center"
           >
-            <svg className="mx-auto w-12 h-12 mb-2 text-gray-600 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+            <svg className="mx-auto w-12 h-12 mb-2 theme-text-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M3 12l1.5-4.5A2 2 0 0 1 6.4 6h11.2a2 2 0 0 1 1.9 1.5L21 12" />
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M5 18a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM19 18a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z" />
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M3 12h18v2H3v-2z" />
@@ -193,7 +193,7 @@ const CustomerDashboard: React.FC<CustomerDashboardProps> = ({ profile }) => {
           </Link>
           <Link
             href="/dashboard/appointments"
-            className="p-4 border border-gray-200 dark:border-gray-700 rounded-lg hover:border-blue-500 transition-colors text-center"
+            className="p-4 border theme-border rounded-lg hover:border-[var(--accent-primary)] transition-colors text-center"
           >
             <svg className="mx-auto w-12 h-12 mb-2 theme-text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
@@ -202,7 +202,7 @@ const CustomerDashboard: React.FC<CustomerDashboardProps> = ({ profile }) => {
           </Link>
           <Link
             href="/dashboard/projects"
-            className="p-4 border border-gray-200 dark:border-gray-700 rounded-lg hover:border-blue-500 transition-colors text-center"
+            className="p-4 border theme-border rounded-lg hover:border-[var(--accent-primary)] transition-colors text-center"
           >
             <svg className="mx-auto w-12 h-12 mb-2 theme-text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M3 7h18M3 12h18M3 17h18" />
@@ -211,7 +211,7 @@ const CustomerDashboard: React.FC<CustomerDashboardProps> = ({ profile }) => {
           </Link>
           <Link
             href="/profile"
-            className="p-4 border border-gray-200 dark:border-gray-700 rounded-lg hover:border-blue-500 transition-colors text-center"
+            className="p-4 border theme-border rounded-lg hover:border-[var(--accent-primary)] transition-colors text-center"
           >
             <svg className="mx-auto w-12 h-12 mb-2 theme-text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
@@ -224,12 +224,12 @@ const CustomerDashboard: React.FC<CustomerDashboardProps> = ({ profile }) => {
       {/* Floating AI Chat Widget */}
       <div className="fixed bottom-6 right-6 z-50">
         {chatOpen ? (
-          <div className="bg-white dark:bg-gray-800 rounded-lg shadow-2xl w-[480px] h-[600px] flex flex-col border border-gray-200 dark:border-gray-700">
-            <div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
-              <h3 className="text-lg font-semibold text-indigo-700 dark:text-indigo-400">TechTorque AI Assistant</h3>
+          <div className="theme-bg-primary rounded-lg shadow-2xl w-[480px] h-[600px] flex flex-col border theme-border">
+            <div className="flex items-center justify-between p-4 border-b theme-border">
+              <h3 className="text-lg font-semibold theme-text-primary">TechTorque AI Assistant</h3>
               <button
                 onClick={() => setChatOpen(false)}
-                className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors"
+                className="theme-text-muted hover:theme-text-primary transition-colors"
                 aria-label="Close chat"
               >
                 <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -244,7 +244,7 @@ const CustomerDashboard: React.FC<CustomerDashboardProps> = ({ profile }) => {
         ) : (
           <button
             onClick={() => setChatOpen(true)}
-            className="bg-indigo-600 hover:bg-indigo-700 text-white rounded-full p-4 shadow-lg transition-all hover:scale-110 flex items-center gap-2"
+            className="theme-button-primary rounded-full p-4 shadow-lg transition-all hover:scale-110 flex items-center gap-2"
             aria-label="Open chat"
           >
             <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
diff --git a/src/app/components/dashboards/EmployeeDashboard.tsx b/src/app/components/dashboards/EmployeeDashboard.tsx
index 9e56ece..733317c 100644
--- a/src/app/components/dashboards/EmployeeDashboard.tsx
+++ b/src/app/components/dashboards/EmployeeDashboard.tsx
@@ -170,7 +170,7 @@ const EmployeeDashboard: React.FC<EmployeeDashboardProps> = ({ profile }) => {
               <p className="theme-text-muted text-sm">No appointments assigned for today.</p>
             ) : (
               todaysAppointments.map((appointment) => (
-                <div key={appointment.appointmentId} className="border-b border-gray-200 dark:border-gray-700 pb-3">
+                <div key={appointment.appointmentId} className="border-b theme-border pb-3">
                   <div className="flex justify-between items-start">
                     <div>
                       <p className="theme-text-primary font-medium">{appointment.serviceType}</p>
@@ -183,7 +183,7 @@ const EmployeeDashboard: React.FC<EmployeeDashboardProps> = ({ profile }) => {
                     </div>
                     <Link
                       href={`/dashboard/appointments/${appointment.appointmentId}`}
-                      className="text-xs text-blue-600 dark:text-blue-400 hover:underline"
+                      className="text-xs theme-text-info hover:underline"
                     >
                       Open
                     </Link>
@@ -201,7 +201,7 @@ const EmployeeDashboard: React.FC<EmployeeDashboardProps> = ({ profile }) => {
               <p className="theme-text-muted text-sm">You haven&apos;t recorded any time logs yet.</p>
             ) : (
               timeLogs.slice(-5).reverse().map((log, index) => (
-                <div key={log.id || `timelog-${index}`} className="border border-gray-200 dark:border-gray-700 rounded-lg p-3">
+                <div key={log.id || `timelog-${index}`} className="border theme-border rounded-lg p-3">
                   <p className="theme-text-primary text-sm font-medium">
                     {new Date(log.date).toLocaleDateString()} • {(Number(log.hours) || 0).toFixed(1)} hrs
                   </p>
diff --git a/src/app/components/dashboards/SuperAdminDashboard.tsx b/src/app/components/dashboards/SuperAdminDashboard.tsx
index ba9b210..5de8070 100644
--- a/src/app/components/dashboards/SuperAdminDashboard.tsx
+++ b/src/app/components/dashboards/SuperAdminDashboard.tsx
@@ -57,7 +57,7 @@ const SuperAdminDashboard: React.FC<SuperAdminDashboardProps> = ({ profile }) =>
       </div>
 
       {error && (
-        <div className="mb-6 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-300 px-4 py-3 rounded-lg">
+        <div className="theme-alert-danger mb-6">
           {error}
         </div>
       )}
@@ -131,7 +131,7 @@ const SuperAdminDashboard: React.FC<SuperAdminDashboardProps> = ({ profile }) =>
               serviceTypes.map((service) => (
                 <div key={service.id} className="flex justify-between">
                   <span className="theme-text-muted">{service.name}</span>
-                  <span className={`text-xs font-semibold ${service.active ? 'text-green-600 dark:text-green-400' : 'text-gray-500'}`}>
+                  <span className={`text-xs font-semibold ${service.active ? 'theme-text-success' : 'theme-text-muted'}`}>
                     {service.active ? 'Active' : 'Inactive'}
                   </span>
                 </div>
@@ -154,7 +154,7 @@ const SuperAdminDashboard: React.FC<SuperAdminDashboardProps> = ({ profile }) =>
               <p className="theme-text-muted text-sm">No audit log entries yet.</p>
             ) : (
               auditLogs.map((log) => (
-                <div key={log.logId} className="border-b border-gray-200 dark:border-gray-700 pb-2">
+                <div key={log.logId} className="border-b theme-border pb-2">
                   <p className="theme-text-primary text-sm font-medium">{log.action}</p>
                   <p className="theme-text-muted text-xs">{log.username ?? log.userId} • {new Date(log.timestamp).toLocaleString()}</p>
                   {log.details && <p className="theme-text-muted text-xs mt-1">{log.details}</p>}
diff --git a/src/app/dashboard/appointments/[appointmentId]/page.tsx b/src/app/dashboard/appointments/[appointmentId]/page.tsx
index c6ed219..09604aa 100644
--- a/src/app/dashboard/appointments/[appointmentId]/page.tsx
+++ b/src/app/dashboard/appointments/[appointmentId]/page.tsx
@@ -30,7 +30,7 @@ const STATUS_OPTIONS: StatusOption[] = [
 export default function AppointmentDetailPage() {
   const router = useRouter()
   const params = useParams<{ appointmentId: string }>()
-  const { toasts, success, error: showError, closeToast } = useToast()
+  const { toasts, success, closeToast } = useToast()
   const appointmentId = params.appointmentId
   const { roles, profile } = useDashboard()
 
diff --git a/src/app/dashboard/layout.tsx b/src/app/dashboard/layout.tsx
index 2621f81..189f8e1 100644
--- a/src/app/dashboard/layout.tsx
+++ b/src/app/dashboard/layout.tsx
@@ -57,9 +57,7 @@ function DashboardShell({ children }: { children: ReactNode }) {
             <Link
               href={item.href}
               className={`block rounded-lg px-3 py-2 text-sm font-medium transition-all duration-200 ${
-                active
-                  ? 'bg-gradient-to-r from-[#0EA3E7]/90 to-[#0386C9]/90 text-white shadow-lg shadow-blue-500/30'
-                  : 'theme-text-secondary hover:bg-gradient-to-r hover:from-[#0EA3E7]/10 hover:to-[#0386C9]/10 hover:text-[#0EA3E7] hover:shadow-md'
+                active ? 'nav-item-active' : 'nav-item-inactive'
               }`}
               onClick={() => setMobileNavOpen(false)}
             >
diff --git a/src/app/dashboard/projects/[projectId]/page.tsx b/src/app/dashboard/projects/[projectId]/page.tsx
index 923dcdc..7f5d02e 100644
--- a/src/app/dashboard/projects/[projectId]/page.tsx
+++ b/src/app/dashboard/projects/[projectId]/page.tsx
@@ -368,7 +368,7 @@ export default function ProjectDetailPage() {
                 <div className="flex items-center gap-4">
                   <div className="flex-1 h-3 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
                     <div
-                      className="h-full bg-gradient-to-r from-blue-500 to-blue-600 transition-all"
+                      className="h-full progress-accent transition-all"
                       style={{ width: `${project.progressPercentage}%` }}
                     />
                   </div>
diff --git a/src/app/dashboard/time-logs/page.tsx b/src/app/dashboard/time-logs/page.tsx
index bda5116..ccda7a8 100644
--- a/src/app/dashboard/time-logs/page.tsx
+++ b/src/app/dashboard/time-logs/page.tsx
@@ -9,7 +9,7 @@ import { ToastContainer } from '@/components/Toast';
 
 export default function TimeLogsPage() {
   const { roles, loading: rolesLoading, profile } = useDashboard();
-  const { toasts, success, error: showError, closeToast } = useToast();
+  const { toasts, error: showError, closeToast } = useToast();
   const [allTimeLogs, setAllTimeLogs] = useState<TimeLogResponse[]>([]);
   const [loading, setLoading] = useState(true);
   const [showForm, setShowForm] = useState(false);
diff --git a/src/app/dashboard/vehicles/page.tsx b/src/app/dashboard/vehicles/page.tsx
index 7246957..8e356a7 100644
--- a/src/app/dashboard/vehicles/page.tsx
+++ b/src/app/dashboard/vehicles/page.tsx
@@ -57,7 +57,7 @@ export default function VehiclesPage() {
   if (loading) {
     return (
       <div className="flex justify-center items-center min-h-screen theme-bg-primary">
-        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 theme-border-primary"></div>
       </div>
     );
   }
@@ -86,7 +86,7 @@ export default function VehiclesPage() {
 
       {/* Add Vehicle Modal */}
       {showAddForm && (
-        <div className="fixed inset-0 theme-bg-primary bg-opacity-70 dark:bg-blue-950 dark:bg-opacity-70 flex items-center justify-center p-4 z-50 backdrop-blur-sm">
+        <div className="fixed inset-0 modal-overlay flex items-center justify-center p-4 z-50 backdrop-blur-sm">
           <div className="automotive-card p-8 max-w-2xl w-full max-h-[90vh] overflow-y-auto">
             <AddVehicleForm
               onSuccess={handleAddSuccess}
@@ -98,7 +98,7 @@ export default function VehiclesPage() {
 
       {/* Edit Vehicle Modal */}
       {editingVehicle && (
-        <div className="fixed inset-0 theme-bg-primary bg-opacity-70 dark:bg-blue-950 dark:bg-opacity-70 flex items-center justify-center p-4 z-50 backdrop-blur-sm">
+        <div className="fixed inset-0 modal-overlay flex items-center justify-center p-4 z-50 backdrop-blur-sm">
           <div className="automotive-card p-8 max-w-md w-full">
             <EditVehicleForm
               vehicleId={editingVehicle.vehicleId}
diff --git a/src/app/globals.css b/src/app/globals.css
index 063711d..3fc923a 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -332,6 +332,32 @@ body {
   border-color: #0CA0E4;
 }
 
+/* Navigation item classes (use theme variables for consistent theming) */
+.nav-item-active {
+  background: linear-gradient(135deg, var(--accent-primary), var(--accent-hover));
+  color: white;
+  font-weight: 600;
+  box-shadow: 0 8px 20px -6px var(--shadow-accent), 0 2px 6px -2px var(--shadow-color);
+}
+
+.nav-item-inactive {
+  background: transparent;
+  color: var(--text-secondary);
+  border: 1px solid transparent;
+}
+
+.nav-item-inactive:hover {
+  /* subtle hover that uses the accent color */
+  background: linear-gradient(135deg, rgba(14,165,233,0.06), rgba(3,134,201,0.06));
+  color: var(--accent-primary);
+  box-shadow: 0 6px 12px -6px var(--shadow-color);
+}
+
+html.dark .nav-item-inactive:hover {
+  background: linear-gradient(135deg, rgba(56,189,248,0.06), rgba(14,165,233,0.06));
+  color: var(--accent-primary);
+}
+
 /* Legacy support - keep for backward compatibility */
 .theme-filter-active {
   background: linear-gradient(135deg, #0CA0E4 0%, #0CA0E4 100%);
@@ -832,6 +858,26 @@ html.dark .bg-grid-pattern {
   background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
 }
 
+/* Soft accent variants used for small badges and faded backgrounds */
+.accent-badge {
+  background: linear-gradient(135deg, rgba(14,165,233,0.12), rgba(3,134,201,0.12));
+  border: 1px solid rgba(14,165,233,0.12);
+  color: var(--text-primary);
+}
+
+/* Gradient text utility that uses accent colors */
+.text-gradient-accent {
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+  background-image: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
+}
+
+/* Progress / load bars mapped to primary accent */
+.progress-accent {
+  background: linear-gradient(90deg, var(--accent-primary), var(--accent-hover));
+}
+
 /* New Tech Stack Item style */
 .tech-stack-item-v2 {
     background: var(--bg-tertiary);
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 01cf136..9f10c15 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -32,6 +32,8 @@ export default function RootLayout({
       >
         {/* Runtime configuration - injected at container startup */}
         <Script src="/runtime-config.js" strategy="beforeInteractive" />
+        {/* Ensure initial theme is applied before React hydration to avoid FOUC */}
+        <Script id="init-theme" strategy="beforeInteractive">{`(function(){try{const s=localStorage.getItem('theme');if(s==='dark'){document.documentElement.classList.add('dark')}else if(s==='light'){document.documentElement.classList.remove('dark')}else if(window.matchMedia&&window.matchMedia('(prefers-color-scheme: dark)').matches){document.documentElement.classList.add('dark')} }catch(e){} })()`}</Script>
         <ThemeProvider>
           {children}
         </ThemeProvider>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 92fe532..bf83143 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -82,7 +82,7 @@ export default function Home() {
         <div className="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8">
           <div className="flex justify-between items-center">
             <Link href="/" className="flex items-center space-x-3 group">
-              <div className="w-12 h-12 rounded-full bg-gradient-to-r from-blue-500 to-cyan-400 flex items-center justify-center shadow-lg transform transition-transform duration-300 group-hover:scale-110">
+              <div className="w-12 h-12 rounded-full automotive-accent flex items-center justify-center shadow-lg transform transition-transform duration-300 group-hover:scale-110">
                 <BoltIcon />
               </div>
               <h1 className="text-2xl font-bold theme-text-primary hidden sm:block">
@@ -114,14 +114,14 @@ export default function Home() {
           <div className="absolute inset-0 bg-grid-pattern opacity-20 dark:opacity-10"></div>
           <div className="max-w-6xl mx-auto text-center relative z-10">
             <div className="mb-8 animate-fadeInUp">
-              <span className="inline-block px-6 py-2 bg-gradient-to-r from-blue-500/20 to-cyan-500/20 rounded-full border border-blue-300/30 theme-text-primary font-semibold text-sm uppercase tracking-wider mb-6">
+              <span className="inline-block px-6 py-2 accent-badge rounded-full border theme-text-primary font-semibold text-sm uppercase tracking-wider mb-6">
                 Next-Generation Auto Care
               </span>
             </div>
             
             <h2 className="text-5xl lg:text-7xl font-black theme-text-primary mb-6 leading-tight animate-fadeInUp stagger-1">
               Drive the Future of 
-              <span className="block text-transparent bg-clip-text bg-gradient-to-r from-blue-500 via-purple-600 to-teal-500">
+              <span className="block text-gradient-accent">
                 Vehicle Service
               </span>
             </h2>
@@ -162,7 +162,7 @@ export default function Home() {
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
               <div className="automotive-card p-8 group">
                 <div className="flex justify-center mb-6">
-                  <div className="w-16 h-16 rounded-full bg-gradient-to-br from-blue-500 to-cyan-400 flex items-center justify-center shadow-lg">
+                  <div className="w-16 h-16 rounded-full automotive-accent flex items-center justify-center shadow-lg">
                     <WrenchIcon />
                   </div>
                 </div>
@@ -278,7 +278,7 @@ export default function Home() {
       <footer className="py-16 px-4 sm:px-6 lg:px-8 border-t theme-border theme-bg-tertiary">
         <div className="max-w-7xl mx-auto text-center">
            <div className="flex justify-center items-center space-x-3 mb-6">
-              <div className="w-10 h-10 rounded-full bg-gradient-to-r from-blue-500 to-cyan-400 flex items-center justify-center shadow-lg">
+              <div className="w-10 h-10 rounded-full automotive-accent flex items-center justify-center shadow-lg">
                 <BoltIcon />
               </div>
               <h2 className="text-2xl font-bold theme-text-primary">TechTorque Auto</h2>
diff --git a/src/app/payment-gateway/page.tsx b/src/app/payment-gateway/page.tsx
index 6197c70..c19ea6e 100644
--- a/src/app/payment-gateway/page.tsx
+++ b/src/app/payment-gateway/page.tsx
@@ -77,7 +77,7 @@ function PaymentGatewayContent() {
         <div className="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8">
           <div className="flex justify-between items-center">
             <Link href="/" className="flex items-center space-x-3 group">
-              <div className="w-12 h-12 rounded-full bg-gradient-to-r from-blue-500 to-cyan-400 flex items-center justify-center shadow-lg transform transition-transform duration-300 group-hover:scale-110">
+              <div className="w-12 h-12 rounded-full automotive-accent flex items-center justify-center shadow-lg transform transition-transform duration-300 group-hover:scale-110">
                 <BoltIcon size={6} />
               </div>
               <h1 className="text-2xl font-bold theme-text-primary hidden sm:block">
diff --git a/src/components/ProfilePhotoUpload.tsx b/src/components/ProfilePhotoUpload.tsx
index 0336367..f79c09b 100644
--- a/src/components/ProfilePhotoUpload.tsx
+++ b/src/components/ProfilePhotoUpload.tsx
@@ -127,8 +127,8 @@ export default function ProfilePhotoUpload({
         onClick={() => fileInputRef.current?.click()}
         className={`relative border-2 border-dashed rounded-lg p-8 cursor-pointer transition-colors ${
           dragActive
-            ? "border-blue-500 bg-blue-50"
-            : "border-gray-300 hover:border-gray-400 bg-gray-50"
+            ? "theme-border-primary theme-bg-secondary"
+            : "theme-border theme-bg-primary hover:theme-bg-hover"
         }`}
       >
         <input
@@ -141,10 +141,10 @@ export default function ProfilePhotoUpload({
 
         <div className="text-center">
           <div className="text-4xl mb-2">📸</div>
-          <p className="text-lg font-semibold text-gray-700">
+          <p className="text-lg font-semibold theme-text-primary">
             Drag and drop your photo here
           </p>
-          <p className="text-sm text-gray-500">
+          <p className="text-sm theme-text-muted">
             or click to select a file (Max {maxSizeMB}MB)
           </p>
         </div>
@@ -162,26 +162,26 @@ export default function ProfilePhotoUpload({
 
       {/* Messages */}
       {uploadError && (
-        <div className="p-3 bg-red-50 border border-red-200 rounded-lg text-red-700 text-sm">
+        <div className="theme-alert-danger text-sm">
           ❌ {uploadError}
         </div>
       )}
 
       {uploadSuccess && (
-        <div className="p-3 bg-green-50 border border-green-200 rounded-lg text-green-700 text-sm">
+        <div className="theme-alert-success text-sm">
           ✅ Photo uploaded successfully!
         </div>
       )}
 
       {error && (
-        <div className="p-3 bg-yellow-50 border border-yellow-200 rounded-lg text-yellow-700 text-sm">
+        <div className="theme-alert-warning text-sm">
           ⚠️ {error}
         </div>
       )}
 
       {/* Loading */}
       {loading && (
-        <div className="p-3 bg-blue-50 border border-blue-200 rounded-lg text-blue-700 text-sm">
+        <div className="theme-alert-info text-sm">
           ⏳ Processing...
         </div>
       )}

From d64e181357221bfd54dd7d0d4bc8340a2f401dd4 Mon Sep 17 00:00:00 2001
From: RandithaK <bharkula3@gmail.com>
Date: Sat, 22 Nov 2025 22:19:44 +0530
Subject: [PATCH 20/34] fix: add suppressHydrationWarning to html tag for
 improved hydration handling

---
 src/app/layout.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 9f10c15..7b5ed40 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -25,7 +25,7 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
         suppressHydrationWarning

From 95655ee20d02b66291734df4e60a62664f8c9695 Mon Sep 17 00:00:00 2001
From: RandithaK <bharkula3@gmail.com>
Date: Sat, 22 Nov 2025 22:27:23 +0530
Subject: [PATCH 21/34] fix: refactor ThemeToggle component import and clean up
 unused code and optimize loading time

---
 src/app/page.tsx | 57 +++---------------------------------------------
 1 file changed, 3 insertions(+), 54 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index bf83143..c404df6 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,56 +1,5 @@
-'use client'
-
 import Link from "next/link";
-import React from 'react';
-import { useTheme } from './contexts/ThemeContext';
-
-// --- ThemeToggle Component (from ThemeToggle.tsx) ---
-function ThemeToggle() {
-  // isDark and toggleTheme will be provided by the ThemeProvider in layout.tsx
-  const { isDark, toggleTheme } = useTheme();
-
-  return (
-    <button
-      onClick={toggleTheme}
-      className="theme-toggle"
-      aria-label="Toggle theme"
-      title={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
-    >
-      <div className="flex items-center justify-center w-6 h-6">
-        {isDark ? (
-           <svg
-            className="w-5 h-5 transition-transform duration-300 hover:rotate-12"
-            fill="currentColor"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth={1}
-              d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
-            />
-          </svg>
-        ) : (
-          <svg
-            className="w-5 h-5 transition-transform duration-300 hover:rotate-12"
-            fill="currentColor"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth={1}
-              d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
-            />
-          </svg>
-        )}
-      </div>
-    </button>
-  );
-}
-
+import ThemeToggle from "./components/ThemeToggle";
 
 // --- Icon Components for better reusability ---
 const Icon = ({ d, className }: { d: string; className?: string }) => (
@@ -113,13 +62,13 @@ export default function Home() {
         <section className="automotive-hero relative py-28 px-4 sm:px-6 lg:px-8 overflow-hidden">
           <div className="absolute inset-0 bg-grid-pattern opacity-20 dark:opacity-10"></div>
           <div className="max-w-6xl mx-auto text-center relative z-10">
-            <div className="mb-8 animate-fadeInUp">
+            <div className="mb-8">
               <span className="inline-block px-6 py-2 accent-badge rounded-full border theme-text-primary font-semibold text-sm uppercase tracking-wider mb-6">
                 Next-Generation Auto Care
               </span>
             </div>
             
-            <h2 className="text-5xl lg:text-7xl font-black theme-text-primary mb-6 leading-tight animate-fadeInUp stagger-1">
+            <h2 className="text-5xl lg:text-7xl font-black theme-text-primary mb-6 leading-tight">
               Drive the Future of 
               <span className="block text-gradient-accent">
                 Vehicle Service

From 8a18d7cb42ea9632e1e7734b70d01d39fa427891 Mon Sep 17 00:00:00 2001
From: RandithaK <bharkula3@gmail.com>
Date: Sat, 22 Nov 2025 23:00:58 +0530
Subject: [PATCH 22/34] fix: update hover border styles in CustomerDashboard
 and adjust gradient classes in VehicleDetailsPage and Home components

---
 src/app/components/dashboards/CustomerDashboard.tsx | 8 ++++----
 src/app/dashboard/projects/[projectId]/page.tsx     | 4 ++--
 src/app/dashboard/vehicles/[vehicleId]/page.tsx     | 2 +-
 src/app/page.tsx                                    | 4 ++--
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/app/components/dashboards/CustomerDashboard.tsx b/src/app/components/dashboards/CustomerDashboard.tsx
index 4292352..4b603e7 100644
--- a/src/app/components/dashboards/CustomerDashboard.tsx
+++ b/src/app/components/dashboards/CustomerDashboard.tsx
@@ -182,7 +182,7 @@ const CustomerDashboard: React.FC<CustomerDashboardProps> = ({ profile }) => {
         <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
           <Link
             href="/dashboard/vehicles"
-            className="p-4 border theme-border rounded-lg hover:border-[var(--accent-primary)] transition-colors text-center"
+            className="p-4 border theme-border rounded-lg hover:border-(--accent-primary) transition-colors text-center"
           >
             <svg className="mx-auto w-12 h-12 mb-2 theme-text-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M3 12l1.5-4.5A2 2 0 0 1 6.4 6h11.2a2 2 0 0 1 1.9 1.5L21 12" />
@@ -193,7 +193,7 @@ const CustomerDashboard: React.FC<CustomerDashboardProps> = ({ profile }) => {
           </Link>
           <Link
             href="/dashboard/appointments"
-            className="p-4 border theme-border rounded-lg hover:border-[var(--accent-primary)] transition-colors text-center"
+            className="p-4 border theme-border rounded-lg hover:border-(--accent-primary) transition-colors text-center"
           >
             <svg className="mx-auto w-12 h-12 mb-2 theme-text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
@@ -202,7 +202,7 @@ const CustomerDashboard: React.FC<CustomerDashboardProps> = ({ profile }) => {
           </Link>
           <Link
             href="/dashboard/projects"
-            className="p-4 border theme-border rounded-lg hover:border-[var(--accent-primary)] transition-colors text-center"
+            className="p-4 border theme-border rounded-lg hover:border-(--accent-primary) transition-colors text-center"
           >
             <svg className="mx-auto w-12 h-12 mb-2 theme-text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M3 7h18M3 12h18M3 17h18" />
@@ -211,7 +211,7 @@ const CustomerDashboard: React.FC<CustomerDashboardProps> = ({ profile }) => {
           </Link>
           <Link
             href="/profile"
-            className="p-4 border theme-border rounded-lg hover:border-[var(--accent-primary)] transition-colors text-center"
+            className="p-4 border theme-border rounded-lg hover:border-(--accent-primary) transition-colors text-center"
           >
             <svg className="mx-auto w-12 h-12 mb-2 theme-text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
diff --git a/src/app/dashboard/projects/[projectId]/page.tsx b/src/app/dashboard/projects/[projectId]/page.tsx
index 7f5d02e..9f18815 100644
--- a/src/app/dashboard/projects/[projectId]/page.tsx
+++ b/src/app/dashboard/projects/[projectId]/page.tsx
@@ -197,7 +197,7 @@ export default function ProjectDetailPage() {
       {canAdminApprove && (
         <div className="mb-6 p-6 rounded-xl border-2 border-purple-200 dark:border-purple-800 bg-purple-50 dark:bg-purple-900/20">
           <div className="flex items-start gap-4">
-            <div className="flex-shrink-0 w-12 h-12 rounded-full bg-purple-600 flex items-center justify-center">
+            <div className="shrink-0 w-12 h-12 rounded-full bg-purple-600 flex items-center justify-center">
               <svg className="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
               </svg>
@@ -233,7 +233,7 @@ export default function ProjectDetailPage() {
       {canApproveQuote && (
         <div className="mb-6 p-6 rounded-xl border-2 border-blue-200 dark:border-blue-800 bg-blue-50 dark:bg-blue-900/20">
           <div className="flex items-start gap-4">
-            <div className="flex-shrink-0 w-12 h-12 rounded-full bg-blue-600 flex items-center justify-center">
+            <div className="shrink-0 w-12 h-12 rounded-full bg-blue-600 flex items-center justify-center">
               <svg className="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
               </svg>
diff --git a/src/app/dashboard/vehicles/[vehicleId]/page.tsx b/src/app/dashboard/vehicles/[vehicleId]/page.tsx
index ccbecee..a12b116 100644
--- a/src/app/dashboard/vehicles/[vehicleId]/page.tsx
+++ b/src/app/dashboard/vehicles/[vehicleId]/page.tsx
@@ -105,7 +105,7 @@ export default function VehicleDetailsPage() {
         {/* Left: Images + gallery */}
         <div className="lg:col-span-2 space-y-6">
           <div className="automotive-card p-6">
-            <div className="w-full rounded-lg overflow-hidden shadow-md bg-gradient-to-b from-white to-gray-50 dark:from-gray-900 dark:to-gray-800">
+            <div className="w-full rounded-lg overflow-hidden shadow-md bg-linear-to-b from-white to-gray-50 dark:from-gray-900 dark:to-gray-800">
               {vehicle.photos && vehicle.photos.length > 0 ? (
                 <Image
                   src={vehicle.photos[0] as unknown as string}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index c404df6..93b512b 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -125,7 +125,7 @@ export default function Home() {
               
               <div className="automotive-card p-8 group">
                 <div className="flex justify-center mb-6">
-                  <div className="w-16 h-16 rounded-full bg-gradient-to-br from-emerald-500 to-teal-400 flex items-center justify-center shadow-lg">
+                  <div className="w-16 h-16 rounded-full bg-linear-to-br from-emerald-500 to-teal-400 flex items-center justify-center shadow-lg">
                     <ClockIcon />
                   </div>
                 </div>
@@ -139,7 +139,7 @@ export default function Home() {
               
               <div className="automotive-card p-8 group">
                 <div className="flex justify-center mb-6">
-                  <div className="w-16 h-16 rounded-full bg-gradient-to-br from-violet-500 to-purple-400 flex items-center justify-center shadow-lg">
+                  <div className="w-16 h-16 rounded-full bg-linear-to-br from-violet-500 to-purple-400 flex items-center justify-center shadow-lg">
                     <ShieldCheckIcon />
                   </div>
                 </div>

From 9922d47af33174f3e26e20b12e4ce1d24e1d696e Mon Sep 17 00:00:00 2001
From: RandithaK <bharkula3@gmail.com>
Date: Sun, 23 Nov 2025 11:05:35 +0530
Subject: [PATCH 23/34] fix: enhance ReportsPage functionality with report
 loading and downloading features, and update ReportResponse interface for
 improved data handling

---
 src/app/dashboard/admin/reports/page.tsx | 257 +++++++++++++++++------
 src/types/admin.ts                       |  18 +-
 2 files changed, 204 insertions(+), 71 deletions(-)

diff --git a/src/app/dashboard/admin/reports/page.tsx b/src/app/dashboard/admin/reports/page.tsx
index 266253f..84455b2 100644
--- a/src/app/dashboard/admin/reports/page.tsx
+++ b/src/app/dashboard/admin/reports/page.tsx
@@ -1,8 +1,8 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { adminService } from '@/services/adminService';
-import { ReportRequest } from '@/types/admin';
+import { ReportRequest, ReportResponse } from '@/types/admin';
 import { useDashboard } from '@/app/contexts/DashboardContext';
 import { useToast } from '@/hooks/useToast';
 import { ToastContainer } from '@/components/Toast';
@@ -17,6 +17,28 @@ export default function ReportsPage() {
     fromDate: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000).toISOString().split('T')[0],
     toDate: new Date().toISOString().split('T')[0],
   });
+  const [reports, setReports] = useState<ReportResponse[]>([]);
+  const [loadingReports, setLoadingReports] = useState(false);
+
+  // Load reports on mount
+  useEffect(() => {
+    if (hasAccess) {
+      loadReports();
+    }
+  }, [roles]);
+
+  const loadReports = async () => {
+    try {
+      setLoadingReports(true);
+      const data = await adminService.getReports();
+      setReports(data);
+    } catch (err) {
+      console.error('Failed to load reports:', err);
+      showError('Failed to load reports history');
+    } finally {
+      setLoadingReports(false);
+    }
+  };
 
   const handleGenerateReport = async () => {
     try {
@@ -26,10 +48,10 @@ export default function ReportsPage() {
         format,
         ...dateRange,
       };
-      const report = await adminService.generateReport(request);
-      // In a real implementation, you would display or download the report
-      console.log('Report generated:', report);
-      success('Report generated successfully!');
+      await adminService.generateReport(request);
+      success('Report generation initiated successfully!');
+      // Refresh list
+      loadReports();
     } catch (err) {
       console.error('Failed to generate report:', err);
       showError('Failed to generate report');
@@ -38,6 +60,23 @@ export default function ReportsPage() {
     }
   };
 
+  const handleDownload = async (reportId: string, fileName: string) => {
+    try {
+      const blob = await adminService.downloadReport(reportId);
+      const url = window.URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = fileName; // You might want to get the real filename from headers
+      document.body.appendChild(a);
+      a.click();
+      window.URL.revokeObjectURL(url);
+      document.body.removeChild(a);
+    } catch (err) {
+      console.error('Failed to download report:', err);
+      showError('Failed to download report');
+    }
+  };
+
   // Check if user has permission to access this page
   const hasRole = (role: string) => roles?.includes(role);
   const hasAccess = hasRole('ADMIN') || hasRole('SUPER_ADMIN');
@@ -76,74 +115,164 @@ export default function ReportsPage() {
   }
 
   return (
-    <div className="max-w-4xl mx-auto p-6">
+    <div className="max-w-6xl mx-auto p-6">
       <div className="mb-8">
         <h1 className="text-3xl font-bold theme-text-primary mb-2">Reports</h1>
         <p className="theme-text-muted">Generate business analytics and reports</p>
       </div>
 
-      <div className="dashboard-content-card">
-        <h2 className="text-xl font-semibold theme-text-primary mb-6">Generate Report</h2>
-        
-        <div className="space-y-6">
-          <div>
-            <label className="block text-sm font-semibold theme-text-primary mb-2">Report Type</label>
-            <select
-              value={reportType}
-              onChange={(e) => setReportType(e.target.value as typeof reportType)}
-              className="form-select"
-            >
-              <option value="REVENUE">Revenue Report</option>
-              <option value="SERVICE_PERFORMANCE">Service Performance Report</option>
-              <option value="EMPLOYEE_PRODUCTIVITY">Employee Productivity Report</option>
-              <option value="CUSTOMER_SATISFACTION">Customer Satisfaction Report</option>
-              <option value="INVENTORY">Inventory Report</option>
-              <option value="APPOINTMENT_SUMMARY">Appointment Summary Report</option>
-            </select>
-          </div>
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+        {/* Generation Form */}
+        <div className="lg:col-span-1">
+          <div className="dashboard-content-card sticky top-6">
+            <h2 className="text-xl font-semibold theme-text-primary mb-6">Generate Report</h2>
+            
+            <div className="space-y-6">
+              <div>
+                <label className="block text-sm font-semibold theme-text-primary mb-2">Report Type</label>
+                <select
+                  value={reportType}
+                  onChange={(e) => setReportType(e.target.value as typeof reportType)}
+                  className="form-select w-full"
+                >
+                  <option value="REVENUE">Revenue Report</option>
+                  <option value="APPOINTMENT_SUMMARY">Appointment Summary</option>
+                  <option value="SERVICE_PERFORMANCE">Service Performance</option>
+                  <option value="EMPLOYEE_PRODUCTIVITY">Employee Productivity</option>
+                  <option value="CUSTOMER_SATISFACTION">Customer Satisfaction</option>
+                  <option value="INVENTORY">Inventory Report</option>
+                </select>
+              </div>
 
-          <div>
-            <label className="block text-sm font-semibold theme-text-primary mb-2">Report Format</label>
-            <select
-              value={format}
-              onChange={(e) => setFormat(e.target.value as typeof format)}
-              className="form-select"
-            >
-              <option value="PDF">PDF</option>
-              <option value="EXCEL">Excel</option>
-              <option value="CSV">CSV</option>
-              <option value="JSON">JSON</option>
-            </select>
-          </div>
+              <div>
+                <label className="block text-sm font-semibold theme-text-primary mb-2">Report Format</label>
+                <select
+                  value={format}
+                  onChange={(e) => setFormat(e.target.value as typeof format)}
+                  className="form-select w-full"
+                >
+                  <option value="PDF">PDF</option>
+                  <option value="EXCEL">Excel</option>
+                  <option value="CSV">CSV</option>
+                  <option value="JSON">JSON</option>
+                </select>
+              </div>
 
-          <div className="grid gap-4 sm:grid-cols-2">
-            <div>
-              <label className="block text-sm font-semibold theme-text-primary mb-2">From Date</label>
-              <input
-                type="date"
-                value={dateRange.fromDate}
-                onChange={(e) => setDateRange({ ...dateRange, fromDate: e.target.value })}
-                className="form-input"
-              />
-            </div>
-            <div>
-              <label className="block text-sm font-semibold theme-text-primary mb-2">To Date</label>
-              <input
-                type="date"
-                value={dateRange.toDate}
-                onChange={(e) => setDateRange({ ...dateRange, toDate: e.target.value })}
-                className="form-input"
-              />
+              <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-1">
+                <div>
+                  <label className="block text-sm font-semibold theme-text-primary mb-2">From Date</label>
+                  <input
+                    type="date"
+                    value={dateRange.fromDate}
+                    onChange={(e) => setDateRange({ ...dateRange, fromDate: e.target.value })}
+                    className="form-input w-full"
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm font-semibold theme-text-primary mb-2">To Date</label>
+                  <input
+                    type="date"
+                    value={dateRange.toDate}
+                    onChange={(e) => setDateRange({ ...dateRange, toDate: e.target.value })}
+                    className="form-input w-full"
+                  />
+                </div>
+              </div>
+
+              <button
+                onClick={handleGenerateReport}
+                disabled={generating}
+                className="w-full theme-button-primary disabled:opacity-50 disabled:cursor-not-allowed flex justify-center items-center"
+              >
+                {generating ? (
+                  <>
+                    <svg className="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+                      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                    </svg>
+                    Generating...
+                  </>
+                ) : 'Generate Report'}
+              </button>
             </div>
           </div>
+        </div>
 
-          <button
-            onClick={handleGenerateReport}
-            disabled={generating}
-            className="w-full theme-button-primary disabled:opacity-50 disabled:cursor-not-allowed"
-          >
-            {generating ? 'Generating...' : 'Generate Report'}
-          </button>
+        {/* Reports List */}
+        <div className="lg:col-span-2">
+          <div className="dashboard-content-card">
+            <div className="flex justify-between items-center mb-6">
+              <h2 className="text-xl font-semibold theme-text-primary">Generated Reports</h2>
+              <button 
+                onClick={loadReports} 
+                className="text-sm theme-text-accent hover:underline flex items-center"
+                disabled={loadingReports}
+              >
+                <svg className={`w-4 h-4 mr-1 ${loadingReports ? 'animate-spin' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                </svg>
+                Refresh
+              </button>
+            </div>
+
+            {loadingReports && reports.length === 0 ? (
+              <div className="space-y-4">
+                {[1, 2, 3].map(i => (
+                  <div key={i} className="h-20 theme-bg-tertiary rounded-lg animate-pulse"></div>
+                ))}
+              </div>
+            ) : reports.length === 0 ? (
+              <div className="text-center py-12 theme-text-muted">
+                <svg className="mx-auto w-12 h-12 mb-4 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                </svg>
+                <p>No reports generated yet.</p>
+              </div>
+            ) : (
+              <div className="space-y-4">
+                {reports.map((report) => (
+                  <div key={report.reportId} className="p-4 rounded-lg border theme-border theme-bg-secondary hover:theme-bg-tertiary transition-colors">
+                    <div className="flex justify-between items-start">
+                      <div>
+                        <h3 className="font-medium theme-text-primary">{report.title || report.type}</h3>
+                        <div className="text-sm theme-text-muted mt-1 space-y-1">
+                          <p>Date Range: {report.fromDate} to {report.toDate}</p>
+                          <p>Generated: {new Date(report.createdAt).toLocaleString()}</p>
+                          <p>Format: <span className="font-mono text-xs bg-gray-100 dark:bg-gray-800 px-2 py-0.5 rounded">{report.format}</span></p>
+                        </div>
+                      </div>
+                      <div className="flex flex-col items-end space-y-2">
+                        <span className={`px-2 py-1 rounded-full text-xs font-medium ${
+                          report.status === 'COMPLETED' ? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400' :
+                          report.status === 'FAILED' ? 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400' :
+                          'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400'
+                        }`}>
+                          {report.status}
+                        </span>
+                        
+                        {report.status === 'COMPLETED' && (
+                          <button
+                            onClick={() => handleDownload(report.reportId, `${report.title || 'report'}.${report.format.toLowerCase()}`)}
+                            className="text-sm theme-text-accent hover:underline flex items-center"
+                          >
+                            <svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+                            </svg>
+                            Download
+                          </button>
+                        )}
+                      </div>
+                    </div>
+                    {report.errorMessage && (
+                      <div className="mt-3 text-sm text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-900/20 p-2 rounded">
+                        Error: {report.errorMessage}
+                      </div>
+                    )}
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
         </div>
       </div>
       <ToastContainer toasts={toasts} onClose={closeToast} />
diff --git a/src/types/admin.ts b/src/types/admin.ts
index 220635a..2303c79 100644
--- a/src/types/admin.ts
+++ b/src/types/admin.ts
@@ -122,15 +122,19 @@ export interface ReportRequest {
 
 export interface ReportResponse {
   reportId: string;
-  reportType: string;
-  from: string;
-  to: string;
+  type: string;
+  title?: string;
+  fromDate: string;
+  toDate: string;
   format: string;
-  status: 'PENDING' | 'COMPLETED' | 'FAILED';
-  fileUrl?: string;
-  fileName?: string;
+  status: 'PENDING' | 'GENERATING' | 'COMPLETED' | 'FAILED';
+  generatedBy: string;
+  downloadUrl?: string;
+  fileSize?: number;
+  data?: string;
+  errorMessage?: string;
+  isScheduled?: boolean;
   createdAt: string;
-  createdBy: string;
   completedAt?: string;
 }
 

From 6df926aa8bc0e6f920e7029e56f5c957174eeccc Mon Sep 17 00:00:00 2001
From: RandithaK <bharkula3@gmail.com>
Date: Sun, 23 Nov 2025 11:37:44 +0530
Subject: [PATCH 24/34] fix: simplify report type options in ReportsPage for
 better clarity and usability

---
 src/app/dashboard/admin/reports/page.tsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/app/dashboard/admin/reports/page.tsx b/src/app/dashboard/admin/reports/page.tsx
index 84455b2..51ddcb3 100644
--- a/src/app/dashboard/admin/reports/page.tsx
+++ b/src/app/dashboard/admin/reports/page.tsx
@@ -11,7 +11,7 @@ export default function ReportsPage() {
   const { roles, loading: rolesLoading } = useDashboard();
   const { toasts, success, error: showError, closeToast } = useToast();
   const [generating, setGenerating] = useState(false);
-  const [reportType, setReportType] = useState<'SERVICE_PERFORMANCE' | 'REVENUE' | 'EMPLOYEE_PRODUCTIVITY' | 'CUSTOMER_SATISFACTION' | 'INVENTORY' | 'APPOINTMENT_SUMMARY'>('REVENUE');
+  const [reportType, setReportType] = useState<'REVENUE' | 'APPOINTMENT_SUMMARY'>('REVENUE');
   const [format, setFormat] = useState<'JSON' | 'PDF' | 'EXCEL' | 'CSV'>('PDF');
   const [dateRange, setDateRange] = useState({
     fromDate: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000).toISOString().split('T')[0],
@@ -137,10 +137,6 @@ export default function ReportsPage() {
                 >
                   <option value="REVENUE">Revenue Report</option>
                   <option value="APPOINTMENT_SUMMARY">Appointment Summary</option>
-                  <option value="SERVICE_PERFORMANCE">Service Performance</option>
-                  <option value="EMPLOYEE_PRODUCTIVITY">Employee Productivity</option>
-                  <option value="CUSTOMER_SATISFACTION">Customer Satisfaction</option>
-                  <option value="INVENTORY">Inventory Report</option>
                 </select>
               </div>
 

From 8e74de296c95c74d7a4b0a007b497e10b92b3d6a Mon Sep 17 00:00:00 2001
From: RandithaK <bharkula3@gmail.com>
Date: Sun, 23 Nov 2025 11:39:25 +0530
Subject: [PATCH 25/34] fix: update styling in AIChatWidget for improved visual
 consistency and user experience

---
 src/app/components/chatbot/AIChatWidget.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/components/chatbot/AIChatWidget.tsx b/src/app/components/chatbot/AIChatWidget.tsx
index d95776e..eab48b3 100644
--- a/src/app/components/chatbot/AIChatWidget.tsx
+++ b/src/app/components/chatbot/AIChatWidget.tsx
@@ -144,11 +144,11 @@ const AIChatWidget: React.FC = () => {
       </div>
 
       {/* Input area */}
-      <form onSubmit={handleSubmit} className="p-4 border-t theme-border rounded-b-xl bg-white">
+      <form onSubmit={handleSubmit} className="p-4 border-t theme-border rounded-b-xl theme-bg-primary">
         <div className="flex items-center gap-3">
           <textarea
             aria-label="Chat message"
-            className="flex-1 resize-none border theme-border rounded-md px-3 py-2 text-sm focus:outline-none"
+            className="flex-1 resize-none border theme-border rounded-md px-3 py-2 text-sm focus:outline-none theme-bg-secondary theme-text-primary"
             rows={1}
             value={inputMessage}
             onChange={(e) => setInputMessage(e.target.value)}

From 9e0e2169a2f9a2c4cd9f0d624eca11796875ff60 Mon Sep 17 00:00:00 2001
From: RandithaK <bharkula3@gmail.com>
Date: Sun, 23 Nov 2025 11:57:37 +0530
Subject: [PATCH 26/34] fix: update Next.js version to 16.0.3 for improved
 performance and features

---
 package-lock.json | 80 +++++++++++++++++++++++------------------------
 package.json      |  2 +-
 2 files changed, 41 insertions(+), 41 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f14c5d8..2fa2a8b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,7 @@
         "axios": "^1.12.2",
         "js-cookie": "^3.0.5",
         "lucide-react": "^0.553.0",
-        "next": "^16.0.1",
+        "next": "^16.0.3",
         "react": "19.1.0",
         "react-dom": "19.1.0",
         "sockjs-client": "^1.6.1"
@@ -765,9 +765,9 @@
       }
     },
     "node_modules/@next/env": {
-      "version": "16.0.1",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-16.0.1.tgz",
-      "integrity": "sha512-LFvlK0TG2L3fEOX77OC35KowL8D7DlFF45C0OvKMC4hy8c/md1RC4UMNDlUGJqfCoCS2VWrZ4dSE6OjaX5+8mw==",
+      "version": "16.0.3",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-16.0.3.tgz",
+      "integrity": "sha512-IqgtY5Vwsm14mm/nmQaRMmywCU+yyMIYfk3/MHZ2ZTJvwVbBn3usZnjMi1GacrMVzVcAxJShTCpZlPs26EdEjQ==",
       "license": "MIT"
     },
     "node_modules/@next/eslint-plugin-next": {
@@ -781,9 +781,9 @@
       }
     },
     "node_modules/@next/swc-darwin-arm64": {
-      "version": "16.0.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-16.0.1.tgz",
-      "integrity": "sha512-R0YxRp6/4W7yG1nKbfu41bp3d96a0EalonQXiMe+1H9GTHfKxGNCGFNWUho18avRBPsO8T3RmdWuzmfurlQPbg==",
+      "version": "16.0.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-16.0.3.tgz",
+      "integrity": "sha512-MOnbd92+OByu0p6QBAzq1ahVWzF6nyfiH07dQDez4/Nku7G249NjxDVyEfVhz8WkLiOEU+KFVnqtgcsfP2nLXg==",
       "cpu": [
         "arm64"
       ],
@@ -797,9 +797,9 @@
       }
     },
     "node_modules/@next/swc-darwin-x64": {
-      "version": "16.0.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-16.0.1.tgz",
-      "integrity": "sha512-kETZBocRux3xITiZtOtVoVvXyQLB7VBxN7L6EPqgI5paZiUlnsgYv4q8diTNYeHmF9EiehydOBo20lTttCbHAg==",
+      "version": "16.0.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-16.0.3.tgz",
+      "integrity": "sha512-i70C4O1VmbTivYdRlk+5lj9xRc2BlK3oUikt3yJeHT1unL4LsNtN7UiOhVanFdc7vDAgZn1tV/9mQwMkWOJvHg==",
       "cpu": [
         "x64"
       ],
@@ -813,9 +813,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "16.0.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-16.0.1.tgz",
-      "integrity": "sha512-hWg3BtsxQuSKhfe0LunJoqxjO4NEpBmKkE+P2Sroos7yB//OOX3jD5ISP2wv8QdUwtRehMdwYz6VB50mY6hqAg==",
+      "version": "16.0.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-16.0.3.tgz",
+      "integrity": "sha512-O88gCZ95sScwD00mn/AtalyCoykhhlokxH/wi1huFK+rmiP5LAYVs/i2ruk7xST6SuXN4NI5y4Xf5vepb2jf6A==",
       "cpu": [
         "arm64"
       ],
@@ -829,9 +829,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "16.0.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-16.0.1.tgz",
-      "integrity": "sha512-UPnOvYg+fjAhP3b1iQStcYPWeBFRLrugEyK/lDKGk7kLNua8t5/DvDbAEFotfV1YfcOY6bru76qN9qnjLoyHCQ==",
+      "version": "16.0.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-16.0.3.tgz",
+      "integrity": "sha512-CEErFt78S/zYXzFIiv18iQCbRbLgBluS8z1TNDQoyPi8/Jr5qhR3e8XHAIxVxPBjDbEMITprqELVc5KTfFj0gg==",
       "cpu": [
         "arm64"
       ],
@@ -845,9 +845,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "16.0.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-16.0.1.tgz",
-      "integrity": "sha512-Et81SdWkcRqAJziIgFtsFyJizHoWne4fzJkvjd6V4wEkWTB4MX6J0uByUb0peiJQ4WeAt6GGmMszE5KrXK6WKg==",
+      "version": "16.0.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-16.0.3.tgz",
+      "integrity": "sha512-Tc3i+nwt6mQ+Dwzcri/WNDj56iWdycGVh5YwwklleClzPzz7UpfaMw1ci7bLl6GRYMXhWDBfe707EXNjKtiswQ==",
       "cpu": [
         "x64"
       ],
@@ -861,9 +861,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-musl": {
-      "version": "16.0.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-16.0.1.tgz",
-      "integrity": "sha512-qBbgYEBRrC1egcG03FZaVfVxrJm8wBl7vr8UFKplnxNRprctdP26xEv9nJ07Ggq4y1adwa0nz2mz83CELY7N6Q==",
+      "version": "16.0.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-16.0.3.tgz",
+      "integrity": "sha512-zTh03Z/5PBBPdTurgEtr6nY0vI9KR9Ifp/jZCcHlODzwVOEKcKRBtQIGrkc7izFgOMuXDEJBmirwpGqdM/ZixA==",
       "cpu": [
         "x64"
       ],
@@ -877,9 +877,9 @@
       }
     },
     "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "16.0.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-16.0.1.tgz",
-      "integrity": "sha512-cPuBjYP6I699/RdbHJonb3BiRNEDm5CKEBuJ6SD8k3oLam2fDRMKAvmrli4QMDgT2ixyRJ0+DTkiODbIQhRkeQ==",
+      "version": "16.0.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-16.0.3.tgz",
+      "integrity": "sha512-Jc1EHxtZovcJcg5zU43X3tuqzl/sS+CmLgjRP28ZT4vk869Ncm2NoF8qSTaL99gh6uOzgM99Shct06pSO6kA6g==",
       "cpu": [
         "arm64"
       ],
@@ -893,9 +893,9 @@
       }
     },
     "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "16.0.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-16.0.1.tgz",
-      "integrity": "sha512-XeEUJsE4JYtfrXe/LaJn3z1pD19fK0Q6Er8Qoufi+HqvdO4LEPyCxLUt4rxA+4RfYo6S9gMlmzCMU2F+AatFqQ==",
+      "version": "16.0.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-16.0.3.tgz",
+      "integrity": "sha512-N7EJ6zbxgIYpI/sWNzpVKRMbfEGgsWuOIvzkML7wxAAZhPk1Msxuo/JDu1PKjWGrAoOLaZcIX5s+/pF5LIbBBg==",
       "cpu": [
         "x64"
       ],
@@ -4739,12 +4739,12 @@
       "license": "MIT"
     },
     "node_modules/next": {
-      "version": "16.0.1",
-      "resolved": "https://registry.npmjs.org/next/-/next-16.0.1.tgz",
-      "integrity": "sha512-e9RLSssZwd35p7/vOa+hoDFggUZIUbZhIUSLZuETCwrCVvxOs87NamoUzT+vbcNAL8Ld9GobBnWOA6SbV/arOw==",
+      "version": "16.0.3",
+      "resolved": "https://registry.npmjs.org/next/-/next-16.0.3.tgz",
+      "integrity": "sha512-Ka0/iNBblPFcIubTA1Jjh6gvwqfjrGq1Y2MTI5lbjeLIAfmC+p5bQmojpRZqgHHVu5cG4+qdIiwXiBSm/8lZ3w==",
       "license": "MIT",
       "dependencies": {
-        "@next/env": "16.0.1",
+        "@next/env": "16.0.3",
         "@swc/helpers": "0.5.15",
         "caniuse-lite": "^1.0.30001579",
         "postcss": "8.4.31",
@@ -4757,14 +4757,14 @@
         "node": ">=20.9.0"
       },
       "optionalDependencies": {
-        "@next/swc-darwin-arm64": "16.0.1",
-        "@next/swc-darwin-x64": "16.0.1",
-        "@next/swc-linux-arm64-gnu": "16.0.1",
-        "@next/swc-linux-arm64-musl": "16.0.1",
-        "@next/swc-linux-x64-gnu": "16.0.1",
-        "@next/swc-linux-x64-musl": "16.0.1",
-        "@next/swc-win32-arm64-msvc": "16.0.1",
-        "@next/swc-win32-x64-msvc": "16.0.1",
+        "@next/swc-darwin-arm64": "16.0.3",
+        "@next/swc-darwin-x64": "16.0.3",
+        "@next/swc-linux-arm64-gnu": "16.0.3",
+        "@next/swc-linux-arm64-musl": "16.0.3",
+        "@next/swc-linux-x64-gnu": "16.0.3",
+        "@next/swc-linux-x64-musl": "16.0.3",
+        "@next/swc-win32-arm64-msvc": "16.0.3",
+        "@next/swc-win32-x64-msvc": "16.0.3",
         "sharp": "^0.34.4"
       },
       "peerDependencies": {
diff --git a/package.json b/package.json
index 876b8e2..814355e 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
     "axios": "^1.12.2",
     "js-cookie": "^3.0.5",
     "lucide-react": "^0.553.0",
-    "next": "^16.0.1",
+    "next": "^16.0.3",
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "sockjs-client": "^1.6.1"

From 5c4b864b0511dfa388d9d31c8a1311cfc2e14d9b Mon Sep 17 00:00:00 2001
From: RandithaK <bharkula3@gmail.com>
Date: Sun, 23 Nov 2025 12:14:37 +0530
Subject: [PATCH 27/34] fix: adjust position of notification dropdown for
 better visibility

---
 src/app/components/NotificationBell.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/components/NotificationBell.tsx b/src/app/components/NotificationBell.tsx
index a7807d8..2f5ff69 100644
--- a/src/app/components/NotificationBell.tsx
+++ b/src/app/components/NotificationBell.tsx
@@ -87,7 +87,7 @@ export default function NotificationBell() {
       </button>
 
       {open && (
-        <div className="fixed right-4 top-64 w-80 automotive-card p-4 shadow-xl z-50 max-h-[500px] flex flex-col origin-top-right">
+        <div className="fixed right-4 top-20 w-80 automotive-card p-4 shadow-xl z-50 max-h-[500px] flex flex-col origin-top-right">
           <div className="flex items-center justify-between mb-4">
             <span className="font-semibold theme-text-primary text-base">Notifications</span>
             {notifications.length > 0 && (

From 1f6ce42bcc7d7fe3fe71ec4d45b3259cb9f8e61e Mon Sep 17 00:00:00 2001
From: RandithaK <bharkula3@gmail.com>
Date: Sun, 23 Nov 2025 12:15:58 +0530
Subject: [PATCH 28/34] fix: relocate AI chat widget to dashboard layout for
 consistent access across all dashboard pages

---
 .../dashboards/CustomerDashboard.tsx          | 36 +-----------------
 src/app/dashboard/layout.tsx                  | 37 +++++++++++++++++++
 2 files changed, 38 insertions(+), 35 deletions(-)

diff --git a/src/app/components/dashboards/CustomerDashboard.tsx b/src/app/components/dashboards/CustomerDashboard.tsx
index 4b603e7..42d509d 100644
--- a/src/app/components/dashboards/CustomerDashboard.tsx
+++ b/src/app/components/dashboards/CustomerDashboard.tsx
@@ -8,7 +8,6 @@ import type { AppointmentResponseDto } from "@/types/appointment";
 import type { UserDto } from "@/types/api";
 import type { InvoiceResponseDto } from "@/types/payment";
 import type { VehicleListItem } from "@/types/vehicle";
-import AIChatWidget from "@/app/components/chatbot/AIChatWidget";
 
 interface CustomerDashboardProps {
   profile: UserDto;
@@ -20,7 +19,6 @@ const CustomerDashboard: React.FC<CustomerDashboardProps> = ({ profile }) => {
   const [invoices, setInvoices] = useState<InvoiceResponseDto[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
-  const [chatOpen, setChatOpen] = useState(false);
 
   useEffect(() => {
     const loadDashboard = async () => {
@@ -221,39 +219,7 @@ const CustomerDashboard: React.FC<CustomerDashboardProps> = ({ profile }) => {
         </div>
       </div>
 
-      {/* Floating AI Chat Widget */}
-      <div className="fixed bottom-6 right-6 z-50">
-        {chatOpen ? (
-          <div className="theme-bg-primary rounded-lg shadow-2xl w-[480px] h-[600px] flex flex-col border theme-border">
-            <div className="flex items-center justify-between p-4 border-b theme-border">
-              <h3 className="text-lg font-semibold theme-text-primary">TechTorque AI Assistant</h3>
-              <button
-                onClick={() => setChatOpen(false)}
-                className="theme-text-muted hover:theme-text-primary transition-colors"
-                aria-label="Close chat"
-              >
-                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-                </svg>
-              </button>
-            </div>
-            <div className="flex-1 overflow-hidden">
-              <AIChatWidget />
-            </div>
-          </div>
-        ) : (
-          <button
-            onClick={() => setChatOpen(true)}
-            className="theme-button-primary rounded-full p-4 shadow-lg transition-all hover:scale-110 flex items-center gap-2"
-            aria-label="Open chat"
-          >
-            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
-            </svg>
-            <span className="font-medium">Chat</span>
-          </button>
-        )}
-      </div>
+      {/* Chat widget moved into dashboard layout so it appears across all dashboard pages */}
     </div>
   );
 };
diff --git a/src/app/dashboard/layout.tsx b/src/app/dashboard/layout.tsx
index 189f8e1..ece6dc3 100644
--- a/src/app/dashboard/layout.tsx
+++ b/src/app/dashboard/layout.tsx
@@ -1,6 +1,7 @@
 'use client'
 import Link from 'next/link'
 import { useMemo, useState, type ReactNode } from 'react'
+import AIChatWidget from '@/app/components/chatbot/AIChatWidget'
 import { usePathname } from 'next/navigation'
 import ThemeToggle from '@/app/components/ThemeToggle'
 import NotificationBell from '@/app/components/NotificationBell'
@@ -41,6 +42,7 @@ function DashboardShell({ children }: { children: ReactNode }) {
   const { profile, loading, roles, activeRole, setActiveRole } = useDashboard()
   const pathname = usePathname()
   const [mobileNavOpen, setMobileNavOpen] = useState(false)
+  const [chatOpen, setChatOpen] = useState(false)
 
   const navSections = useMemo<NavSection[]>(() => buildNavigation(activeRole ? [activeRole] : roles), [roles, activeRole])
   const handleLogout = () => {
@@ -147,6 +149,41 @@ function DashboardShell({ children }: { children: ReactNode }) {
               children
             )}
           </main>
+          {/* Make the chat available to customers on every dashboard page */}
+          {(activeRole === 'CUSTOMER' || (roles && roles.includes('CUSTOMER'))) && (
+            <div className="fixed bottom-6 right-6 z-50">
+              {chatOpen ? (
+                <div className="theme-bg-primary rounded-lg shadow-2xl w-[480px] h-[600px] flex flex-col border theme-border">
+                  <div className="flex items-center justify-between p-4 border-b theme-border">
+                    <h3 className="text-lg font-semibold theme-text-primary">TechTorque AI Assistant</h3>
+                    <button
+                      onClick={() => setChatOpen(false)}
+                      className="theme-text-muted hover:theme-text-primary transition-colors"
+                      aria-label="Close chat"
+                    >
+                      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                      </svg>
+                    </button>
+                  </div>
+                  <div className="flex-1 overflow-hidden">
+                    <AIChatWidget />
+                  </div>
+                </div>
+              ) : (
+                <button
+                  onClick={() => setChatOpen(true)}
+                  className="theme-button-primary rounded-full p-4 shadow-lg transition-all hover:scale-110 flex items-center gap-2"
+                  aria-label="Open chat"
+                >
+                  <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
+                  </svg>
+                  <span className="font-medium">Chat</span>
+                </button>
+              )}
+            </div>
+          )}
         </div>
       </div>
     </div>

From 1943293d31e22360a9e3be0969359828c35660bc Mon Sep 17 00:00:00 2001
From: RandithaK <bharkula3@gmail.com>
Date: Sun, 23 Nov 2025 12:22:16 +0530
Subject: [PATCH 29/34] fix: enhance error handling in Notification context and
 API client for better debugging

---
 src/app/components/NotificationBell.tsx  | 17 ++++-----
 src/app/contexts/NotificationContext.tsx | 46 +++++++++++++++++++-----
 src/lib/apiClient.ts                     | 19 ++++++++--
 3 files changed, 64 insertions(+), 18 deletions(-)

diff --git a/src/app/components/NotificationBell.tsx b/src/app/components/NotificationBell.tsx
index 2f5ff69..18a9f7d 100644
--- a/src/app/components/NotificationBell.tsx
+++ b/src/app/components/NotificationBell.tsx
@@ -4,9 +4,9 @@ import { useEffect, useRef, useState } from 'react'
 import { useNotifications } from '@/app/contexts/NotificationContext'
 
 export default function NotificationBell() {
-  const { notifications, unreadCount, loading, markAsRead, markAllAsRead, fetchNotifications, isConnected } = useNotifications()
+  const { notifications, unreadCount, loading, error, markAsRead, markAllAsRead, fetchNotifications, isConnected } = useNotifications()
   const [open, setOpen] = useState(false)
-  const [error, setError] = useState<string | null>(null)
+  const [localError, setLocalError] = useState<string | null>(null)
   const panelRef = useRef<HTMLDivElement | null>(null)
 
   useEffect(() => {
@@ -29,6 +29,7 @@ export default function NotificationBell() {
     const nextState = !open
     setOpen(nextState)
     if (nextState) {
+      setLocalError(null)
       await fetchNotifications()
     }
   }
@@ -36,20 +37,20 @@ export default function NotificationBell() {
   const handleMarkAsRead = async (notificationId: string) => {
     try {
       await markAsRead(notificationId)
-      setError(null)
+      setLocalError(null)
     } catch (err: unknown) {
       const message = (err as { response?: { data?: { message?: string } } }).response?.data?.message || 'Failed to mark notification as read'
-      setError(message)
+      setLocalError(message)
     }
   }
 
   const handleMarkAllAsRead = async () => {
     try {
       await markAllAsRead()
-      setError(null)
+      setLocalError(null)
     } catch (err: unknown) {
       const message = (err as { response?: { data?: { message?: string } } }).response?.data?.message || 'Failed to mark notifications as read'
-      setError(message)
+      setLocalError(message)
     }
   }
 
@@ -103,8 +104,8 @@ export default function NotificationBell() {
 
           {loading ? (
             <div className="py-8 text-center theme-text-muted text-sm">Loading notifications...</div>
-          ) : error ? (
-            <div className="py-8 text-center theme-text-danger text-sm">{error}</div>
+          ) : (localError || error) ? (
+            <div className="py-8 text-center theme-text-danger text-sm">{localError || error}</div>
           ) : notifications.length === 0 ? (
             <div className="py-8 text-center theme-text-muted text-sm">No notifications yet.</div>
           ) : (
diff --git a/src/app/contexts/NotificationContext.tsx b/src/app/contexts/NotificationContext.tsx
index 7e74c19..9fb7b65 100644
--- a/src/app/contexts/NotificationContext.tsx
+++ b/src/app/contexts/NotificationContext.tsx
@@ -1,6 +1,7 @@
 "use client";
 import React, { createContext, useContext, useState, useEffect, useCallback, ReactNode } from 'react';
 import websocketService from '@/services/websocketService';
+import type { AxiosError } from 'axios';
 import notificationService from '@/services/notificationService';
 import type { NotificationResponse } from '@/types/notification';
 
@@ -8,6 +9,7 @@ interface NotificationContextType {
   notifications: NotificationResponse[];
   unreadCount: number;
   loading: boolean;
+  error: string | null;
   isConnected: boolean;
   fetchNotifications: (unreadOnly?: boolean) => Promise<void>;
   markAsRead: (notificationId: string) => Promise<void>;
@@ -35,6 +37,7 @@ export const NotificationProvider: React.FC<NotificationProviderProps> = ({ chil
   const [notifications, setNotifications] = useState<NotificationResponse[]>([]);
   const [unreadCount, setUnreadCount] = useState<number>(0);
   const [loading, setLoading] = useState<boolean>(true);
+  const [error, setError] = useState<string | null>(null);
   const [isConnected, setIsConnected] = useState<boolean>(false);
   const [toastNotification, setToastNotification] = useState<NotificationResponse | null>(null);
 
@@ -44,14 +47,25 @@ export const NotificationProvider: React.FC<NotificationProviderProps> = ({ chil
 
     try {
       setLoading(true);
+      setError(null);
       const data = await notificationService.getNotifications(unreadOnly);
       setNotifications(data);
 
       // Also fetch unread count
       const count = await notificationService.getUnreadCount();
       setUnreadCount(count);
-    } catch (error) {
-      console.error('Failed to fetch notifications:', error);
+    } catch (err: unknown) {
+      // Prefer any attached `response?.data?.message` but fall back to
+      // the error message. Our apiClient now augments error objects with
+      // status/response fields so we can provide a better user message.
+      console.error('Failed to fetch notifications:', err);
+      const axiosErr = err as AxiosError<unknown> | undefined;
+      // Prefer response.data.message when available, otherwise use Error.message
+      const msg = axiosErr?.response?.data && typeof axiosErr.response.data === 'object' && 'message' in axiosErr.response.data
+        ? // response.data typing varies; narrow to { message?: string }
+          (axiosErr.response.data as { message?: string }).message ?? (err instanceof Error ? err.message : 'Failed to fetch notifications')
+        : (err instanceof Error ? err.message : 'Failed to fetch notifications');
+      setError(msg);
     } finally {
       setLoading(false);
     }
@@ -67,8 +81,13 @@ export const NotificationProvider: React.FC<NotificationProviderProps> = ({ chil
         prev.map(n => n.notificationId === notificationId ? { ...n, read: true } : n)
       );
       setUnreadCount(prev => Math.max(0, prev - 1));
-    } catch (error) {
-      console.error('Failed to mark notification as read:', error);
+    } catch (err: unknown) {
+      console.error('Failed to mark notification as read:', err);
+      const axiosErr = err as AxiosError<unknown> | undefined;
+      const msg = axiosErr?.response?.data && typeof axiosErr.response.data === 'object' && 'message' in axiosErr.response.data
+        ? (axiosErr.response.data as { message?: string }).message ?? (err instanceof Error ? err.message : 'Failed to mark notification as read')
+        : (err instanceof Error ? err.message : 'Failed to mark notification as read');
+      setError(msg);
     }
   }, []);
 
@@ -80,8 +99,13 @@ export const NotificationProvider: React.FC<NotificationProviderProps> = ({ chil
       // Update local state
       setNotifications(prev => prev.map(n => ({ ...n, read: true })));
       setUnreadCount(0);
-    } catch (error) {
-      console.error('Failed to mark all notifications as read:', error);
+    } catch (err: unknown) {
+      console.error('Failed to mark all notifications as read:', err);
+      const axiosErr = err as AxiosError<unknown> | undefined;
+      const msg = axiosErr?.response?.data && typeof axiosErr.response.data === 'object' && 'message' in axiosErr.response.data
+        ? (axiosErr.response.data as { message?: string }).message ?? (err instanceof Error ? err.message : 'Failed to mark all notifications as read')
+        : (err instanceof Error ? err.message : 'Failed to mark all notifications as read');
+      setError(msg);
     }
   }, []);
 
@@ -97,8 +121,13 @@ export const NotificationProvider: React.FC<NotificationProviderProps> = ({ chil
       if (deletedNotification && !deletedNotification.read) {
         setUnreadCount(prev => Math.max(0, prev - 1));
       }
-    } catch (error) {
-      console.error('Failed to delete notification:', error);
+    } catch (err: unknown) {
+      console.error('Failed to delete notification:', err);
+      const axiosErr = err as AxiosError<unknown> | undefined;
+      const msg = axiosErr?.response?.data && typeof axiosErr.response.data === 'object' && 'message' in axiosErr.response.data
+        ? (axiosErr.response.data as { message?: string }).message ?? (err instanceof Error ? err.message : 'Failed to delete notification')
+        : (err instanceof Error ? err.message : 'Failed to delete notification');
+      setError(msg);
     }
   }, [notifications]);
 
@@ -154,6 +183,7 @@ export const NotificationProvider: React.FC<NotificationProviderProps> = ({ chil
     notifications,
     unreadCount,
     loading,
+    error,
     isConnected,
     fetchNotifications,
     markAsRead,
diff --git a/src/lib/apiClient.ts b/src/lib/apiClient.ts
index 9b0c34c..6850c14 100644
--- a/src/lib/apiClient.ts
+++ b/src/lib/apiClient.ts
@@ -74,8 +74,23 @@ apiClient.interceptors.response.use(
       errorMessage = error.message;
     }
 
-    // Create a new error with the extracted message
-    const enhancedError = new Error(errorMessage);
+    // Create a new Error and attach useful response metadata so callers
+    // can inspect status / response details instead of only seeing
+    // the generic axios message (e.g. "Request failed with status code 502").
+    const enhancedError = new Error(errorMessage) as Error & {
+      status?: number;
+      response?: any;
+      config?: any;
+      original?: any;
+    };
+
+    // Preserve important axios error metadata so higher-level code can
+    // branch based on status, read a response body, etc.
+    enhancedError.status = error.response?.status;
+    enhancedError.response = error.response;
+    enhancedError.config = error.config;
+    enhancedError.original = error;
+
     return Promise.reject(enhancedError);
   }
 );

From 2a9012eac22d37d36f4a461fce958c451ac1b17f Mon Sep 17 00:00:00 2001
From: RandithaK <bharkula3@gmail.com>
Date: Sun, 23 Nov 2025 12:22:28 +0530
Subject: [PATCH 30/34] fix: enhance error handling in response interceptor and
 add unit tests for improved reliability

---
 src/lib/__tests__/apiClient.test.ts | 33 +++++++++++++++++++++++++++++
 src/lib/apiClient.ts                |  6 +++---
 2 files changed, 36 insertions(+), 3 deletions(-)
 create mode 100644 src/lib/__tests__/apiClient.test.ts

diff --git a/src/lib/__tests__/apiClient.test.ts b/src/lib/__tests__/apiClient.test.ts
new file mode 100644
index 0000000..0748d3f
--- /dev/null
+++ b/src/lib/__tests__/apiClient.test.ts
@@ -0,0 +1,33 @@
+/* eslint-env vitest */
+/// <reference types="vitest" />
+
+import apiClient from '../apiClient';
+
+describe('apiClient response interceptor', () => {
+  it('attaches status/response/config/original to rejected error', async () => {
+    type Handler = { fulfilled?: (value: unknown) => unknown; rejected?: (reason?: unknown) => unknown };
+    const handlers = (apiClient.interceptors.response as unknown as { handlers: Handler[] }).handlers;
+    const rejectedHandler = handlers.find((h) => h.rejected)?.rejected;
+
+    expect(typeof rejectedHandler).toBe('function');
+    if (!rejectedHandler) throw new Error('No rejected interceptor found');
+
+    const mockErr = {
+      response: { status: 502, data: { message: 'Bad Gateway' } },
+      config: { url: '/notifications' },
+      message: 'Request failed with status code 502',
+    } as unknown as Error & { response?: { status: number; data: { message?: string } }; config?: Record<string, unknown> };
+
+    // Call the interceptor's rejection handler and assert it rejects with
+    // an enhanced Error object containing metadata.
+    await expect(
+      Promise.reject(mockErr).catch(rejectedHandler as (reason: unknown) => PromiseLike<never> | never)
+    ).rejects.toMatchObject({
+      message: 'Bad Gateway',
+      status: 502,
+      response: mockErr.response,
+      config: mockErr.config,
+      original: mockErr,
+    });
+  });
+});
diff --git a/src/lib/apiClient.ts b/src/lib/apiClient.ts
index 6850c14..98e2be0 100644
--- a/src/lib/apiClient.ts
+++ b/src/lib/apiClient.ts
@@ -79,9 +79,9 @@ apiClient.interceptors.response.use(
     // the generic axios message (e.g. "Request failed with status code 502").
     const enhancedError = new Error(errorMessage) as Error & {
       status?: number;
-      response?: any;
-      config?: any;
-      original?: any;
+      response?: unknown;
+      config?: Record<string, unknown> | undefined;
+      original?: unknown;
     };
 
     // Preserve important axios error metadata so higher-level code can

From 5a964a01a6069f66d5832a9344acb0e312da1277 Mon Sep 17 00:00:00 2001
From: RandithaK <bharkula3@gmail.com>
Date: Sun, 23 Nov 2025 12:23:03 +0530
Subject: [PATCH 31/34] fix: remove outdated apiClient tests to streamline
 codebase

---
 src/lib/__tests__/apiClient.test.ts | 33 -----------------------------
 1 file changed, 33 deletions(-)
 delete mode 100644 src/lib/__tests__/apiClient.test.ts

diff --git a/src/lib/__tests__/apiClient.test.ts b/src/lib/__tests__/apiClient.test.ts
deleted file mode 100644
index 0748d3f..0000000
--- a/src/lib/__tests__/apiClient.test.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-/* eslint-env vitest */
-/// <reference types="vitest" />
-
-import apiClient from '../apiClient';
-
-describe('apiClient response interceptor', () => {
-  it('attaches status/response/config/original to rejected error', async () => {
-    type Handler = { fulfilled?: (value: unknown) => unknown; rejected?: (reason?: unknown) => unknown };
-    const handlers = (apiClient.interceptors.response as unknown as { handlers: Handler[] }).handlers;
-    const rejectedHandler = handlers.find((h) => h.rejected)?.rejected;
-
-    expect(typeof rejectedHandler).toBe('function');
-    if (!rejectedHandler) throw new Error('No rejected interceptor found');
-
-    const mockErr = {
-      response: { status: 502, data: { message: 'Bad Gateway' } },
-      config: { url: '/notifications' },
-      message: 'Request failed with status code 502',
-    } as unknown as Error & { response?: { status: number; data: { message?: string } }; config?: Record<string, unknown> };
-
-    // Call the interceptor's rejection handler and assert it rejects with
-    // an enhanced Error object containing metadata.
-    await expect(
-      Promise.reject(mockErr).catch(rejectedHandler as (reason: unknown) => PromiseLike<never> | never)
-    ).rejects.toMatchObject({
-      message: 'Bad Gateway',
-      status: 502,
-      response: mockErr.response,
-      config: mockErr.config,
-      original: mockErr,
-    });
-  });
-});

From 738be5c24187763ab165fc61cfc6816f665433f9 Mon Sep 17 00:00:00 2001
From: RandithaK <bharkula3@gmail.com>
Date: Sun, 23 Nov 2025 12:24:08 +0530
Subject: [PATCH 32/34] fix: improve error handling in user creation process
 for better clarity and debugging

---
 src/app/dashboard/admin/users/page.tsx | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/app/dashboard/admin/users/page.tsx b/src/app/dashboard/admin/users/page.tsx
index 093b77b..820186d 100644
--- a/src/app/dashboard/admin/users/page.tsx
+++ b/src/app/dashboard/admin/users/page.tsx
@@ -82,11 +82,19 @@ export default function AdminUsersPage() {
       success(`${createUserType === 'employee' ? 'Employee' : 'Admin'} created successfully!`);
     } catch (err) {
       console.error('Failed to create user:', err);
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const error = err as any;
-      const errorMessage = error?.response?.status === 403
-        ? 'Permission denied. You do not have the required permissions to create this user type.'
-        : error?.response?.data?.message || 'Failed to create user. Please try again.';
+      const unknownErr = err as unknown;
+      let errorMessage = 'Failed to create user. Please try again.';
+
+      if (unknownErr && typeof unknownErr === 'object' && 'response' in unknownErr) {
+        const resp = (unknownErr as { response?: { status?: number; data?: unknown } }).response;
+        if (resp?.status === 403) {
+          errorMessage = 'Permission denied. You do not have the required permissions to create this user type.';
+        } else if (resp?.data && typeof resp.data === 'object' && 'message' in resp.data) {
+          errorMessage = (resp.data as { message?: string }).message ?? errorMessage;
+        }
+      } else if (err instanceof Error) {
+        errorMessage = err.message;
+      }
       showError(errorMessage);
     }
   };

From a067e5f0a2fc6c85fb9e60f07cb67b3464dee562 Mon Sep 17 00:00:00 2001
From: RandithaK <bharkula3@gmail.com>
Date: Sun, 23 Nov 2025 13:25:23 +0530
Subject: [PATCH 33/34] fix: enhance error handling in AI chat widget and API
 client for improved clarity and user feedback

---
 src/app/components/chatbot/AIChatWidget.tsx | 66 ++++++++++++++++++---
 src/lib/apiClient.ts                        | 55 +++++++++++++++--
 2 files changed, 110 insertions(+), 11 deletions(-)

diff --git a/src/app/components/chatbot/AIChatWidget.tsx b/src/app/components/chatbot/AIChatWidget.tsx
index eab48b3..d1098be 100644
--- a/src/app/components/chatbot/AIChatWidget.tsx
+++ b/src/app/components/chatbot/AIChatWidget.tsx
@@ -72,14 +72,66 @@ const AIChatWidget: React.FC = () => {
         // session_id may be undefined from the server — convert to null so it matches our state type
         setSessionId(data.session_id ?? null);
       } catch (error: unknown) {
-        console.error('Chat Error:', error);
-        const errorMessage: Message = {
-          text:
-            error instanceof Error && error.message.includes('401')
-              ? "🔒 Your session has expired. Please log in again to continue chatting!"
-              : "⚠️ Oops! I'm having trouble connecting to my services right now. Please try again in a moment! 🔄",
-          sender: 'system',
+        // Log a small, useful summary to the console — keep heavy objects off the top-level
+        const getErrorStatus = (e: unknown): number | undefined => {
+          if (typeof e !== 'object' || e === null) return undefined;
+          const obj = e as Record<string, unknown>;
+          if (typeof obj.status === 'number') return obj.status;
+          if (obj.response && typeof obj.response === 'object') {
+            const resp = obj.response as Record<string, unknown>;
+            if (typeof resp.status === 'number') return resp.status;
+          }
+          return undefined;
         };
+
+        const getServerMessage = (e: unknown): string | undefined => {
+          if (typeof e !== 'object' || e === null) return undefined;
+          const obj = e as Record<string, unknown>;
+
+          // Prefer top-level message if present
+          if (typeof obj.message === 'string') return obj.message;
+
+          // Try nested response -> data -> detail/message/error/msg
+          const resp = obj.response as Record<string, unknown> | undefined;
+          const data = resp?.data as Record<string, unknown> | undefined;
+          const detail = data?.detail ?? data?.message ?? data?.error ?? data?.msg;
+          if (typeof detail === 'string') return detail;
+
+          // If detail is an object (validation payload), stringify a small piece
+          if (typeof detail === 'object' && detail !== null) {
+            const keys = Object.keys(detail as Record<string, unknown>);
+            if (keys.length) {
+              const candidate = (detail as Record<string, unknown>)[keys[0]];
+              if (typeof candidate === 'string') return candidate;
+              try {
+                return JSON.stringify(candidate);
+              } catch {
+                return String(candidate);
+              }
+            }
+          }
+
+          return undefined;
+        };
+
+        const status = getErrorStatus(error);
+        const serverMessage = getServerMessage(error) ?? undefined;
+        console.error('Chat Error: status=%s message=%o', status ?? 'unknown', serverMessage ?? error);
+
+        // Build a user-facing message based on status and any server-provided message
+        let displayText = "⚠️ Oops! I'm having trouble connecting to my services right now. Please try again in a moment! 🔄";
+        if (status === 401) {
+          displayText = "🔒 Your session has expired. Please log in again to continue chatting!";
+        } else if (status === 422 || status === 400) {
+          // Validation errors are common — show a simple hint and any server-provided message
+          displayText = serverMessage
+            ? `⚠️ Validation failed: ${String(serverMessage)}`
+            : "⚠️ The data you sent wasn't valid. Please check and try again.";
+        } else if (typeof serverMessage === 'string' && serverMessage.length) {
+          displayText = `⚠️ ${serverMessage}`;
+        }
+
+        const errorMessage: Message = { text: displayText, sender: 'system' };
         setConversationHistory((prev) => [...prev, errorMessage]);
       } finally {
         setIsLoading(false);
diff --git a/src/lib/apiClient.ts b/src/lib/apiClient.ts
index 98e2be0..4f4587f 100644
--- a/src/lib/apiClient.ts
+++ b/src/lib/apiClient.ts
@@ -64,14 +64,60 @@ apiClient.interceptors.response.use(
       }
     }
 
-    // Extract meaningful error message from response
+    // Helper: extract a short, readable message from common server response shapes
+    function extractShortErrorMessage(payload: unknown): string {
+      if (!payload) return 'An error occurred';
+
+      // Common FastAPI / Python responses frequently put the human-friendly
+      // message into `detail` (string/array/object). Other APIs may use
+      // `message`, `error` or `msg` fields.
+      const asAny = payload as Record<string, unknown>;
+
+      const candidates = [asAny.detail, asAny.message, asAny.error, asAny.msg];
+
+      for (const c of candidates) {
+        if (typeof c === 'string' && c.trim()) return c.trim();
+        if (Array.isArray(c) && c.length) {
+          // array payloads might include nested validation errors; join first elements
+          try {
+            return JSON.stringify(c[0]);
+          } catch {
+            return String(c[0]);
+          }
+        }
+
+        if (typeof c === 'object' && c !== null) {
+          // If we get an object, try to serialize the most useful key/value pair
+          const keys = Object.keys(c as Record<string, unknown>);
+          if (keys.length) {
+            const candidate = (c as Record<string, unknown>)[keys[0]];
+            if (typeof candidate === 'string') return candidate;
+            try {
+              return JSON.stringify(candidate);
+            } catch {
+              return String(candidate);
+            }
+          }
+        }
+      }
+
+      // Fallback to a compact string of the whole object
+      try {
+        return JSON.stringify(payload);
+      } catch {
+        return String(payload);
+      }
+    }
+
+    // Extract meaningful error message from response, but keep it safe for UI
     let errorMessage = 'An error occurred';
     if (error.response?.data) {
       const data = error.response.data;
-      // Try different possible error message fields
-      errorMessage = data.message || data.error || data.msg || JSON.stringify(data);
+      const candidate = extractShortErrorMessage(data);
+      // Keep messages short (single-line) so they are safe to show in UIs and logs
+      errorMessage = candidate.split(/\r?\n/)[0].slice(0, 300);
     } else if (error.message) {
-      errorMessage = error.message;
+      errorMessage = String(error.message).split(/\r?\n/)[0].slice(0, 300);
     }
 
     // Create a new Error and attach useful response metadata so callers
@@ -87,6 +133,7 @@ apiClient.interceptors.response.use(
     // Preserve important axios error metadata so higher-level code can
     // branch based on status, read a response body, etc.
     enhancedError.status = error.response?.status;
+    // preserve the raw response so callers can inspect the full payload if needed
     enhancedError.response = error.response;
     enhancedError.config = error.config;
     enhancedError.original = error;

From 2e11791317ec471b300fb0d425e7eaa12a1cacfa Mon Sep 17 00:00:00 2001
From: RandithaK <bharkula3@gmail.com>
Date: Sun, 23 Nov 2025 13:31:53 +0530
Subject: [PATCH 34/34] fix: enhance error logging in AI chat widget to
 sanitize messages for improved clarity and security

---
 src/app/components/chatbot/AIChatWidget.tsx | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/app/components/chatbot/AIChatWidget.tsx b/src/app/components/chatbot/AIChatWidget.tsx
index d1098be..c68ede5 100644
--- a/src/app/components/chatbot/AIChatWidget.tsx
+++ b/src/app/components/chatbot/AIChatWidget.tsx
@@ -116,7 +116,23 @@ const AIChatWidget: React.FC = () => {
 
         const status = getErrorStatus(error);
         const serverMessage = getServerMessage(error) ?? undefined;
-        console.error('Chat Error: status=%s message=%o', status ?? 'unknown', serverMessage ?? error);
+        // Sanitize the message before logging to avoid huge multi-line validation
+        // payloads from backend (e.g. Pydantic validation objects).
+        const sanitizeForLog = (v: unknown, maxLen = 300): string => {
+          if (typeof v === 'string') return v.split(/\r?\n/)[0].slice(0, maxLen);
+          try {
+            const s = JSON.stringify(v);
+            return s.split(/\r?\n/)[0].slice(0, maxLen);
+          } catch {
+            return String(v).split(/\r?\n/)[0].slice(0, maxLen);
+          }
+        };
+
+        console.error(
+          'Chat Error: status=%s message=%s',
+          status ?? 'unknown',
+          sanitizeForLog(serverMessage ?? error)
+        );
 
         // Build a user-facing message based on status and any server-provided message
         let displayText = "⚠️ Oops! I'm having trouble connecting to my services right now. Please try again in a moment! 🔄";