lint erors fixed

src/App.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { BrowserRouter, Routes, Route, useNavigate } from 'react-router-dom';
+import { BrowserRouter, Routes, Route, useNavigate, Outlet } from 'react-router-dom';
 import { PageLayout } from '@/components/layout/PageLayout';
 import { Dashboard } from '@/pages/Dashboard';
 import { OpenRequests } from '@/pages/OpenRequests';
@@ -21,6 +21,9 @@ import { Settings } from '@/pages/Settings';
 import { Notifications } from '@/pages/Notifications';
 import { DetailedReports } from '@/pages/DetailedReports';
 import { Admin } from '@/pages/Admin';
+import { AdminTemplatesList } from '@/pages/Admin/Templates/AdminTemplatesList';
+import { CreateTemplate } from '@/pages/Admin/Templates/CreateTemplate';
+import { CreateAdminRequest } from '@/pages/CreateAdminRequest/CreateAdminRequest';
 import { ApprovalActionModal } from '@/components/modals/ApprovalActionModal';
 import { Toaster } from '@/components/ui/sonner';
 import { toast } from 'sonner';
@@ -40,7 +43,7 @@ interface AppProps {
 function RequestsRoute({ onViewRequest }: { onViewRequest: (requestId: string) => void }) {
   const { user } = useAuth();
   const isAdmin = hasManagementAccess(user);
-  
+
   // Render separate screens based on user role
   // Admin/Management users see all organization requests
   // Regular users see only their participant requests (approver/spectator, NOT initiator)
@@ -152,7 +155,7 @@ function AppRoutes({ onLogout }: AppProps) {
   const handleViewRequest = (requestId: string, requestTitle?: string, status?: string, request?: any) => {
     setSelectedRequestId(requestId);
     setSelectedRequestTitle(requestTitle || 'Unknown Request');
-    
+
     // Use global navigation utility for consistent routing
     navigateToRequest({
       requestId,
@@ -180,18 +183,18 @@ function AppRoutes({ onLogout }: AppProps) {
       }
       return;
     }
-    
+
     // If requestData has backendId, it means it came from the API flow (CreateRequest component)
     // The hook already shows the toast, so we just navigate
     if (requestData.backendId) {
       navigate('/my-requests');
       return;
     }
-    
+
     // Regular custom request submission (old flow without API)
     // Generate unique ID for the new custom request
     const requestId = `RE-REQ-2024-${String(Object.keys(CUSTOM_REQUEST_DATABASE).length + dynamicRequests.length + 1).padStart(3, '0')}`;
-    
+
     // Create full custom request object
     const newCustomRequest = {
       id: requestId,
@@ -219,21 +222,21 @@ function AppRoutes({ onLogout }: AppProps) {
         avatar: 'CU'
       },
       department: requestData.department || 'General',
-      createdAt: new Date().toLocaleDateString('en-US', { 
-        month: 'short', 
-        day: 'numeric', 
-        year: 'numeric', 
-        hour: 'numeric', 
+      createdAt: new Date().toLocaleDateString('en-US', {
+        month: 'short',
+        day: 'numeric',
+        year: 'numeric',
+        hour: 'numeric',
         minute: 'numeric',
-        hour12: true 
+        hour12: true
       }),
-      updatedAt: new Date().toLocaleDateString('en-US', { 
-        month: 'short', 
-        day: 'numeric', 
-        year: 'numeric', 
-        hour: 'numeric', 
+      updatedAt: new Date().toLocaleDateString('en-US', {
+        month: 'short',
+        day: 'numeric',
+        year: 'numeric',
+        hour: 'numeric',
         minute: 'numeric',
-        hour12: true 
+        hour12: true
       }),
       dueDate: new Date(Date.now() + 5 * 24 * 60 * 60 * 1000).toISOString(),
       submittedDate: new Date().toISOString(),
@@ -243,7 +246,7 @@ function AppRoutes({ onLogout }: AppProps) {
         // Extract name from email if name is not available
         const approverName = approver?.name || approver?.email?.split('@')[0] || `Approver ${index + 1}`;
         const approverEmail = approver?.email || '';
-        
+
         return {
           step: index + 1,
           approver: `${approverName}${approverEmail ? ` (${approverEmail})` : ''}`,
@@ -268,32 +271,28 @@ function AppRoutes({ onLogout }: AppProps) {
           };
         }),
       auditTrail: [
-        { 
-          type: 'created', 
-          action: 'Request Created', 
-          details: `Custom request "${requestData.title}" created`, 
-          user: 'Current User', 
+        {
+          type: 'created',
+          action: 'Request Created',
+          details: `Custom request "${requestData.title}" created`,
+          user: 'Current User',
           timestamp: new Date().toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric', hour: 'numeric', minute: 'numeric', hour12: true })
         },
-        { 
-          type: 'assignment', 
-          action: 'Assigned to Approver', 
-          details: `Request assigned to ${requestData.approvers?.[0]?.name || requestData.approvers?.[0]?.email || 'first approver'}`, 
-          user: 'System', 
+        {
+          type: 'assignment',
+          action: 'Assigned to Approver',
+          details: `Request assigned to ${requestData.approvers?.[0]?.name || requestData.approvers?.[0]?.email || 'first approver'}`,
+          user: 'System',
           timestamp: new Date().toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric', hour: 'numeric', minute: 'numeric', hour12: true })
         }
       ],
       tags: requestData.tags || ['custom-request']
     };
-    
+
     // Add to dynamic requests
     setDynamicRequests([...dynamicRequests, newCustomRequest]);
-    
+
     navigate('/my-requests');
-    toast.success('Request Submitted Successfully!', {
-      description: `Your request "${requestData.title}" (${requestId}) has been created and sent for approval.`,
-      duration: 5000,
-    });
   };
 
   const handleApprovalSubmit = (action: 'approve' | 'reject', _comment: string) => {
@@ -310,7 +309,7 @@ function AppRoutes({ onLogout }: AppProps) {
             duration: 5000,
           });
         }
-        
+
         setApprovalAction(null);
         resolve(true);
       }, 1000);
@@ -343,7 +342,7 @@ function AppRoutes({ onLogout }: AppProps) {
 
       // Call API to create claim request
       const response = await createClaimRequest(payload);
-      
+
       // Validate response - ensure request was actually created successfully
       if (!response || !response.request) {
         throw new Error('Invalid response from server: Request object not found');
@@ -377,11 +376,11 @@ function AppRoutes({ onLogout }: AppProps) {
       }
     } catch (error: any) {
       console.error('[App] Error creating claim request:', error);
-      
+
       // Check for manager-related errors
       const errorData = error?.response?.data;
       const errorCode = errorData?.code || errorData?.error?.code;
-      
+
       if (errorCode === 'NO_MANAGER_FOUND') {
         // Show modal for no manager found
         setManagerModalData({
@@ -392,7 +391,7 @@ function AppRoutes({ onLogout }: AppProps) {
         setManagerModalOpen(true);
         return;
       }
-      
+
       if (errorCode === 'MULTIPLE_MANAGERS_FOUND') {
         // Show modal with manager list for selection
         const managers = errorData?.managers || errorData?.error?.managers || [];
@@ -405,20 +404,20 @@ function AppRoutes({ onLogout }: AppProps) {
         setManagerModalOpen(true);
         return;
       }
-      
+
       // Other errors - show toast
       const errorMessage = error?.response?.data?.message || error?.message || 'Failed to create claim request';
       toast.error('Failed to Submit Claim Request', {
         description: errorMessage,
       });
     }
-    
+
     // Keep the old code below for backward compatibility (local storage fallback)
     // This can be removed once API integration is fully tested
     /*
     // Generate unique ID for the new claim request
     const requestId = `RE-REQ-2024-CM-${String(dynamicRequests.length + 2).padStart(3, '0')}`;
-    
+
     // Create full request object
     const newRequest = {
       id: requestId,
@@ -445,21 +444,21 @@ function AppRoutes({ onLogout }: AppProps) {
         avatar: 'CU'
       },
       department: 'Marketing',
-      createdAt: new Date().toLocaleString('en-US', { 
-        month: 'short', 
-        day: 'numeric', 
-        year: 'numeric', 
-        hour: 'numeric', 
+      createdAt: new Date().toLocaleString('en-US', {
+        month: 'short',
+        day: 'numeric',
+        year: 'numeric',
+        hour: 'numeric',
         minute: 'numeric',
-        hour12: true 
+        hour12: true
       }),
-      updatedAt: new Date().toLocaleString('en-US', { 
-        month: 'short', 
-        day: 'numeric', 
-        year: 'numeric', 
-        hour: 'numeric', 
+      updatedAt: new Date().toLocaleString('en-US', {
+        month: 'short',
+        day: 'numeric',
+        year: 'numeric',
+        hour: 'numeric',
         minute: 'numeric',
-        hour12: true 
+        hour12: true
       }),
       dueDate: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000).toISOString(),
       conclusionRemark: '',
@@ -579,30 +578,30 @@ function AppRoutes({ onLogout }: AppProps) {
       documents: [],
       spectators: [],
       auditTrail: [
-        { 
-          type: 'created', 
-          action: 'Request Created', 
-          details: `Claim request for ${claimData.activityName} created`, 
-          user: 'Current User', 
-          timestamp: new Date().toLocaleString('en-US', { 
-            month: 'short', 
-            day: 'numeric', 
-            year: 'numeric', 
-            hour: 'numeric', 
+        {
+          type: 'created',
+          action: 'Request Created',
+          details: `Claim request for ${claimData.activityName} created`,
+          user: 'Current User',
+          timestamp: new Date().toLocaleString('en-US', {
+            month: 'short',
+            day: 'numeric',
+            year: 'numeric',
+            hour: 'numeric',
             minute: 'numeric',
-            hour12: true 
+            hour12: true
           })
         }
       ],
       tags: ['claim-management', 'new-request', claimData.activityType?.toLowerCase().replace(/\s+/g, '-')]
     };
-    
+
     // Add to dynamic requests
     setDynamicRequests(prev => [...prev, newRequest]);
-    
+
     // Also add to REQUEST_DATABASE for immediate viewing
     (REQUEST_DATABASE as any)[requestId] = newRequest;
-    
+
     toast.success('Claim Request Submitted', {
       description: 'Your claim management request has been created successfully.',
     });
@@ -614,134 +613,194 @@ function AppRoutes({ onLogout }: AppProps) {
     <div className="min-h-screen h-screen flex flex-col overflow-hidden bg-background">
       <Routes>
         {/* Auth Callback - Unified callback for both OKTA and Tanflow */}
-        <Route 
-          path="/login/callback" 
-          element={<AuthCallback />} 
+        <Route
+          path="/login/callback"
+          element={<AuthCallback />}
         />
-        
+
         {/* Dashboard - Conditionally renders DealerDashboard or regular Dashboard */}
-        <Route 
-          path="/" 
+        <Route
+          path="/"
           element={
             <PageLayout currentPage="dashboard" onNavigate={handleNavigate} onNewRequest={handleNewRequest} onLogout={onLogout}>
               <DashboardRoute onNavigate={handleNavigate} onNewRequest={handleNewRequest} />
             </PageLayout>
-          } 
+          }
         />
-        
-        <Route 
-          path="/dashboard" 
+
+        <Route
+          path="/dashboard"
           element={
             <PageLayout currentPage="dashboard" onNavigate={handleNavigate} onNewRequest={handleNewRequest} onLogout={onLogout}>
               <DashboardRoute onNavigate={handleNavigate} onNewRequest={handleNewRequest} />
             </PageLayout>
-          } 
+          }
+        />
+
+        {/* Admin Routes Group with Shared Layout */}
+        <Route
+          element={
+            <PageLayout currentPage="admin-templates" onNavigate={handleNavigate} onNewRequest={handleNewRequest} onLogout={onLogout}>
+              <Outlet />
+            </PageLayout>
+          }
+        >
+          <Route path="/admin/create-template" element={<CreateTemplate />} />
+          <Route path="/admin/edit-template/:templateId" element={<CreateTemplate />} />
+          <Route path="/admin/templates" element={<AdminTemplatesList />} />
+        </Route>
+
+        {/* Create Request from Admin Template (Dedicated Flow) */}
+        <Route
+          path="/create-admin-request/:templateId"
+          element={
+            <CreateAdminRequest />
+          }
+        />
+
+        <Route
+          path="/admin"
+          element={
+            <PageLayout currentPage="admin" onNavigate={handleNavigate} onNewRequest={handleNewRequest} onLogout={onLogout}>
+              <Admin />
+            </PageLayout>
+          }
+        />
+
+        {/* Admin Routes Group with Shared Layout */}
+        <Route
+          element={
+            <PageLayout currentPage="admin-templates" onNavigate={handleNavigate} onNewRequest={handleNewRequest} onLogout={onLogout}>
+              <Outlet />
+            </PageLayout>
+          }
+        >
+          <Route path="/admin/create-template" element={<CreateTemplate />} />
+          <Route path="/admin/edit-template/:templateId" element={<CreateTemplate />} />
+          <Route path="/admin/templates" element={<AdminTemplatesList />} />
+        </Route>
+
+        {/* Create Request from Admin Template (Dedicated Flow) */}
+        <Route
+          path="/create-admin-request/:templateId"
+          element={
+            <CreateAdminRequest />
+          }
+        />
+
+        <Route
+          path="/admin"
+          element={
+            <PageLayout currentPage="admin" onNavigate={handleNavigate} onNewRequest={handleNewRequest} onLogout={onLogout}>
+              <Admin />
+            </PageLayout>
+          }
         />
 
         {/* Open Requests */}
-        <Route 
-          path="/open-requests" 
+        <Route
+          path="/open-requests"
           element={
             <PageLayout currentPage="open-requests" onNavigate={handleNavigate} onNewRequest={handleNewRequest} onLogout={onLogout}>
               <OpenRequests onViewRequest={handleViewRequest} />
             </PageLayout>
-          } 
+          }
         />
 
         {/* Closed Requests */}
-        <Route 
-          path="/closed-requests" 
+        <Route
+          path="/closed-requests"
           element={
             <PageLayout currentPage="closed-requests" onNavigate={handleNavigate} onNewRequest={handleNewRequest} onLogout={onLogout}>
               <ClosedRequests onViewRequest={handleViewRequest} />
             </PageLayout>
-          } 
+          }
         />
 
         {/* Shared Summaries */}
-        <Route 
-          path="/shared-summaries" 
+        <Route
+          path="/shared-summaries"
           element={
             <PageLayout currentPage="shared-summaries" onNavigate={handleNavigate} onNewRequest={handleNewRequest} onLogout={onLogout}>
               <SharedSummaries />
             </PageLayout>
-          } 
+          }
         />
 
         {/* Shared Summary Detail */}
-        <Route 
-          path="/shared-summaries/:sharedSummaryId" 
+        <Route
+          path="/shared-summaries/:sharedSummaryId"
           element={
             <PageLayout currentPage="shared-summaries" onNavigate={handleNavigate} onNewRequest={handleNewRequest} onLogout={onLogout}>
               <SharedSummaryDetail />
             </PageLayout>
-          } 
+          }
         />
 
         {/* My Requests */}
-        <Route 
-          path="/my-requests" 
+        <Route
+          path="/my-requests"
           element={
             <PageLayout currentPage="my-requests" onNavigate={handleNavigate} onNewRequest={handleNewRequest} onLogout={onLogout}>
               <MyRequests onViewRequest={handleViewRequest} dynamicRequests={dynamicRequests} />
             </PageLayout>
-          } 
+          }
         />
 
         {/* Requests - Separate screens for Admin and Regular Users */}
-        <Route 
-          path="/requests" 
+        <Route
+          path="/requests"
           element={
             <PageLayout currentPage="requests" onNavigate={handleNavigate} onNewRequest={handleNewRequest} onLogout={onLogout}>
               <RequestsRoute onViewRequest={handleViewRequest} />
             </PageLayout>
-          } 
+          }
         />
 
         {/* Approver Performance - Detailed Performance Analysis */}
-        <Route 
-          path="/approver-performance" 
+        <Route
+          path="/approver-performance"
           element={
             <PageLayout currentPage="approver-performance" onNavigate={handleNavigate} onNewRequest={handleNewRequest} onLogout={onLogout}>
               <ApproverPerformance />
             </PageLayout>
-          } 
+          }
         />
 
         {/* Request Detail - requestId will be read from URL params */}
-        <Route 
-          path="/request/:requestId" 
+        <Route
+          path="/request/:requestId"
           element={
             <PageLayout currentPage="request-detail" onNavigate={handleNavigate} onNewRequest={handleNewRequest} onLogout={onLogout}>
-              <RequestDetail 
-                requestId="" 
+              <RequestDetail
+                requestId=""
                 onBack={handleBack}
                 dynamicRequests={dynamicRequests}
               />
             </PageLayout>
-          } 
+          }
         />
 
         {/* Work Notes - Dedicated Full-Screen Page */}
-        <Route 
-          path="/work-notes/:requestId" 
-          element={<WorkNotes />} 
+        <Route
+          path="/work-notes/:requestId"
+          element={<WorkNotes />}
         />
 
         {/* New Request (Custom) */}
-        <Route 
-          path="/new-request" 
+        <Route
+          path="/new-request"
           element={
             <CreateRequest
               onBack={handleBack}
               onSubmit={handleNewRequestSubmit}
             />
-          } 
+          }
         />
 
         {/* Edit Draft Request */}
