From 9a0f0fa76b44d0c1181adef309a9f90d5839a3ae Mon Sep 17 00:00:00 2001
From: Mehara Rothila Ranawaka <rothilamehara22@gmail.com>
Date: Fri, 7 Nov 2025 00:41:58 +0530
Subject: [PATCH 01/38] Update admin dashboard pages

---
 src/app/dashboard/admin/audit-logs/page.tsx   |  53 +++-
 src/app/dashboard/admin/config/page.tsx       |  30 +-
 src/app/dashboard/admin/page.tsx              |  30 +-
 src/app/dashboard/admin/reports/page.tsx      |  81 ++++-
 .../dashboard/admin/service-types/page.tsx    |  30 +-
 src/app/dashboard/admin/users/page.tsx        | 298 +++++++++++++++++-
 6 files changed, 490 insertions(+), 32 deletions(-)

diff --git a/src/app/dashboard/admin/audit-logs/page.tsx b/src/app/dashboard/admin/audit-logs/page.tsx
index a0359a7..699f8f9 100644
--- a/src/app/dashboard/admin/audit-logs/page.tsx
+++ b/src/app/dashboard/admin/audit-logs/page.tsx
@@ -3,10 +3,13 @@
 import { useState, useEffect } from 'react';
 import { adminService } from '@/services/adminService';
 import { AuditLogResponse } from '@/types/admin';
