From efdcb18b64d2b77fa948e32962ee0f3e44cf1607 Mon Sep 17 00:00:00 2001
From: laxmanhalaki <laxman.halaki@tech4biz.org>
Date: Fri, 23 Jan 2026 20:36:20 +0530
Subject: [PATCH] dealer claimm related code commented

---
 .../components/ClosedRequestsFilters.tsx      |  12 +-
 src/custom/components/RequestsFilters.tsx     |  12 +-
 .../components/UserAllRequestsFilters.tsx     |  16 +-
 src/pages/Auth/Auth.tsx                       |  26 ++--
 .../components/ClosedRequestsFilters.tsx      |  12 +-
 .../components/MyRequestsFilters.tsx          |   4 +-
 src/pages/OpenRequests/OpenRequests.tsx       | 126 +++++++--------
 src/pages/Requests/Requests.tsx               | 144 +++++++++---------
 src/pages/Requests/components/RequestCard.tsx |  16 +-
 src/pages/Settings/Settings.tsx               |  64 ++++----
 10 files changed, 216 insertions(+), 216 deletions(-)

diff --git a/src/custom/components/ClosedRequestsFilters.tsx b/src/custom/components/ClosedRequestsFilters.tsx
index 17587c1..40ab79a 100644
--- a/src/custom/components/ClosedRequestsFilters.tsx
+++ b/src/custom/components/ClosedRequestsFilters.tsx
@@ -77,7 +77,7 @@ export function StandardClosedRequestsFilters({
         </div>
       </CardHeader>
       <CardContent className="space-y-3 sm:space-y-4 px-3 sm:px-6">
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-3 sm:gap-4">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4">
           <div className="relative">
             <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-3.5 h-3.5 sm:w-4 sm:h-4" />
             <Input
@@ -88,7 +88,7 @@ export function StandardClosedRequestsFilters({
               data-testid="closed-requests-search"
             />
           </div>
-          
+
           <Select value={priorityFilter} onValueChange={onPriorityChange}>
             <SelectTrigger className="h-9 sm:h-10 md:h-11 text-sm sm:text-base bg-gray-50 border-gray-200 focus:bg-white" data-testid="closed-requests-priority-filter">
               <SelectValue placeholder="All Priorities" />
@@ -109,7 +109,7 @@ export function StandardClosedRequestsFilters({
               </SelectItem>
             </SelectContent>
           </Select>
-          
+
           <Select value={statusFilter} onValueChange={onStatusChange}>
             <SelectTrigger className="h-9 sm:h-10 md:h-11 text-sm sm:text-base bg-gray-50 border-gray-200 focus:bg-white" data-testid="closed-requests-status-filter">
               <SelectValue placeholder="Closure Type" />
@@ -130,7 +130,7 @@ export function StandardClosedRequestsFilters({
               </SelectItem>
             </SelectContent>
           </Select>
-
+          {/* 
           <Select value={templateTypeFilter} onValueChange={onTemplateTypeChange}>
             <SelectTrigger className="h-9 sm:h-10 md:h-11 text-sm sm:text-base bg-gray-50 border-gray-200 focus:bg-white" data-testid="closed-requests-template-type-filter">
               <SelectValue placeholder="All Templates" />
@@ -140,7 +140,7 @@ export function StandardClosedRequestsFilters({
               <SelectItem value="CUSTOM">Non-Templatized</SelectItem>
               <SelectItem value="DEALER CLAIM">Dealer Claim</SelectItem>
             </SelectContent>
-          </Select>
+          </Select> */}
 
           <div className="flex gap-2">
             <Select value={sortBy} onValueChange={(value) => onSortByChange(value as 'created' | 'due' | 'priority')}>
@@ -153,7 +153,7 @@ export function StandardClosedRequestsFilters({
                 <SelectItem value="priority">Priority</SelectItem>
               </SelectContent>
             </Select>
-            
+
             <Button
               variant="outline"
               size="sm"
diff --git a/src/custom/components/RequestsFilters.tsx b/src/custom/components/RequestsFilters.tsx
index eda93bf..52eb4f9 100644
--- a/src/custom/components/RequestsFilters.tsx
+++ b/src/custom/components/RequestsFilters.tsx
@@ -77,7 +77,7 @@ export function StandardRequestsFilters({
       </CardHeader>
       <CardContent className="space-y-3 sm:space-y-4 px-3 sm:px-6">
         {/* Standard filters - Search, Status, Priority, Template Type, and Sort */}
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-3 sm:gap-4">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4">
           <div className="relative">
             <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-3.5 h-3.5 sm:w-4 sm:h-4" />
             <Input
@@ -87,7 +87,7 @@ export function StandardRequestsFilters({
               className="pl-9 sm:pl-10 h-9 sm:h-10 md:h-11 text-sm sm:text-base bg-gray-50 border-gray-200 focus:bg-white focus:border-blue-400 focus:ring-1 focus:ring-blue-200 transition-colors"
             />
           </div>
-          
+
           <Select value={priorityFilter} onValueChange={onPriorityFilterChange}>
             <SelectTrigger className="h-9 sm:h-10 md:h-11 text-sm sm:text-base bg-gray-50 border-gray-200 focus:bg-white focus:border-blue-400 focus:ring-1 focus:ring-blue-200">
               <SelectValue placeholder="All Priorities" />
@@ -108,7 +108,7 @@ export function StandardRequestsFilters({
               </SelectItem>
             </SelectContent>
           </Select>
-          
+
           <Select value={statusFilter} onValueChange={onStatusFilterChange}>
             <SelectTrigger className="h-9 sm:h-10 md:h-11 text-sm sm:text-base bg-gray-50 border-gray-200 focus:bg-white focus:border-blue-400 focus:ring-1 focus:ring-blue-200">
               <SelectValue placeholder="All Statuses" />
@@ -120,7 +120,7 @@ export function StandardRequestsFilters({
             </SelectContent>
           </Select>
 
-          <Select value={templateTypeFilter} onValueChange={onTemplateTypeFilterChange}>
+          {/* <Select value={templateTypeFilter} onValueChange={onTemplateTypeFilterChange}>
             <SelectTrigger className="h-9 sm:h-10 md:h-11 text-sm sm:text-base bg-gray-50 border-gray-200 focus:bg-white focus:border-blue-400 focus:ring-1 focus:ring-blue-200">
               <SelectValue placeholder="All Templates" />
             </SelectTrigger>
@@ -129,7 +129,7 @@ export function StandardRequestsFilters({
               <SelectItem value="CUSTOM">Non-Templatized</SelectItem>
               <SelectItem value="DEALER CLAIM">Dealer Claim</SelectItem>
             </SelectContent>
-          </Select>
+          </Select> */}
 
           <div className="flex gap-2">
             <Select value={sortBy} onValueChange={(value: any) => onSortByChange(value)}>
@@ -143,7 +143,7 @@ export function StandardRequestsFilters({
                 <SelectItem value="sla">SLA Progress</SelectItem>
               </SelectContent>
             </Select>
-            
+
             <Button
               variant="outline"
               size="sm"
diff --git a/src/custom/components/UserAllRequestsFilters.tsx b/src/custom/components/UserAllRequestsFilters.tsx
index 2e432ab..ed4ef74 100644
--- a/src/custom/components/UserAllRequestsFilters.tsx
+++ b/src/custom/components/UserAllRequestsFilters.tsx
@@ -34,11 +34,11 @@ interface StandardUserAllRequestsFiltersProps {
   customStartDate?: Date;
   customEndDate?: Date;
   showCustomDatePicker: boolean;
-  
+
   // Departments
   departments: string[];
   loadingDepartments: boolean;
-  
+
   // State for user search
   initiatorSearch: {
     selectedUser: { userId: string; email: string; displayName?: string } | null;
@@ -50,7 +50,7 @@ interface StandardUserAllRequestsFiltersProps {
     handleClear: () => void;
     setShowResults: (show: boolean) => void;
   };
-  
+
   approverSearch: {
     selectedUser: { userId: string; email: string; displayName?: string } | null;
     searchQuery: string;
@@ -61,7 +61,7 @@ interface StandardUserAllRequestsFiltersProps {
     handleClear: () => void;
     setShowResults: (show: boolean) => void;
   };
-  
+
   // Actions
   onSearchChange: (value: string) => void;
   onStatusChange: (value: string) => void;
@@ -78,7 +78,7 @@ interface StandardUserAllRequestsFiltersProps {
   onShowCustomDatePickerChange?: (show: boolean) => void;
   onApplyCustomDate?: () => void;
   onClearFilters: () => void;
-  
+
   // Computed
   hasActiveFilters: boolean;
 }
@@ -143,7 +143,7 @@ export function StandardUserAllRequestsFilters({
           <Separator />
 
           {/* Primary Filters */}
-          <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-6 gap-3 sm:gap-4">
+          <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-3 sm:gap-4">
             <div className="relative md:col-span-3 lg:col-span-1">
               <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
               <Input
@@ -180,7 +180,7 @@ export function StandardUserAllRequestsFilters({
               </SelectContent>
             </Select>
 
-            <Select value={templateTypeFilter} onValueChange={onTemplateTypeChange}>
+            {/* <Select value={templateTypeFilter} onValueChange={onTemplateTypeChange}>
               <SelectTrigger className="h-10" data-testid="template-type-filter">
                 <SelectValue placeholder="All Templates" />
               </SelectTrigger>
@@ -189,7 +189,7 @@ export function StandardUserAllRequestsFilters({
                 <SelectItem value="CUSTOM">Custom</SelectItem>
                 <SelectItem value="DEALER CLAIM">Dealer Claim</SelectItem>
               </SelectContent>
-            </Select>
+            </Select> */}
 
             <Select
               value={departmentFilter}
diff --git a/src/pages/Auth/Auth.tsx b/src/pages/Auth/Auth.tsx
index 6563bc5..a3055a4 100644
--- a/src/pages/Auth/Auth.tsx
+++ b/src/pages/Auth/Auth.tsx
@@ -28,7 +28,7 @@ export function Auth() {
     // Clear any existing session data
     localStorage.clear();
     sessionStorage.clear();
-    
+
     try {
       await login();
     } catch (loginError) {
@@ -45,7 +45,7 @@ export function Auth() {
     // Clear any existing session data
     localStorage.clear();
     sessionStorage.clear();
-    
+
     setTanflowLoading(true);
     try {
       initiateTanflowLogin();
@@ -65,7 +65,7 @@ export function Auth() {
   }
 
   return (
-    <div 
+    <div
       className="min-h-screen flex items-center justify-center p-4 relative"
       style={{
         backgroundImage: imageLoaded ? `url(${LandingPageImage})` : 'none',
@@ -81,19 +81,19 @@ export function Auth() {
       )}
       {/* Overlay for better readability */}
       <div className="absolute inset-0 bg-black/40"></div>
-      
+
       <Card className="w-full max-w-md shadow-xl relative z-10 bg-black backdrop-blur-sm border-gray-800">
         <CardHeader className="space-y-1 text-center pb-6">
           <div className="flex flex-col items-center justify-center mb-4">
-            <img 
-              src={ReLogo} 
-              alt="Royal Enfield Logo" 
+            <img
+              src={ReLogo}
+              alt="Royal Enfield Logo"
               className="h-10 w-auto max-w-[168px] object-contain mb-2"
             />
             <p className="text-xs text-gray-300 text-center truncate">Approval Portal</p>
           </div>
         </CardHeader>
-        
+
         <CardContent className="space-y-4">
           {error && (
             <div className="bg-red-900/50 border border-red-700 text-red-200 px-4 py-3 rounded-lg">
@@ -101,7 +101,7 @@ export function Auth() {
               <p className="text-sm">{error.message}</p>
             </div>
           )}
-          
+
           <div className="space-y-3">
             <Button
               onClick={handleOKTALogin}
@@ -111,8 +111,8 @@ export function Auth() {
             >
               {isLoading ? (
                 <>
-                  <div 
-                    className="mr-2 h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent" 
+                  <div
+                    className="mr-2 h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent"
                   />
                   Logging in...
                 </>
@@ -123,7 +123,7 @@ export function Auth() {
                 </>
               )}
             </Button>
-
+            {/* 
             <div className="relative">
               <div className="absolute inset-0 flex items-center">
                 <span className="w-full border-t border-gray-700"></span>
@@ -152,7 +152,7 @@ export function Auth() {
                   Dealer Login
                 </>
               )}
-            </Button>
+            </Button> */}
           </div>
 
           <div className="text-center text-sm text-gray-400 mt-4">
diff --git a/src/pages/ClosedRequests/components/ClosedRequestsFilters.tsx b/src/pages/ClosedRequests/components/ClosedRequestsFilters.tsx
index c8852b3..08fd843 100644
--- a/src/pages/ClosedRequests/components/ClosedRequestsFilters.tsx
+++ b/src/pages/ClosedRequests/components/ClosedRequestsFilters.tsx
@@ -75,7 +75,7 @@ export function ClosedRequestsFilters({
         </div>
       </CardHeader>
       <CardContent className="space-y-3 sm:space-y-4 px-3 sm:px-6">
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-3 sm:gap-4">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4">
           <div className="relative">
             <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-3.5 h-3.5 sm:w-4 sm:h-4" />
             <Input
@@ -86,7 +86,7 @@ export function ClosedRequestsFilters({
               data-testid="closed-requests-search"
             />
           </div>
-          
+
           <Select value={priorityFilter} onValueChange={onPriorityChange}>
             <SelectTrigger className="h-9 sm:h-10 md:h-11 text-sm sm:text-base bg-gray-50 border-gray-200 focus:bg-white" data-testid="closed-requests-priority-filter">
               <SelectValue placeholder="All Priorities" />
@@ -107,7 +107,7 @@ export function ClosedRequestsFilters({
               </SelectItem>
             </SelectContent>
           </Select>
-          
+
           <Select value={statusFilter} onValueChange={onStatusChange}>
             <SelectTrigger className="h-9 sm:h-10 md:h-11 text-sm sm:text-base bg-gray-50 border-gray-200 focus:bg-white" data-testid="closed-requests-status-filter">
               <SelectValue placeholder="Closure Type" />
@@ -129,7 +129,7 @@ export function ClosedRequestsFilters({
             </SelectContent>
           </Select>
 
-          <Select value={templateTypeFilter} onValueChange={onTemplateTypeChange}>
+          {/* <Select value={templateTypeFilter} onValueChange={onTemplateTypeChange}>
             <SelectTrigger className="h-9 sm:h-10 md:h-11 text-sm sm:text-base bg-gray-50 border-gray-200 focus:bg-white" data-testid="closed-requests-template-type-filter">
               <SelectValue placeholder="All Templates" />
             </SelectTrigger>
@@ -138,7 +138,7 @@ export function ClosedRequestsFilters({
               <SelectItem value="CUSTOM">Non-Templatized</SelectItem>
               <SelectItem value="DEALER CLAIM">Dealer Claim</SelectItem>
             </SelectContent>
-          </Select>
+          </Select> */}
 
           <div className="flex gap-2">
             <Select value={sortBy} onValueChange={(value) => onSortByChange(value as 'created' | 'due' | 'priority')}>
@@ -151,7 +151,7 @@ export function ClosedRequestsFilters({
                 <SelectItem value="priority">Priority</SelectItem>
               </SelectContent>
             </Select>
-            
+
             <Button
               variant="outline"
               size="sm"
diff --git a/src/pages/MyRequests/components/MyRequestsFilters.tsx b/src/pages/MyRequests/components/MyRequestsFilters.tsx
index 64d4a5d..eac7d9c 100644
--- a/src/pages/MyRequests/components/MyRequestsFilters.tsx
+++ b/src/pages/MyRequests/components/MyRequestsFilters.tsx
@@ -76,7 +76,7 @@ export function MyRequestsFilters({
               </SelectContent>
             </Select>
 
-            <Select value={templateTypeFilter} onValueChange={onTemplateTypeChange}>
+            {/* <Select value={templateTypeFilter} onValueChange={onTemplateTypeChange}>
               <SelectTrigger
                 className="flex-1 md:w-28 lg:w-32 text-xs sm:text-sm bg-white border-gray-300 hover:border-gray-400 focus:border-blue-400 focus:ring-1 focus:ring-blue-200 h-9 sm:h-10"
                 data-testid="template-type-filter"
@@ -88,7 +88,7 @@ export function MyRequestsFilters({
                 <SelectItem value="CUSTOM">Non-Templatized</SelectItem>
                 <SelectItem value="DEALER CLAIM">Dealer Claim</SelectItem>
               </SelectContent>
-            </Select>
+            </Select> */}
           </div>
         </div>
       </CardContent>
diff --git a/src/pages/OpenRequests/OpenRequests.tsx b/src/pages/OpenRequests/OpenRequests.tsx
index a7fd7a4..86c1713 100644
--- a/src/pages/OpenRequests/OpenRequests.tsx
+++ b/src/pages/OpenRequests/OpenRequests.tsx
@@ -18,9 +18,9 @@ interface Request {
   status: 'pending' | 'approved' | 'rejected' | 'closed' | 'paused';
   priority: 'express' | 'standard';
   initiator: { name: string; avatar: string };
-  currentApprover?: { 
-    name: string; 
-    avatar: string; 
+  currentApprover?: {
+    name: string;
+    avatar: string;
     sla?: any; // Backend-calculated SLA data
   };
   createdAt: string;
@@ -106,13 +106,13 @@ export function OpenRequests({ onViewRequest }: OpenRequestsProps) {
   const [items, setItems] = useState<Request[]>([]);
   const [loading, setLoading] = useState(false);
   const [refreshing, setRefreshing] = useState(false);
-  
+
   // Pagination states (currentPage now in Redux)
   const [totalPages, setTotalPages] = useState(1);
   const [totalRecords, setTotalRecords] = useState(0);
   const [itemsPerPage] = useState(10);
   const fetchRequestsRef = useRef<any>(null);
-  
+
   // Use Redux for filters with callback (persists during navigation)
   const filters = useOpenRequestsFilters();
 
@@ -163,12 +163,12 @@ export function OpenRequests({ onViewRequest }: OpenRequestsProps) {
         setLoading(true);
         setItems([]);
       }
-      
+
       // Always use user-scoped endpoint (not organization-wide)
       // Backend filters by userId regardless of user role (ADMIN/MANAGEMENT/regular user)
       // For organization-wide requests, use the "All Requests" screen (/requests)
-      const result = await workflowApi.listOpenForMe({ 
-        page, 
+      const result = await workflowApi.listOpenForMe({
+        page,
         limit: itemsPerPage,
         search: filterParams?.search,
         status: filterParams?.status,
@@ -177,12 +177,12 @@ export function OpenRequests({ onViewRequest }: OpenRequestsProps) {
         sortBy: filterParams?.sortBy,
         sortOrder: filterParams?.sortOrder
       });
-      
+
       // Extract data - workflowApi now returns { data: [], pagination: {} }
-      const data = Array.isArray((result as any)?.data) 
-        ? (result as any).data 
+      const data = Array.isArray((result as any)?.data)
+        ? (result as any).data
         : [];
-      
+
       // Set pagination data
       const pagination = (result as any)?.pagination;
       if (pagination) {
@@ -190,10 +190,10 @@ export function OpenRequests({ onViewRequest }: OpenRequestsProps) {
         setTotalPages(pagination.totalPages || 1);
         setTotalRecords(pagination.total || 0);
       }
-      
+
       const mapped: Request[] = data.map((r: any) => {
         const createdAt = r.submittedAt || r.submitted_at || r.createdAt || r.created_at;
-        
+
         return {
           id: r.requestNumber || r.request_number || r.requestId,
           requestId: r.requestId,
@@ -202,13 +202,13 @@ export function OpenRequests({ onViewRequest }: OpenRequestsProps) {
           description: r.description,
           status: (r.status || '').toString().toLowerCase().replace('_', '-'),
           priority: (r.priority || '').toString().toLowerCase(),
-          initiator: { 
-            name: (r.initiator?.displayName || r.initiator?.email || '—'), 
-            avatar: ((r.initiator?.displayName || r.initiator?.email || 'NA').split(' ').map((s: string) => s[0]).join('').slice(0,2).toUpperCase()) 
+          initiator: {
+            name: (r.initiator?.displayName || r.initiator?.email || '—'),
+            avatar: ((r.initiator?.displayName || r.initiator?.email || 'NA').split(' ').map((s: string) => s[0]).join('').slice(0, 2).toUpperCase())
           },
-          currentApprover: r.currentApprover ? { 
-            name: (r.currentApprover.name || r.currentApprover.email || '—'), 
-            avatar: ((r.currentApprover.name || r.currentApprover.email || 'CA').split(' ').map((s: string) => s[0]).join('').slice(0,2).toUpperCase()),
+          currentApprover: r.currentApprover ? {
+            name: (r.currentApprover.name || r.currentApprover.email || '—'),
+            avatar: ((r.currentApprover.name || r.currentApprover.email || 'CA').split(' ').map((s: string) => s[0]).join('').slice(0, 2).toUpperCase()),
             sla: r.currentApprover.sla // ← Backend-calculated SLA
           } : undefined,
           createdAt: createdAt || '—',
@@ -224,7 +224,7 @@ export function OpenRequests({ onViewRequest }: OpenRequestsProps) {
       setRefreshing(false);
     }
   }, [itemsPerPage, filters]);
-  
+
   fetchRequestsRef.current = fetchRequests;
 
   const handleRefresh = useCallback(() => {
@@ -244,21 +244,21 @@ export function OpenRequests({ onViewRequest }: OpenRequestsProps) {
     const maxPagesToShow = 5;
     let startPage = Math.max(1, filters.currentPage - Math.floor(maxPagesToShow / 2));
     let endPage = Math.min(totalPages, startPage + maxPagesToShow - 1);
-    
+
     if (endPage - startPage < maxPagesToShow - 1) {
       startPage = Math.max(1, endPage - maxPagesToShow + 1);
     }
-    
+
     for (let i = startPage; i <= endPage; i++) {
       pages.push(i);
     }
-    
+
     return pages;
   };
 
   // Track if this is initial mount
   const hasInitialFetchRun = useRef(false);
-  
+
   // Initial fetch on mount - use stored page from Redux
   useEffect(() => {
     if (!hasInitialFetchRun.current) {
@@ -268,7 +268,7 @@ export function OpenRequests({ onViewRequest }: OpenRequestsProps) {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []); // Only on mount
-  
+
   // Track previous filter values to detect changes
   const prevFiltersRef = useRef({
     searchTerm: filters.searchTerm,
@@ -284,11 +284,11 @@ export function OpenRequests({ onViewRequest }: OpenRequestsProps) {
   useEffect(() => {
     // Skip until initial fetch has completed
     if (!hasInitialFetchRun.current) return;
-    
+
     const prev = prevFiltersRef.current;
-    
+
     // Check if any filter actually changed
-    const hasChanged = 
+    const hasChanged =
       prev.searchTerm !== filters.searchTerm ||
       prev.statusFilter !== filters.statusFilter ||
       prev.priorityFilter !== filters.priorityFilter ||
@@ -303,7 +303,7 @@ export function OpenRequests({ onViewRequest }: OpenRequestsProps) {
     const timeoutId = setTimeout(() => {
       filters.setCurrentPage(1); // Reset to page 1 when filters change (but not on initial mount or back navigation)
       fetchRequests(1, getFilterParams(true));
-      
+
       // Update previous filters ref
       prevFiltersRef.current = {
         searchTerm: filters.searchTerm,
@@ -325,7 +325,7 @@ export function OpenRequests({ onViewRequest }: OpenRequestsProps) {
   const filteredAndSortedRequests = items;
 
 
-    return (
+  return (
     <div className="space-y-4 sm:space-y-6 max-w-7xl mx-auto">
       {/* Enhanced Header */}
       <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-3 sm:gap-4 md:gap-6">
@@ -340,15 +340,15 @@ export function OpenRequests({ onViewRequest }: OpenRequestsProps) {
             </div>
           </div>
         </div>
-        
+
         <div className="flex items-center gap-2 sm:gap-3">
           <Badge variant="secondary" className="text-xs sm:text-sm md:text-base px-2 sm:px-3 md:px-4 py-1 sm:py-1.5 md:py-2 bg-slate-100 text-slate-800 font-semibold">
             {loading ? 'Loading…' : `${totalRecords || items.length} open`}
             <span className="hidden sm:inline ml-1">requests</span>
           </Badge>
-          <Button 
-            variant="outline" 
-            size="sm" 
+          <Button
+            variant="outline"
+            size="sm"
             className="gap-1 sm:gap-2 h-8 sm:h-9"
             onClick={handleRefresh}
             disabled={refreshing}
@@ -382,10 +382,10 @@ export function OpenRequests({ onViewRequest }: OpenRequestsProps) {
         {filteredAndSortedRequests.map((request) => {
           const priorityConfig = getPriorityConfig(request.priority);
           const statusConfig = getStatusConfig(request.status);
-          
+
           return (
-            <Card 
-              key={request.id} 
+            <Card
+              key={request.id}
               className="group hover:shadow-lg transition-all duration-200 cursor-pointer border border-gray-200 hover:border-blue-400 hover:scale-[1.002]"
               onClick={() => onViewRequest?.(request.id, request.title)}
             >
@@ -405,8 +405,8 @@ export function OpenRequests({ onViewRequest }: OpenRequestsProps) {
                       <h3 className="text-base font-bold text-gray-900 group-hover:text-blue-600 transition-colors">
                         {(request as any).displayId || request.id}
                       </h3>
-                      <Badge 
-                        variant="outline" 
+                      <Badge
+                        variant="outline"
                         className={`${statusConfig.color} text-xs px-2.5 py-0.5 font-semibold shrink-0`}
                       >
                         <statusConfig.icon className="w-3.5 h-3.5 mr-1" />
@@ -417,8 +417,8 @@ export function OpenRequests({ onViewRequest }: OpenRequestsProps) {
                           {request.department}
                         </Badge>
                       )}
-                      <Badge 
-                        variant="outline" 
+                      <Badge
+                        variant="outline"
                         className={`${priorityConfig.color} text-xs px-2.5 py-0.5 capitalize hidden md:inline-flex`}
                       >
                         {request.priority}
@@ -427,18 +427,18 @@ export function OpenRequests({ onViewRequest }: OpenRequestsProps) {
                       {(() => {
                         const templateType = (request as any)?.templateType || (request as any)?.template_type || '';
                         const templateTypeUpper = templateType?.toUpperCase() || '';
-                        
+
                         // Direct mapping from templateType
                         let templateLabel = 'Non-Templatized';
                         let templateColor = 'bg-purple-100 !text-purple-600 border-purple-200';
-                        
+
                         if (templateTypeUpper === 'DEALER CLAIM') {
                           templateLabel = 'Dealer Claim';
                           templateColor = 'bg-blue-100 !text-blue-700 border-blue-200';
                         } else if (templateTypeUpper === 'TEMPLATE') {
                           templateLabel = 'Template';
                         }
-                        
+
                         return (
                           <Badge
                             variant="outline"
@@ -460,15 +460,15 @@ export function OpenRequests({ onViewRequest }: OpenRequestsProps) {
                     {request.currentLevelSLA && (() => {
                       // Check pause status from isPaused field, pauseInfo, OR status field
                       const isPaused = Boolean(
-                        request.isPaused || 
-                        request.pauseInfo?.isPaused || 
+                        request.isPaused ||
+                        request.pauseInfo?.isPaused ||
                         request.status === 'paused'
                       );
                       // Use percentage-based colors to match approver SLA tracker
                       // Green: 0-50%, Amber: 50-75%, Orange: 75-100%, Red: 100%+ (breached)
                       // Grey: When paused (frozen state)
                       const percentUsed = request.currentLevelSLA.percentageUsed || 0;
-                      
+
                       const getSLAColors = () => {
                         // If paused, always use grey colors (frozen state)
                         if (isPaused) {
@@ -479,7 +479,7 @@ export function OpenRequests({ onViewRequest }: OpenRequestsProps) {
                             icon: 'text-gray-600'
                           };
                         }
-                        
+
                         if (percentUsed >= 100) {
                           return {
                             bg: 'bg-red-50 border border-red-200',
@@ -510,9 +510,9 @@ export function OpenRequests({ onViewRequest }: OpenRequestsProps) {
                           };
                         }
                       };
-                      
+
                       const colors = getSLAColors();
-                      
+
                       return (
                         <div className={`p-2 rounded-md ${colors.bg}`}>
                           <div className="flex items-center justify-between mb-1.5">
@@ -533,8 +533,8 @@ export function OpenRequests({ onViewRequest }: OpenRequestsProps) {
                               </span>
                             </div>
                           </div>
-                          <Progress 
-                            value={percentUsed} 
+                          <Progress
+                            value={percentUsed}
                             className="h-1.5"
                             indicatorClassName={colors.progress}
                           />
@@ -552,7 +552,7 @@ export function OpenRequests({ onViewRequest }: OpenRequestsProps) {
                         </Avatar>
                         <span className="font-medium text-gray-900">{request.initiator.name}</span>
                       </div>
-                      
+
                       {request.currentApprover && (
                         <div className="flex items-center gap-1.5">
                           <Avatar className="h-6 w-6 ring-2 ring-yellow-200 shadow-sm">
@@ -563,14 +563,14 @@ export function OpenRequests({ onViewRequest }: OpenRequestsProps) {
                           <span className="font-medium text-gray-900">{request.currentApprover.name}</span>
                         </div>
                       )}
-                      
+
                       {request.approvalStep && (
                         <div className="flex items-center gap-1.5">
                           <AlertCircle className="w-3.5 h-3.5 text-blue-500" />
                           <span className="font-medium">{request.approvalStep}</span>
                         </div>
                       )}
-                      
+
                       <div className="flex items-center gap-1.5">
                         <Calendar className="w-3.5 h-3.5" />
                         <span>Created: {request.createdAt !== '—' ? formatDateDDMMYYYY(request.createdAt) : '—'}</span>
@@ -604,8 +604,8 @@ export function OpenRequests({ onViewRequest }: OpenRequestsProps) {
               }
             </p>
             {filters.activeFiltersCount > 0 && (
-              <Button 
-                variant="outline" 
+              <Button
+                variant="outline"
                 className="mt-4"
                 onClick={filters.clearFilters}
               >
@@ -624,7 +624,7 @@ export function OpenRequests({ onViewRequest }: OpenRequestsProps) {
               <div className="text-xs sm:text-sm text-muted-foreground">
                 Showing {((filters.currentPage - 1) * itemsPerPage) + 1} to {Math.min(filters.currentPage * itemsPerPage, totalRecords)} of {totalRecords} open requests
               </div>
-              
+
               <div className="flex items-center gap-2">
                 <Button
                   variant="outline"
@@ -635,14 +635,14 @@ export function OpenRequests({ onViewRequest }: OpenRequestsProps) {
                 >
                   <ArrowRight className="h-4 w-4 rotate-180" />
                 </Button>
-                
+
                 {filters.currentPage > 3 && totalPages > 5 && (
                   <>
                     <Button variant="outline" size="sm" onClick={() => handlePageChange(1)} className="h-8 w-8 p-0">1</Button>
                     <span className="text-muted-foreground">...</span>
                   </>
                 )}
-                
+
                 {getPageNumbers().map((pageNum) => (
                   <Button
                     key={pageNum}
@@ -654,14 +654,14 @@ export function OpenRequests({ onViewRequest }: OpenRequestsProps) {
                     {pageNum}
                   </Button>
                 ))}
-                
+
                 {filters.currentPage < totalPages - 2 && totalPages > 5 && (
                   <>
                     <span className="text-muted-foreground">...</span>
                     <Button variant="outline" size="sm" onClick={() => handlePageChange(totalPages)} className="h-8 w-8 p-0">{totalPages}</Button>
                   </>
                 )}
-                
+
                 <Button
                   variant="outline"
                   size="sm"
diff --git a/src/pages/Requests/Requests.tsx b/src/pages/Requests/Requests.tsx
index 167e983..05014ca 100644
--- a/src/pages/Requests/Requests.tsx
+++ b/src/pages/Requests/Requests.tsx
@@ -49,10 +49,10 @@ import { CustomDatePicker } from '@/components/ui/date-picker';
 
 export function Requests({ onViewRequest }: RequestsProps) {
   const { user } = useAuth();
-  
+
   // Get viewAsUser from Redux store (synced with Dashboard toggle)
   const viewAsUser = useAppSelector((state) => state.dashboard.viewAsUser);
-  
+
   // Determine if viewing at organization level:
   // - If user is admin/management AND not in "Personal" mode (viewAsUser=false) → show all requests
   // - If user is admin/management AND in "Personal" mode (viewAsUser=true) → show only their requests
@@ -95,15 +95,15 @@ export function Requests({ onViewRequest }: RequestsProps) {
   // Status filter should not affect stats - stats should always show all status counts
   // For user-level (Personal mode), stats will only include requests where user is involved
   const fetchBackendStats = useCallback(async (
-    statsDateRange?: DateRange, 
-    statsStartDate?: Date, 
+    statsDateRange?: DateRange,
+    statsStartDate?: Date,
     statsEndDate?: Date,
-    filtersWithoutStatus?: { 
-      priority?: string; 
-      department?: string; 
-      initiator?: string; 
-      approver?: string; 
-      approverType?: 'current' | 'any'; 
+    filtersWithoutStatus?: {
+      priority?: string;
+      department?: string;
+      initiator?: string;
+      approver?: string;
+      approverType?: 'current' | 'any';
       search?: string;
       slaCompliance?: string;
     }
@@ -112,9 +112,9 @@ export function Requests({ onViewRequest }: RequestsProps) {
       // For dynamic SLA statuses (on_track, approaching, critical), we need to fetch and enrich
       // because these are calculated dynamically, not stored in DB
       const slaCompliance = filtersWithoutStatus?.slaCompliance;
-      const isDynamicSlaStatus = slaCompliance && 
-        slaCompliance !== 'all' && 
-        slaCompliance !== 'breached' && 
+      const isDynamicSlaStatus = slaCompliance &&
+        slaCompliance !== 'all' &&
+        slaCompliance !== 'breached' &&
         slaCompliance !== 'compliant';
 
       if (isDynamicSlaStatus) {
@@ -141,12 +141,12 @@ export function Requests({ onViewRequest }: RequestsProps) {
 
         // Fetch up to 1000 requests (backend will enrich and filter by SLA)
         // Use appropriate API based on org/personal mode
-        const result = isOrgLevel 
+        const result = isOrgLevel
           ? await workflowApi.listWorkflows({ page: 1, limit: 1000, ...backendFilters })
           : await workflowApi.listParticipantRequests({ page: 1, limit: 1000, ...backendFilters });
 
         const filteredData = Array.isArray(result?.data) ? result.data : [];
-        
+
         // Calculate stats from filtered data
         const total = filteredData.length;
         const pending = filteredData.filter((r: any) => {
@@ -244,7 +244,7 @@ export function Requests({ onViewRequest }: RequestsProps) {
   // Use refs to store stable callbacks to prevent infinite loops
   const filtersRef = useRef(filters);
   const fetchBackendStatsRef = useRef(fetchBackendStats);
-  
+
   // Update refs on each render
   useEffect(() => {
     filtersRef.current = filters;
@@ -254,7 +254,7 @@ export function Requests({ onViewRequest }: RequestsProps) {
   // Parse URL search params
   useEffect(() => {
     const params = new URLSearchParams(window.location.search);
-    
+
     // Approver Filter (from Dashboard TAT Breach Report link)
     const approver = params.get('approver');
     const approverType = params.get('approverType');
@@ -341,35 +341,35 @@ export function Requests({ onViewRequest }: RequestsProps) {
   // Total changes when other filters are applied, but stays stable when only status changes
   // Stats are fetched for both org-level AND user-level (Personal mode) views
   useEffect(() => {
-      const timeoutId = setTimeout(() => {
-        const filtersWithoutStatus = {
-          priority: filters.priorityFilter !== 'all' ? filters.priorityFilter : undefined,
-          templateType: filters.templateTypeFilter !== 'all' ? filters.templateTypeFilter : undefined,
-          department: filters.departmentFilter !== 'all' ? filters.departmentFilter : undefined,
-          initiator: filters.initiatorFilter !== 'all' ? filters.initiatorFilter : undefined,
-          approver: filters.approverFilter !== 'all' ? filters.approverFilter : undefined,
-          approverType: filters.approverFilter !== 'all' ? filters.approverFilterType : undefined,
-          search: filters.searchTerm || undefined,
-          slaCompliance: filters.slaComplianceFilter !== 'all' ? filters.slaComplianceFilter : undefined
-        };
-        // All Requests (admin/normal user) should always have a date range
-        // Default to 'all' if no date range is selected
-        const statsDateRange = filters.dateRange || 'all';
-        
-        fetchBackendStatsRef.current(
-          statsDateRange, 
-          filters.customStartDate, 
-          filters.customEndDate,
-          filtersWithoutStatus
-        );
-      }, filters.searchTerm ? 500 : 0);
+    const timeoutId = setTimeout(() => {
+      const filtersWithoutStatus = {
+        priority: filters.priorityFilter !== 'all' ? filters.priorityFilter : undefined,
+        templateType: filters.templateTypeFilter !== 'all' ? filters.templateTypeFilter : undefined,
+        department: filters.departmentFilter !== 'all' ? filters.departmentFilter : undefined,
+        initiator: filters.initiatorFilter !== 'all' ? filters.initiatorFilter : undefined,
+        approver: filters.approverFilter !== 'all' ? filters.approverFilter : undefined,
+        approverType: filters.approverFilter !== 'all' ? filters.approverFilterType : undefined,
+        search: filters.searchTerm || undefined,
+        slaCompliance: filters.slaComplianceFilter !== 'all' ? filters.slaComplianceFilter : undefined
+      };
+      // All Requests (admin/normal user) should always have a date range
+      // Default to 'all' if no date range is selected
+      const statsDateRange = filters.dateRange || 'all';
 
-      return () => clearTimeout(timeoutId);
+      fetchBackendStatsRef.current(
+        statsDateRange,
+        filters.customStartDate,
+        filters.customEndDate,
+        filtersWithoutStatus
+      );
+    }, filters.searchTerm ? 500 : 0);
+
+    return () => clearTimeout(timeoutId);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
-    isOrgLevel, 
-    filters.dateRange, 
-    filters.customStartDate, 
+    isOrgLevel,
+    filters.dateRange,
+    filters.customStartDate,
     filters.customEndDate,
     filters.priorityFilter,
     filters.templateTypeFilter,
@@ -399,7 +399,7 @@ export function Requests({ onViewRequest }: RequestsProps) {
     isOrgLevel,
   });
   const hasInitialFetchRun = useRef(false);
-  
+
   // Initial fetch on mount - use stored page from Redux
   useEffect(() => {
     const storedPage = filters.currentPage || 1;
@@ -407,13 +407,13 @@ export function Requests({ onViewRequest }: RequestsProps) {
     hasInitialFetchRun.current = true;
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []); // Only on mount
-  
+
   // Fetch when filters change or isOrgLevel changes
   useEffect(() => {
     if (!hasInitialFetchRun.current) return;
-    
+
     const prev = prevFiltersRef.current;
-    const hasChanged = 
+    const hasChanged =
       prev.searchTerm !== filters.searchTerm ||
       prev.statusFilter !== filters.statusFilter ||
       prev.priorityFilter !== filters.priorityFilter ||
@@ -427,13 +427,13 @@ export function Requests({ onViewRequest }: RequestsProps) {
       prev.customStartDate !== filters.customStartDate ||
       prev.customEndDate !== filters.customEndDate ||
       prev.isOrgLevel !== isOrgLevel;
-    
+
     if (!hasChanged) return;
-    
+
     const timeoutId = setTimeout(() => {
       filters.setCurrentPage(1);
       fetchRequests(1);
-      
+
       prevFiltersRef.current = {
         searchTerm: filters.searchTerm,
         statusFilter: filters.statusFilter,
@@ -495,7 +495,7 @@ export function Requests({ onViewRequest }: RequestsProps) {
         closed: backendStats.closed || 0
       };
     }
-    
+
     // Fallback: Calculate from paginated data (less accurate, but better than nothing)
     return calculateStatsFromFilteredData(
       [], // Empty - we'll use backendStats or fallback
@@ -521,8 +521,8 @@ export function Requests({ onViewRequest }: RequestsProps) {
       />
 
       {/* Stats */}
-      <RequestsStats 
-        stats={stats} 
+      <RequestsStats
+        stats={stats}
         onStatusFilter={(status) => {
           filters.setStatusFilter(status);
         }}
@@ -553,7 +553,7 @@ export function Requests({ onViewRequest }: RequestsProps) {
             <Separator />
 
             {/* Primary Filters */}
-            <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-6 gap-3 sm:gap-4">
+            <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-3 sm:gap-4">
               <div className="relative md:col-span-3 lg:col-span-1">
                 <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
                 <Input
@@ -590,7 +590,7 @@ export function Requests({ onViewRequest }: RequestsProps) {
                 </SelectContent>
               </Select>
 
-              <Select value={filters.templateTypeFilter} onValueChange={filters.setTemplateTypeFilter}>
+              {/* <Select value={filters.templateTypeFilter} onValueChange={filters.setTemplateTypeFilter}>
                 <SelectTrigger className="h-10" data-testid="template-type-filter">
                   <SelectValue placeholder="All Templates" />
                 </SelectTrigger>
@@ -599,7 +599,7 @@ export function Requests({ onViewRequest }: RequestsProps) {
                   <SelectItem value="CUSTOM">Non-Templatized</SelectItem>
                   <SelectItem value="DEALER CLAIM">Dealer Claim</SelectItem>
                 </SelectContent>
-              </Select>
+              </Select> */}
 
               <Select
                 value={filters.departmentFilter}
@@ -792,23 +792,23 @@ export function Requests({ onViewRequest }: RequestsProps) {
                       <div className="space-y-3">
                         <div className="space-y-2">
                           <Label htmlFor="start-date">Start Date</Label>
-                            <CustomDatePicker
-                              value={filters.customStartDate || null}
-                              onChange={(dateStr: string | null) => {
-                                const date = dateStr ? new Date(dateStr) : undefined;
-                                if (date) {
-                                  filters.setCustomStartDate(date);
-                                  if (filters.customEndDate && date > filters.customEndDate) {
-                                    filters.setCustomEndDate(date);
-                                  }
-                                } else {
-                                  filters.setCustomStartDate(undefined);
+                          <CustomDatePicker
+                            value={filters.customStartDate || null}
+                            onChange={(dateStr: string | null) => {
+                              const date = dateStr ? new Date(dateStr) : undefined;
+                              if (date) {
+                                filters.setCustomStartDate(date);
+                                if (filters.customEndDate && date > filters.customEndDate) {
+                                  filters.setCustomEndDate(date);
                                 }
-                              }}
-                              maxDate={new Date()}
-                              placeholderText="dd/mm/yyyy"
-                              className="w-full"
-                            />
+                              } else {
+                                filters.setCustomStartDate(undefined);
+                              }
+                            }}
+                            maxDate={new Date()}
+                            placeholderText="dd/mm/yyyy"
+                            className="w-full"
+                          />
                         </div>
                         <div className="space-y-2">
                           <Label htmlFor="end-date">End Date</Label>
diff --git a/src/pages/Requests/components/RequestCard.tsx b/src/pages/Requests/components/RequestCard.tsx
index d03063c..bddb01a 100644
--- a/src/pages/Requests/components/RequestCard.tsx
+++ b/src/pages/Requests/components/RequestCard.tsx
@@ -15,23 +15,23 @@ import { formatDateDDMMYYYY } from '@/utils/dateFormatter';
  */
 const stripHtmlTags = (html: string): string => {
   if (!html) return '';
-  
+
   // Check if we're in a browser environment
   if (typeof document === 'undefined') {
     // Fallback for SSR: use regex to strip HTML tags
     return html.replace(/<[^>]*>/g, '').replace(/\s+/g, ' ').trim();
   }
-  
+
   // Create a temporary div to parse HTML
   const tempDiv = document.createElement('div');
   tempDiv.innerHTML = html;
-  
+
   // Get text content (automatically strips HTML tags)
   let text = tempDiv.textContent || tempDiv.innerText || '';
-  
+
   // Clean up extra whitespace
   text = text.replace(/\s+/g, ' ').trim();
-  
+
   return text;
 };
 
@@ -100,18 +100,18 @@ export function RequestCard({ request, index, onViewRequest }: RequestCardProps)
                   {(() => {
                     const templateType = request?.templateType || (request as any)?.template_type || '';
                     const templateTypeUpper = templateType?.toUpperCase() || '';
-                    
+
                     // Direct mapping from templateType
                     let templateLabel = 'Non-Templatized';
                     let templateColor = 'bg-purple-100 !text-purple-600 border-purple-200';
-                    
+
                     if (templateTypeUpper === 'DEALER CLAIM') {
                       templateLabel = 'Dealer Claim';
                       templateColor = 'bg-blue-100 !text-blue-700 border-blue-200';
                     } else if (templateTypeUpper === 'TEMPLATE') {
                       templateLabel = 'Template';
                     }
-                    
+
                     return (
                       <Badge
                         variant="outline"
diff --git a/src/pages/Settings/Settings.tsx b/src/pages/Settings/Settings.tsx
index 6953ade..3c1586f 100644
--- a/src/pages/Settings/Settings.tsx
+++ b/src/pages/Settings/Settings.tsx
@@ -1,9 +1,9 @@
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { 
-  Settings as SettingsIcon, 
-  Bell, 
+import {
+  Settings as SettingsIcon,
+  Bell,
   Shield,
   Palette,
   Lock,
@@ -54,7 +54,7 @@ export function Settings() {
   const handleEnableNotifications = async () => {
     setIsEnablingNotifications(true);
     setShowNotificationModal(false);
-    
+
     try {
       // Check if notifications are supported
       if (!('Notification' in window)) {
@@ -67,7 +67,7 @@ export function Settings() {
 
       // Check current permission status BEFORE attempting to enable
       let permission = Notification.permission;
-      
+
       // If permission was previously denied, show user-friendly instructions
       if (permission === 'denied') {
         setNotificationSuccess(false);
@@ -87,7 +87,7 @@ export function Settings() {
       // If permission is 'default', request it first
       if (permission === 'default') {
         permission = await Notification.requestPermission();
-        
+
         // If user denied the permission request
         if (permission === 'denied') {
           setNotificationSuccess(false);
@@ -126,13 +126,13 @@ export function Settings() {
       // Provide more specific error messages
       const errorMessage = error?.message || 'Unknown error occurred';
       setNotificationMessage(
-        errorMessage.includes('permission') 
+        errorMessage.includes('permission')
           ? 'Notification permission was denied. Please enable notifications in your browser settings and try again.'
           : errorMessage.includes('Service worker')
-          ? 'Service worker registration failed. Please refresh the page and try again.'
-          : errorMessage.includes('token')
-          ? 'Authentication required. Please log in again and try enabling notifications.'
-          : `Unable to enable push notifications: ${errorMessage}`
+            ? 'Service worker registration failed. Please refresh the page and try again.'
+            : errorMessage.includes('token')
+              ? 'Authentication required. Please log in again and try enabling notifications.'
+              : `Unable to enable push notifications: ${errorMessage}`
       );
       setShowNotificationModal(true);
     } finally {
@@ -147,7 +147,7 @@ export function Settings() {
         <Card className="relative overflow-hidden shadow-2xl border-0 rounded-2xl">
           <div className="absolute inset-0 bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900"></div>
           <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-yellow-400/20 via-transparent to-transparent"></div>
-          
+
           <CardContent className="relative z-10 p-6 sm:p-8 lg:p-12">
             <div className="flex items-center gap-4 sm:gap-6">
               <div className="w-14 h-14 sm:w-16 sm:h-16 bg-gradient-to-br from-yellow-400 to-yellow-500 rounded-2xl flex items-center justify-center shadow-xl transform hover:scale-105 transition-transform">
@@ -164,47 +164,47 @@ export function Settings() {
         {/* Tabs for Admin, Cards for Non-Admin */}
         {isAdmin ? (
           <Tabs defaultValue="user" className="w-full">
-            <TabsList className="grid w-full grid-cols-2 lg:grid-cols-5 mb-8 bg-slate-100 p-1 rounded-xl h-auto gap-1">
-              <TabsTrigger 
-                value="user" 
+            <TabsList className="grid w-full grid-cols-2 lg:grid-cols-4 mb-8 bg-slate-100 p-1 rounded-xl h-auto gap-1">
+              <TabsTrigger
+                value="user"
                 className="flex items-center justify-center gap-2 py-3 rounded-lg data-[state=active]:bg-white data-[state=active]:shadow-md transition-all"
               >
                 <SettingsIcon className="w-4 h-4" />
                 <span className="hidden sm:inline">User Settings</span>
                 <span className="sm:hidden">User</span>
               </TabsTrigger>
-              <TabsTrigger 
-                value="roles" 
+              <TabsTrigger
+                value="roles"
                 className="flex items-center justify-center gap-2 py-3 rounded-lg data-[state=active]:bg-white data-[state=active]:shadow-md transition-all"
               >
                 <Shield className="w-4 h-4" />
                 <span className="hidden sm:inline">User Roles</span>
                 <span className="sm:hidden">Roles</span>
               </TabsTrigger>
-              <TabsTrigger 
-                value="system" 
+              <TabsTrigger
+                value="system"
                 className="flex items-center justify-center gap-2 py-3 rounded-lg data-[state=active]:bg-white data-[state=active]:shadow-md transition-all"
               >
                 <Sliders className="w-4 h-4" />
                 <span className="hidden sm:inline">Configuration</span>
                 <span className="sm:hidden">Config</span>
               </TabsTrigger>
-              <TabsTrigger 
-                value="holidays" 
+              <TabsTrigger
+                value="holidays"
                 className="flex items-center justify-center gap-2 py-3 rounded-lg data-[state=active]:bg-white data-[state=active]:shadow-md transition-all"
               >
                 <Calendar className="w-4 h-4" />
                 <span className="hidden sm:inline">Holidays</span>
                 <span className="sm:hidden">Holidays</span>
               </TabsTrigger>
-              <TabsTrigger 
+              {/* <TabsTrigger 
                 value="templates" 
                 className="flex items-center justify-center gap-2 py-3 rounded-lg data-[state=active]:bg-white data-[state=active]:shadow-md transition-all"
               >
                 <FileText className="w-4 h-4" />
                 <span className="hidden sm:inline">Templates</span>
                 <span className="sm:hidden">Templates</span>
-              </TabsTrigger>
+              </TabsTrigger> */}
             </TabsList>
 
             {/* Fixed width container to prevent layout shifts */}
@@ -240,12 +240,12 @@ export function Settings() {
                         ) : (
                           <div className="p-3 bg-blue-50 border border-blue-200 rounded-md">
                             <p className="text-xs text-blue-800">
-                              Click below to register this browser for receiving push notifications. 
+                              Click below to register this browser for receiving push notifications.
                               This needs to be done once per browser/device.
                             </p>
                           </div>
                         )}
-                        <Button 
+                        <Button
                           onClick={handleEnableNotifications}
                           disabled={isEnablingNotifications || hasSubscription}
                           className="w-full bg-re-green hover:bg-re-green/90 text-white shadow-md hover:shadow-lg transition-all disabled:opacity-50 disabled:cursor-not-allowed"
@@ -315,7 +315,7 @@ export function Settings() {
                       </div>
                     </CardHeader>
                     <CardContent>
-                      <Button 
+                      <Button
                         onClick={() => setShowPreferencesModal(true)}
                         className="w-full bg-re-green hover:bg-re-green/90 text-white shadow-md hover:shadow-lg transition-all"
                       >
@@ -362,7 +362,7 @@ export function Settings() {
                     <CardContent className="pt-6">
                       <div className="space-y-4">
                         {/* Dealer Claim Activity Settings Card */}
-                        <Card 
+                        <Card
                           className="shadow-md hover:shadow-lg transition-all duration-300 border border-slate-200 rounded-lg cursor-pointer group"
                           onClick={() => setShowActivityTypeManager(true)}
                         >
@@ -460,12 +460,12 @@ export function Settings() {
                     ) : (
                       <div className="p-3 bg-blue-50 border border-blue-200 rounded-md">
                         <p className="text-xs text-blue-800">
-                          Click below to register this browser for receiving push notifications. 
+                          Click below to register this browser for receiving push notifications.
                           This needs to be done once per browser/device.
                         </p>
                       </div>
                     )}
-                    <Button 
+                    <Button
                       onClick={handleEnableNotifications}
                       disabled={isEnablingNotifications || hasSubscription}
                       className="w-full bg-re-green hover:bg-re-green/90 text-white shadow-md hover:shadow-lg transition-all disabled:opacity-50 disabled:cursor-not-allowed"
@@ -535,7 +535,7 @@ export function Settings() {
                   </div>
                 </CardHeader>
                 <CardContent>
-                  <Button 
+                  <Button
                     onClick={() => setShowPreferencesModal(true)}
                     className="w-full bg-re-green hover:bg-re-green/90 text-white shadow-md hover:shadow-lg transition-all"
                   >
@@ -548,14 +548,14 @@ export function Settings() {
           </>
         )}
       </div>
-      
+
       <NotificationStatusModal
         open={showNotificationModal}
         onClose={() => setShowNotificationModal(false)}
         success={notificationSuccess}
         message={notificationMessage}
       />
-      
+
       <NotificationPreferencesModal
         open={showPreferencesModal}
         onClose={() => setShowPreferencesModal(false)}