-        <Route 
-          path="/edit-request/:requestId" 
+        <Route
+          path="/edit-request/:requestId"
           element={
             <CreateRequest
               onBack={handleBack}
@@ -749,72 +808,66 @@ function AppRoutes({ onLogout }: AppProps) {
               requestId={undefined} // Will be read from URL params
               isEditMode={true}
             />
-          } 
+          }
         />
 
         {/* Claim Management Wizard */}
-        <Route 
-          path="/claim-management" 
+        <Route
+          path="/claim-management"
           element={
             <ClaimManagementWizard
               onBack={handleBack}
               onSubmit={handleClaimManagementSubmit}
             />
-          } 
+          }
         />
 
         {/* Profile */}
-        <Route 
-          path="/profile" 
+        <Route
+          path="/profile"
           element={
             <PageLayout currentPage="profile" onNavigate={handleNavigate} onNewRequest={handleNewRequest} onLogout={onLogout}>
               <Profile />
             </PageLayout>
-          } 
+          }
         />
 
         {/* Settings */}
-        <Route 
-          path="/settings" 
+        <Route
+          path="/settings"
           element={
             <PageLayout currentPage="settings" onNavigate={handleNavigate} onNewRequest={handleNewRequest} onLogout={onLogout}>
               <Settings />
             </PageLayout>
-          } 
+          }
         />
 
         {/* Notifications */}
-        <Route 
-          path="/notifications" 
+        <Route
+          path="/notifications"
           element={
             <PageLayout currentPage="notifications" onNavigate={handleNavigate} onNewRequest={handleNewRequest} onLogout={onLogout}>
               <Notifications onNavigate={handleNavigate} />
             </PageLayout>
-          } 
+          }
         />
 
         {/* Detailed Reports */}
-        <Route 
-          path="/detailed-reports" 
+        <Route
+          path="/detailed-reports"
           element={
             <PageLayout currentPage="detailed-reports" onNavigate={handleNavigate} onNewRequest={handleNewRequest} onLogout={onLogout}>
               <DetailedReports />
             </PageLayout>
-          } 
+          }
         />
 
-        {/* Admin Control Panel */}
-        <Route 
-          path="/admin" 
-          element={
-            <PageLayout currentPage="admin" onNavigate={handleNavigate} onNewRequest={handleNewRequest} onLogout={onLogout}>
-              <Admin />
-            </PageLayout>
-          } 
-        />
+
+
+
       </Routes>
 