+import { useDashboard } from '@/app/contexts/DashboardContext';
 
 export default function AuditLogsPage() {
+  const { roles, loading: rolesLoading } = useDashboard();
   const [logs, setLogs] = useState<AuditLogResponse[]>([]);
   const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
     loadLogs();
@@ -15,11 +18,15 @@ export default function AuditLogsPage() {
   const loadLogs = async () => {
     try {
       setLoading(true);
+      setError(null);
       const data = await adminService.getAuditLogs();
       // Ensure data is an array
       setLogs(Array.isArray(data) ? data : []);
     } catch (err) {
       console.error('Failed to load audit logs:', err);
+      const errorMessage = (err as { response?: { data?: { message?: string } } })?.response?.data?.message ||
+        'Failed to load audit logs. The service may be unavailable.';
+      setError(errorMessage);
       setLogs([]); // Set empty array on error
     } finally {
       setLoading(false);
@@ -36,7 +43,11 @@ export default function AuditLogsPage() {
     });
   };
 
-  if (loading) {
+  // Check if user has permission to access this page
+  const hasRole = (role: string) => roles?.includes(role);
+  const hasAccess = hasRole('ADMIN') || hasRole('SUPER_ADMIN');
+
+  if (rolesLoading || loading) {
     return (
       <div className="max-w-7xl mx-auto p-6">
         <div className="animate-pulse space-y-3">
@@ -48,6 +59,28 @@ export default function AuditLogsPage() {
     );
   }
 
+  // Block access for customers and employees
+  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">
+          <svg
+            className="mx-auto w-16 h-16 text-red-600 dark:text-red-400 mb-4"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+          </svg>
+          <h2 className="text-2xl font-bold text-red-900 dark:text-red-100 mb-2">Access Denied</h2>
+          <p className="text-red-700 dark:text-red-300">
+            This page is only accessible to admins and super admins.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className="max-w-7xl mx-auto p-6">
       <div className="mb-8">
@@ -55,6 +88,12 @@ export default function AuditLogsPage() {
         <p className="theme-text-muted">System activity and audit trail</p>
       </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">
+          {error}
+        </div>
+      )}
+
       <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">
@@ -70,8 +109,16 @@ export default function AuditLogsPage() {
             <tbody className="divide-y divide-gray-200 dark:divide-gray-800">
               {logs.length === 0 ? (
                 <tr>
-                  <td colSpan={5} className="px-6 py-8 text-center text-sm theme-text-muted">
-                    No audit logs found
+                  <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">
+                      <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">
+                      {error ? 'Unable to load audit logs' : 'No audit logs found'}
+                    </p>
+                    <p className="text-xs theme-text-muted mt-1">
+                      Audit logs will appear here as system activities are tracked
+                    </p>
                   </td>
                 </tr>
               ) : (
diff --git a/src/app/dashboard/admin/config/page.tsx b/src/app/dashboard/admin/config/page.tsx
index a950951..d2116ea 100644
--- a/src/app/dashboard/admin/config/page.tsx
+++ b/src/app/dashboard/admin/config/page.tsx
@@ -3,8 +3,10 @@
 import { useState, useEffect } from 'react';
 import { adminService } from '@/services/adminService';
 import { SystemConfigurationResponse } from '@/types/admin';
+import { useDashboard } from '@/app/contexts/DashboardContext';
 
 export default function ConfigPage() {
+  const { roles, loading: rolesLoading } = useDashboard();
   const [configs, setConfigs] = useState<SystemConfigurationResponse[]>([]);
   const [loading, setLoading] = useState(true);
 
@@ -43,7 +45,11 @@ export default function ConfigPage() {
     return acc;
   }, {} as Record<string, SystemConfigurationResponse[]>);
 
-  if (loading) {
+  // Check if user has permission to access this page
+  const hasRole = (role: string) => roles?.includes(role);
+  const hasAccess = hasRole('ADMIN') || hasRole('SUPER_ADMIN');
+
+  if (rolesLoading || loading) {
     return (
       <div className="max-w-7xl mx-auto p-6">
         <div className="animate-pulse space-y-4">
@@ -55,6 +61,28 @@ export default function ConfigPage() {
     );
   }
 
+  // Block access for customers and employees
+  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">
+          <svg
+            className="mx-auto w-16 h-16 text-red-600 dark:text-red-400 mb-4"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+          </svg>
+          <h2 className="text-2xl font-bold text-red-900 dark:text-red-100 mb-2">Access Denied</h2>
+          <p className="text-red-700 dark:text-red-300">
+            This page is only accessible to admins and super admins.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className="max-w-7xl mx-auto p-6">
       <div className="mb-8">
diff --git a/src/app/dashboard/admin/page.tsx b/src/app/dashboard/admin/page.tsx
index 89a2ef4..83f1ade 100644
--- a/src/app/dashboard/admin/page.tsx
+++ b/src/app/dashboard/admin/page.tsx
@@ -4,8 +4,10 @@ import { useState, useEffect } from 'react';
 import Link from 'next/link';
 import { adminService } from '@/services/adminService';
 import { AnalyticsDashboardResponse } from '@/types/admin';
+import { useDashboard } from '@/app/contexts/DashboardContext';
 
 export default function AdminPage() {
+  const { roles, loading: rolesLoading } = useDashboard();
   const [stats, setStats] = useState<AnalyticsDashboardResponse | null>(null);
   const [loading, setLoading] = useState(true);
 
@@ -25,7 +27,11 @@ export default function AdminPage() {
     }
   };
 
-  if (loading) {
+  // Check if user has permission to access this page
+  const hasRole = (role: string) => roles?.includes(role);
+  const hasAccess = hasRole('ADMIN') || hasRole('SUPER_ADMIN');
+
+  if (rolesLoading || loading) {
     return (
       <div className="max-w-7xl mx-auto p-6">
         <div className="animate-pulse space-y-6">
@@ -40,6 +46,28 @@ export default function AdminPage() {
     );
   }
 
+  // Block access for customers and employees
+  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">
+          <svg
+            className="mx-auto w-16 h-16 text-red-600 dark:text-red-400 mb-4"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+          </svg>
+          <h2 className="text-2xl font-bold text-red-900 dark:text-red-100 mb-2">Access Denied</h2>
+          <p className="text-red-700 dark:text-red-300">
+            This page is only accessible to admins and super admins.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className="max-w-7xl mx-auto p-6">
       <div className="mb-8">
diff --git a/src/app/dashboard/admin/reports/page.tsx b/src/app/dashboard/admin/reports/page.tsx
index 1d9a6b6..4aab25f 100644
--- a/src/app/dashboard/admin/reports/page.tsx
+++ b/src/app/dashboard/admin/reports/page.tsx
@@ -3,20 +3,24 @@
 import { useState } from 'react';
 import { adminService } from '@/services/adminService';
 import { ReportRequest } from '@/types/admin';
+import { useDashboard } from '@/app/contexts/DashboardContext';
 
 export default function ReportsPage() {
+  const { roles, loading: rolesLoading } = useDashboard();
   const [generating, setGenerating] = useState(false);
-  const [reportType, setReportType] = useState<'REVENUE' | 'SERVICES' | 'CUSTOMERS' | 'EMPLOYEES'>('REVENUE');
+  const [reportType, setReportType] = useState<'SERVICE_PERFORMANCE' | 'REVENUE' | 'EMPLOYEE_PRODUCTIVITY' | 'CUSTOMER_SATISFACTION' | 'INVENTORY' | 'APPOINTMENT_SUMMARY'>('REVENUE');
+  const [format, setFormat] = useState<'JSON' | 'PDF' | 'EXCEL' | 'CSV'>('PDF');
   const [dateRange, setDateRange] = useState({
-    from: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000).toISOString().split('T')[0],
-    to: new Date().toISOString().split('T')[0],
+    fromDate: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000).toISOString().split('T')[0],
+    toDate: new Date().toISOString().split('T')[0],
   });
 
   const handleGenerateReport = async () => {
     try {
       setGenerating(true);
       const request: ReportRequest = {
-        reportType,
+        type: reportType,
+        format,
         ...dateRange,
       };
       const report = await adminService.generateReport(request);
@@ -31,6 +35,43 @@ export default function ReportsPage() {
     }
   };
 
+  // Check if user has permission to access this page
+  const hasRole = (role: string) => roles?.includes(role);
+  const hasAccess = hasRole('ADMIN') || hasRole('SUPER_ADMIN');
+
+  if (rolesLoading) {
+    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>
+      </div>
+    );
+  }
+
+  // Block access for customers and employees
+  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">
+          <svg
+            className="mx-auto w-16 h-16 text-red-600 dark:text-red-400 mb-4"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+          </svg>
+          <h2 className="text-2xl font-bold text-red-900 dark:text-red-100 mb-2">Access Denied</h2>
+          <p className="text-red-700 dark:text-red-300">
+            This page is only accessible to admins and super admins.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className="max-w-4xl mx-auto p-6">
       <div className="mb-8">
@@ -46,13 +87,29 @@ export default function ReportsPage() {
             <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 'REVENUE' | 'SERVICES' | 'CUSTOMERS' | 'EMPLOYEES')}
+              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"
             >
               <option value="REVENUE">Revenue Report</option>
-              <option value="SERVICES">Services Report</option>
-              <option value="CUSTOMERS">Customers Report</option>
-              <option value="EMPLOYEES">Employees 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>
+            <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="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"
+            >
+              <option value="PDF">PDF</option>
+              <option value="EXCEL">Excel</option>
+              <option value="CSV">CSV</option>
+              <option value="JSON">JSON</option>
             </select>
           </div>
 
@@ -61,8 +118,8 @@ export default function ReportsPage() {
               <label className="block text-sm font-semibold theme-text-primary mb-2">From Date</label>
               <input
                 type="date"
-                value={dateRange.from}
-                onChange={(e) => setDateRange({ ...dateRange, from: e.target.value })}
+                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"
               />
             </div>
@@ -70,8 +127,8 @@ export default function ReportsPage() {
               <label className="block text-sm font-semibold theme-text-primary mb-2">To Date</label>
               <input
                 type="date"
-                value={dateRange.to}
-                onChange={(e) => setDateRange({ ...dateRange, to: e.target.value })}
+                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"
               />
             </div>
diff --git a/src/app/dashboard/admin/service-types/page.tsx b/src/app/dashboard/admin/service-types/page.tsx
index 8e481ad..fc5953c 100644
--- a/src/app/dashboard/admin/service-types/page.tsx
+++ b/src/app/dashboard/admin/service-types/page.tsx
@@ -3,8 +3,10 @@
 import { useState, useEffect } from 'react';
 import { adminService } from '@/services/adminService';
 import { ServiceTypeResponse } from '@/types/admin';
+import { useDashboard } from '@/app/contexts/DashboardContext';
 
 export default function ServiceTypesPage() {
+  const { roles, loading: rolesLoading } = useDashboard();
   const [serviceTypes, setServiceTypes] = useState<ServiceTypeResponse[]>([]);
   const [loading, setLoading] = useState(true);
 
@@ -26,7 +28,11 @@ export default function ServiceTypesPage() {
     }
   };
 
-  if (loading) {
+  // Check if user has permission to access this page
+  const hasRole = (role: string) => roles?.includes(role);
+  const hasAccess = hasRole('ADMIN') || hasRole('SUPER_ADMIN');
+
+  if (rolesLoading || loading) {
     return (
       <div className="max-w-7xl mx-auto p-6">
         <div className="animate-pulse space-y-4">
@@ -38,6 +44,28 @@ export default function ServiceTypesPage() {
     );
   }
 
+  // Block access for customers and employees
+  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">
+          <svg
+            className="mx-auto w-16 h-16 text-red-600 dark:text-red-400 mb-4"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+          </svg>
+          <h2 className="text-2xl font-bold text-red-900 dark:text-red-100 mb-2">Access Denied</h2>
+          <p className="text-red-700 dark:text-red-300">
+            This page is only accessible to admins and super admins.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className="max-w-7xl mx-auto p-6">
       <div className="mb-8">
diff --git a/src/app/dashboard/admin/users/page.tsx b/src/app/dashboard/admin/users/page.tsx
index 3b826c9..3757492 100644
--- a/src/app/dashboard/admin/users/page.tsx
+++ b/src/app/dashboard/admin/users/page.tsx
@@ -2,12 +2,24 @@
 
 import { useState, useEffect } from 'react';
 import { adminService } from '@/services/adminService';
+import { authService } from '@/services/authService';
 import { UserResponse } from '@/types/admin';
+import { CreateEmployeeRequest, CreateAdminRequest } from '@/types/api';
+import { useDashboard } from '@/app/contexts/DashboardContext';
 
 export default function AdminUsersPage() {
+  const { roles: currentUserRoles } = useDashboard();
   const [users, setUsers] = useState<UserResponse[]>([]);
   const [loading, setLoading] = useState(true);
   const [roleFilter, setRoleFilter] = useState<string>('ALL');
+  const [showCreateModal, setShowCreateModal] = useState(false);
+  const [createUserType, setCreateUserType] = useState<'employee' | 'admin'>('employee');
+  const [editingUserId, setEditingUserId] = useState<string | null>(null);
+  const [editingRoles, setEditingRoles] = useState<string[]>([]);
+
+  // Check current user permissions
+  const isSuperAdmin = currentUserRoles.includes('SUPER_ADMIN');
+  const isAdmin = currentUserRoles.includes('ADMIN') || isSuperAdmin;
 
   useEffect(() => {
     loadUsers();
@@ -36,6 +48,81 @@ export default function AdminUsersPage() {
     });
   };
 
+  const handleCreateUser = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const formData = new FormData(e.currentTarget);
+
+    try {
+      if (createUserType === 'employee') {
+        const payload: CreateEmployeeRequest = {
+          username: formData.get('username') as string,
+          email: formData.get('email') as string,
+          password: formData.get('password') as string,
+          firstName: formData.get('firstName') as string,
+          lastName: formData.get('lastName') as string,
+          department: formData.get('department') as string,
+        };
+        await authService.createEmployee(payload);
+      } else {
+        const payload: CreateAdminRequest = {
+          username: formData.get('username') as string,
+          email: formData.get('email') as string,
+          password: formData.get('password') as string,
+          firstName: formData.get('firstName') as string,
+          lastName: formData.get('lastName') as string,
+        };
+        await authService.createAdmin(payload);
+      }
+
+      setShowCreateModal(false);
+      await loadUsers();
+      alert(`${createUserType === 'employee' ? 'Employee' : 'Admin'} created successfully!`);
+    } catch (err: any) {
+      console.error('Failed to create user:', err);
+      const errorMessage = err?.response?.status === 403
+        ? 'Permission denied. You do not have the required permissions to create this user type.'
+        : err?.response?.data?.message || 'Failed to create user. Please try again.';
+      alert(errorMessage);
+    }
+  };
+
+  const handleStartEditRoles = (user: UserResponse) => {
+    setEditingUserId(user.userId);
+    setEditingRoles(user.roles || []);
+  };
+
+  const handleCancelEditRoles = () => {
+    setEditingUserId(null);
+    setEditingRoles([]);
+  };
+
+  const handleSaveRoles = async (userId: string) => {
+    try {
+      await adminService.updateUser(userId, { roles: editingRoles });
+      setEditingUserId(null);
+      setEditingRoles([]);
+      await loadUsers();
+      alert('Roles updated successfully!');
+    } catch (err) {
+      console.error('Failed to update roles:', err);
+      alert('Failed to update roles. Please try again.');
+    }
+  };
+
+  const handleToggleRole = (role: string) => {
+    if (editingRoles.includes(role)) {
+      setEditingRoles(editingRoles.filter(r => r !== role));
+    } else {
+      setEditingRoles([...editingRoles, role]);
+    }
+  };
+
+  // Check if user can be edited (not customer)
+  const canEditUser = (user: UserResponse): boolean => {
+    const isCustomer = user.roles.includes('CUSTOMER');
+    return !isCustomer;
+  };
+
   const roleFilters = ['ALL', 'CUSTOMER', 'EMPLOYEE', 'ADMIN', 'SUPER_ADMIN'];
 
   if (loading) {
@@ -49,11 +136,57 @@ export default function AdminUsersPage() {
     );
   }
 
+  // Block access for customers and employees
+  if (!isAdmin) {
+    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">
+          <svg
+            className="mx-auto w-16 h-16 text-red-600 dark:text-red-400 mb-4"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+          </svg>
+          <h2 className="text-2xl font-bold text-red-900 dark:text-red-100 mb-2">Access Denied</h2>
+          <p className="text-red-700 dark:text-red-300">
+            This page is only accessible to admins and super admins.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className="max-w-7xl mx-auto p-6">
-      <div className="mb-8">
-        <h1 className="text-3xl font-bold theme-text-primary mb-2">User Management</h1>
-        <p className="theme-text-muted">Manage system users and their roles</p>
+      <div className="mb-8 flex flex-col md:flex-row md:items-center md:justify-between gap-4">
+        <div>
+          <h1 className="text-3xl font-bold theme-text-primary mb-2">User Management</h1>
+          <p className="theme-text-muted">Manage system users and their roles</p>
+        </div>
+        {isSuperAdmin && (
+          <div className="flex gap-2">
+            <button
+              onClick={() => {
+                setCreateUserType('employee');
+                setShowCreateModal(true);
+              }}
+              className="theme-button-primary"
+            >
+              + Add Employee
+            </button>
+            <button
+              onClick={() => {
+                setCreateUserType('admin');
+                setShowCreateModal(true);
+              }}
+              className="theme-button-primary bg-purple-600 hover:bg-purple-700"
+            >
+              + Add Admin
+            </button>
+          </div>
+        )}
       </div>
 
       {/* Stats */}
@@ -110,6 +243,7 @@ export default function AdminUsersPage() {
                 <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>}
               </tr>
             </thead>
             <tbody className="divide-y divide-gray-200 dark:divide-gray-800">
@@ -122,17 +256,37 @@ export default function AdminUsersPage() {
                     </div>
                   </td>
                   <td className="px-6 py-4">
-                    <div className="flex flex-wrap gap-1">
-                      {Array.isArray(user.roles) && user.roles.length > 0 ? (
-                        user.roles.map((role) => (
-                          <span key={role} className="px-2 py-1 rounded text-xs font-semibold bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300">
-                            {role}
-                          </span>
-                        ))
-                      ) : (
-                        <span className="text-xs theme-text-muted">No roles</span>
-                      )}
-                    </div>
+                    {editingUserId === user.userId ? (
+                      <div className="space-y-2">
+                        <div className="flex flex-wrap gap-2">
+                          {['EMPLOYEE', 'ADMIN'].map((role) => (
+                            <button
+                              key={role}
+                              onClick={() => handleToggleRole(role)}
+                              className={`px-3 py-1 rounded text-xs font-semibold transition-colors ${
+                                editingRoles.includes(role)
+                                  ? 'bg-blue-600 text-white'
+                                  : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300'
+                              }`}
+                            >
+                              {role}
+                            </button>
+                          ))}
+                        </div>
+                      </div>
+                    ) : (
+                      <div className="flex flex-wrap gap-1">
+                        {Array.isArray(user.roles) && user.roles.length > 0 ? (
+                          user.roles.map((role) => (
+                            <span key={role} className="px-2 py-1 rounded text-xs font-semibold bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300">
+                              {role}
+                            </span>
+                          ))
+                        ) : (
+                          <span className="text-xs theme-text-muted">No roles</span>
+                        )}
+                      </div>
+                    )}
                   </td>
                   <td className="px-6 py-4">
                     <div className="space-y-1">
@@ -158,12 +312,128 @@ export default function AdminUsersPage() {
                   <td className="px-6 py-4 text-sm theme-text-secondary">
                     {formatDate(user.createdAt)}
                   </td>
+                  {isAdmin && (
+                    <td className="px-6 py-4">
+                      {canEditUser(user) ? (
+                        editingUserId === user.userId ? (
+                          <div className="flex gap-2">
+                            <button
+                              onClick={() => handleSaveRoles(user.userId)}
+                              className="px-3 py-1 bg-green-600 hover:bg-green-700 text-white text-xs font-medium rounded transition-colors"
+                            >
+                              Save
+                            </button>
+                            <button
+                              onClick={handleCancelEditRoles}
+                              className="px-3 py-1 bg-gray-500 hover:bg-gray-600 text-white text-xs font-medium rounded transition-colors"
+                            >
+                              Cancel
+                            </button>
+                          </div>
+                        ) : (
+                          <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"
+                          >
+                            Edit Roles
+                          </button>
+                        )
+                      ) : (
+                        <span className="text-xs theme-text-muted italic">Customer (Read-only)</span>
+                      )}
+                    </td>
+                  )}
                 </tr>
               ))}
             </tbody>
           </table>
         </div>
       </div>
+
+      {/* 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">
+            <h2 className="text-2xl font-bold theme-text-primary mb-4">
+              Create {createUserType === 'employee' ? 'Employee' : 'Admin'}
+            </h2>
+            <form onSubmit={handleCreateUser} className="space-y-4">
+              <div>
+                <label className="block text-sm font-medium theme-text-primary mb-1">Username</label>
+                <input
+                  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"
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium theme-text-primary mb-1">Email</label>
+                <input
+                  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"
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium theme-text-primary mb-1">Password</label>
+                <input
+                  type="password"
+                  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"
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium theme-text-primary mb-1">First Name</label>
+                <input
+                  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"
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium theme-text-primary mb-1">Last Name</label>
+                <input
+                  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"
+                />
+              </div>
+              {createUserType === 'employee' && (
+                <div>
+                  <label className="block text-sm font-medium theme-text-primary mb-1">Department</label>
+                  <input
+                    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"
+                  />
+                </div>
+              )}
+              <div className="flex gap-3 pt-4">
+                <button
+                  type="submit"
+                  className="flex-1 theme-button-primary"
+                >
+                  Create {createUserType === 'employee' ? 'Employee' : 'Admin'}
+                </button>
+                <button
+                  type="button"
+                  onClick={() => setShowCreateModal(false)}
+                  className="flex-1 theme-button-secondary"
+                >
+                  Cancel
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
     </div>
   );
 }

From a67c8edfe3f2f3943c3306ad5f7860a0bd50ce89 Mon Sep 17 00:00:00 2001
From: Mehara Rothila Ranawaka <rothilamehara22@gmail.com>
Date: Fri, 7 Nov 2025 00:42:06 +0530
Subject: [PATCH 02/38] Update user dashboard pages and layout

---
 .../appointments/[appointmentId]/page.tsx     | 116 ++++++-----
 src/app/dashboard/appointments/book/page.tsx  |   4 +-
 src/app/dashboard/appointments/page.tsx       |  46 +++--
 src/app/dashboard/invoices/page.tsx           |  14 +-
 src/app/dashboard/layout.tsx                  |   8 +-
 src/app/dashboard/payments/page.tsx           |  43 +++-
 src/app/dashboard/projects/page.tsx           |  11 +-
 src/app/dashboard/projects/request/page.tsx   |  26 ++-
 src/app/dashboard/schedule/page.tsx           |  43 +++-
 src/app/dashboard/time-logs/page.tsx          | 189 +++++++++++++-----
 10 files changed, 353 insertions(+), 147 deletions(-)

diff --git a/src/app/dashboard/appointments/[appointmentId]/page.tsx b/src/app/dashboard/appointments/[appointmentId]/page.tsx
index 3483d0e..7d07d7d 100644
--- a/src/app/dashboard/appointments/[appointmentId]/page.tsx
+++ b/src/app/dashboard/appointments/[appointmentId]/page.tsx
@@ -3,6 +3,7 @@ import { useEffect, useState } from 'react'
 import { useParams, useRouter } from 'next/navigation'
 import { appointmentService } from '@/services/appointmentService'
 import type { AppointmentResponseDto, AppointmentStatus } from '@/types/appointment'
+import { useDashboard } from '@/app/contexts/DashboardContext'
 
 interface StatusOption {
   value: AppointmentStatus
@@ -22,6 +23,7 @@ export default function AppointmentDetailPage() {
   const router = useRouter()
   const params = useParams<{ appointmentId: string }>()
   const appointmentId = params.appointmentId
+  const { roles } = useDashboard()
 
   const [appointment, setAppointment] = useState<AppointmentResponseDto | null>(null)
   const [loading, setLoading] = useState(true)
@@ -203,53 +205,55 @@ export default function AppointmentDetailPage() {
           </div>
         </section>
 
-        <section className="automotive-card p-6">
-          <h2 className="text-xl font-semibold theme-text-primary mb-4">Reschedule appointment</h2>
-          <form onSubmit={handleReschedule} className="space-y-4">
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-              <label className="block">
-                <span className="block text-sm font-medium theme-text-primary mb-1">Date</span>
-                <input
-                  type="date"
-                  value={rescheduleDate}
-                  min={new Date().toISOString().slice(0, 10)}
-                  onChange={(event) => setRescheduleDate(event.target.value)}
-                  className="w-full rounded-lg border border-gray-300 dark:border-gray-700 theme-bg-primary theme-text-primary px-3 py-2"
-                  required
-                />
-              </label>
+        {roles?.includes('CUSTOMER') && (
+          <section className="automotive-card p-6">
+            <h2 className="text-xl font-semibold theme-text-primary mb-4">Reschedule appointment</h2>
+            <form onSubmit={handleReschedule} className="space-y-4">
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <label className="block">
+                  <span className="block text-sm font-medium theme-text-primary mb-1">Date</span>
+                  <input
+                    type="date"
+                    value={rescheduleDate}
+                    min={new Date().toISOString().slice(0, 10)}
+                    onChange={(event) => setRescheduleDate(event.target.value)}
+                    className="w-full rounded-lg border border-gray-300 dark:border-gray-700 theme-bg-primary theme-text-primary px-3 py-2"
+                    required
+                  />
+                </label>
+                <label className="block">
+                  <span className="block text-sm font-medium theme-text-primary mb-1">Time</span>
+                  <input
+                    type="time"
+                    value={rescheduleTime}
+                    onChange={(event) => setRescheduleTime(event.target.value)}
+                    className="w-full rounded-lg border border-gray-300 dark:border-gray-700 theme-bg-primary theme-text-primary px-3 py-2"
+                    required
+                  />
+                </label>
+                <div className="flex items-end">
+                  <button
+                    type="submit"
+                    className="theme-button-primary w-full"
+                    disabled={saving}
+                  >
+                    {saving ? 'Saving...' : 'Save changes'}
+                  </button>
+                </div>
+              </div>
               <label className="block">
-                <span className="block text-sm font-medium theme-text-primary mb-1">Time</span>
-                <input
-                  type="time"
-                  value={rescheduleTime}
-                  onChange={(event) => setRescheduleTime(event.target.value)}
+                <span className="block text-sm font-medium theme-text-primary mb-1">Notes</span>
+                <textarea
+                  value={notes}
+                  onChange={(event) => setNotes(event.target.value)}
                   className="w-full rounded-lg border border-gray-300 dark:border-gray-700 theme-bg-primary theme-text-primary px-3 py-2"
-                  required
+                  rows={4}
+                  placeholder="Add any extra information for the team"
                 />
               </label>
-              <div className="flex items-end">
-                <button
-                  type="submit"
-                  className="theme-button-primary w-full"
-                  disabled={saving}
-                >
-                  {saving ? 'Saving...' : 'Save changes'}
-                </button>
-              </div>
-            </div>
-            <label className="block">
-              <span className="block text-sm font-medium theme-text-primary mb-1">Notes</span>
-              <textarea
-                value={notes}
-                onChange={(event) => setNotes(event.target.value)}
-                className="w-full rounded-lg border border-gray-300 dark:border-gray-700 theme-bg-primary theme-text-primary px-3 py-2"
-                rows={4}
-                placeholder="Add any extra information for the team"
-              />
-            </label>
-          </form>
-        </section>
+            </form>
+          </section>
+        )}
 
         <section className="automotive-card p-6">
           <h2 className="text-xl font-semibold theme-text-primary mb-4">Update status</h2>
@@ -279,18 +283,20 @@ export default function AppointmentDetailPage() {
           </div>
         </section>
 
-        <section className="automotive-card p-6 border border-red-200 dark:border-red-800">
-          <h2 className="text-xl font-semibold text-red-600 dark:text-red-400 mb-4">Danger zone</h2>
-          <p className="theme-text-muted mb-4">Cancel the appointment if the customer no longer needs this service.</p>
-          <button
-            type="button"
-            className="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg"
-            onClick={handleCancel}
-            disabled={saving}
-          >
-            Cancel appointment
-          </button>
-        </section>
+        {roles?.includes('CUSTOMER') && (
+          <section className="automotive-card p-6 border border-red-200 dark:border-red-800">
+            <h2 className="text-xl font-semibold text-red-600 dark:text-red-400 mb-4">Danger zone</h2>
+            <p className="theme-text-muted mb-4">Cancel the appointment if you no longer need this service.</p>
+            <button
+              type="button"
+              className="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg"
+              onClick={handleCancel}
+              disabled={saving}
+            >
+              Cancel appointment
+            </button>
+          </section>
+        )}
       </div>
 
       {loading && (
diff --git a/src/app/dashboard/appointments/book/page.tsx b/src/app/dashboard/appointments/book/page.tsx
index fddfee6..a16e6c7 100644
--- a/src/app/dashboard/appointments/book/page.tsx
+++ b/src/app/dashboard/appointments/book/page.tsx
@@ -82,7 +82,7 @@ export default function BookAppointmentPage() {
       setCheckingAvailability(true)
       const result = await appointmentService.checkAvailability({
         date: form.date,
-        serviceType: form.serviceTypeId,
+        serviceType: selectedServiceType?.name || '',
         duration,
       })
       setAvailability(result)
@@ -115,7 +115,7 @@ export default function BookAppointmentPage() {
       setSubmitting(true)
       await appointmentService.bookAppointment({
         vehicleId: form.vehicleId,
-        serviceType: form.serviceTypeId,
+        serviceType: selectedServiceType?.name || '',
         requestedDateTime: requestedDateTime.toISOString(),
         specialInstructions: form.notes || undefined,
       })
diff --git a/src/app/dashboard/appointments/page.tsx b/src/app/dashboard/appointments/page.tsx
index 28e4a89..dcdfe77 100644
--- a/src/app/dashboard/appointments/page.tsx
+++ b/src/app/dashboard/appointments/page.tsx
@@ -4,9 +4,11 @@ import { appointmentService } from '@/services/appointmentService';
 import type { AppointmentResponseDto } from '@/types/appointment';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
+import { useDashboard } from '@/app/contexts/DashboardContext';
 
 export default function AppointmentsPage() {
   const router = useRouter();
+  const { roles } = useDashboard();
   const [appointments, setAppointments] = useState<AppointmentResponseDto[]>([]);
   const [loading, setLoading] = useState(true);
   const [filter, setFilter] = useState<'ALL' | 'PENDING' | 'CONFIRMED' | 'IN_PROGRESS' | 'COMPLETED' | 'CANCELLED'>('ALL');
@@ -66,18 +68,22 @@ export default function AppointmentsPage() {
           <p className="theme-text-muted">View and manage your service appointments</p>
         </div>
         <div className="flex gap-3">
-          <Link 
-            href="/dashboard/appointments/book"
-            className="theme-button-primary px-6 py-3 rounded-xl font-semibold"
-          >
-            + Book Appointment
-          </Link>
-          <Link 
-            href="/dashboard/appointments/availability"
-            className="theme-button-secondary px-6 py-3 rounded-xl font-semibold"
-          >
-            Check Availability
-          </Link>
+          {roles?.includes('CUSTOMER') && (
+            <Link
+              href="/dashboard/appointments/book"
+              className="theme-button-primary px-6 py-3 rounded-xl font-semibold"
+            >
+              + Book Appointment
+            </Link>
+          )}
+          {(roles?.includes('EMPLOYEE') || roles?.includes('ADMIN') || roles?.includes('SUPER_ADMIN')) && (
+            <Link
+              href="/dashboard/appointments/availability"
+              className="theme-button-secondary px-6 py-3 rounded-xl font-semibold"
+            >
+              Check Availability
+            </Link>
+          )}
         </div>
       </div>
 
@@ -111,14 +117,16 @@ export default function AppointmentsPage() {
           </svg>
           <h3 className="text-xl font-semibold theme-text-primary mb-2">No appointments found</h3>
           <p className="theme-text-muted mb-6">
-            {filter === 'ALL' ? 'You haven\'t booked any appointments yet' : `No ${filter.toLowerCase()} appointments`}
+            {filter === 'ALL' ? 'No appointments yet' : `No ${filter.toLowerCase()} appointments`}
           </p>
-          <Link 
-            href="/dashboard/appointments/book"
-            className="theme-button-primary px-8 py-3 rounded-xl font-semibold inline-block"
-          >
-            Book Your First Appointment
-          </Link>
+          {roles?.includes('CUSTOMER') && (
+            <Link
+              href="/dashboard/appointments/book"
+              className="theme-button-primary px-8 py-3 rounded-xl font-semibold inline-block"
+            >
+              Book Your First Appointment
+            </Link>
+          )}
         </div>
       ) : (
         <div className="grid grid-cols-1 gap-4">
diff --git a/src/app/dashboard/invoices/page.tsx b/src/app/dashboard/invoices/page.tsx
index a569555..c5ea43e 100644
--- a/src/app/dashboard/invoices/page.tsx
+++ b/src/app/dashboard/invoices/page.tsx
@@ -49,9 +49,17 @@ export default function InvoicesPage() {
       setInvoices(Array.isArray(data) ? data : [])
       setError(null)
     } catch (err: unknown) {
-      const message = (err as { response?: { data?: { message?: string } } })?.response?.data?.message ||
-        'Failed to load invoices'
-      setError(message)
+      const errorResponse = err as { response?: { status?: number; data?: { message?: string } } }
+      
+      // Check for specific error types
+      if (errorResponse?.response?.status === 500) {
+        setError('Service temporarily unavailable. The invoice service may be down. Please contact support or try again later.')
+      } else if (errorResponse?.response?.status === 403) {
+        setError('Access Denied: You do not have permission to view invoices.')
+      } else {
+        const message = errorResponse?.response?.data?.message || 'Failed to load invoices'
+        setError(message)
+      }
       setInvoices([]) // Set empty array on error
     } finally {
       setLoading(false)
diff --git a/src/app/dashboard/layout.tsx b/src/app/dashboard/layout.tsx
index 9ac8d2f..2973e57 100644
--- a/src/app/dashboard/layout.tsx
+++ b/src/app/dashboard/layout.tsx
@@ -143,6 +143,8 @@ function DashboardShell({ children }: { children: ReactNode }) {
 }
 
 function buildNavigation(roles: string[]): NavSection[] {
+  const hasRole = (role: string) => roles?.includes(role)
+
   const baseSection: NavSection = {
     title: 'Overview',
     items: [
@@ -155,8 +157,12 @@ function buildNavigation(roles: string[]): NavSection[] {
     ],
   }
 
+  // Add Payments link only for customers
+  if (hasRole('CUSTOMER')) {
+    baseSection.items.push({ href: '/dashboard/payments', label: 'Payment History' })
+  }
+
   const sections: NavSection[] = [baseSection]
-  const hasRole = (role: string) => roles?.includes(role)
 
   if (hasRole('EMPLOYEE') || hasRole('ADMIN') || hasRole('SUPER_ADMIN')) {
     sections.push({
diff --git a/src/app/dashboard/payments/page.tsx b/src/app/dashboard/payments/page.tsx
index 6381d30..45c6afc 100644
--- a/src/app/dashboard/payments/page.tsx
+++ b/src/app/dashboard/payments/page.tsx
@@ -42,9 +42,15 @@ export default function PaymentHistoryPage() {
       setPayments(data)
       setError(null)
     } catch (err: unknown) {
-      const message = (err as { response?: { data?: { message?: string } } })?.response?.data?.message ||
-        'Failed to load payments'
-      setError(message)
+      const errorResponse = err as { response?: { status?: number; data?: { message?: string } } }
+      
+      // Check if it's a 403 Forbidden (Access Denied)
+      if (errorResponse?.response?.status === 403) {
+        setError('Access Denied: This page is only available for customer accounts.')
+      } else {
+        const message = errorResponse?.response?.data?.message || 'Failed to load payments'
+        setError(message)
+      }
     } finally {
       setLoading(false)
       setRefreshing(false)
@@ -86,6 +92,37 @@ export default function PaymentHistoryPage() {
     )
   }
 
+  // Show access denied message prominently
+  if (error?.includes('Access Denied')) {
+    return (
+      <div className="space-y-6">
+        <div>
+          <h1 className="text-3xl font-bold theme-text-primary">Payment History</h1>
+          <p className="theme-text-muted">Review completed transactions and pending payments.</p>
+        </div>
+        <div className="automotive-card p-12 text-center">
+          <div className="mx-auto w-16 h-16 mb-4 rounded-full bg-red-100 dark:bg-red-900/30 flex items-center justify-center">
+            <svg className="w-8 h-8 text-red-600 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+            </svg>
+          </div>
+          <h3 className="text-lg font-semibold theme-text-primary mb-2">Access Denied</h3>
+          <p className="theme-text-muted max-w-md mx-auto mb-4">
+            This page is only available for customer accounts. As an employee, you can view invoices and time logs instead.
+          </p>
+          <div className="flex gap-3 justify-center">
+            <a href="/dashboard/invoices" className="theme-button-primary">
+              View Invoices
+            </a>
+            <a href="/dashboard/time-logs" className="theme-button-secondary">
+              View Time Logs
+            </a>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
   return (
     <div className="space-y-8">
       <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
diff --git a/src/app/dashboard/projects/page.tsx b/src/app/dashboard/projects/page.tsx
index c9601e1..d915f8a 100644
--- a/src/app/dashboard/projects/page.tsx
+++ b/src/app/dashboard/projects/page.tsx
@@ -4,6 +4,7 @@ import Link from 'next/link'
 import { useEffect, useMemo, useState } from 'react'
 import { projectService } from '@/services/projectService'
 import type { ProjectResponseDto } from '@/types/project'
+import { useDashboard } from '@/app/contexts/DashboardContext'
 
 const STATUS_FILTERS = ['ALL', 'REQUESTED', 'QUOTE_PENDING', 'QUOTE_SUBMITTED', 'QUOTE_APPROVED', 'IN_PROGRESS', 'COMPLETED', 'CANCELLED'] as const
 type StatusFilter = typeof STATUS_FILTERS[number]
@@ -28,12 +29,16 @@ const formatDate = (value?: string) => {
 }
 
 export default function ProjectsPage() {
+  const { roles } = useDashboard()
   const [projects, setProjects] = useState<ProjectResponseDto[]>([])
   const [loading, setLoading] = useState(true)
   const [refreshing, setRefreshing] = useState(false)
   const [error, setError] = useState<string | null>(null)
   const [statusFilter, setStatusFilter] = useState<StatusFilter>('ALL')
 
+  // Check if user is admin or super admin
+  const isAdminUser = roles.includes('SUPER_ADMIN') || roles.includes('ADMIN')
+
   const loadProjects = async () => {
     try {
       setRefreshing(true)
@@ -94,7 +99,9 @@ export default function ProjectsPage() {
           <p className="theme-text-muted">Request and track custom vehicle modification projects.</p>
         </div>
         <div className="flex flex-wrap items-center gap-3">
-          <Link href="/dashboard/projects/request" className="theme-button-primary">+ Request Project</Link>
+          {roles.includes('CUSTOMER') && (
+            <Link href="/dashboard/projects/request" className="theme-button-primary">+ Request Project</Link>
+          )}
           <button
             type="button"
             className="theme-button-secondary"
@@ -165,7 +172,7 @@ export default function ProjectsPage() {
                 ? "You haven't requested any custom projects yet."
                 : `No ${statusFilter.toLowerCase().replace('_', ' ')} projects.`}
             </p>
-            {projects.length === 0 && (
+            {projects.length === 0 && roles.includes('CUSTOMER') && (
               <Link href="/dashboard/projects/request" className="theme-button-primary inline-block">
                 Request Your First Project
               </Link>
diff --git a/src/app/dashboard/projects/request/page.tsx b/src/app/dashboard/projects/request/page.tsx
index 076fcf3..60db19b 100644
--- a/src/app/dashboard/projects/request/page.tsx
+++ b/src/app/dashboard/projects/request/page.tsx
@@ -6,14 +6,26 @@ import { projectService } from '@/services/projectService';
 import { vehicleService } from '@/services/vehicleService';
 import { VehicleListItem } from '@/types/vehicle';
 import { ProjectRequestDto } from '@/types/project';
+import { useDashboard } from '@/app/contexts/DashboardContext';
 
 export default function RequestProjectPage() {
   const router = useRouter();
+  const { roles, loading: profileLoading, profile } = useDashboard();
   const [vehicles, setVehicles] = useState<VehicleListItem[]>([]);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState('');
   const [fetchingVehicles, setFetchingVehicles] = useState(true);
 
+  // Check if user is a customer
+  const isCustomer = roles.includes('CUSTOMER');
+
+  // Redirect non-customers to projects list
+  useEffect(() => {
+    if (!profileLoading && !isCustomer) {
+      router.push('/dashboard/projects');
+    }
+  }, [isCustomer, profileLoading, router]);
+
   const [formData, setFormData] = useState({
     vehicleId: '',
     projectType: '',
@@ -30,9 +42,14 @@ export default function RequestProjectPage() {
     try {
       setFetchingVehicles(true);
       const data = await vehicleService.getMyVehicles();
-      setVehicles(data);
-      if (data.length > 0) {
-        setFormData(prev => ({ ...prev, vehicleId: data[0].vehicleId }));
+
+      // Filter to only show vehicles owned by the logged-in user
+      // This ensures that even users with admin roles only see their own vehicles when requesting projects
+      const userVehicles = data.filter(vehicle => vehicle.customerId === profile?.username);
+
+      setVehicles(userVehicles);
+      if (userVehicles.length > 0) {
+        setFormData(prev => ({ ...prev, vehicleId: userVehicles[0].vehicleId }));
       }
     } catch (err) {
       console.error('Failed to load vehicles:', err);
@@ -72,7 +89,8 @@ export default function RequestProjectPage() {
     }
   };
 
-  if (fetchingVehicles) {
+  // Show loading while checking permissions or fetching vehicles
+  if (profileLoading || fetchingVehicles || !isCustomer) {
     return (
       <div className="max-w-3xl mx-auto p-6">
         <div className="animate-pulse space-y-6">
diff --git a/src/app/dashboard/schedule/page.tsx b/src/app/dashboard/schedule/page.tsx
index 4d4fb71..08897b3 100644
--- a/src/app/dashboard/schedule/page.tsx
+++ b/src/app/dashboard/schedule/page.tsx
@@ -3,8 +3,10 @@
 import { useState, useEffect } from 'react';
 import { appointmentService } from '@/services/appointmentService';
 import { AppointmentResponseDto } from '@/types/appointment';
+import { useDashboard } from '@/app/contexts/DashboardContext';
 
 export default function SchedulePage() {
+  const { roles, loading: rolesLoading } = useDashboard();
   const [appointments, setAppointments] = useState<AppointmentResponseDto[]>([]);
   const [loading, setLoading] = useState(true);
   const [selectedDate, setSelectedDate] = useState(new Date().toISOString().split('T')[0]);
@@ -77,7 +79,12 @@ export default function SchedulePage() {
     setSelectedDate(new Date().toISOString().split('T')[0]);
   };
 
-  if (loading) {
+  // Check if user has permission to access this page
+  const hasRole = (role: string) => roles?.includes(role);
+  const hasAccess = hasRole('EMPLOYEE') || hasRole('ADMIN') || hasRole('SUPER_ADMIN');
+  const isAdmin = hasRole('ADMIN') || hasRole('SUPER_ADMIN');
+
+  if (rolesLoading || loading) {
     return (
       <div className="max-w-6xl mx-auto p-6">
         <div className="animate-pulse space-y-4">
@@ -88,11 +95,37 @@ export default function SchedulePage() {
     );
   }
 
+  // Block access for customers
+  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">
+          <svg
+            className="mx-auto w-16 h-16 text-red-600 dark:text-red-400 mb-4"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+          </svg>
+          <h2 className="text-2xl font-bold text-red-900 dark:text-red-100 mb-2">Access Denied</h2>
+          <p className="text-red-700 dark:text-red-300">
+            This page is only accessible to employees, admins, and super admins.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className="max-w-6xl mx-auto p-6">
       <div className="mb-8">
-        <h1 className="text-3xl font-bold theme-text-primary mb-2">My Schedule</h1>
-        <p className="theme-text-muted">View your daily appointment schedule</p>
+        <h1 className="text-3xl font-bold theme-text-primary mb-2">
+          {isAdmin ? 'All Schedules' : 'My Schedule'}
+        </h1>
+        <p className="theme-text-muted">
+          {isAdmin ? 'View all appointment schedules' : 'View your daily appointment schedule'}
+        </p>
       </div>
 
       {/* Date Navigation */}
@@ -179,7 +212,9 @@ export default function SchedulePage() {
               <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" />
             </svg>
             <h3 className="text-lg font-semibold theme-text-primary mb-1">No appointments</h3>
-            <p className="theme-text-muted text-sm">You have no appointments scheduled for this day</p>
+            <p className="theme-text-muted text-sm">
+              {isAdmin ? 'There are no appointments scheduled for this day' : 'You have no appointments scheduled for this day'}
+            </p>
           </div>
         ) : (
           <div className="divide-y divide-gray-200 dark:divide-gray-800">
diff --git a/src/app/dashboard/time-logs/page.tsx b/src/app/dashboard/time-logs/page.tsx
index 7c922dd..8f29ec2 100644
--- a/src/app/dashboard/time-logs/page.tsx
+++ b/src/app/dashboard/time-logs/page.tsx
@@ -3,19 +3,27 @@
 import { useState, useEffect } from 'react';
 import { timeLoggingService } from '@/services/timeLoggingService';
 import { TimeLogResponse, TimeLogRequest } from '@/types/timeLogging';
+import { useDashboard } from '@/app/contexts/DashboardContext';
 
 export default function TimeLogsPage() {
-  const [timeLogs, setTimeLogs] = useState<TimeLogResponse[]>([]);
+  const { roles, loading: rolesLoading, profile } = useDashboard();
+  const [allTimeLogs, setAllTimeLogs] = useState<TimeLogResponse[]>([]);
   const [loading, setLoading] = useState(true);
   const [showForm, setShowForm] = useState(false);
+  const [viewFilter, setViewFilter] = useState<'mine' | 'all'>('all');
   const [formData, setFormData] = useState<TimeLogRequest>({
-    hoursWorked: 0,
-    workDate: new Date().toISOString().split('T')[0],
+    serviceId: '', // Required field
+    hours: 0,
+    date: new Date().toISOString().split('T')[0],
     description: '',
-    taskType: '',
+    workType: '',
   });
   const [submitting, setSubmitting] = useState(false);
 
+  // Check if user is admin
+  const hasRole = (role: string) => roles?.includes(role);
+  const isAdmin = hasRole('ADMIN') || hasRole('SUPER_ADMIN');
+
   useEffect(() => {
     loadTimeLogs();
   }, []);
@@ -24,19 +32,24 @@ export default function TimeLogsPage() {
     try {
       setLoading(true);
       const data = await timeLoggingService.getMyTimeLogs();
-      // Ensure data is an array and filter out invalid entries
-      const validLogs = Array.isArray(data) 
-        ? data.filter(log => log && log.logId) 
+      // Backend automatically returns all logs for admins, only user's logs for employees
+      const validLogs = Array.isArray(data)
+        ? data.filter(log => log && log.id)
         : [];
-      setTimeLogs(validLogs);
+      setAllTimeLogs(validLogs);
     } catch (err) {
       console.error('Failed to load time logs:', err);
-      setTimeLogs([]); // Set empty array on error
+      setAllTimeLogs([]);
     } finally {
       setLoading(false);
     }
   };
 
+  // Filter logs based on view selection
+  const filteredLogs = viewFilter === 'mine'
+    ? allTimeLogs.filter(log => log.employeeId === profile?.username)
+    : allTimeLogs;
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     if (submitting) return;
@@ -45,10 +58,11 @@ export default function TimeLogsPage() {
       setSubmitting(true);
       await timeLoggingService.createTimeLog(formData);
       setFormData({
-        hoursWorked: 0,
-        workDate: new Date().toISOString().split('T')[0],
+        serviceId: '', // Required field
+        hours: 0,
+        date: new Date().toISOString().split('T')[0],
         description: '',
-        taskType: '',
+        workType: '',
       });
       setShowForm(false);
       await loadTimeLogs();
@@ -80,9 +94,12 @@ export default function TimeLogsPage() {
     });
   };
 
-  const totalHours = timeLogs.reduce((sum, log) => sum + log.hoursWorked, 0);
+  const totalHours = filteredLogs.reduce((sum, log) => sum + log.hours, 0);
+
+  // Check if user has permission to access this page
+  const hasAccess = hasRole('EMPLOYEE') || hasRole('ADMIN') || hasRole('SUPER_ADMIN');
 
-  if (loading) {
+  if (rolesLoading || loading) {
     return (
       <div className="max-w-6xl mx-auto p-6">
         <div className="animate-pulse space-y-4">
@@ -93,6 +110,28 @@ export default function TimeLogsPage() {
     );
   }
 
+  // Block access for customers
+  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">
+          <svg
+            className="mx-auto w-16 h-16 text-red-600 dark:text-red-400 mb-4"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+          </svg>
+          <h2 className="text-2xl font-bold text-red-900 dark:text-red-100 mb-2">Access Denied</h2>
+          <p className="text-red-700 dark:text-red-300">
+            This page is only accessible to employees, admins, and super admins.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className="max-w-6xl mx-auto p-6">
       <div className="mb-8">
@@ -109,6 +148,32 @@ export default function TimeLogsPage() {
           </button>
         </div>
 
+        {/* Filter Tabs - Only visible for admins */}
+        {isAdmin && (
+          <div className="flex gap-2 mb-6 border-b border-gray-200 dark:border-gray-800">
+            <button
+              onClick={() => setViewFilter('mine')}
+              className={`px-4 py-2 text-sm font-medium transition-colors border-b-2 ${
+                viewFilter === 'mine'
+                  ? 'border-blue-600 text-blue-600 dark:text-blue-400'
+                  : 'border-transparent theme-text-muted hover:text-blue-600 dark:hover:text-blue-400'
+              }`}
+            >
+              My Time Logs
+            </button>
+            <button
+              onClick={() => setViewFilter('all')}
+              className={`px-4 py-2 text-sm font-medium transition-colors border-b-2 ${
+                viewFilter === 'all'
+                  ? 'border-blue-600 text-blue-600 dark:text-blue-400'
+                  : 'border-transparent theme-text-muted hover:text-blue-600 dark:hover:text-blue-400'
+              }`}
+            >
+              All Time Logs
+            </button>
+          </div>
+        )}
+
         {/* 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">
@@ -122,8 +187,8 @@ export default function TimeLogsPage() {
                   type="date"
                   id="workDate"
                   required
-                  value={formData.workDate}
-                  onChange={(e) => setFormData({ ...formData, workDate: e.target.value })}
+                  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"
                 />
@@ -138,8 +203,8 @@ export default function TimeLogsPage() {
                   required
                   min="0.25"
                   step="0.25"
-                  value={formData.hoursWorked || ''}
-                  onChange={(e) => setFormData({ ...formData, hoursWorked: parseFloat(e.target.value) })}
+                  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"
                 />
@@ -150,8 +215,8 @@ export default function TimeLogsPage() {
                 </label>
                 <select
                   id="taskType"
-                  value={formData.taskType}
-                  onChange={(e) => setFormData({ ...formData, taskType: e.target.value })}
+                  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"
                 >
                   <option value="">Select type...</option>
@@ -166,14 +231,15 @@ export default function TimeLogsPage() {
               </div>
               <div>
                 <label htmlFor="serviceId" className="block text-sm font-semibold theme-text-primary mb-2">
-                  Service ID (optional)
+                  Service ID <span className="text-red-500">*</span>
                 </label>
                 <input
                   type="text"
                   id="serviceId"
+                  required
                   value={formData.serviceId || ''}
                   onChange={(e) => setFormData({ ...formData, serviceId: e.target.value })}
-                  placeholder="Service ID if applicable"
+                  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"
                 />
               </div>
@@ -220,17 +286,17 @@ export default function TimeLogsPage() {
         </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">{timeLogs.length}</p>
+          <p className="text-2xl font-semibold theme-text-primary">{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">
-            {timeLogs
+            {filteredLogs
               .filter(l => {
                 const weekAgo = Date.now() - 7 * 24 * 60 * 60 * 1000;
-                return new Date(l.workDate).getTime() > weekAgo;
+                return new Date(l.date).getTime() > weekAgo;
               })
-              .reduce((sum, log) => sum + log.hoursWorked, 0)
+              .reduce((sum, log) => sum + log.hours, 0)
               .toFixed(1)}h
           </p>
         </div>
@@ -241,8 +307,8 @@ export default function TimeLogsPage() {
         <div className="px-6 py-4 border-b border-gray-200 dark:border-gray-800">
           <h2 className="text-lg font-semibold theme-text-primary">Recent Activity</h2>
         </div>
-        
-        {timeLogs.length === 0 ? (
+
+        {filteredLogs.length === 0 ? (
           <div className="p-12 text-center">
             <svg
               className="mx-auto w-16 h-16 text-gray-400 dark:text-gray-600 mb-4"
@@ -263,42 +329,57 @@ export default function TimeLogsPage() {
                   <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>
                   <th className="px-6 py-3 text-left text-xs font-semibold theme-text-muted uppercase tracking-wider">Task Type</th>
+                  {viewFilter === 'all' && (
+                    <th className="px-6 py-3 text-left text-xs font-semibold theme-text-muted uppercase tracking-wider">Employee</th>
+                  )}
                   <th className="px-6 py-3 text-left text-xs font-semibold theme-text-muted uppercase tracking-wider">Description</th>
                   <th className="px-6 py-3 text-left text-xs font-semibold theme-text-muted uppercase tracking-wider">Actions</th>
                 </tr>
               </thead>
               <tbody className="divide-y divide-gray-200 dark:divide-gray-800">
-                {timeLogs.length === 0 ? (
+                {filteredLogs.length === 0 ? (
                   <tr>
-                    <td colSpan={5} className="px-6 py-8 text-center text-sm theme-text-muted">
+                    <td colSpan={viewFilter === 'all' ? 6 : 5} className="px-6 py-8 text-center text-sm theme-text-muted">
                       No time logs found
                     </td>
                   </tr>
                 ) : (
-                  timeLogs.map((log, index) => (
-                    <tr key={log.logId || `log-${index}`} className="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
-                      <td className="px-6 py-4 whitespace-nowrap theme-text-primary font-medium">
-                        {formatDate(log.workDate)}
-                      </td>
-                      <td className="px-6 py-4 whitespace-nowrap theme-text-secondary font-semibold">
-                        {log.hoursWorked}h
-                      </td>
-                      <td className="px-6 py-4 whitespace-nowrap theme-text-secondary">
-                        {log.taskType || '—'}
-                      </td>
-                      <td className="px-6 py-4 theme-text-secondary text-sm max-w-md truncate">
-                        {log.description || '—'}
-                      </td>
-                      <td className="px-6 py-4 whitespace-nowrap">
-                        <button
-                          onClick={() => handleDelete(log.logId)}
-                          className="text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 text-sm font-medium"
-                        >
-                          Delete
-                        </button>
-                      </td>
-                    </tr>
-                  ))
+                  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">
+                        <td className="px-6 py-4 whitespace-nowrap theme-text-primary font-medium">
+                          {formatDate(log.date)}
+                        </td>
+                        <td className="px-6 py-4 whitespace-nowrap theme-text-secondary font-semibold">
+                          {log.hours}h
+                        </td>
+                        <td className="px-6 py-4 whitespace-nowrap theme-text-secondary">
+                          {log.workType || '—'}
+                        </td>
+                        {viewFilter === 'all' && (
+                          <td className="px-6 py-4 whitespace-nowrap theme-text-secondary text-sm">
+                            {log.employeeId}
+                          </td>
+                        )}
+                        <td className="px-6 py-4 theme-text-secondary text-sm max-w-md truncate">
+                          {log.description || '—'}
+                        </td>
+                        <td className="px-6 py-4 whitespace-nowrap">
+                          {isOwnLog ? (
+                            <button
+                              onClick={() => handleDelete(log.id)}
+                              className="text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 text-sm font-medium"
+                            >
+                              Delete
+                            </button>
+                          ) : (
+                            <span className="text-gray-400 dark:text-gray-600 text-sm">—</span>
+                          )}
+                        </td>
+                      </tr>
+                    );
+                  })
                 )}
               </tbody>
             </table>

From bc8d90a50cae03829387c01c7f2a4362250c7315 Mon Sep 17 00:00:00 2001
From: Mehara Rothila Ranawaka <rothilamehara22@gmail.com>
Date: Fri, 7 Nov 2025 00:42:15 +0530
Subject: [PATCH 03/38] Update vehicle form component and API client

---
 src/app/components/EditVehicleForm.tsx |  8 ++++++--
 src/lib/apiClient.ts                   | 25 +++++++++++++++++++++++++
 2 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/src/app/components/EditVehicleForm.tsx b/src/app/components/EditVehicleForm.tsx
index 28b1671..48f10a1 100644
--- a/src/app/components/EditVehicleForm.tsx
+++ b/src/app/components/EditVehicleForm.tsx
@@ -54,7 +54,9 @@ export default function EditVehicleForm({
 
   return (
     <form onSubmit={handleSubmit} className="space-y-4">
-      <h2 className="text-2xl font-bold mb-4 theme-text-primary">Update Vehicle</h2>
+      <h2 className="text-2xl font-bold mb-4 theme-text-primary">
+        Update Vehicle - {initialData.licensePlate}
+      </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">
@@ -95,8 +97,10 @@ 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="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"
             placeholder="e.g., ABC-1234"
+            disabled
+            readOnly
           />
         </div>
       </div>
diff --git a/src/lib/apiClient.ts b/src/lib/apiClient.ts
index bdba392..90a591c 100644
--- a/src/lib/apiClient.ts
+++ b/src/lib/apiClient.ts
@@ -9,6 +9,23 @@ const apiClient = axios.create({
   headers: { 'Content-Type': 'application/json' },
 });
 
+// Helper function to decode JWT (for debugging only)
+function decodeJWT(token: string) {
+  try {
+    const base64Url = token.split('.')[1];
+    const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
+    const jsonPayload = decodeURIComponent(
+      atob(base64)
+        .split('')
+        .map((c) => '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2))
+        .join('')
+    );
+    return JSON.parse(jsonPayload);
+  } catch {
+    return null;
+  }
+}
+
 // Request interceptor (Your existing code is perfect)
 apiClient.interceptors.request.use(
   (config) => {
@@ -17,6 +34,14 @@ apiClient.interceptors.request.use(
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
       config.headers.Authorization = `Bearer ${token}`;
+
+      // 🔍 DEBUG: Log the username from JWT token
+      const payload = decodeJWT(token);
+      if (payload && config.url?.includes('/vehicles')) {
+        console.log('🔍 [DEBUG] Making request to:', config.url);
+        console.log('🔍 [DEBUG] JWT username (sub):', payload.sub);
+        console.log('🔍 [DEBUG] JWT roles:', payload.roles);
+      }
     }
     return config;
   },

From 4e0fca574cb25c22fa1e2ffc357ca189b9452919 Mon Sep 17 00:00:00 2001
From: Mehara Rothila Ranawaka <rothilamehara22@gmail.com>
Date: Fri, 7 Nov 2025 00:42:26 +0530
Subject: [PATCH 04/38] Update service layer implementations

---
 src/services/adminService.ts       | 5 ++++-
 src/services/projectService.ts     | 4 ++--
 src/services/timeLoggingService.ts | 2 ++
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/services/adminService.ts b/src/services/adminService.ts
index e718c9e..b0f464c 100644
--- a/src/services/adminService.ts
+++ b/src/services/adminService.ts
@@ -173,7 +173,10 @@ export const adminService = {
     entityType?: string;
   }): Promise<AuditLogResponse[]> {
     const res = await api.get('/admin/audit-logs', { params });
-    return res.data.data || res.data;
+    // Backend returns ApiResponse<PaginatedResponse<AuditLogResponse>>
+    // So we need: res.data.data.data (ApiResponse.data -> PaginatedResponse.data -> array)
+    const paginatedData = res.data.data || res.data;
+    return Array.isArray(paginatedData) ? paginatedData : (paginatedData.data || []);
   },
 
   async getAuditLogById(logId: string): Promise<AuditLogResponse> {
diff --git a/src/services/projectService.ts b/src/services/projectService.ts
index 4ec8a5b..4f8a5f8 100644
--- a/src/services/projectService.ts
+++ b/src/services/projectService.ts
@@ -68,7 +68,7 @@ export const projectService = {
   
   async listCustomerProjects(): Promise<ProjectResponseDto[]> {
     const res = await api.get('/projects');
-    return res.data;
+    return res.data.data || [];
   },
 
   async requestProject(data: ProjectRequestDto): Promise<ApiResponse> {
@@ -78,7 +78,7 @@ export const projectService = {
 
   async getProjectDetails(projectId: string): Promise<ProjectResponseDto> {
     const res = await api.get(`/projects/${projectId}`);
-    return res.data;
+    return res.data.data;
   },
 
   async submitQuote(projectId: string, quote: QuoteDto): Promise<ApiResponse> {
diff --git a/src/services/timeLoggingService.ts b/src/services/timeLoggingService.ts
index af57630..fe1c559 100644
--- a/src/services/timeLoggingService.ts
+++ b/src/services/timeLoggingService.ts
@@ -15,6 +15,8 @@ export const timeLoggingService = {
   },
 
   // Get My Time Logs
+  // Note: Backend automatically returns all logs for ADMIN/SUPER_ADMIN roles
+  // and only user's own logs for EMPLOYEE role
   async getMyTimeLogs(params?: {
     from?: string; // YYYY-MM-DD
     to?: string;   // YYYY-MM-DD

From cc7816421b6ce83799f1ad752888b4dbd6301acb Mon Sep 17 00:00:00 2001
From: Mehara Rothila Ranawaka <rothilamehara22@gmail.com>
Date: Fri, 7 Nov 2025 00:42:35 +0530
Subject: [PATCH 05/38] Update TypeScript type definitions

---
 src/types/admin.ts       | 13 ++++++++-----
 src/types/timeLogging.ts | 22 +++++++++++-----------
 src/types/vehicle.ts     |  1 +
 3 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/src/types/admin.ts b/src/types/admin.ts
index 875e5dc..9a25d66 100644
--- a/src/types/admin.ts
+++ b/src/types/admin.ts
@@ -95,11 +95,14 @@ export interface AnalyticsDashboardResponse {
 
 // ===== REPORTS =====
 export interface ReportRequest {
-  reportType: 'REVENUE' | 'SERVICES' | 'CUSTOMERS' | 'EMPLOYEES' | 'INVENTORY';
-  from: string; // YYYY-MM-DD
-  to: string;
-  format?: 'PDF' | 'EXCEL' | 'CSV';
-  filters?: Record<string, unknown>;
+  type: 'SERVICE_PERFORMANCE' | 'REVENUE' | 'EMPLOYEE_PRODUCTIVITY' | 'CUSTOMER_SATISFACTION' | 'INVENTORY' | 'APPOINTMENT_SUMMARY'; // Changed from reportType
+  fromDate: string; // YYYY-MM-DD - Changed from 'from'
+  toDate: string; // Changed from 'to'
+  format: 'JSON' | 'PDF' | 'EXCEL' | 'CSV'; // Required field
+  departmentId?: string;
+  employeeId?: string;
+  serviceCategory?: string;
+  customerId?: string;
 }
 
 export interface ReportResponse {
diff --git a/src/types/timeLogging.ts b/src/types/timeLogging.ts
index 8ea4e6f..73e2c1e 100644
--- a/src/types/timeLogging.ts
+++ b/src/types/timeLogging.ts
@@ -1,30 +1,30 @@
 // Time Logging TypeScript Interfaces
 
 export interface TimeLogRequest {
-  serviceId?: string;
+  serviceId: string; // Required - changed from optional
   projectId?: string;
-  hoursWorked: number;
-  workDate: string; // YYYY-MM-DD
+  hours: number;
+  date: string; // YYYY-MM-DD
   description?: string;
-  taskType?: string;
+  workType?: string;
 }
 
 export interface TimeLogUpdateRequest {
-  hoursWorked?: number;
-  workDate?: string;
+  hours?: number;
+  date?: string;
   description?: string;
-  taskType?: string;
+  workType?: string;
 }
 
 export interface TimeLogResponse {
-  logId: string;
+  id: string; // Changed from logId to match backend
   employeeId: string;
   serviceId?: string;
   projectId?: string;
-  hoursWorked: number;
-  workDate: string;
+  hours: number;
+  date: string;
   description?: string;
-  taskType?: string;
+  workType?: string;
   createdAt: string;
   updatedAt: string;
 }
diff --git a/src/types/vehicle.ts b/src/types/vehicle.ts
index 48157b4..710ad1f 100644
--- a/src/types/vehicle.ts
+++ b/src/types/vehicle.ts
@@ -17,6 +17,7 @@ export interface Vehicle {
 
 export interface VehicleListItem {
   vehicleId: string;
+  customerId: string;
   make: string;
   model: string;
   year: number;

From e3188b751c1ac42e63771c2369c19554c4a5a41b Mon Sep 17 00:00:00 2001
From: Mehara Rothila Ranawaka <rothilamehara22@gmail.com>
Date: Fri, 7 Nov 2025 00:42:42 +0530
Subject: [PATCH 06/38] Update package dependencies

---
 package-lock.json | 648 +++++++++++++++++++++-------------------------
 1 file changed, 298 insertions(+), 350 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f94cf6a..ee1fdaa 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -41,9 +41,9 @@
       }
     },
     "node_modules/@emnapi/core": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.5.0.tgz",
-      "integrity": "sha512-sbP8GzB1WDzacS8fgNPpHlp6C9VZe+SJP3F90W9rLemaQj2PzIuTEl1qDOYQf58YIpyjViI24y9aPWCjEzY2cg==",
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.7.0.tgz",
+      "integrity": "sha512-pJdKGq/1iquWYtv1RRSljZklxHCOCAJFJrImO5ZLKPJVJlVUcs8yFwNQlqS0Lo8xT1VAXXTCZocF9n26FWEKsw==",
       "dev": true,
       "license": "MIT",
       "optional": true,
@@ -53,9 +53,9 @@
       }
     },
     "node_modules/@emnapi/runtime": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.5.0.tgz",
-      "integrity": "sha512-97/BJ3iXHww3djw6hYIfErCZFee7qCtrneuLa20UXFCOTCfBM2cvQHjWJ2EG0s0MtdNwInarqCTz35i4wWXHsQ==",
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.7.0.tgz",
+      "integrity": "sha512-oAYoQnCYaQZKVS53Fq23ceWMRxq5EhQsE0x0RdQ55jT7wagMu5k+fS39v1fiSLrtrLQlXwVINenqhLMtTrV/1Q==",
       "license": "MIT",
       "optional": true,
       "dependencies": {
@@ -106,9 +106,9 @@
       }
     },
     "node_modules/@eslint-community/regexpp": {
-      "version": "4.12.1",
-      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.1.tgz",
-      "integrity": "sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==",
+      "version": "4.12.2",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.2.tgz",
+      "integrity": "sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -116,13 +116,13 @@
       }
     },
     "node_modules/@eslint/config-array": {
-      "version": "0.21.0",
-      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.21.0.tgz",
-      "integrity": "sha512-ENIdc4iLu0d93HeYirvKmrzshzofPw6VkZRKQGe9Nv46ZnWUzcF1xV01dcvEg/1wXUR61OmmlSfyeyO7EvjLxQ==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.21.1.tgz",
+      "integrity": "sha512-aw1gNayWpdI/jSYVgzN5pL0cfzU02GT3NBpeT/DXbx1/1x7ZKxFPd9bwrzygx/qiwIQiJ1sw/zD8qY/kRvlGHA==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
-        "@eslint/object-schema": "^2.1.6",
+        "@eslint/object-schema": "^2.1.7",
         "debug": "^4.3.1",
         "minimatch": "^3.1.2"
       },
@@ -131,19 +131,22 @@
       }
     },
     "node_modules/@eslint/config-helpers": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.3.1.tgz",
-      "integrity": "sha512-xR93k9WhrDYpXHORXpxVL5oHj3Era7wo6k/Wd8/IsQNnZUTzkGS29lyn3nAT05v6ltUuTFVCCYDEGfy2Or/sPA==",
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.4.2.tgz",
+      "integrity": "sha512-gBrxN88gOIf3R7ja5K9slwNayVcZgK6SOUORm2uBzTeIEfeVaIhOpCtTox3P6R7o2jLFwLFTLnC7kU/RGcYEgw==",
       "dev": true,
       "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/core": "^0.17.0"
+      },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
     "node_modules/@eslint/core": {
-      "version": "0.15.2",
-      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.15.2.tgz",
-      "integrity": "sha512-78Md3/Rrxh83gCxoUc0EiciuOHsIITzLy53m3d9UyiW8y9Dj2D29FeETqyKA+BRK76tnTp6RXWb3pCay8Oyomg==",
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.17.0.tgz",
+      "integrity": "sha512-yL/sLrpmtDaFEiUj1osRP4TI2MDz1AddJL+jZ7KSqvBuliN4xqYY54IfdN8qD8Toa6g1iloph1fxQNkjOxrrpQ==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
@@ -178,9 +181,9 @@
       }
     },
     "node_modules/@eslint/js": {
-      "version": "9.36.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.36.0.tgz",
-      "integrity": "sha512-uhCbYtYynH30iZErszX78U+nR3pJU3RHGQ57NXy5QupD4SBVwDeU8TNBy+MjMngc1UyIW9noKqsRqfjQTBU2dw==",
+      "version": "9.39.1",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.39.1.tgz",
+      "integrity": "sha512-S26Stp4zCy88tH94QbBv3XCuzRQiZ9yXofEILmglYTh/Ug/a9/umqvgFtYBAo3Lp0nsI/5/qH1CCrbdK3AP1Tw==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -191,9 +194,9 @@
       }
     },
     "node_modules/@eslint/object-schema": {
-      "version": "2.1.6",
-      "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.6.tgz",
-      "integrity": "sha512-RBMg5FRL0I0gs51M/guSAj5/e14VQ4tpZnQNWwuDT66P14I43ItmPfIZRhO9fUVIPOAQXU47atlywZ/czoqFPA==",
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.7.tgz",
+      "integrity": "sha512-VtAOaymWVfZcmZbp6E2mympDIHvyjXs/12LqWYjVw6qjrfF+VK+fyG33kChz3nnK+SU5/NeHOqrTEHS8sXO3OA==",
       "dev": true,
       "license": "Apache-2.0",
       "engines": {
@@ -201,13 +204,13 @@
       }
     },
     "node_modules/@eslint/plugin-kit": {
-      "version": "0.3.5",
-      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.3.5.tgz",
-      "integrity": "sha512-Z5kJ+wU3oA7MMIqVR9tyZRtjYPr4OC004Q4Rw7pgOKUOKkJfZ3O24nz3WYfGRpMDNmcOi3TwQOmgm7B7Tpii0w==",
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.4.1.tgz",
+      "integrity": "sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
-        "@eslint/core": "^0.15.2",
+        "@eslint/core": "^0.17.0",
         "levn": "^0.4.1"
       },
       "engines": {
@@ -694,19 +697,6 @@
         "url": "https://opencollective.com/libvips"
       }
     },
-    "node_modules/@isaacs/fs-minipass": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/@isaacs/fs-minipass/-/fs-minipass-4.0.1.tgz",
-      "integrity": "sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "minipass": "^7.0.4"
-      },
-      "engines": {
-        "node": ">=18.0.0"
-      }
-    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.13",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
@@ -970,9 +960,9 @@
       "license": "MIT"
     },
     "node_modules/@rushstack/eslint-patch": {
-      "version": "1.12.0",
-      "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.12.0.tgz",
-      "integrity": "sha512-5EwMtOqvJMMa3HbmxLlF74e+3/HhwBTMcvt3nqVJgGCozO6hzIPOBlwm8mGVNR9SN2IJpxSnlxczyDjcn7qIyw==",
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.14.1.tgz",
+      "integrity": "sha512-jGTk8UD/RdjsNZW8qq10r0RBvxL8OWtoT+kImlzPDFilmozzM+9QmIJsmze9UiSBrFU45ZxhTYBypn9q9z/VfQ==",
       "dev": true,
       "license": "MIT"
     },
@@ -986,54 +976,49 @@
       }
     },
     "node_modules/@tailwindcss/node": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.13.tgz",
-      "integrity": "sha512-eq3ouolC1oEFOAvOMOBAmfCIqZBJuvWvvYWh5h5iOYfe1HFC6+GZ6EIL0JdM3/niGRJmnrOc+8gl9/HGUaaptw==",
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.16.tgz",
+      "integrity": "sha512-BX5iaSsloNuvKNHRN3k2RcCuTEgASTo77mofW0vmeHkfrDWaoFAFvNHpEgtu0eqyypcyiBkDWzSMxJhp3AUVcw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/remapping": "^2.3.4",
         "enhanced-resolve": "^5.18.3",
-        "jiti": "^2.5.1",
-        "lightningcss": "1.30.1",
-        "magic-string": "^0.30.18",
+        "jiti": "^2.6.1",
+        "lightningcss": "1.30.2",
+        "magic-string": "^0.30.19",
         "source-map-js": "^1.2.1",
-        "tailwindcss": "4.1.13"
+        "tailwindcss": "4.1.16"
       }
     },
     "node_modules/@tailwindcss/oxide": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.13.tgz",
-      "integrity": "sha512-CPgsM1IpGRa880sMbYmG1s4xhAy3xEt1QULgTJGQmZUeNgXFR7s1YxYygmJyBGtou4SyEosGAGEeYqY7R53bIA==",
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.16.tgz",
+      "integrity": "sha512-2OSv52FRuhdlgyOQqgtQHuCgXnS8nFSYRp2tJ+4WZXKgTxqPy7SMSls8c3mPT5pkZ17SBToGM5LHEJBO7miEdg==",
       "dev": true,
-      "hasInstallScript": true,
       "license": "MIT",
-      "dependencies": {
-        "detect-libc": "^2.0.4",
-        "tar": "^7.4.3"
-      },
       "engines": {
         "node": ">= 10"
       },
       "optionalDependencies": {
-        "@tailwindcss/oxide-android-arm64": "4.1.13",
-        "@tailwindcss/oxide-darwin-arm64": "4.1.13",
-        "@tailwindcss/oxide-darwin-x64": "4.1.13",
-        "@tailwindcss/oxide-freebsd-x64": "4.1.13",
-        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.13",
-        "@tailwindcss/oxide-linux-arm64-gnu": "4.1.13",
-        "@tailwindcss/oxide-linux-arm64-musl": "4.1.13",
-        "@tailwindcss/oxide-linux-x64-gnu": "4.1.13",
-        "@tailwindcss/oxide-linux-x64-musl": "4.1.13",
-        "@tailwindcss/oxide-wasm32-wasi": "4.1.13",
-        "@tailwindcss/oxide-win32-arm64-msvc": "4.1.13",
-        "@tailwindcss/oxide-win32-x64-msvc": "4.1.13"
+        "@tailwindcss/oxide-android-arm64": "4.1.16",
+        "@tailwindcss/oxide-darwin-arm64": "4.1.16",
+        "@tailwindcss/oxide-darwin-x64": "4.1.16",
+        "@tailwindcss/oxide-freebsd-x64": "4.1.16",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.16",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.1.16",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.1.16",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.1.16",
+        "@tailwindcss/oxide-linux-x64-musl": "4.1.16",
+        "@tailwindcss/oxide-wasm32-wasi": "4.1.16",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.1.16",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.1.16"
       }
     },
     "node_modules/@tailwindcss/oxide-android-arm64": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.13.tgz",
-      "integrity": "sha512-BrpTrVYyejbgGo57yc8ieE+D6VT9GOgnNdmh5Sac6+t0m+v+sKQevpFVpwX3pBrM2qKrQwJ0c5eDbtjouY/+ew==",
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.16.tgz",
+      "integrity": "sha512-8+ctzkjHgwDJ5caq9IqRSgsP70xhdhJvm+oueS/yhD5ixLhqTw9fSL1OurzMUhBwE5zK26FXLCz2f/RtkISqHA==",
       "cpu": [
         "arm64"
       ],
@@ -1048,9 +1033,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-darwin-arm64": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.13.tgz",
-      "integrity": "sha512-YP+Jksc4U0KHcu76UhRDHq9bx4qtBftp9ShK/7UGfq0wpaP96YVnnjFnj3ZFrUAjc5iECzODl/Ts0AN7ZPOANQ==",
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.16.tgz",
+      "integrity": "sha512-C3oZy5042v2FOALBZtY0JTDnGNdS6w7DxL/odvSny17ORUnaRKhyTse8xYi3yKGyfnTUOdavRCdmc8QqJYwFKA==",
       "cpu": [
         "arm64"
       ],
@@ -1065,9 +1050,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-darwin-x64": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.13.tgz",
-      "integrity": "sha512-aAJ3bbwrn/PQHDxCto9sxwQfT30PzyYJFG0u/BWZGeVXi5Hx6uuUOQEI2Fa43qvmUjTRQNZnGqe9t0Zntexeuw==",
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.16.tgz",
+      "integrity": "sha512-vjrl/1Ub9+JwU6BP0emgipGjowzYZMjbWCDqwA2Z4vCa+HBSpP4v6U2ddejcHsolsYxwL5r4bPNoamlV0xDdLg==",
       "cpu": [
         "x64"
       ],
@@ -1082,9 +1067,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-freebsd-x64": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.13.tgz",
-      "integrity": "sha512-Wt8KvASHwSXhKE/dJLCCWcTSVmBj3xhVhp/aF3RpAhGeZ3sVo7+NTfgiN8Vey/Fi8prRClDs6/f0KXPDTZE6nQ==",
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.16.tgz",
+      "integrity": "sha512-TSMpPYpQLm+aR1wW5rKuUuEruc/oOX3C7H0BTnPDn7W/eMw8W+MRMpiypKMkXZfwH8wqPIRKppuZoedTtNj2tg==",
       "cpu": [
         "x64"
       ],
@@ -1099,9 +1084,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.13.tgz",
-      "integrity": "sha512-mbVbcAsW3Gkm2MGwA93eLtWrwajz91aXZCNSkGTx/R5eb6KpKD5q8Ueckkh9YNboU8RH7jiv+ol/I7ZyQ9H7Bw==",
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.16.tgz",
+      "integrity": "sha512-p0GGfRg/w0sdsFKBjMYvvKIiKy/LNWLWgV/plR4lUgrsxFAoQBFrXkZ4C0w8IOXfslB9vHK/JGASWD2IefIpvw==",
       "cpu": [
         "arm"
       ],
@@ -1116,9 +1101,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.13.tgz",
-      "integrity": "sha512-wdtfkmpXiwej/yoAkrCP2DNzRXCALq9NVLgLELgLim1QpSfhQM5+ZxQQF8fkOiEpuNoKLp4nKZ6RC4kmeFH0HQ==",
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.16.tgz",
+      "integrity": "sha512-DoixyMmTNO19rwRPdqviTrG1rYzpxgyYJl8RgQvdAQUzxC1ToLRqtNJpU/ATURSKgIg6uerPw2feW0aS8SNr/w==",
       "cpu": [
         "arm64"
       ],
@@ -1133,9 +1118,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.13.tgz",
-      "integrity": "sha512-hZQrmtLdhyqzXHB7mkXfq0IYbxegaqTmfa1p9MBj72WPoDD3oNOh1Lnxf6xZLY9C3OV6qiCYkO1i/LrzEdW2mg==",
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.16.tgz",
+      "integrity": "sha512-H81UXMa9hJhWhaAUca6bU2wm5RRFpuHImrwXBUvPbYb+3jo32I9VIwpOX6hms0fPmA6f2pGVlybO6qU8pF4fzQ==",
       "cpu": [
         "arm64"
       ],
@@ -1150,9 +1135,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.13.tgz",
-      "integrity": "sha512-uaZTYWxSXyMWDJZNY1Ul7XkJTCBRFZ5Fo6wtjrgBKzZLoJNrG+WderJwAjPzuNZOnmdrVg260DKwXCFtJ/hWRQ==",
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.16.tgz",
+      "integrity": "sha512-ZGHQxDtFC2/ruo7t99Qo2TTIvOERULPl5l0K1g0oK6b5PGqjYMga+FcY1wIUnrUxY56h28FxybtDEla+ICOyew==",
       "cpu": [
         "x64"
       ],
@@ -1167,9 +1152,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-x64-musl": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.13.tgz",
-      "integrity": "sha512-oXiPj5mi4Hdn50v5RdnuuIms0PVPI/EG4fxAfFiIKQh5TgQgX7oSuDWntHW7WNIi/yVLAiS+CRGW4RkoGSSgVQ==",
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.16.tgz",
+      "integrity": "sha512-Oi1tAaa0rcKf1Og9MzKeINZzMLPbhxvm7rno5/zuP1WYmpiG0bEHq4AcRUiG2165/WUzvxkW4XDYCscZWbTLZw==",
       "cpu": [
         "x64"
       ],
@@ -1184,9 +1169,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-wasm32-wasi": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.13.tgz",
-      "integrity": "sha512-+LC2nNtPovtrDwBc/nqnIKYh/W2+R69FA0hgoeOn64BdCX522u19ryLh3Vf3F8W49XBcMIxSe665kwy21FkhvA==",
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.16.tgz",
+      "integrity": "sha512-B01u/b8LteGRwucIBmCQ07FVXLzImWESAIMcUU6nvFt/tYsQ6IHz8DmZ5KtvmwxD+iTYBtM1xwoGXswnlu9v0Q==",
       "bundleDependencies": [
         "@napi-rs/wasm-runtime",
         "@emnapi/core",
@@ -1202,21 +1187,21 @@
       "license": "MIT",
       "optional": true,
       "dependencies": {
-        "@emnapi/core": "^1.4.5",
-        "@emnapi/runtime": "^1.4.5",
-        "@emnapi/wasi-threads": "^1.0.4",
-        "@napi-rs/wasm-runtime": "^0.2.12",
-        "@tybys/wasm-util": "^0.10.0",
-        "tslib": "^2.8.0"
+        "@emnapi/core": "^1.5.0",
+        "@emnapi/runtime": "^1.5.0",
+        "@emnapi/wasi-threads": "^1.1.0",
+        "@napi-rs/wasm-runtime": "^1.0.7",
+        "@tybys/wasm-util": "^0.10.1",
+        "tslib": "^2.4.0"
       },
       "engines": {
         "node": ">=14.0.0"
       }
     },
     "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.13.tgz",
-      "integrity": "sha512-dziTNeQXtoQ2KBXmrjCxsuPk3F3CQ/yb7ZNZNA+UkNTeiTGgfeh+gH5Pi7mRncVgcPD2xgHvkFCh/MhZWSgyQg==",
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.16.tgz",
+      "integrity": "sha512-zX+Q8sSkGj6HKRTMJXuPvOcP8XfYON24zJBRPlszcH1Np7xuHXhWn8qfFjIujVzvH3BHU+16jBXwgpl20i+v9A==",
       "cpu": [
         "arm64"
       ],
@@ -1231,9 +1216,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.13.tgz",
-      "integrity": "sha512-3+LKesjXydTkHk5zXX01b5KMzLV1xl2mcktBJkje7rhFUpUlYJy7IMOLqjIRQncLTa1WZZiFY/foAeB5nmaiTw==",
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.16.tgz",
+      "integrity": "sha512-m5dDFJUEejbFqP+UXVstd4W/wnxA4F61q8SoL+mqTypId2T2ZpuxosNSgowiCnLp2+Z+rivdU0AqpfgiD7yCBg==",
       "cpu": [
         "x64"
       ],
@@ -1248,17 +1233,17 @@
       }
     },
     "node_modules/@tailwindcss/postcss": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/postcss/-/postcss-4.1.13.tgz",
-      "integrity": "sha512-HLgx6YSFKJT7rJqh9oJs/TkBFhxuMOfUKSBEPYwV+t78POOBsdQ7crhZLzwcH3T0UyUuOzU/GK5pk5eKr3wCiQ==",
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/postcss/-/postcss-4.1.16.tgz",
+      "integrity": "sha512-Qn3SFGPXYQMKR/UtqS+dqvPrzEeBZHrFA92maT4zijCVggdsXnDBMsPFJo1eArX3J+O+Gi+8pV4PkqjLCNBk3A==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
-        "@tailwindcss/node": "4.1.13",
-        "@tailwindcss/oxide": "4.1.13",
+        "@tailwindcss/node": "4.1.16",
+        "@tailwindcss/oxide": "4.1.16",
         "postcss": "^8.4.41",
-        "tailwindcss": "4.1.13"
+        "tailwindcss": "4.1.16"
       }
     },
     "node_modules/@tybys/wasm-util": {
@@ -1301,9 +1286,9 @@
       "license": "MIT"
     },
     "node_modules/@types/node": {
-      "version": "20.19.17",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.17.tgz",
-      "integrity": "sha512-gfehUI8N1z92kygssiuWvLiwcbOB3IRktR6hTDgJlXMYh5OvkPSRmgfoBUmfZt+vhwJtX7v1Yw4KvvAf7c5QKQ==",
+      "version": "20.19.24",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.24.tgz",
+      "integrity": "sha512-FE5u0ezmi6y9OZEzlJfg37mqqf6ZDSF2V/NLjUyGrR9uTZ7Sb9F7bLNZ03S4XVUNRWGA7Ck4c1kK+YnuWjl+DA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -1311,38 +1296,37 @@
       }
     },
     "node_modules/@types/react": {
-      "version": "19.1.13",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.13.tgz",
-      "integrity": "sha512-hHkbU/eoO3EG5/MZkuFSKmYqPbSVk5byPFa3e7y/8TybHiLMACgI8seVYlicwk7H5K/rI2px9xrQp/C+AUDTiQ==",
+      "version": "19.2.2",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.2.tgz",
+      "integrity": "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "csstype": "^3.0.2"
       }
     },
     "node_modules/@types/react-dom": {
-      "version": "19.1.9",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.1.9.tgz",
-      "integrity": "sha512-qXRuZaOsAdXKFyOhRBg6Lqqc0yay13vN7KrIg4L7N4aaHN68ma9OK3NE1BoDFgFOTfM7zg+3/8+2n8rLUH3OKQ==",
+      "version": "19.2.2",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.2.tgz",
+      "integrity": "sha512-9KQPoO6mZCi7jcIStSnlOWn2nEF3mNmyr3rIAsGnAbQKYbRLyqmeSc39EVgtxXVia+LMT8j3knZLAZAh+xLmrw==",
       "dev": true,
       "license": "MIT",
       "peerDependencies": {
-        "@types/react": "^19.0.0"
+        "@types/react": "^19.2.0"
       }
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "8.44.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.44.1.tgz",
-      "integrity": "sha512-molgphGqOBT7t4YKCSkbasmu1tb1MgrZ2szGzHbclF7PNmOkSTQVHy+2jXOSnxvR3+Xe1yySHFZoqMpz3TfQsw==",
+      "version": "8.46.3",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.46.3.tgz",
+      "integrity": "sha512-sbaQ27XBUopBkRiuY/P9sWGOWUW4rl8fDoHIUmLpZd8uldsTyB4/Zg6bWTegPoTLnKj9Hqgn3QD6cjPNB32Odw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@eslint-community/regexpp": "^4.10.0",
-        "@typescript-eslint/scope-manager": "8.44.1",
-        "@typescript-eslint/type-utils": "8.44.1",
-        "@typescript-eslint/utils": "8.44.1",
-        "@typescript-eslint/visitor-keys": "8.44.1",
+        "@typescript-eslint/scope-manager": "8.46.3",
+        "@typescript-eslint/type-utils": "8.46.3",
+        "@typescript-eslint/utils": "8.46.3",
+        "@typescript-eslint/visitor-keys": "8.46.3",
         "graphemer": "^1.4.0",
         "ignore": "^7.0.0",
         "natural-compare": "^1.4.0",
@@ -1356,7 +1340,7 @@
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "@typescript-eslint/parser": "^8.44.1",
+        "@typescript-eslint/parser": "^8.46.3",
         "eslint": "^8.57.0 || ^9.0.0",
         "typescript": ">=4.8.4 <6.0.0"
       }
@@ -1372,17 +1356,16 @@
       }
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "8.44.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.44.1.tgz",
-      "integrity": "sha512-EHrrEsyhOhxYt8MTg4zTF+DJMuNBzWwgvvOYNj/zm1vnaD/IC5zCXFehZv94Piqa2cRFfXrTFxIvO95L7Qc/cw==",
+      "version": "8.46.3",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.46.3.tgz",
+      "integrity": "sha512-6m1I5RmHBGTnUGS113G04DMu3CpSdxCAU/UvtjNWL4Nuf3MW9tQhiJqRlHzChIkhy6kZSAQmc+I1bcGjE3yNKg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
-        "@typescript-eslint/scope-manager": "8.44.1",
-        "@typescript-eslint/types": "8.44.1",
-        "@typescript-eslint/typescript-estree": "8.44.1",
-        "@typescript-eslint/visitor-keys": "8.44.1",
+        "@typescript-eslint/scope-manager": "8.46.3",
+        "@typescript-eslint/types": "8.46.3",
+        "@typescript-eslint/typescript-estree": "8.46.3",
+        "@typescript-eslint/visitor-keys": "8.46.3",
         "debug": "^4.3.4"
       },
       "engines": {
@@ -1398,14 +1381,14 @@
       }
     },
     "node_modules/@typescript-eslint/project-service": {
-      "version": "8.44.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.44.1.tgz",
-      "integrity": "sha512-ycSa60eGg8GWAkVsKV4E6Nz33h+HjTXbsDT4FILyL8Obk5/mx4tbvCNsLf9zret3ipSumAOG89UcCs/KRaKYrA==",
+      "version": "8.46.3",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.46.3.tgz",
+      "integrity": "sha512-Fz8yFXsp2wDFeUElO88S9n4w1I4CWDTXDqDr9gYvZgUpwXQqmZBr9+NTTql5R3J7+hrJZPdpiWaB9VNhAKYLuQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/tsconfig-utils": "^8.44.1",
-        "@typescript-eslint/types": "^8.44.1",
+        "@typescript-eslint/tsconfig-utils": "^8.46.3",
+        "@typescript-eslint/types": "^8.46.3",
         "debug": "^4.3.4"
       },
       "engines": {
@@ -1420,14 +1403,14 @@
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "8.44.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.44.1.tgz",
-      "integrity": "sha512-NdhWHgmynpSvyhchGLXh+w12OMT308Gm25JoRIyTZqEbApiBiQHD/8xgb6LqCWCFcxFtWwaVdFsLPQI3jvhywg==",
+      "version": "8.46.3",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.46.3.tgz",
+      "integrity": "sha512-FCi7Y1zgrmxp3DfWfr+3m9ansUUFoy8dkEdeQSgA9gbm8DaHYvZCdkFRQrtKiedFf3Ha6VmoqoAaP68+i+22kg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.44.1",
-        "@typescript-eslint/visitor-keys": "8.44.1"
+        "@typescript-eslint/types": "8.46.3",
+        "@typescript-eslint/visitor-keys": "8.46.3"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -1438,9 +1421,9 @@
       }
     },
     "node_modules/@typescript-eslint/tsconfig-utils": {
-      "version": "8.44.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.44.1.tgz",
-      "integrity": "sha512-B5OyACouEjuIvof3o86lRMvyDsFwZm+4fBOqFHccIctYgBjqR3qT39FBYGN87khcgf0ExpdCBeGKpKRhSFTjKQ==",
+      "version": "8.46.3",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.46.3.tgz",
+      "integrity": "sha512-GLupljMniHNIROP0zE7nCcybptolcH8QZfXOpCfhQDAdwJ/ZTlcaBOYebSOZotpti/3HrHSw7D3PZm75gYFsOA==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -1455,15 +1438,15 @@
       }
     },
     "node_modules/@typescript-eslint/type-utils": {
-      "version": "8.44.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.44.1.tgz",
-      "integrity": "sha512-KdEerZqHWXsRNKjF9NYswNISnFzXfXNDfPxoTh7tqohU/PRIbwTmsjGK6V9/RTYWau7NZvfo52lgVk+sJh0K3g==",
+      "version": "8.46.3",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.46.3.tgz",
+      "integrity": "sha512-ZPCADbr+qfz3aiTTYNNkCbUt+cjNwI/5McyANNrFBpVxPt7GqpEYz5ZfdwuFyGUnJ9FdDXbGODUu6iRCI6XRXw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.44.1",
-        "@typescript-eslint/typescript-estree": "8.44.1",
-        "@typescript-eslint/utils": "8.44.1",
+        "@typescript-eslint/types": "8.46.3",
+        "@typescript-eslint/typescript-estree": "8.46.3",
+        "@typescript-eslint/utils": "8.46.3",
         "debug": "^4.3.4",
         "ts-api-utils": "^2.1.0"
       },
@@ -1480,9 +1463,9 @@
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "8.44.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.44.1.tgz",
-      "integrity": "sha512-Lk7uj7y9uQUOEguiDIDLYLJOrYHQa7oBiURYVFqIpGxclAFQ78f6VUOM8lI2XEuNOKNB7XuvM2+2cMXAoq4ALQ==",
+      "version": "8.46.3",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.46.3.tgz",
+      "integrity": "sha512-G7Ok9WN/ggW7e/tOf8TQYMaxgID3Iujn231hfi0Pc7ZheztIJVpO44ekY00b7akqc6nZcvregk0Jpah3kep6hA==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -1494,16 +1477,16 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "8.44.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.44.1.tgz",
-      "integrity": "sha512-qnQJ+mVa7szevdEyvfItbO5Vo+GfZ4/GZWWDRRLjrxYPkhM+6zYB2vRYwCsoJLzqFCdZT4mEqyJoyzkunsZ96A==",
+      "version": "8.46.3",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.46.3.tgz",
+      "integrity": "sha512-f/NvtRjOm80BtNM5OQtlaBdM5BRFUv7gf381j9wygDNL+qOYSNOgtQ/DCndiYi80iIOv76QqaTmp4fa9hwI0OA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/project-service": "8.44.1",
-        "@typescript-eslint/tsconfig-utils": "8.44.1",
-        "@typescript-eslint/types": "8.44.1",
-        "@typescript-eslint/visitor-keys": "8.44.1",
+        "@typescript-eslint/project-service": "8.46.3",
+        "@typescript-eslint/tsconfig-utils": "8.46.3",
+        "@typescript-eslint/types": "8.46.3",
+        "@typescript-eslint/visitor-keys": "8.46.3",
         "debug": "^4.3.4",
         "fast-glob": "^3.3.2",
         "is-glob": "^4.0.3",
@@ -1579,16 +1562,16 @@
       }
     },
     "node_modules/@typescript-eslint/utils": {
-      "version": "8.44.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.44.1.tgz",
-      "integrity": "sha512-DpX5Fp6edTlocMCwA+mHY8Mra+pPjRZ0TfHkXI8QFelIKcbADQz1LUPNtzOFUriBB2UYqw4Pi9+xV4w9ZczHFg==",
+      "version": "8.46.3",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.46.3.tgz",
+      "integrity": "sha512-VXw7qmdkucEx9WkmR3ld/u6VhRyKeiF1uxWwCy/iuNfokjJ7VhsgLSOTjsol8BunSw190zABzpwdNsze2Kpo4g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.7.0",
-        "@typescript-eslint/scope-manager": "8.44.1",
-        "@typescript-eslint/types": "8.44.1",
-        "@typescript-eslint/typescript-estree": "8.44.1"
+        "@typescript-eslint/scope-manager": "8.46.3",
+        "@typescript-eslint/types": "8.46.3",
+        "@typescript-eslint/typescript-estree": "8.46.3"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -1603,13 +1586,13 @@
       }
     },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "8.44.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.44.1.tgz",
-      "integrity": "sha512-576+u0QD+Jp3tZzvfRfxon0EA2lzcDt3lhUbsC6Lgzy9x2VR4E+JUiNyGHi5T8vk0TV+fpJ5GLG1JsJuWCaKhw==",
+      "version": "8.46.3",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.46.3.tgz",
+      "integrity": "sha512-uk574k8IU0rOF/AjniX8qbLSGURJVUCeM5e4MIMKBFFi8weeiLrG1fyQejyLXQpRZbU/1BuQasleV/RfHC3hHg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.44.1",
+        "@typescript-eslint/types": "8.46.3",
         "eslint-visitor-keys": "^4.2.1"
       },
       "engines": {
@@ -1895,7 +1878,6 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -2163,9 +2145,9 @@
       }
     },
     "node_modules/axe-core": {
-      "version": "4.10.3",
-      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.10.3.tgz",
-      "integrity": "sha512-Xm7bpRXnDSX2YE2YFfBk2FnF0ep6tmG7xPh8iHee8MIcrgq762Nkce856dYtJYLkuIoYZvGfTs/PbZhideTcEg==",
+      "version": "4.11.0",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.11.0.tgz",
+      "integrity": "sha512-ilYanEU8vxxBexpJd8cWM4ElSQq4QctCLKih0TSfjIfCQTeyH/6zVrmIJfLPrKTKJRbiG+cfnZbQIjAlJmF1jQ==",
       "dev": true,
       "license": "MPL-2.0",
       "engines": {
@@ -2173,9 +2155,9 @@
       }
     },
     "node_modules/axios": {
-      "version": "1.12.2",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.12.2.tgz",
-      "integrity": "sha512-vMJzPewAlRyOgxV2dU0Cuz2O8zzzx9VYtbJOaBgXFeLc4IV/Eg50n4LowmehOOR61S8ZMpc2K5Sa7g6A4jfkUw==",
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.13.2.tgz",
+      "integrity": "sha512-VPk9ebNqPcy5lRGuSlKx752IlDatOjT9paPlm8A7yOuW2Fbvp4X3JznJtT4f0GzGLLiWE9W8onz51SqLYwzGaA==",
       "license": "MIT",
       "dependencies": {
         "follow-redirects": "^1.15.6",
@@ -2284,9 +2266,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001745",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001745.tgz",
-      "integrity": "sha512-ywt6i8FzvdgrrrGbr1jZVObnVv6adj+0if2/omv9cmR2oiZs30zL4DIyaptKcbOrBdOIc74QTMoJvSE2QHh5UQ==",
+      "version": "1.0.30001754",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001754.tgz",
+      "integrity": "sha512-x6OeBXueoAceOmotzx3PO4Zpt4rzpeIFsSr6AAePTZxSkXiYDUmpypEl7e2+8NCd9bD7bXjqyef8CJYPC1jfxg==",
       "funding": [
         {
           "type": "opencollective",
@@ -2320,16 +2302,6 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
-    "node_modules/chownr": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/chownr/-/chownr-3.0.0.tgz",
-      "integrity": "sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==",
-      "dev": true,
-      "license": "BlueOak-1.0.0",
-      "engines": {
-        "node": ">=18"
-      }
-    },
     "node_modules/client-only": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
@@ -2529,9 +2501,9 @@
       }
     },
     "node_modules/detect-libc": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.1.tgz",
-      "integrity": "sha512-ecqj/sy1jcK1uWrwpR67UhYrIFQ+5WlGxth34WquCbamhFA6hkkwiu37o6J5xCHdo1oixJRfVRw+ywV+Hq/0Aw==",
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
       "devOptional": true,
       "license": "Apache-2.0",
       "engines": {
@@ -2773,26 +2745,24 @@
       }
     },
     "node_modules/eslint": {
-      "version": "9.36.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.36.0.tgz",
-      "integrity": "sha512-hB4FIzXovouYzwzECDcUkJ4OcfOEkXTv2zRY6B9bkwjx/cprAq0uvm1nl7zvQ0/TsUk0zQiN4uPfJpB9m+rPMQ==",
+      "version": "9.39.1",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.39.1.tgz",
+      "integrity": "sha512-BhHmn2yNOFA9H9JmmIVKJmd288g9hrVRDkdoIgRCRuSySRUHH7r/DI6aAXW9T1WwUuY3DFgrcaqB+deURBLR5g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
-        "@eslint/config-array": "^0.21.0",
-        "@eslint/config-helpers": "^0.3.1",
-        "@eslint/core": "^0.15.2",
+        "@eslint/config-array": "^0.21.1",
+        "@eslint/config-helpers": "^0.4.2",
+        "@eslint/core": "^0.17.0",
         "@eslint/eslintrc": "^3.3.1",
-        "@eslint/js": "9.36.0",
-        "@eslint/plugin-kit": "^0.3.5",
+        "@eslint/js": "9.39.1",
+        "@eslint/plugin-kit": "^0.4.1",
         "@humanfs/node": "^0.16.6",
         "@humanwhocodes/module-importer": "^1.0.1",
         "@humanwhocodes/retry": "^0.4.2",
         "@types/estree": "^1.0.6",
-        "@types/json-schema": "^7.0.15",
         "ajv": "^6.12.4",
         "chalk": "^4.0.0",
         "cross-spawn": "^7.0.6",
@@ -2953,7 +2923,6 @@
       "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@rtsao/scc": "^1.1.0",
         "array-includes": "^3.1.9",
@@ -3417,6 +3386,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/generator-function": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/generator-function/-/generator-function-2.0.1.tgz",
+      "integrity": "sha512-SFdFmIJi+ybC0vjlHN0ZGVGHc3lgE0DxPAT0djjVg+kjOnSqclqmj0KQ7ykTOLP6YxoqOvuAODGdcHJn+43q3g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/get-intrinsic": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
@@ -3473,9 +3452,9 @@
       }
     },
     "node_modules/get-tsconfig": {
-      "version": "4.10.1",
-      "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.10.1.tgz",
-      "integrity": "sha512-auHyJ4AgMz7vgS8Hp3N6HXSmlMdUyhSUrfBF16w153rxtLIEOE+HGqaBppczZvnHLqQJfiHotCYpNhl0lUROFQ==",
+      "version": "4.13.0",
+      "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.13.0.tgz",
+      "integrity": "sha512-1VKTZJCwBrvbd+Wn3AOgQP/2Av+TfTCOlE4AcRJE72W1ksZXbAx8PPBR9RzgTeSPzlPMHrbANMH3LbltH73wxQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -3869,14 +3848,15 @@
       }
     },
     "node_modules/is-generator-function": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.0.tgz",
-      "integrity": "sha512-nPUB5km40q9e8UfN/Zc24eLlzdSf9OfKByBw9CIdw4H1giPMeA0OIJvbchsCu4npfI2QcMVBsGEBHKZ7wLTWmQ==",
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.2.tgz",
+      "integrity": "sha512-upqt1SkGkODW9tsGNG5mtXTXtECizwtS2kA161M+gJPc1xdb/Ax629af6YrTwcOeQHbewrPNlE5Dx7kzvXTizA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "call-bound": "^1.0.3",
-        "get-proto": "^1.0.0",
+        "call-bound": "^1.0.4",
+        "generator-function": "^2.0.0",
+        "get-proto": "^1.0.1",
         "has-tostringtag": "^1.0.2",
         "safe-regex-test": "^1.1.0"
       },
@@ -4131,9 +4111,9 @@
       }
     },
     "node_modules/jiti": {
-      "version": "2.6.0",
-      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.0.tgz",
-      "integrity": "sha512-VXe6RjJkBPj0ohtqaO8vSWP3ZhAKo66fKrFNCll4BTcwljPLz03pCbaNKfzGP5MbrCYcbJ7v0nOYYwUzTEIdXQ==",
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz",
+      "integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==",
       "dev": true,
       "license": "MIT",
       "bin": {
@@ -4264,9 +4244,9 @@
       }
     },
     "node_modules/lightningcss": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.1.tgz",
-      "integrity": "sha512-xi6IyHML+c9+Q3W0S4fCQJOym42pyurFiJUHEcEyHS0CeKzia4yZDEsLlqOFykxOdHpNy0NmvVO31vcSqAxJCg==",
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.2.tgz",
+      "integrity": "sha512-utfs7Pr5uJyyvDETitgsaqSyjCb2qNRAtuqUeWIAKztsOYdcACf2KtARYXg2pSvhkt+9NfoaNY7fxjl6nuMjIQ==",
       "dev": true,
       "license": "MPL-2.0",
       "dependencies": {
@@ -4280,22 +4260,44 @@
         "url": "https://opencollective.com/parcel"
       },
       "optionalDependencies": {
-        "lightningcss-darwin-arm64": "1.30.1",
-        "lightningcss-darwin-x64": "1.30.1",
-        "lightningcss-freebsd-x64": "1.30.1",
-        "lightningcss-linux-arm-gnueabihf": "1.30.1",
-        "lightningcss-linux-arm64-gnu": "1.30.1",
-        "lightningcss-linux-arm64-musl": "1.30.1",
-        "lightningcss-linux-x64-gnu": "1.30.1",
-        "lightningcss-linux-x64-musl": "1.30.1",
-        "lightningcss-win32-arm64-msvc": "1.30.1",
-        "lightningcss-win32-x64-msvc": "1.30.1"
+        "lightningcss-android-arm64": "1.30.2",
+        "lightningcss-darwin-arm64": "1.30.2",
+        "lightningcss-darwin-x64": "1.30.2",
+        "lightningcss-freebsd-x64": "1.30.2",
+        "lightningcss-linux-arm-gnueabihf": "1.30.2",
+        "lightningcss-linux-arm64-gnu": "1.30.2",
+        "lightningcss-linux-arm64-musl": "1.30.2",
+        "lightningcss-linux-x64-gnu": "1.30.2",
+        "lightningcss-linux-x64-musl": "1.30.2",
+        "lightningcss-win32-arm64-msvc": "1.30.2",
+        "lightningcss-win32-x64-msvc": "1.30.2"
+      }
+    },
+    "node_modules/lightningcss-android-arm64": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.30.2.tgz",
+      "integrity": "sha512-BH9sEdOCahSgmkVhBLeU7Hc9DWeZ1Eb6wNS6Da8igvUwAe0sqROHddIlvU06q3WyXVEOYDZ6ykBZQnjTbmo4+A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
       }
     },
     "node_modules/lightningcss-darwin-arm64": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.30.1.tgz",
-      "integrity": "sha512-c8JK7hyE65X1MHMN+Viq9n11RRC7hgin3HhYKhrMyaXflk5GVplZ60IxyoVtzILeKr+xAJwg6zK6sjTBJ0FKYQ==",
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.30.2.tgz",
+      "integrity": "sha512-ylTcDJBN3Hp21TdhRT5zBOIi73P6/W0qwvlFEk22fkdXchtNTOU4Qc37SkzV+EKYxLouZ6M4LG9NfZ1qkhhBWA==",
       "cpu": [
         "arm64"
       ],
@@ -4314,9 +4316,9 @@
       }
     },
     "node_modules/lightningcss-darwin-x64": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.30.1.tgz",
-      "integrity": "sha512-k1EvjakfumAQoTfcXUcHQZhSpLlkAuEkdMBsI/ivWw9hL+7FtilQc0Cy3hrx0AAQrVtQAbMI7YjCgYgvn37PzA==",
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.30.2.tgz",
+      "integrity": "sha512-oBZgKchomuDYxr7ilwLcyms6BCyLn0z8J0+ZZmfpjwg9fRVZIR5/GMXd7r9RH94iDhld3UmSjBM6nXWM2TfZTQ==",
       "cpu": [
         "x64"
       ],
@@ -4335,9 +4337,9 @@
       }
     },
     "node_modules/lightningcss-freebsd-x64": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.30.1.tgz",
-      "integrity": "sha512-kmW6UGCGg2PcyUE59K5r0kWfKPAVy4SltVeut+umLCFoJ53RdCUWxcRDzO1eTaxf/7Q2H7LTquFHPL5R+Gjyig==",
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.30.2.tgz",
+      "integrity": "sha512-c2bH6xTrf4BDpK8MoGG4Bd6zAMZDAXS569UxCAGcA7IKbHNMlhGQ89eRmvpIUGfKWNVdbhSbkQaWhEoMGmGslA==",
       "cpu": [
         "x64"
       ],
@@ -4356,9 +4358,9 @@
       }
     },
     "node_modules/lightningcss-linux-arm-gnueabihf": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.30.1.tgz",
-      "integrity": "sha512-MjxUShl1v8pit+6D/zSPq9S9dQ2NPFSQwGvxBCYaBYLPlCWuPh9/t1MRS8iUaR8i+a6w7aps+B4N0S1TYP/R+Q==",
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.30.2.tgz",
+      "integrity": "sha512-eVdpxh4wYcm0PofJIZVuYuLiqBIakQ9uFZmipf6LF/HRj5Bgm0eb3qL/mr1smyXIS1twwOxNWndd8z0E374hiA==",
       "cpu": [
         "arm"
       ],
@@ -4377,9 +4379,9 @@
       }
     },
     "node_modules/lightningcss-linux-arm64-gnu": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.30.1.tgz",
-      "integrity": "sha512-gB72maP8rmrKsnKYy8XUuXi/4OctJiuQjcuqWNlJQ6jZiWqtPvqFziskH3hnajfvKB27ynbVCucKSm2rkQp4Bw==",
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.30.2.tgz",
+      "integrity": "sha512-UK65WJAbwIJbiBFXpxrbTNArtfuznvxAJw4Q2ZGlU8kPeDIWEX1dg3rn2veBVUylA2Ezg89ktszWbaQnxD/e3A==",
       "cpu": [
         "arm64"
       ],
@@ -4398,9 +4400,9 @@
       }
     },
     "node_modules/lightningcss-linux-arm64-musl": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.30.1.tgz",
-      "integrity": "sha512-jmUQVx4331m6LIX+0wUhBbmMX7TCfjF5FoOH6SD1CttzuYlGNVpA7QnrmLxrsub43ClTINfGSYyHe2HWeLl5CQ==",
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.30.2.tgz",
+      "integrity": "sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA==",
       "cpu": [
         "arm64"
       ],
@@ -4419,9 +4421,9 @@
       }
     },
     "node_modules/lightningcss-linux-x64-gnu": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.30.1.tgz",
-      "integrity": "sha512-piWx3z4wN8J8z3+O5kO74+yr6ze/dKmPnI7vLqfSqI8bccaTGY5xiSGVIJBDd5K5BHlvVLpUB3S2YCfelyJ1bw==",
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.30.2.tgz",
+      "integrity": "sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w==",
       "cpu": [
         "x64"
       ],
@@ -4440,9 +4442,9 @@
       }
     },
     "node_modules/lightningcss-linux-x64-musl": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.30.1.tgz",
-      "integrity": "sha512-rRomAK7eIkL+tHY0YPxbc5Dra2gXlI63HL+v1Pdi1a3sC+tJTcFrHX+E86sulgAXeI7rSzDYhPSeHHjqFhqfeQ==",
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.30.2.tgz",
+      "integrity": "sha512-XJaLUUFXb6/QG2lGIW6aIk6jKdtjtcffUT0NKvIqhSBY3hh9Ch+1LCeH80dR9q9LBjG3ewbDjnumefsLsP6aiA==",
       "cpu": [
         "x64"
       ],
@@ -4461,9 +4463,9 @@
       }
     },
     "node_modules/lightningcss-win32-arm64-msvc": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.30.1.tgz",
-      "integrity": "sha512-mSL4rqPi4iXq5YVqzSsJgMVFENoa4nGTT/GjO2c0Yl9OuQfPsIfncvLrEW6RbbB24WtZ3xP/2CCmI3tNkNV4oA==",
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.30.2.tgz",
+      "integrity": "sha512-FZn+vaj7zLv//D/192WFFVA0RgHawIcHqLX9xuWiQt7P0PtdFEVaxgF9rjM/IRYHQXNnk61/H/gb2Ei+kUQ4xQ==",
       "cpu": [
         "arm64"
       ],
@@ -4482,9 +4484,9 @@
       }
     },
     "node_modules/lightningcss-win32-x64-msvc": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.30.1.tgz",
-      "integrity": "sha512-PVqXh48wh4T53F/1CCu8PIPCxLzWyCnn/9T5W1Jpmdy5h9Cwd+0YQS6/LwhHXSafuc61/xg9Lv5OrCby6a++jg==",
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.30.2.tgz",
+      "integrity": "sha512-5g1yc73p+iAkid5phb4oVFMB45417DkRevRbt/El/gKXJk4jid+vPFF/AXbxn05Aky8PapwzZrdJShv5C0avjw==",
       "cpu": [
         "x64"
       ],
@@ -4539,9 +4541,9 @@
       }
     },
     "node_modules/magic-string": {
-      "version": "0.30.19",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.19.tgz",
-      "integrity": "sha512-2N21sPY9Ws53PZvsEpVtNuSW+ScYbQdp4b9qUaL+9QkHUrGFKo56Lg9Emg5s9V/qrtNBmiR01sYhUOwu3H+VOw==",
+      "version": "0.30.21",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
+      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -4625,29 +4627,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/minipass": {
-      "version": "7.1.2",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
-      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
-      "dev": true,
-      "license": "ISC",
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      }
-    },
-    "node_modules/minizlib": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-3.1.0.tgz",
-      "integrity": "sha512-KZxYo1BUkWD2TVFLr0MQoM8vUUigWD3LlD83a/75BqC+4qE0Hb1Vo5v1FgcfaNXvfXzr+5EhQ6ing/CaBijTlw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "minipass": "^7.1.2"
-      },
-      "engines": {
-        "node": ">= 18"
-      }
-    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -4674,9 +4653,9 @@
       }
     },
     "node_modules/napi-postinstall": {
-      "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/napi-postinstall/-/napi-postinstall-0.3.3.tgz",
-      "integrity": "sha512-uTp172LLXSxuSYHv/kou+f6KW3SMppU9ivthaVTXian9sOt3XM/zHYHpRZiLgQoxeWfYUnslNWQHF1+G71xcow==",
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/napi-postinstall/-/napi-postinstall-0.3.4.tgz",
+      "integrity": "sha512-PHI5f1O0EP5xJ9gQmFGMS6IZcrVvTjpXjz7Na41gTE7eE2hK11lg04CECCYEEjdc17EV4DO+fkGEtt7TpTaTiQ==",
       "dev": true,
       "license": "MIT",
       "bin": {
@@ -5129,7 +5108,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz",
       "integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -5139,7 +5117,6 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz",
       "integrity": "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "scheduler": "^0.26.0"
       },
@@ -5199,13 +5176,13 @@
       }
     },
     "node_modules/resolve": {
-      "version": "1.22.10",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
-      "integrity": "sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==",
+      "version": "1.22.11",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz",
+      "integrity": "sha512-RfqAvLnMl313r7c9oclB1HhUEAezcpLjz95wFH4LVuhk9JF/r22qmVP9AMmOU4vMX7Q8pN8jwNg/CSpdFnMjTQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "is-core-module": "^2.16.0",
+        "is-core-module": "^2.16.1",
         "path-parse": "^1.0.7",
         "supports-preserve-symlinks-flag": "^1.0.0"
       },
@@ -5336,9 +5313,9 @@
       "license": "MIT"
     },
     "node_modules/semver": {
-      "version": "7.7.2",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
-      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
+      "version": "7.7.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
+      "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
       "devOptional": true,
       "license": "ISC",
       "bin": {
@@ -5755,16 +5732,16 @@
       }
     },
     "node_modules/tailwindcss": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.13.tgz",
-      "integrity": "sha512-i+zidfmTqtwquj4hMEwdjshYYgMbOrPzb9a0M3ZgNa0JMoZeFC6bxZvO8yr8ozS6ix2SDz0+mvryPeBs2TFE+w==",
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.16.tgz",
+      "integrity": "sha512-pONL5awpaQX4LN5eiv7moSiSPd/DLDzKVRJz8Q9PgzmAdd1R4307GQS2ZpfiN7ZmekdQrfhZZiSE5jkLR4WNaA==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/tapable": {
-      "version": "2.2.3",
-      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.3.tgz",
-      "integrity": "sha512-ZL6DDuAlRlLGghwcfmSn9sK3Hr6ArtyudlSAiCqQ6IfE+b+HHbydbYDIG15IfS5do+7XQQBdBiubF/cV2dnDzg==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.0.tgz",
+      "integrity": "sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -5775,23 +5752,6 @@
         "url": "https://opencollective.com/webpack"
       }
     },
-    "node_modules/tar": {
-      "version": "7.5.1",
-      "resolved": "https://registry.npmjs.org/tar/-/tar-7.5.1.tgz",
-      "integrity": "sha512-nlGpxf+hv0v7GkWBK2V9spgactGOp0qvfWRxUMjqHyzrt3SgwE48DIv/FhqPHJYLHpgW1opq3nERbz5Anq7n1g==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "@isaacs/fs-minipass": "^4.0.0",
-        "chownr": "^3.0.0",
-        "minipass": "^7.1.2",
-        "minizlib": "^3.1.0",
-        "yallist": "^5.0.0"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
     "node_modules/tinyglobby": {
       "version": "0.2.15",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
@@ -5833,7 +5793,6 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -5978,12 +5937,11 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.9.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.2.tgz",
-      "integrity": "sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==",
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -6178,16 +6136,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/yallist": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-5.0.0.tgz",
-      "integrity": "sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==",
-      "dev": true,
-      "license": "BlueOak-1.0.0",
-      "engines": {
-        "node": ">=18"
-      }
-    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",

From fb852a57f2c6becc3e0e6c254333362a8287c158 Mon Sep 17 00:00:00 2001
From: Mehara Rothila Ranawaka <rothilamehara22@gmail.com>
Date: Sun, 9 Nov 2025 06:17:16 +0530
Subject: [PATCH 07/38] Integrate PayHere payment gateway on invoice page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Added PaymentGateway component to invoice detail page allowing
customers to pay outstanding invoices online. Includes user
profile loading for auto-filling payment details and complete
payment success/error handling.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../dashboard/invoices/[invoiceId]/page.tsx   | 61 +++++++++++++++++++
 1 file changed, 61 insertions(+)

diff --git a/src/app/dashboard/invoices/[invoiceId]/page.tsx b/src/app/dashboard/invoices/[invoiceId]/page.tsx
index 6c70945..f1e6001 100644
--- a/src/app/dashboard/invoices/[invoiceId]/page.tsx
+++ b/src/app/dashboard/invoices/[invoiceId]/page.tsx
@@ -3,6 +3,8 @@
 import { useEffect, useMemo, useState } from 'react'
 import { useParams, useRouter } from 'next/navigation'
 import { paymentService } from '@/services/paymentService'
+import { userService } from '@/services/userService'
+import PaymentGateway from '@/app/components/PaymentGateway'
 import type { InvoiceResponseDto } from '@/types/payment'
 
 const formatCurrency = (value: number) => `LKR ${value.toLocaleString(undefined, { minimumFractionDigits: 2 })}`
@@ -41,6 +43,13 @@ export default function InvoiceDetailPage() {
   const [email, setEmail] = useState('')
   const [emailMessage, setEmailMessage] = useState('')
   const [paymentNotes, setPaymentNotes] = useState('')
+  const [userProfile, setUserProfile] = useState<{
+    firstName?: string,
+    lastName?: string,
+    email?: string,
+    phone?: string,
+    customerId?: string
+  } | null>(null)
 
   const loadInvoice = async () => {
     try {
@@ -63,6 +72,18 @@ export default function InvoiceDetailPage() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [invoiceId])
 
+  useEffect(() => {
+    const loadUserProfile = async () => {
+      try {
+        const profile = await userService.getCurrentProfile()
+        setUserProfile(profile.data)
+      } catch (err) {
+        console.error('Failed to load user profile:', err)
+      }
+    }
+    void loadUserProfile()
+  }, [])
+
   const totals = useMemo(() => {
     if (!invoice) {
       return null
@@ -154,6 +175,23 @@ export default function InvoiceDetailPage() {
     }
   }
 
+  const handlePaymentSuccess = async () => {
+    setSuccess('Payment completed successfully! Refreshing invoice...')
+    setError(null)
+    // Reload invoice to get updated payment status
+    await loadInvoice()
+  }
+
+  const handlePaymentError = (errorMessage: string) => {
+    setError(`Payment failed: ${errorMessage}`)
+    setSuccess(null)
+  }
+
+  const handlePaymentCancel = () => {
+    setError('Payment was cancelled. You can try again anytime.')
+    setSuccess(null)
+  }
+
   if (loading) {
     return (
       <div className="automotive-card p-8 text-center">
@@ -315,6 +353,29 @@ export default function InvoiceDetailPage() {
         )}
       </div>
 
+      {invoice.balanceAmount > 0 && invoice.status !== 'PAID' && invoice.status !== 'CANCELLED' && userProfile && (
+        <section className="automotive-card p-6">
+          <h2 className="text-xl font-semibold theme-text-primary mb-4">Pay Online with PayHere</h2>
+          <p className="theme-text-muted mb-6 text-sm">
+            Complete your payment securely using PayHere payment gateway. You can pay using Credit/Debit cards or digital wallets.
+          </p>
+          <PaymentGateway
+            invoiceId={invoice.invoiceId}
+            amount={invoice.balanceAmount}
+            itemDescription={`Invoice #${invoice.invoiceNumber} - ${invoice.items[0]?.description || 'Service Payment'}`}
+            customerEmail={userProfile.email || invoice.customerEmail || email}
+            customerPhone={userProfile.phone || '+94000000000'}
+            customerFirstName={userProfile.firstName || 'Customer'}
+            customerLastName={userProfile.lastName || ''}
+            customerAddress="Colombo"
+            customerCity="Colombo"
+            onSuccess={handlePaymentSuccess}
+            onError={handlePaymentError}
+            onCancel={handlePaymentCancel}
+          />
+        </section>
+      )}
+
       <section className="automotive-card p-6">
         <h2 className="text-xl font-semibold theme-text-primary mb-4">Send invoice</h2>
         <form onSubmit={handleSendInvoice} className="space-y-4">

From 60c5f148bcd1c4f16c9bfd57f16e9c7ee1f5eaa9 Mon Sep 17 00:00:00 2001
From: Mehara Rothila Ranawaka <rothilamehara22@gmail.com>
Date: Sun, 9 Nov 2025 06:17:29 +0530
Subject: [PATCH 08/38] Fix TimeLog property names in EmployeeDashboard
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Updated TimeLogResponse property references to match backend contract:
- logId → id
- workDate → date
- hoursWorked → hours

Resolves TypeScript compilation errors in production build.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/app/components/dashboards/EmployeeDashboard.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/app/components/dashboards/EmployeeDashboard.tsx b/src/app/components/dashboards/EmployeeDashboard.tsx
index aafd3ea..4013d55 100644
--- a/src/app/components/dashboards/EmployeeDashboard.tsx
+++ b/src/app/components/dashboards/EmployeeDashboard.tsx
@@ -39,8 +39,8 @@ const EmployeeDashboard: React.FC<EmployeeDashboardProps> = ({ profile }) => {
 
         setSchedule(scheduleData)
         // Ensure timeLogData is an array and filter out invalid entries
-        const validTimeLogs = Array.isArray(timeLogData) 
-          ? timeLogData.filter(log => log && log.logId)
+        const validTimeLogs = Array.isArray(timeLogData)
+          ? timeLogData.filter(log => log && log.id)
           : []
         setTimeLogs(validTimeLogs)
         setError(null)
@@ -61,13 +61,13 @@ const EmployeeDashboard: React.FC<EmployeeDashboardProps> = ({ profile }) => {
   ), [schedule])
 
   const totalHoursThisWeek = useMemo(() => (
-    timeLogs.reduce((sum, log) => sum + (Number(log.hoursWorked) || 0), 0)
+    timeLogs.reduce((sum, log) => sum + (Number(log.hours) || 0), 0)
   ), [timeLogs])
 
   const workSummaryByDay = useMemo(() => {
     const summary: Record<string, number> = {}
     timeLogs.forEach((log) => {
-      summary[log.workDate] = (summary[log.workDate] || 0) + (Number(log.hoursWorked) || 0)
+      summary[log.date] = (summary[log.date] || 0) + (Number(log.hours) || 0)
     })
     return summary
   }, [timeLogs])
@@ -201,9 +201,9 @@ 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.logId || `timelog-${index}`} className="border border-gray-200 dark:border-gray-700 rounded-lg p-3">
+                <div key={log.id || `timelog-${index}`} className="border border-gray-200 dark:border-gray-700 rounded-lg p-3">
                   <p className="theme-text-primary text-sm font-medium">
-                    {new Date(log.workDate).toLocaleDateString()} • {(Number(log.hoursWorked) || 0).toFixed(1)} hrs
+                    {new Date(log.date).toLocaleDateString()} • {(Number(log.hours) || 0).toFixed(1)} hrs
                   </p>
                   {log.description && <p className="theme-text-muted text-xs mt-1">{log.description}</p>}
                 </div>

From 96f1d8afea85cc0551b7f6f093aae98682a1b035 Mon Sep 17 00:00:00 2001
From: RandithaK <bharkula3@gmail.com>
Date: Sun, 9 Nov 2025 16:29:48 +0530
Subject: [PATCH 09/38] feat: Implement runtime configuration for API base URL
 and update apiClient to use it

---
 src/app/layout.tsx    |  3 +++
 src/config/runtime.ts | 24 ++++++++++++++++++++++++
 src/lib/apiClient.ts  |  5 +++--
 3 files changed, 30 insertions(+), 2 deletions(-)
 create mode 100644 src/config/runtime.ts

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 4c9bc7f..01cf136 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
+import Script from "next/script";
 import "./globals.css";
 import { ThemeProvider } from "./contexts/ThemeContext";
 
@@ -29,6 +30,8 @@ export default function RootLayout({
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
         suppressHydrationWarning
       >
+        {/* Runtime configuration - injected at container startup */}
+        <Script src="/runtime-config.js" strategy="beforeInteractive" />
         <ThemeProvider>
           {children}
         </ThemeProvider>
diff --git a/src/config/runtime.ts b/src/config/runtime.ts
new file mode 100644
index 0000000..520a59b
--- /dev/null
+++ b/src/config/runtime.ts
@@ -0,0 +1,24 @@
+// src/config/runtime.ts
+// Runtime configuration that can be overridden by Kubernetes
+
+declare global {
+  interface Window {
+    __RUNTIME_CONFIG__?: {
+      NEXT_PUBLIC_API_BASE_URL?: string;
+    };
+  }
+}
+
+export function getRuntimeConfig() {
+  // In browser, use runtime config if available
+  if (typeof window !== 'undefined' && window.__RUNTIME_CONFIG__) {
+    return window.__RUNTIME_CONFIG__;
+  }
+  
+  // Fallback to build-time env vars (for development)
+  return {
+    NEXT_PUBLIC_API_BASE_URL: process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:8080',
+  };
+}
+
+export const config = getRuntimeConfig();
diff --git a/src/lib/apiClient.ts b/src/lib/apiClient.ts
index 3eb1595..7110e17 100644
--- a/src/lib/apiClient.ts
+++ b/src/lib/apiClient.ts
@@ -1,8 +1,9 @@
 import axios from 'axios';
 import Cookies from 'js-cookie';
+import { config } from '@/config/runtime';
 
-// The base URL is now a constant, correctly pointing to the API Gateway.
-const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:8080/api/v1';
+// Use runtime configuration instead of build-time env vars
+const API_BASE_URL = config.NEXT_PUBLIC_API_BASE_URL;
 
 const apiClient = axios.create({
   baseURL: API_BASE_URL,

From 881056e37b0657843988f7eaf02526b6585f7349 Mon Sep 17 00:00:00 2001
From: RandithaK <bharkula3@gmail.com>
Date: Sun, 9 Nov 2025 16:29:54 +0530
Subject: [PATCH 10/38] feat: Add entrypoint script to generate runtime
 configuration and start Next.js server

---
 Dockerfile    |  8 ++++++--
 entrypoint.sh | 15 +++++++++++++++
 2 files changed, 21 insertions(+), 2 deletions(-)
 create mode 100644 entrypoint.sh

diff --git a/Dockerfile b/Dockerfile
index c4d73d8..dfca7e0 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -44,6 +44,10 @@ COPY --from=builder /app/public ./public
 COPY --from=builder /app/.next/standalone ./
 COPY --from=builder /app/.next/static ./.next/static
 
+# Copy entrypoint script
+COPY entrypoint.sh /app/entrypoint.sh
+RUN chmod +x /app/entrypoint.sh
+
 # Change ownership to nextjs user
 RUN chown -R nextjs:nodejs /app
 
@@ -57,5 +61,5 @@ EXPOSE 3000
 ENV HOSTNAME="0.0.0.0"
 ENV PORT=3000
 
-# Start the Next.js server
-CMD ["node", "server.js"]
+# Start via entrypoint script (generates runtime config)
+CMD ["/app/entrypoint.sh"]
diff --git a/entrypoint.sh b/entrypoint.sh
new file mode 100644
index 0000000..000088b
--- /dev/null
+++ b/entrypoint.sh
@@ -0,0 +1,15 @@
+#!/bin/sh
+# entrypoint.sh - Generate runtime config and start Next.js
+
+# Generate runtime configuration file
+cat > /app/public/runtime-config.js <<EOF
+window.__RUNTIME_CONFIG__ = {
+  NEXT_PUBLIC_API_BASE_URL: "${NEXT_PUBLIC_API_BASE_URL:-http://localhost:8080}"
+};
+EOF
+
+echo "Runtime configuration generated:"
+cat /app/public/runtime-config.js
+
+# Start Next.js server
+exec node server.js

From 416d4cce84a793e25a05166299e0e04e77491161 Mon Sep 17 00:00:00 2001
From: RandithaK <bharkula3@gmail.com>
Date: Sun, 9 Nov 2025 16:29:57 +0530
Subject: [PATCH 11/38] refactor: Remove hardcoded API base URL from build
 process

---
 .github/workflows/build.yaml | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/.github/workflows/build.yaml b/.github/workflows/build.yaml
index 5021fa6..886ca85 100644
--- a/.github/workflows/build.yaml
+++ b/.github/workflows/build.yaml
@@ -52,8 +52,6 @@ jobs:
         run: npm run lint
 
       - name: Build production bundle
-        env:
-          NEXT_PUBLIC_API_BASE_URL: https://api.techtorque.randitha.net
         run: npm run build
 
       - name: Run a minimal start for smoke test (background)
@@ -106,5 +104,3 @@ jobs:
           push: true
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}
-          build-args: |
-            NEXT_PUBLIC_API_BASE_URL=https://api.techtorque.randitha.net

From f2c1c3e9faccb31e80c6c53dea5f66fcd65db187 Mon Sep 17 00:00:00 2001
From: Paradoxrc <dinithminindu02@gmail.com>
Date: Sun, 9 Nov 2025 17:27:31 +0530
Subject: [PATCH 12/38] Notification UI

---
 package-lock.json                             | 145 ++++++++++++-
 package.json                                  |   5 +-
 src/app/components/NotificationBell.tsx       |  50 +----
 src/app/contexts/NotificationContext.tsx      | 202 ++++++++++++++++++
 .../appointments/[appointmentId]/page.tsx     |   5 +-
 src/app/dashboard/appointments/book/page.tsx  |   5 +-
 src/app/dashboard/layout.tsx                  |  13 +-
 src/app/globals.css                           |  15 ++
 src/services/websocketService.ts              | 134 ++++++++++++
 9 files changed, 526 insertions(+), 48 deletions(-)
 create mode 100644 src/app/contexts/NotificationContext.tsx
 create mode 100644 src/services/websocketService.ts

diff --git a/package-lock.json b/package-lock.json
index ee1fdaa..004eb4e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,11 +8,13 @@
       "name": "techtorque",
       "version": "0.1.0",
       "dependencies": {
+        "@stomp/stompjs": "^7.2.1",
         "axios": "^1.12.2",
         "js-cookie": "^3.0.5",
         "next": "^16.0.1",
         "react": "19.1.0",
-        "react-dom": "19.1.0"
+        "react-dom": "19.1.0",
+        "sockjs-client": "^1.6.1"
       },
       "devDependencies": {
         "@eslint/eslintrc": "^3",
@@ -21,6 +23,7 @@
         "@types/node": "^20",
         "@types/react": "^19",
         "@types/react-dom": "^19",
+        "@types/sockjs-client": "^1.5.4",
         "eslint": "^9",
         "eslint-config-next": "15.5.3",
         "tailwindcss": "^4",
@@ -966,6 +969,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@stomp/stompjs": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@stomp/stompjs/-/stompjs-7.2.1.tgz",
+      "integrity": "sha512-DLd/WeicnHS5SsWWSk3x6/pcivqchNaEvg9UEGVqAcfYEBVmS9D6980ckXjTtfpXLjdLDsd96M7IuX4w7nzq5g==",
+      "license": "Apache-2.0"
+    },
     "node_modules/@swc/helpers": {
       "version": "0.5.15",
       "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
@@ -1315,6 +1324,13 @@
         "@types/react": "^19.2.0"
       }
     },
+    "node_modules/@types/sockjs-client": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/@types/sockjs-client/-/sockjs-client-1.5.4.tgz",
+      "integrity": "sha512-zk+uFZeWyvJ5ZFkLIwoGA/DfJ+pYzcZ8eH4H/EILCm2OBZyHH6Hkdna1/UWL/CFruh5wj6ES7g75SvUB0VsH5w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "8.46.3",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.46.3.tgz",
@@ -3169,6 +3185,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/eventsource": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-2.0.2.tgz",
+      "integrity": "sha512-IzUmBGPR3+oUG9dUeXynyNmf91/3zUSJg1lCktzKw47OXuhco54U3r9B7O4XX+Rb1Itm9OZ2b0RkTs10bICOxA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -3230,6 +3255,18 @@
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/faye-websocket": {
+      "version": "0.11.4",
+      "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.4.tgz",
+      "integrity": "sha512-CzbClwlXAuiRQAlUyfqPgvPoNKTckTPGfwZV4ZdAhVcP2lh9KUxJg2b5GkE7XbjKQ3YJnQ9z6D9ntLAlB+tP8g==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "websocket-driver": ">=0.5.1"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/file-entry-cache": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
@@ -3624,6 +3661,12 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/http-parser-js": {
+      "version": "0.5.10",
+      "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.10.tgz",
+      "integrity": "sha512-Pysuw9XpUq5dVc/2SMHpuTY01RFl8fttgcyunjL7eEMhGM3cI4eOmiCycJDVCo/7O7ClfQD3SaI6ftDzqOXYMA==",
+      "license": "MIT"
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -3661,6 +3704,12 @@
         "node": ">=0.8.19"
       }
     },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "license": "ISC"
+    },
     "node_modules/internal-slot": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.1.0.tgz",
@@ -4631,7 +4680,6 @@
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/nanoid": {
@@ -5082,6 +5130,12 @@
         "node": ">=6"
       }
     },
+    "node_modules/querystringify": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
+      "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==",
+      "license": "MIT"
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -5175,6 +5229,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/requires-port": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
+      "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
+      "license": "MIT"
+    },
     "node_modules/resolve": {
       "version": "1.22.11",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz",
@@ -5271,6 +5331,26 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/safe-push-apply": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/safe-push-apply/-/safe-push-apply-1.0.0.tgz",
@@ -5516,6 +5596,34 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/sockjs-client": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/sockjs-client/-/sockjs-client-1.6.1.tgz",
+      "integrity": "sha512-2g0tjOR+fRs0amxENLi/q5TiJTqY+WXFOzb5UwXndlK6TO3U/mirZznpx6w34HVMoc3g7cY24yC/ZMIYnDlfkw==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^3.2.7",
+        "eventsource": "^2.0.2",
+        "faye-websocket": "^0.11.4",
+        "inherits": "^2.0.4",
+        "url-parse": "^1.5.10"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://tidelift.com/funding/github/npm/sockjs-client"
+      }
+    },
+    "node_modules/sockjs-client/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -6021,6 +6129,39 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/url-parse": {
+      "version": "1.5.10",
+      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz",
+      "integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==",
+      "license": "MIT",
+      "dependencies": {
+        "querystringify": "^2.1.1",
+        "requires-port": "^1.0.0"
+      }
+    },
+    "node_modules/websocket-driver": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.4.tgz",
+      "integrity": "sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "http-parser-js": ">=0.5.1",
+        "safe-buffer": ">=5.1.0",
+        "websocket-extensions": ">=0.1.1"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/websocket-extensions": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.4.tgz",
+      "integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
diff --git a/package.json b/package.json
index 64bf670..a3227be 100644
--- a/package.json
+++ b/package.json
@@ -9,11 +9,13 @@
     "lint": "eslint"
   },
   "dependencies": {
+    "@stomp/stompjs": "^7.2.1",
     "axios": "^1.12.2",
     "js-cookie": "^3.0.5",
     "next": "^16.0.1",
     "react": "19.1.0",
-    "react-dom": "19.1.0"
+    "react-dom": "19.1.0",
+    "sockjs-client": "^1.6.1"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",
@@ -22,6 +24,7 @@
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
+    "@types/sockjs-client": "^1.5.4",
     "eslint": "^9",
     "eslint-config-next": "15.5.3",
     "tailwindcss": "^4",
diff --git a/src/app/components/NotificationBell.tsx b/src/app/components/NotificationBell.tsx
index 8acd946..8abe3e7 100644
--- a/src/app/components/NotificationBell.tsx
+++ b/src/app/components/NotificationBell.tsx
@@ -1,21 +1,14 @@
 'use client'
 import Link from 'next/link'
 import { useEffect, useRef, useState } from 'react'
-import notificationService from '@/services/notificationService'
-import type { NotificationResponse } from '@/types/notification'
+import { useNotifications } from '@/app/contexts/NotificationContext'
 
 export default function NotificationBell() {
-  const [unreadCount, setUnreadCount] = useState<number>(0)
-  const [notifications, setNotifications] = useState<NotificationResponse[]>([])
+  const { notifications, unreadCount, loading, markAsRead, markAllAsRead, fetchNotifications, isConnected } = useNotifications()
   const [open, setOpen] = useState(false)
-  const [loading, setLoading] = useState(false)
   const [error, setError] = useState<string | null>(null)
   const panelRef = useRef<HTMLDivElement | null>(null)
 
-  useEffect(() => {
-    refreshUnreadCount()
-  }, [])
-
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
       if (panelRef.current && !panelRef.current.contains(event.target as Node)) {
@@ -32,43 +25,18 @@ export default function NotificationBell() {
     return () => document.removeEventListener('mousedown', handleClickOutside)
   }, [open])
 
-  const refreshUnreadCount = async () => {
-    try {
-      const count = await notificationService.getUnreadCount()
-      setUnreadCount(count)
-    } catch (err: unknown) {
-      console.error('Failed to load unread notifications', err)
-    }
-  }
-
-  const loadNotifications = async () => {
-    try {
-      setLoading(true)
-      const data = await notificationService.getNotifications()
-      setNotifications(data)
-      setError(null)
-    } catch (err: unknown) {
-      const message = (err as { response?: { data?: { message?: string } } }).response?.data?.message || 'Failed to load notifications'
-      setError(message)
-    } finally {
-      setLoading(false)
-    }
-  }
-
   const handleToggle = async () => {
     const nextState = !open
     setOpen(nextState)
     if (nextState) {
-      await loadNotifications()
-      await refreshUnreadCount()
+      await fetchNotifications()
     }
   }
 
   const handleMarkAsRead = async (notificationId: string) => {
     try {
-      await notificationService.markAsRead(notificationId, true)
-      await loadNotifications()
-      await refreshUnreadCount()
+      await markAsRead(notificationId)
+      setError(null)
     } catch (err: unknown) {
       const message = (err as { response?: { data?: { message?: string } } }).response?.data?.message || 'Failed to mark notification as read'
       setError(message)
@@ -77,9 +45,8 @@ export default function NotificationBell() {
 
   const handleMarkAllAsRead = async () => {
     try {
-      await notificationService.markAllAsRead()
-      await loadNotifications()
-      await refreshUnreadCount()
+      await markAllAsRead()
+      setError(null)
     } catch (err: unknown) {
       const message = (err as { response?: { data?: { message?: string } } }).response?.data?.message || 'Failed to mark notifications as read'
       setError(message)
@@ -112,6 +79,9 @@ export default function NotificationBell() {
             {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>
+        )}
       </button>
 
       {open && (
diff --git a/src/app/contexts/NotificationContext.tsx b/src/app/contexts/NotificationContext.tsx
new file mode 100644
index 0000000..7e74c19
--- /dev/null
+++ b/src/app/contexts/NotificationContext.tsx
@@ -0,0 +1,202 @@
+"use client";
+import React, { createContext, useContext, useState, useEffect, useCallback, ReactNode } from 'react';
+import websocketService from '@/services/websocketService';
+import notificationService from '@/services/notificationService';
+import type { NotificationResponse } from '@/types/notification';
+
+interface NotificationContextType {
+  notifications: NotificationResponse[];
+  unreadCount: number;
+  loading: boolean;
+  isConnected: boolean;
+  fetchNotifications: (unreadOnly?: boolean) => Promise<void>;
+  markAsRead: (notificationId: string) => Promise<void>;
+  markAllAsRead: () => Promise<void>;
+  deleteNotification: (notificationId: string) => Promise<void>;
+  showToast: (notification: NotificationResponse) => void;
+}
+
+const NotificationContext = createContext<NotificationContextType | undefined>(undefined);
+
+export const useNotifications = () => {
+  const context = useContext(NotificationContext);
+  if (!context) {
+    throw new Error('useNotifications must be used within NotificationProvider');
+  }
+  return context;
+};
+
+interface NotificationProviderProps {
+  children: ReactNode;
+  userId: string | null;
+}
+
+export const NotificationProvider: React.FC<NotificationProviderProps> = ({ children, userId }) => {
+  const [notifications, setNotifications] = useState<NotificationResponse[]>([]);
+  const [unreadCount, setUnreadCount] = useState<number>(0);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [isConnected, setIsConnected] = useState<boolean>(false);
+  const [toastNotification, setToastNotification] = useState<NotificationResponse | null>(null);
+
+  // Fetch notifications from REST API
+  const fetchNotifications = useCallback(async (unreadOnly = false) => {
+    if (!userId) return;
+
+    try {
+      setLoading(true);
+      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);
+    } finally {
+      setLoading(false);
+    }
+  }, [userId]);
+
+  // Mark as read
+  const markAsRead = useCallback(async (notificationId: string) => {
+    try {
+      await notificationService.markAsRead(notificationId, true);
+
+      // Update local state
+      setNotifications(prev =>
+        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);
+    }
+  }, []);
+
+  // Mark all as read
+  const markAllAsRead = useCallback(async () => {
+    try {
+      await notificationService.markAllAsRead();
+
+      // 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);
+    }
+  }, []);
+
+  // Delete notification
+  const deleteNotification = useCallback(async (notificationId: string) => {
+    try {
+      await notificationService.deleteNotification(notificationId);
+
+      // Update local state
+      const deletedNotification = notifications.find(n => n.notificationId === notificationId);
+      setNotifications(prev => prev.filter(n => n.notificationId !== notificationId));
+
+      if (deletedNotification && !deletedNotification.read) {
+        setUnreadCount(prev => Math.max(0, prev - 1));
+      }
+    } catch (error) {
+      console.error('Failed to delete notification:', error);
+    }
+  }, [notifications]);
+
+  // Show toast notification
+  const showToast = useCallback((notification: NotificationResponse) => {
+    setToastNotification(notification);
+
+    // Auto-hide toast after 5 seconds
+    setTimeout(() => {
+      setToastNotification(null);
+    }, 5000);
+  }, []);
+
+  // WebSocket callbacks
+  const handleNewNotification = useCallback((notification: NotificationResponse) => {
+    console.log('New notification received:', notification);
+
+    // Add to notifications list
+    setNotifications(prev => [notification, ...prev]);
+
+    // Show toast
+    showToast(notification);
+  }, [showToast]);
+
+  const handleUnreadCountUpdate = useCallback((count: number) => {
+    console.log('Unread count updated:', count);
+    setUnreadCount(count);
+  }, []);
+
+  // Initialize WebSocket connection when userId changes
+  useEffect(() => {
+    if (!userId) {
+      websocketService.disconnect();
+      setIsConnected(false);
+      return;
+    }
+
+    // Fetch initial notifications
+    fetchNotifications();
+
+    // Connect to WebSocket
+    websocketService.connect(userId, handleNewNotification, handleUnreadCountUpdate);
+    setIsConnected(true);
+
+    // Cleanup on unmount
+    return () => {
+      websocketService.disconnect();
+      setIsConnected(false);
+    };
+  }, [userId, fetchNotifications, handleNewNotification, handleUnreadCountUpdate]);
+
+  const value: NotificationContextType = {
+    notifications,
+    unreadCount,
+    loading,
+    isConnected,
+    fetchNotifications,
+    markAsRead,
+    markAllAsRead,
+    deleteNotification,
+    showToast,
+  };
+
+  return (
+    <NotificationContext.Provider value={value}>
+      {children}
+      {toastNotification && (
+        <div className="fixed top-4 right-4 z-50 animate-slide-in-right">
+          <div className={`
+            max-w-sm p-4 rounded-lg shadow-lg border
+            ${toastNotification.type === 'SUCCESS' ? 'bg-green-50 border-green-200' : ''}
+            ${toastNotification.type === 'INFO' ? 'bg-blue-50 border-blue-200' : ''}
+            ${toastNotification.type === 'WARNING' ? 'bg-yellow-50 border-yellow-200' : ''}
+            ${toastNotification.type === 'ERROR' ? 'bg-red-50 border-red-200' : ''}
+          `}>
+            <div className="flex items-start gap-3">
+              <div className="flex-1">
+                <p className="font-semibold text-sm text-gray-900">
+                  {toastNotification.message}
+                </p>
+                {toastNotification.details && (
+                  <p className="text-xs text-gray-600 mt-1">
+                    {toastNotification.details}
+                  </p>
+                )}
+              </div>
+              <button
+                onClick={() => setToastNotification(null)}
+                className="text-gray-400 hover:text-gray-600"
+              >
+                ✕
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </NotificationContext.Provider>
+  );
+};
+
+export default NotificationContext;
diff --git a/src/app/dashboard/appointments/[appointmentId]/page.tsx b/src/app/dashboard/appointments/[appointmentId]/page.tsx
index 7d07d7d..4bc0d97 100644
--- a/src/app/dashboard/appointments/[appointmentId]/page.tsx
+++ b/src/app/dashboard/appointments/[appointmentId]/page.tsx
@@ -67,9 +67,10 @@ export default function AppointmentDetailPage() {
 
     try {
       setSaving(true)
-      const requestedDateTime = new Date(`${rescheduleDate}T${rescheduleTime}`)
+      // Format as local datetime without timezone conversion (backend expects LocalDateTime)
+      const requestedDateTime = `${rescheduleDate}T${rescheduleTime}:00`
       const updated = await appointmentService.updateAppointment(appointment.id, {
-        requestedDateTime: requestedDateTime.toISOString(),
+        requestedDateTime: requestedDateTime,
         specialInstructions: notes || undefined,
       })
       setAppointment(updated)
diff --git a/src/app/dashboard/appointments/book/page.tsx b/src/app/dashboard/appointments/book/page.tsx
index a16e6c7..3e196f7 100644
--- a/src/app/dashboard/appointments/book/page.tsx
+++ b/src/app/dashboard/appointments/book/page.tsx
@@ -109,14 +109,15 @@ export default function BookAppointmentPage() {
       return
     }
 
-    const requestedDateTime = new Date(`${form.date}T${form.time}`)
+    // Format as local datetime without timezone conversion (backend expects LocalDateTime)
+    const requestedDateTime = `${form.date}T${form.time}:00`
 
     try {
       setSubmitting(true)
       await appointmentService.bookAppointment({
         vehicleId: form.vehicleId,
         serviceType: selectedServiceType?.name || '',
-        requestedDateTime: requestedDateTime.toISOString(),
+        requestedDateTime: requestedDateTime,
         specialInstructions: form.notes || undefined,
       })
       setSuccessMessage('Appointment booked successfully. Redirecting...')
diff --git a/src/app/dashboard/layout.tsx b/src/app/dashboard/layout.tsx
index 2973e57..16056a1 100644
--- a/src/app/dashboard/layout.tsx
+++ b/src/app/dashboard/layout.tsx
@@ -5,6 +5,7 @@ import { usePathname } from 'next/navigation'
 import ThemeToggle from '@/app/components/ThemeToggle'
 import NotificationBell from '@/app/components/NotificationBell'
 import { DashboardProvider, useDashboard } from '@/app/contexts/DashboardContext'
+import { NotificationProvider } from '@/app/contexts/NotificationContext'
 import { authService } from '@/services/authService'
 
 interface NavItem {
@@ -20,11 +21,21 @@ interface NavSection {
 export default function DashboardLayout({ children }: { children: ReactNode }) {
   return (
     <DashboardProvider>
-      <DashboardShell>{children}</DashboardShell>
+      <DashboardShellWithNotifications>{children}</DashboardShellWithNotifications>
     </DashboardProvider>
   )
 }
 
+function DashboardShellWithNotifications({ children }: { children: ReactNode }) {
+  const { profile } = useDashboard()
+
+  return (
+    <NotificationProvider userId={profile?.id ? String(profile.id) : null}>
+      <DashboardShell>{children}</DashboardShell>
+    </NotificationProvider>
+  )
+}
+
 function DashboardShell({ children }: { children: ReactNode }) {
   const { profile, loading, roles } = useDashboard()
   const pathname = usePathname()
diff --git a/src/app/globals.css b/src/app/globals.css
index a131fa7..37d2d45 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -206,11 +206,26 @@ body {
   }
 }
 
+@keyframes slideInRight {
+  from {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
 .animate-fadeInUp {
   animation: fadeInUp 0.7s ease-out forwards;
   opacity: 0; /* Initially hidden */
 }
 
+.animate-slide-in-right {
+  animation: slideInRight 0.4s ease-out forwards;
+}
+
 /* Staggered animation delays */
 .stagger-1 { animation-delay: 100ms; }
 .stagger-2 { animation-delay: 200ms; }
diff --git a/src/services/websocketService.ts b/src/services/websocketService.ts
new file mode 100644
index 0000000..0e7a87a
--- /dev/null
+++ b/src/services/websocketService.ts
@@ -0,0 +1,134 @@
+"use client";
+import { Client, IMessage, StompSubscription } from '@stomp/stompjs';
+import SockJS from 'sockjs-client';
+
+export type NotificationCallback = (notification: any) => void;
+export type UnreadCountCallback = (count: number) => void;
+
+class WebSocketService {
+  private client: Client | null = null;
+  private connected: boolean = false;
+  private userId: string | null = null;
+  private notificationSubscription: StompSubscription | null = null;
+  private countSubscription: StompSubscription | null = null;
+  private reconnectAttempts: number = 0;
+  private maxReconnectAttempts: number = 5;
+
+  constructor() {
+    this.client = null;
+  }
+
+  connect(userId: string, onNotification: NotificationCallback, onUnreadCount: UnreadCountCallback): void {
+    if (this.connected && this.userId === userId) {
+      console.log('WebSocket already connected for user:', userId);
+      return;
+    }
+
+    this.userId = userId;
+    const wsUrl = process.env.NEXT_PUBLIC_NOTIFICATION_WS_URL || 'http://localhost:8088/ws/notifications';
+
+    this.client = new Client({
+      webSocketFactory: () => new SockJS(wsUrl) as any,
+      debug: (str) => {
+        if (process.env.NODE_ENV === 'development') {
+          console.log('[STOMP Debug]:', str);
+        }
+      },
+      reconnectDelay: 5000,
+      heartbeatIncoming: 4000,
+      heartbeatOutgoing: 4000,
+
+      onConnect: () => {
+        console.log('WebSocket connected successfully');
+        this.connected = true;
+        this.reconnectAttempts = 0;
+
+        // Subscribe to user-specific notification queue
+        this.notificationSubscription = this.client!.subscribe(
+          `/user/${userId}/queue/notifications`,
+          (message: IMessage) => {
+            const notification = JSON.parse(message.body);
+            console.log('Received notification:', notification);
+            onNotification(notification);
+          }
+        );
+
+        // Subscribe to user-specific unread count updates
+        this.countSubscription = this.client!.subscribe(
+          `/user/${userId}/queue/notifications/count`,
+          (message: IMessage) => {
+            const count = parseInt(message.body);
+            console.log('Received unread count:', count);
+            onUnreadCount(count);
+          }
+        );
+
+        console.log('Subscribed to notifications for user:', userId);
+      },
+
+      onStompError: (frame) => {
+        console.error('STOMP error:', frame);
+        this.connected = false;
+      },
+
+      onWebSocketError: (error) => {
+        console.error('WebSocket error:', error);
+        this.connected = false;
+      },
+
+      onDisconnect: () => {
+        console.log('WebSocket disconnected');
+        this.connected = false;
+        this.handleReconnect(userId, onNotification, onUnreadCount);
+      },
+    });
+
+    this.client.activate();
+  }
+
+  private handleReconnect(userId: string, onNotification: NotificationCallback, onUnreadCount: UnreadCountCallback): void {
+    if (this.reconnectAttempts < this.maxReconnectAttempts) {
+      this.reconnectAttempts++;
+      console.log(`Attempting to reconnect (${this.reconnectAttempts}/${this.maxReconnectAttempts})...`);
+      setTimeout(() => {
+        this.connect(userId, onNotification, onUnreadCount);
+      }, 5000 * this.reconnectAttempts);
+    } else {
+      console.error('Max reconnection attempts reached. Please refresh the page.');
+    }
+  }
+
+  disconnect(): void {
+    if (this.notificationSubscription) {
+      this.notificationSubscription.unsubscribe();
+      this.notificationSubscription = null;
+    }
+
+    if (this.countSubscription) {
+      this.countSubscription.unsubscribe();
+      this.countSubscription = null;
+    }
+
+    if (this.client) {
+      this.client.deactivate();
+      this.client = null;
+    }
+
+    this.connected = false;
+    this.userId = null;
+    this.reconnectAttempts = 0;
+    console.log('WebSocket disconnected and cleaned up');
+  }
+
+  isConnected(): boolean {
+    return this.connected;
+  }
+
+  getUserId(): string | null {
+    return this.userId;
+  }
+}
+
+// Singleton instance
+const websocketService = new WebSocketService();
+export default websocketService;

From b525e6dc6e84db49c5a8a4019808c241258a6012 Mon Sep 17 00:00:00 2001
From: Mehara Rothila Ranawaka <rothilamehara22@gmail.com>
Date: Mon, 10 Nov 2025 19:48:40 +0530
Subject: [PATCH 13/38] Update appointment types with username field

---
 src/types/appointment.ts | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/types/appointment.ts b/src/types/appointment.ts
index bb39a90..704ec37 100644
--- a/src/types/appointment.ts
+++ b/src/types/appointment.ts
@@ -16,7 +16,7 @@ export interface AppointmentResponseDto {
   id: string;
   customerId: string;
   vehicleId: string;
-  assignedEmployeeId?: string;
+  assignedEmployeeIds?: string[];
   assignedBayId?: string;
   confirmationNumber: string;
   serviceType: string;
@@ -25,6 +25,8 @@ export interface AppointmentResponseDto {
   specialInstructions?: string;
   createdAt: string;
   updatedAt: string;
+  vehicleArrivedAt?: string;
+  vehicleAcceptedByEmployeeId?: string;
 }
 
 export type AppointmentStatus = 
@@ -126,3 +128,8 @@ export interface ServiceTypeResponseDto {
   createdAt: string;
   updatedAt: string;
 }
+
+// Multi-Employee Assignment Type
+export interface AssignEmployeesRequestDto {
+  employeeIds: string[];
+}

From 1c29c6a23782143d2adb4eeef40a1551ed77a33d Mon Sep 17 00:00:00 2001
From: Mehara Rothila Ranawaka <rothilamehara22@gmail.com>
Date: Mon, 10 Nov 2025 19:48:54 +0530
Subject: [PATCH 14/38] Add project status and approval types

---
 src/types/project.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/types/project.ts b/src/types/project.ts
index cd78dae..68c3277 100644
--- a/src/types/project.ts
+++ b/src/types/project.ts
@@ -60,6 +60,7 @@ export interface ProjectResponseDto {
   id: string;
   customerId: string;
   vehicleId: string;
+  appointmentId?: string;
   projectType: string;
   description: string;
   status: ProjectStatus;
@@ -79,11 +80,14 @@ export interface ProjectResponseDto {
 
 export type ProjectStatus =
   | 'REQUESTED'
+  | 'PENDING_ADMIN_REVIEW'
   | 'QUOTE_PENDING'
   | 'QUOTE_SUBMITTED'
   | 'QUOTE_APPROVED'
+  | 'APPROVED'
   | 'IN_PROGRESS'
   | 'COMPLETED'
+  | 'REJECTED'
   | 'CANCELLED';
 
 export interface QuoteDto {

From b885aff7d55f8829546db8ff0bbc50f3ceabeff8 Mon Sep 17 00:00:00 2001
From: Mehara Rothila Ranawaka <rothilamehara22@gmail.com>
Date: Mon, 10 Nov 2025 19:49:03 +0530
Subject: [PATCH 15/38] Implement part-payment types for 50-50 deposit system

---
 src/types/payment.ts | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/types/payment.ts b/src/types/payment.ts
index 46aa97a..b7440c4 100644
--- a/src/types/payment.ts
+++ b/src/types/payment.ts
@@ -83,17 +83,16 @@ export interface InvoiceItemDto {
   quantity: number;
   unitPrice: number;
   totalPrice: number;
+  itemType?: string; // LABOR, PARTS, SERVICE_FEE, etc.
 }
 
 export interface CreateInvoiceDto {
   customerId: string;
-  serviceId?: string;
-  projectId?: string;
+  serviceOrProjectId: string; // Backend expects this field name
   items: InvoiceItemDto[];
-  taxAmount?: number;
-  discountAmount?: number;
   notes?: string;
   dueDate?: string;
+  requiresDeposit?: boolean; // Enable 50-50 part-payment
 }
 
 export interface InvoiceResponseDto {
@@ -111,13 +110,21 @@ export interface InvoiceResponseDto {
   totalAmount: number;
   paidAmount: number;
   balanceAmount: number;
-  status: 'DRAFT' | 'SENT' | 'PAID' | 'OVERDUE' | 'CANCELLED';
+  status: 'DRAFT' | 'SENT' | 'PAID' | 'OVERDUE' | 'CANCELLED' | 'PARTIALLY_PAID';
   notes?: string;
   dueDate?: string;
   issuedAt: string;
   paidAt?: string;
   createdAt: string;
   updatedAt: string;
+  // Part-payment fields
+  requiresDeposit?: boolean;
+  depositAmount?: number;
+  depositPaid?: number;
+  depositPaidAt?: string;
+  finalAmount?: number;
+  finalPaid?: number;
+  finalPaidAt?: string;
 }
 
 export interface SendInvoiceDto {

From ff87b4e9a9c9846a35e7f5489fc47d9fccc8d691 Mon Sep 17 00:00:00 2001
From: Mehara Rothila Ranawaka <rothilamehara22@gmail.com>
Date: Mon, 10 Nov 2025 19:49:11 +0530
Subject: [PATCH 16/38] Update appointment service for username-based
 assignment

---
 src/services/appointmentService.ts | 29 ++++++++++++++++++++++++-----
 1 file changed, 24 insertions(+), 5 deletions(-)

diff --git a/src/services/appointmentService.ts b/src/services/appointmentService.ts
index 88ec07e..9b6c6fb 100644
--- a/src/services/appointmentService.ts
+++ b/src/services/appointmentService.ts
@@ -1,15 +1,16 @@
 "use client";
 import api from '../lib/apiClient';
-import type { 
-  AppointmentRequestDto, 
-  AppointmentResponseDto, 
+import type {
+  AppointmentRequestDto,
+  AppointmentResponseDto,
   AppointmentUpdateDto,
   StatusUpdateDto,
   AvailabilityResponseDto,
   CalendarResponseDto,
   ScheduleResponseDto,
   ServiceTypeResponseDto,
-  ServiceTypeRequestDto
+  ServiceTypeRequestDto,
+  AssignEmployeesRequestDto
 } from '../types/appointment';
 
 export const appointmentService = {
@@ -47,13 +48,31 @@ export const appointmentService = {
   },
 
   async updateStatus(
-    appointmentId: string, 
+    appointmentId: string,
     data: StatusUpdateDto
   ): Promise<AppointmentResponseDto> {
     const res = await api.patch(`/appointments/${appointmentId}/status`, data);
     return res.data;
   },
 
+  async assignEmployees(
+    appointmentId: string,
+    data: AssignEmployeesRequestDto
+  ): Promise<AppointmentResponseDto> {
+    const res = await api.post(`/appointments/${appointmentId}/assign-employees`, data);
+    return res.data;
+  },
+
+  async acceptVehicleArrival(appointmentId: string): Promise<AppointmentResponseDto> {
+    const res = await api.post(`/appointments/${appointmentId}/accept-vehicle`);
+    return res.data;
+  },
+
+  async completeWork(appointmentId: string): Promise<AppointmentResponseDto> {
+    const res = await api.post(`/appointments/${appointmentId}/complete`);
+    return res.data;
+  },
+
   // Availability & Scheduling
   async checkAvailability(params: {
     date: string; // YYYY-MM-DD

From 28fd2c160b6d6faa906517b9f405e7788e6b1c3e Mon Sep 17 00:00:00 2001
From: Mehara Rothila Ranawaka <rothilamehara22@gmail.com>
Date: Mon, 10 Nov 2025 19:49:18 +0530
Subject: [PATCH 17/38] Add project approval and rejection endpoints

---
 src/services/projectService.ts | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/src/services/projectService.ts b/src/services/projectService.ts
index 4f8a5f8..26813f3 100644
--- a/src/services/projectService.ts
+++ b/src/services/projectService.ts
@@ -106,6 +106,19 @@ export const projectService = {
     return res.data;
   },
 
+  // Admin: Approve/Reject Projects
+  async adminApproveProject(projectId: string): Promise<ApiResponse> {
+    const res = await api.post(`/projects/${projectId}/approve`);
+    return res.data;
+  },
+
+  async adminRejectProject(projectId: string, reason?: string): Promise<ApiResponse> {
+    const res = await api.post(`/projects/${projectId}/admin/reject`, null, {
+      params: { reason }
+    });
+    return res.data;
+  },
+
   // Project Photos
   async getProjectPhotos(projectId: string): Promise<string[]> {
     const res = await api.get(`/projects/${projectId}/photos`);

From d31dae70be7ecc7a81b0b242aa58d8b9c950480f Mon Sep 17 00:00:00 2001
From: Mehara Rothila Ranawaka <rothilamehara22@gmail.com>
Date: Mon, 10 Nov 2025 19:49:25 +0530
Subject: [PATCH 18/38] Enhance appointment detail page with username input

---
 .../appointments/[appointmentId]/page.tsx     | 537 +++++++++++++++++-
 1 file changed, 510 insertions(+), 27 deletions(-)

diff --git a/src/app/dashboard/appointments/[appointmentId]/page.tsx b/src/app/dashboard/appointments/[appointmentId]/page.tsx
index 4bc0d97..0e06f3d 100644
--- a/src/app/dashboard/appointments/[appointmentId]/page.tsx
+++ b/src/app/dashboard/appointments/[appointmentId]/page.tsx
@@ -2,7 +2,11 @@
 import { useEffect, useState } from 'react'
 import { useParams, useRouter } from 'next/navigation'
 import { appointmentService } from '@/services/appointmentService'
+import { adminService } from '@/services/adminService'
+import { paymentService } from '@/services/paymentService'
 import type { AppointmentResponseDto, AppointmentStatus } from '@/types/appointment'
+import type { UserResponse } from '@/types/admin'
+import type { CreateInvoiceDto, InvoiceItemDto } from '@/types/payment'
 import { useDashboard } from '@/app/contexts/DashboardContext'
 
 interface StatusOption {
@@ -23,7 +27,7 @@ export default function AppointmentDetailPage() {
   const router = useRouter()
   const params = useParams<{ appointmentId: string }>()
   const appointmentId = params.appointmentId
-  const { roles } = useDashboard()
+  const { roles, userId } = useDashboard()
 
   const [appointment, setAppointment] = useState<AppointmentResponseDto | null>(null)
   const [loading, setLoading] = useState(true)
@@ -36,12 +40,30 @@ export default function AppointmentDetailPage() {
   const [notes, setNotes] = useState('')
   const [status, setStatus] = useState<AppointmentStatus>('PENDING')
 
+  // Employee assignment state
+  const [employees, setEmployees] = useState<UserResponse[]>([])
+  const [selectedEmployeeIds, setSelectedEmployeeIds] = useState<string[]>([])
+  const [assigning, setAssigning] = useState(false)
+
+  // Employee action state
+  const [accepting, setAccepting] = useState(false)
+  const [completing, setCompleting] = useState(false)
+
+  // Invoice generation state
+  const [showInvoiceForm, setShowInvoiceForm] = useState(false)
+  const [invoiceItems, setInvoiceItems] = useState<InvoiceItemDto[]>([
+    { description: '', quantity: 1, unitPrice: 0, totalPrice: 0, itemType: 'SERVICE_FEE' }
+  ])
+  const [invoiceNotes, setInvoiceNotes] = useState('')
+  const [generatingInvoice, setGeneratingInvoice] = useState(false)
+
   useEffect(() => {
     const loadAppointment = async () => {
       try {
         setLoading(true)
         const data = await appointmentService.getAppointmentDetails(appointmentId)
         setAppointment(data)
+        setStatus(data.status) // Initialize status dropdown with current appointment status
         setError(null)
 
         const requested = new Date(data.requestedDateTime)
@@ -49,6 +71,7 @@ export default function AppointmentDetailPage() {
         setRescheduleTime(requested.toISOString().slice(11, 16))
         setNotes(data.specialInstructions ?? '')
         setStatus(data.status)
+        setSelectedEmployeeIds(data.assignedEmployeeIds || [])
       } catch (err: unknown) {
         const message = (err as { response?: { data?: { message?: string } } })?.response?.data?.message ||
           'Failed to load appointment details'
@@ -61,6 +84,22 @@ export default function AppointmentDetailPage() {
     loadAppointment()
   }, [appointmentId])
 
+  // Load employees for admin
+  useEffect(() => {
+    const loadEmployees = async () => {
+      if (!roles?.includes('ADMIN') && !roles?.includes('SUPER_ADMIN')) return
+
+      try {
+        const data = await adminService.getAllUsers({ role: 'EMPLOYEE' })
+        setEmployees(data)
+      } catch (err: unknown) {
+        console.error('Failed to load employees:', err)
+      }
+    }
+
+    loadEmployees()
+  }, [roles])
+
   const handleReschedule = async (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault()
     if (!appointment) return
@@ -122,6 +161,166 @@ export default function AppointmentDetailPage() {
     }
   }
 
+  const handleAssignEmployees = async () => {
+    if (!appointment) return
+    if (selectedEmployeeIds.length === 0) {
+      setError('Please select at least one employee')
+      return
+    }
+
+    try {
+      setAssigning(true)
+      const updated = await appointmentService.assignEmployees(appointment.id, {
+        employeeIds: selectedEmployeeIds,
+      })
+      setAppointment(updated)
+      setSelectedEmployeeIds(updated.assignedEmployeeIds || [])
+      setError(null)
+    } catch (err: unknown) {
+      const message = (err as { response?: { data?: { message?: string } } })?.response?.data?.message ||
+        'Failed to assign employees'
+      setError(message)
+    } finally {
+      setAssigning(false)
+    }
+  }
+
+  const toggleEmployeeSelection = (employeeId: string) => {
+    setSelectedEmployeeIds((prev) =>
+      prev.includes(employeeId)
+        ? prev.filter((id) => id !== employeeId)
+        : [...prev, employeeId]
+    )
+  }
+
+  const handleAcceptVehicle = async () => {
+    if (!appointment) return
+    if (!window.confirm('Confirm that the vehicle has arrived and you are ready to start work?')) {
+      return
+    }
+
+    try {
+      setAccepting(true)
+      const updated = await appointmentService.acceptVehicleArrival(appointment.id)
+      setAppointment(updated)
+      setStatus(updated.status)
+      setError(null)
+    } catch (err: unknown) {
+      const message = (err as { response?: { data?: { message?: string } } })?.response?.data?.message ||
+        'Failed to accept vehicle arrival'
+      setError(message)
+    } finally {
+      setAccepting(false)
+    }
+  }
+
+  const handleCompleteWork = async () => {
+    if (!appointment) return
+    if (!window.confirm('Mark this appointment as complete? The customer will be notified.')) {
+      return
+    }
+
+    try {
+      setCompleting(true)
+      const updated = await appointmentService.completeWork(appointment.id)
+      setAppointment(updated)
+      setStatus(updated.status)
+      setError(null)
+    } catch (err: unknown) {
+      const message = (err as { response?: { data?: { message?: string } } })?.response?.data?.message ||
+        'Failed to complete work'
+      setError(message)
+    } finally {
+      setCompleting(false)
+    }
+  }
+
+  // Invoice generation handlers
+  const handleOpenInvoiceForm = () => {
+    if (!appointment) return
+
+    // Pre-fill with service type as first line item
+    setInvoiceItems([
+      {
+        description: `${appointment.serviceType} Service`,
+        quantity: 1,
+        unitPrice: 0,
+        totalPrice: 0,
+        itemType: 'SERVICE_FEE'
+      }
+    ])
+    setShowInvoiceForm(true)
+  }
+
+  const addInvoiceItem = () => {
+    setInvoiceItems([...invoiceItems, { description: '', quantity: 1, unitPrice: 0, totalPrice: 0, itemType: 'PARTS' }])
+  }
+
+  const removeInvoiceItem = (index: number) => {
+    if (invoiceItems.length > 1) {
+      setInvoiceItems(invoiceItems.filter((_, i) => i !== index))
+    }
+  }
+
+  const updateInvoiceItem = (index: number, field: keyof InvoiceItemDto, value: string | number) => {
+    const updated = [...invoiceItems]
+    updated[index] = { ...updated[index], [field]: value }
+
+    // Auto-calculate totalPrice when quantity or unitPrice changes
+    if (field === 'quantity' || field === 'unitPrice') {
+      const qty = field === 'quantity' ? Number(value) : updated[index].quantity
+      const price = field === 'unitPrice' ? Number(value) : updated[index].unitPrice
+      updated[index].totalPrice = qty * price
+    }
+
+    setInvoiceItems(updated)
+  }
+
+  const calculateInvoiceTotal = () => {
+    return invoiceItems.reduce((sum, item) => sum + (item.totalPrice || 0), 0)
+  }
+
+  const handleGenerateInvoice = async () => {
+    if (!appointment) return
+
+    // Validation
+    const hasEmptyItems = invoiceItems.some(item => !item.description.trim() || item.unitPrice <= 0)
+    if (hasEmptyItems) {
+      setError('Please fill in all invoice items with valid descriptions and prices')
+      return
+    }
+
+    if (!window.confirm(`Generate invoice for ${appointment.confirmationNumber}? Total: LKR ${calculateInvoiceTotal().toFixed(2)}`)) {
+      return
+    }
+
+    try {
+      setGeneratingInvoice(true)
+
+      const invoiceData: CreateInvoiceDto = {
+        customerId: appointment.customerId,
+        serviceOrProjectId: appointment.id,
+        items: invoiceItems,
+        notes: invoiceNotes || `Invoice for ${appointment.serviceType} service - ${appointment.confirmationNumber}`,
+      }
+
+      const createdInvoice = await paymentService.createInvoice(invoiceData)
+
+      alert('Invoice generated successfully!')
+      setShowInvoiceForm(false)
+      setError(null)
+
+      // Optionally navigate to the invoice
+      router.push(`/dashboard/invoices/${createdInvoice.invoiceId}`)
+    } catch (err: unknown) {
+      const message = (err as { response?: { data?: { message?: string } } })?.response?.data?.message ||
+        'Failed to generate invoice'
+      setError(message)
+    } finally {
+      setGeneratingInvoice(false)
+    }
+  }
+
   if (loading) {
     return (
       <div className="automotive-card p-8 text-center">
@@ -189,6 +388,29 @@ export default function AppointmentDetailPage() {
               <p className="theme-text-muted">Vehicle</p>
               <p className="theme-text-primary font-medium">{appointment.vehicleId}</p>
             </div>
+            <div>
+              <p className="theme-text-muted">Assigned Employees</p>
+              {appointment.assignedEmployeeIds && appointment.assignedEmployeeIds.length > 0 ? (
+                <div className="theme-text-primary font-medium">
+                  {employees.length > 0 ? (
+                    <ul className="list-disc list-inside space-y-1">
+                      {appointment.assignedEmployeeIds.map((empId) => {
+                        const emp = employees.find((e) => e.username === empId)
+                        return (
+                          <li key={empId}>
+                            {emp ? (emp.fullName || emp.email) : `@${empId}`}
+                          </li>
+                        )
+                      })}
+                    </ul>
+                  ) : (
+                    <p>{appointment.assignedEmployeeIds.length} employee(s)</p>
+                  )}
+                </div>
+              ) : (
+                <p className="theme-text-primary font-medium">Not assigned</p>
+              )}
+            </div>
             <div>
               <p className="theme-text-muted">Created</p>
               <p className="theme-text-primary">{new Date(appointment.createdAt).toLocaleString()}</p>
@@ -256,33 +478,294 @@ export default function AppointmentDetailPage() {
           </section>
         )}
 
-        <section className="automotive-card p-6">
-          <h2 className="text-xl font-semibold theme-text-primary mb-4">Update status</h2>
-          <div className="flex flex-col md:flex-row md:items-end gap-4">
-            <label className="block w-full md:w-auto md:flex-1">
-              <span className="block text-sm font-medium theme-text-primary mb-1">Status</span>
-              <select
-                value={status}
-                onChange={(event) => setStatus(event.target.value as AppointmentStatus)}
-                className="w-full rounded-lg border border-gray-300 dark:border-gray-700 theme-bg-primary theme-text-primary px-3 py-2"
+        {(roles?.includes('ADMIN') || roles?.includes('SUPER_ADMIN')) && (
+          <section className="automotive-card p-6">
+            <h2 className="text-xl font-semibold theme-text-primary mb-4">Assign Employees</h2>
+            <p className="theme-text-muted text-sm mb-4">
+              Select one or more employees to assign to this appointment. Employees will receive notifications.
+            </p>
+            <div className="space-y-2 mb-4 max-h-64 overflow-y-auto border border-gray-200 dark:border-gray-700 rounded-lg p-3">
+              {employees.length === 0 ? (
+                <p className="theme-text-muted text-sm">No employees available</p>
+              ) : (
+                employees.map((employee) => (
+                  <label
+                    key={employee.userId}
+                    className="flex items-center space-x-3 p-2 hover:bg-gray-50 dark:hover:bg-gray-800 rounded cursor-pointer"
+                  >
+                    <input
+                      type="checkbox"
+                      checked={selectedEmployeeIds.includes(employee.username)}
+                      onChange={() => toggleEmployeeSelection(employee.username)}
+                      className="w-4 h-4 text-blue-600 rounded focus:ring-blue-500"
+                    />
+                    <div className="flex-1">
+                      <p className="theme-text-primary font-medium">{employee.fullName || employee.email}</p>
+                      <p className="theme-text-muted text-xs">@{employee.username}</p>
+                    </div>
+                  </label>
+                ))
+              )}
+            </div>
+            <div className="flex items-center justify-between">
+              <p className="theme-text-muted text-sm">
+                {selectedEmployeeIds.length} employee(s) selected
+              </p>
+              <button
+                type="button"
+                className="theme-button-primary"
+                onClick={handleAssignEmployees}
+                disabled={assigning || selectedEmployeeIds.length === 0}
               >
-                {STATUS_OPTIONS.map((option) => (
-                  <option key={option.value} value={option.value}>
-                    {option.label}
-                  </option>
-                ))}
-              </select>
-            </label>
-            <button
-              type="button"
-              className="theme-button-secondary md:w-auto"
-              onClick={handleStatusUpdate}
-              disabled={statusUpdating}
-            >
-              {statusUpdating ? 'Updating...' : 'Update status'}
-            </button>
-          </div>
-        </section>
+                {assigning ? 'Assigning...' : 'Assign Employees'}
+              </button>
+            </div>
+          </section>
+        )}
+
+        {/* Employee Actions */}
+        {roles?.includes('EMPLOYEE') && appointment && userId && appointment.assignedEmployeeIds?.includes(userId) && (
+          <section className="automotive-card p-6 border-2 border-blue-200 dark:border-blue-800">
+            <h2 className="text-xl font-semibold theme-text-primary mb-4">Employee Actions</h2>
+
+            {appointment.vehicleArrivedAt && (
+              <div className="mb-4 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
+                <p className="text-sm theme-text-muted">
+                  Vehicle arrived: {new Date(appointment.vehicleArrivedAt).toLocaleString()}
+                </p>
+              </div>
+            )}
+
+            <div className="flex gap-3">
+              {appointment.status === 'CONFIRMED' && !appointment.vehicleArrivedAt && (
+                <button
+                  type="button"
+                  onClick={handleAcceptVehicle}
+                  disabled={accepting}
+                  className="px-6 py-2.5 bg-green-600 hover:bg-green-700 text-white rounded-lg font-medium transition-colors disabled:opacity-50"
+                >
+                  {accepting ? 'Processing...' : '✓ Accept Vehicle Arrival'}
+                </button>
+              )}
+
+              {appointment.status === 'IN_PROGRESS' && (
+                <button
+                  type="button"
+                  onClick={handleCompleteWork}
+                  disabled={completing}
+                  className="px-6 py-2.5 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium transition-colors disabled:opacity-50"
+                >
+                  {completing ? 'Processing...' : '✓ Mark as Complete'}
+                </button>
+              )}
+
+              {appointment.status === 'COMPLETED' && (
+                <div className="p-3 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg">
+                  <p className="text-green-700 dark:text-green-300 font-medium">
+                    ✓ Work completed successfully
+                  </p>
+                </div>
+              )}
+            </div>
+
+            {appointment.status !== 'CONFIRMED' && appointment.status !== 'IN_PROGRESS' && appointment.status !== 'COMPLETED' && (
+              <p className="theme-text-muted text-sm">
+                No actions available for current status: {appointment.status}
+              </p>
+            )}
+          </section>
+        )}
+
+        {/* Invoice Generation - Admin Only */}
+        {(roles?.includes('ADMIN') || roles?.includes('SUPER_ADMIN')) && appointment && (
+          <section className="automotive-card p-6 border-2 border-green-200 dark:border-green-800">
+            <h2 className="text-xl font-semibold theme-text-primary mb-4">Invoice / Quotation</h2>
+
+            {!showInvoiceForm ? (
+              <div>
+                <p className="theme-text-muted mb-4">
+                  Generate an invoice or quotation for this appointment
+                </p>
+                <button
+                  type="button"
+                  onClick={handleOpenInvoiceForm}
+                  className="automotive-button"
+                  disabled={appointment.status === 'CANCELLED'}
+                >
+                  📄 Generate Invoice
+                </button>
+              </div>
+            ) : (
+              <div className="space-y-4">
+                <div className="flex justify-between items-center mb-4">
+                  <h3 className="text-lg font-semibold theme-text-primary">Create Invoice</h3>
+                  <button
+                    type="button"
+                    onClick={() => setShowInvoiceForm(false)}
+                    className="text-red-600 dark:text-red-400 hover:underline"
+                  >
+                    Cancel
+                  </button>
+                </div>
+
+                {/* Invoice Items */}
+                <div className="space-y-3">
+                  <div className="flex justify-between items-center">
+                    <label className="block text-sm font-medium theme-text-primary">Line Items</label>
+                    <button
+                      type="button"
+                      onClick={addInvoiceItem}
+                      className="text-sm text-blue-600 dark:text-blue-400 hover:underline"
+                    >
+                      + Add Item
+                    </button>
+                  </div>
+
+                  {invoiceItems.map((item, index) => (
+                    <div key={index} className="p-4 border border-gray-300 dark:border-gray-700 rounded-lg space-y-3">
+                      <div className="flex justify-between items-start">
+                        <span className="text-sm font-medium theme-text-primary">Item {index + 1}</span>
+                        {invoiceItems.length > 1 && (
+                          <button
+                            type="button"
+                            onClick={() => removeInvoiceItem(index)}
+                            className="text-red-600 dark:text-red-400 text-sm hover:underline"
+                          >
+                            Remove
+                          </button>
+                        )}
+                      </div>
+
+                      <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                        <div className="md:col-span-2">
+                          <label className="block text-sm font-medium theme-text-primary mb-1">
+                            Description
+                          </label>
+                          <input
+                            type="text"
+                            value={item.description}
+                            onChange={(e) => updateInvoiceItem(index, 'description', e.target.value)}
+                            placeholder="e.g., Labor - Oil Change, Oil Filter, Engine Oil 5W-30"
+                            className="w-full rounded-lg border border-gray-300 dark:border-gray-700 theme-bg-primary theme-text-primary px-3 py-2"
+                          />
+                        </div>
+
+                        <div>
+                          <label className="block text-sm font-medium theme-text-primary mb-1">
+                            Quantity
+                          </label>
+                          <input
+                            type="number"
+                            min="1"
+                            value={item.quantity}
+                            onChange={(e) => updateInvoiceItem(index, 'quantity', Number(e.target.value))}
+                            className="w-full rounded-lg border border-gray-300 dark:border-gray-700 theme-bg-primary theme-text-primary px-3 py-2"
+                          />
+                        </div>
+
+                        <div>
+                          <label className="block text-sm font-medium theme-text-primary mb-1">
+                            Unit Price (LKR)
+                          </label>
+                          <input
+                            type="number"
+                            min="0"
+                            step="0.01"
+                            value={item.unitPrice}
+                            onChange={(e) => updateInvoiceItem(index, 'unitPrice', Number(e.target.value))}
+                            className="w-full rounded-lg border border-gray-300 dark:border-gray-700 theme-bg-primary theme-text-primary px-3 py-2"
+                          />
+                        </div>
+
+                        <div className="md:col-span-2">
+                          <div className="text-right">
+                            <span className="text-sm font-medium theme-text-muted">Total: </span>
+                            <span className="text-lg font-bold theme-text-primary">
+                              LKR {item.totalPrice.toFixed(2)}
+                            </span>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+
+                {/* Notes */}
+                <div>
+                  <label className="block text-sm font-medium theme-text-primary mb-1">
+                    Notes (Optional)
+                  </label>
+                  <textarea
+                    value={invoiceNotes}
+                    onChange={(e) => setInvoiceNotes(e.target.value)}
+                    placeholder="Additional notes for the invoice..."
+                    rows={3}
+                    className="w-full rounded-lg border border-gray-300 dark:border-gray-700 theme-bg-primary theme-text-primary px-3 py-2"
+                  />
+                </div>
+
+                {/* Total Summary */}
+                <div className="bg-gray-50 dark:bg-gray-900/40 p-4 rounded-lg">
+                  <div className="flex justify-between items-center">
+                    <span className="text-lg font-semibold theme-text-primary">Grand Total:</span>
+                    <span className="text-2xl font-bold text-green-600 dark:text-green-400">
+                      LKR {calculateInvoiceTotal().toFixed(2)}
+                    </span>
+                  </div>
+                </div>
+
+                {/* Action Buttons */}
+                <div className="flex gap-3">
+                  <button
+                    type="button"
+                    onClick={handleGenerateInvoice}
+                    disabled={generatingInvoice}
+                    className="automotive-button flex-1"
+                  >
+                    {generatingInvoice ? 'Generating...' : '✓ Generate Invoice'}
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => setShowInvoiceForm(false)}
+                    className="automotive-button-secondary flex-1"
+                  >
+                    Cancel
+                  </button>
+                </div>
+              </div>
+            )}
+          </section>
+        )}
+
+        {(roles?.includes('ADMIN') || roles?.includes('SUPER_ADMIN') || roles?.includes('EMPLOYEE')) && (
+          <section className="automotive-card p-6">
+            <h2 className="text-xl font-semibold theme-text-primary mb-4">Update status</h2>
+            <div className="flex flex-col md:flex-row md:items-end gap-4">
+              <label className="block w-full md:w-auto md:flex-1">
+                <span className="block text-sm font-medium theme-text-primary mb-1">Status</span>
+                <select
+                  value={status}
+                  onChange={(event) => setStatus(event.target.value as AppointmentStatus)}
+                  className="w-full rounded-lg border border-gray-300 dark:border-gray-700 theme-bg-primary theme-text-primary px-3 py-2"
+                >
+                  {STATUS_OPTIONS.map((option) => (
+                    <option key={option.value} value={option.value}>
+                      {option.label}
+                    </option>
+                  ))}
+                </select>
+              </label>
+              <button
+                type="button"
+                className="theme-button-secondary md:w-auto"
+                onClick={handleStatusUpdate}
+                disabled={statusUpdating}
+              >
+                {statusUpdating ? 'Updating...' : 'Update status'}
+              </button>
+            </div>
+          </section>
+        )}
 
         {roles?.includes('CUSTOMER') && (
           <section className="automotive-card p-6 border border-red-200 dark:border-red-800">

From 7b91ab5444c78464e619ecb07c320cec34d9ed0f Mon Sep 17 00:00:00 2001
From: Mehara Rothila Ranawaka <rothilamehara22@gmail.com>
Date: Mon, 10 Nov 2025 19:49:35 +0530
Subject: [PATCH 19/38] Add approval/rejection UI to project detail page

---
 .../dashboard/projects/[projectId]/page.tsx   | 84 ++++++++++++++++++-
 1 file changed, 83 insertions(+), 1 deletion(-)

diff --git a/src/app/dashboard/projects/[projectId]/page.tsx b/src/app/dashboard/projects/[projectId]/page.tsx
index be9289e..7420a08 100644
--- a/src/app/dashboard/projects/[projectId]/page.tsx
+++ b/src/app/dashboard/projects/[projectId]/page.tsx
@@ -9,13 +9,14 @@ import { useDashboard } from '@/app/contexts/DashboardContext';
 export default function ProjectDetailPage() {
   const params = useParams();
   const router = useRouter();
-  const { profile } = useDashboard();
+  const { profile, roles } = useDashboard();
   const projectId = params.projectId as string;
 
   const [project, setProject] = useState<ProjectResponseDto | null>(null);
   const [loading, setLoading] = useState(true);
   const [actionLoading, setActionLoading] = useState(false);
   const [error, setError] = useState('');
+  const [rejectionReason, setRejectionReason] = useState('');
 
   const loadProject = async () => {
     try {
@@ -65,6 +66,43 @@ export default function ProjectDetailPage() {
     }
   };
 
+  const handleAdminApprove = async () => {
+    if (!project || !confirm('Are you sure you want to approve this project? The linked appointment will be confirmed.')) return;
+
+    try {
+      setActionLoading(true);
+      await projectService.adminApproveProject(projectId);
+      await loadProject();
+      alert('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');
+    } finally {
+      setActionLoading(false);
+    }
+  };
+
+  const handleAdminReject = async () => {
+    if (!project) return;
+
+    const reason = window.prompt('Please provide a reason for rejection (optional):');
+    if (reason === null) return; // User cancelled
+
+    if (!confirm('Are you sure you want to reject this project? The linked appointment will be cancelled.')) return;
+
+    try {
+      setActionLoading(true);
+      await projectService.adminRejectProject(projectId, reason || undefined);
+      await loadProject();
+      alert('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');
+    } finally {
+      setActionLoading(false);
+    }
+  };
+
   const formatDate = (dateString: string) => {
     return new Date(dateString).toLocaleDateString('en-US', {
       year: 'numeric',
@@ -79,11 +117,14 @@ export default function ProjectDetailPage() {
 
   const statusStyles: Record<ProjectStatus, string> = {
     REQUESTED: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400',
+    PENDING_ADMIN_REVIEW: 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400',
     QUOTE_PENDING: 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400',
     QUOTE_SUBMITTED: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400',
     QUOTE_APPROVED: 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400',
+    APPROVED: 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400',
     IN_PROGRESS: 'bg-indigo-100 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-400',
     COMPLETED: 'bg-teal-100 text-teal-700 dark:bg-teal-900/30 dark:text-teal-400',
+    REJECTED: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400',
     CANCELLED: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400',
   };
 
@@ -117,7 +158,9 @@ export default function ProjectDetailPage() {
   }
 
   const isCustomer = profile?.roles?.includes('CUSTOMER');
+  const isAdmin = roles?.includes('ADMIN') || roles?.includes('SUPER_ADMIN');
   const canApproveQuote = isCustomer && project.status === 'QUOTE_SUBMITTED';
+  const canAdminApprove = isAdmin && (project.status === 'REQUESTED' || project.status === 'PENDING_ADMIN_REVIEW');
 
   return (
     <div className="max-w-5xl mx-auto p-6">
@@ -137,6 +180,9 @@ export default function ProjectDetailPage() {
           <div>
             <h1 className="text-3xl font-bold theme-text-primary mb-2">{project.projectType}</h1>
             <p className="theme-text-muted">Project ID: {project.id}</p>
+            {project.appointmentId && (
+              <p className="theme-text-muted text-sm">Linked to appointment: {project.appointmentId}</p>
+            )}
           </div>
           <span className={`inline-flex items-center px-4 py-2 rounded-full text-sm font-semibold ${statusStyles[project.status]}`}>
             {project.status.replace('_', ' ')}
@@ -144,6 +190,42 @@ export default function ProjectDetailPage() {
         </div>
       </div>
 
+      {/* Admin Approval Actions */}
+      {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">
+              <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>
+            </div>
+            <div className="flex-1">
+              <h3 className="text-lg font-semibold theme-text-primary mb-1">Admin Review Required</h3>
+              <p className="theme-text-secondary text-sm mb-4">
+                This custom project is awaiting admin approval. Review the details below and approve or reject the project.
+                {project.appointmentId && ' The linked appointment will be automatically confirmed or cancelled based on your decision.'}
+              </p>
+              <div className="flex gap-3">
+                <button
+                  onClick={handleAdminApprove}
+                  disabled={actionLoading}
+                  className="px-6 py-2.5 bg-green-600 hover:bg-green-700 disabled:bg-green-400 text-white rounded-lg font-semibold transition-colors disabled:cursor-not-allowed"
+                >
+                  {actionLoading ? 'Processing...' : 'Approve Project'}
+                </button>
+                <button
+                  onClick={handleAdminReject}
+                  disabled={actionLoading}
+                  className="px-6 py-2.5 border border-red-600 text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg font-semibold transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                >
+                  Reject Project
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
       {/* Quote Actions (for customers) */}
       {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">

From 1b7f35e3bbd4b3b2ccdff6df2124de79e0477f27 Mon Sep 17 00:00:00 2001
From: Mehara Rothila Ranawaka <rothilamehara22@gmail.com>
Date: Mon, 10 Nov 2025 19:49:42 +0530
Subject: [PATCH 20/38] Improve user management interface

---
 src/app/dashboard/admin/users/page.tsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/app/dashboard/admin/users/page.tsx b/src/app/dashboard/admin/users/page.tsx
index 3757492..eea2242 100644
--- a/src/app/dashboard/admin/users/page.tsx
+++ b/src/app/dashboard/admin/users/page.tsx
@@ -165,8 +165,9 @@ export default function AdminUsersPage() {
           <h1 className="text-3xl font-bold theme-text-primary mb-2">User Management</h1>
           <p className="theme-text-muted">Manage system users and their roles</p>
         </div>
-        {isSuperAdmin && (
-          <div className="flex gap-2">
+        <div className="flex gap-2">
+          {/* Regular ADMIN can create employees */}
+          {isAdmin && (
             <button
               onClick={() => {
                 setCreateUserType('employee');
@@ -176,6 +177,9 @@ export default function AdminUsersPage() {
             >
               + Add Employee
             </button>
+          )}
+          {/* Only SUPER_ADMIN can create other admins */}
+          {isSuperAdmin && (
             <button
               onClick={() => {
                 setCreateUserType('admin');
@@ -185,8 +189,8 @@ export default function AdminUsersPage() {
             >
               + Add Admin
             </button>
-          </div>
-        )}
+          )}
+        </div>
       </div>
 
       {/* Stats */}

From 6845b69cf0d8da74d9c72e4af62f86f233f1a338 Mon Sep 17 00:00:00 2001
From: Mehara Rothila Ranawaka <rothilamehara22@gmail.com>
Date: Mon, 10 Nov 2025 19:49:49 +0530
Subject: [PATCH 21/38] Optimize component rendering performance


From db3063a43a9af7dd587aac3a8a08e42ac6d63b3d Mon Sep 17 00:00:00 2001
From: RandithaK <bharkula3@gmail.com>
Date: Tue, 11 Nov 2025 00:56:21 +0530
Subject: [PATCH 22/38] Add peer dependency flag to multiple packages in
 package-lock.json

---
 package-lock.json | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index 004eb4e..b09b2b8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1310,6 +1310,7 @@
       "integrity": "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "csstype": "^3.0.2"
       }
@@ -1377,6 +1378,7 @@
       "integrity": "sha512-6m1I5RmHBGTnUGS113G04DMu3CpSdxCAU/UvtjNWL4Nuf3MW9tQhiJqRlHzChIkhy6kZSAQmc+I1bcGjE3yNKg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.46.3",
         "@typescript-eslint/types": "8.46.3",
@@ -1894,6 +1896,7 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -2766,6 +2769,7 @@
       "integrity": "sha512-BhHmn2yNOFA9H9JmmIVKJmd288g9hrVRDkdoIgRCRuSySRUHH7r/DI6aAXW9T1WwUuY3DFgrcaqB+deURBLR5g==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -2939,6 +2943,7 @@
       "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@rtsao/scc": "^1.1.0",
         "array-includes": "^3.1.9",
@@ -5162,6 +5167,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz",
       "integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -5171,6 +5177,7 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz",
       "integrity": "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "scheduler": "^0.26.0"
       },
@@ -5901,6 +5908,7 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -6050,6 +6058,7 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"

From e436d19d6c95418d2b9455091f4b70345ecc6ea3 Mon Sep 17 00:00:00 2001
From: RandithaK <bharkula3@gmail.com>
Date: Tue, 11 Nov 2025 02:28:05 +0530
Subject: [PATCH 23/38] Refactor registration request to use 'fullName' instead
 of 'username' and update related types

---
 src/app/auth/register/page.tsx                |  2 +-
 .../dashboards/CustomerDashboard.tsx          | 36 +++++++++++++++++++
 src/types/api.ts                              |  4 ++-
 3 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/src/app/auth/register/page.tsx b/src/app/auth/register/page.tsx
index fb2d056..1d24f49 100644
--- a/src/app/auth/register/page.tsx
+++ b/src/app/auth/register/page.tsx
@@ -31,7 +31,7 @@ export default function RegisterPage() {
     const form = e.currentTarget;
     const formData = new FormData(form);
     const payload: RegisterRequest = {
-      username: (formData.get('name') as string) || '',
+      fullName: (formData.get('name') as string) || '',
       email: (formData.get('email') as string) || '',
       password: (formData.get('password') as string) || '',
     };
diff --git a/src/app/components/dashboards/CustomerDashboard.tsx b/src/app/components/dashboards/CustomerDashboard.tsx
index 0930f5a..fab65b5 100644
--- a/src/app/components/dashboards/CustomerDashboard.tsx
+++ b/src/app/components/dashboards/CustomerDashboard.tsx
@@ -8,6 +8,7 @@ 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;
@@ -19,6 +20,7 @@ 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 () => {
@@ -218,6 +220,40 @@ const CustomerDashboard: React.FC<CustomerDashboardProps> = ({ profile }) => {
           </Link>
         </div>
       </div>
+
+      {/* 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-96 h-[32rem] 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>
+              <button
+                onClick={() => setChatOpen(false)}
+                className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 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="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"
+            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>
   );
 };
diff --git a/src/types/api.ts b/src/types/api.ts
index 725ca08..2ba94d7 100644
--- a/src/types/api.ts
+++ b/src/types/api.ts
@@ -7,9 +7,11 @@ export interface LoginRequest {
 }
 
 export interface RegisterRequest {
-  username: string;
+  fullName: string;
   email: string;
   password: string;
+  phone?: string;
+  address?: string;
   roles?: string[];
 }
 

From 0d1b538669c37d6711e56def260c8a47be11d0ba Mon Sep 17 00:00:00 2001
From: RandithaK <bharkula3@gmail.com>
Date: Tue, 11 Nov 2025 12:05:41 +0530
Subject: [PATCH 24/38] chore: commit all changes (automated)

---
 src/app/auth/login/page.tsx               |  30 +++-
 src/app/auth/register/page.tsx            |  40 +++--
 src/app/auth/resend-verification/page.tsx | 170 ++++++++++++++++++++++
 3 files changed, 220 insertions(+), 20 deletions(-)
 create mode 100644 src/app/auth/resend-verification/page.tsx

diff --git a/src/app/auth/login/page.tsx b/src/app/auth/login/page.tsx
index 6264900..ffc6ba1 100644
--- a/src/app/auth/login/page.tsx
+++ b/src/app/auth/login/page.tsx
@@ -25,16 +25,19 @@ export default function LoginPage() {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [warning, setWarning] = useState<string | null>(null);
+  const [unverifiedEmail, setUnverifiedEmail] = useState<string | null>(null);
 
     const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     setError(null);
     setWarning(null);
+    setUnverifiedEmail(null);
     setLoading(true);
     const form = e.currentTarget;
     const formData = new FormData(form);
+    const email = (formData.get('username') as string) || '';
     const payload: LoginRequest = {
-      username: (formData.get('username') as string) || '',
+      username: email,
       password: (formData.get('password') as string) || '',
     };
     try {
@@ -51,7 +54,14 @@ export default function LoginPage() {
       }
     } catch (err: unknown) {
       const errorMessage = err instanceof Error ? err.message : 'Login failed';
-      setError(errorMessage);
+      
+      // Check if error is about email verification
+      if (errorMessage.includes('verify your email') || errorMessage.includes('email address')) {
+        setUnverifiedEmail(email);
+        setError(errorMessage);
+      } else {
+        setError(errorMessage);
+      }
     } finally {
       setLoading(false);
     }
@@ -149,13 +159,21 @@ export default function LoginPage() {
                     </div>
                 </form>
                 {error && (
-                  <div role="alert" className="mt-4 text-sm text-red-600">
-                    {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>
+                    {unverifiedEmail && (
+                      <Link 
+                        href={`/auth/resend-verification?email=${encodeURIComponent(unverifiedEmail)}`}
+                        className="text-sm text-blue-600 dark:text-blue-400 hover:underline font-semibold"
+                      >
+                        Resend Verification Email →
+                      </Link>
+                    )}
                   </div>
                 )}
                 {warning && (
-                  <div role="alert" className="mt-4 text-sm text-yellow-600">
-                    {warning}
+                  <div role="alert" className="mt-4 p-4 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg">
+                    <p className="text-sm text-yellow-600 dark:text-yellow-400">{warning}</p>
                   </div>
                 )}
              </div>
diff --git a/src/app/auth/register/page.tsx b/src/app/auth/register/page.tsx
index 05d4d20..1dafed5 100644
--- a/src/app/auth/register/page.tsx
+++ b/src/app/auth/register/page.tsx
@@ -2,7 +2,6 @@
 
 import React from "react";
 import Link from "next/link";
-import { useRouter } from "next/navigation";
 import { useState } from "react";
 import authService from "../../../services/authService";
 import ThemeToggle from "../../components/ThemeToggle";
@@ -70,8 +69,6 @@ const EyeOffIcon = () => (
 
 // --- Register Page Component ---
 export default function RegisterPage() {
-  const router = useRouter();
-
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [success, setSuccess] = useState(false);
@@ -118,10 +115,7 @@ export default function RegisterPage() {
     try {
       await authService.register(payload);
       setSuccess(true);
-      // Redirect to login after 3 seconds
-      setTimeout(() => {
-        router.push("/auth/login");
-      }, 3000);
+      // Don't automatically redirect - let user see the success message
     } catch (err: unknown) {
       const errorMessage =
         err instanceof Error ? err.message : "Registration failed";
@@ -186,13 +180,31 @@ export default function RegisterPage() {
                 <p className="text-base theme-text-secondary mb-2">
                   Welcome to TechTorque Auto, {formData.fullName}!
                 </p>
-                <p className="text-sm theme-text-muted">
-                  A verification email has been sent to {formData.email}. Please
-                  verify your email to log in.
-                </p>
-                <p className="mt-6 text-sm theme-text-muted animate-pulse">
-                  Redirecting to login...
-                </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">
+                    📧 Verify Your Email
+                  </p>
+                  <p className="text-sm theme-text-muted mb-3">
+                    A verification email has been sent to <strong>{formData.email}</strong>.
+                    <br />
+                    <strong>You must verify your email before you can log in.</strong>
+                  </p>
+                  <p className="text-xs theme-text-muted">
+                    Didn&apos;t receive the email?{' '}
+                    <Link
+                      href={`/auth/resend-verification?email=${encodeURIComponent(formData.email)}`}
+                      className="text-blue-600 dark:text-blue-400 hover:underline font-semibold"
+                    >
+                      Resend verification email
+                    </Link>
+                  </p>
+                </div>
+                <Link
+                  href="/auth/login"
+                  className="theme-button-primary inline-block px-8 py-3"
+                >
+                  Go to Login
+                </Link>
               </div>
             ) : (
               <>
diff --git a/src/app/auth/resend-verification/page.tsx b/src/app/auth/resend-verification/page.tsx
new file mode 100644
index 0000000..6080439
--- /dev/null
+++ b/src/app/auth/resend-verification/page.tsx
@@ -0,0 +1,170 @@
+'use client'
+
+import React, { useEffect, useState } from 'react';
+import Link from 'next/link';
+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} />;
+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>;
+
+export default function ResendVerificationPage() {
+  const searchParams = useSearchParams();
+  const emailParam = searchParams.get('email');
+
+  const [loading, setLoading] = useState(false);
+  const [success, setSuccess] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [email, setEmail] = useState(emailParam || '');
+
+  useEffect(() => {
+    if (emailParam) {
+      setEmail(emailParam);
+    }
+  }, [emailParam]);
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setError(null);
+    setSuccess(false);
+    setLoading(true);
+
+    try {
+      await authService.resendVerificationEmail(email);
+      setSuccess(true);
+    } catch (err: unknown) {
+      const errorMessage = err instanceof Error ? err.message : 'Failed to resend verification email';
+      setError(errorMessage);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen theme-bg-primary font-sans">
+      {/* Header */}
+      <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>
+            <div className="flex items-center space-x-4">
+              <Link href="/auth/login" className="theme-button-secondary">
+                Back to Login
+              </Link>
+              <ThemeToggle />
+            </div>
+          </div>
+        </div>
+      </header>
+
+      {/* Main Content */}
+      <main className="flex items-center justify-center py-20 px-4 sm:px-6 lg:px-8 automotive-hero">
+        <div className="absolute inset-0 bg-grid-pattern opacity-20 dark:opacity-10"></div>
+        <div className="w-full max-w-lg relative z-10">
+          <div className="automotive-card p-8 md:p-12">
+            <div className="text-center mb-10">
+              <h2 className="text-4xl font-black theme-text-primary">
+                Resend Verification Email
+              </h2>
+              <p className="mt-4 text-lg theme-text-muted">
+                Enter your email address to receive a new verification link.
+              </p>
+            </div>
+
+            {success ? (
+              <div className="text-center">
+                <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-green-100 dark:bg-green-900/20 flex items-center justify-center">
+                  <svg className="w-10 h-10 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                  </svg>
+                </div>
+                <h3 className="text-2xl font-bold theme-text-primary mb-4">
+                  Email Sent!
+                </h3>
+                <p className="theme-text-muted mb-6">
+                  We&apos;ve sent a new verification link to <strong>{email}</strong>.
+                  Please check your inbox and click the link to verify your account.
+                </p>
+                <div className="space-y-3">
+                  <Link href="/auth/login" className="theme-button-primary w-full block">
+                    Back to Login
+                  </Link>
+                  <button
+                    onClick={() => {
+                      setSuccess(false);
+                      setError(null);
+                    }}
+                    className="theme-button-secondary w-full"
+                  >
+                    Send Another Email
+                  </button>
+                </div>
+              </div>
+            ) : (
+              <form className="space-y-6" onSubmit={handleSubmit}>
+                <div className="theme-form-group">
+                  <label htmlFor="email" className="block text-sm font-semibold theme-text-secondary mb-2">
+                    Email Address
+                  </label>
+                  <input
+                    id="email"
+                    name="email"
+                    type="email"
+                    autoComplete="email"
+                    required
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
+                    className="theme-input w-full"
+                    placeholder="you@example.com"
+                  />
+                </div>
+
+                <div>
+                  <button 
+                    type="submit" 
+                    disabled={loading} 
+                    className="theme-button-primary w-full text-lg font-semibold py-4 rounded-xl flex items-center justify-center disabled:opacity-60"
+                  >
+                    <MailIcon />
+                    {loading ? 'Sending...' : 'Resend Verification Email'}
+                  </button>
+                </div>
+              </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">{error}</p>
+              </div>
+            )}
+
+            {!success && (
+              <div className="mt-6 text-center">
+                <p className="text-sm theme-text-muted">
+                  Remember your password?{' '}
+                  <Link href="/auth/login" className="theme-link font-semibold">
+                    Sign In
+                  </Link>
+                </p>
+              </div>
+            )}
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+}

From f29671f70d231b721c6fe3f6d715e14dfbd1fca7 Mon Sep 17 00:00:00 2001
From: RandithaK <bharkula3@gmail.com>
Date: Tue, 11 Nov 2025 12:21:55 +0530
Subject: [PATCH 25/38] style: improve NotificationBell component layout and
 styling

---
 src/app/components/NotificationBell.tsx | 32 ++++++++++++-------------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/app/components/NotificationBell.tsx b/src/app/components/NotificationBell.tsx
index 8abe3e7..39a3407 100644
--- a/src/app/components/NotificationBell.tsx
+++ b/src/app/components/NotificationBell.tsx
@@ -75,7 +75,7 @@ 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-[1px]">
+          <span className="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full px-2 py-px">
             {unreadCount}
           </span>
         )}
@@ -85,14 +85,14 @@ export default function NotificationBell() {
       </button>
 
       {open && (
-        <div className="absolute right-0 mt-3 w-80 automotive-card p-4 shadow-xl z-50">
-          <div className="flex items-center justify-between mb-3">
-            <span className="font-semibold theme-text-primary">Notifications</span>
+        <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="flex items-center justify-between mb-4">
+            <span className="font-semibold theme-text-primary text-base">Notifications</span>
             {notifications.length > 0 && (
               <button
                 type="button"
                 onClick={handleMarkAllAsRead}
-                className="text-xs theme-text-muted hover:theme-text-primary"
+                className="text-xs theme-text-muted hover:theme-text-primary transition-colors"
               >
                 Mark all as read
               </button>
@@ -100,23 +100,23 @@ export default function NotificationBell() {
           </div>
 
           {loading ? (
-            <div className="py-6 text-center theme-text-muted text-sm">Loading notifications...</div>
+            <div className="py-8 text-center theme-text-muted text-sm">Loading notifications...</div>
           ) : error ? (
-            <div className="py-6 text-center text-red-500 text-sm">{error}</div>
+            <div className="py-8 text-center text-red-500 text-sm">{error}</div>
           ) : notifications.length === 0 ? (
-            <div className="py-6 text-center theme-text-muted text-sm">No notifications yet.</div>
+            <div className="py-8 text-center theme-text-muted text-sm">No notifications yet.</div>
           ) : (
-            <ul className="space-y-3 max-h-80 overflow-y-auto">
+            <ul className="space-y-2 max-h-80 overflow-y-auto mb-3 pr-1">
               {notifications.map((notification) => (
                 <li
                   key={notification.notificationId}
-                  className={`p-3 rounded-lg border border-transparent ${notification.read ? 'theme-bg-primary' : 'bg-blue-50 dark:bg-blue-900/30'} transition-colors`}
+                  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`}
                 >
-                  <div className="flex justify-between items-start">
-                    <div>
-                      <p className="theme-text-primary text-sm font-medium">{notification.message}</p>
+                  <div className="flex justify-between items-start gap-2">
+                    <div className="flex-1 min-w-0">
+                      <p className="theme-text-primary text-sm font-medium wrap-break-word">{notification.message}</p>
                       {notification.details && (
-                        <p className="theme-text-muted text-xs mt-1">{notification.details}</p>
+                        <p className="theme-text-muted text-xs mt-1 wrap-break-word">{notification.details}</p>
                       )}
                       <p className="theme-text-muted text-[11px] mt-2">
                         {new Date(notification.createdAt).toLocaleString()}
@@ -126,7 +126,7 @@ export default function NotificationBell() {
                       <button
                         type="button"
                         onClick={() => handleMarkAsRead(notification.notificationId)}
-                        className="text-xs text-blue-600 dark:text-blue-400 hover:underline"
+                        className="text-xs text-blue-600 dark:text-blue-400 hover:underline whitespace-nowrap shrink-0"
                       >
                         Mark as read
                       </button>
@@ -137,8 +137,8 @@ export default function NotificationBell() {
             </ul>
           )}
           <Link
-            className="block text-center theme-button-secondary text-sm mt-3"
             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"
           >
             View all notifications
           </Link>

From 83a5ea0e43468f59e4ab97b0088307f973306a08 Mon Sep 17 00:00:00 2001
From: RandithaK <bharkula3@gmail.com>
Date: Tue, 11 Nov 2025 12:49:25 +0530
Subject: [PATCH 26/38] feat: implement RoleSwitcher component and integrate
 role management in Dashboard

---
 src/app/components/RoleSwitcher.tsx    | 163 +++++++++++++++++++++++++
 src/app/contexts/DashboardContext.tsx  |  16 ++-
 src/app/dashboard/admin/users/page.tsx |  71 +++++++++--
 src/app/dashboard/layout.tsx           |   6 +-
 src/app/dashboard/page.tsx             |  15 +--
 5 files changed, 250 insertions(+), 21 deletions(-)
 create mode 100644 src/app/components/RoleSwitcher.tsx

diff --git a/src/app/components/RoleSwitcher.tsx b/src/app/components/RoleSwitcher.tsx
new file mode 100644
index 0000000..8d8f319
--- /dev/null
+++ b/src/app/components/RoleSwitcher.tsx
@@ -0,0 +1,163 @@
+'use client';
+
+import { useState, useRef, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+
+interface RoleSwitcherProps {
+  roles: string[];
+  currentRole: string;
+  onRoleChange: (role: string) => void;
+}
+
+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',
+    dashboardPath: '/dashboard',
+  },
+  ADMIN: {
+    label: 'Admin',
+    icon: '⚙️',
+    color: 'text-blue-600 dark:text-blue-400',
+    bgColor: 'bg-blue-100 dark:bg-blue-900/30',
+    dashboardPath: '/dashboard',
+  },
+  EMPLOYEE: {
+    label: 'Employee',
+    icon: '👷',
+    color: 'text-green-600 dark:text-green-400',
+    bgColor: 'bg-green-100 dark:bg-green-900/30',
+    dashboardPath: '/dashboard',
+  },
+  CUSTOMER: {
+    label: 'Customer',
+    icon: '👤',
+    color: 'text-gray-600 dark:text-gray-400',
+    bgColor: 'bg-gray-100 dark:bg-gray-800',
+    dashboardPath: '/dashboard',
+  },
+};
+
+export default function RoleSwitcher({ roles, currentRole, onRoleChange }: RoleSwitcherProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const router = useRouter();
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isOpen]);
+
+  // Only show switcher if user has multiple roles
+  if (!roles || roles.length <= 1) {
+    return null;
+  }
+
+  // Sort roles by priority
+  const sortedRoles = [...roles].sort((a, b) => {
+    const priority = { SUPER_ADMIN: 0, ADMIN: 1, EMPLOYEE: 2, CUSTOMER: 3 };
+    return (priority[a as keyof typeof priority] ?? 99) - (priority[b as keyof typeof priority] ?? 99);
+  });
+
+  const currentConfig = roleConfig[currentRole as keyof typeof roleConfig] || {
+    label: currentRole,
+    icon: '🔹',
+    color: 'text-gray-600',
+    bgColor: 'bg-gray-100',
+    dashboardPath: '/dashboard',
+  };
+
+  const handleRoleSwitch = (role: string) => {
+    onRoleChange(role);
+    setIsOpen(false);
+    // Optionally refresh the page to update the dashboard view
+    router.refresh();
+  };
+
+  return (
+    <div className="relative" ref={dropdownRef}>
+      {/* Current Role Button */}
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className={`flex items-center gap-2 px-3 py-2 rounded-lg transition-all ${currentConfig.bgColor} hover:opacity-80`}
+        title="Switch role view"
+      >
+        <span className="text-lg">{currentConfig.icon}</span>
+        <span className={`text-sm font-medium hidden sm:inline ${currentConfig.color}`}>
+          {currentConfig.label}
+        </span>
+        <svg
+          className={`w-4 h-4 transition-transform ${isOpen ? 'rotate-180' : ''} ${currentConfig.color}`}
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+        </svg>
+      </button>
+
+      {/* 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="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">
+              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',
+              };
+              const isActive = role === currentRole;
+
+              return (
+                <button
+                  key={role}
+                  onClick={() => handleRoleSwitch(role)}
+                  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'
+                  }`}
+                >
+                  <span className="text-lg">{config.icon}</span>
+                  <span className="flex-1 text-left">{config.label}</span>
+                  {isActive && (
+                    <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+                      <path
+                        fillRule="evenodd"
+                        d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                        clipRule="evenodd"
+                      />
+                    </svg>
+                  )}
+                </button>
+              );
+            })}
+          </div>
+          <div className="border-t border-gray-200 dark:border-gray-700 px-3 py-2">
+            <p className="text-xs theme-text-muted">
+              💡 Your current view affects the dashboard and available menu items
+            </p>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/app/contexts/DashboardContext.tsx b/src/app/contexts/DashboardContext.tsx
index 4a4c2a0..0e69972 100644
--- a/src/app/contexts/DashboardContext.tsx
+++ b/src/app/contexts/DashboardContext.tsx
@@ -7,6 +7,8 @@ interface DashboardContextState {
   profile: UserDto | null
   loading: boolean
   roles: string[]
+  activeRole: string
+  setActiveRole: (role: string) => void
   refreshProfile: () => Promise<void>
 }
 
@@ -15,6 +17,7 @@ const DashboardContext = createContext<DashboardContextState | undefined>(undefi
 export function DashboardProvider({ children }: { children: ReactNode }) {
   const [profile, setProfile] = useState<UserDto | null>(null)
   const [loading, setLoading] = useState(true)
+  const [activeRole, setActiveRole] = useState<string>('')
 
   const loadProfile = async () => {
     try {
@@ -22,6 +25,15 @@ export function DashboardProvider({ children }: { children: ReactNode }) {
       const response = await userService.getCurrentProfile()
       const payload = (response.data?.data as UserDto | undefined) ?? (response.data as UserDto | null)
       setProfile(payload ?? null)
+      
+      // Set initial active role to the highest privilege role
+      if (payload?.roles && payload.roles.length > 0) {
+        const sortedRoles = [...payload.roles].sort((a, b) => {
+          const priority = { SUPER_ADMIN: 0, ADMIN: 1, EMPLOYEE: 2, CUSTOMER: 3 };
+          return (priority[a as keyof typeof priority] ?? 99) - (priority[b as keyof typeof priority] ?? 99);
+        });
+        setActiveRole(sortedRoles[0]);
+      }
     } catch (error) {
       console.error('Failed to load dashboard profile', error)
       setProfile(null)
@@ -38,8 +50,10 @@ export function DashboardProvider({ children }: { children: ReactNode }) {
     profile,
     loading,
     roles: profile?.roles ?? [],
+    activeRole,
+    setActiveRole,
     refreshProfile: loadProfile,
-  }), [profile, loading])
+  }), [profile, loading, activeRole])
 
   return (
     <DashboardContext.Provider value={value}>
diff --git a/src/app/dashboard/admin/users/page.tsx b/src/app/dashboard/admin/users/page.tsx
index eea2242..413b507 100644
--- a/src/app/dashboard/admin/users/page.tsx
+++ b/src/app/dashboard/admin/users/page.tsx
@@ -77,11 +77,13 @@ export default function AdminUsersPage() {
       setShowCreateModal(false);
       await loadUsers();
       alert(`${createUserType === 'employee' ? 'Employee' : 'Admin'} created successfully!`);
-    } catch (err: any) {
+    } catch (err) {
       console.error('Failed to create user:', err);
-      const errorMessage = err?.response?.status === 403
+      // 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.'
-        : err?.response?.data?.message || 'Failed to create user. Please try again.';
+        : error?.response?.data?.message || 'Failed to create user. Please try again.';
       alert(errorMessage);
     }
   };
@@ -98,6 +100,12 @@ export default function AdminUsersPage() {
 
   const handleSaveRoles = async (userId: string) => {
     try {
+      // Validation: Ensure at least one role is selected
+      if (editingRoles.length === 0) {
+        alert('Please select at least one role for the user.');
+        return;
+      }
+
       await adminService.updateUser(userId, { roles: editingRoles });
       setEditingUserId(null);
       setEditingRoles([]);
@@ -105,18 +113,29 @@ export default function AdminUsersPage() {
       alert('Roles updated successfully!');
     } catch (err) {
       console.error('Failed to update roles:', err);
-      alert('Failed to update roles. Please try again.');
+      const errorMessage = err instanceof Error ? err.message : 'Failed to update roles. Please try again.';
+      alert(errorMessage);
     }
   };
 
   const handleToggleRole = (role: string) => {
     if (editingRoles.includes(role)) {
+      // Prevent removing the last role
+      if (editingRoles.length === 1) {
+        alert('A user must have at least one role.');
+        return;
+      }
       setEditingRoles(editingRoles.filter(r => r !== role));
     } else {
       setEditingRoles([...editingRoles, role]);
     }
   };
 
+  // Check if a role can be modified
+  const isRoleProtected = (role: string): boolean => {
+    return role === 'CUSTOMER' || role === 'SUPER_ADMIN';
+  };
+
   // Check if user can be edited (not customer)
   const canEditUser = (user: UserResponse): boolean => {
     const isCustomer = user.roles.includes('CUSTOMER');
@@ -263,29 +282,59 @@ export default function AdminUsersPage() {
                     {editingUserId === user.userId ? (
                       <div className="space-y-2">
                         <div className="flex flex-wrap gap-2">
+                          {/* Editable roles */}
                           {['EMPLOYEE', 'ADMIN'].map((role) => (
                             <button
                               key={role}
                               onClick={() => handleToggleRole(role)}
                               className={`px-3 py-1 rounded text-xs font-semibold transition-colors ${
                                 editingRoles.includes(role)
-                                  ? 'bg-blue-600 text-white'
-                                  : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300'
+                                  ? 'bg-blue-600 text-white hover:bg-blue-700'
+                                  : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600'
                               }`}
+                              title={`Click to ${editingRoles.includes(role) ? 'remove' : 'add'} ${role} role`}
                             >
                               {role}
                             </button>
                           ))}
+                          
+                          {/* Show protected roles (read-only) */}
+                          {user.roles.filter(role => isRoleProtected(role)).map((role) => (
+                            <span
+                              key={role}
+                              className="px-3 py-1 rounded text-xs font-semibold bg-gray-300 dark:bg-gray-600 text-gray-600 dark:text-gray-300 cursor-not-allowed opacity-75"
+                              title={`${role} role cannot be modified`}
+                            >
+                              {role} 🔒
+                            </span>
+                          ))}
                         </div>
+                        <p className="text-xs theme-text-muted mt-2">
+                          💡 <strong>Tip:</strong> Select multiple roles to give users combined access. 
+                          {editingRoles.length > 1 && (
+                            <span className="text-blue-600 dark:text-blue-400"> Currently selected: {editingRoles.length} roles</span>
+                          )}
+                        </p>
                       </div>
                     ) : (
                       <div className="flex flex-wrap gap-1">
                         {Array.isArray(user.roles) && user.roles.length > 0 ? (
-                          user.roles.map((role) => (
-                            <span key={role} className="px-2 py-1 rounded text-xs font-semibold bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300">
-                              {role}
-                            </span>
-                          ))
+                          user.roles.map((role) => {
+                            const isProtected = isRoleProtected(role);
+                            return (
+                              <span
+                                key={role}
+                                className={`px-2 py-1 rounded text-xs font-semibold ${
+                                  isProtected
+                                    ? 'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300'
+                                    : 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300'
+                                }`}
+                                title={isProtected ? 'Protected role' : ''}
+                              >
+                                {role} {isProtected && '🔒'}
+                              </span>
+                            );
+                          })
                         ) : (
                           <span className="text-xs theme-text-muted">No roles</span>
                         )}
diff --git a/src/app/dashboard/layout.tsx b/src/app/dashboard/layout.tsx
index 16056a1..5e8fd99 100644
--- a/src/app/dashboard/layout.tsx
+++ b/src/app/dashboard/layout.tsx
@@ -4,6 +4,7 @@ import { useMemo, useState, type ReactNode } from 'react'
 import { usePathname } from 'next/navigation'
 import ThemeToggle from '@/app/components/ThemeToggle'
 import NotificationBell from '@/app/components/NotificationBell'
+import RoleSwitcher from '@/app/components/RoleSwitcher'
 import { DashboardProvider, useDashboard } from '@/app/contexts/DashboardContext'
 import { NotificationProvider } from '@/app/contexts/NotificationContext'
 import { authService } from '@/services/authService'
@@ -37,11 +38,11 @@ function DashboardShellWithNotifications({ children }: { children: ReactNode })
 }
 
 function DashboardShell({ children }: { children: ReactNode }) {
-  const { profile, loading, roles } = useDashboard()
+  const { profile, loading, roles, activeRole, setActiveRole } = useDashboard()
   const pathname = usePathname()
   const [mobileNavOpen, setMobileNavOpen] = useState(false)
 
-  const navSections = useMemo<NavSection[]>(() => buildNavigation(roles), [roles])
+  const navSections = useMemo<NavSection[]>(() => buildNavigation(activeRole ? [activeRole] : roles), [roles, activeRole])
   const handleLogout = () => {
     authService.logout()
     window.location.href = '/auth/login'
@@ -115,6 +116,7 @@ function DashboardShell({ children }: { children: ReactNode }) {
                   <h1 className="text-lg font-semibold theme-text-primary">Dashboard</h1>
                 </div>
                 <div className="flex items-center gap-3">
+                  <RoleSwitcher roles={roles} currentRole={activeRole} onRoleChange={setActiveRole} />
                   <NotificationBell />
                   <ThemeToggle />
                   <button
diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
index 29c8017..a55a40e 100644
--- a/src/app/dashboard/page.tsx
+++ b/src/app/dashboard/page.tsx
@@ -9,16 +9,17 @@ import { useDashboard } from '../contexts/DashboardContext'
 import type { UserDto } from '@/types/api'
 
 export default function DashboardPage() {
-  const { profile, loading } = useDashboard()
+  const { profile, loading, activeRole } = useDashboard()
 
-  const getRoleDashboard = (profile: UserDto) => {
-    const roles = profile.roles || []
+  const getRoleDashboard = (profile: UserDto, selectedRole: string) => {
+    // Use the actively selected role instead of checking all roles
+    const role = selectedRole || (profile.roles && profile.roles[0]) || '';
     
-    if (roles.includes('SUPER_ADMIN') || roles.includes('SUPERADMIN')) {
+    if (role === 'SUPER_ADMIN' || role === 'SUPERADMIN') {
       return <SuperAdminDashboard profile={profile} />
-    } else if (roles.includes('ADMIN')) {
+    } else if (role === 'ADMIN') {
       return <AdminDashboard profile={profile} />
-    } else if (roles.includes('EMPLOYEE')) {
+    } else if (role === 'EMPLOYEE') {
       return <EmployeeDashboard profile={profile} />
     } else {
       return <CustomerDashboard profile={profile} />
@@ -49,7 +50,7 @@ export default function DashboardPage() {
 
   return (
     <div className="max-w-7xl mx-auto">
-      {getRoleDashboard(profile)}
+      {getRoleDashboard(profile, activeRole)}
     </div>
   )
 }

From ce2237f2b1efad1eeedaee79171cbad9f8e3d753 Mon Sep 17 00:00:00 2001
From: RandithaK <bharkula3@gmail.com>
Date: Tue, 11 Nov 2025 13:06:29 +0530
Subject: [PATCH 27/38] feat: enhance ServiceTypesPage with create, edit,
 delete, and toggle functionality for service types

---
 .../dashboard/admin/service-types/page.tsx    | 303 +++++++++++++++++-
 src/services/adminService.ts                  |   8 +-
 src/types/admin.ts                            |  21 +-
 3 files changed, 316 insertions(+), 16 deletions(-)

diff --git a/src/app/dashboard/admin/service-types/page.tsx b/src/app/dashboard/admin/service-types/page.tsx
index fc5953c..dd4c9af 100644
--- a/src/app/dashboard/admin/service-types/page.tsx
+++ b/src/app/dashboard/admin/service-types/page.tsx
@@ -2,13 +2,22 @@
 
 import { useState, useEffect } from 'react';
 import { adminService } from '@/services/adminService';
-import { ServiceTypeResponse } from '@/types/admin';
+import { ServiceTypeResponse, CreateServiceTypeRequest, UpdateServiceTypeRequest } from '@/types/admin';
 import { useDashboard } from '@/app/contexts/DashboardContext';
 
 export default function ServiceTypesPage() {
   const { roles, loading: rolesLoading } = useDashboard();
   const [serviceTypes, setServiceTypes] = useState<ServiceTypeResponse[]>([]);
   const [loading, setLoading] = useState(true);
+  const [showModal, setShowModal] = useState(false);
+  const [editingService, setEditingService] = useState<ServiceTypeResponse | null>(null);
+  const [formData, setFormData] = useState({
+    name: '',
+    category: 'MAINTENANCE',
+    description: '',
+    price: 0,
+    durationMinutes: 30,
+  });
 
   useEffect(() => {
     loadServiceTypes();
@@ -18,16 +27,127 @@ export default function ServiceTypesPage() {
     try {
       setLoading(true);
       const data = await adminService.getAllServiceTypes();
-      // Ensure data is an array
-      setServiceTypes(Array.isArray(data) ? data : []);
+      console.log('Loaded service types:', data); // Debug log
+      // Ensure we always get an array and include both active and inactive services
+      const services = Array.isArray(data) ? data : [];
+      setServiceTypes(services);
+      console.log('Set service types count:', services.length); // Debug log
     } catch (err) {
       console.error('Failed to load service types:', err);
-      setServiceTypes([]); // Set empty array on error
+      setServiceTypes([]);
     } finally {
       setLoading(false);
     }
   };
 
+  const handleCreate = () => {
+    setEditingService(null);
+    setFormData({
+      name: '',
+      category: 'MAINTENANCE',
+      description: '',
+      price: 0,
+      durationMinutes: 30,
+    });
+    setShowModal(true);
+  };
+
+  const handleEdit = (service: ServiceTypeResponse) => {
+    setEditingService(service);
+    setFormData({
+      name: service.name,
+      category: service.category,
+      description: service.description || '',
+      price: service.basePriceLKR,
+      durationMinutes: service.estimatedDurationMinutes,
+    });
+    setShowModal(true);
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    try {
+      if (editingService) {
+        // Update existing service - use UpdateServiceTypeRequest format
+        console.log('Updating service:', editingService.id);
+        const updateData: UpdateServiceTypeRequest = {
+          name: formData.name,
+          category: formData.category,
+          description: formData.description,
+          price: formData.price,
+          durationMinutes: formData.durationMinutes,
+          active: editingService.active, // Keep existing active status
+        };
+        await adminService.updateServiceType(editingService.id, updateData);
+        alert('Service type updated successfully!');
+      } else {
+        // Create new service - use CreateServiceTypeRequest format
+        console.log('Creating service:', formData);
+        const createData: CreateServiceTypeRequest = {
+          name: formData.name,
+          category: formData.category,
+          description: formData.description,
+          price: formData.price,
+          durationMinutes: formData.durationMinutes,
+        };
+        await adminService.createServiceType(createData);
+        alert('Service type created successfully!');
+      }
+      
+      // Close modal first
+      setShowModal(false);
+      setEditingService(null);
+      
+      // Then reload the list
+      console.log('Reloading service types...');
+      await loadServiceTypes();
+      console.log('Service types reloaded');
+    } 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);
+    }
+  };
+
+  const handleDelete = async (service: ServiceTypeResponse) => {
+    if (!confirm(`Are you sure you want to delete "${service.name}"? This action cannot be undone.`)) {
+      return;
+    }
+
+    try {
+      await adminService.removeServiceType(service.id);
+      alert('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);
+    }
+  };
+
+  const handleToggleActive = async (service: ServiceTypeResponse) => {
+    try {
+      const newStatus = !service.active;
+      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,
+      });
+      
+      console.log('Toggle successful, reloading list...');
+      await loadServiceTypes();
+    } catch (err) {
+      console.error('Failed to toggle service status:', err);
+      alert('Failed to update service status. Please try again.');
+    }
+  };
+
   // Check if user has permission to access this page
   const hasRole = (role: string) => roles?.includes(role);
   const hasAccess = hasRole('ADMIN') || hasRole('SUPER_ADMIN');
@@ -68,19 +188,35 @@ export default function ServiceTypesPage() {
 
   return (
     <div className="max-w-7xl mx-auto p-6">
-      <div className="mb-8">
-        <h1 className="text-3xl font-bold theme-text-primary mb-2">Service Types</h1>
-        <p className="theme-text-muted">Manage available service types and pricing</p>
+      <div className="mb-8 flex justify-between items-center">
+        <div>
+          <h1 className="text-3xl font-bold theme-text-primary mb-2">Service Types</h1>
+          <p className="theme-text-muted">Manage available service types and pricing</p>
+        </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"
+        >
+          <span className="text-xl">+</span>
+          Add Service Type
+        </button>
       </div>
 
       <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
         {serviceTypes.length === 0 ? (
           <div className="col-span-full text-center py-12">
-            <p className="text-lg theme-text-muted">No service types found</p>
+            <p className="text-lg theme-text-muted">No service types found. Create one to get started!</p>
           </div>
         ) : (
           serviceTypes.map((serviceType) => (
-            <div key={serviceType.id} className="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/50 p-6">
+            <div 
+              key={serviceType.id} 
+              className={`rounded-xl border bg-white dark:bg-gray-900/50 p-6 hover:shadow-lg transition-shadow ${
+                serviceType.active 
+                  ? 'border-gray-200 dark:border-gray-800' 
+                  : 'border-red-200 dark:border-red-900 bg-gray-50 dark:bg-gray-900/30 opacity-75'
+              }`}
+            >
               <div className="flex items-start justify-between mb-3">
                 <h3 className="text-lg font-semibold theme-text-primary">{serviceType.name}</h3>
                 {serviceType.active ? (
@@ -88,13 +224,13 @@ export default function ServiceTypesPage() {
                     Active
                   </span>
                 ) : (
-                  <span className="px-2 py-1 rounded text-xs font-semibold bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-300">
+                  <span className="px-2 py-1 rounded text-xs font-semibold bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300">
                     Inactive
                   </span>
                 )}
               </div>
               <p className="text-sm theme-text-secondary mb-4">{serviceType.description}</p>
-              <div className="space-y-2">
+              <div className="space-y-2 mb-4">
                 <div className="flex justify-between text-sm">
                   <span className="theme-text-muted">Category:</span>
                   <span className="theme-text-primary font-medium">{serviceType.category}</span>
@@ -110,10 +246,155 @@ export default function ServiceTypesPage() {
                   <span className="theme-text-primary font-medium">{serviceType.estimatedDurationMinutes ?? 0} min</span>
                 </div>
               </div>
+              
+              {/* Action Buttons */}
+              <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"
+                >
+                  Edit
+                </button>
+                <button
+                  onClick={() => handleToggleActive(serviceType)}
+                  className={`flex-1 px-3 py-2 rounded text-sm transition-colors ${
+                    serviceType.active
+                      ? 'bg-yellow-600 hover:bg-yellow-700 text-white'
+                      : 'bg-green-600 hover:bg-green-700 text-white'
+                  }`}
+                >
+                  {serviceType.active ? 'Deactivate' : 'Activate'}
+                </button>
+                <button
+                  onClick={() => handleDelete(serviceType)}
+                  className="bg-red-600 hover:bg-red-700 text-white px-3 py-2 rounded text-sm transition-colors"
+                >
+                  Delete
+                </button>
+              </div>
             </div>
           ))
         )}
       </div>
+
+      {/* 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="p-6">
+              <div className="flex justify-between items-center mb-6">
+                <h2 className="text-2xl font-bold theme-text-primary">
+                  {editingService ? 'Edit Service Type' : 'Create Service Type'}
+                </h2>
+                <button
+                  onClick={() => setShowModal(false)}
+                  className="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 text-2xl"
+                >
+                  ×
+                </button>
+              </div>
+
+              <form onSubmit={handleSubmit} className="space-y-4">
+                <div>
+                  <label className="block text-sm font-medium mb-1 theme-text-primary">
+                    Service Name <span className="text-red-500">*</span>
+                  </label>
+                  <input
+                    type="text"
+                    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"
+                    placeholder="e.g., Oil Change"
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium mb-1 theme-text-primary">
+                    Category <span className="text-red-500">*</span>
+                  </label>
+                  <select
+                    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"
+                  >
+                    <option value="MAINTENANCE">Maintenance</option>
+                    <option value="REPAIR">Repair</option>
+                    <option value="MODIFICATION">Modification</option>
+                    <option value="INSPECTION">Inspection</option>
+                  </select>
+                  <p className="text-xs text-gray-500 mt-1">Choose the service category</p>
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium mb-1 theme-text-primary">
+                    Description
+                  </label>
+                  <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"
+                    rows={3}
+                    placeholder="Describe the service..."
+                  />
+                </div>
+
+                <div className="grid grid-cols-2 gap-4">
+                  <div>
+                    <label className="block text-sm font-medium mb-1 theme-text-primary">
+                      Base Price (LKR) <span className="text-red-500">*</span>
+                    </label>
+                    <input
+                      type="number"
+                      required
+                      min="0"
+                      step="0.01"
+                      value={formData.price}
+                      onChange={(e) => setFormData({ ...formData, price: parseFloat(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"
+                      placeholder="5000"
+                    />
+                  </div>
+
+                  <div>
+                    <label className="block text-sm font-medium mb-1 theme-text-primary">
+                      Duration (minutes) <span className="text-red-500">*</span>
+                    </label>
+                    <input
+                      type="number"
+                      required
+                      min="15"
+                      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"
+                      placeholder="60"
+                    />
+                    <p className="text-xs text-gray-500 mt-1">Min: 15 min, Max: 8 hours (480 min)</p>
+                  </div>
+                </div>
+
+                <div className="flex gap-3 pt-4">
+                  <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"
+                  >
+                    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"
+                  >
+                    {editingService ? 'Update Service' : 'Create Service'}
+                  </button>
+                </div>
+              </form>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 }
diff --git a/src/services/adminService.ts b/src/services/adminService.ts
index b0f464c..43637a2 100644
--- a/src/services/adminService.ts
+++ b/src/services/adminService.ts
@@ -4,6 +4,7 @@ import type {
   UserResponse,
   UpdateUserRequest,
   ServiceTypeResponse,
+  CreateServiceTypeRequest,
   UpdateServiceTypeRequest,
   SystemConfigurationResponse,
   UpdateConfigRequest,
@@ -47,7 +48,10 @@ export const adminService = {
   // ===== SERVICE TYPE CONFIGURATION =====
   
   async getAllServiceTypes(): Promise<ServiceTypeResponse[]> {
-    const res = await api.get('/admin/service-types');
+    // Pass activeOnly=false to get ALL service types (active and inactive)
+    const res = await api.get('/admin/service-types', {
+      params: { activeOnly: false }
+    });
     return res.data.data || res.data;
   },
 
@@ -56,7 +60,7 @@ export const adminService = {
     return res.data.data || res.data;
   },
 
-  async createServiceType(data: UpdateServiceTypeRequest): Promise<ServiceTypeResponse> {
+  async createServiceType(data: CreateServiceTypeRequest): Promise<ServiceTypeResponse> {
     const res = await api.post('/admin/service-types', data);
     return res.data.data || res.data;
   },
diff --git a/src/types/admin.ts b/src/types/admin.ts
index 9a25d66..220635a 100644
--- a/src/types/admin.ts
+++ b/src/types/admin.ts
@@ -37,13 +37,28 @@ export interface ServiceTypeResponse {
   updatedAt: string;
 }
 
-export interface UpdateServiceTypeRequest {
+export interface CreateServiceTypeRequest {
   name: string;
   category: string;
   description?: string;
-  basePriceLKR: number;
-  estimatedDurationMinutes: number;
+  price: number; // Backend expects 'price' not 'basePriceLKR'
+  durationMinutes: number; // Backend expects 'durationMinutes' not 'estimatedDurationMinutes'
+  requiresApproval?: boolean;
+  dailyCapacity?: number;
+  skillLevel?: string;
+  iconUrl?: string;
+}
+
+export interface UpdateServiceTypeRequest {
+  name?: string;
+  category?: string;
+  description?: string;
+  price?: number; // Backend expects 'price' not 'basePriceLKR'
+  durationMinutes?: number; // Backend expects 'durationMinutes' not 'estimatedDurationMinutes'
   active?: boolean;
+  dailyCapacity?: number;
+  skillLevel?: string;
+  iconUrl?: string;
 }
 
 // ===== SYSTEM CONFIGURATION =====

From b4df4497287cdbb66465a23d551b5587226b9c4d Mon Sep 17 00:00:00 2001
From: RandithaK <bharkula3@gmail.com>
Date: Tue, 11 Nov 2025 14:21:43 +0530
Subject: [PATCH 28/38] feat: add user activation/deactivation functionality
 with confirmation prompts

---
 src/app/dashboard/admin/users/page.tsx | 104 +++++++++++++++++++------
 1 file changed, 80 insertions(+), 24 deletions(-)

diff --git a/src/app/dashboard/admin/users/page.tsx b/src/app/dashboard/admin/users/page.tsx
index 413b507..c303696 100644
--- a/src/app/dashboard/admin/users/page.tsx
+++ b/src/app/dashboard/admin/users/page.tsx
@@ -131,6 +131,27 @@ export default function AdminUsersPage() {
     }
   };
 
+  const handleToggleUserStatus = async (user: UserResponse) => {
+    const action = user.enabled ? 'deactivate' : 'activate';
+    const confirmMessage = user.enabled
+      ? `Are you sure you want to deactivate ${user.fullName || user.username}? They will not be able to log in.`
+      : `Are you sure you want to activate ${user.fullName || user.username}? They will be able to log in again.`;
+
+    if (!confirm(confirmMessage)) {
+      return;
+    }
+
+    try {
+      await adminService.updateUser(user.userId, { enabled: !user.enabled });
+      await loadUsers();
+      alert(`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);
+    }
+  };
+
   // Check if a role can be modified
   const isRoleProtected = (role: string): boolean => {
     return role === 'CUSTOMER' || role === 'SUPER_ADMIN';
@@ -213,29 +234,35 @@ export default function AdminUsersPage() {
       </div>
 
       {/* Stats */}
-      <div className="grid gap-4 sm:grid-cols-4 mb-6">
+      <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-xs uppercase tracking-wide theme-text-muted">Total Users</p>
           <p className="text-2xl font-semibold theme-text-primary">{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">Active</p>
+          <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">
             {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">Locked</p>
+          <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">
-            {users.filter(u => u.accountLocked).length}
+            {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">Verified</p>
+          <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">
             {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">
+            {users.filter(u => u.accountLocked).length}
+          </p>
+        </div>
       </div>
 
       {/* Filters */}
@@ -343,18 +370,32 @@ export default function AdminUsersPage() {
                   </td>
                   <td className="px-6 py-4">
                     <div className="space-y-1">
+                      {/* Account Status */}
                       {user.enabled ? (
                         <span className="inline-block px-2 py-1 rounded text-xs font-semibold bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300">
-                          Active
+                          ✓ Active
+                        </span>
+                      ) : (
+                        <span className="inline-block px-2 py-1 rounded text-xs font-semibold bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300">
+                          ✕ Deactivated
+                        </span>
+                      )}
+                      
+                      {/* Email Verification Status */}
+                      {user.emailVerified ? (
+                        <span className="inline-block px-2 py-1 rounded text-xs font-semibold bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300 ml-1">
+                          ✉ Verified
                         </span>
                       ) : (
-                        <span className="inline-block px-2 py-1 rounded text-xs font-semibold bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-300">
-                          Disabled
+                        <span className="inline-block px-2 py-1 rounded text-xs font-semibold bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-300 ml-1">
+                          ✉ Unverified
                         </span>
                       )}
+                      
+                      {/* Account Locked */}
                       {user.accountLocked && (
                         <span className="inline-block px-2 py-1 rounded text-xs font-semibold bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300 ml-1">
-                          Locked
+                          🔒 Locked
                         </span>
                       )}
                     </div>
@@ -369,27 +410,42 @@ export default function AdminUsersPage() {
                     <td className="px-6 py-4">
                       {canEditUser(user) ? (
                         editingUserId === user.userId ? (
-                          <div className="flex gap-2">
+                          <div className="flex flex-col gap-2">
+                            <div className="flex gap-2">
+                              <button
+                                onClick={() => handleSaveRoles(user.userId)}
+                                className="px-3 py-1 bg-green-600 hover:bg-green-700 text-white text-xs font-medium rounded transition-colors"
+                              >
+                                Save
+                              </button>
+                              <button
+                                onClick={handleCancelEditRoles}
+                                className="px-3 py-1 bg-gray-500 hover:bg-gray-600 text-white text-xs font-medium rounded transition-colors"
+                              >
+                                Cancel
+                              </button>
+                            </div>
+                          </div>
+                        ) : (
+                          <div className="flex flex-col gap-2">
                             <button
-                              onClick={() => handleSaveRoles(user.userId)}
-                              className="px-3 py-1 bg-green-600 hover:bg-green-700 text-white text-xs font-medium rounded transition-colors"
+                              onClick={() => handleStartEditRoles(user)}
+                              className="px-3 py-1 bg-blue-600 hover:bg-blue-700 text-white text-xs font-medium rounded transition-colors"
                             >
-                              Save
+                              Edit Roles
                             </button>
                             <button
-                              onClick={handleCancelEditRoles}
-                              className="px-3 py-1 bg-gray-500 hover:bg-gray-600 text-white text-xs font-medium rounded transition-colors"
+                              onClick={() => handleToggleUserStatus(user)}
+                              className={`px-3 py-1 text-white text-xs font-medium rounded transition-colors ${
+                                user.enabled
+                                  ? 'bg-red-600 hover:bg-red-700'
+                                  : 'bg-green-600 hover:bg-green-700'
+                              }`}
+                              title={user.enabled ? 'Disable user account' : 'Enable user account'}
                             >
-                              Cancel
+                              {user.enabled ? '✕ Deactivate' : '✓ Activate'}
                             </button>
                           </div>
-                        ) : (
-                          <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"
-                          >
-                            Edit Roles
-                          </button>
                         )
                       ) : (
                         <span className="text-xs theme-text-muted italic">Customer (Read-only)</span>

From cd75020e559732d993f05fe7bf4cde280ee7805c Mon Sep 17 00:00:00 2001
From: RandithaK <bharkula3@gmail.com>
Date: Tue, 11 Nov 2025 14:51:12 +0530
Subject: [PATCH 29/38] feat: update service type fetching to retrieve only
 active service types

---
 src/app/dashboard/appointments/book/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/dashboard/appointments/book/page.tsx b/src/app/dashboard/appointments/book/page.tsx
index 3e196f7..7f01f20 100644
--- a/src/app/dashboard/appointments/book/page.tsx
+++ b/src/app/dashboard/appointments/book/page.tsx
@@ -40,7 +40,7 @@ export default function BookAppointmentPage() {
       try {
         setLoading(true)
         const [services, vehicleData] = await Promise.all([
-          appointmentService.getAllServiceTypes(false),
+          appointmentService.getAllServiceTypes(false), // Get only active service types
           vehicleService.getMyVehicles(),
         ])
 

From d96438e0f8d698194843df552619fc039968f723 Mon Sep 17 00:00:00 2001
From: RandithaK <bharkula3@gmail.com>
Date: Tue, 11 Nov 2025 15:52:10 +0530
Subject: [PATCH 30/38] feat: implement time tracking functionality with clock
 in/out features in AppointmentDetailPage

---
 .../appointments/[appointmentId]/page.tsx     | 142 ++++++--------
 src/components/TimeTracker.tsx                | 176 ++++++++++++++++++
 src/services/appointmentService.ts            |  26 ++-
 src/types/appointment.ts                      |  12 ++
 4 files changed, 270 insertions(+), 86 deletions(-)
 create mode 100644 src/components/TimeTracker.tsx

diff --git a/src/app/dashboard/appointments/[appointmentId]/page.tsx b/src/app/dashboard/appointments/[appointmentId]/page.tsx
index 0e06f3d..99fbbc6 100644
--- a/src/app/dashboard/appointments/[appointmentId]/page.tsx
+++ b/src/app/dashboard/appointments/[appointmentId]/page.tsx
@@ -8,6 +8,7 @@ import type { AppointmentResponseDto, AppointmentStatus } from '@/types/appointm
 import type { UserResponse } from '@/types/admin'
 import type { CreateInvoiceDto, InvoiceItemDto } from '@/types/payment'
 import { useDashboard } from '@/app/contexts/DashboardContext'
+import TimeTracker from '@/components/TimeTracker'
 
 interface StatusOption {
   value: AppointmentStatus
@@ -27,7 +28,7 @@ export default function AppointmentDetailPage() {
   const router = useRouter()
   const params = useParams<{ appointmentId: string }>()
   const appointmentId = params.appointmentId
-  const { roles, userId } = useDashboard()
+  const { roles, profile } = useDashboard()
 
   const [appointment, setAppointment] = useState<AppointmentResponseDto | null>(null)
   const [loading, setLoading] = useState(true)
@@ -45,10 +46,6 @@ export default function AppointmentDetailPage() {
   const [selectedEmployeeIds, setSelectedEmployeeIds] = useState<string[]>([])
   const [assigning, setAssigning] = useState(false)
 
-  // Employee action state
-  const [accepting, setAccepting] = useState(false)
-  const [completing, setCompleting] = useState(false)
-
   // Invoice generation state
   const [showInvoiceForm, setShowInvoiceForm] = useState(false)
   const [invoiceItems, setInvoiceItems] = useState<InvoiceItemDto[]>([
@@ -193,48 +190,6 @@ export default function AppointmentDetailPage() {
     )
   }
 
-  const handleAcceptVehicle = async () => {
-    if (!appointment) return
-    if (!window.confirm('Confirm that the vehicle has arrived and you are ready to start work?')) {
-      return
-    }
-
-    try {
-      setAccepting(true)
-      const updated = await appointmentService.acceptVehicleArrival(appointment.id)
-      setAppointment(updated)
-      setStatus(updated.status)
-      setError(null)
-    } catch (err: unknown) {
-      const message = (err as { response?: { data?: { message?: string } } })?.response?.data?.message ||
-        'Failed to accept vehicle arrival'
-      setError(message)
-    } finally {
-      setAccepting(false)
-    }
-  }
-
-  const handleCompleteWork = async () => {
-    if (!appointment) return
-    if (!window.confirm('Mark this appointment as complete? The customer will be notified.')) {
-      return
-    }
-
-    try {
-      setCompleting(true)
-      const updated = await appointmentService.completeWork(appointment.id)
-      setAppointment(updated)
-      setStatus(updated.status)
-      setError(null)
-    } catch (err: unknown) {
-      const message = (err as { response?: { data?: { message?: string } } })?.response?.data?.message ||
-        'Failed to complete work'
-      setError(message)
-    } finally {
-      setCompleting(false)
-    }
-  }
-
   // Invoice generation handlers
   const handleOpenInvoiceForm = () => {
     if (!appointment) return
@@ -523,54 +478,71 @@ export default function AppointmentDetailPage() {
           </section>
         )}
 
-        {/* Employee Actions */}
-        {roles?.includes('EMPLOYEE') && appointment && userId && appointment.assignedEmployeeIds?.includes(userId) && (
+        {/* Employee Actions - Time Tracking */}
+        {roles?.includes('EMPLOYEE') && appointment && profile?.username && appointment.assignedEmployeeIds?.includes(profile.username) && (
           <section className="automotive-card p-6 border-2 border-blue-200 dark:border-blue-800">
-            <h2 className="text-xl font-semibold theme-text-primary mb-4">Employee Actions</h2>
+            <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">
                 <p className="text-sm theme-text-muted">
-                  Vehicle arrived: {new Date(appointment.vehicleArrivedAt).toLocaleString()}
+                  📍 Vehicle arrived: {new Date(appointment.vehicleArrivedAt).toLocaleString()}
                 </p>
               </div>
             )}
 
-            <div className="flex gap-3">
-              {appointment.status === 'CONFIRMED' && !appointment.vehicleArrivedAt && (
-                <button
-                  type="button"
-                  onClick={handleAcceptVehicle}
-                  disabled={accepting}
-                  className="px-6 py-2.5 bg-green-600 hover:bg-green-700 text-white rounded-lg font-medium transition-colors disabled:opacity-50"
-                >
-                  {accepting ? 'Processing...' : '✓ Accept Vehicle Arrival'}
-                </button>
-              )}
-
-              {appointment.status === 'IN_PROGRESS' && (
-                <button
-                  type="button"
-                  onClick={handleCompleteWork}
-                  disabled={completing}
-                  className="px-6 py-2.5 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium transition-colors disabled:opacity-50"
-                >
-                  {completing ? 'Processing...' : '✓ Mark as Complete'}
-                </button>
-              )}
-
-              {appointment.status === 'COMPLETED' && (
-                <div className="p-3 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg">
-                  <p className="text-green-700 dark:text-green-300 font-medium">
-                    ✓ Work completed successfully
-                  </p>
-                </div>
-              )}
-            </div>
-
-            {appointment.status !== 'CONFIRMED' && appointment.status !== 'IN_PROGRESS' && appointment.status !== 'COMPLETED' && (
+            {appointment.status === 'CONFIRMED' ? (
+              <div>
+                <p className="theme-text-muted mb-4 text-sm">
+                  Ready to start work? Click &quot;Clock In&quot; to begin time tracking automatically.
+                </p>
+                <TimeTracker
+                  appointmentId={appointmentId}
+                  onClockIn={async () => {
+                    // Reload appointment to get updated status
+                    const updated = await appointmentService.getAppointmentDetails(appointmentId)
+                    setAppointment(updated)
+                    setStatus(updated.status)
+                  }}
+                  onClockOut={async () => {
+                    // Reload appointment to get updated status
+                    const updated = await appointmentService.getAppointmentDetails(appointmentId)
+                    setAppointment(updated)
+                    setStatus(updated.status)
+                  }}
+                />
+              </div>
+            ) : appointment.status === 'IN_PROGRESS' ? (
+              <div>
+                <p className="theme-text-muted mb-4 text-sm">
+                  🔧 Work in progress. Your time is being tracked automatically.
+                </p>
+                <TimeTracker
+                  appointmentId={appointmentId}
+                  onClockIn={async () => {
+                    const updated = await appointmentService.getAppointmentDetails(appointmentId)
+                    setAppointment(updated)
+                    setStatus(updated.status)
+                  }}
+                  onClockOut={async () => {
+                    const updated = await appointmentService.getAppointmentDetails(appointmentId)
+                    setAppointment(updated)
+                    setStatus(updated.status)
+                  }}
+                />
+              </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">
+                <p className="text-green-700 dark:text-green-300 font-medium">
+                  ✓ Work completed successfully
+                </p>
+                <p className="text-sm text-green-600 dark:text-green-400 mt-2">
+                  Time has been logged automatically
+                </p>
+              </div>
+            ) : (
               <p className="theme-text-muted text-sm">
-                No actions available for current status: {appointment.status}
+                No time tracking available for current status: {appointment.status}
               </p>
             )}
           </section>
diff --git a/src/components/TimeTracker.tsx b/src/components/TimeTracker.tsx
new file mode 100644
index 0000000..eeeffe9
--- /dev/null
+++ b/src/components/TimeTracker.tsx
@@ -0,0 +1,176 @@
+'use client'
+import { useEffect, useState } from 'react'
+import { appointmentService } from '@/services/appointmentService'
+import type { TimeSessionResponse } from '@/types/appointment'
+
+interface TimeTrackerProps {
+  appointmentId: string
+  onClockIn?: () => void
+  onClockOut?: () => void
+}
+
+export default function TimeTracker({ appointmentId, onClockIn, onClockOut }: TimeTrackerProps) {
+  const [timeSession, setTimeSession] = useState<TimeSessionResponse | null>(null)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [elapsedSeconds, setElapsedSeconds] = useState(0)
+
+  // Load active time session
+  const loadTimeSession = async () => {
+    try {
+      const session = await appointmentService.getActiveTimeSession(appointmentId)
+      setTimeSession(session)
+      if (session) {
+        setElapsedSeconds(session.elapsedSeconds)
+      }
+    } catch (err: unknown) {
+      console.error('Failed to load time session:', err)
+    }
+  }
+
+  useEffect(() => {
+    loadTimeSession()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [appointmentId])
+
+  // Update timer every second if session is active
+  useEffect(() => {
+    if (!timeSession?.active) return
+
+    const interval = setInterval(async () => {
+      try {
+        const session = await appointmentService.getActiveTimeSession(appointmentId)
+        if (session) {
+          setElapsedSeconds(session.elapsedSeconds)
+        }
+      } catch (err) {
+        console.error('Failed to update timer:', err)
+      }
+    }, 1000)
+
+    return () => clearInterval(interval)
+  }, [appointmentId, timeSession?.active])
+
+  const handleClockIn = async () => {
+    try {
+      setLoading(true)
+      setError(null)
+      const session = await appointmentService.clockIn(appointmentId)
+      setTimeSession(session)
+      setElapsedSeconds(session.elapsedSeconds)
+      onClockIn?.()
+    } catch (err: unknown) {
+      const message = (err as { response?: { data?: { message?: string } } })?.response?.data?.message ||
+        'Failed to clock in'
+      setError(message)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleClockOut = async () => {
+    if (!window.confirm('Clock out and complete work? This will log your time automatically.')) {
+      return
+    }
+
+    try {
+      setLoading(true)
+      setError(null)
+      const session = await appointmentService.clockOut(appointmentId)
+      setTimeSession(session)
+      alert(`Work completed! ${session.hoursWorked?.toFixed(2)} hours logged.`)
+      onClockOut?.()
+    } catch (err: unknown) {
+      const message = (err as { response?: { data?: { message?: string } } })?.response?.data?.message ||
+        'Failed to clock out'
+      setError(message)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const formatTime = (seconds: number) => {
+    const hours = Math.floor(seconds / 3600)
+    const minutes = Math.floor((seconds % 3600) / 60)
+    const secs = seconds % 60
+    return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(secs).padStart(2, '0')}`
+  }
+
+  if (!timeSession || !timeSession.active) {
+    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">
+            {error}
+          </div>
+        )}
+        <button
+          onClick={handleClockIn}
+          disabled={loading}
+          className="px-6 py-3 bg-green-600 hover:bg-green-700 text-white rounded-lg font-medium transition-colors disabled:opacity-50 flex items-center gap-2"
+        >
+          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+          </svg>
+          {loading ? 'Starting...' : '⏱️ Clock In & Start Work'}
+        </button>
+      </div>
+    )
+  }
+
+  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">
+          {error}
+        </div>
+      )}
+
+      <div className="bg-gradient-to-r from-blue-50 to-blue-100 dark:from-blue-900/20 dark:to-blue-800/20 border-2 border-blue-300 dark:border-blue-700 rounded-lg p-6">
+        <div className="flex items-center justify-between mb-2">
+          <h3 className="text-sm font-medium text-blue-700 dark:text-blue-300">⏱️ Work in Progress</h3>
+          <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-semibold bg-green-500 text-white animate-pulse">
+            ● ACTIVE
+          </span>
+        </div>
+        
+        <div className="text-center my-6">
+          <div className="text-5xl font-mono font-bold text-blue-900 dark:text-blue-100 tracking-wider">
+            {formatTime(elapsedSeconds)}
+          </div>
+          <p className="text-sm text-blue-600 dark:text-blue-400 mt-2">Time Elapsed</p>
+        </div>
+
+        <div className="grid grid-cols-2 gap-4 text-sm">
+          <div>
+            <p className="text-blue-600 dark:text-blue-400">Started at</p>
+            <p className="font-medium text-blue-900 dark:text-blue-100">
+              {new Date(timeSession.clockInTime).toLocaleTimeString()}
+            </p>
+          </div>
+          <div>
+            <p className="text-blue-600 dark:text-blue-400">Estimated hours</p>
+            <p className="font-medium text-blue-900 dark:text-blue-100">
+              {(elapsedSeconds / 3600).toFixed(2)} hrs
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <button
+        onClick={handleClockOut}
+        disabled={loading}
+        className="w-full px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium transition-colors disabled:opacity-50 flex items-center justify-center gap-2"
+      >
+        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <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>
+        {loading ? 'Completing...' : '✓ Clock Out & Complete Work'}
+      </button>
+
+      <p className="text-xs text-center theme-text-muted">
+        Time is automatically logged when you clock out
+      </p>
+    </div>
+  )
+}
diff --git a/src/services/appointmentService.ts b/src/services/appointmentService.ts
index 9b6c6fb..0d89766 100644
--- a/src/services/appointmentService.ts
+++ b/src/services/appointmentService.ts
@@ -10,7 +10,8 @@ import type {
   ScheduleResponseDto,
   ServiceTypeResponseDto,
   ServiceTypeRequestDto,
-  AssignEmployeesRequestDto
+  AssignEmployeesRequestDto,
+  TimeSessionResponse
 } from '../types/appointment';
 
 export const appointmentService = {
@@ -73,6 +74,29 @@ export const appointmentService = {
     return res.data;
   },
 
+  // Time Tracking
+  async clockIn(appointmentId: string): Promise<TimeSessionResponse> {
+    const res = await api.post(`/appointments/${appointmentId}/clock-in`);
+    return res.data;
+  },
+
+  async clockOut(appointmentId: string): Promise<TimeSessionResponse> {
+    const res = await api.post(`/appointments/${appointmentId}/clock-out`);
+    return res.data;
+  },
+
+  async getActiveTimeSession(appointmentId: string): Promise<TimeSessionResponse | null> {
+    try {
+      const res = await api.get(`/appointments/${appointmentId}/time-session`);
+      return res.data;
+    } catch (error: unknown) {
+      if ((error as { response?: { status?: number } })?.response?.status === 204) {
+        return null; // No active session
+      }
+      throw error;
+    }
+  },
+
   // Availability & Scheduling
   async checkAvailability(params: {
     date: string; // YYYY-MM-DD
diff --git a/src/types/appointment.ts b/src/types/appointment.ts
index 704ec37..889ce8c 100644
--- a/src/types/appointment.ts
+++ b/src/types/appointment.ts
@@ -133,3 +133,15 @@ export interface ServiceTypeResponseDto {
 export interface AssignEmployeesRequestDto {
   employeeIds: string[];
 }
+
+// Time Tracking Types
+export interface TimeSessionResponse {
+  id: string;
+  appointmentId: string;
+  employeeId: string;
+  clockInTime: string;
+  clockOutTime?: string;
+  active: boolean;
+  elapsedSeconds: number;
+  hoursWorked?: number;
+}

From 838e6fd2b46f95bbdb8a163d693ca84d486c1920 Mon Sep 17 00:00:00 2001
From: Akith-002 <chandinubaa.22@uom.lk>
Date: Tue, 11 Nov 2025 18:45:49 +0530
Subject: [PATCH 31/38] feat: Add role-based access control for user role
 management and update API base URL configuration

---
 package-lock.json        |  9 +++++++++
 public/runtime-config.js | 13 +++++++++++++
 src/lib/apiClient.ts     |  2 +-
 3 files changed, 23 insertions(+), 1 deletion(-)
 create mode 100644 public/runtime-config.js

diff --git a/package-lock.json b/package-lock.json
index 004eb4e..b09b2b8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1310,6 +1310,7 @@
       "integrity": "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "csstype": "^3.0.2"
       }
@@ -1377,6 +1378,7 @@
       "integrity": "sha512-6m1I5RmHBGTnUGS113G04DMu3CpSdxCAU/UvtjNWL4Nuf3MW9tQhiJqRlHzChIkhy6kZSAQmc+I1bcGjE3yNKg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.46.3",
         "@typescript-eslint/types": "8.46.3",
@@ -1894,6 +1896,7 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -2766,6 +2769,7 @@
       "integrity": "sha512-BhHmn2yNOFA9H9JmmIVKJmd288g9hrVRDkdoIgRCRuSySRUHH7r/DI6aAXW9T1WwUuY3DFgrcaqB+deURBLR5g==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -2939,6 +2943,7 @@
       "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@rtsao/scc": "^1.1.0",
         "array-includes": "^3.1.9",
@@ -5162,6 +5167,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz",
       "integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -5171,6 +5177,7 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz",
       "integrity": "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "scheduler": "^0.26.0"
       },
@@ -5901,6 +5908,7 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -6050,6 +6058,7 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
diff --git a/public/runtime-config.js b/public/runtime-config.js
new file mode 100644
index 0000000..8a09c7d
--- /dev/null
+++ b/public/runtime-config.js
@@ -0,0 +1,13 @@
+// runtime-config.js
+// This file is intentionally simple and is loaded before the app hydrates.
+// In production you may overwrite this file at container startup with real
+// environment values. Example generation (Linux entrypoint):
+//   cat > /usr/share/app/public/runtime-config.js <<EOF
+//   window.__RUNTIME_CONFIG__ = { NEXT_PUBLIC_API_BASE_URL: "$NEXT_PUBLIC_API_BASE_URL" }
+//   EOF
+
+window.__RUNTIME_CONFIG__ = {
+  // Default values used for local development. Replace at runtime in containers.
+  // Point to the API Gateway service (update host/port as needed for your environment)
+  NEXT_PUBLIC_API_BASE_URL: "http://localhost:8080",
+};
diff --git a/src/lib/apiClient.ts b/src/lib/apiClient.ts
index d880cb6..ec11b5d 100644
--- a/src/lib/apiClient.ts
+++ b/src/lib/apiClient.ts
@@ -6,7 +6,7 @@ import { config } from '@/config/runtime';
 const API_BASE_URL = config.NEXT_PUBLIC_API_BASE_URL;
 
 const apiClient = axios.create({
-  baseURL: API_BASE_URL,
+  baseURL: `${API_BASE_URL}/api/v1`,
   headers: { 'Content-Type': 'application/json' },
 });
 

From 7b79b1ce898fabf310ccb1f977dab890725950e4 Mon Sep 17 00:00:00 2001
From: Akith-002 <chandinubaa.22@uom.lk>
Date: Tue, 11 Nov 2025 20:49:13 +0530
Subject: [PATCH 32/38] refactor: Change service type deletion from soft delete
 to hard delete; update appointment handling and UI for better clarity and
 user experience

---
 src/app/components/AddVehicleForm.tsx         |  12 +-
 .../dashboard/admin/service-types/page.tsx    |  12 +-
 .../appointments/[appointmentId]/page.tsx     |  29 +++-
 src/app/dashboard/appointments/book/page.tsx  | 158 ++++++++++--------
 4 files changed, 132 insertions(+), 79 deletions(-)

diff --git a/src/app/components/AddVehicleForm.tsx b/src/app/components/AddVehicleForm.tsx
index f124ca8..c5a9c0d 100644
--- a/src/app/components/AddVehicleForm.tsx
+++ b/src/app/components/AddVehicleForm.tsx
@@ -30,7 +30,17 @@ export default function AddVehicleForm({ onSuccess, onCancel }: AddVehicleFormPr
       await vehicleService.registerVehicle(formData);
       onSuccess();
     } catch (err: unknown) {
-      const errorMessage = (err as { response?: { data?: { message?: string } } })?.response?.data?.message || 'Failed to add vehicle';
+      let errorMessage = 'Failed to add vehicle';
+
+      const errorResponse = (err as { response?: { status?: number; data?: { message?: string } } });
+
+      // Handle 409 Conflict - Duplicate VIN
+      if (errorResponse?.response?.status === 409) {
+        errorMessage = 'This VIN is already registered in the system. Please check the VIN and try again.';
+      } else {
+        errorMessage = errorResponse?.response?.data?.message || errorMessage;
+      }
+
       setError(errorMessage);
     } finally {
       setLoading(false);
diff --git a/src/app/dashboard/admin/service-types/page.tsx b/src/app/dashboard/admin/service-types/page.tsx
index dd4c9af..ca8ab4c 100644
--- a/src/app/dashboard/admin/service-types/page.tsx
+++ b/src/app/dashboard/admin/service-types/page.tsx
@@ -15,7 +15,7 @@ export default function ServiceTypesPage() {
     name: '',
     category: 'MAINTENANCE',
     description: '',
-    price: 0,
+    price: '',
     durationMinutes: 30,
   });
 
@@ -46,7 +46,7 @@ export default function ServiceTypesPage() {
       name: '',
       category: 'MAINTENANCE',
       description: '',
-      price: 0,
+      price: '',
       durationMinutes: 30,
     });
     setShowModal(true);
@@ -58,7 +58,7 @@ export default function ServiceTypesPage() {
       name: service.name,
       category: service.category,
       description: service.description || '',
-      price: service.basePriceLKR,
+      price: service.basePriceLKR.toString(),
       durationMinutes: service.estimatedDurationMinutes,
     });
     setShowModal(true);
@@ -75,7 +75,7 @@ export default function ServiceTypesPage() {
           name: formData.name,
           category: formData.category,
           description: formData.description,
-          price: formData.price,
+          price: parseFloat(formData.price) || 0,
           durationMinutes: formData.durationMinutes,
           active: editingService.active, // Keep existing active status
         };
@@ -88,7 +88,7 @@ export default function ServiceTypesPage() {
           name: formData.name,
           category: formData.category,
           description: formData.description,
-          price: formData.price,
+          price: parseFloat(formData.price) || 0,
           durationMinutes: formData.durationMinutes,
         };
         await adminService.createServiceType(createData);
@@ -351,7 +351,7 @@ export default function ServiceTypesPage() {
                       min="0"
                       step="0.01"
                       value={formData.price}
-                      onChange={(e) => setFormData({ ...formData, price: parseFloat(e.target.value) || 0 })}
+                      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"
                       placeholder="5000"
                     />
diff --git a/src/app/dashboard/appointments/[appointmentId]/page.tsx b/src/app/dashboard/appointments/[appointmentId]/page.tsx
index 99fbbc6..5cc73f5 100644
--- a/src/app/dashboard/appointments/[appointmentId]/page.tsx
+++ b/src/app/dashboard/appointments/[appointmentId]/page.tsx
@@ -60,15 +60,15 @@ export default function AppointmentDetailPage() {
         setLoading(true)
         const data = await appointmentService.getAppointmentDetails(appointmentId)
         setAppointment(data)
-        setStatus(data.status) // Initialize status dropdown with current appointment status
+        setStatus(data.status)
         setError(null)
 
         const requested = new Date(data.requestedDateTime)
         setRescheduleDate(requested.toISOString().slice(0, 10))
         setRescheduleTime(requested.toISOString().slice(11, 16))
         setNotes(data.specialInstructions ?? '')
-        setStatus(data.status)
-        setSelectedEmployeeIds(data.assignedEmployeeIds || [])
+        // Ensure selectedEmployeeIds is properly set from appointment data
+        setSelectedEmployeeIds(data.assignedEmployeeIds ? [...data.assignedEmployeeIds] : [])
       } catch (err: unknown) {
         const message = (err as { response?: { data?: { message?: string } } })?.response?.data?.message ||
           'Failed to load appointment details'
@@ -435,10 +435,22 @@ export default function AppointmentDetailPage() {
 
         {(roles?.includes('ADMIN') || roles?.includes('SUPER_ADMIN')) && (
           <section className="automotive-card p-6">
-            <h2 className="text-xl font-semibold theme-text-primary mb-4">Assign Employees</h2>
+            <div className="flex items-center justify-between mb-4">
+              <h2 className="text-xl font-semibold theme-text-primary">Assign or Change Employees</h2>
+              {appointment.assignedEmployeeIds && appointment.assignedEmployeeIds.length > 0 && (
+                <span className="px-3 py-1 rounded-full text-xs font-semibold bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300">
+                  {appointment.assignedEmployeeIds.length} assigned
+                </span>
+              )}
+            </div>
             <p className="theme-text-muted text-sm mb-4">
-              Select one or more employees to assign to this appointment. Employees will receive notifications.
+              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">
+              <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>
+            </div>
             <div className="space-y-2 mb-4 max-h-64 overflow-y-auto border border-gray-200 dark:border-gray-700 rounded-lg p-3">
               {employees.length === 0 ? (
                 <p className="theme-text-muted text-sm">No employees available</p>
@@ -458,6 +470,11 @@ export default function AppointmentDetailPage() {
                       <p className="theme-text-primary font-medium">{employee.fullName || employee.email}</p>
                       <p className="theme-text-muted text-xs">@{employee.username}</p>
                     </div>
+                    {appointment.assignedEmployeeIds?.includes(employee.username) && (
+                      <span className="text-xs bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300 px-2 py-1 rounded">
+                        Currently assigned
+                      </span>
+                    )}
                   </label>
                 ))
               )}
@@ -472,7 +489,7 @@ export default function AppointmentDetailPage() {
                 onClick={handleAssignEmployees}
                 disabled={assigning || selectedEmployeeIds.length === 0}
               >
-                {assigning ? 'Assigning...' : 'Assign Employees'}
+                {assigning ? 'Updating...' : 'Update Assignments'}
               </button>
             </div>
           </section>
diff --git a/src/app/dashboard/appointments/book/page.tsx b/src/app/dashboard/appointments/book/page.tsx
index 7f01f20..5dd8f5c 100644
--- a/src/app/dashboard/appointments/book/page.tsx
+++ b/src/app/dashboard/appointments/book/page.tsx
@@ -63,39 +63,68 @@ export default function BookAppointmentPage() {
     serviceTypes.find((service) => service.id === form.serviceTypeId) ?? null
   ), [form.serviceTypeId, serviceTypes])
 
+  // Filter out past time slots for today
+  const filteredAvailableSlots = useMemo(() => {
+    if (!availability) return []
+
+    const today = new Date().toISOString().slice(0, 10)
+    const isToday = form.date === today
+
+    if (!isToday) {
+      return availability.availableSlots
+    }
+
+    const now = new Date()
+    return availability.availableSlots.filter((slot) => {
+      const slotStartTime = new Date(slot.startTime)
+      return slotStartTime > now
+    })
+  }, [availability, form.date])
+
   const handleChange = (field: keyof BookingFormState, value: string) => {
     setForm((prev) => ({ ...prev, [field]: value }))
     if (field === 'serviceTypeId') {
       setAvailability(null)
+      setForm((prev) => ({ ...prev, time: '' }))
+    }
+    if (field === 'date') {
+      setAvailability(null)
+      setForm((prev) => ({ ...prev, time: '' }))
     }
   }
 
-  const handleCheckAvailability = async () => {
-    if (!form.serviceTypeId || !form.date) {
-      setError('Select a service type and date before checking availability.')
-      return
-    }
+  // Auto-check availability when date or service changes
+  useEffect(() => {
+    const autoCheckAvailability = async () => {
+      if (!form.serviceTypeId || !form.date) {
+        setAvailability(null)
+        return
+      }
 
-    const duration = selectedServiceType?.estimatedDurationMinutes ?? 60
+      const duration = selectedServiceType?.estimatedDurationMinutes ?? 60
 
-    try {
-      setCheckingAvailability(true)
-      const result = await appointmentService.checkAvailability({
-        date: form.date,
-        serviceType: selectedServiceType?.name || '',
-        duration,
-      })
-      setAvailability(result)
-      setError(null)
-    } catch (err: unknown) {
-      const message = (err as { response?: { data?: { message?: string } } })?.response?.data?.message ||
-        'Failed to check availability'
-      setError(message)
-      setAvailability(null)
-    } finally {
-      setCheckingAvailability(false)
+      try {
+        setCheckingAvailability(true)
+        const result = await appointmentService.checkAvailability({
+          date: form.date,
+          serviceType: selectedServiceType?.name || '',
+          duration,
+        })
+        setAvailability(result)
+        setError(null)
+      } catch (err: unknown) {
+        const message = (err as { response?: { data?: { message?: string } } })?.response?.data?.message ||
+          'Failed to check availability'
+        setError(message)
+        setAvailability(null)
+      } finally {
+        setCheckingAvailability(false)
+      }
     }
-  }
+
+    const timer = setTimeout(autoCheckAvailability, 300) // Debounce by 300ms
+    return () => clearTimeout(timer)
+  }, [form.serviceTypeId, form.date, selectedServiceType])
 
   const handleSlotSelect = (time: string) => {
     setForm((prev) => ({ ...prev, time }))
@@ -105,7 +134,7 @@ export default function BookAppointmentPage() {
     event.preventDefault()
 
     if (!form.vehicleId || !form.serviceTypeId || !form.date || !form.time) {
-      setError('Please complete all required fields before booking.')
+      setError('Please complete all required fields and select an available time slot.')
       return
     }
 
@@ -147,7 +176,7 @@ export default function BookAppointmentPage() {
       <div className="mb-8">
         <h1 className="text-3xl font-bold theme-text-primary mb-2">Book Appointment</h1>
         <p className="theme-text-muted">
-          Choose your vehicle, select a service, and reserve a time slot that works for you.
+          Choose your vehicle, select a service and date to see available time slots.
         </p>
       </div>
 
@@ -200,41 +229,17 @@ export default function BookAppointmentPage() {
           </label>
         </div>
 
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-          <label className="block">
-            <span className="block text-sm font-medium theme-text-primary mb-2">Date</span>
-            <input
-              type="date"
-              value={form.date}
-              onChange={(event) => handleChange('date', event.target.value)}
-              className="w-full rounded-lg border border-gray-300 dark:border-gray-700 theme-bg-primary theme-text-primary px-3 py-2"
-              min={new Date().toISOString().slice(0, 10)}
-              required
-            />
-          </label>
-
-          <label className="block">
-            <span className="block text-sm font-medium theme-text-primary mb-2">Preferred Time</span>
-            <input
-              type="time"
-              value={form.time}
-              onChange={(event) => handleChange('time', event.target.value)}
-              className="w-full rounded-lg border border-gray-300 dark:border-gray-700 theme-bg-primary theme-text-primary px-3 py-2"
-              required
-            />
-          </label>
-
-          <div className="flex items-end">
-            <button
-              type="button"
-              onClick={handleCheckAvailability}
-              className="theme-button-secondary w-full"
-              disabled={checkingAvailability}
-            >
-              {checkingAvailability ? 'Checking...' : 'Check Availability'}
-            </button>
-          </div>
-        </div>
+        <label className="block">
+          <span className="block text-sm font-medium theme-text-primary mb-2">Date</span>
+          <input
+            type="date"
+            value={form.date}
+            onChange={(event) => handleChange('date', event.target.value)}
+            className="w-full rounded-lg border border-gray-300 dark:border-gray-700 theme-bg-primary theme-text-primary px-3 py-2"
+            min={new Date().toISOString().slice(0, 10)}
+            required
+          />
+        </label>
 
         {selectedServiceType && (
           <div className="p-4 rounded-lg bg-blue-50 dark:bg-blue-900/20 text-sm theme-text-secondary">
@@ -244,17 +249,32 @@ export default function BookAppointmentPage() {
           </div>
         )}
 
-        {availability && (
+        {checkingAvailability && (
+          <div className="p-4 rounded-lg bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800">
+            <p className="theme-text-secondary text-sm">
+              <span className="inline-block animate-spin mr-2">⏳</span>
+              Checking availability for {form.date}...
+            </p>
+          </div>
+        )}
+
+        {availability && !checkingAvailability && (
           <div>
             <div className="flex items-center justify-between mb-3">
               <h3 className="text-lg font-semibold theme-text-primary">Available time slots</h3>
-              <span className="text-sm theme-text-muted">{availability.availableSlots.length} slots available</span>
+              <span className="text-sm theme-text-muted">{filteredAvailableSlots.length} slots available</span>
             </div>
-            {availability.availableSlots.length === 0 ? (
-              <p className="theme-text-muted text-sm">No slots available for the selected date. Try another date.</p>
+            {filteredAvailableSlots.length === 0 ? (
+              <div className="p-4 rounded-lg bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800">
+                <p className="theme-text-secondary text-sm">
+                  {form.date === new Date().toISOString().slice(0, 10)
+                    ? '⏰ All available slots for today have passed. Please select a future date.'
+                    : 'No slots available for the selected date. Try another date.'}
+                </p>
+              </div>
             ) : (
               <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
-                {availability.availableSlots.map((slot) => (
+                {filteredAvailableSlots.map((slot) => (
                   <button
                     key={`${slot.startTime}-${slot.endTime}`}
                     type="button"
@@ -275,6 +295,12 @@ export default function BookAppointmentPage() {
           </div>
         )}
 
+        {form.date && form.serviceTypeId && !availability && !checkingAvailability && (
+          <p className="text-sm theme-text-muted italic">
+            No availability data loaded. Please check your date and service selections.
+          </p>
+        )}
+
         <label className="block">
           <span className="block text-sm font-medium theme-text-primary mb-2">Special instructions</span>
           <textarea
@@ -297,7 +323,7 @@ export default function BookAppointmentPage() {
           <button
             type="submit"
             className="theme-button-primary"
-            disabled={submitting}
+            disabled={submitting || !form.time || checkingAvailability}
           >
             {submitting ? 'Booking...' : 'Confirm Appointment'}
           </button>

From ba9415a3eafd53bb3ff1c33ec382b7b5638075b4 Mon Sep 17 00:00:00 2001
From: Akith-002 <chandinubaa.22@uom.lk>
Date: Tue, 11 Nov 2025 22:06:23 +0530
Subject: [PATCH 33/38] feat: Add customer confirmation for appointment
 completion and update status transitions

---
 .../appointments/[appointmentId]/page.tsx     | 50 ++++++++++++++++++-
 src/services/appointmentService.ts            |  5 ++
 2 files changed, 54 insertions(+), 1 deletion(-)

diff --git a/src/app/dashboard/appointments/[appointmentId]/page.tsx b/src/app/dashboard/appointments/[appointmentId]/page.tsx
index 5cc73f5..af74cac 100644
--- a/src/app/dashboard/appointments/[appointmentId]/page.tsx
+++ b/src/app/dashboard/appointments/[appointmentId]/page.tsx
@@ -20,6 +20,7 @@ const STATUS_OPTIONS: StatusOption[] = [
   { value: 'CONFIRMED', label: 'Confirmed' },
   { value: 'IN_PROGRESS', label: 'In Progress' },
   { value: 'COMPLETED', label: 'Completed' },
+  { value: 'CUSTOMER_CONFIRMED', label: 'Confirmed Complete' },
   { value: 'CANCELLED', label: 'Cancelled' },
   { value: 'NO_SHOW', label: 'No Show' },
 ]
@@ -158,6 +159,27 @@ export default function AppointmentDetailPage() {
     }
   }
 
+  const handleConfirmCompletion = async () => {
+    if (!appointment) return
+    if (!window.confirm('Are you sure you want to confirm completion of this appointment?')) {
+      return
+    }
+
+    try {
+      setStatusUpdating(true)
+      const updated = await appointmentService.confirmCompletion(appointment.id)
+      setAppointment(updated)
+      setStatus(updated.status)
+      setError(null)
+    } catch (err: unknown) {
+      const message = (err as { response?: { data?: { message?: string } } })?.response?.data?.message ||
+        'Failed to confirm completion'
+      setError(message)
+    } finally {
+      setStatusUpdating(false)
+    }
+  }
+
   const handleAssignEmployees = async () => {
     if (!appointment) return
     if (selectedEmployeeIds.length === 0) {
@@ -756,6 +778,32 @@ export default function AppointmentDetailPage() {
           </section>
         )}
 
+        {roles?.includes('CUSTOMER') && appointment?.status === 'COMPLETED' && (
+          <section className="automotive-card p-6 border-2 border-green-200 dark:border-green-800">
+            <h2 className="text-xl font-semibold text-green-600 dark:text-green-400 mb-4">✓ Confirm Completion</h2>
+            <p className="theme-text-muted mb-4">
+              The work on your appointment has been completed. Please review the service and confirm completion to finalize the appointment.
+            </p>
+            <button
+              type="button"
+              className="bg-green-600 hover:bg-green-700 text-white px-6 py-3 rounded-lg font-medium"
+              onClick={handleConfirmCompletion}
+              disabled={statusUpdating}
+            >
+              {statusUpdating ? 'Confirming...' : '✓ Confirm Completion'}
+            </button>
+          </section>
+        )}
+
+        {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">
+            <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.
+            </p>
+          </section>
+        )}
+
         {roles?.includes('CUSTOMER') && (
           <section className="automotive-card p-6 border border-red-200 dark:border-red-800">
             <h2 className="text-xl font-semibold text-red-600 dark:text-red-400 mb-4">Danger zone</h2>
@@ -764,7 +812,7 @@ export default function AppointmentDetailPage() {
               type="button"
               className="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg"
               onClick={handleCancel}
-              disabled={saving}
+              disabled={saving || appointment?.status === 'CUSTOMER_CONFIRMED'}
             >
               Cancel appointment
             </button>
diff --git a/src/services/appointmentService.ts b/src/services/appointmentService.ts
index 0d89766..3a17f76 100644
--- a/src/services/appointmentService.ts
+++ b/src/services/appointmentService.ts
@@ -74,6 +74,11 @@ export const appointmentService = {
     return res.data;
   },
 
+  async confirmCompletion(appointmentId: string): Promise<AppointmentResponseDto> {
+    const res = await api.post(`/appointments/${appointmentId}/confirm-completion`);
+    return res.data;
+  },
+
   // Time Tracking
   async clockIn(appointmentId: string): Promise<TimeSessionResponse> {
     const res = await api.post(`/appointments/${appointmentId}/clock-in`);

From c7a9fea7844b90bd315409e883312bed46bee6de Mon Sep 17 00:00:00 2001
From: Akith-002 <chandinubaa.22@uom.lk>
Date: Tue, 11 Nov 2025 22:07:13 +0530
Subject: [PATCH 34/38] refactor: Remove unused imports and clean up
 appointment service code

---
 src/services/appointmentService.ts | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/services/appointmentService.ts b/src/services/appointmentService.ts
index 3a17f76..8ea5363 100644
--- a/src/services/appointmentService.ts
+++ b/src/services/appointmentService.ts
@@ -79,11 +79,6 @@ export const appointmentService = {
     return res.data;
   },
 
-  // Time Tracking
-  async clockIn(appointmentId: string): Promise<TimeSessionResponse> {
-    const res = await api.post(`/appointments/${appointmentId}/clock-in`);
-    return res.data;
-  },
 
   async clockOut(appointmentId: string): Promise<TimeSessionResponse> {
     const res = await api.post(`/appointments/${appointmentId}/clock-out`);

From 722ae779e56ed1bec70f46c79856c5ebc0086713 Mon Sep 17 00:00:00 2001
From: RandithaK <bharkula3@gmail.com>
Date: Tue, 11 Nov 2025 22:56:47 +0530
Subject: [PATCH 35/38] feat: Add clock-in functionality to appointment service
 and update appointment status type

---
 src/app/auth/resend-verification/page.tsx | 168 ++++++++++++----------
 src/app/dashboard/schedule/page.tsx       |   4 +-
 src/services/appointmentService.ts        |   4 +
 src/types/appointment.ts                  |   1 +
 4 files changed, 96 insertions(+), 81 deletions(-)

diff --git a/src/app/auth/resend-verification/page.tsx b/src/app/auth/resend-verification/page.tsx
index 6080439..683ced8 100644
--- a/src/app/auth/resend-verification/page.tsx
+++ b/src/app/auth/resend-verification/page.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, Suspense } from 'react';
 import Link from 'next/link';
 import { useSearchParams } from 'next/navigation';
 import authService from '../../../services/authService';
@@ -15,7 +15,7 @@ const Icon = ({ d, size = 10 }: { d: string; size?: number }) => (
 const BoltIcon = ({size = 10}) => <Icon d="M13 10V3L4 14h7v7l9-11h-7z" size={size} />;
 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>;
 
-export default function ResendVerificationPage() {
+function ResendVerificationContent() {
   const searchParams = useSearchParams();
   const emailParam = searchParams.get('email');
 
@@ -47,6 +47,90 @@ export default function ResendVerificationPage() {
     }
   };
 
+  return (
+    <>
+      {success ? (
+        <div className="text-center">
+          <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-green-100 dark:bg-green-900/20 flex items-center justify-center">
+            <svg className="w-10 h-10 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+            </svg>
+          </div>
+          <h3 className="text-2xl font-bold theme-text-primary mb-4">
+            Email Sent!
+          </h3>
+          <p className="theme-text-muted mb-6">
+            We&apos;ve sent a new verification link to <strong>{email}</strong>.
+            Please check your inbox and click the link to verify your account.
+          </p>
+          <div className="space-y-3">
+            <Link href="/auth/login" className="theme-button-primary w-full block">
+              Back to Login
+            </Link>
+            <button
+              onClick={() => {
+                setSuccess(false);
+                setError(null);
+              }}
+              className="theme-button-secondary w-full"
+            >
+              Send Another Email
+            </button>
+          </div>
+        </div>
+      ) : (
+        <form className="space-y-6" onSubmit={handleSubmit}>
+          <div className="theme-form-group">
+            <label htmlFor="email" className="block text-sm font-semibold theme-text-secondary mb-2">
+              Email Address
+            </label>
+            <input
+              id="email"
+              name="email"
+              type="email"
+              autoComplete="email"
+              required
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              className="theme-input w-full"
+              placeholder="you@example.com"
+            />
+          </div>
+
+          <div>
+            <button 
+              type="submit" 
+              disabled={loading} 
+              className="theme-button-primary w-full text-lg font-semibold py-4 rounded-xl flex items-center justify-center disabled:opacity-60"
+            >
+              <MailIcon />
+              {loading ? 'Sending...' : 'Resend Verification Email'}
+            </button>
+          </div>
+        </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">{error}</p>
+        </div>
+      )}
+
+      {!success && (
+        <div className="mt-6 text-center">
+          <p className="text-sm theme-text-muted">
+            Remember your password?{' '}
+            <Link href="/auth/login" className="theme-link font-semibold">
+              Sign In
+            </Link>
+          </p>
+        </div>
+      )}
+    </>
+  );
+}
+
+export default function ResendVerificationPage() {
   return (
     <div className="min-h-screen theme-bg-primary font-sans">
       {/* Header */}
@@ -85,83 +169,9 @@ export default function ResendVerificationPage() {
               </p>
             </div>
 
-            {success ? (
-              <div className="text-center">
-                <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-green-100 dark:bg-green-900/20 flex items-center justify-center">
-                  <svg className="w-10 h-10 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
-                  </svg>
-                </div>
-                <h3 className="text-2xl font-bold theme-text-primary mb-4">
-                  Email Sent!
-                </h3>
-                <p className="theme-text-muted mb-6">
-                  We&apos;ve sent a new verification link to <strong>{email}</strong>.
-                  Please check your inbox and click the link to verify your account.
-                </p>
-                <div className="space-y-3">
-                  <Link href="/auth/login" className="theme-button-primary w-full block">
-                    Back to Login
-                  </Link>
-                  <button
-                    onClick={() => {
-                      setSuccess(false);
-                      setError(null);
-                    }}
-                    className="theme-button-secondary w-full"
-                  >
-                    Send Another Email
-                  </button>
-                </div>
-              </div>
-            ) : (
-              <form className="space-y-6" onSubmit={handleSubmit}>
-                <div className="theme-form-group">
-                  <label htmlFor="email" className="block text-sm font-semibold theme-text-secondary mb-2">
-                    Email Address
-                  </label>
-                  <input
-                    id="email"
-                    name="email"
-                    type="email"
-                    autoComplete="email"
-                    required
-                    value={email}
-                    onChange={(e) => setEmail(e.target.value)}
-                    className="theme-input w-full"
-                    placeholder="you@example.com"
-                  />
-                </div>
-
-                <div>
-                  <button 
-                    type="submit" 
-                    disabled={loading} 
-                    className="theme-button-primary w-full text-lg font-semibold py-4 rounded-xl flex items-center justify-center disabled:opacity-60"
-                  >
-                    <MailIcon />
-                    {loading ? 'Sending...' : 'Resend Verification Email'}
-                  </button>
-                </div>
-              </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">{error}</p>
-              </div>
-            )}
-
-            {!success && (
-              <div className="mt-6 text-center">
-                <p className="text-sm theme-text-muted">
-                  Remember your password?{' '}
-                  <Link href="/auth/login" className="theme-link font-semibold">
-                    Sign In
-                  </Link>
-                </p>
-              </div>
-            )}
+            <Suspense fallback={<div className="text-center theme-text-muted">Loading...</div>}>
+              <ResendVerificationContent />
+            </Suspense>
           </div>
         </div>
       </main>
diff --git a/src/app/dashboard/schedule/page.tsx b/src/app/dashboard/schedule/page.tsx
index 08897b3..b792d1c 100644
--- a/src/app/dashboard/schedule/page.tsx
+++ b/src/app/dashboard/schedule/page.tsx
@@ -259,12 +259,12 @@ export default function SchedulePage() {
                         </svg>
                         <span>Vehicle: {appointment.vehicleId}</span>
                       </div>
-                      {appointment.assignedEmployeeId && (
+                      {appointment.assignedEmployeeIds && appointment.assignedEmployeeIds.length > 0 && (
                         <div className="flex items-center gap-1">
                           <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                             <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>
-                          <span>Assigned: {appointment.assignedEmployeeId}</span>
+                          <span>Assigned: {appointment.assignedEmployeeIds.join(', ')}</span>
                         </div>
                       )}
                     </div>
diff --git a/src/services/appointmentService.ts b/src/services/appointmentService.ts
index 8ea5363..bf62a9d 100644
--- a/src/services/appointmentService.ts
+++ b/src/services/appointmentService.ts
@@ -79,6 +79,10 @@ export const appointmentService = {
     return res.data;
   },
 
+  async clockIn(appointmentId: string): Promise<TimeSessionResponse> {
+    const res = await api.post(`/appointments/${appointmentId}/clock-in`);
+    return res.data;
+  },
 
   async clockOut(appointmentId: string): Promise<TimeSessionResponse> {
     const res = await api.post(`/appointments/${appointmentId}/clock-out`);
diff --git a/src/types/appointment.ts b/src/types/appointment.ts
index 889ce8c..044c07a 100644
--- a/src/types/appointment.ts
+++ b/src/types/appointment.ts
@@ -34,6 +34,7 @@ export type AppointmentStatus =
   | 'CONFIRMED'
   | 'IN_PROGRESS'
   | 'COMPLETED'
+  | 'CUSTOMER_CONFIRMED'
   | 'CANCELLED'
   | 'NO_SHOW';
 

From 5c3f926eded2569fb0e637fe1f9fa2d56d2c13d4 Mon Sep 17 00:00:00 2001
From: RandithaK <bharkula3@gmail.com>
Date: Tue, 11 Nov 2025 23:02:31 +0530
Subject: [PATCH 36/38] refactor: Update notification callback type to unknown
 and improve WebSocket factory type assertion

---
 src/app/dashboard/payments/page.tsx | 9 +++++----
 src/services/websocketService.ts    | 5 +++--
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/app/dashboard/payments/page.tsx b/src/app/dashboard/payments/page.tsx
index 45c6afc..fee3028 100644
--- a/src/app/dashboard/payments/page.tsx
+++ b/src/app/dashboard/payments/page.tsx
@@ -1,6 +1,7 @@
 'use client'
 
 import { useEffect, useMemo, useState } from 'react'
+import Link from 'next/link'
 import { paymentService } from '@/services/paymentService'
 import type { PaymentResponseDto } from '@/types/payment'
 
@@ -111,12 +112,12 @@ export default function PaymentHistoryPage() {
             This page is only available for customer accounts. As an employee, you can view invoices and time logs instead.
           </p>
           <div className="flex gap-3 justify-center">
-            <a href="/dashboard/invoices" className="theme-button-primary">
+            <Link href="/dashboard/invoices" className="theme-button-primary">
               View Invoices
-            </a>
-            <a href="/dashboard/time-logs" className="theme-button-secondary">
+            </Link>
+            <Link href="/dashboard/time-logs" className="theme-button-secondary">
               View Time Logs
-            </a>
+            </Link>
           </div>
         </div>
       </div>
diff --git a/src/services/websocketService.ts b/src/services/websocketService.ts
index 0e7a87a..3037876 100644
--- a/src/services/websocketService.ts
+++ b/src/services/websocketService.ts
@@ -2,7 +2,7 @@
 import { Client, IMessage, StompSubscription } from '@stomp/stompjs';
 import SockJS from 'sockjs-client';
 
-export type NotificationCallback = (notification: any) => void;
+export type NotificationCallback = (notification: unknown) => void;
 export type UnreadCountCallback = (count: number) => void;
 
 class WebSocketService {
@@ -28,7 +28,8 @@ class WebSocketService {
     const wsUrl = process.env.NEXT_PUBLIC_NOTIFICATION_WS_URL || 'http://localhost:8088/ws/notifications';
 
     this.client = new Client({
-      webSocketFactory: () => new SockJS(wsUrl) as any,
+  // SockJS returns a WebSocket-like object; assert to WebSocket compatible type to satisfy the STOMP client
+  webSocketFactory: () => new SockJS(wsUrl) as unknown as WebSocket,
       debug: (str) => {
         if (process.env.NODE_ENV === 'development') {
           console.log('[STOMP Debug]:', str);

From f02ffc09b9479e6aecc16cdb93e618e8e4144e94 Mon Sep 17 00:00:00 2001
From: RandithaK <bharkula3@gmail.com>
Date: Tue, 11 Nov 2025 23:16:38 +0530
Subject: [PATCH 37/38] feat: Add git hooks for linting and build checks;
 include setup script and documentation

---
 .githooks/pre-commit | 19 ++++++++++++++
 .githooks/pre-push   | 19 ++++++++++++++
 GIT_HOOKS.md         | 61 ++++++++++++++++++++++++++++++++++++++++++++
 README.md            |  6 +++++
 package.json         |  3 ++-
 setup-hooks.sh       | 22 ++++++++++++++++
 6 files changed, 129 insertions(+), 1 deletion(-)
 create mode 100755 .githooks/pre-commit
 create mode 100755 .githooks/pre-push
 create mode 100644 GIT_HOOKS.md
 create mode 100755 setup-hooks.sh

diff --git a/.githooks/pre-commit b/.githooks/pre-commit
new file mode 100755
index 0000000..01d4da2
--- /dev/null
+++ b/.githooks/pre-commit
@@ -0,0 +1,19 @@
+#!/bin/bash
+
+# Git pre-commit hook to run ESLint
+# This hook runs on every commit to ensure code quality
+
+echo "🔍 Running ESLint check..."
+
+# Run lint check
+npm run lint
+
+# Check the exit status
+if [ $? -ne 0 ]; then
+    echo "❌ ESLint failed. Please fix the linting errors before committing."
+    echo "💡 Run 'npm run lint' to see the issues"
+    exit 1
+fi
+
+echo "✅ ESLint passed! Commit is proceeding..."
+exit 0
\ No newline at end of file
diff --git a/.githooks/pre-push b/.githooks/pre-push
new file mode 100755
index 0000000..a04cd31
--- /dev/null
+++ b/.githooks/pre-push
@@ -0,0 +1,19 @@
+#!/bin/bash
+
+# Git pre-push hook to run build check
+# This hook runs before pushing to ensure the project builds successfully
+
+echo "🏗️  Running build check before push..."
+
+# Run build check
+npm run build
+
+# Check the exit status
+if [ $? -ne 0 ]; then
+    echo "❌ Build failed. Please fix the build errors before pushing."
+    echo "💡 Run 'npm run build' to see the issues"
+    exit 1
+fi
+
+echo "✅ Build passed! Push is proceeding..."
+exit 0
\ No newline at end of file
diff --git a/GIT_HOOKS.md b/GIT_HOOKS.md
new file mode 100644
index 0000000..1fdc073
--- /dev/null
+++ b/GIT_HOOKS.md
@@ -0,0 +1,61 @@
+# Git Hooks
+
+This project uses git hooks to maintain code quality and ensure builds pass before commits and pushes.
+
+## Hooks Installed
+
+- **pre-commit**: Runs `npm run lint` before each commit
+  - Prevents commits if ESLint errors are found
+  - Ensures code follows the project's linting standards
+
+- **pre-push**: Runs `npm run build` before each push
+  - Prevents pushes if the build fails
+  - Ensures the project compiles successfully before sharing changes
+
+## Setup
+
+Run the setup script to configure git hooks:
+
+```bash
+./setup-hooks.sh
+```
+
+Or manually configure:
+
+```bash
+chmod +x .githooks/pre-commit .githooks/pre-push
+git config core.hooksPath .githooks
+```
+
+## Bypassing Hooks
+
+Sometimes you may need to bypass hooks (use sparingly):
+
+```bash
+# Skip pre-commit hook
+git commit --no-verify -m "your message"
+
+# Skip pre-push hook  
+git push --no-verify
+```
+
+## Hook Details
+
+### Pre-commit Hook
+- Runs automatically on `git commit`
+- Executes `npm run lint`
+- Exits with error code if linting fails
+- Shows helpful error messages
+
+### Pre-push Hook
+- Runs automatically on `git push`
+- Executes `npm run build`
+- Exits with error code if build fails
+- Prevents pushing broken code to remote repository
+
+## Benefits
+
+✅ **Code Quality**: Ensures all committed code passes linting standards
+✅ **Build Safety**: Prevents pushing code that doesn't compile
+✅ **Team Consistency**: All developers follow the same quality checks
+✅ **CI/CD Friendly**: Reduces failed builds in CI/CD pipelines
\ No newline at end of file
diff --git a/README.md b/README.md
index a8db4a8..1a202df 100644
--- a/README.md
+++ b/README.md
@@ -42,3 +42,9 @@ This repository contains the source code for the TechTorque 2025 customer and em
 
 3. **Access Application:**
    Open [http://localhost:3000](http://localhost:3000) in your browser.
+
+4. **Setup Git Hooks (Recommended):**
+   ```bash
+   npm run setup-hooks
+   ```
+   This configures automatic linting on commit and build checking on push. See [GIT_HOOKS.md](GIT_HOOKS.md) for details.
diff --git a/package.json b/package.json
index a3227be..f80d5b9 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,8 @@
     "dev": "next dev --turbopack",
     "build": "next build --turbopack",
     "start": "next start",
-    "lint": "eslint"
+    "lint": "eslint",
+    "setup-hooks": "chmod +x .githooks/pre-commit .githooks/pre-push && git config core.hooksPath .githooks && echo '✅ Git hooks configured successfully!'"
   },
   "dependencies": {
     "@stomp/stompjs": "^7.2.1",
diff --git a/setup-hooks.sh b/setup-hooks.sh
new file mode 100755
index 0000000..fec38f4
--- /dev/null
+++ b/setup-hooks.sh
@@ -0,0 +1,22 @@
+#!/bin/bash
+
+# Setup script for git hooks
+# Run this script to configure git hooks for the project
+
+echo "🔧 Setting up git hooks..."
+
+# Make hooks executable
+chmod +x .githooks/pre-commit .githooks/pre-push
+
+# Configure git to use our hooks directory
+git config core.hooksPath .githooks
+
+echo "✅ Git hooks configured successfully!"
+echo ""
+echo "Hooks installed:"
+echo "  📋 pre-commit: Runs 'npm run lint' before each commit"
+echo "  🏗️  pre-push: Runs 'npm run build' before each push"
+echo ""
+echo "To disable hooks temporarily, use:"
+echo "  git commit --no-verify    (skip pre-commit hook)"
+echo "  git push --no-verify      (skip pre-push hook)"
\ No newline at end of file

From 2258fe0233d6f16f6dcb982ae3d9bb6d205c924e Mon Sep 17 00:00:00 2001
From: RandithaK <bharkula3@gmail.com>
Date: Tue, 11 Nov 2025 23:16:44 +0530
Subject: [PATCH 38/38] refactor: Remove unused state variables and improve
 vehicle loading logic in project pages

---
 .../dashboard/projects/[projectId]/page.tsx    |  1 -
 src/app/dashboard/projects/page.tsx            |  1 -
 src/app/dashboard/projects/request/page.tsx    | 18 +++++++++---------
 .../dashboard/vehicles/[vehicleId]/page.tsx    |  7 +++++--
 src/app/profile/page.tsx                       | 13 +++----------
 src/components/ProfilePhotoUpload.tsx          |  7 ++-----
 src/services/websocketService.ts               |  3 ++-
 7 files changed, 21 insertions(+), 29 deletions(-)

diff --git a/src/app/dashboard/projects/[projectId]/page.tsx b/src/app/dashboard/projects/[projectId]/page.tsx
index 7420a08..22f6e27 100644
--- a/src/app/dashboard/projects/[projectId]/page.tsx
+++ b/src/app/dashboard/projects/[projectId]/page.tsx
@@ -16,7 +16,6 @@ export default function ProjectDetailPage() {
   const [loading, setLoading] = useState(true);
   const [actionLoading, setActionLoading] = useState(false);
   const [error, setError] = useState('');
-  const [rejectionReason, setRejectionReason] = useState('');
 
   const loadProject = async () => {
     try {
diff --git a/src/app/dashboard/projects/page.tsx b/src/app/dashboard/projects/page.tsx
index d915f8a..1e9c6dd 100644
--- a/src/app/dashboard/projects/page.tsx
+++ b/src/app/dashboard/projects/page.tsx
@@ -37,7 +37,6 @@ export default function ProjectsPage() {
   const [statusFilter, setStatusFilter] = useState<StatusFilter>('ALL')
 
   // Check if user is admin or super admin
-  const isAdminUser = roles.includes('SUPER_ADMIN') || roles.includes('ADMIN')
 
   const loadProjects = async () => {
     try {
diff --git a/src/app/dashboard/projects/request/page.tsx b/src/app/dashboard/projects/request/page.tsx
index 60db19b..b397221 100644
--- a/src/app/dashboard/projects/request/page.tsx
+++ b/src/app/dashboard/projects/request/page.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { useRouter } from 'next/navigation';
 import { projectService } from '@/services/projectService';
 import { vehicleService } from '@/services/vehicleService';
@@ -34,22 +34,18 @@ export default function RequestProjectPage() {
     budget: '',
   });
 
-  useEffect(() => {
-    loadVehicles();
-  }, []);
-
-  const loadVehicles = async () => {
+  const loadVehicles = useCallback(async () => {
     try {
       setFetchingVehicles(true);
       const data = await vehicleService.getMyVehicles();
 
       // Filter to only show vehicles owned by the logged-in user
       // This ensures that even users with admin roles only see their own vehicles when requesting projects
-      const userVehicles = data.filter(vehicle => vehicle.customerId === profile?.username);
+      const userVehicles = data.filter((vehicle) => vehicle.customerId === profile?.username);
 
       setVehicles(userVehicles);
       if (userVehicles.length > 0) {
-        setFormData(prev => ({ ...prev, vehicleId: userVehicles[0].vehicleId }));
+        setFormData((prev) => ({ ...prev, vehicleId: userVehicles[0].vehicleId }));
       }
     } catch (err) {
       console.error('Failed to load vehicles:', err);
@@ -57,7 +53,11 @@ export default function RequestProjectPage() {
     } finally {
       setFetchingVehicles(false);
     }
-  };
+  }, [profile?.username]);
+
+  useEffect(() => {
+    void loadVehicles();
+  }, [loadVehicles]);
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
diff --git a/src/app/dashboard/vehicles/[vehicleId]/page.tsx b/src/app/dashboard/vehicles/[vehicleId]/page.tsx
index f5b55f0..be97817 100644
--- a/src/app/dashboard/vehicles/[vehicleId]/page.tsx
+++ b/src/app/dashboard/vehicles/[vehicleId]/page.tsx
@@ -1,5 +1,6 @@
 "use client";
 import { useState, useEffect, useCallback } from 'react';
+import Image from 'next/image'
 import { useRouter, useParams } from 'next/navigation';
 import { vehicleService } from '@/services/vehicleService';
 import type { Vehicle, ServiceHistory } from '@/types/vehicle';
@@ -102,9 +103,11 @@ export default function VehicleDetailsPage() {
           <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">
               {vehicle.photos && vehicle.photos.length > 0 ? (
-                <img
+                <Image
                   src={vehicle.photos[0] as unknown as string}
                   alt={`${vehicle.make} ${vehicle.model}`}
+                  width={1200}
+                  height={480}
                   className="w-full h-72 object-cover"
                 />
               ) : (
@@ -119,7 +122,7 @@ export default function VehicleDetailsPage() {
               <div className="mt-4 flex gap-3">
                 {vehicle.photos.map((p, i) => (
                   <button key={i} className="w-24 h-16 rounded-md overflow-hidden border border-gray-200 dark:border-gray-700" onClick={() => window.scrollTo({top:0, behavior:'smooth'})}>
-                    <img src={p as unknown as string} alt={`photo-${i}`} className="w-full h-full object-cover" />
+                    <Image src={p as unknown as string} alt={`photo-${i}`} width={96} height={64} className="w-full h-full object-cover" />
                   </button>
                 ))}
               </div>
diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx
index b8c7d6f..13c1599 100644
--- a/src/app/profile/page.tsx
+++ b/src/app/profile/page.tsx
@@ -1,5 +1,6 @@
 "use client";
 import React, { useEffect, useState } from "react";
+import Image from 'next/image';
 import userService from "../../services/userService";
 import authService from "../../services/authService";
 import { useProfilePhotoCache } from "../../lib/useProfilePhotoCache";
@@ -338,11 +339,7 @@ export default function ProfilePage() {
                   {photoPreview ? (
                     <>
                       <div className="w-32 h-32 rounded-full overflow-hidden border-4 border-blue-500 flex items-center justify-center bg-gray-100 dark:bg-gray-800">
-                        <img
-                          src={photoPreview}
-                          alt="Photo preview"
-                          className="w-full h-full object-cover"
-                        />
+                        <Image src={photoPreview} alt="Photo preview" width={128} height={128} className="w-full h-full object-cover" />
                       </div>
                       <p className="text-sm text-blue-600 dark:text-blue-400">
                         Preview (not yet uploaded)
@@ -351,11 +348,7 @@ export default function ProfilePage() {
                   ) : profilePhoto ? (
                     <>
                       <div className="w-32 h-32 rounded-full overflow-hidden border-4 border-green-500 flex items-center justify-center bg-gray-100 dark:bg-gray-800">
-                        <img
-                          src={profilePhoto}
-                          alt="Current profile photo"
-                          className="w-full h-full object-cover"
-                        />
+                        <Image src={profilePhoto} alt="Current profile photo" width={128} height={128} className="w-full h-full object-cover" />
                       </div>
                       <p className="text-sm text-green-600 dark:text-green-400">
                         Current photo
diff --git a/src/components/ProfilePhotoUpload.tsx b/src/components/ProfilePhotoUpload.tsx
index 61bf021..0336367 100644
--- a/src/components/ProfilePhotoUpload.tsx
+++ b/src/components/ProfilePhotoUpload.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useState, useRef } from "react";
+import Image from 'next/image';
 import useProfilePhotoCache from "@/lib/useProfilePhotoCache";
 import userService from "@/services/userService";
 
@@ -154,11 +155,7 @@ export default function ProfilePhotoUpload({
         <div className="space-y-2">
           <p className="text-sm font-medium text-gray-700">Preview:</p>
           <div className="relative w-full max-w-xs mx-auto rounded-lg overflow-hidden border border-gray-200">
-            <img
-              src={previewUrl || photo || ""}
-              alt="Profile preview"
-              className="w-full h-auto object-cover"
-            />
+            <Image src={previewUrl || photo || ""} alt="Profile preview" width={400} height={300} className="w-full h-auto object-cover" />
           </div>
         </div>
       )}
diff --git a/src/services/websocketService.ts b/src/services/websocketService.ts
index 3037876..cb0b9fd 100644
--- a/src/services/websocketService.ts
+++ b/src/services/websocketService.ts
@@ -1,8 +1,9 @@
 "use client";
 import { Client, IMessage, StompSubscription } from '@stomp/stompjs';
+import type { NotificationResponse } from '@/types/notification';
 import SockJS from 'sockjs-client';
 
-export type NotificationCallback = (notification: unknown) => void;
+export type NotificationCallback = (notification: NotificationResponse) => void;
 export type UnreadCountCallback = (count: number) => void;
 
 class WebSocketService {