-      <Toaster 
+      <Toaster
         position="top-right"
         toastOptions={{
           style: {
@@ -868,7 +921,7 @@ interface MainAppProps {
 
 export default function App(props?: MainAppProps) {
   const { onLogout } = props || {};
-  
+
   return (
     <BrowserRouter>
       <AppRoutes onLogout={onLogout} />

src/components/layout/PageLayout/PageLayout.tsx

@@ -36,7 +36,7 @@ export function PageLayout({ children, currentPage = 'dashboard', onNavigate, on
   const [unreadCount, setUnreadCount] = useState(0);
   const [notificationsOpen, setNotificationsOpen] = useState(false);
   const { user } = useAuth();
-  
+
   // Check if user is a Dealer
   const isDealer = useMemo(() => {
     try {
@@ -47,7 +47,7 @@ export function PageLayout({ children, currentPage = 'dashboard', onNavigate, on
       return false;
     }
   }, []);
-  
+
   // Get user initials for avatar
   const getUserInitials = () => {
     try {
@@ -67,19 +67,20 @@ export function PageLayout({ children, currentPage = 'dashboard', onNavigate, on
       return 'U';
     }
   };
-  
+
   const menuItems = useMemo(() => {
     const items = [
       { id: 'dashboard', label: 'Dashboard', icon: Home },
       // Add "All Requests" for all users (admin sees org-level, regular users see their participant requests)
       { id: 'requests', label: 'All Requests', icon: List },
+      { id: 'admin/templates', label: 'Admin Templates', icon: Plus, adminOnly: true },
     ];
 
     // Add remaining menu items (exclude "My Requests" for dealers)
     if (!isDealer) {
       items.push({ id: 'my-requests', label: 'My Requests', icon: User });
     }
-    
+
     items.push(
       { id: 'open-requests', label: 'Open Requests', icon: FileText },
       { id: 'closed-requests', label: 'Closed Requests', icon: CheckCircle },
@@ -98,7 +99,7 @@ export function PageLayout({ children, currentPage = 'dashboard', onNavigate, on
       // Mark as read
       if (!notification.isRead) {
         await notificationApi.markAsRead(notification.notificationId);
-        setNotifications(prev => 
+        setNotifications(prev =>
           prev.map(n => n.notificationId === notification.notificationId ? { ...n, isRead: true } : n)
         );
         setUnreadCount(prev => Math.max(0, prev - 1));
@@ -111,14 +112,14 @@ export function PageLayout({ children, currentPage = 'dashboard', onNavigate, on
         if (requestNumber) {
           // Determine which tab to open based on notification type
           let navigationUrl = `request/${requestNumber}`;
-          
+
           // Work note related notifications should open Work Notes tab
-          if (notification.notificationType === 'mention' || 
-              notification.notificationType === 'comment' || 
-              notification.notificationType === 'worknote') {
+          if (notification.notificationType === 'mention' ||
+            notification.notificationType === 'comment' ||
+            notification.notificationType === 'worknote') {
             navigationUrl += '?tab=worknotes';
           }
-          
+
           // Navigate to request detail page
           onNavigate(navigationUrl);
         }
@@ -152,7 +153,7 @@ export function PageLayout({ children, currentPage = 'dashboard', onNavigate, on
       try {
         const result = await notificationApi.list({ page: 1, limit: 4, unreadOnly: false });
         if (!mounted) return;
-        
+
         const notifs = result.data?.notifications || [];
         setNotifications(notifs);
         setUnreadCount(result.data?.unreadCount || 0);
@@ -173,7 +174,7 @@ export function PageLayout({ children, currentPage = 'dashboard', onNavigate, on
       // Listen for new notifications
       const handleNewNotification = (data: { notification: Notification }) => {
         if (!mounted) return;
-        
+
         setNotifications(prev => [data.notification, ...prev].slice(0, 4)); // Keep latest 4 for dropdown
         setUnreadCount(prev => prev + 1);
       };
@@ -214,7 +215,7 @@ export function PageLayout({ children, currentPage = 'dashboard', onNavigate, on
     <div className="min-h-screen flex w-full bg-background">
       {/* Mobile Overlay */}
       {sidebarOpen && (
-        <div 
+        <div
           className="fixed inset-0 bg-black/50 z-40 md:hidden"
           onClick={() => setSidebarOpen(false)}
         />
@@ -238,9 +239,9 @@ export function PageLayout({ children, currentPage = 'dashboard', onNavigate, on
         <div className={`w-64 h-full flex flex-col overflow-hidden ${!sidebarOpen ? 'md:hidden' : ''}`}>
           <div className="p-4 border-b border-gray-800 flex-shrink-0">
             <div className="flex flex-col items-center justify-center">
-              <img 
-                src={ReLogo} 
-                alt="Royal Enfield Logo" 
+              <img
+                src={ReLogo}
+                alt="Royal Enfield Logo"
                 className="h-10 w-auto max-w-[168px] object-contain"
               />
               <p className="text-xs text-gray-400 text-center mt-1 truncate">RE Flow</p>
@@ -248,28 +249,31 @@ export function PageLayout({ children, currentPage = 'dashboard', onNavigate, on
           </div>
           <div className="p-3 flex-1 overflow-y-auto">
             <div className="space-y-2">
-              {menuItems.map((item) => (
+              {menuItems.filter(item => !item.adminOnly || (user as any)?.role === 'ADMIN').map((item) => (
                 <button
                   key={item.id}
                   onClick={() => {
-                    onNavigate?.(item.id);
+                    if (item.id === 'admin/templates') {
+                      onNavigate?.('admin/templates');
+                    } else {
+                      onNavigate?.(item.id);
+                    }
                     // Close sidebar on mobile after navigation
                     if (window.innerWidth < 768) {
                       setSidebarOpen(false);
                     }
                   }}
-                  className={`w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors ${
-                    currentPage === item.id
-                      ? 'bg-re-green text-white font-medium'
-                      : 'text-gray-300 hover:bg-gray-900 hover:text-white'
-                  }`}
+                  className={`w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors ${currentPage === item.id
+                    ? 'bg-re-green text-white font-medium'
+                    : 'text-gray-300 hover:bg-gray-900 hover:text-white'
+                    }`}
                 >
                   <item.icon className="w-4 h-4 shrink-0" />
                   <span className="truncate">{item.label}</span>
                 </button>
               ))}
             </div>
-            
+
             {/* Quick Action in Sidebar - Right below menu items */}
             {!isDealer && (
               <div className="mt-6 pt-6 border-t border-gray-800 px-3">
@@ -292,14 +296,14 @@ export function PageLayout({ children, currentPage = 'dashboard', onNavigate, on
         {/* Header */}
         <header className="h-16 border-b border-gray-200 bg-white flex items-center justify-between px-6 shrink-0">
           <div className="flex items-center gap-4 min-w-0 flex-1">
-                    <Button
-                      variant="ghost"
-                      size="icon"
-                      onClick={toggleSidebar}
-                      className="shrink-0 h-10 w-10 sidebar-toggle"
-                    >
-                      {sidebarOpen ? <PanelLeftClose className="w-5 h-5 text-gray-600" /> : <PanelLeft className="w-5 h-5 text-gray-600" />}
-                    </Button>
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={toggleSidebar}
+              className="shrink-0 h-10 w-10 sidebar-toggle"
+            >
+              {sidebarOpen ? <PanelLeftClose className="w-5 h-5 text-gray-600" /> : <PanelLeft className="w-5 h-5 text-gray-600" />}
+            </Button>
             {/* Search bar commented out */}
             {/* <div className="relative max-w-md flex-1">
               <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
@@ -361,9 +365,8 @@ export function PageLayout({ children, currentPage = 'dashboard', onNavigate, on
                       {notifications.map((notif) => (
                         <div
                           key={notif.notificationId}
-                          className={`p-3 hover:bg-gray-50 cursor-pointer transition-colors ${
-                            !notif.isRead ? 'bg-blue-50' : ''
-                          }`}
+                          className={`p-3 hover:bg-gray-50 cursor-pointer transition-colors ${!notif.isRead ? 'bg-blue-50' : ''
+                            }`}
                           onClick={() => handleNotificationClick(notif)}
                         >
                           <div className="flex gap-2">
@@ -422,8 +425,8 @@ export function PageLayout({ children, currentPage = 'dashboard', onNavigate, on
                   <Settings className="w-4 h-4 mr-2" />
                   Settings
                 </DropdownMenuItem>
-                <DropdownMenuItem 
-                  onClick={() => setShowLogoutDialog(true)} 
+                <DropdownMenuItem
+                  onClick={() => setShowLogoutDialog(true)}
                   className="text-red-600 focus:text-red-600"
                 >
                   <LogOut className="w-4 h-4 mr-2" />

src/components/workflow/CreateRequest/TemplateSelectionStep.tsx

@@ -1,14 +1,19 @@
-import { motion } from 'framer-motion';
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { motion, AnimatePresence } from 'framer-motion';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Separator } from '@/components/ui/separator';
-import { Check, Clock, Users, Flame, Target, TrendingUp } from 'lucide-react';
+import { Check, Clock, Users, Flame, Target, TrendingUp, FolderOpen, ArrowLeft, Info } from 'lucide-react';
 import { RequestTemplate } from '@/hooks/useCreateRequestForm';
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
 
 interface TemplateSelectionStepProps {
   templates: RequestTemplate[];
   selectedTemplate: RequestTemplate | null;
   onSelectTemplate: (template: RequestTemplate) => void;
+  adminTemplates?: RequestTemplate[];
 }
 
 const getPriorityIcon = (priority: string) => {
@@ -20,21 +25,48 @@ const getPriorityIcon = (priority: string) => {
   }
 };
 
-/**
- * Component: TemplateSelectionStep
- * 
- * Purpose: Step 1 - Template selection for request creation
- * 
- * Features:
- * - Displays available templates
- * - Shows template details when selected
- * - Test IDs for testing
- */
 export function TemplateSelectionStep({
   templates,
   selectedTemplate,
-  onSelectTemplate
+  onSelectTemplate,
+  adminTemplates = []
 }: TemplateSelectionStepProps) {
+  const [viewMode, setViewMode] = useState<'main' | 'admin'>('main');
+
+  const navigate = useNavigate();
+
+  const handleTemplateClick = (template: RequestTemplate) => {
+    if (template.id === 'admin-templates-category') {
+      setViewMode('admin');
+    } else {
+      if (viewMode === 'admin') {
+        // If selecting an actual admin template, redirect to dedicated flow
+        navigate(`/create-admin-request/${template.id}`);
+      } else {
+        // Default behavior for standard templates
+        onSelectTemplate(template);
+      }
+    }
+  };
+
+  const displayTemplates = viewMode === 'main'
+    ? [
+      ...templates,
+      {
+        id: 'admin-templates-category',
+        name: 'Admin Templates',
+        description: 'Browse standardized request workflows created by your organization administrators',
+        category: 'Organization',
+        icon: FolderOpen,
+        estimatedTime: 'Variable',
+        commonApprovers: [],
+        suggestedSLA: 0,
+        priority: 'medium',
+        fields: {}
+      } as any
+    ]
+    : adminTemplates;
+
   return (
     <motion.div
       initial={{ opacity: 0, y: 20 }}
@@ -46,101 +78,216 @@ export function TemplateSelectionStep({
       {/* Header Section */}
       <div className="text-center mb-12 max-w-3xl" data-testid="template-selection-header">
         <h1 className="text-4xl lg:text-5xl font-bold text-gray-900 mb-4" data-testid="template-selection-title">
-          Choose Your Request Type
+          {viewMode === 'main' ? 'Choose Your Request Type' : 'Organization Templates'}
         </h1>
         <p className="text-lg text-gray-600" data-testid="template-selection-description">
-          Start with a pre-built template for faster approvals, or create a custom request tailored to your needs.
+          {viewMode === 'main'
+            ? 'Start with a pre-built template for faster approvals, or create a custom request tailored to your needs.'
+            : 'Select a pre-configured workflow template defined by your organization.'}
         </p>
       </div>
 
+      {viewMode === 'admin' && (
+        <div className="w-full max-w-6xl mb-6 flex justify-start">
+          <Button variant="ghost" className="gap-2" onClick={() => setViewMode('main')}>
+            <ArrowLeft className="w-4 h-4" />
+            Back to All Types
+          </Button>
+        </div>
+      )}
+
       {/* Template Cards Grid */}
-      <div 
+      <div
         className="w-full max-w-6xl grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8"
         data-testid="template-selection-grid"
       >
-        {templates.map((template) => (
-          <motion.div
-            key={template.id}
-            whileHover={{ scale: 1.03 }}
-            whileTap={{ scale: 0.98 }}
-            transition={{ type: "spring", stiffness: 300, damping: 20 }}
-            data-testid={`template-card-${template.id}`}
-          >
-            <Card
-              className={`cursor-pointer h-full transition-all duration-300 border-2 ${
-                selectedTemplate?.id === template.id
-                  ? 'border-blue-500 shadow-xl bg-blue-50/50 ring-2 ring-blue-200'
-                  : 'border-gray-200 hover:border-blue-300 hover:shadow-lg'
-              }`}
-              onClick={() => onSelectTemplate(template)}
-              data-testid={`template-card-${template.id}-clickable`}
-            >
-              <CardHeader className="space-y-4 pb-4">
-                <div className="flex items-start justify-between">
-                  <div 
-                    className={`w-14 h-14 rounded-xl flex items-center justify-center ${
-                      selectedTemplate?.id === template.id
-                        ? 'bg-blue-100'
-                        : 'bg-gray-100'
+        {displayTemplates.length === 0 && viewMode === 'admin' ? (
+          <div className="col-span-full text-center py-12 text-gray-500 bg-gray-50 rounded-lg border-2 border-dashed border-gray-200">
+            <FolderOpen className="w-12 h-12 mx-auto mb-3 text-gray-300" />
+            <p>No admin templates available yet.</p>
+          </div>
+        ) : (
+          displayTemplates.map((template) => {
+            const isComingSoon = template.id === 'existing-template' && viewMode === 'main'; // Only show coming soon for placeholder
+            const isDisabled = isComingSoon;
+            const isCategoryCard = template.id === 'admin-templates-category';
+            // const isCustomCard = template.id === 'custom';
+            const isSelected = selectedTemplate?.id === template.id;
+
+            return (
+              <motion.div
+                key={template.id}
+                whileHover={!isDisabled ? { scale: 1.03 } : {}}
+                whileTap={!isDisabled ? { scale: 0.98 } : {}}
+                transition={{ type: "spring", stiffness: 300, damping: 20 }}
+                data-testid={`template-card-${template.id}`}
+              >
+                <Card
+                  className={`h-full transition-all duration-300 border-2 ${isDisabled
+                    ? 'border-gray-200 bg-gray-50/50 opacity-85 cursor-not-allowed'
+                    : isSelected
+                      ? 'border-blue-500 shadow-xl bg-blue-50/50 ring-2 ring-blue-200 cursor-pointer'
+                      : isCategoryCard
+                        ? 'border-blue-200 bg-blue-50/30 hover:border-blue-400 hover:shadow-lg cursor-pointer'
+                        : 'border-gray-200 hover:border-blue-300 hover:shadow-lg cursor-pointer'
                     }`}
-                    data-testid={`template-card-${template.id}-icon`}
-                  >
-                    <template.icon 
-                      className={`w-7 h-7 ${
-                        selectedTemplate?.id === template.id
-                          ? 'text-blue-600'
-                          : 'text-gray-600'
-                      }`} 
-                    />
-                  </div>
-                  {selectedTemplate?.id === template.id && (
-                    <motion.div
-                      initial={{ scale: 0 }}
-                      animate={{ scale: 1 }}
-                      transition={{ type: "spring", stiffness: 500, damping: 15 }}
-                      data-testid={`template-card-${template.id}-selected-indicator`}
-                    >
-                      <div className="w-8 h-8 rounded-full bg-blue-600 flex items-center justify-center">
-                        <Check className="w-5 h-5 text-white" />
-                      </div>
-                    </motion.div>
-                  )}
-                </div>
-                <div className="text-left">
-                  <CardTitle className="text-xl mb-2" data-testid={`template-card-${template.id}-name`}>
-                    {template.name}
-                  </CardTitle>
-                  <div className="flex items-center gap-2">
-                    <Badge variant="secondary" className="text-xs" data-testid={`template-card-${template.id}-category`}>
-                      {template.category}
-                    </Badge>
-                    {getPriorityIcon(template.priority)}
-                  </div>
-                </div>
-              </CardHeader>
-              <CardContent className="pt-0 space-y-4">
-                <p 
-                  className="text-sm text-gray-600 leading-relaxed line-clamp-2"
-                  data-testid={`template-card-${template.id}-description`}
+                  onClick={!isDisabled ? () => handleTemplateClick(template) : undefined}
+                  data-testid={`template-card-${template.id}-clickable`}
                 >
-                  {template.description}
-                </p>
-                <Separator />
-                <div className="grid grid-cols-2 gap-3 text-xs text-gray-500">
-                  <div className="flex items-center gap-1.5" data-testid={`template-card-${template.id}-estimated-time`}>
-                    <Clock className="w-3.5 h-3.5" />
-                    <span>{template.estimatedTime}</span>
+                  <CardHeader className="space-y-4 pb-4">
+                    <div className="flex items-start justify-between">
+                      <div
+                        className={`w-14 h-14 rounded-xl flex items-center justify-center ${isSelected
+                          ? 'bg-blue-100'
+                          : isCategoryCard
+                            ? 'bg-blue-100'
+                            : 'bg-gray-100'
+                          }`}
+                        data-testid={`template-card-${template.id}-icon`}
+                      >
+                        <template.icon
+                          className={`w-7 h-7 ${isSelected
+                            ? 'text-blue-600'
+                            : isCategoryCard
+                              ? 'text-blue-600'
+                              : 'text-gray-600'
+                            }`}
+                        />
+                      </div>
+                      {isSelected && (
+                        <motion.div
+                          initial={{ scale: 0 }}
+                          animate={{ scale: 1 }}
+                          transition={{ type: "spring", stiffness: 500, damping: 15 }}
+                          data-testid={`template-card-${template.id}-selected-indicator`}
+                        >
+                          <div className="w-8 h-8 rounded-full bg-blue-600 flex items-center justify-center">
+                            <Check className="w-5 h-5 text-white" />
+                          </div>
+                        </motion.div>
+                      )}
+                    </div>
+                    <div className="text-left">
+                      <div className="flex items-start justify-between gap-2 mb-2">
+                        <CardTitle className="text-xl" data-testid={`template-card-${template.id}-name`}>
+                          {template.name}
+                        </CardTitle>
+                        {isComingSoon && (
+                          <Badge
+                            variant="outline"
+                            className="text-xs bg-yellow-100 text-yellow-700 border-yellow-300 font-semibold"
+                            data-testid={`template-card-${template.id}-coming-soon-badge`}
+                          >
+                            Coming Soon
+                          </Badge>
+                        )}
+                      </div>
+                      <div className="flex items-center gap-2">
+                        <Badge variant="secondary" className="text-xs" data-testid={`template-card-${template.id}-category`}>
+                          {template.category}
+                        </Badge>
+                        {getPriorityIcon(template.priority)}
+                      </div>
+                    </div>
+                  </CardHeader>
+                  <CardContent className="pt-0 space-y-4">
+                    <p
+                      className="text-sm text-gray-600 leading-relaxed line-clamp-2"
+                      data-testid={`template-card-${template.id}-description`}
+                    >
+                      {template.description}
+                    </p>
+
+                    {!isCategoryCard && (
+                      <>
+                        <Separator />
+                        <div className="grid grid-cols-2 gap-3 text-xs text-gray-500">
+                          <div className="flex items-center gap-1.5" data-testid={`template-card-${template.id}-estimated-time`}>
+                            <Clock className="w-3.5 h-3.5" />
+                            <span>{template.estimatedTime}</span>
+                          </div>
+                          <div className="flex items-center gap-1.5" data-testid={`template-card-${template.id}-approvers-count`}>
+                            <Users className="w-3.5 h-3.5" />
+                            <span>{template.commonApprovers?.length || 0} approvers</span>
+                          </div>
+                        </div>
+                      </>
+                    )}
+                    {isCategoryCard && (
+                      <div className="pt-2">
+                        <p className="text-xs text-blue-600 font-medium flex items-center gap-1">
+                          Click to browse templates &rarr;
+                        </p>
+                      </div>
+                    )}
+                  </CardContent>
+                </Card>
+              </motion.div>
+            );
+          })
+        )}
+      </div>
+
+      {/* Template Details Card */}
+      <AnimatePresence>
+        {selectedTemplate && (
+          <motion.div
+            initial={{ opacity: 0, y: 20, height: 0 }}
+            animate={{ opacity: 1, y: 0, height: 'auto' }}
+            exit={{ opacity: 0, y: -20, height: 0 }}
+            transition={{ duration: 0.3 }}
+            className="w-full max-w-6xl"
+            data-testid="template-details-card"
+          >
+            <Card className="bg-gradient-to-br from-blue-50 to-indigo-50 border-2 border-blue-200">
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2 text-blue-900" data-testid="template-details-title">
+                  <Info className="w-5 h-5" />
+                  {selectedTemplate.name} - Template Details
+                </CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                  <div className="bg-white/60 p-3 rounded-lg" data-testid="template-details-sla">
+                    <Label className="text-blue-900 font-semibold">Suggested SLA</Label>
+                    <p className="text-blue-700 mt-1">{selectedTemplate.suggestedSLA} hours</p>
                   </div>
-                  <div className="flex items-center gap-1.5" data-testid={`template-card-${template.id}-approvers-count`}>
-                    <Users className="w-3.5 h-3.5" />
-                    <span>{template.commonApprovers.length} approvers</span>
+                  <div className="bg-white/60 p-3 rounded-lg" data-testid="template-details-priority">
+                    <Label className="text-blue-900 font-semibold">Priority Level</Label>
+                    <div className="flex items-center gap-1 mt-1">
+                      {getPriorityIcon(selectedTemplate.priority)}
+                      <span className="text-blue-700 capitalize">{selectedTemplate.priority}</span>
+                    </div>
+                  </div>
+                  <div className="bg-white/60 p-3 rounded-lg" data-testid="template-details-duration">
+                    <Label className="text-blue-900 font-semibold">Estimated Duration</Label>
+                    <p className="text-blue-700 mt-1">{selectedTemplate.estimatedTime}</p>
+                  </div>
+                </div>
+                <div className="bg-white/60 p-3 rounded-lg" data-testid="template-details-approvers">
+                  <Label className="text-blue-900 font-semibold">Approvers</Label>
+                  <div className="flex flex-wrap gap-2 mt-2">
+                    {selectedTemplate.commonApprovers?.length > 0 ? (
+                      selectedTemplate.commonApprovers.map((approver, index) => (
+                        <Badge
+                          key={`${selectedTemplate.id}-approver-${index}-${approver}`}
+                          variant="outline"
+                          className="border-blue-300 text-blue-700 bg-white"
+                          data-testid={`template-details-approver-${index}`}
+                        >
+                          {approver}
+                        </Badge>
+                      ))
+                    ) : (
+                      <span className="text-sm text-gray-500 italic">No specific approvers defined</span>
+                    )}
                   </div>
                 </div>
               </CardContent>
             </Card>
           </motion.div>
-        ))}
-      </div>
+        )}
+      </AnimatePresence>
     </motion.div>
   );
 }

src/components/workflow/CreateRequest/WizardStepper.tsx

@@ -19,17 +19,20 @@ interface WizardStepperProps {
 export function WizardStepper({ currentStep, totalSteps, stepNames }: WizardStepperProps) {
   const progressPercentage = Math.round((currentStep / totalSteps) * 100);
 
+  // Use a narrower container for fewer steps to avoid excessive spacing
+  const containerMaxWidth = stepNames.length <= 3 ? 'max-w-xl' : 'max-w-6xl';
+
   return (
-    <div 
+    <div
       className="bg-white border-b border-gray-200 px-3 sm:px-6 py-2 sm:py-3 flex-shrink-0"
       data-testid="wizard-stepper"
     >
-      <div className="max-w-6xl mx-auto">
+      <div className={`${containerMaxWidth} mx-auto`}>
         {/* Mobile: Current step indicator only */}
         <div className="block sm:hidden" data-testid="wizard-stepper-mobile">
           <div className="flex items-center justify-between mb-2">
             <div className="flex items-center gap-2">
-              <div 
+              <div
                 className="w-8 h-8 rounded-full bg-green-600 text-white flex items-center justify-center text-xs font-semibold"
                 data-testid="wizard-stepper-mobile-current-step"
               >
@@ -51,11 +54,11 @@ export function WizardStepper({ currentStep, totalSteps, stepNames }: WizardStep
             </div>
           </div>
           {/* Progress bar */}
-          <div 
+          <div
             className="w-full bg-gray-200 h-1.5 rounded-full overflow-hidden"
             data-testid="wizard-stepper-mobile-progress-bar"
           >
-            <div 
+            <div
               className="bg-green-600 h-full transition-all duration-300"
               style={{ width: `${progressPercentage}%` }}
               data-testid="wizard-stepper-mobile-progress-fill"
@@ -65,17 +68,16 @@ export function WizardStepper({ currentStep, totalSteps, stepNames }: WizardStep
 
         {/* Desktop: Full step indicator */}
         <div className="hidden sm:block" data-testid="wizard-stepper-desktop">
-          <div className="flex items-center justify-between mb-2" data-testid="wizard-stepper-desktop-steps">
+          <div className="flex items-center justify-center gap-4 mb-2" data-testid="wizard-stepper-desktop-steps">
             {stepNames.map((_, index) => (
-              <div key={index} className="flex items-center" data-testid={`wizard-stepper-desktop-step-${index + 1}`}>
-                <div 
-                  className={`w-8 h-8 rounded-full flex items-center justify-center text-xs font-semibold ${
-                    index + 1 < currentStep 
-                      ? 'bg-green-600 text-white' 
-                      : index + 1 === currentStep 
-                      ? 'bg-blue-600 text-white' 
+              <div key={index} className="flex items-center flex-1 last:flex-none" data-testid={`wizard-stepper-desktop-step-${index + 1}`}>
+                <div
+                  className={`w-8 h-8 rounded-full flex items-center justify-center text-xs font-semibold flex-shrink-0 ${index + 1 < currentStep
+                    ? 'bg-green-500 text-white'
+                    : index + 1 === currentStep
+                      ? 'bg-green-500 text-white ring-2 ring-green-500/30 ring-offset-1'
                       : 'bg-gray-200 text-gray-600'
-                  }`}
+                    }`}
                   data-testid={`wizard-stepper-desktop-step-${index + 1}-indicator`}
                 >
                   {index + 1 < currentStep ? (
@@ -85,26 +87,24 @@ export function WizardStepper({ currentStep, totalSteps, stepNames }: WizardStep
                   )}
                 </div>
                 {index < stepNames.length - 1 && (
-                  <div 
-                    className={`w-8 md:w-12 lg:w-16 h-1 mx-1 md:mx-2 ${
-                      index + 1 < currentStep ? 'bg-green-600' : 'bg-gray-200'
-                    }`}
+                  <div
+                    className={`flex-1 h-0.5 mx-2 ${index + 1 < currentStep ? 'bg-green-500' : 'bg-gray-200'
+                      }`}
                     data-testid={`wizard-stepper-desktop-step-${index + 1}-connector`}
                   />
                 )}
               </div>
             ))}
           </div>
-          <div 
-            className="hidden lg:flex justify-between text-xs text-gray-600 mt-2"
+          <div
+            className="hidden lg:flex justify-between text-xs text-gray-600 mt-2 px-1"
             data-testid="wizard-stepper-desktop-labels"
           >
             {stepNames.map((step, index) => (
-              <span 
-                key={index} 
-                className={`${
-                  index + 1 === currentStep ? 'font-semibold text-blue-600' : ''
-                }`}
+              <span
+                key={index}
+                className={`${index + 1 === currentStep ? 'font-semibold text-green-600' : ''
+                  }`}
                 data-testid={`wizard-stepper-desktop-label-${index + 1}`}
               >
                 {step}

src/custom/components/ClosedRequestsFilters.tsx

@@ -31,14 +31,14 @@ export function StandardClosedRequestsFilters({
   searchTerm,
   priorityFilter,
   statusFilter,
-  templateTypeFilter,
+  // templateTypeFilter,
   sortBy,
   sortOrder,
   activeFiltersCount,
   onSearchChange,
   onPriorityChange,
   onStatusChange,
-  onTemplateTypeChange,
+  // onTemplateTypeChange,
   onSortByChange,
   onSortOrderChange,
   onClearFilters,
@@ -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"

src/custom/components/RequestsFilters.tsx

@@ -31,13 +31,13 @@ export function StandardRequestsFilters({
   searchTerm,
   statusFilter,
   priorityFilter,
-  templateTypeFilter,
+  // templateTypeFilter,
   sortBy,
   sortOrder,
   onSearchChange,
   onStatusFilterChange,
   onPriorityFilterChange,
-  onTemplateTypeFilterChange,
+  // onTemplateTypeFilterChange,
   onSortByChange,
   onSortOrderChange,
   onClearFilters,
@@ -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"

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;
 }
@@ -87,7 +87,7 @@ export function StandardUserAllRequestsFilters({
   searchTerm,
   statusFilter,
   priorityFilter,
-  templateTypeFilter,
+  // templateTypeFilter,
   departmentFilter,
   slaComplianceFilter,
   initiatorFilter: _initiatorFilter,
@@ -104,7 +104,7 @@ export function StandardUserAllRequestsFilters({
   onSearchChange,
   onStatusChange,
   onPriorityChange,
-  onTemplateTypeChange,
+  // onTemplateTypeChange,
   onDepartmentChange,
   onSlaComplianceChange,
   onInitiatorChange: _onInitiatorChange,
@@ -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}

src/hooks/useCreateRequestForm.ts

@@ -10,6 +10,7 @@ export interface RequestTemplate {
   icon: React.ComponentType<any>;
   estimatedTime: string;
   commonApprovers: string[];
+  workflowApprovers?: any[]; // Full approver objects for Admin Templates
   suggestedSLA: number;
   priority: 'high' | 'medium' | 'low';
   fields: {
@@ -199,7 +200,7 @@ export function useCreateRequestForm(
         const approvals = Array.isArray(details.approvals) ? details.approvals : [];
         const participants = Array.isArray(details.participants) ? details.participants : [];
         const documents = Array.isArray(details.documents) ? details.documents.filter((d: any) => !d.isDeleted) : [];
-        
+
         // Store existing documents for tracking
         setExistingDocuments(documents);
 

src/pages/Admin/Templates/AdminTemplatesList.tsx

@@ -0,0 +1,228 @@
+import { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Plus, Pencil, Trash2, Search, FileText, AlertTriangle } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Skeleton } from '@/components/ui/skeleton';
+import {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import { getTemplates, deleteTemplate, WorkflowTemplate, getCachedTemplates } from '@/services/workflowTemplateApi';
+import { toast } from 'sonner';
+
+export function AdminTemplatesList() {
+    const navigate = useNavigate();
+    const [templates, setTemplates] = useState<WorkflowTemplate[]>(() => getCachedTemplates() || []);
+    // Only show full loading skeleton if we don't have any data yet
+    const [loading, setLoading] = useState(() => !getCachedTemplates());
+    const [searchQuery, setSearchQuery] = useState('');
+    const [deleteId, setDeleteId] = useState<string | null>(null);
+    const [deleting, setDeleting] = useState(false);
+
+    const fetchTemplates = async () => {
+        try {
+            // If we didn't have cache, we are already loading.
+            // If we HAD cache, we don't want to set loading=true (flashing skeletons),
+            // we just want to update the data in background.
+            if (templates.length === 0) setLoading(true);
+
+            const data = await getTemplates();
+            setTemplates(data || []);
+        } catch (error) {
+            console.error('Failed to fetch templates:', error);
+            toast.error('Failed to load templates');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    useEffect(() => {
+        fetchTemplates();
+    }, []);
+
+    const handleDelete = async () => {
+        if (!deleteId) return;
+
+        try {
+            setDeleting(true);
+            await deleteTemplate(deleteId);
+            toast.success('Template deleted successfully');
+            setTemplates(prev => prev.filter(t => t.id !== deleteId));
+        } catch (error) {
+            console.error('Failed to delete template:', error);
+            toast.error('Failed to delete template');
+        } finally {
+            setDeleting(false);
+            setDeleteId(null);
+        }
+    };
+
+    const filteredTemplates = templates.filter(template =>
+        template.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        template.category.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+
+    const getPriorityColor = (priority: string) => {
+        switch (priority.toLowerCase()) {
+            case 'high': return 'bg-red-100 text-red-700 border-red-200';
+            case 'medium': return 'bg-orange-100 text-orange-700 border-orange-200';
+            case 'low': return 'bg-green-100 text-green-700 border-green-200';
+            default: return 'bg-gray-100 text-gray-700 border-gray-200';
+        }
+    };
+
+    return (
+        <div className="max-w-7xl mx-auto space-y-6">
+            <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+                <div>
+                    <h1 className="text-3xl font-bold text-gray-900">Admin Templates</h1>
+                    <p className="text-gray-500">Manage workflow templates for your organization</p>
+                </div>
+                <Button
+                    onClick={() => navigate('/admin/create-template')}
+                    className="bg-re-green hover:bg-re-green/90"
+                >
+                    <Plus className="w-4 h-4 mr-2" />
+                    Create New Template
+                </Button>
+            </div>
+
+            <div className="flex items-center gap-4 bg-white p-4 rounded-lg border border-gray-200 shadow-sm">
+                <div className="relative flex-1 max-w-md">
+                    <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
+                    <Input
+                        placeholder="Search templates..."
+                        className="pl-10 border-gray-200"
+                        value={searchQuery}
+                        onChange={(e) => setSearchQuery(e.target.value)}
+                    />
+                </div>
+            </div>
+
+            {loading ? (
+                <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+                    {[1, 2, 3].map(i => (
+                        <Card key={i} className="h-48">
+                            <CardHeader>
+                                <Skeleton className="h-6 w-3/4 mb-2" />
+                                <Skeleton className="h-4 w-1/2" />
+                            </CardHeader>
+                            <CardContent>
+                                <Skeleton className="h-4 w-full mb-2" />
+                                <Skeleton className="h-4 w-2/3" />
+                            </CardContent>
+                        </Card>
+                    ))}
+                </div>
+            ) : filteredTemplates.length === 0 ? (
+                <div className="text-center py-16 bg-white rounded-lg border border-dashed border-gray-300">
+                    <div className="w-16 h-16 bg-gray-50 rounded-full flex items-center justify-center mx-auto mb-4">
+                        <FileText className="w-8 h-8 text-gray-400" />
+                    </div>
+                    <h3 className="text-lg font-medium text-gray-900 mb-2">No templates found</h3>
+                    <p className="text-gray-500 max-w-sm mx-auto mb-6">
+                        {searchQuery ? 'Try adjusting your search terms' : 'Get started by creating your first workflow template'}
+                    </p>
+                    {!searchQuery && (
+                        <Button onClick={() => navigate('/admin/create-template')} variant="outline">
+                            Create Template
+                        </Button>
+                    )}
+                </div>
+            ) : (
+                <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+                    {filteredTemplates.map((template) => (
+                        <Card key={template.id} className="hover:shadow-md transition-shadow duration-200 group">
+                            <CardHeader className="pb-3">
+                                <div className="flex justify-between items-start gap-2">
+                                    <div className="p-2 bg-blue-50 rounded-lg text-blue-600 mb-2 w-fit">
+                                        <FileText className="w-5 h-5" />
+                                    </div>
+                                    <Badge variant="outline" className={getPriorityColor(template.priority)}>
+                                        {template.priority}
+                                    </Badge>
+                                </div>
+                                <CardTitle className="line-clamp-1 text-lg">{template.name}</CardTitle>
+                                <CardDescription className="line-clamp-2 h-10">
+                                    {template.description}
+                                </CardDescription>
+                            </CardHeader>
+                            <CardContent>
+                                <div className="text-sm text-gray-500 mb-4 space-y-1">
+                                    <div className="flex justify-between">
+                                        <span>Category:</span>
+                                        <span className="font-medium text-gray-900">{template.category}</span>
+                                    </div>
+                                    <div className="flex justify-between">
+                                        <span>SLA:</span>
+                                        <span className="font-medium text-gray-900">{template.suggestedSLA} hours</span>
+                                    </div>
+                                    <div className="flex justify-between">
+                                        <span>Approvers:</span>
+                                        <span className="font-medium text-gray-900">{template.approvers?.length || 0} levels</span>
+                                    </div>
+                                </div>
+
+                                <div className="flex gap-2 pt-2 border-t mt-2">
+                                    <Button
+                                        variant="outline"
+                                        className="flex-1 text-blue-600 hover:text-blue-700 hover:bg-blue-50 border-blue-100"
+                                        onClick={() => navigate(`/admin/edit-template/${template.id}`)}
+                                    >
+                                        <Pencil className="w-4 h-4 mr-2" />
+                                        Edit
+                                    </Button>
+                                    <Button
+                                        variant="outline"
+                                        className="flex-1 text-red-600 hover:text-red-700 hover:bg-red-50 border-red-100"
+                                        onClick={() => setDeleteId(template.id)}
+                                    >
+                                        <Trash2 className="w-4 h-4 mr-2" />
+                                        Delete
+                                    </Button>
+                                </div>
+                            </CardContent>
+                        </Card>
+                    ))}
+                </div>
+            )}
+
+            <AlertDialog open={!!deleteId} onOpenChange={(open) => !open && setDeleteId(null)}>
+                <AlertDialogContent>
+                    <AlertDialogHeader>
+                        <AlertDialogTitle className="flex items-center gap-2">
+                            <AlertTriangle className="w-5 h-5 text-red-600" />
+                            Delete Template
+                        </AlertDialogTitle>
+                        <AlertDialogDescription>
+                            Are you sure you want to delete this template? This action cannot be undone.
+                            Active requests using this template will not be affected.
+                        </AlertDialogDescription>
+                    </AlertDialogHeader>
+                    <AlertDialogFooter>
+                        <AlertDialogCancel disabled={deleting}>Cancel</AlertDialogCancel>
+                        <AlertDialogAction
+                            onClick={(e) => {
+                                e.preventDefault();
+                                handleDelete();
+                            }}
+                            className="bg-red-600 hover:bg-red-700"
+                            disabled={deleting}
+                        >
+                            {deleting ? 'Deleting...' : 'Delete'}
+                        </AlertDialogAction>
+                    </AlertDialogFooter>
+                </AlertDialogContent>
+            </AlertDialog>
+        </div>
+    );
+}

src/pages/Admin/Templates/CreateTemplate.tsx

@@ -0,0 +1,503 @@
+import { useState, useEffect } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Badge } from '@/components/ui/badge';
+import { Avatar, AvatarFallback } from '@/components/ui/avatar';
+import { X, Save, ArrowLeft, Loader2, Clock } from 'lucide-react';
+import { useUserSearch } from '@/hooks/useUserSearch';
+import { createTemplate, updateTemplate, getTemplates, WorkflowTemplate } from '@/services/workflowTemplateApi';
+import { toast } from 'sonner';
+
+export function CreateTemplate() {
+    const navigate = useNavigate();
+    const { templateId } = useParams<{ templateId: string }>();
+    const isEditing = !!templateId;
+
+    const [loading, setLoading] = useState(false);
+    const [fetching, setFetching] = useState(false);
+    const { searchResults, searchLoading, searchUsersDebounced, clearSearch } = useUserSearch();
+    const [approverSearchInput, setApproverSearchInput] = useState('');
+
+    const [formData, setFormData] = useState({
+        name: '',
+        description: '',
+        category: 'General',
+        priority: 'medium' as 'low' | 'medium' | 'high',
+        estimatedTime: '2 days',
+        suggestedSLA: 24,
+        approvers: [] as any[]
+    });
+
+    useEffect(() => {
+        if (isEditing && templateId) {
+            const fetchTemplate = async () => {
+                try {
+                    setFetching(true);
+                    const templates = await getTemplates();
+                    const template = templates.find((t: WorkflowTemplate) => t.id === templateId);
+
+                    if (template) {
+                        setFormData({
+                            name: template.name,
+                            description: template.description,
+                            category: template.category,
+                            priority: template.priority,
+                            estimatedTime: template.estimatedTime,
+                            suggestedSLA: template.suggestedSLA,
+                            approvers: template.approvers || []
+                        });
+                    } else {
+                        toast.error('Template not found');
+                        navigate('/admin/templates');
+                    }
+                } catch (error) {
+                    console.error('Failed to load template:', error);
+                    toast.error('Failed to load template details');
+                } finally {
+                    setFetching(false);
+                }
+            };
+            fetchTemplate();
+        }
+    }, [isEditing, templateId, navigate]);
+
+    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+        const { name, value } = e.target;
+        setFormData(prev => ({ ...prev, [name]: value }));
+    };
+
+    const handleSelectChange = (name: string, value: string) => {
+        setFormData(prev => ({ ...prev, [name]: value }));
+    };
+
+    const handleApproverSearch = (val: string) => {
+        setApproverSearchInput(val);
+        // Only trigger search if specifically starting with '@'
+        // This prevents triggering on email addresses like "user@example.com"
+        if (val.startsWith('@')) {
+            const query = val.slice(1);
+            // Search if we have at least 1 character after @
+            // This allows searching for "L" in "@L"
+            if (query.length >= 1) {
+                // Pass the full query starting with @, as useUserSearch expects it
+                searchUsersDebounced(val, 5);
+                return;
+            }
+        }
+        // If no @ at start or query too short, clear results
+        clearSearch();
+    };
+
+    // ... (rest of the component)
+
+    // In the return JSX:
+    <div className="flex gap-2">
+        <Input
+            placeholder="Type '@' to search user by name or email..."
+            value={approverSearchInput}
+            onChange={(e) => handleApproverSearch(e.target.value)}
+            className="border-gray-200"
+        />
+    </div>
+
+    const addApprover = (user: any) => {
+        if (formData.approvers.some(a => a.userId === user.userId)) {
+            toast.error('Approver already added');
+            return;
+        }
+        setFormData(prev => ({
+            ...prev,
+            approvers: [...prev.approvers, {
+                userId: user.userId,
+                name: user.displayName || user.email,
+                email: user.email,
+                level: prev.approvers.length + 1,
+                tat: 24, // Default TAT in hours
+                tatType: 'hours' // Default unit
+            }]
+        }));
+        setApproverSearchInput('');
+        clearSearch();
+    };
+
+    const removeApprover = (index: number) => {
+        const newApprovers = [...formData.approvers];
+        newApprovers.splice(index, 1);
+        // Re-index levels
+        newApprovers.forEach((a, i) => a.level = i + 1);
+        setFormData(prev => ({ ...prev, approvers: newApprovers }));
+    };
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        if (!formData.name || !formData.description) {
+            toast.error('Please fill in required fields');
+            return;
+        }
+
+        if (formData.approvers.length === 0) {
+            toast.error('Please add at least one approver');
+            return;
+        }
+
+        // Prepare payload with TAT conversion
+        const payload = {
+            ...formData,
+            approvers: formData.approvers.map(a => ({
+                ...a,
+                tat: a.tatType === 'days' ? (parseInt(a.tat) * 24) : parseInt(a.tat)
+            }))
+        };
+
+        try {
+            setLoading(true);
+            if (isEditing && templateId) {
+                await updateTemplate(templateId, payload);
+                toast.success('Template updated successfully');
+            } else {
+                await createTemplate(payload);
+                toast.success('Template created successfully');
+            }
+            navigate('/admin/templates'); // Back to list
+        } catch (error) {
+            toast.error(isEditing ? 'Failed to update template' : 'Failed to create template');
+            console.error(error);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    if (fetching) {
+        return (
+            <div className="flex h-96 items-center justify-center">
+                <Loader2 className="h-8 w-8 animate-spin text-gray-400" />
+            </div>
+        );
+    }
+
+    const isFormValid = formData.name &&
+        formData.description &&
+        formData.approvers.length > 0 &&
+        formData.approvers.every((a: any) => {
+            const val = parseInt(String(a.tat)) || 0;
+            const max = a.tatType === 'days' ? 7 : 24;
+            return val >= 1 && val <= max;
+        });
+
+    return (
+        <div className="max-w-4xl mx-auto p-6 space-y-6">
+            <div className="flex items-center gap-4 mb-6">
+                <Button variant="ghost" size="icon" onClick={() => navigate('/admin/templates')}>
+                    <ArrowLeft className="w-5 h-5" />
+                </Button>
+                <div>
+                    <h1 className="text-3xl font-bold text-gray-900">
+                        {isEditing ? 'Edit Workflow Template' : 'Create Workflow Template'}
+                    </h1>
+                    <p className="text-gray-500">
+                        {isEditing ? 'Update existing workflow configuration' : 'Define a new standardized request workflow'}
+                    </p>
+                </div>
+            </div>
+
+            <form onSubmit={handleSubmit} className="space-y-6">
+                <Card>
+                    <CardHeader>
+                        <CardTitle>Basic Information</CardTitle>
+                        <CardDescription>General details about the template</CardDescription>
+                    </CardHeader>
+                    <CardContent className="space-y-4">
+                        <div className="grid grid-cols-2 gap-4">
+                            <div className="space-y-2">
+                                <Label htmlFor="name">Template Name *</Label>
+                                <Input
+                                    id="name"
+                                    name="name"
+                                    placeholder="e.g., Office Stationery Request"
+                                    value={formData.name}
+                                    onChange={handleInputChange}
+                                    className="border-gray-200"
+                                    required
+                                />
+                            </div>
+                            <div className="space-y-2">
+                                <Label htmlFor="category">Category</Label>
+                                <div className="relative">
+                                    {/* Simple text input for now, could be select */}
+                                    <Input
+                                        id="category"
+                                        name="category"
+                                        placeholder="e.g., Admin, HR, Finance"
+                                        value={formData.category}
+                                        onChange={handleInputChange}
+                                        className="border-gray-200"
+                                    />
+                                </div>
+                            </div>
+                        </div>
+
+                        <div className="space-y-2">
+                            <Label htmlFor="description">Description *</Label>
+                            <Textarea
+                                id="description"
+                                name="description"
+                                placeholder="Describe what this request is for..."
+                                value={formData.description}
+                                onChange={handleInputChange}
+                                className="border-gray-200"
+                                required
+                            />
+                        </div>
+
+                        <div className="grid grid-cols-3 gap-4">
+                            <div className="space-y-2">
+                                <Label htmlFor="priority">Default Priority</Label>
+                                <Select
+                                    name="priority"
+                                    value={formData.priority}
+                                    onValueChange={(val) => handleSelectChange('priority', val)}
+                                >
+                                    <SelectTrigger>
+                                        <SelectValue placeholder="Select priority" />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                        <SelectItem value="low">Low</SelectItem>
+                                        <SelectItem value="medium">Medium</SelectItem>
+                                        <SelectItem value="high">High</SelectItem>
+                                    </SelectContent>
+                                </Select>
+                            </div>
+                            <div className="space-y-2">
+                                <Label htmlFor="estimatedTime">Estimated Time</Label>
+                                <Input
+                                    id="estimatedTime"
+                                    name="estimatedTime"
+                                    placeholder="e.g., 2 days"
+                                    value={formData.estimatedTime}
+                                    onChange={handleInputChange}
+                                    className="border-gray-200"
+                                />
+                            </div>
+                            <div className="space-y-2">
+                                <Label htmlFor="suggestedSLA">SLA (Hours)</Label>
+                                <Input
+                                    id="suggestedSLA"
+                                    name="suggestedSLA"
+                                    type="number"
+                                    placeholder="24"
+                                    value={formData.suggestedSLA}
+                                    onChange={handleInputChange}
+                                    className="border-gray-200"
+                                />
+                            </div>
+                        </div>
+                    </CardContent>
+                </Card>
+
+                <Card>
+                    <CardHeader>
+                        <CardTitle>Approver Workflow</CardTitle>
+                        <CardDescription>Define static approvers for this template</CardDescription>
+                    </CardHeader>
+                    <CardContent className="space-y-6">
+                        <div className="space-y-4">
+                            {formData.approvers.map((approver, index) => (
+                                <div key={index} className="flex items-center gap-4 p-3 bg-gray-50 rounded-lg border border-gray-100">
+                                    <Badge variant="outline" className="bg-white">Level {approver.level}</Badge>
+                                    <div className="flex-1">
+                                        <div className="font-medium text-gray-900">{approver.name}</div>
+                                        <div className="text-sm text-gray-500">{approver.email}</div>
+                                    </div>
+                                    <div className="flex items-center gap-2">
+                                        <div className="flex flex-col gap-1">
+                                            <Label htmlFor={`tat-${index}`} className="text-xs whitespace-nowrap">TAT</Label>
+                                            <div className="flex items-center gap-1">
+                                                <Input
+                                                    id={`tat-${index}`}
+                                                    type="number"
+                                                    className="h-8 w-16 border-gray-200"
+                                                    value={approver.tat || ''}
+                                                    min={1}
+                                                    max={approver.tatType === 'days' ? 7 : 24}
+                                                    placeholder={approver.tatType === 'days' ? '1' : '24'}
+                                                    onChange={(e) => {
+                                                        const val = parseInt(e.target.value) || 0;
+                                                        // const max = approver.tatType === 'days' ? 7 : 24;
+                                                        // Optional: strict clamping or just allow typing and validate later
+                                                        // For better UX, let's allow typing but validate in isFormValid
+                                                        // But prevent entering negative numbers
+                                                        if (val < 0) return;
+
+                                                        const newApprovers = [...formData.approvers];
+                                                        newApprovers[index].tat = e.target.value; // Store as string to allow clearing
+                                                        setFormData(prev => ({ ...prev, approvers: newApprovers }));
+                                                    }}
+                                                />
+                                                <Select
+                                                    value={approver.tatType || 'hours'}
+                                                    onValueChange={(val) => {
+                                                        const newApprovers = [...formData.approvers];
+                                                        newApprovers[index].tatType = val;
+                                                        newApprovers[index].tat = 1; // Reset to 1 on change
+                                                        setFormData(prev => ({ ...prev, approvers: newApprovers }));
+                                                    }}
+                                                >
+                                                    <SelectTrigger className="h-8 w-20 text-xs px-2">
+                                                        <SelectValue />
+                                                    </SelectTrigger>
+                                                    <SelectContent>
+                                                        <SelectItem value="hours">Hours</SelectItem>
+                                                        <SelectItem value="days">Days</SelectItem>
+                                                    </SelectContent>
+                                                </Select>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <Button type="button" variant="ghost" size="sm" onClick={() => removeApprover(index)}>
+                                        <X className="w-4 h-4 text-gray-500 hover:text-red-600" />
+                                    </Button>
+                                </div>
+                            ))}
+
+                            {formData.approvers.length === 0 && (
+                                <div className="text-center p-8 border-2 border-dashed rounded-lg text-gray-500 text-sm">
+                                    No approvers defined. Requests will be auto-approved or require manual assignment.
+                                </div>
+                            )}
+                        </div>
+
+                        <div className="space-y-2 relative">
+                            <Label>Add Approver</Label>
+                            <div className="flex gap-2">
+                                <Input
+                                    placeholder="Type '@' to search user by name or email..."
+                                    value={approverSearchInput}
+                                    onChange={(e) => handleApproverSearch(e.target.value)}
+                                    className="border-gray-200"
+                                />
+                            </div>
+
+                            {(searchLoading || searchResults.length > 0) && (
+                                <div className="absolute top-full left-0 right-0 mt-1 bg-white border rounded-lg shadow-lg z-10 max-h-60 overflow-y-auto">
+                                    {searchLoading && <div className="p-2 text-sm text-gray-500">Searching...</div>}
+                                    {searchResults.map(user => (
+                                        <div
+                                            key={user.userId}
+                                            className="p-2 hover:bg-gray-50 cursor-pointer flex items-center gap-3"
+                                            onClick={() => addApprover(user)}
+                                        >
+                                            <Avatar className="h-8 w-8">
+                                                <AvatarFallback>{(user.displayName || 'U').substring(0, 2)}</AvatarFallback>
+                                            </Avatar>
+                                            <div>
+                                                <div className="text-sm font-medium">{user.displayName}</div>
+                                                <div className="text-xs text-gray-500">{user.email}</div>
+                                            </div>
+                                        </div>
+                                    ))}
+                                </div>
+                            )}
+                        </div>
+
+                        {/* TAT Summary */}
+                        {formData.approvers.length > 0 && (
+                            <div className="mt-6 p-4 bg-gradient-to-r from-emerald-50 to-teal-50 rounded-lg border border-emerald-200">
+                                <div className="flex items-start gap-3">
+                                    <Clock className="w-5 h-5 text-emerald-600 mt-0.5" />
+                                    <div className="flex-1">
+                                        <div className="flex items-center justify-between mb-2">
+                                            <h4 className="font-semibold text-emerald-900">TAT Summary</h4>
+                                            <div className="text-right">
+                                                {(() => {
+                                                    const totalCalendarDays = formData.approvers.reduce((sum: number, a: any) => {
+                                                        const tat = Number(a.tat || 0);
+                                                        const tatType = a.tatType || 'hours';
+                                                        if (tatType === 'days') {
+                                                            return sum + tat;
+                                                        } else {
+                                                            return sum + (tat / 24);
+                                                        }
+                                                    }, 0) || 0;
+                                                    const displayDays = Math.ceil(totalCalendarDays);
+                                                    return (
+                                                        <>
+                                                            <div className="text-lg font-bold text-emerald-800">{displayDays} {displayDays === 1 ? 'Day' : 'Days'}</div>
+                                                            <div className="text-xs text-emerald-600">Total Duration</div>
+                                                        </>
+                                                    );
+                                                })()}
+                                            </div>
+                                        </div>
+                                        <div className="space-y-3">
+                                            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                                                {formData.approvers.map((approver: any, idx: number) => {
+                                                    const tat = Number(approver.tat || 0);
+                                                    const tatType = approver.tatType || 'hours';
+                                                    const hours = tatType === 'days' ? tat * 24 : tat;
+                                                    if (!tat) return null;
+                                                    return (
+                                                        <div key={idx} className="bg-white/60 p-2 rounded border border-emerald-100">
+                                                            <div className="flex items-center justify-between">
+                                                                <span className="text-sm font-medium text-emerald-900">Level {idx + 1}</span>
+                                                                <span className="text-sm text-emerald-700">{hours} {hours === 1 ? 'hour' : 'hours'}</span>
+                                                            </div>
+                                                        </div>
+                                                    );
+                                                })}
+                                            </div>
+                                            {(() => {
+                                                const totalHours = formData.approvers.reduce((sum: number, a: any) => {
+                                                    const tat = Number(a.tat || 0);
+                                                    const tatType = a.tatType || 'hours';
+                                                    if (tatType === 'days') {
+                                                        return sum + (tat * 24);
+                                                    } else {
+                                                        return sum + tat;
+                                                    }
+                                                }, 0) || 0;
+                                                const workingDays = Math.ceil(totalHours / 8);
+                                                if (totalHours === 0) return null;
+                                                return (
+                                                    <div className="bg-white/80 p-3 rounded border border-emerald-200">
+                                                        <div className="grid grid-cols-2 gap-4 text-center">
+                                                            <div>
+                                                                <div className="text-lg font-bold text-emerald-800">{totalHours}h</div>
+                                                                <div className="text-xs text-emerald-600">Total Hours</div>
+                                                            </div>
+                                                            <div>
+                                                                <div className="text-lg font-bold text-emerald-800">{workingDays}</div>
+                                                                <div className="text-xs text-emerald-600">Working Days*</div>
+                                                            </div>
+                                                        </div>
+                                                        <p className="text-xs text-emerald-600 mt-2 text-center">*Based on 8-hour working days</p>
+                                                    </div>
+                                                );
+                                            })()}
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        )}
+                    </CardContent>
+                </Card>
+
+                <div className="flex justify-end gap-3 pt-4">
+                    <Button type="button" variant="outline" onClick={() => navigate('/admin/templates')}>Cancel</Button>
+                    <Button type="submit" disabled={loading || !isFormValid} className="bg-re-green hover:bg-re-green/90">
+                        {loading ? 'Saving...' : (
+                            <>
+                                <Save className="w-4 h-4 mr-2" />
+                                {isEditing ? 'Update Template' : 'Create Template'}
+                            </>
+                        )}
+                    </Button>
+                </div>
+            </form>
+        </div>
+    );
+}

src/pages/Auth/Auth.tsx

@@ -2,13 +2,13 @@ import { useState, useEffect } from 'react';
 import { useAuth } from '@/contexts/AuthContext';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader } from '@/components/ui/card';
-import { LogIn, Shield } from 'lucide-react';
+import { LogIn } from 'lucide-react';
 import { ReLogo, LandingPageImage } from '@/assets';
-import { initiateTanflowLogin } from '@/services/tanflowAuth';
+// import { initiateTanflowLogin } from '@/services/tanflowAuth';
 
 export function Auth() {
   const { login, isLoading, error } = useAuth();
-  const [tanflowLoading, setTanflowLoading] = useState(false);
+  const [tanflowLoading] = useState(false);
   const [imageLoaded, setImageLoaded] = useState(false);
 
   // Preload the background image
@@ -28,7 +28,7 @@ export function Auth() {
     // Clear any existing session data
     localStorage.clear();
     sessionStorage.clear();
-    
+
     try {
       await login();
     } catch (loginError) {
@@ -41,11 +41,11 @@ export function Auth() {
     }
   };
 
-  const handleTanflowLogin = () => {
+  /* const handleTanflowLogin = () => {
     // Clear any existing session data
     localStorage.clear();
     sessionStorage.clear();
-    
+
     setTanflowLoading(true);
     try {
       initiateTanflowLogin();
@@ -55,7 +55,7 @@ export function Auth() {
       console.error('Error details:', loginError);
       setTanflowLoading(false);
     }
-  };
+  }; */
 
   if (error) {
     console.error('Auth Error in Auth Component:', {
@@ -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">

src/pages/ClosedRequests/components/ClosedRequestsFilters.tsx

@@ -29,14 +29,14 @@ export function ClosedRequestsFilters({
   searchTerm,
   priorityFilter,
   statusFilter,
-  templateTypeFilter,
+  // templateTypeFilter,
   sortBy,
   sortOrder,
   activeFiltersCount,
   onSearchChange,
   onPriorityChange,
   onStatusChange,
-  onTemplateTypeChange,
+  // onTemplateTypeChange,
   onSortByChange,
   onSortOrderChange,
   onClearFilters,
@@ -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"

src/pages/CreateAdminRequest/CreateAdminRequest.tsx

@@ -0,0 +1,232 @@
+import { useState, useEffect } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { ArrowLeft, ChevronRight, Check } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { useAuth } from '@/contexts/AuthContext';
+import { getTemplates, WorkflowTemplate as BackendTemplate } from '@/services/workflowTemplateApi';
+import { createWorkflowMultipart, submitWorkflow, CreateWorkflowFromFormPayload } from '@/services/workflowApi';
+import { RequestTemplate } from '@/hooks/useCreateRequestForm';
+import { FileText } from 'lucide-react';
+import { AdminRequestDetailsStep } from './components/AdminRequestDetailsStep';
+import { AdminRequestReviewStep } from './components/AdminRequestReviewStep';
+import { toast } from 'sonner';
+
+import { WizardStepper } from '@/components/workflow/CreateRequest/WizardStepper';
+
+export function CreateAdminRequest() {
+    const { templateId } = useParams<{ templateId: string }>();
+    const navigate = useNavigate();
+    const { user: _ } = useAuth(); // Keeping hook call but ignoring return if needed for auth check side effect, or just remove destructuring
+
+    const [loading, setLoading] = useState(true);
+    const [submitting, setSubmitting] = useState(false);
+    const [template, setTemplate] = useState<RequestTemplate | null>(null);
+    const [step, setStep] = useState(1);
+    const [documents, setDocuments] = useState<File[]>([]);
+
+    // Simplified form data
+    const [formData, setFormData] = useState({
+        title: '',
+        description: '',
+    });
+
+    const stepNames = ['Request Details', 'Review & Submit'];
+
+    useEffect(() => {
+        const loadTemplate = async () => {
+            try {
+                setLoading(true);
+                // Ideally we would have a getTemplateById API, but for now we filter from list
+                // Optimization: In a real app, create a specific endpoint
+                const templates = await getTemplates();
+                const found = templates.find((t: BackendTemplate) => t.id === templateId);
+
+                if (found) {
+                    const mapped: RequestTemplate = {
+                        id: found.id,
+                        name: found.name,
+                        description: found.description,
+                        category: found.category,
+                        icon: FileText,
+                        estimatedTime: found.estimatedTime,
+                        commonApprovers: found.approvers.map((a: any) => a.name),
+                        workflowApprovers: found.approvers,
+                        suggestedSLA: found.suggestedSLA,
+                        priority: found.priority,
+                        fields: found.fields || {}
+                    };
+                    setTemplate(mapped);
+
+                    // Pre-fill
+                    setFormData({
+                        title: mapped.name,
+                        description: mapped.description
+                    });
+                } else {
+                    toast.error('Template not found');
+                    // navigate('/new-request'); // Removed to prevent potential redirect loops
+                    // We will show the "Template not found" UI below since template is null
+                }
+            } catch (error) {
+                console.error('Error loading template:', error);
+                toast.error('Failed to load template details');
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        if (templateId) {
+            loadTemplate();
+        }
+    }, [templateId, navigate]);
+
+    const handleSubmit = async () => {
+        if (!template) return;
+
+        try {
+            setSubmitting(true);
+
+            const formPayload: CreateWorkflowFromFormPayload = {
+                templateId: template.id,
+                templateType: 'TEMPLATE',
+                title: formData.title,
+                description: formData.description,
+                priorityUi: template.priority === 'high' ? 'express' : 'standard',
+                approverCount: template.workflowApprovers?.length || 0,
+                approvers: (template.workflowApprovers || []).map((a: any) => ({
+                    email: a.email,
+                    name: a.name,
+                    tat: a.tat,
+                    tatType: 'hours'
+                })),
+                spectators: [],
+                ccList: []
+            };
+
+            const response = await createWorkflowMultipart(formPayload, documents);
+
+            if (response && response.id) {
+                await submitWorkflow(response.id);
+            }
+
+            toast.success('Request Submitted Successfully', {
+                description: `Your request "${formData.title}" has been created.`
+            });
+
+            navigate('/my-requests');
+
+        } catch (error) {
+            console.error('Submission failed:', error);
+            toast.error('Failed to submit request');
+        } finally {
+            setSubmitting(false);
+        }
+    };
+
+    if (loading) {
+        return (
+            <div className="min-h-screen bg-gray-50 flex items-center justify-center">
+                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
+            </div>
+        );
+    }
+
+    if (!template) {
+        return (
+            <div className="min-h-screen bg-gray-50 flex flex-col items-center justify-center p-4">
+                <div className="bg-white p-8 rounded-lg shadow-md max-w-md w-full text-center">
+                    <div className="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                        <FileText className="w-8 h-8 text-red-600" />
+                    </div>
+                    <h2 className="text-2xl font-bold text-gray-900 mb-2">Template Not Found</h2>
+                    <p className="text-gray-600 mb-6">
+                        The requested template could not be loaded. It may have been deleted or you do not have permission to view it.
+                    </p>
+                    <div className="flex gap-3 justify-center">
+                        <Button variant="outline" onClick={() => navigate('/dashboard')}>
+                            Go to Dashboard
+                        </Button>
+                        <Button onClick={() => navigate('/new-request')}>
+                            Browse Templates
+                        </Button>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="h-screen flex flex-col bg-gray-50 overflow-hidden">
+            {/* Header */}
+            <header className="bg-white border-b flex-shrink-0 z-10">
+                <div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
+                    <div className="flex items-center gap-4">
+                        <Button variant="ghost" size="icon" onClick={() => navigate('/new-request')}>
+                            <ArrowLeft className="w-5 h-5 text-gray-500" />
+                        </Button>
+                        <div>
+                            <h1 className="text-xl font-bold text-gray-900">New Request</h1>
+                            <p className="text-sm text-gray-500">{template.name}</p>
+                        </div>
+                    </div>
+                    <Button variant="outline" onClick={() => navigate('/dashboard')}>
+                        Cancel Request
+                    </Button>
+                </div>
+
+                {/* Stepper */}
+                <WizardStepper
+                    currentStep={step}
+                    totalSteps={2}
+                    stepNames={stepNames}
+                />
+            </header>
+
+            {/* Content */}
+            <main className="flex-1 overflow-y-auto py-8 px-6 bg-gray-50/50">
+                <div className="max-w-4xl mx-auto">
+                    {step === 1 ? (
+                        <AdminRequestDetailsStep
+                            template={template}
+                            formData={formData}
+                            setFormData={setFormData}
+                            documents={documents}
+                            setDocuments={setDocuments}
+                        />
+                    ) : (
+                        <AdminRequestReviewStep
+                            template={template}
+                            formData={formData}
+                            documents={documents}
+                        />
+                    )}
+                </div>
+            </main>
+
+            {/* Footer Actions */}
+            <footer className="bg-white border-t px-6 py-4 flex-shrink-0 z-10">
+                <div className="max-w-4xl mx-auto flex items-center justify-between">
+                    <Button
+                        variant="outline"
+                        onClick={() => step === 1 ? navigate('/new-request') : setStep(1)}
+                        disabled={submitting}
+                    >
+                        {step === 1 ? 'Cancel' : 'Back to Details'}
+                    </Button>
+
+                    <Button
+                        onClick={() => step === 1 ? setStep(2) : handleSubmit()}
+                        disabled={submitting}
+                        className={step === 2 ? "bg-re-green hover:bg-re-green/90" : "bg-re-green hover:bg-re-green/90"}
+                    >
+                        {step === 1 ? (
+                            <>Review Request <ChevronRight className="w-4 h-4 ml-1" /></>
+                        ) : (
+                            <>{submitting ? 'Submitting...' : 'Submit Request'} <Check className="w-4 h-4 ml-1" /></>
+                        )}
+                    </Button>
+                </div>
+            </footer>
+        </div>
+    );
+}

src/pages/CreateAdminRequest/components/AdminRequestDetailsStep.tsx

@@ -0,0 +1,171 @@
+import { useRef, useState } from 'react';
+import { Card, CardContent } from '@/components/ui/card';
+import { Label } from '@/components/ui/label';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { Upload, X, FileText, Eye } from 'lucide-react';
+import { RequestTemplate } from '@/hooks/useCreateRequestForm';
+import { RichTextEditor } from '@/components/ui/rich-text-editor';
+import { FilePreview } from '@/components/common/FilePreview/FilePreview';
+
+interface AdminRequestDetailsStepProps {
+    template: RequestTemplate;
+    formData: any;
+    setFormData: (data: any) => void;
+    documents: File[];
+    setDocuments: (docs: File[]) => void;
+}
+
+export function AdminRequestDetailsStep({
+    template,
+    formData,
+    setFormData,
+    documents,
+    setDocuments
+}: AdminRequestDetailsStepProps) {
+    const fileInputRef = useRef<HTMLInputElement>(null);
+    const [previewFile, setPreviewFile] = useState<{ file: File; url: string } | null>(null);
+
+    const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        if (e.target.files && e.target.files.length > 0) {
+            setDocuments([...documents, ...Array.from(e.target.files)]);
+        }
+    };
+
+    const removeDocument = (index: number) => {
+        const newDocs = [...documents];
+        newDocs.splice(index, 1);
+        setDocuments(newDocs);
+    };
+
+    const handlePreview = (file: File) => {
+        const url = URL.createObjectURL(file);
+        setPreviewFile({ file, url });
+    };
+
+    const closePreview = () => {
+        if (previewFile?.url) {
+            URL.revokeObjectURL(previewFile.url);
+        }
+        setPreviewFile(null);
+    };
+
+    const canPreview = (file: File) => {
+        return file.type.includes('image') || file.type.includes('pdf');
+    };
+
+    return (
+        <div className="space-y-6 max-w-4xl mx-auto">
+            <Card className="shadow-sm">
+                <CardContent className="pt-6">
+                    <div className="mb-4">
+                        <h2 className="text-xl font-bold text-gray-800">{template.name}</h2>
+                        <p className="text-sm text-gray-500 mt-1">{template.description}</p>
+                    </div>
+                    <div className="flex gap-4 text-sm text-gray-600 bg-gray-50 p-3 rounded-lg">
+                        <div className="flex items-center gap-1">
+                            <span className="font-semibold">Category:</span> {template.category}
+                        </div>
+                        <div className="flex items-center gap-1">
+                            <span className="font-semibold">Priority:</span>
+                            <span className="capitalize">{template.priority}</span>
+                        </div>
+                        <div className="flex items-center gap-1">
+                            <span className="font-semibold">SLA:</span> {template.suggestedSLA} Hours
+                        </div>
+                    </div>
+                </CardContent>
+            </Card>
+
+            <Card>
+                <CardContent className="pt-6 space-y-4">
+                    <div className="space-y-2">
+                        <Label htmlFor="requestTitle">Request Title *</Label>
+                        <Input
+                            id="requestTitle"
+                            value={formData.title}
+                            onChange={(e) => setFormData({ ...formData, title: e.target.value })}
+                            placeholder={`Request for ${template.name}`}
+                            className="border-gray-200"
+                        />
+                    </div>
+
+                    <div className="space-y-2">
+                        <Label htmlFor="justification" className="text-base font-semibold">Request Detail *</Label>
+                        <p className="text-sm text-gray-600 mb-2">
+                            Explain what you need approval for, why it's needed, and any relevant details.
+                        </p>
+                        <RichTextEditor
+                            value={formData.description || ''}
+                            onChange={(html) => setFormData({ ...formData, description: html })}
+                            placeholder="Provide comprehensive details about your request..."
+                            className="min-h-[120px] text-base border-gray-200 bg-white shadow-sm"
+                            minHeight="120px"
+                        />
+                    </div>
+                </CardContent>
+            </Card>
+
+            <Card>
+                <CardContent className="pt-6 space-y-4">
+                    <Label>Supporting Documents</Label>
+
+                    <div
+                        className="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center hover:bg-gray-50 transition-colors cursor-pointer"
+                        onClick={() => fileInputRef.current?.click()}
+                    >
+                        <Upload className="w-10 h-10 text-gray-400 mx-auto mb-3" />
+                        <p className="text-sm font-medium text-gray-700">Click to upload files</p>
+                        <p className="text-xs text-gray-500 mt-1">PDF, Excel, Images (Max 10MB)</p>
+                        <input
+                            ref={fileInputRef}
+                            type="file"
+                            multiple
+                            className="hidden"
+                            onChange={handleFileChange}
+                        />
+                    </div>
+
+                    {documents.length > 0 && (
+                        <div className="grid grid-cols-1 gap-2 mt-4">
+                            {documents.map((file, index) => (
+                                <div key={index} className="flex items-center justify-between p-3 bg-white border rounded-lg shadow-sm">
+                                    <div className="flex items-center gap-3">
+                                        <div className="w-10 h-10 bg-blue-50 rounded-lg flex items-center justify-center">
+                                            <FileText className="w-5 h-5 text-blue-600" />
+                                        </div>
+                                        <div>
+                                            <p className="text-sm font-medium text-gray-800 truncate max-w-[200px]">{file.name}</p>
+                                            <p className="text-xs text-gray-500">{(file.size / 1024 / 1024).toFixed(2)} MB</p>
+                                        </div>
+                                    </div>
+                                    <div className="flex items-center gap-1">
+                                        {canPreview(file) && (
+                                            <Button variant="ghost" size="icon" onClick={() => handlePreview(file)}>
+                                                <Eye className="w-4 h-4 text-gray-500 hover:text-blue-600" />
+                                            </Button>
+                                        )}
+                                        <Button variant="ghost" size="icon" onClick={() => removeDocument(index)}>
+                                            <X className="w-4 h-4 text-gray-500 hover:text-red-500" />
+                                        </Button>
+                                    </div>
+                                </div>
+                            ))}
+                        </div>
+                    )}
+                </CardContent>
+            </Card>
+
+            {previewFile && (
+                <FilePreview
+                    fileName={previewFile.file.name}
+                    fileType={previewFile.file.type}
+                    fileUrl={previewFile.url}
+                    fileSize={previewFile.file.size}
+                    open={!!previewFile}
+                    onClose={closePreview}
+                />
+            )}
+        </div>
+    );
+}

src/pages/CreateAdminRequest/components/AdminRequestReviewStep.tsx

@@ -0,0 +1,135 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Separator } from '@/components/ui/separator';
+import { FileText, AlertCircle } from 'lucide-react';
+import { RequestTemplate } from '@/hooks/useCreateRequestForm';
+
+interface AdminRequestReviewStepProps {
+    template: RequestTemplate;
+    formData: any;
+    documents: File[];
+}
+
+export function AdminRequestReviewStep({
+    template,
+    formData,
+    documents
+}: AdminRequestReviewStepProps) {
+
+    // Use template approvers if available, otherwise fallback (though should always be there for admin templates)
+    const approvers = template.workflowApprovers || [];
+
+    return (
+        <div className="space-y-6 max-w-4xl mx-auto">
+            <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 flex items-start gap-3">
+                <AlertCircle className="w-5 h-5 text-blue-600 mt-0.5" />
+                <div>
+                    <h4 className="font-semibold text-blue-900">Ready to Submit?</h4>
+                    <p className="text-sm text-blue-700 mt-1">
+                        Please review the details below. This request will follow the standardized approval workflow defined by the administrator.
+                    </p>
+                </div>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+                <div className="md:col-span-2 space-y-6">
+                    <Card>
+                        <CardHeader className="pb-3">
+                            <CardTitle className="text-lg">Request Overview</CardTitle>
+                        </CardHeader>
+                        <CardContent>
+                            <div className="space-y-4">
+                                <div>
+                                    <span className="text-xs font-semibold text-gray-500 uppercase tracking-wider">Title</span>
+                                    <p className="text-base font-medium text-gray-900 mt-1">{formData.title}</p>
+                                </div>
+                                <div>
+                                    <span className="text-xs font-semibold text-gray-500 uppercase tracking-wider">Request Detail</span>
+                                    <div
+                                        className="text-sm text-gray-700 mt-1 prose prose-sm max-w-none"
+                                        dangerouslySetInnerHTML={{ __html: formData.description }}
+                                    />
+                                </div>
+
+                                {documents.length > 0 && (
+                                    <div>
+                                        <span className="text-xs font-semibold text-gray-500 uppercase tracking-wider block mb-2">Attachments ({documents.length})</span>
+                                        <div className="flex flex-wrap gap-2">
+                                            {documents.map((doc, i) => (
+                                                <Badge key={i} variant="secondary" className="pl-1 pr-2 py-1 flex items-center gap-1.5 h-auto">
+                                                    <FileText className="w-3 h-3 text-gray-500" />
+                                                    <span className="truncate max-w-[150px]">{doc.name}</span>
+                                                </Badge>
+                                            ))}
+                                        </div>
+                                    </div>
+                                )}
+                            </div>
+                        </CardContent>
+                    </Card>
+
+                    <Card>
+                        <CardHeader className="pb-3">
+                            <CardTitle className="text-lg">Approval Workflow</CardTitle>
+                        </CardHeader>
+                        <CardContent>
+                            <div className="relative pl-6 border-l-2 border-gray-100 space-y-8 py-2">
+                                {approvers.map((approver: any, index: number) => (
+                                    <div key={index} className="relative">
+                                        {/* Timeline dot */}
+                                        <div className="absolute -left-[31px] top-1 w-4 h-4 rounded-full bg-white border-2 border-blue-500 flex items-center justify-center">
+                                            <div className="w-1.5 h-1.5 rounded-full bg-blue-500"></div>
+                                        </div>
+
+                                        <div className="bg-gray-50 rounded-lg p-3 border border-gray-100">
+                                            <div className="flex justify-between items-start mb-1">
+                                                <div>
+                                                    <h5 className="font-semibold text-gray-800 text-sm">{approver.name || approver.email}</h5>
+                                                    <p className="text-xs text-gray-500">Level {approver.level} Approver</p>
+                                                </div>
+                                                <Badge variant="outline" className="bg-white text-xs">
+                                                    {approver.tat || 24} Hours TAT
+                                                </Badge>
+                                            </div>
+                                            <p className="text-xs text-gray-400">{approver.email}</p>
+                                        </div>
+                                    </div>
+                                ))}
+                            </div>
+                        </CardContent>
+                    </Card>
+                </div>
+
+                <div className="space-y-6">
+                    <Card>
+                        <CardHeader className="pb-3">
+                            <CardTitle className="text-sm uppercase text-gray-500">Properties</CardTitle>
+                        </CardHeader>
+                        <CardContent className="space-y-4">
+                            <div className="flex justify-between items-center">
+                                <span className="text-sm text-gray-600">Template</span>
+                                <span className="text-sm font-medium text-right">{template.name}</span>
+                            </div>
+                            <Separator />
+                            <div className="flex justify-between items-center">
+                                <span className="text-sm text-gray-600">Priority</span>
+                                <Badge className={
+                                    template.priority === 'high' ? 'bg-red-100 text-red-700 hover:bg-red-100' :
+                                        template.priority === 'medium' ? 'bg-orange-100 text-orange-700 hover:bg-orange-100' :
+                                            'bg-green-100 text-green-700 hover:bg-green-100'
+                                }>
+                                    {template.priority.toUpperCase()}
+                                </Badge>
+                            </div>
+                            <Separator />
+                            <div className="flex justify-between items-center">
+                                <span className="text-sm text-gray-600">Est. Time</span>
+                                <span className="text-sm text-gray-900">{template.estimatedTime}</span>
+                            </div>
+                        </CardContent>
+                    </Card>
+                </div>
+            </div>
+        </div>
+    );
+}

src/pages/CreateRequest/CreateRequest.tsx

@@ -13,7 +13,7 @@
  * - components/ - UI components
  */
 
-import { useState, useRef, useEffect, useCallback } from 'react';
+import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { useAuth } from '@/contexts/AuthContext';
 import { TemplateSelectionModal } from '@/components/modals/TemplateSelectionModal';
@@ -22,7 +22,7 @@ import { PolicyViolationModal } from '@/components/modals/PolicyViolationModal';
 import { downloadDocument } from '@/services/workflowApi';
 
 // Custom Hooks
-import { useCreateRequestForm } from '@/hooks/useCreateRequestForm';
+import { useCreateRequestForm, RequestTemplate } from '@/hooks/useCreateRequestForm';
 import { useWizardNavigation } from '@/hooks/useWizardNavigation';
 import { useRequestModals } from './hooks/useRequestModals';
 import { useCreateRequestSubmission } from './hooks/useCreateRequestSubmission';
@@ -31,6 +31,10 @@ import { useCreateRequestHandlers } from './hooks/useCreateRequestHandlers';
 // Constants
 import { REQUEST_TEMPLATES } from './constants/requestTemplates';
 
+// Services
+import { getTemplates, WorkflowTemplate as BackendTemplate } from '@/services/workflowTemplateApi';
+import { FileText } from 'lucide-react';
+
 // Components
 import { WizardStepper } from '@/components/workflow/CreateRequest/WizardStepper';
 import { WizardFooter } from '@/components/workflow/CreateRequest/WizardFooter';
@@ -64,6 +68,35 @@ export function CreateRequest({
   const isEditing = isEditMode && !!editRequestId;
   const { user } = useAuth();
 
+  const [adminTemplates, setAdminTemplates] = useState<RequestTemplate[]>([]);
+
+  useEffect(() => {
+    const fetchTemplates = async () => {
+      try {
+        const templates = await getTemplates();
+        const mappedTemplates: RequestTemplate[] = templates.map((t: BackendTemplate) => ({
+          id: t.id,
+          name: t.name,
+          description: t.description,
+          category: t.category,
+          icon: FileText,
+          estimatedTime: t.estimatedTime,
+          commonApprovers: t.approvers.map((a: any) => a.name),
+          workflowApprovers: t.approvers,
+          suggestedSLA: t.suggestedSLA,
+          priority: t.priority,
+          fields: t.fields || {}
+        }));
+        setAdminTemplates(mappedTemplates);
+      } catch (error) {
+        console.error('Failed to fetch admin templates:', error);
+      }
+    };
+    fetchTemplates();
+  }, []);
+
+  const allTemplates = useMemo(() => [...REQUEST_TEMPLATES, ...adminTemplates], [adminTemplates]);
+
   // Form and state management hooks
   const {
     formData,
@@ -75,7 +108,7 @@ export function CreateRequest({
     documentPolicy,
     existingDocuments,
     setExistingDocuments,
-  } = useCreateRequestForm(isEditing, editRequestId, REQUEST_TEMPLATES);
+  } = useCreateRequestForm(isEditing, editRequestId, allTemplates);
 
   const {
     currentStep,
@@ -84,6 +117,7 @@ export function CreateRequest({
     isStepValid,
     nextStep: wizardNextStep,
     prevStep: wizardPrevStep,
+    goToStep,
   } = useWizardNavigation(isEditing, selectedTemplate, formData);
 
   // Document management state
@@ -142,22 +176,37 @@ export function CreateRequest({
     systemPolicy,
     onPolicyViolation: openPolicyViolationModal,
     onSubmit,
+    goToStep,
   });
 
   // Handle back button: 
   // - Steps 1, 3, or 4: Navigate back to previous screen (browser history)
   // - Other steps: Go to previous step in wizard
   const handleBackButton = useCallback(() => {
-    if (currentStep === 1 || currentStep === 3 || currentStep === 4) {
-      // On steps 1, 3, or 4, navigate back to previous screen using browser history
+    // If on the first step (Template Selection), always go back to dashboard
+    // This prevents infinite loops if the user was redirected here from an error page
+    if (currentStep === 1) {
+      navigate('/dashboard', { replace: true });
+      return;
+    }
+
+    // For other major steps (3=Approval, 4=Participants), we might want to go back to prev screen
+    // But for consistency and safety against loops, let's treat "Back" as "Previous Step" 
+    // or explicit exit if at the start of a flow.
+
+    // Actually, keep the history logic ONLY for later steps if needed, but Step 1 MUST be explicit.
+    if (currentStep === 3 || currentStep === 4) {
+      // ... existing logic for these steps if we want to keep it, 
+      // but typically "Back" in a wizard should go to previous wizard step.
+      // However, the original code had this specific logic. 
+      // Let's defer to prevStep() for wizard navigation, and only use history/dashboard for exit.
+
       if (onBack) {
         onBack();
       } else {
-        // Use window.history.back() as fallback for more reliable navigation
         if (window.history.length > 1) {
           window.history.back();
         } else {
-          // If no history, navigate to dashboard
           navigate('/dashboard', { replace: true });
         }
       }
@@ -170,7 +219,7 @@ export function CreateRequest({
   // Sync documents from formData only on initial mount (when loading draft)
   const isInitialMount = useRef(true);
   const documentsSyncedRef = useRef(false);
-  
+
   useEffect(() => {
     // Only sync from formData on initial mount or when loading a draft
     if (isInitialMount.current && formData.documents && formData.documents.length > 0 && !documentsSyncedRef.current) {
@@ -184,7 +233,7 @@ export function CreateRequest({
   // Use a ref to prevent circular updates
   const isUpdatingFromFormData = useRef(false);
   const prevDocumentsRef = useRef(documents);
-  
+
   useEffect(() => {
     // Skip if we're currently syncing from formData
     if (isUpdatingFromFormData.current) {
@@ -192,7 +241,7 @@ export function CreateRequest({
       prevDocumentsRef.current = documents;
       return;
     }
-    
+
     // Only update if documents actually changed
     if (prevDocumentsRef.current !== documents) {
       updateFormData('documents', documents);
@@ -210,6 +259,7 @@ export function CreateRequest({
             templates={REQUEST_TEMPLATES}
             selectedTemplate={selectedTemplate}
             onSelectTemplate={selectTemplate}
+            adminTemplates={adminTemplates}
           />
         );
       case 2:

src/pages/CreateRequest/hooks/useCreateRequestHandlers.ts

@@ -32,6 +32,7 @@ interface UseHandlersOptions {
   systemPolicy?: SystemPolicy;
   onPolicyViolation?: (violations: Array<{ type: string; message: string; currentValue?: number; maxValue?: number }>) => void;
   onSubmit?: (requestData: any) => void;
+  goToStep?: (step: number) => void;
 }
 
 export function useCreateRequestHandlers({
@@ -48,6 +49,7 @@ export function useCreateRequestHandlers({
   systemPolicy,
   onPolicyViolation,
   onSubmit,
+  // goToStep,
 }: UseHandlersOptions) {
   const navigate = useNavigate();
   const [showTemplateModal, setShowTemplateModal] = useState(false);
@@ -64,8 +66,13 @@ export function useCreateRequestHandlers({
     const suggestedDate = new Date();
     suggestedDate.setDate(suggestedDate.getDate() + template.suggestedSLA);
     updateFormData('slaEndDate', suggestedDate);
-    
+
     // Note: For 'existing-template', the modal will open when Next is clicked (handled in nextStep)
+
+    if (template.id !== 'custom' && template.id !== 'existing-template') {
+      // Redirect to dedicated Admin Request flow
+      navigate(`/create-admin-request/${template.id}`);
+    }
   };
 
   const handleTemplateSelection = (templateId: string) => {

src/pages/MyRequests/components/MyRequestsFilters.tsx

@@ -22,11 +22,11 @@ export function MyRequestsFilters({
   searchTerm,
   statusFilter,
   priorityFilter,
-  templateTypeFilter,
+  // templateTypeFilter,
   onSearchChange,
   onStatusChange,
   onPriorityChange,
-  onTemplateTypeChange,
+  // onTemplateTypeChange,
 }: MyRequestsFiltersProps) {
   return (
     <Card className="border-gray-200" data-testid="my-requests-filters">
@@ -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>

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"

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>

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"

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)}

src/services/workflowTemplateApi.ts

@@ -0,0 +1,95 @@
+import apiClient from './authApi';
+
+export interface WorkflowTemplate {
+    id: string;
+    name: string;
+    description: string;
+    category: string;
+    priority: 'low' | 'medium' | 'high';
+    estimatedTime: string;
+    approvers: any[];
+    suggestedSLA: number;
+    isActive: boolean;
+    fields?: any;
+}
+
+// Simple in-memory cache
+let templatesCache: WorkflowTemplate[] | null = null;
+
+export const getCachedTemplates = () => templatesCache;
+
+export const createTemplate = async (templateData: Partial<WorkflowTemplate>): Promise<WorkflowTemplate> => {
+    const response = await apiClient.post('/templates', templateData);
+    const t = response.data.data;
+
+    // Map backend response
+    const mappedTemplate = {
+        id: t.templateId || t.id,
+        name: t.templateName || t.name,
+        description: t.templateDescription || t.description,
+        category: t.templateCategory || t.category,
+        priority: t.priority || 'medium',
+        estimatedTime: t.estimatedTime || 'Variable',
+        approvers: t.approvalLevelsConfig || t.approvers || [],
+        suggestedSLA: t.defaultTatHours || t.suggestedSLA || 24,
+        isActive: t.isActive,
+        fields: t.userFieldMappings || t.fields
+    };
+
+    // Invalidate cache or add to it
+    if (templatesCache) templatesCache.push(mappedTemplate as WorkflowTemplate);
+    return mappedTemplate as WorkflowTemplate;
+};
+
+export const getTemplates = async (): Promise<WorkflowTemplate[]> => {
+    const response = await apiClient.get('/templates');
+    const data = response.data?.data || [];
+
+    // Map backend response to frontend interface
+    const mappedData = data.map((t: any) => ({
+        id: t.templateId || t.id,
+        name: t.templateName || t.name,
+        description: t.templateDescription || t.description,
+        category: t.templateCategory || t.category,
+        priority: t.priority || 'medium', // Default if missing
+        estimatedTime: t.estimatedTime || 'Variable',
+        approvers: t.approvalLevelsConfig || t.approvers || [],
+        suggestedSLA: t.defaultTatHours || t.suggestedSLA || 24,
+        isActive: t.isActive,
+        fields: t.userFieldMappings || t.fields
+    }));
+
+    templatesCache = mappedData;
+    return mappedData;
+};
+
+export const deleteTemplate = async (id: string): Promise<void> => {
+    await apiClient.delete(`/templates/${id}`);
+    if (templatesCache) {
+        templatesCache = templatesCache.filter(t => t.id !== id);
+    }
+};
+
+export const updateTemplate = async (id: string, templateData: Partial<WorkflowTemplate>): Promise<WorkflowTemplate> => {
+    const response = await apiClient.put(`/templates/${id}`, templateData);
+    const t = response.data.data;
+
+    // Map backend response
+    const mappedTemplate = {
+        id: t.templateId || t.id,
+        name: t.templateName || t.name,
+        description: t.templateDescription || t.description,
+        category: t.templateCategory || t.category,
+        priority: t.priority || 'medium',
+        estimatedTime: t.estimatedTime || 'Variable',
+        approvers: t.approvalLevelsConfig || t.approvers || [],
+        suggestedSLA: t.defaultTatHours || t.suggestedSLA || 24,
+        isActive: t.isActive,
+        fields: t.userFieldMappings || t.fields
+    };
+
+    if (templatesCache) {
+        templatesCache = templatesCache.map(cacheItem => cacheItem.id === id ? (mappedTemplate as WorkflowTemplate) : cacheItem);
+    }
+    return mappedTemplate as WorkflowTemplate;
+};