From 00f0b786f6b17aeb53252eff17ecad75f8457b0c Mon Sep 17 00:00:00 2001
From: laxmanhalaki <laxman.halaki@tech4biz.org>
Date: Wed, 19 Nov 2025 20:20:14 +0530
Subject: [PATCH] code rafactor done for few screns

---
 src/components/dashboard/KPICard/KPICard.tsx  |   16 +-
 .../dashboard/StatCard/StatCard.tsx           |    2 +-
 .../CreateRequest/ApprovalWorkflowStep.tsx    |  359 ++
 .../CreateRequest/BasicInformationStep.tsx    |  225 +
 .../workflow/CreateRequest/DocumentsStep.tsx  |  307 ++
 .../CreateRequest/ParticipantsStep.tsx        |  227 +
 .../CreateRequest/ReviewSubmitStep.tsx        |  283 ++
 .../CreateRequest/TemplateSelectionStep.tsx   |  205 +
 .../workflow/CreateRequest/WizardFooter.tsx   |  117 +
 .../workflow/CreateRequest/WizardStepper.tsx  |  119 +
 .../workflow/CreateRequest/index.ts           |    9 +
 src/hooks/useCreateRequestForm.ts             |  315 ++
 src/hooks/useDocumentManagement.ts            |  189 +
 src/hooks/usePolicyValidation.ts              |  150 +
 src/hooks/useUserSearch.ts                    |  142 +
 src/hooks/useWizardNavigation.ts              |  108 +
 .../ApproverPerformance.tsx                   | 1045 +----
 .../ApproverPerformanceActionsStats.tsx       |  111 +
 .../components/ApproverPerformanceEmpty.tsx   |   31 +
 .../components/ApproverPerformanceFilters.tsx |  240 ++
 .../components/ApproverPerformanceHeader.tsx  |   44 +
 .../ApproverPerformanceRequestList.tsx        |  192 +
 .../ApproverPerformanceStatsCards.tsx         |  112 +
 .../hooks/useApproverPerformanceData.ts       |  196 +
 .../hooks/useApproverPerformanceFilters.ts    |  101 +
 .../types/approverPerformance.types.ts        |   48 +
 .../utils/configMappers.ts                    |  101 +
 .../ApproverPerformance/utils/formatters.ts   |   24 +
 .../utils/statsCalculations.ts                |   85 +
 src/pages/ClosedRequests/ClosedRequests.tsx   |  679 +--
 .../components/ClosedRequestCard.tsx          |  112 +
 .../components/ClosedRequestsEmpty.tsx        |   47 +
 .../components/ClosedRequestsFilters.tsx      |  161 +
 .../components/ClosedRequestsHeader.tsx       |   56 +
 .../components/ClosedRequestsList.tsx         |   41 +
 .../components/ClosedRequestsPagination.tsx   |  107 +
 .../ClosedRequests/hooks/useClosedRequests.ts |  106 +
 .../hooks/useClosedRequestsFilters.ts         |   87 +
 .../types/closedRequests.types.ts             |   54 +
 .../ClosedRequests/utils/configMappers.ts     |   67 +
 .../ClosedRequests/utils/paginationHelpers.ts |   21 +
 .../utils/requestTransformers.ts              |   37 +
 src/pages/CreateRequest/CreateRequest.tsx     | 3718 ++---------------
 .../components/CreateRequestContent.tsx       |   24 +
 .../components/CreateRequestHeader.tsx        |   71 +
 .../components/modals/DocumentErrorModal.tsx  |   92 +
 .../modals/ValidationErrorModal.tsx           |  138 +
 .../constants/requestTemplates.ts             |   36 +
 .../hooks/useApproverValidation.ts            |  183 +
 .../hooks/useCreateRequestHandlers.ts         |  157 +
 .../hooks/useCreateRequestSubmission.ts       |  167 +
 .../CreateRequest/hooks/useRequestModals.ts   |   92 +
 .../services/createRequestService.ts          |   86 +
 .../types/createRequest.types.ts              |  124 +
 .../utils/approvalLevelBuilders.ts            |   51 +
 .../CreateRequest/utils/participantMappers.ts |  110 +
 .../CreateRequest/utils/payloadBuilders.ts    |  114 +
 src/pages/Dashboard/Dashboard.tsx             | 2151 +---------
 .../components/DashboardFiltersBar.tsx        |  202 +
 .../Dashboard/components/DashboardHero.tsx    |   70 +
 .../sections/AIRemarkUtilizationReport.tsx    |   92 +
 .../sections/AdminAnalyticsSection.tsx        |  213 +
 .../components/sections/AdminKPICards.tsx     |  191 +
 .../sections/ApproverPerformanceReport.tsx    |  154 +
 .../sections/CriticalAlertsSection.tsx        |  134 +
 .../sections/PriorityDistributionReport.tsx   |  134 +
 .../sections/RecentActivitySection.tsx        |  151 +
 .../components/sections/TATBreachReport.tsx   |  192 +
 .../sections/UpcomingDeadlinesSection.tsx     |  129 +
 .../components/sections/UserKPICards.tsx      |  193 +
 .../sections/UserMetricsSection.tsx           |   76 +
 .../components/types/dashboard.types.ts       |   16 +
 src/pages/Dashboard/hooks/useDashboardData.ts |  203 +
 .../Dashboard/hooks/useDashboardExports.ts    |   52 +
 .../Dashboard/hooks/useDashboardFilters.ts    |   62 +
 .../Dashboard/hooks/useDashboardPagination.ts |   97 +
 src/pages/Dashboard/types/dashboard.types.ts  |   62 +
 .../Dashboard/utils/dashboardCalculations.ts  |   91 +
 src/pages/Dashboard/utils/dashboardExports.ts |  110 +
 .../Dashboard/utils/dashboardNavigation.ts    |   59 +
 src/pages/DetailedReports/DetailedReports.tsx | 1720 +-------
 .../components/DateRangeFilter.tsx            |  139 +
 .../components/DetailedReportsHeader.tsx      |   33 +
 .../sections/RequestLifecycleReport.tsx       |  219 +
 .../sections/UserActivityLogReport.tsx        |  266 ++
 .../sections/WorkflowAgingReport.tsx          |  262 ++
 .../hooks/useActivityLogReport.ts             |  129 +
 .../DetailedReports/hooks/useAgingReport.ts   |  134 +
 .../DetailedReports/hooks/useDateFilter.ts    |  117 +
 .../hooks/useDetailedReportsExports.ts        |   74 +
 .../hooks/useLifecycleReport.ts               |  110 +
 .../DetailedReports/hooks/useThreshold.ts     |   46 +
 .../types/detailedReports.types.ts            |   60 +
 .../DetailedReports/utils/colorMappers.ts     |   69 +
 src/pages/DetailedReports/utils/csvExports.ts |  168 +
 src/pages/DetailedReports/utils/formatting.ts |   72 +
 src/pages/MyRequests/MyRequests.tsx           |  532 +--
 .../components/MyRequestsFilters.tsx          |   79 +
 .../MyRequests/components/MyRequestsList.tsx  |   58 +
 .../MyRequests/components/MyRequestsStats.tsx |   73 +
 .../MyRequests/components/RequestCard.tsx     |  122 +
 src/pages/MyRequests/hooks/useMyRequests.ts   |   92 +
 .../MyRequests/hooks/useMyRequestsFilters.ts  |   65 +
 .../MyRequests/hooks/useMyRequestsStats.ts    |   27 +
 .../MyRequests/types/myRequests.types.ts      |   43 +
 src/pages/MyRequests/utils/configMappers.ts   |   89 +
 .../MyRequests/utils/requestTransformers.ts   |   43 +
 src/pages/RequestDetail/RequestDetail.tsx     | 1344 +-----
 .../components/QuickActionsSidebar.tsx        |  118 +
 .../components/RequestDetailHeader.tsx        |  100 +
 .../components/RequestDetailModals.tsx        |  210 +
 .../components/tabs/ActivityTab.tsx           |   61 +
 .../components/tabs/DocumentsTab.tsx          |  124 +
 .../components/tabs/OverviewTab.tsx           |  313 ++
 .../components/tabs/WorkNotesTab.tsx          |   41 +
 .../components/tabs/WorkflowTab.tsx           |   75 +
 .../types/requestDetail.types.ts              |   27 +
 src/pages/Requests/Requests.tsx               | 2123 ++--------
 src/pages/Requests/components/RequestCard.tsx |  120 +
 .../Requests/components/RequestsHeader.tsx    |   63 +
 .../Requests/components/RequestsList.tsx      |   60 +
 .../Requests/components/RequestsStats.tsx     |   84 +
 .../Requests/hooks/useRequestsFilters.ts      |  181 +
 src/pages/Requests/hooks/useUserSearch.ts     |   93 +
 .../Requests/services/requestsService.ts      |  187 +
 src/pages/Requests/types/requests.types.ts    |   65 +
 src/pages/Requests/utils/configMappers.ts     |   70 +
 src/pages/Requests/utils/csvExports.ts        |   74 +
 .../Requests/utils/requestCalculations.ts     |   72 +
 src/pages/Requests/utils/requestFilters.ts    |  196 +
 .../Requests/utils/requestTransformers.ts     |  108 +
 131 files changed, 15551 insertions(+), 11874 deletions(-)
 create mode 100644 src/components/workflow/CreateRequest/ApprovalWorkflowStep.tsx
 create mode 100644 src/components/workflow/CreateRequest/BasicInformationStep.tsx
 create mode 100644 src/components/workflow/CreateRequest/DocumentsStep.tsx
 create mode 100644 src/components/workflow/CreateRequest/ParticipantsStep.tsx
 create mode 100644 src/components/workflow/CreateRequest/ReviewSubmitStep.tsx
 create mode 100644 src/components/workflow/CreateRequest/TemplateSelectionStep.tsx
 create mode 100644 src/components/workflow/CreateRequest/WizardFooter.tsx
 create mode 100644 src/components/workflow/CreateRequest/WizardStepper.tsx
 create mode 100644 src/components/workflow/CreateRequest/index.ts
 create mode 100644 src/hooks/useCreateRequestForm.ts
 create mode 100644 src/hooks/useDocumentManagement.ts
 create mode 100644 src/hooks/usePolicyValidation.ts
 create mode 100644 src/hooks/useUserSearch.ts
 create mode 100644 src/hooks/useWizardNavigation.ts
 create mode 100644 src/pages/ApproverPerformance/components/ApproverPerformanceActionsStats.tsx
 create mode 100644 src/pages/ApproverPerformance/components/ApproverPerformanceEmpty.tsx
 create mode 100644 src/pages/ApproverPerformance/components/ApproverPerformanceFilters.tsx
 create mode 100644 src/pages/ApproverPerformance/components/ApproverPerformanceHeader.tsx
 create mode 100644 src/pages/ApproverPerformance/components/ApproverPerformanceRequestList.tsx
 create mode 100644 src/pages/ApproverPerformance/components/ApproverPerformanceStatsCards.tsx
 create mode 100644 src/pages/ApproverPerformance/hooks/useApproverPerformanceData.ts
 create mode 100644 src/pages/ApproverPerformance/hooks/useApproverPerformanceFilters.ts
 create mode 100644 src/pages/ApproverPerformance/types/approverPerformance.types.ts
 create mode 100644 src/pages/ApproverPerformance/utils/configMappers.ts
 create mode 100644 src/pages/ApproverPerformance/utils/formatters.ts
 create mode 100644 src/pages/ApproverPerformance/utils/statsCalculations.ts
 create mode 100644 src/pages/ClosedRequests/components/ClosedRequestCard.tsx
 create mode 100644 src/pages/ClosedRequests/components/ClosedRequestsEmpty.tsx
 create mode 100644 src/pages/ClosedRequests/components/ClosedRequestsFilters.tsx
 create mode 100644 src/pages/ClosedRequests/components/ClosedRequestsHeader.tsx
 create mode 100644 src/pages/ClosedRequests/components/ClosedRequestsList.tsx
 create mode 100644 src/pages/ClosedRequests/components/ClosedRequestsPagination.tsx
 create mode 100644 src/pages/ClosedRequests/hooks/useClosedRequests.ts
 create mode 100644 src/pages/ClosedRequests/hooks/useClosedRequestsFilters.ts
 create mode 100644 src/pages/ClosedRequests/types/closedRequests.types.ts
 create mode 100644 src/pages/ClosedRequests/utils/configMappers.ts
 create mode 100644 src/pages/ClosedRequests/utils/paginationHelpers.ts
 create mode 100644 src/pages/ClosedRequests/utils/requestTransformers.ts
 create mode 100644 src/pages/CreateRequest/components/CreateRequestContent.tsx
 create mode 100644 src/pages/CreateRequest/components/CreateRequestHeader.tsx
 create mode 100644 src/pages/CreateRequest/components/modals/DocumentErrorModal.tsx
 create mode 100644 src/pages/CreateRequest/components/modals/ValidationErrorModal.tsx
 create mode 100644 src/pages/CreateRequest/constants/requestTemplates.ts
 create mode 100644 src/pages/CreateRequest/hooks/useApproverValidation.ts
 create mode 100644 src/pages/CreateRequest/hooks/useCreateRequestHandlers.ts
 create mode 100644 src/pages/CreateRequest/hooks/useCreateRequestSubmission.ts
 create mode 100644 src/pages/CreateRequest/hooks/useRequestModals.ts
 create mode 100644 src/pages/CreateRequest/services/createRequestService.ts
 create mode 100644 src/pages/CreateRequest/types/createRequest.types.ts
 create mode 100644 src/pages/CreateRequest/utils/approvalLevelBuilders.ts
 create mode 100644 src/pages/CreateRequest/utils/participantMappers.ts
 create mode 100644 src/pages/CreateRequest/utils/payloadBuilders.ts
 create mode 100644 src/pages/Dashboard/components/DashboardFiltersBar.tsx
 create mode 100644 src/pages/Dashboard/components/DashboardHero.tsx
 create mode 100644 src/pages/Dashboard/components/sections/AIRemarkUtilizationReport.tsx
 create mode 100644 src/pages/Dashboard/components/sections/AdminAnalyticsSection.tsx
 create mode 100644 src/pages/Dashboard/components/sections/AdminKPICards.tsx
 create mode 100644 src/pages/Dashboard/components/sections/ApproverPerformanceReport.tsx
 create mode 100644 src/pages/Dashboard/components/sections/CriticalAlertsSection.tsx
 create mode 100644 src/pages/Dashboard/components/sections/PriorityDistributionReport.tsx
 create mode 100644 src/pages/Dashboard/components/sections/RecentActivitySection.tsx
 create mode 100644 src/pages/Dashboard/components/sections/TATBreachReport.tsx
 create mode 100644 src/pages/Dashboard/components/sections/UpcomingDeadlinesSection.tsx
 create mode 100644 src/pages/Dashboard/components/sections/UserKPICards.tsx
 create mode 100644 src/pages/Dashboard/components/sections/UserMetricsSection.tsx
 create mode 100644 src/pages/Dashboard/components/types/dashboard.types.ts
 create mode 100644 src/pages/Dashboard/hooks/useDashboardData.ts
 create mode 100644 src/pages/Dashboard/hooks/useDashboardExports.ts
 create mode 100644 src/pages/Dashboard/hooks/useDashboardFilters.ts
 create mode 100644 src/pages/Dashboard/hooks/useDashboardPagination.ts
 create mode 100644 src/pages/Dashboard/types/dashboard.types.ts
 create mode 100644 src/pages/Dashboard/utils/dashboardCalculations.ts
 create mode 100644 src/pages/Dashboard/utils/dashboardExports.ts
 create mode 100644 src/pages/Dashboard/utils/dashboardNavigation.ts
 create mode 100644 src/pages/DetailedReports/components/DateRangeFilter.tsx
 create mode 100644 src/pages/DetailedReports/components/DetailedReportsHeader.tsx
 create mode 100644 src/pages/DetailedReports/components/sections/RequestLifecycleReport.tsx
 create mode 100644 src/pages/DetailedReports/components/sections/UserActivityLogReport.tsx
 create mode 100644 src/pages/DetailedReports/components/sections/WorkflowAgingReport.tsx
 create mode 100644 src/pages/DetailedReports/hooks/useActivityLogReport.ts
 create mode 100644 src/pages/DetailedReports/hooks/useAgingReport.ts
 create mode 100644 src/pages/DetailedReports/hooks/useDateFilter.ts
 create mode 100644 src/pages/DetailedReports/hooks/useDetailedReportsExports.ts
 create mode 100644 src/pages/DetailedReports/hooks/useLifecycleReport.ts
 create mode 100644 src/pages/DetailedReports/hooks/useThreshold.ts
 create mode 100644 src/pages/DetailedReports/types/detailedReports.types.ts
 create mode 100644 src/pages/DetailedReports/utils/colorMappers.ts
 create mode 100644 src/pages/DetailedReports/utils/csvExports.ts
 create mode 100644 src/pages/DetailedReports/utils/formatting.ts
 create mode 100644 src/pages/MyRequests/components/MyRequestsFilters.tsx
 create mode 100644 src/pages/MyRequests/components/MyRequestsList.tsx
 create mode 100644 src/pages/MyRequests/components/MyRequestsStats.tsx
 create mode 100644 src/pages/MyRequests/components/RequestCard.tsx
 create mode 100644 src/pages/MyRequests/hooks/useMyRequests.ts
 create mode 100644 src/pages/MyRequests/hooks/useMyRequestsFilters.ts
 create mode 100644 src/pages/MyRequests/hooks/useMyRequestsStats.ts
 create mode 100644 src/pages/MyRequests/types/myRequests.types.ts
 create mode 100644 src/pages/MyRequests/utils/configMappers.ts
 create mode 100644 src/pages/MyRequests/utils/requestTransformers.ts
 create mode 100644 src/pages/RequestDetail/components/QuickActionsSidebar.tsx
 create mode 100644 src/pages/RequestDetail/components/RequestDetailHeader.tsx
 create mode 100644 src/pages/RequestDetail/components/RequestDetailModals.tsx
 create mode 100644 src/pages/RequestDetail/components/tabs/ActivityTab.tsx
 create mode 100644 src/pages/RequestDetail/components/tabs/DocumentsTab.tsx
 create mode 100644 src/pages/RequestDetail/components/tabs/OverviewTab.tsx
 create mode 100644 src/pages/RequestDetail/components/tabs/WorkNotesTab.tsx
 create mode 100644 src/pages/RequestDetail/components/tabs/WorkflowTab.tsx
 create mode 100644 src/pages/RequestDetail/types/requestDetail.types.ts
 create mode 100644 src/pages/Requests/components/RequestCard.tsx
 create mode 100644 src/pages/Requests/components/RequestsHeader.tsx
 create mode 100644 src/pages/Requests/components/RequestsList.tsx
 create mode 100644 src/pages/Requests/components/RequestsStats.tsx
 create mode 100644 src/pages/Requests/hooks/useRequestsFilters.ts
 create mode 100644 src/pages/Requests/hooks/useUserSearch.ts
 create mode 100644 src/pages/Requests/services/requestsService.ts
 create mode 100644 src/pages/Requests/types/requests.types.ts
 create mode 100644 src/pages/Requests/utils/configMappers.ts
 create mode 100644 src/pages/Requests/utils/csvExports.ts
 create mode 100644 src/pages/Requests/utils/requestCalculations.ts
 create mode 100644 src/pages/Requests/utils/requestFilters.ts
 create mode 100644 src/pages/Requests/utils/requestTransformers.ts

diff --git a/src/components/dashboard/KPICard/KPICard.tsx b/src/components/dashboard/KPICard/KPICard.tsx
index efa74e4..c8b17e0 100644
--- a/src/components/dashboard/KPICard/KPICard.tsx
+++ b/src/components/dashboard/KPICard/KPICard.tsx
@@ -27,41 +27,41 @@ export function KPICard({
 }: KPICardProps) {
   return (
     <Card 
-      className="hover:shadow-lg transition-all duration-200 shadow-md cursor-pointer"
+      className="hover:shadow-lg transition-all duration-200 shadow-md cursor-pointer h-full flex flex-col"
       onClick={onClick}
       data-testid={testId}
     >
-      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-3">
+      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
         <CardTitle 
           className="text-sm font-medium text-muted-foreground"
           data-testid={`${testId}-title`}
         >
           {title}
         </CardTitle>
-        <div className={`p-2 sm:p-3 rounded-lg ${iconBgColor}`} data-testid={`${testId}-icon-wrapper`}>
+        <div className={`p-1.5 sm:p-2 rounded-lg ${iconBgColor}`} data-testid={`${testId}-icon-wrapper`}>
           <Icon 
-            className={`h-4 w-4 sm:h-5 sm:w-5 ${iconColor}`}
+            className={`h-4 w-4 sm:h-4 sm:w-4 ${iconColor}`}
             data-testid={`${testId}-icon`}
           />
         </div>
       </CardHeader>
-      <CardContent>
+      <CardContent className="flex flex-col flex-1 py-3">
         <div 
-          className="text-2xl sm:text-3xl font-bold text-gray-900 mb-3"
+          className="text-xl sm:text-2xl font-bold text-gray-900 mb-2"
           data-testid={`${testId}-value`}
         >
           {value}
         </div>
         {subtitle && (
           <div 
-            className="text-xs text-muted-foreground mb-3"
+            className="text-xs text-muted-foreground mb-2"
             data-testid={`${testId}-subtitle`}
           >
             {subtitle}
           </div>
         )}
         {children && (
-          <div data-testid={`${testId}-children`}>
+          <div className="flex-1 flex flex-col" data-testid={`${testId}-children`}>
             {children}
           </div>
         )}
diff --git a/src/components/dashboard/StatCard/StatCard.tsx b/src/components/dashboard/StatCard/StatCard.tsx
index bfe0fab..fbf2a2f 100644
--- a/src/components/dashboard/StatCard/StatCard.tsx
+++ b/src/components/dashboard/StatCard/StatCard.tsx
@@ -26,7 +26,7 @@ export function StatCard({
       onClick={onClick}
     >
       <p 
-        className="text-xs text-gray-600 mb-1"
+        className="text-xs text-gray-600 mb-1 leading-tight"
         data-testid={`${testId}-label`}
       >
         {label}
diff --git a/src/components/workflow/CreateRequest/ApprovalWorkflowStep.tsx b/src/components/workflow/CreateRequest/ApprovalWorkflowStep.tsx
new file mode 100644
index 0000000..1a9b20d
--- /dev/null
+++ b/src/components/workflow/CreateRequest/ApprovalWorkflowStep.tsx
@@ -0,0 +1,359 @@
+import { motion } from 'framer-motion';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Badge } from '@/components/ui/badge';
+import { Users, Settings, Shield, User, CheckCircle, AlertCircle, Info, Clock, Minus, Plus } from 'lucide-react';
+import { FormData } from '@/hooks/useCreateRequestForm';
+import { useMultiUserSearch } from '@/hooks/useUserSearch';
+import { useAuth } from '@/contexts/AuthContext';
+import { ensureUserExists } from '@/services/userApi';
+
+interface ApprovalWorkflowStepProps {
+  formData: FormData;
+  updateFormData: (field: keyof FormData, value: any) => void;
+  onValidationError: (error: { type: string; email: string; message: string }) => void;
+}
+
+/**
+ * Component: ApprovalWorkflowStep
+ * 
+ * Purpose: Step 3 - Approval workflow configuration
+ * 
+ * Features:
+ * - Configure number of approvers
+ * - Define approval hierarchy with TAT
+ * - User search with @ prefix
+ * - Test IDs for testing
+ * 
+ * Note: This is a simplified version. Full implementation includes complex approver management.
+ */
+export function ApprovalWorkflowStep({
+  formData,
+  updateFormData,
+  onValidationError
+}: ApprovalWorkflowStepProps) {
+  const { user } = useAuth();
+  const { userSearchResults, userSearchLoading, searchUsersForIndex, clearSearchForIndex } = useMultiUserSearch();
+
+  const handleApproverEmailChange = (index: number, value: string) => {
+    const newApprovers = [...formData.approvers];
+    const previousEmail = newApprovers[index]?.email;
+    const emailChanged = previousEmail !== value;
+    
+    newApprovers[index] = {
+      ...newApprovers[index],
+      email: value,
+      level: index + 1,
+      userId: emailChanged ? undefined : newApprovers[index]?.userId,
+      name: emailChanged ? undefined : newApprovers[index]?.name,
+      department: emailChanged ? undefined : newApprovers[index]?.department,
+      avatar: emailChanged ? undefined : newApprovers[index]?.avatar
+    };
+    updateFormData('approvers', newApprovers);
+
+    if (!value || !value.startsWith('@') || value.length < 2) {
+      clearSearchForIndex(index);
+      return;
+    }
+    searchUsersForIndex(index, value, 10);
+  };
+
+  const handleUserSelect = async (index: number, selectedUser: any) => {
+    try {
+      const dbUser = await ensureUserExists({
+        userId: selectedUser.userId,
+        email: selectedUser.email,
+        displayName: selectedUser.displayName,
+        firstName: selectedUser.firstName,
+        lastName: selectedUser.lastName,
+        department: selectedUser.department,
+        phone: selectedUser.phone,
+        mobilePhone: selectedUser.mobilePhone,
+        designation: selectedUser.designation,
+        jobTitle: selectedUser.jobTitle,
+        manager: selectedUser.manager,
+        employeeId: selectedUser.employeeId,
+        employeeNumber: selectedUser.employeeNumber,
+        secondEmail: selectedUser.secondEmail,
+        location: selectedUser.location
+      });
+
+      const updated = [...formData.approvers];
+      updated[index] = {
+        ...updated[index],
+        email: selectedUser.email,
+        name: selectedUser.displayName || [selectedUser.firstName, selectedUser.lastName].filter(Boolean).join(' '),
+        userId: dbUser.userId,
+        level: index + 1,
+      };
+      updateFormData('approvers', updated);
+      clearSearchForIndex(index);
+    } catch (err) {
+      console.error('Failed to ensure user exists:', err);
+      onValidationError({
+        type: 'error',
+        email: selectedUser.email,
+        message: 'Failed to validate user. Please try again.'
+      });
+    }
+  };
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, y: -20 }}
+      className="space-y-6"
+      data-testid="approval-workflow-step"
+    >
+      <div className="text-center mb-8" data-testid="approval-workflow-header">
+        <div className="w-16 h-16 bg-gradient-to-br from-orange-500 to-red-600 rounded-2xl flex items-center justify-center mx-auto mb-4">
+          <Users className="w-8 h-8 text-white" />
+        </div>
+        <h2 className="text-2xl font-bold text-gray-900 mb-2" data-testid="approval-workflow-title">
+          Approval Workflow
+        </h2>
+        <p className="text-gray-600" data-testid="approval-workflow-description">
+          Define the approval hierarchy and assign approvers by email ID.
+        </p>
+      </div>
+
+      <div className="max-w-4xl mx-auto space-y-8" data-testid="approval-workflow-content">
+        {/* Number of Approvers */}
+        <Card data-testid="approval-workflow-config-card">
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2" data-testid="approval-workflow-config-title">
+              <Settings className="w-5 h-5" />
+              Approval Configuration
+            </CardTitle>
+            <CardDescription>
+              Configure how many approvers you need and define the approval sequence.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-6">
+            <div data-testid="approval-workflow-count-field">
+              <Label className="text-base font-semibold mb-4 block">Number of Approvers *</Label>
+              <div className="flex items-center gap-4">
+                <Button 
+                  type="button"
+                  variant="outline" 
+                  size="sm"
+                  onClick={() => {
+                    const currentCount = formData.approverCount || 1;
+                    const newCount = Math.max(1, currentCount - 1);
+                    updateFormData('approverCount', newCount);
+                    if (formData.approvers.length > newCount) {
+                      updateFormData('approvers', formData.approvers.slice(0, newCount));
+                    }
+                  }}
+                  disabled={(formData.approverCount || 1) <= 1}
+                  data-testid="approval-workflow-decrease-count"
+                >
+                  <Minus className="w-4 h-4" />
+                </Button>
+                <span className="text-2xl font-semibold w-12 text-center" data-testid="approval-workflow-count-display">
+                  {formData.approverCount || 1}
+                </span>
+                <Button 
+                  type="button"
+                  variant="outline" 
+                  size="sm"
+                  onClick={() => {
+                    const currentCount = formData.approverCount || 1;
+                    const newCount = Math.min(10, currentCount + 1);
+                    updateFormData('approverCount', newCount);
+                  }}
+                  disabled={(formData.approverCount || 1) >= 10}
+                  data-testid="approval-workflow-increase-count"
+                >
+                  <Plus className="w-4 h-4" />
+                </Button>
+              </div>
+              <p className="text-sm text-gray-600 mt-2">
+                Maximum 10 approvers allowed. Each approver will review sequentially.
+              </p>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Approval Hierarchy */}
+        <Card data-testid="approval-workflow-hierarchy-card">
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2" data-testid="approval-workflow-hierarchy-title">
+              <Shield className="w-5 h-5" />
+              Approval Hierarchy *
+            </CardTitle>
+            <CardDescription>
+              Define the approval sequence. Each approver will review the request in order from Level 1 to Level {formData.approverCount || 1}.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-6">
+            {/* Initiator Card */}
+            <div className="p-4 rounded-lg border-2 border-blue-200 bg-blue-50" data-testid="approval-workflow-initiator-card">
+              <div className="flex items-center gap-3">
+                <div className="w-10 h-10 bg-blue-600 rounded-full flex items-center justify-center">
+                  <User className="w-5 h-5 text-white" />
+                </div>
+                <div className="flex-1">
+                  <div className="flex items-center gap-2">
+                    <span className="font-semibold text-blue-900">Request Initiator</span>
+                    <Badge variant="secondary" className="text-xs">YOU</Badge>
+                  </div>
+                  <p className="text-sm text-blue-700">Creates and submits the request</p>
+                </div>
+              </div>
+            </div>
+
+            {/* Dynamic Approver Cards */}
+            {Array.from({ length: formData.approverCount || 1 }, (_, index) => {
+              const level = index + 1;
+              const isLast = level === (formData.approverCount || 1);
+              
+              if (!formData.approvers[index]) {
+                const newApprovers = [...formData.approvers];
+                newApprovers[index] = { email: '', name: '', level: level, tat: '' as any };
+                updateFormData('approvers', newApprovers);
+              }
+
+              return (
+                <div key={level} className="space-y-3" data-testid={`approval-workflow-approver-level-${level}`}>
+                  <div className="flex justify-center">
+                    <div className="w-px h-6 bg-gray-300"></div>
+                  </div>
+                  
+                  <div className={`p-4 rounded-lg border-2 transition-all ${
+                    formData.approvers[index]?.email 
+                      ? 'border-green-200 bg-green-50' 
+                      : 'border-gray-200 bg-gray-50'
+                  }`}>
+                    <div className="flex items-center gap-3">
+                      <div className={`w-10 h-10 rounded-full flex items-center justify-center ${
+                        formData.approvers[index]?.email 
+                          ? 'bg-green-600' 
+                          : 'bg-gray-400'
+                      }`}>
+                        <span className="text-white font-semibold">{level}</span>
+                      </div>
+                      <div className="flex-1">
+                        <div className="flex items-center gap-2 mb-3">
+                          <span className="font-semibold text-gray-900">
+                            Approver Level {level}
+                          </span>
+                          {isLast && (
+                            <Badge variant="destructive" className="text-xs">FINAL APPROVER</Badge>
+                          )}
+                        </div>
+                        <div className="space-y-4">
+                          <div data-testid={`approval-workflow-approver-${level}-email-field`}>
+                            <div className="flex items-center justify-between mb-1">
+                              <Label htmlFor={`approver-${level}`} className="text-sm font-medium">
+                                Email Address *
+                              </Label>
+                              {formData.approvers[index]?.email && formData.approvers[index]?.userId && (
+                                <Badge variant="outline" className="text-xs bg-green-50 text-green-700 border-green-300">
+                                  <CheckCircle className="w-3 h-3 mr-1" />
+                                  Verified
+                                </Badge>
+                              )}
+                            </div>
+                            <div className="relative">
+                              <Input
+                                id={`approver-${level}`}
+                                type="email"
+                                placeholder="approver@royalenfield.com"
+                                value={formData.approvers[index]?.email || ''}
+                                onChange={(e) => handleApproverEmailChange(index, e.target.value)}
+                                className="h-10 border-2 border-gray-300 focus:border-blue-500 mt-1 w-full"
+                                data-testid={`approval-workflow-approver-${level}-email-input`}
+                              />
+                              {/* Search suggestions dropdown */}
+                              {(userSearchLoading[index] || (userSearchResults[index]?.length || 0) > 0) && (
+                                <div className="absolute left-0 right-0 top-full mt-1 z-50 border rounded-md bg-white shadow-lg">
+                                  {userSearchLoading[index] ? (
+                                    <div className="p-2 text-xs text-gray-500">Searching...</div>
+                                  ) : (
+                                    <ul className="max-h-56 overflow-auto divide-y">
+                                      {userSearchResults[index]?.map((u) => (
+                                        <li
+                                          key={u.userId}
+                                          className="p-2 text-sm cursor-pointer hover:bg-gray-50"
+                                          onClick={() => handleUserSelect(index, u)}
+                                          data-testid={`approval-workflow-approver-${level}-search-result-${u.userId}`}
+                                        >
+                                          <div className="font-medium text-gray-900">{u.displayName || u.email}</div>
+                                          <div className="text-xs text-gray-600">{u.email}</div>
+                                        </li>
+                                      ))}
+                                    </ul>
+                                  )}
+                                </div>
+                              )}
+                            </div>
+                          </div>
+
+                          <div data-testid={`approval-workflow-approver-${level}-tat-field`}>
+                            <Label htmlFor={`tat-${level}`} className="text-sm font-medium">
+                              TAT (Turn Around Time) *
+                            </Label>
+                            <div className="flex items-center gap-2 mt-1">
+                              <Input
+                                id={`tat-${level}`}
+                                type="number"
+                                placeholder={formData.approvers[index]?.tatType === 'days' ? '7' : '24'}
+                                min="1"
+                                max={formData.approvers[index]?.tatType === 'days' ? '30' : '720'}
+                                value={formData.approvers[index]?.tat || ''}
+                                onChange={(e) => {
+                                  const newApprovers = [...formData.approvers];
+                                  newApprovers[index] = {
+                                    ...newApprovers[index],
+                                    tat: parseInt(e.target.value) || '',
+                                    level: level,
+                                    tatType: formData.approvers[index]?.tatType || 'hours'
+                                  };
+                                  updateFormData('approvers', newApprovers);
+                                }}
+                                className="h-10 border-2 border-gray-300 focus:border-blue-500 flex-1"
+                                data-testid={`approval-workflow-approver-${level}-tat-input`}
+                              />
+                              <Select
+                                value={formData.approvers[index]?.tatType || 'hours'}
+                                onValueChange={(value) => {
+                                  const newApprovers = [...formData.approvers];
+                                  newApprovers[index] = {
+                                    ...newApprovers[index],
+                                    tatType: value as 'hours' | 'days',
+                                    level: level,
+                                    tat: ''
+                                  };
+                                  updateFormData('approvers', newApprovers);
+                                }}
+                                data-testid={`approval-workflow-approver-${level}-tat-type-select`}
+                              >
+                                <SelectTrigger className="w-20 h-10 border-2 border-gray-300">
+                                  <SelectValue />
+                                </SelectTrigger>
+                                <SelectContent>
+                                  <SelectItem value="hours">Hours</SelectItem>
+                                  <SelectItem value="days">Days</SelectItem>
+                                </SelectContent>
+                              </Select>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </CardContent>
+        </Card>
+      </div>
+    </motion.div>
+  );
+}
+
diff --git a/src/components/workflow/CreateRequest/BasicInformationStep.tsx b/src/components/workflow/CreateRequest/BasicInformationStep.tsx
new file mode 100644
index 0000000..854fd3a
--- /dev/null
+++ b/src/components/workflow/CreateRequest/BasicInformationStep.tsx
@@ -0,0 +1,225 @@
+import { motion } from 'framer-motion';
+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 { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
+import { Badge } from '@/components/ui/badge';
+import { FileText, Zap, Clock } from 'lucide-react';
+import { FormData, RequestTemplate } from '@/hooks/useCreateRequestForm';
+
+interface BasicInformationStepProps {
+  formData: FormData;
+  selectedTemplate: RequestTemplate | null;
+  updateFormData: (field: keyof FormData, value: any) => void;
+}
+
+/**
+ * Component: BasicInformationStep
+ * 
+ * Purpose: Step 2 - Basic information form (title, description, priority)
+ * 
+ * Features:
+ * - Request title and description inputs
+ * - Priority selection (Express/Standard)
+ * - Template-specific additional fields
+ * - Test IDs for testing
+ */
+export function BasicInformationStep({
+  formData,
+  selectedTemplate,
+  updateFormData
+}: BasicInformationStepProps) {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, y: -20 }}
+      className="space-y-6"
+      data-testid="basic-information-step"
+    >
+      <div className="text-center mb-8" data-testid="basic-information-header">
+        <div className="w-16 h-16 bg-gradient-to-br from-green-500 to-blue-600 rounded-2xl flex items-center justify-center mx-auto mb-4">
+          <FileText className="w-8 h-8 text-white" />
+        </div>
+        <h2 className="text-2xl font-bold text-gray-900 mb-2" data-testid="basic-information-title">
+          Basic Information
+        </h2>
+        <p className="text-gray-600" data-testid="basic-information-description">
+          Provide the essential details for your {selectedTemplate?.name || 'request'}.
+        </p>
+      </div>
+
+      <div className="max-w-2xl mx-auto space-y-6" data-testid="basic-information-form">
+        <div data-testid="basic-information-title-field">
+          <Label htmlFor="title" className="text-base font-semibold">Request Title *</Label>
+          <p className="text-sm text-gray-600 mb-3">
+            Be specific and descriptive. This will be visible to all participants.
+          </p>
+          <Input
+            id="title"
+            placeholder="e.g., Approval on new office location"
+            value={formData.title}
+            onChange={(e) => updateFormData('title', e.target.value)}
+            className="text-base h-12 border-2 border-gray-300 focus:border-blue-500 bg-white shadow-sm"
+            data-testid="basic-information-title-input"
+          />
+        </div>
+        
+        <div data-testid="basic-information-description-field">
+          <Label htmlFor="description" className="text-base font-semibold">Detailed Description *</Label>
+          <p className="text-sm text-gray-600 mb-3">
+            Explain what you need approval for, why it's needed, and any relevant background information.
+          </p>
+          <Textarea
+            id="description"
+            placeholder="Provide comprehensive details about your request including scope, objectives, expected outcomes, and any supporting context that will help approvers make an informed decision."
+            className="min-h-[120px] text-base border-2 border-gray-300 focus:border-blue-500 bg-white shadow-sm resize-none"
+            value={formData.description}
+            onChange={(e) => updateFormData('description', e.target.value)}
+            data-testid="basic-information-description-textarea"
+          />
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6" data-testid="basic-information-priority-section">
+          <div data-testid="basic-information-priority-field">
+            <Label className="text-base font-semibold">Priority Level *</Label>
+            <p className="text-sm text-gray-600 mb-2">
+              select priority for your request
+            </p>
+            <RadioGroup
+              value={formData.priority || ''}
+              onValueChange={(value) => updateFormData('priority', value)}
+              data-testid="basic-information-priority-radio-group"
+            >
+              <div 
+                className={`flex items-center space-x-3 p-3 rounded-lg border-2 cursor-pointer transition-all ${
+                  formData.priority === 'express' 
+                    ? 'border-red-500 bg-red-100' 
+                    : 'border-red-200 bg-red-50 hover:bg-red-100'
+                }`}
+                onClick={() => updateFormData('priority', 'express')}
+                data-testid="basic-information-priority-express-option"
+              >
+                <RadioGroupItem value="express" id="express" />
+                <div className="flex-1">
+                  <div className="flex items-center gap-2 mb-1">
+                    <Zap className="w-4 h-4 text-red-600" />
+                    <Label htmlFor="express" className="font-medium text-red-900 cursor-pointer">Express</Label>
+                    <Badge variant="destructive" className="text-xs">URGENT</Badge>
+                  </div>
+                  <p className="text-xs text-red-700">
+                    Includes calendar days in TAT - faster processing timeline
+                  </p>
+                </div>
+              </div>
+              <div 
+                className={`flex items-center space-x-3 p-3 rounded-lg border cursor-pointer transition-all ${
+                  formData.priority === 'standard' 
+                    ? 'border-blue-500 bg-blue-50' 
+                    : 'border-gray-200 hover:bg-gray-50'
+                }`}
+                onClick={() => updateFormData('priority', 'standard')}
+                data-testid="basic-information-priority-standard-option"
+              >
+                <RadioGroupItem value="standard" id="standard" />
+                <div className="flex-1">
+                  <div className="flex items-center gap-2 mb-1">
+                    <Clock className="w-4 h-4 text-blue-600" />
+                    <Label htmlFor="standard" className="font-medium text-blue-900 cursor-pointer">Standard</Label>
+                    <Badge variant="secondary" className="text-xs">DEFAULT</Badge>
+                  </div>
+                  <p className="text-xs text-gray-600">
+                    Includes working days in TAT - regular processing timeline
+                  </p>
+                </div>
+              </div>
+            </RadioGroup>
+          </div>
+        </div>
+
+        {/* Template-specific fields */}
+        {(selectedTemplate?.fields.amount || selectedTemplate?.fields.vendor || selectedTemplate?.fields.timeline || selectedTemplate?.fields.impact) && (
+          <div className="border-t pt-6" data-testid="basic-information-additional-details">
+            <h3 className="text-lg font-semibold text-gray-900 mb-4">Additional Details</h3>
+            <div className="space-y-6">
+              {selectedTemplate?.fields.amount && (
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-4" data-testid="basic-information-amount-field">
+                  <div className="md:col-span-2">
+                    <Label htmlFor="amount" className="text-base font-semibold">Budget Amount</Label>
+                    <Input
+                      id="amount"
+                      placeholder="Enter amount"
+                      value={formData.amount}
+                      onChange={(e) => updateFormData('amount', e.target.value)}
+                      className="text-base h-12 border-2 border-gray-300 focus:border-blue-500 bg-white shadow-sm"
+                      data-testid="basic-information-amount-input"
+                    />
+                  </div>
+                  <div>
+                    <Label className="text-base font-semibold">Currency</Label>
+                    <Select 
+                      value={formData.currency} 
+                      onValueChange={(value) => updateFormData('currency', value)}
+                      data-testid="basic-information-currency-select"
+                    >
+                      <SelectTrigger className="h-12 border-2 border-gray-300 focus:border-blue-500 bg-white shadow-sm">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="USD">USD ($)</SelectItem>
+                        <SelectItem value="EUR">EUR (€)</SelectItem>
+                        <SelectItem value="GBP">GBP (£)</SelectItem>
+                        <SelectItem value="INR">INR (₹)</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+              )}
+
+              {selectedTemplate?.fields.vendor && (
+                <div data-testid="basic-information-vendor-field">
+                  <Label htmlFor="vendor" className="text-base font-semibold">Vendor/Supplier</Label>
+                  <Input
+                    id="vendor"
+                    placeholder="Enter vendor or supplier name"
+                    value={formData.vendor}
+                    onChange={(e) => updateFormData('vendor', e.target.value)}
+                    className="text-base h-12 border-2 border-gray-300 focus:border-blue-500 bg-white shadow-sm"
+                    data-testid="basic-information-vendor-input"
+                  />
+                </div>
+              )}
+
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <div data-testid="basic-information-cost-center-field">
+                  <Label htmlFor="costCenter" className="text-base font-semibold">Cost Center</Label>
+                  <Input
+                    id="costCenter"
+                    placeholder="e.g., Marketing, IT, Operations"
+                    value={formData.costCenter}
+                    onChange={(e) => updateFormData('costCenter', e.target.value)}
+                    className="text-base h-12 border-2 border-gray-300 focus:border-blue-500 bg-white shadow-sm"
+                    data-testid="basic-information-cost-center-input"
+                  />
+                </div>
+                <div data-testid="basic-information-project-field">
+                  <Label htmlFor="project" className="text-base font-semibold">Related Project</Label>
+                  <Input
+                    id="project"
+                    placeholder="Associated project name or code"
+                    value={formData.project}
+                    onChange={(e) => updateFormData('project', e.target.value)}
+                    className="text-base h-12 border-2 border-gray-300 focus:border-blue-500 bg-white shadow-sm"
+                    data-testid="basic-information-project-input"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </motion.div>
+  );
+}
+
diff --git a/src/components/workflow/CreateRequest/DocumentsStep.tsx b/src/components/workflow/CreateRequest/DocumentsStep.tsx
new file mode 100644
index 0000000..aefe4f6
--- /dev/null
+++ b/src/components/workflow/CreateRequest/DocumentsStep.tsx
@@ -0,0 +1,307 @@
+import { motion } from 'framer-motion';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Upload, FileText, Eye, X, Plus } from 'lucide-react';
+
+interface DocumentPolicy {
+  maxFileSizeMB: number;
+  allowedFileTypes: string[];
+}
+
+interface DocumentsStepProps {
+  documentPolicy: DocumentPolicy;
+  isEditing: boolean;
+  documents: File[];
+  existingDocuments: any[];
+  documentsToDelete: string[];
+  onDocumentsChange: (documents: File[]) => void;
+  onExistingDocumentsChange: (documents: any[]) => void;
+  onDocumentsToDeleteChange: (ids: string[]) => void;
+  onPreviewDocument: (doc: any, isExisting: boolean) => void;
+  onDocumentErrors?: (errors: Array<{ fileName: string; reason: string }>) => void;
+  fileInputRef: React.RefObject<HTMLInputElement>;
+}
+
+/**
+ * Component: DocumentsStep
+ * 
+ * Purpose: Step 5 - Document upload and management
+ * 
+ * Features:
+ * - File upload with validation
+ * - Preview existing documents
+ * - Delete documents
+ * - Test IDs for testing
+ */
+export function DocumentsStep({
+  documentPolicy,
+  isEditing,
+  documents,
+  existingDocuments,
+  documentsToDelete,
+  onDocumentsChange,
+  onExistingDocumentsChange,
+  onDocumentsToDeleteChange,
+  onPreviewDocument,
+  onDocumentErrors,
+  fileInputRef
+}: DocumentsStepProps) {
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const files = Array.from(event.target.files || []);
+    if (files.length === 0) return;
+
+    // Validate files
+    const maxSizeBytes = documentPolicy.maxFileSizeMB * 1024 * 1024;
+    const validationErrors: Array<{ fileName: string; reason: string }> = [];
+    const validFiles: File[] = [];
+
+    files.forEach(file => {
+      // Check file size
+      if (file.size > maxSizeBytes) {
+        validationErrors.push({
+          fileName: file.name,
+          reason: `File size exceeds the maximum allowed size of ${documentPolicy.maxFileSizeMB}MB. Current size: ${(file.size / (1024 * 1024)).toFixed(2)}MB`
+        });
+        return;
+      }
+
+      // Check file extension
+      const fileName = file.name.toLowerCase();
+      const fileExtension = fileName.substring(fileName.lastIndexOf('.') + 1);
+      
+      if (!documentPolicy.allowedFileTypes.includes(fileExtension)) {
+        validationErrors.push({
+          fileName: file.name,
+          reason: `File type "${fileExtension}" is not allowed. Allowed types: ${documentPolicy.allowedFileTypes.join(', ')}`
+        });
+        return;
+      }
+
+      validFiles.push(file);
+    });
+
+    // Update parent with valid files
+    if (validFiles.length > 0) {
+      onDocumentsChange([...documents, ...validFiles]);
+    }
+
+    // Show errors if any
+    if (validationErrors.length > 0 && onDocumentErrors) {
+      onDocumentErrors(validationErrors);
+    }
+
+    // Reset file input
+    if (event.target) {
+      event.target.value = '';
+    }
+  };
+
+  const handleRemove = (index: number) => {
+    const newDocs = documents.filter((_, i) => i !== index);
+    onDocumentsChange(newDocs);
+  };
+
+  const handleDeleteExisting = (docId: string) => {
+    onDocumentsToDeleteChange([...documentsToDelete, docId]);
+  };
+
+  const canPreview = (doc: any, isExisting: boolean = false): boolean => {
+    if (isExisting) {
+      const type = (doc.fileType || doc.file_type || '').toLowerCase();
+      const name = (doc.originalFileName || doc.fileName || '').toLowerCase();
+      return type.includes('image') || type.includes('pdf') ||
+             name.endsWith('.jpg') || name.endsWith('.jpeg') ||
+             name.endsWith('.png') || name.endsWith('.gif') ||
+             name.endsWith('.pdf');
+    } else {
+      const type = (doc.type || '').toLowerCase();
+      const name = (doc.name || '').toLowerCase();
+      return type.includes('image') || type.includes('pdf') ||
+             name.endsWith('.jpg') || name.endsWith('.jpeg') ||
+             name.endsWith('.png') || name.endsWith('.gif') ||
+             name.endsWith('.pdf');
+    }
+  };
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, y: -20 }}
+      className="space-y-6"
+      data-testid="documents-step"
+    >
+      <div className="text-center mb-8" data-testid="documents-header">
+        <div className="w-16 h-16 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-2xl flex items-center justify-center mx-auto mb-4">
+          <Upload className="w-8 h-8 text-white" />
+        </div>
+        <h2 className="text-2xl font-bold text-gray-900 mb-2" data-testid="documents-title">
+          Documents & Attachments
+        </h2>
+        <p className="text-gray-600" data-testid="documents-description">
+          Upload supporting documents, files, and any additional materials for your request.
+        </p>
+      </div>
+
+      <div className="max-w-2xl mx-auto space-y-6" data-testid="documents-content">
+        <Card data-testid="documents-upload-card">
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2" data-testid="documents-upload-title">
+              <FileText className="w-5 h-5" />
+              File Upload
+            </CardTitle>
+            <CardDescription>
+              Attach supporting documents. Max {documentPolicy.maxFileSizeMB}MB per file. Allowed types: {documentPolicy.allowedFileTypes.join(', ')}
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center hover:border-gray-400 transition-colors" data-testid="documents-upload-area">
+              <Upload className="h-12 w-12 mx-auto mb-4 text-gray-400" />
+              <h3 className="text-lg font-semibold text-gray-900 mb-2">Upload Files</h3>
+              <p className="text-gray-600 mb-4">
+                Drag and drop files here, or click to browse
+              </p>
+              <input
+                type="file"
+                multiple
+                accept={documentPolicy.allowedFileTypes.map(ext => `.${ext}`).join(',')}
+                onChange={handleFileChange}
+                className="hidden"
+                id="file-upload"
+                ref={fileInputRef}
+                data-testid="documents-file-input"
+              />
+              <Button 
+                variant="outline" 
+                size="lg" 
+                type="button" 
+                onClick={() => fileInputRef.current?.click()}
+                data-testid="documents-browse-button"
+              >
+                <Plus className="w-4 h-4 mr-2" />
+                Browse Files
+              </Button>
+              <p className="text-xs text-gray-500 mt-2">
+                Supported formats: {documentPolicy.allowedFileTypes.map(ext => ext.toUpperCase()).join(', ')} (Max {documentPolicy.maxFileSizeMB}MB per file)
+              </p>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Existing Documents */}
+        {isEditing && existingDocuments.length > 0 && (
+          <Card data-testid="documents-existing-card">
+            <CardHeader>
+              <CardTitle className="flex items-center justify-between" data-testid="documents-existing-title">
+                <span>Existing Documents</span>
+                <Badge variant="secondary" data-testid="documents-existing-count">
+                  {existingDocuments.filter(d => !documentsToDelete.includes(d.documentId || d.document_id || '')).length} file{existingDocuments.filter(d => !documentsToDelete.includes(d.documentId || d.document_id || '')).length !== 1 ? 's' : ''}
+                </Badge>
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-3" data-testid="documents-existing-list">
+                {existingDocuments.map((doc: any) => {
+                  const docId = doc.documentId || doc.document_id || '';
+                  const isDeleted = documentsToDelete.includes(docId);
+                  if (isDeleted) return null;
+                  
+                  return (
+                    <div key={docId} className="flex items-center justify-between p-4 rounded-lg border bg-gray-50" data-testid={`documents-existing-${docId}`}>
+                      <div className="flex items-center gap-3">
+                        <div className="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
+                          <FileText className="h-5 w-5 text-blue-600" />
+                        </div>
+                        <div>
+                          <p className="font-medium text-gray-900">{doc.originalFileName || doc.fileName || 'Document'}</p>
+                          <div className="flex items-center gap-3 text-sm text-gray-600">
+                            <span>{doc.fileSize ? (Number(doc.fileSize) / (1024 * 1024)).toFixed(2) + ' MB' : 'Unknown size'}</span>
+                          </div>
+                        </div>
+                      </div>
+                      <div className="flex items-center gap-2">
+                        {canPreview(doc, true) && (
+                          <Button 
+                            variant="ghost" 
+                            size="sm" 
+                            onClick={() => onPreviewDocument(doc, true)}
+                            data-testid={`documents-existing-${docId}-preview`}
+                          >
+                            <Eye className="h-4 w-4" />
+                          </Button>
+                        )}
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          onClick={() => handleDeleteExisting(docId)}
+                          data-testid={`documents-existing-${docId}-delete`}
+                        >
+                          <X className="h-4 w-4 text-red-600" />
+                        </Button>
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            </CardContent>
+          </Card>
+        )}
+
+        {/* New Documents */}
+        {documents.length > 0 && (
+          <Card data-testid="documents-new-card">
+            <CardHeader>
+              <CardTitle className="flex items-center justify-between" data-testid="documents-new-title">
+                <span>New Files to Upload</span>
+                <Badge variant="secondary" data-testid="documents-new-count">
+                  {documents.length} file{documents.length !== 1 ? 's' : ''}
+                </Badge>
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-3" data-testid="documents-new-list">
+                {documents.map((file, index) => (
+                  <div key={index} className="flex items-center justify-between p-4 bg-gray-50 rounded-lg border" data-testid={`documents-new-${index}`}>
+                    <div className="flex items-center gap-3">
+                      <div className="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
+                        <FileText className="h-5 w-5 text-blue-600" />
+                      </div>
+                      <div>
+                        <p className="font-medium text-gray-900">{file.name}</p>
+                        <div className="flex items-center gap-3 text-sm text-gray-600">
+                          <span>{(file.size / (1024 * 1024)).toFixed(2)} MB</span>
+                        </div>
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      {canPreview(file, false) && (
+                        <Button 
+                          variant="ghost" 
+                          size="sm" 
+                          onClick={() => onPreviewDocument(file, false)}
+                          data-testid={`documents-new-${index}-preview`}
+                        >
+                          <Eye className="h-4 w-4" />
+                        </Button>
+                      )}
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => handleRemove(index)}
+                        data-testid={`documents-new-${index}-remove`}
+                      >
+                        <X className="h-4 w-4" />
+                      </Button>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+        )}
+      </div>
+    </motion.div>
+  );
+}
+
diff --git a/src/components/workflow/CreateRequest/ParticipantsStep.tsx b/src/components/workflow/CreateRequest/ParticipantsStep.tsx
new file mode 100644
index 0000000..a80fb0a
--- /dev/null
+++ b/src/components/workflow/CreateRequest/ParticipantsStep.tsx
@@ -0,0 +1,227 @@
+import React, { useState } from 'react';
+import { motion } from 'framer-motion';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Badge } from '@/components/ui/badge';
+import { Avatar, AvatarFallback } from '@/components/ui/avatar';
+import { Eye, Info, X } from 'lucide-react';
+import { FormData } from '@/hooks/useCreateRequestForm';
+import { useUserSearch } from '@/hooks/useUserSearch';
+import { ensureUserExists } from '@/services/userApi';
+
+interface ParticipantsStepProps {
+  formData: FormData;
+  updateFormData: (field: keyof FormData, value: any) => void;
+  onValidationError: (error: { type: string; email: string; message: string }) => void;
+  initiatorEmail: string;
+}
+
+/**
+ * Component: ParticipantsStep
+ * 
+ * Purpose: Step 4 - Participants & access settings
+ * 
+ * Features:
+ * - Add spectators with @ search
+ * - Manage spectator list
+ * - Test IDs for testing
+ */
+export function ParticipantsStep({
+  formData,
+  updateFormData,
+  onValidationError,
+  initiatorEmail
+}: ParticipantsStepProps) {
+  const [emailInput, setEmailInput] = useState('');
+  const { searchResults, searchLoading, searchUsersDebounced, clearSearch, ensureUser } = useUserSearch();
+
+  const handleEmailInputChange = (value: string) => {
+    setEmailInput(value);
+    if (!value || !value.startsWith('@') || value.length < 2) {
+      clearSearch();
+      return;
+    }
+    searchUsersDebounced(value, 10);
+  };
+
+  const handleAddSpectator = async (user?: any) => {
+    if (user) {
+      // Add from search results
+      if (user.email.toLowerCase() === initiatorEmail.toLowerCase()) {
+        onValidationError({
+          type: 'self-assign',
+          email: user.email,
+          message: 'You cannot add yourself as a spectator.'
+        });
+        return;
+      }
+
+      try {
+        const dbUser = await ensureUser(user);
+        const spectator = {
+          id: dbUser.userId,
+          userId: dbUser.userId,
+          name: dbUser.displayName || user.email.split('@')[0],
+          email: dbUser.email,
+          avatar: (dbUser.displayName || dbUser.email).substring(0, 2).toUpperCase(),
+          role: 'Spectator',
+          department: dbUser.department || '',
+          level: 1,
+          canClose: false
+        };
+        const updatedSpectators = [...formData.spectators, spectator];
+        updateFormData('spectators', updatedSpectators);
+        setEmailInput('');
+        clearSearch();
+      } catch (err) {
+        onValidationError({
+          type: 'error',
+          email: user.email,
+          message: 'Failed to validate user. Please try again.'
+        });
+      }
+    } else if (emailInput && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(emailInput)) {
+      // Add by email directly (will be validated)
+      if (emailInput.toLowerCase() === initiatorEmail.toLowerCase()) {
+        onValidationError({
+          type: 'self-assign',
+          email: emailInput,
+          message: 'You cannot add yourself as a spectator.'
+        });
+        return;
+      }
+      // This would trigger validation in parent component
+    }
+  };
+
+  const removeSpectator = (spectatorId: string) => {
+    const updatedSpectators = formData.spectators.filter((s: any) => s.id !== spectatorId);
+    updateFormData('spectators', updatedSpectators);
+  };
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, y: -20 }}
+      className="space-y-6"
+      data-testid="participants-step"
+    >
+      <div className="text-center mb-8" data-testid="participants-header">
+        <div className="w-16 h-16 bg-gradient-to-br from-teal-500 to-green-600 rounded-2xl flex items-center justify-center mx-auto mb-4">
+          <Eye className="w-8 h-8 text-white" />
+        </div>
+        <h2 className="text-2xl font-bold text-gray-900 mb-2" data-testid="participants-title">
+          Participants & Access
+        </h2>
+        <p className="text-gray-600" data-testid="participants-description">
+          Configure additional participants and visibility settings for your request.
+        </p>
+      </div>
+
+      <div className="max-w-3xl mx-auto space-y-8" data-testid="participants-content">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+          {/* Spectators */}
+          <Card data-testid="participants-spectators-card">
+            <CardHeader>
+              <CardTitle className="flex items-center justify-between text-base" data-testid="participants-spectators-title">
+                <div className="flex items-center gap-2">
+                  <Eye className="w-4 h-4" />
+                  Spectators
+                </div>
+                <Badge variant="outline" className="text-xs" data-testid="participants-spectators-count">
+                  {formData.spectators.length}
+                </Badge>
+              </CardTitle>
+              <CardDescription>
+                Users who can view and comment but cannot approve
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="space-y-2" data-testid="participants-spectators-add-section">
+                <div className="flex items-center gap-2">
+                  <div className="relative w-full">
+                    <Input
+                      placeholder="Use @ sign to add a user"
+                      value={emailInput}
+                      onChange={(e) => handleEmailInputChange(e.target.value)}
+                      onKeyPress={async (e) => {
+                        if (e.key === 'Enter' && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(emailInput)) {
+                          e.preventDefault();
+                          await handleAddSpectator();
+                        }
+                      }}
+                      className="text-sm w-full"
+                      data-testid="participants-spectators-email-input"
+                    />
+                    {(searchLoading || searchResults.length > 0) && (
+                      <div className="absolute left-0 right-0 top-full mt-1 z-50 border rounded-md bg-white shadow-lg">
+                        {searchLoading ? (
+                          <div className="p-2 text-xs text-gray-500">Searching...</div>
+                        ) : (
+                          <ul className="max-h-56 overflow-auto divide-y">
+                            {searchResults.map(u => (
+                              <li
+                                key={u.userId}
+                                className="p-2 text-sm cursor-pointer hover:bg-gray-50"
+                                onClick={() => handleAddSpectator(u)}
+                                data-testid={`participants-spectators-search-result-${u.userId}`}
+                              >
+                                <div className="font-medium text-gray-900">{u.displayName || u.email}</div>
+                                <div className="text-xs text-gray-600">{u.email}</div>
+                              </li>
+                            ))}
+                          </ul>
+                        )}
+                      </div>
+                    )}
+                  </div>
+                  <Button
+                    size="sm"
+                    onClick={() => handleAddSpectator()}
+                    disabled={!emailInput || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(emailInput)}
+                    data-testid="participants-spectators-add-button"
+                  >
+                    Add
+                  </Button>
+                </div>
+                <p className="text-xs text-blue-600 bg-blue-50 border border-blue-200 rounded p-2 flex items-center gap-1">
+                  <Info className="w-3 h-3 flex-shrink-0" />
+                  <span>
+                    Use <span className="font-mono bg-blue-100 px-1 rounded">@</span> sign to search users, or type email directly (will be validated against organization directory)
+                  </span>
+                </p>
+              </div>
+
+              <div className="space-y-2 max-h-40 overflow-y-auto" data-testid="participants-spectators-list">
+                {formData.spectators.map((spectator) => (
+                  <div key={spectator.id} className="flex items-center justify-between p-2 bg-teal-50 rounded-lg" data-testid={`participants-spectator-${spectator.id}`}>
+                    <div className="flex items-center gap-2">
+                      <Avatar className="h-6 w-6">
+                        <AvatarFallback className="bg-teal-600 text-white text-xs">
+                          {spectator.avatar}
+                        </AvatarFallback>
+                      </Avatar>
+                      <span className="text-sm font-medium">{spectator.name}</span>
+                    </div>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => removeSpectator(spectator.id)}
+                      data-testid={`participants-spectator-${spectator.id}-remove`}
+                    >
+                      <X className="h-3 w-3" />
+                    </Button>
+                  </div>
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </motion.div>
+  );
+}
+
+
diff --git a/src/components/workflow/CreateRequest/ReviewSubmitStep.tsx b/src/components/workflow/CreateRequest/ReviewSubmitStep.tsx
new file mode 100644
index 0000000..4a9a43f
--- /dev/null
+++ b/src/components/workflow/CreateRequest/ReviewSubmitStep.tsx
@@ -0,0 +1,283 @@
+import { motion } from 'framer-motion';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Label } from '@/components/ui/label';
+import { Badge } from '@/components/ui/badge';
+import { CheckCircle, Rocket, FileText, Users, Eye, Upload, Flame, Target, TrendingUp, DollarSign } from 'lucide-react';
+import { format } from 'date-fns';
+import { FormData, RequestTemplate } from '@/hooks/useCreateRequestForm';
+
+interface ReviewSubmitStepProps {
+  formData: FormData;
+  selectedTemplate: RequestTemplate | null;
+}
+
+const getPriorityIcon = (priority: string) => {
+  switch (priority) {
+    case 'high': return <Flame className="w-4 h-4 text-red-600" />;
+    case 'medium': return <Target className="w-4 h-4 text-orange-600" />;
+    case 'low': return <TrendingUp className="w-4 h-4 text-green-600" />;
+    default: return <Target className="w-4 h-4 text-gray-600" />;
+  }
+};
+
+/**
+ * Component: ReviewSubmitStep
+ * 
+ * Purpose: Step 6 - Review and submit request
+ * 
+ * Features:
+ * - Displays all request information for review
+ * - Shows approval workflow summary
+ * - Lists participants and documents
+ * - Test IDs for testing
+ */
+export function ReviewSubmitStep({
+  formData,
+  selectedTemplate
+}: ReviewSubmitStepProps) {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, y: -20 }}
+      className="space-y-6"
+      data-testid="review-submit-step"
+    >
+      <div className="text-center mb-8" data-testid="review-submit-header">
+        <div className="w-16 h-16 bg-gradient-to-br from-green-500 to-teal-600 rounded-2xl flex items-center justify-center mx-auto mb-4">
+          <CheckCircle className="w-8 h-8 text-white" />
+        </div>
+        <h2 className="text-2xl font-bold text-gray-900 mb-2" data-testid="review-submit-title">
+          Review & Submit
+        </h2>
+        <p className="text-gray-600" data-testid="review-submit-description">
+          Please review all details before submitting your request for approval.
+        </p>
+      </div>
+
+      <div className="max-w-5xl mx-auto space-y-8" data-testid="review-submit-content">
+        {/* Request Overview */}
+        <Card className="border-2 border-green-200 bg-green-50/50" data-testid="review-submit-overview-card">
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2 text-green-900" data-testid="review-submit-overview-title">
+              <Rocket className="w-5 h-5" />
+              Request Overview
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-6">
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6" data-testid="review-submit-overview-grid">
+              <div data-testid="review-submit-overview-type">
+                <Label className="text-green-900 font-semibold">Request Type</Label>
+                <p className="text-green-800 mt-1">{selectedTemplate?.name}</p>
+                <Badge variant="outline" className="mt-2 text-xs border-green-300 text-green-700">
+                  {selectedTemplate?.category}
+                </Badge>
+              </div>
+              <div data-testid="review-submit-overview-priority">
+                <Label className="text-green-900 font-semibold">Priority</Label>
+                <div className="flex items-center gap-2 mt-1">
+                  {getPriorityIcon(formData.priority)}
+                  <span className="text-green-800 capitalize">{formData.priority}</span>
+                </div>
+              </div>
+              <div data-testid="review-submit-overview-workflow">
+                <Label className="text-green-900 font-semibold">Workflow Type</Label>
+                <p className="text-green-800 mt-1 capitalize">{formData.workflowType}</p>
+                <p className="text-sm text-green-700">{formData.approverCount || 1} Level{(formData.approverCount || 1) > 1 ? 's' : ''}</p>
+              </div>
+            </div>
+            <div data-testid="review-submit-overview-title">
+              <Label className="text-green-900 font-semibold">Request Title</Label>
+              <p className="text-green-800 font-medium mt-1 text-lg">{formData.title}</p>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Basic Information */}
+        <Card data-testid="review-submit-basic-info-card">
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2" data-testid="review-submit-basic-info-title">
+              <FileText className="w-5 h-5" />
+              Basic Information
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div data-testid="review-submit-basic-info-description">
+              <Label className="font-semibold">Description</Label>
+              <p className="text-sm text-gray-700 mt-1 p-3 bg-gray-50 rounded-lg border">
+                {formData.description}
+              </p>
+            </div>
+            {formData.amount && (
+              <div className="p-3 bg-blue-50 rounded-lg border border-blue-200" data-testid="review-submit-basic-info-financial">
+                <div className="flex items-center gap-2 mb-3">
+                  <DollarSign className="w-4 h-4 text-blue-600" />
+                  <Label className="font-semibold text-blue-900">Financial Details</Label>
+                </div>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <div>
+                    <span className="text-sm text-blue-700">Amount</span>
+                    <p className="font-semibold text-blue-900">{formData.amount} {formData.currency}</p>
+                  </div>
+                  {formData.costCenter && (
+                    <div>
+                      <span className="text-sm text-blue-700">Cost Center</span>
+                      <p className="font-medium text-blue-900">{formData.costCenter}</p>
+                    </div>
+                  )}
+                </div>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
+        {/* Approval Workflow */}
+        <Card className="border-2 border-orange-200 bg-orange-50/50" data-testid="review-submit-approval-card">
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2 text-orange-900" data-testid="review-submit-approval-title">
+              <Users className="w-5 h-5" />
+              Approval Workflow
+            </CardTitle>
+            <CardDescription className="text-orange-700">
+              Sequential approval hierarchy with TAT (Turn Around Time) for each level
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-6">
+            <div className="space-y-4" data-testid="review-submit-approval-levels">
+              {Array.from({ length: formData.approverCount || 1 }, (_, index) => {
+                const level = index + 1;
+                const isLast = level === (formData.approverCount || 1);
+                const approver = formData.approvers[index];
+                
+                return (
+                  <div key={level} className="p-4 bg-white rounded-lg border border-orange-200" data-testid={`review-submit-approval-level-${level}`}>
+                    <div className="flex items-center gap-4">
+                      <div className={`w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 ${
+                        approver?.email ? 'bg-green-600' : 'bg-gray-400'
+                      }`}>
+                        <span className="text-white font-semibold">{level}</span>
+                      </div>
+                      <div className="flex-1">
+                        <div className="flex items-center gap-2 mb-2">
+                          <span className="font-semibold text-gray-900">
+                            Approver Level {level}
+                          </span>
+                          {isLast && (
+                            <Badge variant="destructive" className="text-xs">FINAL APPROVER</Badge>
+                          )}
+                        </div>
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                          <div>
+                            <span className="text-sm text-gray-600">Email Address</span>
+                            <p className="text-sm font-medium text-gray-900">
+                              {approver?.email || 'Not assigned'}
+                            </p>
+                          </div>
+                          <div>
+                            <span className="text-sm text-gray-600">TAT (Turn Around Time)</span>
+                            <p className="text-sm font-medium text-gray-900">
+                              {approver?.tat ? 
+                                `${approver.tat} ${approver.tatType === 'days' ? 'day' : 'hour'}${approver.tat !== 1 ? 's' : ''}` 
+                                : 'Not set'
+                              }
+                            </p>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Participants & Access */}
+        <Card data-testid="review-submit-participants-card">
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2" data-testid="review-submit-participants-title">
+              <Eye className="w-5 h-5" />
+              Participants & Access Control
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            {formData.spectators.length > 0 && (
+              <div data-testid="review-submit-participants-spectators">
+                <Label className="font-semibold text-sm">Spectators ({formData.spectators.length})</Label>
+                <div className="flex flex-wrap gap-2 mt-2">
+                  {formData.spectators.map((spectator) => (
+                    <Badge key={spectator.id} variant="outline" className="text-xs" data-testid={`review-submit-spectator-${spectator.id}`}>
+                      {spectator.name} ({spectator.email})
+                    </Badge>
+                  ))}
+                </div>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
+        {/* Documents */}
+        {formData.documents.length > 0 && (
+          <Card data-testid="review-submit-documents-card">
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2" data-testid="review-submit-documents-title">
+                <Upload className="w-5 h-5" />
+                Documents & Attachments
+              </CardTitle>
+              <CardDescription>
+                {formData.documents.length} document{formData.documents.length !== 1 ? 's' : ''} attached to this request
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-3" data-testid="review-submit-documents-list">
+                {formData.documents.map((doc, index) => (
+                  <div key={index} className="flex items-center gap-3 p-3 bg-gray-50 rounded-lg border" data-testid={`review-submit-document-${index}`}>
+                    <FileText className="w-5 h-5 text-gray-500 flex-shrink-0" />
+                    <div className="flex-1 min-w-0">
+                      <p className="font-medium text-sm truncate">{doc.name}</p>
+                      <div className="flex items-center gap-3 text-xs text-gray-500 mt-1">
+                        <span>{(doc.size / (1024 * 1024)).toFixed(2)} MB</span>
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+        )}
+
+        {/* Final Confirmation */}
+        <Card className="border-2 border-blue-200 bg-blue-50/50" data-testid="review-submit-confirmation-card">
+          <CardContent className="pt-6">
+            <div className="flex items-start gap-4">
+              <CheckCircle className="w-6 h-6 text-blue-600 mt-1 flex-shrink-0" />
+              <div className="flex-1">
+                <h3 className="font-semibold text-blue-900 mb-2" data-testid="review-submit-confirmation-title">
+                  Ready to Submit Request
+                </h3>
+                <p className="text-sm text-blue-700 mb-4" data-testid="review-submit-confirmation-message">
+                  Once submitted, your request will enter the approval workflow and notifications will be sent to all relevant participants.
+                </p>
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm" data-testid="review-submit-confirmation-summary">
+                  <div>
+                    <span className="text-blue-700">Request Type:</span>
+                    <p className="font-medium text-blue-900">{selectedTemplate?.name}</p>
+                  </div>
+                  <div>
+                    <span className="text-blue-700">Approval Levels:</span>
+                    <p className="font-medium text-blue-900">{formData.approverCount || 1}</p>
+                  </div>
+                  <div>
+                    <span className="text-blue-700">Documents:</span>
+                    <p className="font-medium text-blue-900">{formData.documents.length} attached</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </motion.div>
+  );
+}
+
diff --git a/src/components/workflow/CreateRequest/TemplateSelectionStep.tsx b/src/components/workflow/CreateRequest/TemplateSelectionStep.tsx
new file mode 100644
index 0000000..3d237cb
--- /dev/null
+++ b/src/components/workflow/CreateRequest/TemplateSelectionStep.tsx
@@ -0,0 +1,205 @@
+import { motion, AnimatePresence } from 'framer-motion';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Label } from '@/components/ui/label';
+import { Separator } from '@/components/ui/separator';
+import { Check, Clock, Users, Info, Flame, Target, TrendingUp } from 'lucide-react';
+import { RequestTemplate } from '@/hooks/useCreateRequestForm';
+
+interface TemplateSelectionStepProps {
+  templates: RequestTemplate[];
+  selectedTemplate: RequestTemplate | null;
+  onSelectTemplate: (template: RequestTemplate) => void;
+}
+
+const getPriorityIcon = (priority: string) => {
+  switch (priority) {
+    case 'high': return <Flame className="w-4 h-4 text-red-600" />;
+    case 'medium': return <Target className="w-4 h-4 text-orange-600" />;
+    case 'low': return <TrendingUp className="w-4 h-4 text-green-600" />;
+    default: return <Target className="w-4 h-4 text-gray-600" />;
+  }
+};
+
+/**
+ * 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
+}: TemplateSelectionStepProps) {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, y: -20 }}
+      className="min-h-full flex flex-col items-center justify-center py-8"
+      data-testid="template-selection-step"
+    >
+      {/* 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
+        </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.
+        </p>
+      </div>
+
+      {/* Template Cards Grid */}
+      <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'
+                    }`}
+                    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`}
+                >
+                  {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>
+                  </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>
+                </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} days</p>
+                  </div>
+                  <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">Common Approvers</Label>
+                  <div className="flex flex-wrap gap-2 mt-2">
+                    {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>
+                    ))}
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </motion.div>
+  );
+}
+
diff --git a/src/components/workflow/CreateRequest/WizardFooter.tsx b/src/components/workflow/CreateRequest/WizardFooter.tsx
new file mode 100644
index 0000000..e1e2a61
--- /dev/null
+++ b/src/components/workflow/CreateRequest/WizardFooter.tsx
@@ -0,0 +1,117 @@
+import { Button } from '@/components/ui/button';
+import { ArrowLeft, ArrowRight, Rocket, Loader2 } from 'lucide-react';
+
+interface WizardFooterProps {
+  currentStep: number;
+  totalSteps: number;
+  isStepValid: boolean;
+  onPrev: () => void;
+  onNext: () => void;
+  onSubmit: () => void;
+  onSaveDraft: () => void;
+  submitting: boolean;
+  savingDraft: boolean;
+  loadingDraft: boolean;
+  isEditing: boolean;
+}
+
+/**
+ * Component: WizardFooter
+ * 
+ * Purpose: Navigation footer for wizard with Previous/Next/Submit buttons
+ * 
+ * Features:
+ * - Fixed on mobile for better keyboard handling
+ * - Shows loading states
+ * - Test IDs for testing
+ */
+export function WizardFooter({
+  currentStep,
+  totalSteps,
+  isStepValid,
+  onPrev,
+  onNext,
+  onSubmit,
+  onSaveDraft,
+  submitting,
+  savingDraft,
+  loadingDraft,
+  isEditing
+}: WizardFooterProps) {
+  return (
+    <div 
+      className="fixed sm:relative bottom-0 left-0 right-0 bg-white border-t border-gray-200 px-3 sm:px-6 py-3 sm:py-4 flex-shrink-0 shadow-lg sm:shadow-none z-50"
+      data-testid="wizard-footer"
+    >
+      <div className="flex flex-col sm:flex-row justify-between items-stretch sm:items-center gap-2 sm:gap-4 max-w-6xl mx-auto">
+        {/* Previous Button */}
+        <Button
+          variant="outline"
+          onClick={onPrev}
+          disabled={currentStep === 1}
+          size="sm"
+          className="sm:size-lg order-2 sm:order-1"
+          data-testid="wizard-footer-prev-button"
+        >
+          <ArrowLeft className="h-3 w-3 sm:h-4 sm:w-4 mr-1 sm:mr-2" />
+          <span className="text-xs sm:text-sm">Previous</span>
+        </Button>
+
+        {/* Action Buttons */}
+        <div className="flex gap-2 sm:gap-3 order-1 sm:order-2" data-testid="wizard-footer-actions">
+          <Button 
+            variant="outline" 
+            onClick={onSaveDraft} 
+            size="sm"
+            className="sm:size-lg flex-1 sm:flex-none text-xs sm:text-sm" 
+            disabled={loadingDraft || submitting || savingDraft}
+            data-testid="wizard-footer-save-draft-button"
+          >
+            {savingDraft ? (
+              <>
+                <Loader2 className="h-3 w-3 sm:h-4 sm:w-4 mr-1 sm:mr-2 animate-spin" />
+                {isEditing ? 'Updating...' : 'Saving...'}
+              </>
+            ) : (
+              isEditing ? 'Update Draft' : 'Save Draft'
+            )}
+          </Button>
+          {currentStep === totalSteps ? (
+            <Button
+              onClick={onSubmit}
+              disabled={!isStepValid || loadingDraft || submitting || savingDraft}
+              size="sm"
+              className="sm:size-lg bg-green-600 hover:bg-green-700 flex-1 sm:flex-none sm:px-8 text-xs sm:text-sm"
+              data-testid="wizard-footer-submit-button"
+            >
+              {submitting ? (
+                <>
+                  <Loader2 className="h-3 w-3 sm:h-4 sm:w-4 mr-1 sm:mr-2 animate-spin" />
+                  Submitting...
+                </>
+              ) : (
+                <>
+                  <Rocket className="h-3 w-3 sm:h-4 sm:w-4 mr-1 sm:mr-2" />
+                  Submit
+                </>
+              )}
+            </Button>
+          ) : (
+            <Button
+              onClick={onNext}
+              disabled={!isStepValid}
+              size="sm"
+              className="sm:size-lg flex-1 sm:flex-none sm:px-8 text-xs sm:text-sm"
+              data-testid="wizard-footer-next-button"
+            >
+              <span className="hidden sm:inline">Next Step</span>
+              <span className="sm:hidden">Next</span>
+              <ArrowRight className="h-3 w-3 sm:h-4 sm:w-4 ml-1 sm:ml-2" />
+            </Button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
diff --git a/src/components/workflow/CreateRequest/WizardStepper.tsx b/src/components/workflow/CreateRequest/WizardStepper.tsx
new file mode 100644
index 0000000..d25284a
--- /dev/null
+++ b/src/components/workflow/CreateRequest/WizardStepper.tsx
@@ -0,0 +1,119 @@
+import { Check } from 'lucide-react';
+
+interface WizardStepperProps {
+  currentStep: number;
+  totalSteps: number;
+  stepNames: string[];
+}
+
+/**
+ * Component: WizardStepper
+ * 
+ * Purpose: Displays progress indicator for multi-step wizard
+ * 
+ * Features:
+ * - Shows current step and progress percentage
+ * - Mobile-optimized display
+ * - Test IDs for testing
+ */
+export function WizardStepper({ currentStep, totalSteps, stepNames }: WizardStepperProps) {
+  const progressPercentage = Math.round((currentStep / totalSteps) * 100);
+
+  return (
+    <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">
+        {/* 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 
+                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"
+              >
+                {currentStep}
+              </div>
+              <div>
+                <p className="text-xs font-semibold text-gray-900" data-testid="wizard-stepper-mobile-step-name">
+                  {stepNames[currentStep - 1]}
+                </p>
+                <p className="text-xs text-gray-600" data-testid="wizard-stepper-mobile-step-info">
+                  Step {currentStep} of {totalSteps}
+                </p>
+              </div>
+            </div>
+            <div className="text-right">
+              <p className="text-xs font-medium text-green-600" data-testid="wizard-stepper-mobile-progress">
+                {progressPercentage}%
+              </p>
+            </div>
+          </div>
+          {/* Progress bar */}
+          <div 
+            className="w-full bg-gray-200 h-1.5 rounded-full overflow-hidden"
+            data-testid="wizard-stepper-mobile-progress-bar"
+          >
+            <div 
+              className="bg-green-600 h-full transition-all duration-300"
+              style={{ width: `${progressPercentage}%` }}
+              data-testid="wizard-stepper-mobile-progress-fill"
+            />
+          </div>
+        </div>
+
+        {/* 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">
+            {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' 
+                      : 'bg-gray-200 text-gray-600'
+                  }`}
+                  data-testid={`wizard-stepper-desktop-step-${index + 1}-indicator`}
+                >
+                  {index + 1 < currentStep ? (
+                    <Check className="w-4 h-4" />
+                  ) : (
+                    index + 1
+                  )}
+                </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'
+                    }`}
+                    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"
+            data-testid="wizard-stepper-desktop-labels"
+          >
+            {stepNames.map((step, index) => (
+              <span 
+                key={index} 
+                className={`${
+                  index + 1 === currentStep ? 'font-semibold text-blue-600' : ''
+                }`}
+                data-testid={`wizard-stepper-desktop-label-${index + 1}`}
+              >
+                {step}
+              </span>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
diff --git a/src/components/workflow/CreateRequest/index.ts b/src/components/workflow/CreateRequest/index.ts
new file mode 100644
index 0000000..dda9887
--- /dev/null
+++ b/src/components/workflow/CreateRequest/index.ts
@@ -0,0 +1,9 @@
+export { WizardStepper } from './WizardStepper';
+export { WizardFooter } from './WizardFooter';
+export { TemplateSelectionStep } from './TemplateSelectionStep';
+export { BasicInformationStep } from './BasicInformationStep';
+export { ApprovalWorkflowStep } from './ApprovalWorkflowStep';
+export { ParticipantsStep } from './ParticipantsStep';
+export { DocumentsStep } from './DocumentsStep';
+export { ReviewSubmitStep } from './ReviewSubmitStep';
+
diff --git a/src/hooks/useCreateRequestForm.ts b/src/hooks/useCreateRequestForm.ts
new file mode 100644
index 0000000..83736a1
--- /dev/null
+++ b/src/hooks/useCreateRequestForm.ts
@@ -0,0 +1,315 @@
+import { useState, useEffect } from 'react';
+import { useAuth } from '@/contexts/AuthContext';
+import { getWorkflowDetails } from '@/services/workflowApi';
+import { getAllConfigurations, AdminConfiguration } from '@/services/adminApi';
+
+export interface RequestTemplate {
+  id: string;
+  name: string;
+  description: string;
+  category: string;
+  icon: React.ComponentType<any>;
+  estimatedTime: string;
+  commonApprovers: string[];
+  suggestedSLA: number;
+  priority: 'high' | 'medium' | 'low';
+  fields: {
+    amount?: boolean;
+    vendor?: boolean;
+    timeline?: boolean;
+    impact?: boolean;
+  };
+}
+
+export interface FormData {
+  template: string;
+  title: string;
+  description: string;
+  category: string;
+  priority: string;
+  urgency: string;
+  businessImpact: string;
+  amount: string;
+  currency: string;
+  vendor: string;
+  timeline: string;
+  slaTemplate: string;
+  slaHours: number;
+  customSlaHours: number;
+  slaEndDate: Date | undefined;
+  expectedCompletionDate: Date | undefined;
+  breachEscalation: boolean;
+  reminderSchedule: '25' | '50' | '75';
+  workflowType: 'sequential' | 'parallel';
+  requiresAllApprovals: boolean;
+  escalationEnabled: boolean;
+  reminderEnabled: boolean;
+  minimumLevel: number;
+  maxLevel: number;
+  approvers: any[];
+  approverCount: number;
+  spectators: any[];
+  ccList: any[];
+  invitedUsers: any[];
+  allowComments: boolean;
+  allowDocumentUpload: boolean;
+  documents: File[];
+  tags: string[];
+  relatedRequests: string[];
+  costCenter: string;
+  project: string;
+}
+
+const initialFormData: FormData = {
+  template: '',
+  title: '',
+  description: '',
+  category: '',
+  priority: '',
+  urgency: '',
+  businessImpact: '',
+  amount: '',
+  currency: 'USD',
+  vendor: '',
+  timeline: '',
+  slaTemplate: '',
+  slaHours: 0,
+  customSlaHours: 0,
+  slaEndDate: undefined,
+  expectedCompletionDate: undefined,
+  breachEscalation: true,
+  reminderSchedule: '50',
+  workflowType: 'sequential',
+  requiresAllApprovals: true,
+  escalationEnabled: true,
+  reminderEnabled: true,
+  minimumLevel: 1,
+  maxLevel: 1,
+  approvers: [],
+  approverCount: 1,
+  spectators: [],
+  ccList: [],
+  invitedUsers: [],
+  allowComments: true,
+  allowDocumentUpload: true,
+  documents: [],
+  tags: [],
+  relatedRequests: [],
+  costCenter: '',
+  project: ''
+};
+
+export interface SystemPolicy {
+  maxApprovalLevels: number;
+  maxParticipants: number;
+  allowSpectators: boolean;
+  maxSpectators: number;
+}
+
+export interface DocumentPolicy {
+  maxFileSizeMB: number;
+  allowedFileTypes: string[];
+}
+
+/**
+ * Custom Hook: useCreateRequestForm
+ * 
+ * Purpose: Manages form state, policies, and draft loading for CreateRequest
+ * 
+ * Responsibilities:
+ * - Manages form data state
+ * - Loads system and document policies
+ * - Handles draft loading in edit mode
+ * - Provides form data update functions
+ */
+export function useCreateRequestForm(
+  isEditing: boolean,
+  editRequestId: string,
+  templates: RequestTemplate[]
+) {
+  const { user } = useAuth();
+  const [formData, setFormData] = useState<FormData>(initialFormData);
+  const [selectedTemplate, setSelectedTemplate] = useState<RequestTemplate | null>(null);
+  const [loadingDraft, setLoadingDraft] = useState(isEditing);
+  const [systemPolicy, setSystemPolicy] = useState<SystemPolicy>({
+    maxApprovalLevels: 10,
+    maxParticipants: 50,
+    allowSpectators: true,
+    maxSpectators: 20
+  });
+  const [documentPolicy, setDocumentPolicy] = useState<DocumentPolicy>({
+    maxFileSizeMB: 10,
+    allowedFileTypes: ['pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'jpg', 'jpeg', 'png', 'gif']
+  });
+  const [existingDocuments, setExistingDocuments] = useState<any[]>([]);
+
+  // Load policies on mount
+  useEffect(() => {
+    const loadPolicies = async () => {
+      try {
+        // Load document policy
+        const docConfigs = await getAllConfigurations('DOCUMENT_POLICY');
+        const docConfigMap: Record<string, string> = {};
+        docConfigs.forEach((c: AdminConfiguration) => {
+          docConfigMap[c.configKey] = c.configValue;
+        });
+
+        const maxFileSizeMB = parseInt(docConfigMap['MAX_FILE_SIZE_MB'] || '10');
+        const allowedFileTypesStr = docConfigMap['ALLOWED_FILE_TYPES'] || 'pdf,doc,docx,xls,xlsx,ppt,pptx,jpg,jpeg,png,gif';
+        const allowedFileTypes = allowedFileTypesStr.split(',').map(ext => ext.trim().toLowerCase());
+
+        setDocumentPolicy({
+          maxFileSizeMB,
+          allowedFileTypes
+        });
+
+        // Load system policy
+        const workflowConfigs = await getAllConfigurations('WORKFLOW_SHARING');
+        const tatConfigs = await getAllConfigurations('TAT_SETTINGS');
+        const allConfigs = [...workflowConfigs, ...tatConfigs];
+        const configMap: Record<string, string> = {};
+        allConfigs.forEach((c: AdminConfiguration) => {
+          configMap[c.configKey] = c.configValue;
+        });
+
+        setSystemPolicy({
+          maxApprovalLevels: parseInt(configMap['MAX_APPROVAL_LEVELS'] || '10'),
+          maxParticipants: parseInt(configMap['MAX_PARTICIPANTS_PER_REQUEST'] || '50'),
+          allowSpectators: configMap['ALLOW_ADD_SPECTATOR']?.toLowerCase() === 'true',
+          maxSpectators: parseInt(configMap['MAX_SPECTATORS_PER_REQUEST'] || '20')
+        });
+      } catch (error) {
+        console.error('Failed to load policies:', error);
+      }
+    };
+
+    loadPolicies();
+  }, []);
+
+  // Load draft data when in edit mode
+  useEffect(() => {
+    if (!isEditing || !editRequestId) return;
+
+    let mounted = true;
+    (async () => {
+      try {
+        setLoadingDraft(true);
+        const details = await getWorkflowDetails(editRequestId);
+        if (!mounted || !details) return;
+
+        const wf = details.workflow || {};
+        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);
+
+        // Map priority
+        const priority = (wf.priority || '').toString().toLowerCase();
+        const priorityMap: Record<string, string> = {
+          'standard': 'standard',
+          'express': 'express'
+        };
+
+        // Map template type
+        const templateType = wf.templateType === 'TEMPLATE' ? 'existing-template' : 'custom';
+        const template = templates.find(t => t.id === templateType) || templates[0] || null;
+        setSelectedTemplate(template);
+
+        // Map approvers
+        const mappedApprovers = approvals
+          .sort((a: any, b: any) => (a.levelNumber || 0) - (b.levelNumber || 0))
+          .map((approval: any) => {
+            const tatHours = Number(approval.tatHours || 24);
+            const tatDays = Math.floor(tatHours / 24);
+            const tatHoursRemainder = tatHours % 24;
+            return {
+              id: approval.approverId || `temp-${approval.levelNumber}`,
+              name: approval.approverName || approval.approverEmail || '',
+              email: approval.approverEmail || '',
+              role: approval.levelName || `Level ${approval.levelNumber}`,
+              department: '',
+              avatar: (approval.approverName || approval.approverEmail || 'XX').substring(0, 2).toUpperCase(),
+              level: approval.levelNumber || 1,
+              canClose: false,
+              tat: tatDays > 0 ? tatDays : tatHoursRemainder,
+              tatType: tatDays > 0 ? 'days' as const : 'hours' as const,
+              userId: approval.approverId
+            };
+          });
+
+        // Map spectators
+        const mappedSpectators = participants
+          .filter((p: any) => {
+            const pt = (p.participantType || p.participant_type || '').toString().toUpperCase().trim();
+            const isSpectator = pt === 'SPECTATOR';
+            if (!isSpectator) return false;
+            const hasEmail = !!(p.userEmail || p.user_email || p.email);
+            return hasEmail;
+          })
+          .map((p: any, index: number) => {
+            const userId = p.userId || p.user_id || p.id;
+            const userName = p.userName || p.user_name || p.name || '';
+            const userEmail = p.userEmail || p.user_email || p.email || '';
+            const avatarText = userName || userEmail || 'XX';
+            const avatar = avatarText
+              .split(' ')
+              .map((s: string) => s[0])
+              .filter(Boolean)
+              .join('')
+              .slice(0, 2)
+              .toUpperCase();
+
+            return {
+              id: userId || `spectator-${editRequestId}-${index}-${Date.now()}`,
+              userId: userId,
+              name: userName || userEmail || 'Spectator',
+              email: userEmail,
+              role: 'Spectator',
+              department: p.department || '',
+              avatar: avatar,
+              level: 1,
+              canClose: false
+            };
+          });
+
+        setFormData(prev => ({
+          ...prev,
+          template: templateType,
+          title: wf.title || '',
+          description: wf.description || '',
+          priority: priorityMap[priority] || 'standard',
+          approvers: mappedApprovers,
+          approverCount: mappedApprovers.length || 1,
+          spectators: mappedSpectators,
+          maxLevel: Math.max(...mappedApprovers.map((a: any) => a.level || 1), 1)
+        }));
+      } catch (error) {
+        console.error('Failed to load draft:', error);
+      } finally {
+        if (mounted) setLoadingDraft(false);
+      }
+    })();
+
+    return () => { mounted = false; };
+  }, [isEditing, editRequestId, templates]);
+
+  const updateFormData = (field: keyof FormData, value: any) => {
+    setFormData(prev => ({ ...prev, [field]: value }));
+  };
+
+  return {
+    formData,
+    setFormData,
+    updateFormData,
+    selectedTemplate,
+    setSelectedTemplate,
+    loadingDraft,
+    systemPolicy,
+    documentPolicy,
+    existingDocuments,
+    setExistingDocuments
+  };
+}
+
diff --git a/src/hooks/useDocumentManagement.ts b/src/hooks/useDocumentManagement.ts
new file mode 100644
index 0000000..d80dda8
--- /dev/null
+++ b/src/hooks/useDocumentManagement.ts
@@ -0,0 +1,189 @@
+import { useState, useRef } from 'react';
+import { getDocumentPreviewUrl } from '@/services/workflowApi';
+import { toast } from 'sonner';
+
+export interface DocumentPolicy {
+  maxFileSizeMB: number;
+  allowedFileTypes: string[];
+}
+
+export interface PreviewDocument {
+  fileName: string;
+  fileType: string;
+  fileUrl: string;
+  fileSize?: number;
+  file?: File;
+  documentId?: string;
+}
+
+/**
+ * Custom Hook: useDocumentManagement
+ * 
+ * Purpose: Manages document upload, validation, and preview
+ * 
+ * Responsibilities:
+ * - Validates files against policy
+ * - Manages document lists (new and existing)
+ * - Handles document deletion
+ * - Manages document preview
+ */
+export function useDocumentManagement(
+  documentPolicy: DocumentPolicy,
+  isEditing: boolean = false
+) {
+  const [documents, setDocuments] = useState<File[]>([]);
+  const [existingDocuments, setExistingDocuments] = useState<any[]>([]);
+  const [documentsToDelete, setDocumentsToDelete] = useState<string[]>([]);
+  const [previewDocument, setPreviewDocument] = useState<PreviewDocument | null>(null);
+  const [documentErrorModal, setDocumentErrorModal] = useState<{
+    open: boolean;
+    errors: Array<{ fileName: string; reason: string }>;
+  }>({
+    open: false,
+    errors: []
+  });
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const validateFile = (file: File): { valid: boolean; reason?: string } => {
+    const maxSizeBytes = documentPolicy.maxFileSizeMB * 1024 * 1024;
+    if (file.size > maxSizeBytes) {
+      return {
+        valid: false,
+        reason: `File size exceeds the maximum allowed size of ${documentPolicy.maxFileSizeMB}MB. Current size: ${(file.size / (1024 * 1024)).toFixed(2)}MB`
+      };
+    }
+
+    const fileName = file.name.toLowerCase();
+    const fileExtension = fileName.substring(fileName.lastIndexOf('.') + 1);
+
+    if (!documentPolicy.allowedFileTypes.includes(fileExtension)) {
+      return {
+        valid: false,
+        reason: `File type "${fileExtension}" is not allowed. Allowed types: ${documentPolicy.allowedFileTypes.join(', ')}`
+      };
+    }
+
+    return { valid: true };
+  };
+
+  const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const files = Array.from(event.target.files || []);
+
+    if (files.length === 0) return;
+
+    const validationErrors: Array<{ fileName: string; reason: string }> = [];
+    const validFiles: File[] = [];
+
+    files.forEach(file => {
+      const validation = validateFile(file);
+      if (!validation.valid) {
+        validationErrors.push({
+          fileName: file.name,
+          reason: validation.reason || 'Unknown validation error'
+        });
+      } else {
+        validFiles.push(file);
+      }
+    });
+
+    if (validationErrors.length > 0) {
+      setDocumentErrorModal({
+        open: true,
+        errors: validationErrors
+      });
+    }
+
+    if (validFiles.length > 0) {
+      setDocuments(prev => [...prev, ...validFiles]);
+      if (validFiles.length < files.length) {
+        toast.warning(`${validFiles.length} of ${files.length} file(s) were added. ${validationErrors.length} file(s) were rejected.`);
+      } else {
+        toast.success(`${validFiles.length} file(s) added successfully`);
+      }
+    }
+
+    if (event.target) {
+      event.target.value = '';
+    }
+  };
+
+  const removeDocument = (index: number) => {
+    setDocuments(prev => prev.filter((_, i) => i !== index));
+  };
+
+  const markDocumentForDeletion = (documentId: string) => {
+    setDocumentsToDelete(prev => [...prev, documentId]);
+  };
+
+  const unmarkDocumentForDeletion = (documentId: string) => {
+    setDocumentsToDelete(prev => prev.filter(id => id !== documentId));
+  };
+
+  const openPreview = (doc: any, isExisting: boolean = false) => {
+    if (isExisting) {
+      const docId = doc.documentId || doc.document_id || '';
+      setPreviewDocument({
+        fileName: doc.originalFileName || doc.fileName || 'Document',
+        fileType: doc.fileType || doc.file_type || 'application/octet-stream',
+        fileUrl: getDocumentPreviewUrl(docId),
+        fileSize: Number(doc.fileSize || doc.file_size || 0),
+        documentId: docId
+      });
+    } else {
+      const fileUrl = URL.createObjectURL(doc);
+      setPreviewDocument({
+        fileName: doc.name,
+        fileType: doc.type || 'application/octet-stream',
+        fileUrl: fileUrl,
+        fileSize: doc.size,
+        file: doc
+      });
+    }
+  };
+
+  const closePreview = () => {
+    if (previewDocument?.fileUrl && previewDocument?.file) {
+      URL.revokeObjectURL(previewDocument.fileUrl);
+    }
+    setPreviewDocument(null);
+  };
+
+  const canPreview = (doc: any, isExisting: boolean = false): boolean => {
+    if (isExisting) {
+      const type = (doc.fileType || doc.file_type || '').toLowerCase();
+      const name = (doc.originalFileName || doc.fileName || '').toLowerCase();
+      return type.includes('image') || type.includes('pdf') ||
+             name.endsWith('.jpg') || name.endsWith('.jpeg') ||
+             name.endsWith('.png') || name.endsWith('.gif') ||
+             name.endsWith('.pdf');
+    } else {
+      const type = (doc.type || '').toLowerCase();
+      const name = (doc.name || '').toLowerCase();
+      return type.includes('image') || type.includes('pdf') ||
+             name.endsWith('.jpg') || name.endsWith('.jpeg') ||
+             name.endsWith('.png') || name.endsWith('.gif') ||
+             name.endsWith('.pdf');
+    }
+  };
+
+  return {
+    documents,
+    setDocuments,
+    existingDocuments,
+    setExistingDocuments,
+    documentsToDelete,
+    setDocumentsToDelete,
+    previewDocument,
+    documentErrorModal,
+    setDocumentErrorModal,
+    fileInputRef,
+    handleFileUpload,
+    removeDocument,
+    markDocumentForDeletion,
+    unmarkDocumentForDeletion,
+    openPreview,
+    closePreview,
+    canPreview
+  };
+}
+
diff --git a/src/hooks/usePolicyValidation.ts b/src/hooks/usePolicyValidation.ts
new file mode 100644
index 0000000..e0ac6fb
--- /dev/null
+++ b/src/hooks/usePolicyValidation.ts
@@ -0,0 +1,150 @@
+import { SystemPolicy, FormData } from './useCreateRequestForm';
+
+export interface PolicyViolation {
+  type: string;
+  message: string;
+  currentValue?: number;
+  maxValue?: number;
+}
+
+/**
+ * Custom Hook: usePolicyValidation
+ * 
+ * Purpose: Validates actions against system policies
+ * 
+ * Responsibilities:
+ * - Validates approver additions against policy limits
+ * - Validates spectator additions against policy limits
+ * - Checks for duplicate users across roles
+ * - Returns policy violations for display
+ */
+export function usePolicyValidation(systemPolicy: SystemPolicy) {
+  const validateAddApprover = (
+    formData: FormData,
+    newApprover: any
+  ): PolicyViolation[] => {
+    const violations: PolicyViolation[] = [];
+    const updatedApprovers = [...formData.approvers, newApprover];
+    const maxLevel = Math.max(...updatedApprovers.map((a: any) => a.level || 1), 1);
+
+    if (maxLevel > systemPolicy.maxApprovalLevels) {
+      violations.push({
+        type: 'Maximum Approval Levels Exceeded',
+        message: `Adding this approver would exceed the maximum approval levels limit.`,
+        currentValue: maxLevel,
+        maxValue: systemPolicy.maxApprovalLevels
+      });
+    }
+
+    const totalParticipants = 1 + updatedApprovers.length + formData.spectators.length;
+    if (totalParticipants > systemPolicy.maxParticipants) {
+      violations.push({
+        type: 'Maximum Participants Exceeded',
+        message: `Adding this approver would exceed the maximum participants limit.`,
+        currentValue: totalParticipants,
+        maxValue: systemPolicy.maxParticipants
+      });
+    }
+
+    return violations;
+  };
+
+  const validateAddSpectator = (
+    formData: FormData,
+    newSpectator: any
+  ): PolicyViolation[] => {
+    const violations: PolicyViolation[] = [];
+
+    if (!systemPolicy.allowSpectators) {
+      violations.push({
+        type: 'Spectators Not Allowed',
+        message: `Adding spectators is not allowed by system policy.`,
+      });
+    }
+
+    const updatedSpectators = [...formData.spectators, newSpectator];
+    if (updatedSpectators.length > systemPolicy.maxSpectators) {
+      violations.push({
+        type: 'Maximum Spectators Exceeded',
+        message: `Adding this spectator would exceed the maximum spectators limit.`,
+        currentValue: updatedSpectators.length,
+        maxValue: systemPolicy.maxSpectators
+      });
+    }
+
+    const totalParticipants = 1 + formData.approvers.length + updatedSpectators.length;
+    if (totalParticipants > systemPolicy.maxParticipants) {
+      violations.push({
+        type: 'Maximum Participants Exceeded',
+        message: `Adding this spectator would exceed the maximum participants limit.`,
+        currentValue: totalParticipants,
+        maxValue: systemPolicy.maxParticipants
+      });
+    }
+
+    return violations;
+  };
+
+  const checkDuplicateUser = (
+    formData: FormData,
+    user: any,
+    targetType: 'approvers' | 'spectators'
+  ): { isDuplicate: boolean; message?: string } => {
+    const userEmail = (user.email || '').toLowerCase();
+    const userId = user.id || user.userId;
+
+    if (targetType === 'spectators') {
+      const isApprover = formData.approvers.find((a: any) =>
+        a.id === userId || (a.email || '').toLowerCase() === userEmail
+      );
+      if (isApprover) {
+        return {
+          isDuplicate: true,
+          message: `${user.name || user.email} is already an approver and cannot be added as a spectator.`
+        };
+      }
+    } else if (targetType === 'approvers') {
+      const isSpectator = formData.spectators.find((s: any) =>
+        s.id === userId || (s.email || '').toLowerCase() === userEmail
+      );
+      if (isSpectator) {
+        return {
+          isDuplicate: true,
+          message: `${user.name || user.email} is already a spectator and cannot be added as an approver.`
+        };
+      }
+
+      // Check if user is already another approver
+      const isOtherApprover = formData.approvers.find((a: any) =>
+        (a.id === userId || (a.email || '').toLowerCase() === userEmail) && a !== user
+      );
+      if (isOtherApprover) {
+        return {
+          isDuplicate: true,
+          message: `${user.name || user.email} is already an approver at another level.`
+        };
+      }
+    }
+
+    // Check if already in target list
+    const currentList = formData[targetType];
+    const isInList = currentList.find((u: any) =>
+      u.id === userId || (u.email || '').toLowerCase() === userEmail
+    );
+    if (isInList) {
+      return {
+        isDuplicate: true,
+        message: `${user.name || user.email} is already added as ${targetType.slice(0, -1)}.`
+      };
+    }
+
+    return { isDuplicate: false };
+  };
+
+  return {
+    validateAddApprover,
+    validateAddSpectator,
+    checkDuplicateUser
+  };
+}
+
diff --git a/src/hooks/useUserSearch.ts b/src/hooks/useUserSearch.ts
new file mode 100644
index 0000000..6ab0d5e
--- /dev/null
+++ b/src/hooks/useUserSearch.ts
@@ -0,0 +1,142 @@
+import { useState, useRef } from 'react';
+import { searchUsers, ensureUserExists, type UserSummary } from '@/services/userApi';
+
+/**
+ * Custom Hook: useUserSearch
+ * 
+ * Purpose: Manages user search functionality with debouncing
+ * 
+ * Responsibilities:
+ * - Handles user search with @ prefix
+ * - Debounces search requests
+ * - Manages search results and loading states
+ * - Validates and ensures users exist in database
+ */
+export function useUserSearch() {
+  const [searchResults, setSearchResults] = useState<UserSummary[]>([]);
+  const [searchLoading, setSearchLoading] = useState(false);
+  const searchTimer = useRef<any>(null);
+
+  const searchUsersDebounced = async (searchTerm: string, limit: number = 10) => {
+    if (searchTimer.current) {
+      clearTimeout(searchTimer.current);
+    }
+
+    if (!searchTerm || !searchTerm.startsWith('@') || searchTerm.length < 2) {
+      setSearchResults([]);
+      setSearchLoading(false);
+      return;
+    }
+
+    setSearchLoading(true);
+    searchTimer.current = setTimeout(async () => {
+      try {
+        const term = searchTerm.slice(1); // remove leading '@'
+        const response = await searchUsers(term, limit);
+        const results = response.data?.data || [];
+        setSearchResults(results);
+      } catch (err) {
+        console.error('User search failed:', err);
+        setSearchResults([]);
+      } finally {
+        setSearchLoading(false);
+      }
+    }, 300);
+  };
+
+  const clearSearch = () => {
+    if (searchTimer.current) {
+      clearTimeout(searchTimer.current);
+    }
+    setSearchResults([]);
+    setSearchLoading(false);
+  };
+
+  const ensureUser = async (user: UserSummary) => {
+    try {
+      const dbUser = await ensureUserExists({
+        userId: user.userId,
+        email: user.email,
+        displayName: user.displayName,
+        firstName: user.firstName,
+        lastName: user.lastName,
+        department: user.department,
+        phone: user.phone,
+        mobilePhone: user.mobilePhone,
+        designation: user.designation,
+        jobTitle: user.jobTitle,
+        manager: user.manager,
+        employeeId: user.employeeId,
+        employeeNumber: user.employeeNumber,
+        secondEmail: user.secondEmail,
+        location: user.location
+      });
+      return dbUser;
+    } catch (err) {
+      console.error('Failed to ensure user exists:', err);
+      throw err;
+    }
+  };
+
+  return {
+    searchResults,
+    searchLoading,
+    searchUsersDebounced,
+    clearSearch,
+    ensureUser
+  };
+}
+
+/**
+ * Custom Hook: useMultiUserSearch
+ * 
+ * Purpose: Manages multiple independent user searches (e.g., for multiple approver fields)
+ */
+export function useMultiUserSearch() {
+  const [userSearchResults, setUserSearchResults] = useState<Record<number, UserSummary[]>>({});
+  const [userSearchLoading, setUserSearchLoading] = useState<Record<number, boolean>>({});
+  const searchTimers = useRef<Record<number, any>>({});
+
+  const searchUsersForIndex = async (index: number, searchTerm: string, limit: number = 10) => {
+    if (searchTimers.current[index]) {
+      clearTimeout(searchTimers.current[index]);
+    }
+
+    if (!searchTerm || !searchTerm.startsWith('@') || searchTerm.length < 2) {
+      setUserSearchResults(prev => ({ ...prev, [index]: [] }));
+      setUserSearchLoading(prev => ({ ...prev, [index]: false }));
+      return;
+    }
+
+    setUserSearchLoading(prev => ({ ...prev, [index]: true }));
+    searchTimers.current[index] = setTimeout(async () => {
+      try {
+        const term = searchTerm.slice(1);
+        const response = await searchUsers(term, limit);
+        const results = response.data?.data || [];
+        setUserSearchResults(prev => ({ ...prev, [index]: results }));
+      } catch (err) {
+        console.error(`User search failed for index ${index}:`, err);
+        setUserSearchResults(prev => ({ ...prev, [index]: [] }));
+      } finally {
+        setUserSearchLoading(prev => ({ ...prev, [index]: false }));
+      }
+    }, 300);
+  };
+
+  const clearSearchForIndex = (index: number) => {
+    if (searchTimers.current[index]) {
+      clearTimeout(searchTimers.current[index]);
+    }
+    setUserSearchResults(prev => ({ ...prev, [index]: [] }));
+    setUserSearchLoading(prev => ({ ...prev, [index]: false }));
+  };
+
+  return {
+    userSearchResults,
+    userSearchLoading,
+    searchUsersForIndex,
+    clearSearchForIndex
+  };
+}
+
diff --git a/src/hooks/useWizardNavigation.ts b/src/hooks/useWizardNavigation.ts
new file mode 100644
index 0000000..21ecfc8
--- /dev/null
+++ b/src/hooks/useWizardNavigation.ts
@@ -0,0 +1,108 @@
+import { useState } from 'react';
+import { FormData } from './useCreateRequestForm';
+
+const STEP_NAMES = [
+  'Template Selection',
+  'Basic Information',
+  'Approval Workflow',
+  'Participants & Access',
+  'Documents & Attachments',
+  'Review & Submit'
+];
+
+/**
+ * Custom Hook: useWizardNavigation
+ * 
+ * Purpose: Manages wizard step navigation and validation
+ * 
+ * Responsibilities:
+ * - Manages current step state
+ * - Validates steps before navigation
+ * - Handles step transitions
+ */
+export function useWizardNavigation(
+  isEditing: boolean,
+  selectedTemplate: any,
+  formData: FormData
+) {
+  const [currentStep, setCurrentStep] = useState(isEditing ? 2 : 1);
+  const totalSteps = STEP_NAMES.length;
+
+  const validateEmail = (email: string) => {
+    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+  };
+
+  const isStepValid = (): boolean => {
+    switch (currentStep) {
+      case 1:
+        return selectedTemplate !== null;
+      case 2:
+        return formData.title.trim() !== '' && 
+               formData.description.trim() !== '' && 
+               formData.priority !== '';
+      case 3:
+        return (formData.approverCount || 1) > 0 &&
+               formData.approvers.length === (formData.approverCount || 1) &&
+               formData.approvers.every(approver => {
+                 if (!approver || !approver.email) return false;
+                 if (!validateEmail(approver.email)) return false;
+                 if (!approver.userId) return true; // Will be validated on next step
+                 const tatType = approver.tatType || 'hours';
+                 if (tatType === 'hours') {
+                   return approver.tat && approver.tat > 0 && approver.tat <= 720;
+                 } else if (tatType === 'days') {
+                   return approver.tat && approver.tat > 0 && approver.tat <= 30;
+                 }
+                 return false;
+               });
+      case 4:
+        return true; // Participants are optional
+      case 5:
+        return true; // Documents are optional
+      case 6:
+        return true; // Review & Submit
+      default:
+        return false;
+    }
+  };
+
+  const nextStep = () => {
+    if (!isStepValid()) return;
+    
+    if (window.innerWidth < 640) {
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+    }
+    
+    if (currentStep < totalSteps) {
+      setCurrentStep(currentStep + 1);
+    }
+  };
+
+  const prevStep = () => {
+    if (currentStep > 1) {
+      setCurrentStep(currentStep - 1);
+      if (window.innerWidth < 640) {
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+      }
+    }
+  };
+
+  const goToStep = (step: number) => {
+    if (step >= 1 && step <= totalSteps) {
+      setCurrentStep(step);
+    }
+  };
+
+  return {
+    currentStep,
+    setCurrentStep,
+    totalSteps,
+    stepNames: STEP_NAMES,
+    isStepValid,
+    nextStep,
+    prevStep,
+    goToStep,
+    validateEmail
+  };
+}
+
diff --git a/src/pages/ApproverPerformance/ApproverPerformance.tsx b/src/pages/ApproverPerformance/ApproverPerformance.tsx
index a5de3e6..98eefc4 100644
--- a/src/pages/ApproverPerformance/ApproverPerformance.tsx
+++ b/src/pages/ApproverPerformance/ApproverPerformance.tsx
@@ -1,993 +1,120 @@
-import { useEffect, useState, useCallback, useMemo } from 'react';
-import { useSearchParams, useNavigate } from 'react-router-dom';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Input } from '@/components/ui/input';
-import { Badge } from '@/components/ui/badge';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { Button } from '@/components/ui/button';
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
-import { Label } from '@/components/ui/label';
-import { Progress } from '@/components/ui/progress';
-import { 
-  FileText, 
-  Search, 
-  Clock, 
-  CheckCircle, 
-  XCircle,
-  User,
-  ArrowLeft,
-  ArrowRight,
-  TrendingUp,
-  Target,
-  AlertCircle,
-  Calendar as CalendarIcon,
-  RefreshCw,
-  Users,
-  BarChart3,
-  Timer,
-  Award
-} from 'lucide-react';
-import { format } from 'date-fns';
-import dayjs from 'dayjs';
-import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
-import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
+/**
+ * Approver Performance Page - Refactored Version
+ * 
+ * This is a refactored version that uses modular components, hooks, and utilities.
+ */
 
-dayjs.extend(isSameOrAfter);
-dayjs.extend(isSameOrBefore);
+import { useMemo } from 'react';
+import { useSearchParams } from 'react-router-dom';
 
-import { Pagination } from '@/components/common/Pagination';
-import type { DateRange } from '@/services/dashboard.service';
-import dashboardService, { type ApproverPerformance } from '@/services/dashboard.service';
-import { formatHoursMinutes } from '@/utils/slaTracker';
+// Components
+import { ApproverPerformanceEmpty } from './components/ApproverPerformanceEmpty';
+import { ApproverPerformanceHeader } from './components/ApproverPerformanceHeader';
+import { ApproverPerformanceStatsCards } from './components/ApproverPerformanceStatsCards';
+import { ApproverPerformanceActionsStats } from './components/ApproverPerformanceActionsStats';
+import { ApproverPerformanceFilters } from './components/ApproverPerformanceFilters';
+import { ApproverPerformanceRequestList } from './components/ApproverPerformanceRequestList';
 
-const getPriorityConfig = (priority: string) => {
-  switch (priority) {
-    case 'express':
-      return {
-        color: 'bg-red-100 text-red-800 border-red-200',
-        icon: TrendingUp,
-        iconColor: 'text-red-600'
-      };
-    case 'standard':
-      return {
-        color: 'bg-blue-100 text-blue-800 border-blue-200',
-        icon: Target,
-        iconColor: 'text-blue-600'
-      };
-    default:
-      return {
-        color: 'bg-gray-100 text-gray-800 border-gray-200',
-        icon: Target,
-        iconColor: 'text-gray-600'
-      };
-  }
-};
+// Hooks
+import { useApproverPerformanceFilters } from './hooks/useApproverPerformanceFilters';
+import { useApproverPerformanceData } from './hooks/useApproverPerformanceData';
 
-const getStatusConfig = (status: string) => {
-  switch (status) {
-    case 'approved':
-      return {
-        color: 'bg-green-100 text-green-800 border-green-200',
-        icon: CheckCircle,
-        iconColor: 'text-green-600'
-      };
-    case 'rejected':
-      return {
-        color: 'bg-red-100 text-red-800 border-red-200',
-        icon: XCircle,
-        iconColor: 'text-red-600'
-      };
-    case 'pending':
-      return {
-        color: 'bg-yellow-100 text-yellow-800 border-yellow-200',
-        icon: Clock,
-        iconColor: 'text-yellow-600'
-      };
-    case 'in-progress':
-      return {
-        color: 'bg-blue-100 text-blue-800 border-blue-200',
-        icon: Clock,
-        iconColor: 'text-blue-600'
-      };
-    case 'closed':
-      return {
-        color: 'bg-gray-100 text-gray-800 border-gray-200',
-        icon: CheckCircle,
-        iconColor: 'text-gray-600'
-      };
-    default:
-      return {
-        color: 'bg-gray-100 text-gray-800 border-gray-200',
-        icon: FileText,
-        iconColor: 'text-gray-600'
-      };
-  }
-};
+// Utils
+import { calculateApproverStats } from './utils/statsCalculations';
 
-const getSLAConfig = (status: string) => {
-  switch (status) {
-    case 'breached':
-      return {
-        color: 'bg-red-100 text-red-800 border-red-200',
-        label: 'Breached'
-      };
-    case 'critical':
-      return {
-        color: 'bg-orange-100 text-orange-800 border-orange-200',
-        label: 'Critical'
-      };
-    case 'approaching':
-      return {
-        color: 'bg-yellow-100 text-yellow-800 border-yellow-200',
-        label: 'Approaching'
-      };
-    case 'on_track':
-    case 'on-track':
-      return {
-        color: 'bg-green-100 text-green-800 border-green-200',
-        label: 'On Track'
-      };
-    default:
-      return {
-        color: 'bg-gray-100 text-gray-800 border-gray-200',
-        label: 'N/A'
-      };
-  }
-};
+const itemsPerPage = 10;
 
 export function ApproverPerformance() {
-  const navigate = useNavigate();
   const [searchParams] = useSearchParams();
   
   // Get approver ID and name from URL params
   const approverId = searchParams.get('approverId') || '';
   const approverName = searchParams.get('approverName') || 'Unknown Approver';
   
-  // Filter states
-  const [searchTerm, setSearchTerm] = useState('');
-  const [statusFilter, setStatusFilter] = useState<string>(searchParams.get('status') || 'all');
-  const [priorityFilter, setPriorityFilter] = useState<string>(searchParams.get('priority') || 'all');
-  const [slaComplianceFilter, setSlaComplianceFilter] = useState<string>(searchParams.get('slaCompliance') || 'all');
-  const [dateRange, setDateRange] = useState<DateRange>((searchParams.get('dateRange') as DateRange) || 'month');
-  const [customStartDate, setCustomStartDate] = useState<Date | undefined>(
-    searchParams.get('startDate') ? new Date(searchParams.get('startDate')!) : undefined
-  );
-  const [customEndDate, setCustomEndDate] = useState<Date | undefined>(
-    searchParams.get('endDate') ? new Date(searchParams.get('endDate')!) : undefined
-  );
-  const [showCustomDatePicker, setShowCustomDatePicker] = useState(false);
-  const [tempCustomStartDate, setTempCustomStartDate] = useState<Date | undefined>(undefined);
-  const [tempCustomEndDate, setTempCustomEndDate] = useState<Date | undefined>(undefined);
+  // Filters hook
+  const filters = useApproverPerformanceFilters();
   
-  // Data states
-  const [requests, setRequests] = useState<any[]>([]);
-  const [approverStats, setApproverStats] = useState<ApproverPerformance | null>(null);
-  const [allFilteredRequests, setAllFilteredRequests] = useState<any[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [refreshing, setRefreshing] = useState(false);
+  // Data hook
+  const data = useApproverPerformanceData({
+    approverId,
+    dateRange: filters.dateRange,
+    customStartDate: filters.customStartDate,
+    customEndDate: filters.customEndDate,
+    statusFilter: filters.statusFilter,
+    priorityFilter: filters.priorityFilter,
+    slaComplianceFilter: filters.slaComplianceFilter,
+    searchTerm: filters.searchTerm,
+    itemsPerPage
+  });
   
-  // Pagination
-  const [currentPage, setCurrentPage] = useState(1);
-  const [totalPages, setTotalPages] = useState(1);
-  const [totalRecords, setTotalRecords] = useState(0);
-  const itemsPerPage = 10;
-  
-  // Fetch approver performance stats
-  const fetchApproverStats = useCallback(async () => {
-    if (!approverId) return;
-    
-    try {
-      const params: any = { dateRange, page: 1, limit: 100 }; // Get all to find this approver
-      if (dateRange === 'custom' && customStartDate && customEndDate) {
-        params.startDate = customStartDate;
-        params.endDate = customEndDate;
-      }
-      
-      const result = await dashboardService.getApproverPerformance(
-        dateRange,
-        1,
-        100,
-        customStartDate,
-        customEndDate
-      );
-      
-      const approver = result.performance.find((p: ApproverPerformance) => p.approverId === approverId);
-      if (approver) {
-        setApproverStats(approver);
-      }
-    } catch (error) {
-      console.error('Failed to fetch approver stats:', error);
-    }
-  }, [approverId, dateRange, customStartDate, customEndDate]);
-  
-  // Fetch requests for this approver - server-side pagination
-  const fetchRequests = useCallback(async (page: number = 1) => {
-    if (!approverId) {
-      setLoading(false);
-      return;
-    }
-    
-    try {
-      setLoading(true);
-      
-      // Fetch current page only (server-side pagination)
-      const result = await dashboardService.getRequestsByApprover(
-        approverId,
-        page,
-        itemsPerPage, // Use itemsPerPage (10) for server-side pagination
-        dateRange,
-        customStartDate,
-        customEndDate,
-        statusFilter !== 'all' ? statusFilter : undefined,
-        priorityFilter !== 'all' ? priorityFilter : undefined,
-        slaComplianceFilter !== 'all' ? slaComplianceFilter : undefined,
-        searchTerm || undefined
-      );
-      
-      setRequests(result.requests);
-      setTotalRecords(result.pagination.totalRecords);
-      setTotalPages(result.pagination.totalPages);
-      setCurrentPage(page);
-      
-      // For stats calculation, fetch ALL data (without pagination)
-      // This ensures stats are calculated based on all filtered data
-      const statsResult = await dashboardService.getRequestsByApprover(
-        approverId,
-        1,
-        10000, // Fetch all records for stats calculation
-        dateRange,
-        customStartDate,
-        customEndDate,
-        statusFilter !== 'all' ? statusFilter : undefined,
-        priorityFilter !== 'all' ? priorityFilter : undefined,
-        slaComplianceFilter !== 'all' ? slaComplianceFilter : undefined,
-        searchTerm || undefined
-      );
-      
-      // Store all filtered requests for stats calculation
-      setAllFilteredRequests(statsResult.requests);
-    } catch (error) {
-      console.error('Failed to fetch requests:', error);
-    } finally {
-      setLoading(false);
-      setRefreshing(false);
-    }
-  }, [approverId, dateRange, customStartDate, customEndDate, statusFilter, priorityFilter, slaComplianceFilter, searchTerm, itemsPerPage]);
-  
-  // Calculate stats from filtered data - based on approver's actions
+  // Calculate stats from filtered data
   const calculatedStats = useMemo(() => {
-    const filtered = allFilteredRequests;
-    
-    // Count by approver's approval status (what the approver actually did)
-    const approvedByApprover = filtered.filter(r => {
-      const status = (r.approvalStatus || '').toLowerCase();
-      return status === 'approved';
-    }).length;
-    
-    const rejectedByApprover = filtered.filter(r => {
-      const status = (r.approvalStatus || '').toLowerCase();
-      return status === 'rejected';
-    }).length;
-    
-    const pendingByApprover = filtered.filter(r => {
-      const status = (r.approvalStatus || '').toLowerCase();
-      return ['pending', 'in_progress', 'in-progress'].includes(status);
-    }).length;
-    
-    // TAT compliance stats - check isBreached flag OR slaStatus === 'breached'
-    // This includes pending requests that have breached their TAT
-    const breached = filtered.filter(r => {
-      const isBreached = r.isBreached === true || r.isBreached === 1;
-      const slaStatusBreached = (r.slaStatus || '').toLowerCase() === 'breached';
-      return isBreached || slaStatusBreached;
-    }).length;
-    
-    // Compliant: completed actions (approved/rejected) that are NOT breached
-    // OR pending requests that haven't breached yet
-    const compliant = filtered.filter(r => {
-      const status = (r.approvalStatus || '').toLowerCase();
-      const isCompleted = status === 'approved' || status === 'rejected';
-      const isPending = ['pending', 'in_progress', 'in-progress'].includes(status);
-      const isNotBreached = !(r.isBreached === true || r.isBreached === 1) && 
-                           (r.slaStatus || '').toLowerCase() !== 'breached';
-      
-      // Completed and not breached = compliant
-      // Pending and not breached = also counts as compliant (hasn't breached yet)
-      return (isCompleted && isNotBreached) || (isPending && isNotBreached);
-    }).length;
-    
-    // Calculate approval rate (based on completed actions)
-    const completedActions = approvedByApprover + rejectedByApprover;
-    const approvalRate = completedActions > 0 
-      ? Math.round((approvedByApprover / completedActions) * 100) 
-      : 0;
-    
-    // Calculate rejection rate
-    const rejectionRate = completedActions > 0 
-      ? Math.round((rejectedByApprover / completedActions) * 100) 
-      : 0;
-    
-    // Calculate TAT compliance rate
-    // Use total requests (not just completed) to include pending requests in compliance calculation
-    // Use Math.floor to ensure consistent rounding with dashboard (prevents 79.5% vs 80% discrepancy)
-    const totalForCompliance = filtered.length;
-    const tatComplianceRate = totalForCompliance > 0 
-      ? Math.floor((compliant / totalForCompliance) * 100) 
-      : 0;
-    
-    return {
-      total: filtered.length,
-      // Approver's actions
-      approvedByApprover,
-      rejectedByApprover,
-      pendingByApprover,
-      // TAT stats
-      breached,
-      compliant,
-      // Rates
-      approvalRate,
-      rejectionRate,
-      tatComplianceRate,
-      completedActions
-    };
-  }, [allFilteredRequests]);
-  
-  useEffect(() => {
-    fetchApproverStats();
-  }, [fetchApproverStats]);
-  
-  useEffect(() => {
-    fetchRequests(1);
-  }, [fetchRequests]);
-  
-  const handleClearFilters = () => {
-    setSearchTerm('');
-    setStatusFilter('all');
-    setPriorityFilter('all');
-    setSlaComplianceFilter('all');
-    setDateRange('month');
-    setCustomStartDate(undefined);
-    setCustomEndDate(undefined);
-    setTempCustomStartDate(undefined);
-    setTempCustomEndDate(undefined);
-    setShowCustomDatePicker(false);
-  };
-  
-  const handleDateRangeChange = (value: string) => {
-    const newRange = value as DateRange;
-    setDateRange(newRange);
-    if (newRange !== 'custom') {
-      setCustomStartDate(undefined);
-      setCustomEndDate(undefined);
-      setTempCustomStartDate(undefined);
-      setTempCustomEndDate(undefined);
-      setShowCustomDatePicker(false);
-    } else {
-      setTempCustomStartDate(customStartDate);
-      setTempCustomEndDate(customEndDate);
-      setShowCustomDatePicker(true);
-    }
-  };
-  
-  const handleApplyCustomDate = () => {
-    if (tempCustomStartDate && tempCustomEndDate) {
-      if (tempCustomStartDate > tempCustomEndDate) {
-        const temp = tempCustomStartDate;
-        setCustomStartDate(tempCustomEndDate);
-        setCustomEndDate(temp);
-        setTempCustomStartDate(tempCustomEndDate);
-        setTempCustomEndDate(temp);
-      } else {
-        setCustomStartDate(tempCustomStartDate);
-        setCustomEndDate(tempCustomEndDate);
-      }
-      setShowCustomDatePicker(false);
-    }
-  };
-  
-  const handleRefresh = () => {
-    setRefreshing(true);
-    fetchApproverStats();
-    fetchRequests(1);
-  };
-  
-  const handlePageChange = (page: number) => {
-    setCurrentPage(page);
-    // Since we have all data in memory, just update the paginated slice
-    const startIdx = (page - 1) * itemsPerPage;
-    const endIdx = startIdx + itemsPerPage;
-    const paginatedRequests = allFilteredRequests.slice(startIdx, endIdx);
-    setRequests(paginatedRequests);
-  };
-  
-  // Update paginated data when allFilteredRequests changes
-  useEffect(() => {
-    const startIdx = (currentPage - 1) * itemsPerPage;
-    const endIdx = startIdx + itemsPerPage;
-    const paginatedRequests = allFilteredRequests.slice(startIdx, endIdx);
-    setRequests(paginatedRequests);
-    setTotalPages(Math.ceil(allFilteredRequests.length / itemsPerPage));
-    if (currentPage > Math.ceil(allFilteredRequests.length / itemsPerPage) && allFilteredRequests.length > 0) {
-      setCurrentPage(1);
-    }
-  }, [allFilteredRequests, currentPage]);
-  
-  const formatDate = (date: string | Date | null | undefined): string => {
-    if (!date) return 'N/A';
-    try {
-      return format(new Date(date), 'MMM d, yyyy');
-    } catch {
-      return 'N/A';
-    }
-  };
-  
-  const formatDateTime = (date: string | Date | null | undefined): string => {
-    if (!date) return 'N/A';
-    try {
-      return format(new Date(date), 'MMM d, yyyy HH:mm');
-    } catch {
-      return 'N/A';
-    }
-  };
+    return calculateApproverStats(data.allFilteredRequests);
+  }, [data.allFilteredRequests]);
   
   if (!approverId) {
-    return (
-      <div className="flex-1 p-3 lg:p-6 overflow-auto min-w-0">
-        <div className="max-w-7xl mx-auto p-4">
-          <Card>
-            <CardContent className="p-8 text-center">
-              <AlertCircle className="w-12 h-12 text-yellow-500 mx-auto mb-4" />
-              <h2 className="text-xl font-semibold mb-2">Approver ID Required</h2>
-              <p className="text-gray-600">Please select an approver to view their performance details.</p>
-              <Button onClick={() => navigate(-1)} className="mt-4">
-                <ArrowLeft className="w-4 h-4 mr-2" />
-                Back
-              </Button>
-            </CardContent>
-          </Card>
-        </div>
-      </div>
-    );
+    return <ApproverPerformanceEmpty />;
   }
   
   return (
-    <div className="flex-1 p-3 lg:p-6 overflow-auto min-w-0">
-      <div className="max-w-7xl mx-auto p-4 space-y-6">
+    <div className="space-y-4 sm:space-y-6 max-w-7xl mx-auto" data-testid="approver-performance-page">
         {/* Header */}
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-4">
-            <Button
-              variant="outline"
-              onClick={() => navigate(-1)}
-              className="inline-flex items-center gap-2"
-            >
-              <ArrowLeft className="w-4 h-4" />
-              Back
-            </Button>
-            <div className="flex items-center gap-3">
-              <div className="p-3 bg-yellow-100 rounded-lg">
-                <Users className="h-6 w-6 text-yellow-600" />
-              </div>
-              <div>
-                <h1 className="text-2xl font-bold text-gray-900">Approver Performance Report</h1>
-                <p className="text-sm text-gray-600">{approverName}</p>
-              </div>
-            </div>
-          </div>
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={handleRefresh}
-            disabled={refreshing}
-            className="gap-2"
-          >
-            <RefreshCw className={`w-4 h-4 ${refreshing ? 'animate-spin' : ''}`} />
-            Refresh
-          </Button>
-        </div>
+        <ApproverPerformanceHeader
+          approverName={approverName}
+          refreshing={data.refreshing}
+          onRefresh={data.handleRefresh}
+        />
         
         {/* Approver Performance Overview Cards */}
-        {approverStats && (
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
-            <Card>
-              <CardHeader className="pb-3">
-                <CardTitle className="text-sm font-medium text-gray-600">TAT Compliance</CardTitle>
-              </CardHeader>
-              <CardContent>
-                <div className="flex items-center justify-between">
-                  <div className="text-3xl font-bold text-gray-900">
-                    {approverStats?.tatCompliancePercent ?? calculatedStats.tatComplianceRate}%
-                  </div>
-                  <div className={`p-2 rounded-lg ${
-                    (approverStats?.tatCompliancePercent ?? calculatedStats.tatComplianceRate) >= 95 ? 'bg-green-100' :
-                    (approverStats?.tatCompliancePercent ?? calculatedStats.tatComplianceRate) >= 90 ? 'bg-blue-100' :
-                    (approverStats?.tatCompliancePercent ?? calculatedStats.tatComplianceRate) >= 85 ? 'bg-orange-100' : 'bg-red-100'
-                  }`}>
-                    <Target className={`w-5 h-5 ${
-                      (approverStats?.tatCompliancePercent ?? calculatedStats.tatComplianceRate) >= 95 ? 'text-green-600' :
-                      (approverStats?.tatCompliancePercent ?? calculatedStats.tatComplianceRate) >= 90 ? 'text-blue-600' :
-                      (approverStats?.tatCompliancePercent ?? calculatedStats.tatComplianceRate) >= 85 ? 'text-orange-600' : 'text-red-600'
-                    }`} />
-                  </div>
-                </div>
-                <Progress 
-                  value={approverStats?.tatCompliancePercent ?? calculatedStats.tatComplianceRate} 
-                  className="mt-2 h-2"
-                />
-              </CardContent>
-            </Card>
-            
-            <Card>
-              <CardHeader className="pb-3">
-                <CardTitle className="text-sm font-medium text-gray-600">Total Approved</CardTitle>
-              </CardHeader>
-              <CardContent>
-                <div className="flex items-center justify-between">
-                  <div className="text-3xl font-bold text-gray-900">
-                    {approverStats.totalApproved}
-                  </div>
-                  <div className="p-2 bg-blue-100 rounded-lg">
-                    <CheckCircle className="w-5 h-5 text-blue-600" />
-                  </div>
-                </div>
-                <p className="text-xs text-gray-500 mt-1">Requests handled</p>
-              </CardContent>
-            </Card>
-            
-            <Card>
-              <CardHeader className="pb-3">
-                <CardTitle className="text-sm font-medium text-gray-600">Avg Response Time</CardTitle>
-              </CardHeader>
-              <CardContent>
-                <div className="flex items-center justify-between">
-                  <div className="text-3xl font-bold text-gray-900">
-                    {approverStats.avgResponseHours.toFixed(1)}h
-                  </div>
-                  <div className="p-2 bg-purple-100 rounded-lg">
-                    <Timer className="w-5 h-5 text-purple-600" />
-                  </div>
-                </div>
-                <p className="text-xs text-gray-500 mt-1">
-                  {approverStats.avgResponseHours < 24 
-                    ? `${(approverStats.avgResponseHours / 8).toFixed(1)} working days`
-                    : `${(approverStats.avgResponseHours / 24).toFixed(1)} days`
-                  }
-                </p>
-              </CardContent>
-            </Card>
-            
-            <Card>
-              <CardHeader className="pb-3">
-                <CardTitle className="text-sm font-medium text-gray-600">Pending Actions</CardTitle>
-              </CardHeader>
-              <CardContent>
-                <div className="flex items-center justify-between">
-                  <div className="text-3xl font-bold text-gray-900">
-                    {approverStats.pendingCount}
-                  </div>
-                  <div className="p-2 bg-orange-100 rounded-lg">
-                    <Clock className="w-5 h-5 text-orange-600" />
-                  </div>
-                </div>
-                <p className="text-xs text-gray-500 mt-1">Awaiting approval</p>
-              </CardContent>
-            </Card>
-          </div>
+        {data.approverStats && (
+          <ApproverPerformanceStatsCards
+            approverStats={data.approverStats}
+            calculatedStats={calculatedStats}
+          />
         )}
         
         {/* Filtered Request Stats - Approver's Actions */}
-        <Card>
-          <CardHeader>
-            <CardTitle>Approver's Actions (Filtered)</CardTitle>
-            <CardDescription>
-              Statistics based on {approverName}'s actions with current filters applied
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            {/* Approver's Actions - What the approver actually did */}
-            <div className="mb-6">
-              <h4 className="text-sm font-semibold text-gray-700 mb-3 flex items-center gap-2">
-                <Users className="w-4 h-4" />
-                Approver's Actions
-              </h4>
-              <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3">
-                <div className="p-4 bg-green-50 rounded-lg border border-green-200">
-                  <div className="flex items-center justify-between mb-2">
-                    <CheckCircle className="w-5 h-5 text-green-600" />
-                    <span className="text-xs text-green-600 font-medium">
-                      {calculatedStats.completedActions > 0 ? `${calculatedStats.approvalRate}%` : '0%'}
-                    </span>
-                  </div>
-                  <div className="text-2xl font-bold text-green-700">{calculatedStats.approvedByApprover}</div>
-                  <div className="text-xs text-gray-600 mt-1">Approved by Approver</div>
-                </div>
-                <div className="p-4 bg-red-50 rounded-lg border border-red-200">
-                  <div className="flex items-center justify-between mb-2">
-                    <XCircle className="w-5 h-5 text-red-600" />
-                    <span className="text-xs text-red-600 font-medium">
-                      {calculatedStats.completedActions > 0 ? `${calculatedStats.rejectionRate}%` : '0%'}
-                    </span>
-                  </div>
-                  <div className="text-2xl font-bold text-red-700">{calculatedStats.rejectedByApprover}</div>
-                  <div className="text-xs text-gray-600 mt-1">Rejected by Approver</div>
-                </div>
-                <div className="p-4 bg-yellow-50 rounded-lg border border-yellow-200">
-                  <div className="flex items-center justify-between mb-2">
-                    <Clock className="w-5 h-5 text-yellow-600" />
-                  </div>
-                  <div className="text-2xl font-bold text-yellow-700">{calculatedStats.pendingByApprover}</div>
-                  <div className="text-xs text-gray-600 mt-1">Pending Actions</div>
-                </div>
-                <div className="p-4 bg-blue-50 rounded-lg border border-blue-200">
-                  <div className="flex items-center justify-between mb-2">
-                    <FileText className="w-5 h-5 text-blue-600" />
-                  </div>
-                  <div className="text-2xl font-bold text-blue-700">{calculatedStats.total}</div>
-                  <div className="text-xs text-gray-600 mt-1">Total Requests</div>
-                </div>
-              </div>
-            </div>
-            
-            {/* TAT Compliance Stats */}
-            <div className="mb-6 pt-4 border-t">
-              <h4 className="text-sm font-semibold text-gray-700 mb-3 flex items-center gap-2">
-                <Target className="w-4 h-4" />
-                TAT Compliance
-              </h4>
-              <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
-                <div className="p-4 bg-green-50 rounded-lg border border-green-200">
-                  <div className="flex items-center justify-between mb-2">
-                    <Award className="w-5 h-5 text-green-600" />
-                    <span className="text-xs text-green-600 font-medium">
-                      {approverStats?.tatCompliancePercent !== undefined ? `${approverStats.tatCompliancePercent}%` : (calculatedStats.completedActions > 0 ? `${calculatedStats.tatComplianceRate}%` : 'N/A')}
-                    </span>
-                  </div>
-                  <div className="text-2xl font-bold text-green-700">{calculatedStats.compliant}</div>
-                  <div className="text-xs text-gray-600 mt-1">TAT Compliant</div>
-                </div>
-                <div className="p-4 bg-red-50 rounded-lg border border-red-200">
-                  <div className="flex items-center justify-between mb-2">
-                    <AlertCircle className="w-5 h-5 text-red-600" />
-                  </div>
-                  <div className="text-2xl font-bold text-red-700">{calculatedStats.breached}</div>
-                  <div className="text-xs text-gray-600 mt-1">TAT Breached</div>
-                </div>
-                <div className="p-4 bg-purple-50 rounded-lg border border-purple-200">
-                  <div className="flex items-center justify-between mb-2">
-                    <BarChart3 className="w-5 h-5 text-purple-600" />
-                  </div>
-                  <div className="text-2xl font-bold text-purple-700">{calculatedStats.completedActions}</div>
-                  <div className="text-xs text-gray-600 mt-1">Completed Actions</div>
-                </div>
-              </div>
-            </div>
-            
-          </CardContent>
-        </Card>
+        <ApproverPerformanceActionsStats
+          approverName={approverName}
+          approverStats={data.approverStats}
+          calculatedStats={calculatedStats}
+        />
         
         {/* Filters */}
-        <Card>
-          <CardHeader>
-            <div className="flex items-center justify-between">
-              <CardTitle>Filters</CardTitle>
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={handleClearFilters}
-                className="text-xs"
-              >
-                Clear All
-              </Button>
-            </div>
-          </CardHeader>
-          <CardContent>
-            <div className="grid grid-cols-1 md:grid-cols-6 gap-4">
-              {/* Search */}
-              <div className="relative">
-                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
-                <Input
-                  placeholder="Search requests..."
-                  value={searchTerm}
-                  onChange={(e) => setSearchTerm(e.target.value)}
-                  className="pl-10"
-                />
-              </div>
-              
-              {/* Status Filter */}
-              <Select value={statusFilter} onValueChange={setStatusFilter}>
-                <SelectTrigger>
-                  <SelectValue placeholder="Status" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="all">All Status</SelectItem>
-                  <SelectItem value="pending">Pending</SelectItem>
-                  <SelectItem value="approved">Approved</SelectItem>
-                  <SelectItem value="rejected">Rejected</SelectItem>
-                  <SelectItem value="closed">Closed</SelectItem>
-                </SelectContent>
-              </Select>
-              
-              {/* Priority Filter */}
-              <Select value={priorityFilter} onValueChange={setPriorityFilter}>
-                <SelectTrigger>
-                  <SelectValue placeholder="Priority" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="all">All Priority</SelectItem>
-                  <SelectItem value="express">Express</SelectItem>
-                  <SelectItem value="standard">Standard</SelectItem>
-                </SelectContent>
-              </Select>
-              
-              {/* SLA Compliance Filter */}
-              <Select value={slaComplianceFilter} onValueChange={setSlaComplianceFilter}>
-                <SelectTrigger>
-                  <SelectValue placeholder="SLA Compliance" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="all">All SLA</SelectItem>
-                  <SelectItem value="compliant">Compliant</SelectItem>
-                  <SelectItem value="on-track">On Track</SelectItem>
-                  <SelectItem value="approaching">Approaching</SelectItem>
-                  <SelectItem value="critical">Critical</SelectItem>
-                  <SelectItem value="breached">Breached</SelectItem>
-                </SelectContent>
-              </Select>
-              
-              {/* Date Range Filter */}
-              <div className="flex items-center gap-2">
-                <CalendarIcon className="w-4 h-4 text-muted-foreground" />
-                <Select value={dateRange} onValueChange={handleDateRangeChange}>
-                  <SelectTrigger className="flex-1">
-                    <SelectValue placeholder="Date Range" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="today">Today</SelectItem>
-                    <SelectItem value="week">This Week</SelectItem>
-                    <SelectItem value="month">This Month</SelectItem>
-                    <SelectItem value="custom">Custom Range</SelectItem>
-                  </SelectContent>
-                </Select>
-                
-                {/* Custom Date Range Picker */}
-                {dateRange === 'custom' && (
-                  <Popover open={showCustomDatePicker} onOpenChange={setShowCustomDatePicker}>
-                    <PopoverTrigger asChild>
-                      <Button variant="outline" size="sm" className="gap-2">
-                        <CalendarIcon className="w-4 h-4" />
-                        {tempCustomStartDate && tempCustomEndDate 
-                          ? `${format(tempCustomStartDate, 'MMM d')} - ${format(tempCustomEndDate, 'MMM d')}`
-                          : 'Select dates'}
-                      </Button>
-                    </PopoverTrigger>
-                    <PopoverContent className="w-auto p-4" align="start" sideOffset={8}>
-                      <div className="space-y-4">
-                        <div className="space-y-3">
-                          <div className="space-y-2">
-                            <Label htmlFor="start-date" className="text-sm font-medium">Start Date</Label>
-                            <Input
-                              id="start-date"
-                              type="date"
-                              value={tempCustomStartDate ? format(tempCustomStartDate, 'yyyy-MM-dd') : ''}
-                              onChange={(e) => {
-                                const date = e.target.value ? new Date(e.target.value) : undefined;
-                                if (date) {
-                                  setTempCustomStartDate(date);
-                                  if (tempCustomEndDate && date > tempCustomEndDate) {
-                                    setTempCustomEndDate(date);
-                                  }
-                                } else {
-                                  setTempCustomStartDate(undefined);
-                                }
-                              }}
-                              max={format(new Date(), 'yyyy-MM-dd')}
-                              className="w-full"
-                            />
-                          </div>
-                          <div className="space-y-2">
-                            <Label htmlFor="end-date" className="text-sm font-medium">End Date</Label>
-                            <Input
-                              id="end-date"
-                              type="date"
-                              value={tempCustomEndDate ? format(tempCustomEndDate, 'yyyy-MM-dd') : ''}
-                              onChange={(e) => {
-                                const date = e.target.value ? new Date(e.target.value) : undefined;
-                                if (date) {
-                                  setTempCustomEndDate(date);
-                                  if (tempCustomStartDate && date < tempCustomStartDate) {
-                                    setTempCustomStartDate(date);
-                                  }
-                                } else {
-                                  setTempCustomEndDate(undefined);
-                                }
-                              }}
-                              min={tempCustomStartDate ? format(tempCustomStartDate, 'yyyy-MM-dd') : undefined}
-                              max={format(new Date(), 'yyyy-MM-dd')}
-                              className="w-full"
-                            />
-                          </div>
-                        </div>
-                        <div className="flex gap-2 pt-2 border-t">
-                          <Button 
-                            size="sm" 
-                            onClick={handleApplyCustomDate}
-                            disabled={!tempCustomStartDate || !tempCustomEndDate}
-                            className="flex-1 bg-re-green hover:bg-re-green/90"
-                          >
-                            Apply
-                          </Button>
-                          <Button 
-                            size="sm" 
-                            variant="outline"
-                            onClick={() => {
-                              setShowCustomDatePicker(false);
-                              setTempCustomStartDate(customStartDate);
-                              setTempCustomEndDate(customEndDate);
-                              if (!customStartDate || !customEndDate) {
-                                setCustomStartDate(undefined);
-                                setCustomEndDate(undefined);
-                                setDateRange('month');
-                              }
-                            }}
-                          >
-                            Cancel
-                          </Button>
-                        </div>
-                      </div>
-                    </PopoverContent>
-                  </Popover>
-                )}
-              </div>
-            </div>
-          </CardContent>
-        </Card>
+        <ApproverPerformanceFilters
+          searchTerm={filters.searchTerm}
+          statusFilter={filters.statusFilter}
+          priorityFilter={filters.priorityFilter}
+          slaComplianceFilter={filters.slaComplianceFilter}
+          dateRange={filters.dateRange}
+          customStartDate={filters.customStartDate}
+          customEndDate={filters.customEndDate}
+          showCustomDatePicker={filters.showCustomDatePicker}
+          tempCustomStartDate={filters.tempCustomStartDate}
+          tempCustomEndDate={filters.tempCustomEndDate}
+          onSearchChange={filters.setSearchTerm}
+          onStatusChange={filters.setStatusFilter}
+          onPriorityChange={filters.setPriorityFilter}
+          onSlaComplianceChange={filters.setSlaComplianceFilter}
+          onDateRangeChange={filters.handleDateRangeChange}
+          onShowCustomDatePickerChange={filters.setShowCustomDatePicker}
+          onTempStartDateChange={filters.setTempCustomStartDate}
+          onTempEndDateChange={filters.setTempCustomEndDate}
+          onApplyCustomDate={filters.handleApplyCustomDate}
+          onClearFilters={filters.clearFilters}
+        />
         
         {/* Requests List */}
-        <Card>
-          <CardHeader>
-            <CardTitle>Request Details</CardTitle>
-            <CardDescription>
-              All requests handled by {approverName} with applied filters
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            {loading ? (
-              <div className="flex items-center justify-center py-12">
-                <RefreshCw className="w-6 h-6 animate-spin text-gray-400" />
-                <span className="ml-2 text-sm text-gray-600">Loading requests...</span>
-              </div>
-            ) : requests.length === 0 ? (
-              <div className="text-center py-12 text-gray-500">
-                <FileText className="w-12 h-12 mx-auto mb-4 text-gray-400" />
-                <p className="text-sm">No requests found for this approver</p>
-              </div>
-            ) : (
-              <div className="space-y-4">
-                {requests.map((request) => {
-                  const priorityConfig = getPriorityConfig(request.priority);
-                  const statusConfig = getStatusConfig(request.status);
-                  const slaConfig = getSLAConfig(request.slaStatus || '');
-                  
-                  return (
-                    <Card 
-                      key={request.requestId} 
-                      className="hover:shadow-md transition-shadow cursor-pointer"
-                      onClick={() => navigate(`/request/${request.requestId}`)}
-                    >
-                      <CardContent className="p-4">
-                        <div className="flex items-start justify-between gap-4">
-                          <div className="flex-1 min-w-0">
-                            <div className="flex items-center gap-3 mb-2 flex-wrap">
-                              <span className="font-semibold text-sm text-blue-600 hover:underline">
-                                {request.requestNumber}
-                              </span>
-                              <Badge className={priorityConfig.color}>
-                                <priorityConfig.icon className={`w-3 h-3 mr-1 ${priorityConfig.iconColor}`} />
-                                {request.priority}
-                              </Badge>
-                              <Badge className={statusConfig.color}>
-                                <statusConfig.icon className={`w-3 h-3 mr-1 ${statusConfig.iconColor}`} />
-                                {request.status}
-                              </Badge>
-                              {/* Show approver's action status */}
-                              {request.approvalStatus && (
-                                <Badge className={
-                                  request.approvalStatus === 'approved' || request.approvalStatus === 'APPROVED'
-                                    ? 'bg-green-100 text-green-800 border-green-200'
-                                    : request.approvalStatus === 'rejected' || request.approvalStatus === 'REJECTED'
-                                    ? 'bg-red-100 text-red-800 border-red-200'
-                                    : 'bg-yellow-100 text-yellow-800 border-yellow-200'
-                                }>
-                                  {request.approvalStatus === 'approved' || request.approvalStatus === 'APPROVED' ? (
-                                    <>
-                                      <CheckCircle className="w-3 h-3 mr-1" />
-                                      Approved
-                                    </>
-                                  ) : request.approvalStatus === 'rejected' || request.approvalStatus === 'REJECTED' ? (
-                                    <>
-                                      <XCircle className="w-3 h-3 mr-1" />
-                                      Rejected
-                                    </>
-                                  ) : (
-                                    <>
-                                      <Clock className="w-3 h-3 mr-1" />
-                                      Pending
-                                    </>
-                                  )}
-                                </Badge>
-                              )}
-                              {request.slaStatus && (
-                                <Badge className={slaConfig.color}>
-                                  {slaConfig.label}
-                                </Badge>
-                              )}
-                            </div>
-                            <h3 className="font-medium text-gray-900 mb-1 truncate">{request.title}</h3>
-                            <div className="flex flex-wrap items-center gap-4 text-xs text-gray-500 mt-2">
-                              <span className="flex items-center gap-1">
-                                <User className="w-3 h-3" />
-                                {request.initiatorName}
-                                {request.initiatorDepartment && (
-                                  <span className="ml-1">({request.initiatorDepartment})</span>
-                                )}
-                              </span>
-                              <span className="flex items-center gap-1">
-                                <Clock className="w-3 h-3" />
-                                Submitted: {formatDate(request.submissionDate)}
-                              </span>
-                              {request.approvalActionDate && (
-                                <span className="flex items-center gap-1">
-                                  <CheckCircle className="w-3 h-3" />
-                                  Action: {formatDateTime(request.approvalActionDate)}
-                                </span>
-                              )}
-                              <span className="flex items-center gap-1">
-                                <Target className="w-3 h-3" />
-                                Level {request.levelNumber} of {request.totalLevels}
-                              </span>
-                              {request.levelElapsedHours > 0 && (
-                                <span className="flex items-center gap-1">
-                                  <Timer className="w-3 h-3" />
-                                  {formatHoursMinutes(request.levelElapsedHours)} / {formatHoursMinutes(request.levelTatHours)} TAT
-                                </span>
-                              )}
-                            </div>
-                          </div>
-                          <Button
-                            variant="ghost"
-                            size="sm"
-                            onClick={(e) => {
-                              e.stopPropagation();
-                              navigate(`/request/${request.requestId}`);
-                            }}
-                          >
-                            <ArrowRight className="w-4 h-4" />
-                          </Button>
-                        </div>
-                      </CardContent>
-                    </Card>
-                  );
-                })}
-              </div>
-            )}
-            
-            {/* Pagination */}
-            {totalPages > 0 && (
-              <div className="mt-6">
-                <Pagination
-                  currentPage={currentPage}
-                  totalPages={totalPages}
-                  totalRecords={totalRecords}
-                  itemsPerPage={itemsPerPage}
-                  onPageChange={handlePageChange}
-                  itemLabel="requests"
-                  testIdPrefix="approver-performance"
-                />
-              </div>
-            )}
-          </CardContent>
-        </Card>
-      </div>
+        <ApproverPerformanceRequestList
+          requests={data.requests}
+          loading={data.loading}
+          approverName={approverName}
+          currentPage={data.currentPage}
+          totalPages={data.totalPages}
+          totalRecords={data.totalRecords}
+          itemsPerPage={itemsPerPage}
+          onPageChange={data.handlePageChange}
+        />
     </div>
   );
 }
diff --git a/src/pages/ApproverPerformance/components/ApproverPerformanceActionsStats.tsx b/src/pages/ApproverPerformance/components/ApproverPerformanceActionsStats.tsx
new file mode 100644
index 0000000..697fa95
--- /dev/null
+++ b/src/pages/ApproverPerformance/components/ApproverPerformanceActionsStats.tsx
@@ -0,0 +1,111 @@
+/**
+ * Approver's Actions Statistics Component
+ */
+
+import { CheckCircle, XCircle, Clock, FileText, Users, Target, Award, AlertCircle, BarChart3 } from 'lucide-react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import type { ApproverPerformance } from '@/services/dashboard.service';
+import type { ApproverPerformanceStats } from '../types/approverPerformance.types';
+
+interface ApproverPerformanceActionsStatsProps {
+  approverName: string;
+  approverStats: ApproverPerformance | null;
+  calculatedStats: ApproverPerformanceStats;
+}
+
+export function ApproverPerformanceActionsStats({
+  approverName,
+  approverStats,
+  calculatedStats
+}: ApproverPerformanceActionsStatsProps) {
+  return (
+    <Card data-testid="approver-actions-stats">
+      <CardHeader>
+        <CardTitle>Approver's Actions (Filtered)</CardTitle>
+        <CardDescription>
+          Statistics based on {approverName}'s actions with current filters applied
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        {/* Approver's Actions - What the approver actually did */}
+        <div className="mb-6">
+          <h4 className="text-sm font-semibold text-gray-700 mb-3 flex items-center gap-2">
+            <Users className="w-4 h-4" />
+            Approver's Actions
+          </h4>
+          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3">
+            <div className="p-4 bg-green-50 rounded-lg border border-green-200">
+              <div className="flex items-center justify-between mb-2">
+                <CheckCircle className="w-5 h-5 text-green-600" />
+                <span className="text-xs text-green-600 font-medium">
+                  {calculatedStats.completedActions > 0 ? `${calculatedStats.approvalRate}%` : '0%'}
+                </span>
+              </div>
+              <div className="text-2xl font-bold text-green-700">{calculatedStats.approvedByApprover}</div>
+              <div className="text-xs text-gray-600 mt-1">Approved by Approver</div>
+            </div>
+            <div className="p-4 bg-red-50 rounded-lg border border-red-200">
+              <div className="flex items-center justify-between mb-2">
+                <XCircle className="w-5 h-5 text-red-600" />
+                <span className="text-xs text-red-600 font-medium">
+                  {calculatedStats.completedActions > 0 ? `${calculatedStats.rejectionRate}%` : '0%'}
+                </span>
+              </div>
+              <div className="text-2xl font-bold text-red-700">{calculatedStats.rejectedByApprover}</div>
+              <div className="text-xs text-gray-600 mt-1">Rejected by Approver</div>
+            </div>
+            <div className="p-4 bg-yellow-50 rounded-lg border border-yellow-200">
+              <div className="flex items-center justify-between mb-2">
+                <Clock className="w-5 h-5 text-yellow-600" />
+              </div>
+              <div className="text-2xl font-bold text-yellow-700">{calculatedStats.pendingByApprover}</div>
+              <div className="text-xs text-gray-600 mt-1">Pending Actions</div>
+            </div>
+            <div className="p-4 bg-blue-50 rounded-lg border border-blue-200">
+              <div className="flex items-center justify-between mb-2">
+                <FileText className="w-5 h-5 text-blue-600" />
+              </div>
+              <div className="text-2xl font-bold text-blue-700">{calculatedStats.total}</div>
+              <div className="text-xs text-gray-600 mt-1">Total Requests</div>
+            </div>
+          </div>
+        </div>
+        
+        {/* TAT Compliance Stats */}
+        <div className="mb-6 pt-4 border-t">
+          <h4 className="text-sm font-semibold text-gray-700 mb-3 flex items-center gap-2">
+            <Target className="w-4 h-4" />
+            TAT Compliance
+          </h4>
+          <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
+            <div className="p-4 bg-green-50 rounded-lg border border-green-200">
+              <div className="flex items-center justify-between mb-2">
+                <Award className="w-5 h-5 text-green-600" />
+                <span className="text-xs text-green-600 font-medium">
+                  {approverStats?.tatCompliancePercent !== undefined ? `${approverStats.tatCompliancePercent}%` : (calculatedStats.completedActions > 0 ? `${calculatedStats.tatComplianceRate}%` : 'N/A')}
+                </span>
+              </div>
+              <div className="text-2xl font-bold text-green-700">{calculatedStats.compliant}</div>
+              <div className="text-xs text-gray-600 mt-1">TAT Compliant</div>
+            </div>
+            <div className="p-4 bg-red-50 rounded-lg border border-red-200">
+              <div className="flex items-center justify-between mb-2">
+                <AlertCircle className="w-5 h-5 text-red-600" />
+              </div>
+              <div className="text-2xl font-bold text-red-700">{calculatedStats.breached}</div>
+              <div className="text-xs text-gray-600 mt-1">TAT Breached</div>
+            </div>
+            <div className="p-4 bg-purple-50 rounded-lg border border-purple-200">
+              <div className="flex items-center justify-between mb-2">
+                <BarChart3 className="w-5 h-5 text-purple-600" />
+              </div>
+              <div className="text-2xl font-bold text-purple-700">{calculatedStats.completedActions}</div>
+              <div className="text-xs text-gray-600 mt-1">Completed Actions</div>
+            </div>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
diff --git a/src/pages/ApproverPerformance/components/ApproverPerformanceEmpty.tsx b/src/pages/ApproverPerformance/components/ApproverPerformanceEmpty.tsx
new file mode 100644
index 0000000..78cf30d
--- /dev/null
+++ b/src/pages/ApproverPerformance/components/ApproverPerformanceEmpty.tsx
@@ -0,0 +1,31 @@
+/**
+ * Approver Performance Empty State Component
+ */
+
+import { AlertCircle, ArrowLeft } from 'lucide-react';
+import { Card, CardContent } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { useNavigate } from 'react-router-dom';
+
+export function ApproverPerformanceEmpty() {
+  const navigate = useNavigate();
+
+  return (
+    <div className="flex-1 p-3 lg:p-6 overflow-auto min-w-0" data-testid="approver-performance-empty">
+      <div className="max-w-7xl mx-auto p-4">
+        <Card>
+          <CardContent className="p-8 text-center">
+            <AlertCircle className="w-12 h-12 text-yellow-500 mx-auto mb-4" />
+            <h2 className="text-xl font-semibold mb-2">Approver ID Required</h2>
+            <p className="text-gray-600">Please select an approver to view their performance details.</p>
+            <Button onClick={() => navigate(-1)} className="mt-4" data-testid="back-button">
+              <ArrowLeft className="w-4 h-4 mr-2" />
+              Back
+            </Button>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}
+
diff --git a/src/pages/ApproverPerformance/components/ApproverPerformanceFilters.tsx b/src/pages/ApproverPerformance/components/ApproverPerformanceFilters.tsx
new file mode 100644
index 0000000..b39b5d3
--- /dev/null
+++ b/src/pages/ApproverPerformance/components/ApproverPerformanceFilters.tsx
@@ -0,0 +1,240 @@
+/**
+ * Approver Performance Filters Component
+ */
+
+import { Search, Calendar as CalendarIcon } from 'lucide-react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Button } from '@/components/ui/button';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { Label } from '@/components/ui/label';
+import { format } from 'date-fns';
+import type { DateRange } from '@/services/dashboard.service';
+
+interface ApproverPerformanceFiltersProps {
+  searchTerm: string;
+  statusFilter: string;
+  priorityFilter: string;
+  slaComplianceFilter: string;
+  dateRange: DateRange;
+  customStartDate?: Date;
+  customEndDate?: Date;
+  showCustomDatePicker: boolean;
+  tempCustomStartDate?: Date;
+  tempCustomEndDate?: Date;
+  onSearchChange: (value: string) => void;
+  onStatusChange: (value: string) => void;
+  onPriorityChange: (value: string) => void;
+  onSlaComplianceChange: (value: string) => void;
+  onDateRangeChange: (value: string) => void;
+  onShowCustomDatePickerChange: (open: boolean) => void;
+  onTempStartDateChange: (date: Date | undefined) => void;
+  onTempEndDateChange: (date: Date | undefined) => void;
+  onApplyCustomDate: () => void;
+  onClearFilters: () => void;
+}
+
+export function ApproverPerformanceFilters({
+  searchTerm,
+  statusFilter,
+  priorityFilter,
+  slaComplianceFilter,
+  dateRange,
+  customStartDate,
+  customEndDate,
+  showCustomDatePicker,
+  tempCustomStartDate,
+  tempCustomEndDate,
+  onSearchChange,
+  onStatusChange,
+  onPriorityChange,
+  onSlaComplianceChange,
+  onDateRangeChange,
+  onShowCustomDatePickerChange,
+  onTempStartDateChange,
+  onTempEndDateChange,
+  onApplyCustomDate,
+  onClearFilters
+}: ApproverPerformanceFiltersProps) {
+  return (
+    <Card data-testid="approver-performance-filters">
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <CardTitle>Filters</CardTitle>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={onClearFilters}
+            className="text-xs"
+            data-testid="clear-filters-button"
+          >
+            Clear All
+          </Button>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <div className="grid grid-cols-1 md:grid-cols-6 gap-4">
+          {/* Search */}
+          <div className="relative">
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
+            <Input
+              placeholder="Search requests..."
+              value={searchTerm}
+              onChange={(e) => onSearchChange(e.target.value)}
+              className="pl-10"
+              data-testid="search-input"
+            />
+          </div>
+          
+          {/* Status Filter */}
+          <Select value={statusFilter} onValueChange={onStatusChange}>
+            <SelectTrigger data-testid="status-filter">
+              <SelectValue placeholder="Status" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">All Status</SelectItem>
+              <SelectItem value="pending">Pending</SelectItem>
+              <SelectItem value="approved">Approved</SelectItem>
+              <SelectItem value="rejected">Rejected</SelectItem>
+              <SelectItem value="closed">Closed</SelectItem>
+            </SelectContent>
+          </Select>
+          
+          {/* Priority Filter */}
+          <Select value={priorityFilter} onValueChange={onPriorityChange}>
+            <SelectTrigger data-testid="priority-filter">
+              <SelectValue placeholder="Priority" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">All Priority</SelectItem>
+              <SelectItem value="express">Express</SelectItem>
+              <SelectItem value="standard">Standard</SelectItem>
+            </SelectContent>
+          </Select>
+          
+          {/* SLA Compliance Filter */}
+          <Select value={slaComplianceFilter} onValueChange={onSlaComplianceChange}>
+            <SelectTrigger data-testid="sla-compliance-filter">
+              <SelectValue placeholder="SLA Compliance" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">All SLA</SelectItem>
+              <SelectItem value="compliant">Compliant</SelectItem>
+              <SelectItem value="on-track">On Track</SelectItem>
+              <SelectItem value="approaching">Approaching</SelectItem>
+              <SelectItem value="critical">Critical</SelectItem>
+              <SelectItem value="breached">Breached</SelectItem>
+            </SelectContent>
+          </Select>
+          
+          {/* Date Range Filter */}
+          <div className="flex items-center gap-2">
+            <CalendarIcon className="w-4 h-4 text-muted-foreground" />
+            <Select value={dateRange} onValueChange={onDateRangeChange}>
+              <SelectTrigger className="flex-1" data-testid="date-range-filter">
+                <SelectValue placeholder="Date Range" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="today">Today</SelectItem>
+                <SelectItem value="week">This Week</SelectItem>
+                <SelectItem value="month">This Month</SelectItem>
+                <SelectItem value="custom">Custom Range</SelectItem>
+              </SelectContent>
+            </Select>
+            
+            {/* Custom Date Range Picker */}
+            {dateRange === 'custom' && (
+              <Popover open={showCustomDatePicker} onOpenChange={onShowCustomDatePickerChange}>
+                <PopoverTrigger asChild>
+                  <Button variant="outline" size="sm" className="gap-2" data-testid="custom-date-trigger">
+                    <CalendarIcon className="w-4 h-4" />
+                    {tempCustomStartDate && tempCustomEndDate 
+                      ? `${format(tempCustomStartDate, 'MMM d')} - ${format(tempCustomEndDate, 'MMM d')}`
+                      : 'Select dates'}
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent className="w-auto p-4" align="start" sideOffset={8}>
+                  <div className="space-y-4">
+                    <div className="space-y-3">
+                      <div className="space-y-2">
+                        <Label htmlFor="start-date" className="text-sm font-medium">Start Date</Label>
+                        <Input
+                          id="start-date"
+                          type="date"
+                          value={tempCustomStartDate ? format(tempCustomStartDate, 'yyyy-MM-dd') : ''}
+                          onChange={(e) => {
+                            const date = e.target.value ? new Date(e.target.value) : undefined;
+                            if (date) {
+                              onTempStartDateChange(date);
+                              if (tempCustomEndDate && date > tempCustomEndDate) {
+                                onTempEndDateChange(date);
+                              }
+                            } else {
+                              onTempStartDateChange(undefined);
+                            }
+                          }}
+                          max={format(new Date(), 'yyyy-MM-dd')}
+                          className="w-full"
+                        />
+                      </div>
+                      <div className="space-y-2">
+                        <Label htmlFor="end-date" className="text-sm font-medium">End Date</Label>
+                        <Input
+                          id="end-date"
+                          type="date"
+                          value={tempCustomEndDate ? format(tempCustomEndDate, 'yyyy-MM-dd') : ''}
+                          onChange={(e) => {
+                            const date = e.target.value ? new Date(e.target.value) : undefined;
+                            if (date) {
+                              onTempEndDateChange(date);
+                              if (tempCustomStartDate && date < tempCustomStartDate) {
+                                onTempStartDateChange(date);
+                              }
+                            } else {
+                              onTempEndDateChange(undefined);
+                            }
+                          }}
+                          min={tempCustomStartDate ? format(tempCustomStartDate, 'yyyy-MM-dd') : undefined}
+                          max={format(new Date(), 'yyyy-MM-dd')}
+                          className="w-full"
+                        />
+                      </div>
+                    </div>
+                    <div className="flex gap-2 pt-2 border-t">
+                      <Button 
+                        size="sm" 
+                        onClick={onApplyCustomDate}
+                        disabled={!tempCustomStartDate || !tempCustomEndDate}
+                        className="flex-1 bg-re-green hover:bg-re-green/90"
+                        data-testid="apply-date-button"
+                      >
+                        Apply
+                      </Button>
+                      <Button 
+                        size="sm" 
+                        variant="outline"
+                        onClick={() => {
+                          onShowCustomDatePickerChange(false);
+                          onTempStartDateChange(customStartDate);
+                          onTempEndDateChange(customEndDate);
+                          if (!customStartDate || !customEndDate) {
+                            onDateRangeChange('month');
+                          }
+                        }}
+                        data-testid="cancel-date-button"
+                      >
+                        Cancel
+                      </Button>
+                    </div>
+                  </div>
+                </PopoverContent>
+              </Popover>
+            )}
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
diff --git a/src/pages/ApproverPerformance/components/ApproverPerformanceHeader.tsx b/src/pages/ApproverPerformance/components/ApproverPerformanceHeader.tsx
new file mode 100644
index 0000000..64adecc
--- /dev/null
+++ b/src/pages/ApproverPerformance/components/ApproverPerformanceHeader.tsx
@@ -0,0 +1,44 @@
+/**
+ * Approver Performance Header Component
+ */
+
+import { RefreshCw, Users } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+
+interface ApproverPerformanceHeaderProps {
+  approverName: string;
+  refreshing: boolean;
+  onRefresh: () => void;
+}
+
+export function ApproverPerformanceHeader({
+  approverName,
+  refreshing,
+  onRefresh
+}: ApproverPerformanceHeaderProps) {
+  return (
+    <div className="flex items-center justify-between" data-testid="approver-performance-header">
+      <div className="flex items-center gap-3">
+        <div className="p-3 bg-yellow-100 rounded-lg">
+          <Users className="h-6 w-6 text-yellow-600" />
+        </div>
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900">Approver Performance Report</h1>
+          <p className="text-sm text-gray-600">{approverName}</p>
+        </div>
+      </div>
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={onRefresh}
+        disabled={refreshing}
+        className="gap-2"
+        data-testid="refresh-button"
+      >
+        <RefreshCw className={`w-4 h-4 ${refreshing ? 'animate-spin' : ''}`} />
+        <span className="hidden sm:inline">Refresh</span>
+      </Button>
+    </div>
+  );
+}
+
diff --git a/src/pages/ApproverPerformance/components/ApproverPerformanceRequestList.tsx b/src/pages/ApproverPerformance/components/ApproverPerformanceRequestList.tsx
new file mode 100644
index 0000000..d4f99c1
--- /dev/null
+++ b/src/pages/ApproverPerformance/components/ApproverPerformanceRequestList.tsx
@@ -0,0 +1,192 @@
+/**
+ * Approver Performance Request List Component
+ */
+
+import { useNavigate } from 'react-router-dom';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { FileText, RefreshCw, ArrowRight, CheckCircle, XCircle, Clock, User, Target, Timer } from 'lucide-react';
+import { Pagination } from '@/components/common/Pagination';
+import { getPriorityConfig, getStatusConfig, getSLAConfig } from '../utils/configMappers';
+import { formatDate, formatDateTime } from '../utils/formatters';
+import { formatHoursMinutes } from '@/utils/slaTracker';
+import type { ApproverPerformanceRequest } from '../types/approverPerformance.types';
+
+interface ApproverPerformanceRequestListProps {
+  requests: ApproverPerformanceRequest[];
+  loading: boolean;
+  approverName: string;
+  currentPage: number;
+  totalPages: number;
+  totalRecords: number;
+  itemsPerPage: number;
+  onPageChange: (page: number) => void;
+}
+
+export function ApproverPerformanceRequestList({
+  requests,
+  loading,
+  approverName,
+  currentPage,
+  totalPages,
+  totalRecords,
+  itemsPerPage,
+  onPageChange
+}: ApproverPerformanceRequestListProps) {
+  const navigate = useNavigate();
+
+  return (
+    <Card data-testid="approver-performance-request-list">
+      <CardHeader>
+        <CardTitle>Request Details</CardTitle>
+        <CardDescription>
+          All requests handled by {approverName} with applied filters
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        {loading ? (
+          <div className="flex items-center justify-center py-12" data-testid="loading-state">
+            <RefreshCw className="w-6 h-6 animate-spin text-gray-400" />
+            <span className="ml-2 text-sm text-gray-600">Loading requests...</span>
+          </div>
+        ) : requests.length === 0 ? (
+          <div className="text-center py-12 text-gray-500" data-testid="empty-state">
+            <FileText className="w-12 h-12 mx-auto mb-4 text-gray-400" />
+            <p className="text-sm">No requests found for this approver</p>
+          </div>
+        ) : (
+          <div className="space-y-4">
+            {requests.map((request) => {
+              const priorityConfig = getPriorityConfig(request.priority);
+              const statusConfig = getStatusConfig(request.status);
+              const slaConfig = getSLAConfig(request.slaStatus || '');
+              const PriorityIcon = priorityConfig.icon;
+              const StatusIcon = statusConfig.icon;
+              
+              return (
+                <Card 
+                  key={request.requestId} 
+                  className="hover:shadow-md transition-shadow cursor-pointer"
+                  onClick={() => navigate(`/request/${request.requestId}`)}
+                  data-testid={`request-card-${request.requestId}`}
+                >
+                  <CardContent className="p-4">
+                    <div className="flex items-start justify-between gap-4">
+                      <div className="flex-1 min-w-0">
+                        <div className="flex items-center gap-3 mb-2 flex-wrap">
+                          <span className="font-semibold text-sm text-blue-600 hover:underline" data-testid="request-number">
+                            {request.requestNumber}
+                          </span>
+                          <Badge className={priorityConfig.color} data-testid="priority-badge">
+                            <PriorityIcon className={`w-3 h-3 mr-1 ${priorityConfig.iconColor}`} />
+                            {request.priority}
+                          </Badge>
+                          <Badge className={statusConfig.color} data-testid="status-badge">
+                            <StatusIcon className={`w-3 h-3 mr-1 ${statusConfig.iconColor}`} />
+                            {request.status}
+                          </Badge>
+                          {/* Show approver's action status */}
+                          {request.approvalStatus && (
+                            <Badge className={
+                              request.approvalStatus === 'approved' || request.approvalStatus === 'APPROVED'
+                                ? 'bg-green-100 text-green-800 border-green-200'
+                                : request.approvalStatus === 'rejected' || request.approvalStatus === 'REJECTED'
+                                ? 'bg-red-100 text-red-800 border-red-200'
+                                : 'bg-yellow-100 text-yellow-800 border-yellow-200'
+                            } data-testid="approval-status-badge">
+                              {request.approvalStatus === 'approved' || request.approvalStatus === 'APPROVED' ? (
+                                <>
+                                  <CheckCircle className="w-3 h-3 mr-1" />
+                                  Approved
+                                </>
+                              ) : request.approvalStatus === 'rejected' || request.approvalStatus === 'REJECTED' ? (
+                                <>
+                                  <XCircle className="w-3 h-3 mr-1" />
+                                  Rejected
+                                </>
+                              ) : (
+                                <>
+                                  <Clock className="w-3 h-3 mr-1" />
+                                  Pending
+                                </>
+                              )}
+                            </Badge>
+                          )}
+                          {request.slaStatus && (
+                            <Badge className={slaConfig.color} data-testid="sla-status-badge">
+                              {slaConfig.label}
+                            </Badge>
+                          )}
+                        </div>
+                        <h3 className="font-medium text-gray-900 mb-1 truncate" data-testid="request-title">
+                          {request.title}
+                        </h3>
+                        <div className="flex flex-wrap items-center gap-4 text-xs text-gray-500 mt-2">
+                          <span className="flex items-center gap-1" data-testid="initiator-info">
+                            <User className="w-3 h-3" />
+                            {request.initiatorName}
+                            {request.initiatorDepartment && (
+                              <span className="ml-1">({request.initiatorDepartment})</span>
+                            )}
+                          </span>
+                          <span className="flex items-center gap-1" data-testid="submission-date">
+                            <Clock className="w-3 h-3" />
+                            Submitted: {formatDate(request.submissionDate)}
+                          </span>
+                          {request.approvalActionDate && (
+                            <span className="flex items-center gap-1" data-testid="action-date">
+                              <CheckCircle className="w-3 h-3" />
+                              Action: {formatDateTime(request.approvalActionDate)}
+                            </span>
+                          )}
+                          <span className="flex items-center gap-1" data-testid="approval-level">
+                            <Target className="w-3 h-3" />
+                            Level {request.levelNumber} of {request.totalLevels}
+                          </span>
+                          {request.levelElapsedHours && request.levelElapsedHours > 0 && (
+                            <span className="flex items-center gap-1" data-testid="tat-info">
+                              <Timer className="w-3 h-3" />
+                              {formatHoursMinutes(request.levelElapsedHours)} / {formatHoursMinutes(request.levelTatHours || 0)} TAT
+                            </span>
+                          )}
+                        </div>
+                      </div>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          navigate(`/request/${request.requestId}`);
+                        }}
+                        data-testid="view-request-button"
+                      >
+                        <ArrowRight className="w-4 h-4" />
+                      </Button>
+                    </div>
+                  </CardContent>
+                </Card>
+              );
+            })}
+          </div>
+        )}
+        
+        {/* Pagination */}
+        {totalPages > 0 && (
+          <div className="mt-6" data-testid="pagination-container">
+            <Pagination
+              currentPage={currentPage}
+              totalPages={totalPages}
+              totalRecords={totalRecords}
+              itemsPerPage={itemsPerPage}
+              onPageChange={onPageChange}
+              itemLabel="requests"
+              testIdPrefix="approver-performance"
+            />
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
diff --git a/src/pages/ApproverPerformance/components/ApproverPerformanceStatsCards.tsx b/src/pages/ApproverPerformance/components/ApproverPerformanceStatsCards.tsx
new file mode 100644
index 0000000..91aca29
--- /dev/null
+++ b/src/pages/ApproverPerformance/components/ApproverPerformanceStatsCards.tsx
@@ -0,0 +1,112 @@
+/**
+ * Approver Performance Overview Stats Cards Component
+ */
+
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Progress } from '@/components/ui/progress';
+import { CheckCircle, Clock, Target, Timer } from 'lucide-react';
+import type { ApproverPerformance } from '@/services/dashboard.service';
+import type { ApproverPerformanceStats } from '../types/approverPerformance.types';
+
+interface ApproverPerformanceStatsCardsProps {
+  approverStats: ApproverPerformance | null;
+  calculatedStats: ApproverPerformanceStats;
+}
+
+export function ApproverPerformanceStatsCards({
+  approverStats,
+  calculatedStats
+}: ApproverPerformanceStatsCardsProps) {
+  if (!approverStats) return null;
+
+  const tatCompliance = approverStats?.tatCompliancePercent ?? calculatedStats.tatComplianceRate;
+
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4" data-testid="approver-stats-cards">
+      <Card>
+        <CardHeader className="pb-3">
+          <CardTitle className="text-sm font-medium text-gray-600">TAT Compliance</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="flex items-center justify-between">
+            <div className="text-3xl font-bold text-gray-900">
+              {tatCompliance}%
+            </div>
+            <div className={`p-2 rounded-lg ${
+              tatCompliance >= 95 ? 'bg-green-100' :
+              tatCompliance >= 90 ? 'bg-blue-100' :
+              tatCompliance >= 85 ? 'bg-orange-100' : 'bg-red-100'
+            }`}>
+              <Target className={`w-5 h-5 ${
+                tatCompliance >= 95 ? 'text-green-600' :
+                tatCompliance >= 90 ? 'text-blue-600' :
+                tatCompliance >= 85 ? 'text-orange-600' : 'text-red-600'
+              }`} />
+            </div>
+          </div>
+          <Progress 
+            value={tatCompliance} 
+            className="mt-2 h-2"
+          />
+        </CardContent>
+      </Card>
+      
+      <Card>
+        <CardHeader className="pb-3">
+          <CardTitle className="text-sm font-medium text-gray-600">Total Approved</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="flex items-center justify-between">
+            <div className="text-3xl font-bold text-gray-900">
+              {approverStats.totalApproved}
+            </div>
+            <div className="p-2 bg-blue-100 rounded-lg">
+              <CheckCircle className="w-5 h-5 text-blue-600" />
+            </div>
+          </div>
+          <p className="text-xs text-gray-500 mt-1">Requests handled</p>
+        </CardContent>
+      </Card>
+      
+      <Card>
+        <CardHeader className="pb-3">
+          <CardTitle className="text-sm font-medium text-gray-600">Avg Response Time</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="flex items-center justify-between">
+            <div className="text-3xl font-bold text-gray-900">
+              {approverStats.avgResponseHours.toFixed(1)}h
+            </div>
+            <div className="p-2 bg-purple-100 rounded-lg">
+              <Timer className="w-5 h-5 text-purple-600" />
+            </div>
+          </div>
+          <p className="text-xs text-gray-500 mt-1">
+            {approverStats.avgResponseHours < 24 
+              ? `${(approverStats.avgResponseHours / 8).toFixed(1)} working days`
+              : `${(approverStats.avgResponseHours / 24).toFixed(1)} days`
+            }
+          </p>
+        </CardContent>
+      </Card>
+      
+      <Card>
+        <CardHeader className="pb-3">
+          <CardTitle className="text-sm font-medium text-gray-600">Pending Actions</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="flex items-center justify-between">
+            <div className="text-3xl font-bold text-gray-900">
+              {approverStats.pendingCount}
+            </div>
+            <div className="p-2 bg-orange-100 rounded-lg">
+              <Clock className="w-5 h-5 text-orange-600" />
+            </div>
+          </div>
+          <p className="text-xs text-gray-500 mt-1">Awaiting approval</p>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
diff --git a/src/pages/ApproverPerformance/hooks/useApproverPerformanceData.ts b/src/pages/ApproverPerformance/hooks/useApproverPerformanceData.ts
new file mode 100644
index 0000000..365ff95
--- /dev/null
+++ b/src/pages/ApproverPerformance/hooks/useApproverPerformanceData.ts
@@ -0,0 +1,196 @@
+/**
+ * Hook for fetching and managing Approver Performance data
+ */
+
+import { useState, useCallback, useEffect, useRef } from 'react';
+import type { DateRange } from '@/services/dashboard.service';
+import type { ApproverPerformance } from '@/services/dashboard.service';
+import dashboardService from '@/services/dashboard.service';
+import type { ApproverPerformanceRequest } from '../types/approverPerformance.types';
+
+interface UseApproverPerformanceDataOptions {
+  approverId: string;
+  dateRange: DateRange;
+  customStartDate?: Date;
+  customEndDate?: Date;
+  statusFilter: string;
+  priorityFilter: string;
+  slaComplianceFilter: string;
+  searchTerm: string;
+  itemsPerPage: number;
+}
+
+export function useApproverPerformanceData({
+  approverId,
+  dateRange,
+  customStartDate,
+  customEndDate,
+  statusFilter,
+  priorityFilter,
+  slaComplianceFilter,
+  searchTerm,
+  itemsPerPage
+}: UseApproverPerformanceDataOptions) {
+  const [requests, setRequests] = useState<ApproverPerformanceRequest[]>([]);
+  const [approverStats, setApproverStats] = useState<ApproverPerformance | null>(null);
+  const [allFilteredRequests, setAllFilteredRequests] = useState<ApproverPerformanceRequest[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [refreshing, setRefreshing] = useState(false);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [totalPages, setTotalPages] = useState(1);
+  const [totalRecords, setTotalRecords] = useState(0);
+
+  const isInitialMount = useRef(true);
+
+  // Fetch approver performance stats
+  const fetchApproverStats = useCallback(async () => {
+    if (!approverId) return;
+    
+    try {
+      const result = await dashboardService.getApproverPerformance(
+        dateRange,
+        1,
+        100,
+        customStartDate,
+        customEndDate
+      );
+      
+      const approver = result.performance.find((p: ApproverPerformance) => p.approverId === approverId);
+      if (approver) {
+        setApproverStats(approver);
+      }
+    } catch (error) {
+      console.error('Failed to fetch approver stats:', error);
+    }
+  }, [approverId, dateRange, customStartDate, customEndDate]);
+  
+  // Fetch requests for this approver
+  const fetchRequests = useCallback(async (page: number = 1) => {
+    if (!approverId) {
+      setLoading(false);
+      return;
+    }
+    
+    try {
+      setLoading(true);
+      
+      // Fetch current page only (server-side pagination)
+      const result = await dashboardService.getRequestsByApprover(
+        approverId,
+        page,
+        itemsPerPage,
+        dateRange,
+        customStartDate,
+        customEndDate,
+        statusFilter !== 'all' ? statusFilter : undefined,
+        priorityFilter !== 'all' ? priorityFilter : undefined,
+        slaComplianceFilter !== 'all' ? slaComplianceFilter : undefined,
+        searchTerm || undefined
+      );
+      
+      setRequests(result.requests);
+      setTotalRecords(result.pagination.totalRecords);
+      setTotalPages(result.pagination.totalPages);
+      setCurrentPage(page);
+      
+      // For stats calculation, fetch ALL data (without pagination)
+      const statsResult = await dashboardService.getRequestsByApprover(
+        approverId,
+        1,
+        10000,
+        dateRange,
+        customStartDate,
+        customEndDate,
+        statusFilter !== 'all' ? statusFilter : undefined,
+        priorityFilter !== 'all' ? priorityFilter : undefined,
+        slaComplianceFilter !== 'all' ? slaComplianceFilter : undefined,
+        searchTerm || undefined
+      );
+      
+      setAllFilteredRequests(statsResult.requests);
+    } catch (error) {
+      console.error('Failed to fetch requests:', error);
+    } finally {
+      setLoading(false);
+      setRefreshing(false);
+    }
+  }, [
+    approverId,
+    dateRange,
+    customStartDate,
+    customEndDate,
+    statusFilter,
+    priorityFilter,
+    slaComplianceFilter,
+    searchTerm,
+    itemsPerPage
+  ]);
+
+  // Initial fetch
+  useEffect(() => {
+    if (isInitialMount.current) {
+      isInitialMount.current = false;
+      fetchApproverStats();
+      fetchRequests(1);
+    }
+  }, []); // Only run on mount
+
+  // Refetch when filters change
+  useEffect(() => {
+    if (!isInitialMount.current) {
+      fetchApproverStats();
+      fetchRequests(1);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    dateRange,
+    customStartDate,
+    customEndDate,
+    statusFilter,
+    priorityFilter,
+    slaComplianceFilter,
+    searchTerm
+    // fetchApproverStats and fetchRequests excluded to prevent infinite loops
+  ]);
+
+  const handleRefresh = useCallback(() => {
+    setRefreshing(true);
+    fetchApproverStats();
+    fetchRequests(1);
+  }, [fetchApproverStats, fetchRequests]);
+
+  const handlePageChange = useCallback((page: number) => {
+    setCurrentPage(page);
+    // Use client-side pagination since we have allFilteredRequests
+    const startIdx = (page - 1) * itemsPerPage;
+    const endIdx = startIdx + itemsPerPage;
+    const paginatedRequests = allFilteredRequests.slice(startIdx, endIdx);
+    setRequests(paginatedRequests);
+  }, [allFilteredRequests, itemsPerPage]);
+
+  // Update paginated data when allFilteredRequests changes
+  useEffect(() => {
+    const startIdx = (currentPage - 1) * itemsPerPage;
+    const endIdx = startIdx + itemsPerPage;
+    const paginatedRequests = allFilteredRequests.slice(startIdx, endIdx);
+    setRequests(paginatedRequests);
+    setTotalPages(Math.ceil(allFilteredRequests.length / itemsPerPage));
+    if (currentPage > Math.ceil(allFilteredRequests.length / itemsPerPage) && allFilteredRequests.length > 0) {
+      setCurrentPage(1);
+    }
+  }, [allFilteredRequests, currentPage, itemsPerPage]);
+
+  return {
+    requests,
+    approverStats,
+    allFilteredRequests,
+    loading,
+    refreshing,
+    currentPage,
+    totalPages,
+    totalRecords,
+    handleRefresh,
+    handlePageChange
+  };
+}
+
diff --git a/src/pages/ApproverPerformance/hooks/useApproverPerformanceFilters.ts b/src/pages/ApproverPerformance/hooks/useApproverPerformanceFilters.ts
new file mode 100644
index 0000000..7eb0177
--- /dev/null
+++ b/src/pages/ApproverPerformance/hooks/useApproverPerformanceFilters.ts
@@ -0,0 +1,101 @@
+/**
+ * Hook for managing Approver Performance filters
+ */
+
+import { useState, useCallback } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import type { DateRange } from '@/services/dashboard.service';
+
+export function useApproverPerformanceFilters() {
+  const [searchParams] = useSearchParams();
+
+  const [searchTerm, setSearchTerm] = useState('');
+  const [statusFilter, setStatusFilter] = useState<string>(searchParams.get('status') || 'all');
+  const [priorityFilter, setPriorityFilter] = useState<string>(searchParams.get('priority') || 'all');
+  const [slaComplianceFilter, setSlaComplianceFilter] = useState<string>(searchParams.get('slaCompliance') || 'all');
+  const [dateRange, setDateRange] = useState<DateRange>((searchParams.get('dateRange') as DateRange) || 'month');
+  const [customStartDate, setCustomStartDate] = useState<Date | undefined>(
+    searchParams.get('startDate') ? new Date(searchParams.get('startDate')!) : undefined
+  );
+  const [customEndDate, setCustomEndDate] = useState<Date | undefined>(
+    searchParams.get('endDate') ? new Date(searchParams.get('endDate')!) : undefined
+  );
+  const [showCustomDatePicker, setShowCustomDatePicker] = useState(false);
+  const [tempCustomStartDate, setTempCustomStartDate] = useState<Date | undefined>(undefined);
+  const [tempCustomEndDate, setTempCustomEndDate] = useState<Date | undefined>(undefined);
+
+  const clearFilters = useCallback(() => {
+    setSearchTerm('');
+    setStatusFilter('all');
+    setPriorityFilter('all');
+    setSlaComplianceFilter('all');
+    setDateRange('month');
+    setCustomStartDate(undefined);
+    setCustomEndDate(undefined);
+    setTempCustomStartDate(undefined);
+    setTempCustomEndDate(undefined);
+    setShowCustomDatePicker(false);
+  }, []);
+
+  const handleDateRangeChange = useCallback((value: string) => {
+    const newRange = value as DateRange;
+    setDateRange(newRange);
+    if (newRange !== 'custom') {
+      setCustomStartDate(undefined);
+      setCustomEndDate(undefined);
+      setTempCustomStartDate(undefined);
+      setTempCustomEndDate(undefined);
+      setShowCustomDatePicker(false);
+    } else {
+      setTempCustomStartDate(customStartDate);
+      setTempCustomEndDate(customEndDate);
+      setShowCustomDatePicker(true);
+    }
+  }, [customStartDate, customEndDate]);
+
+  const handleApplyCustomDate = useCallback(() => {
+    if (tempCustomStartDate && tempCustomEndDate) {
+      if (tempCustomStartDate > tempCustomEndDate) {
+        const temp = tempCustomStartDate;
+        setCustomStartDate(tempCustomEndDate);
+        setCustomEndDate(temp);
+        setTempCustomStartDate(tempCustomEndDate);
+        setTempCustomEndDate(temp);
+      } else {
+        setCustomStartDate(tempCustomStartDate);
+        setCustomEndDate(tempCustomEndDate);
+      }
+      setShowCustomDatePicker(false);
+    }
+  }, [tempCustomStartDate, tempCustomEndDate]);
+
+  return {
+    // State
+    searchTerm,
+    statusFilter,
+    priorityFilter,
+    slaComplianceFilter,
+    dateRange,
+    customStartDate,
+    customEndDate,
+    showCustomDatePicker,
+    tempCustomStartDate,
+    tempCustomEndDate,
+    // Setters
+    setSearchTerm,
+    setStatusFilter,
+    setPriorityFilter,
+    setSlaComplianceFilter,
+    setDateRange,
+    setCustomStartDate,
+    setCustomEndDate,
+    setShowCustomDatePicker,
+    setTempCustomStartDate,
+    setTempCustomEndDate,
+    // Helpers
+    clearFilters,
+    handleDateRangeChange,
+    handleApplyCustomDate
+  };
+}
+
diff --git a/src/pages/ApproverPerformance/types/approverPerformance.types.ts b/src/pages/ApproverPerformance/types/approverPerformance.types.ts
new file mode 100644
index 0000000..d826963
--- /dev/null
+++ b/src/pages/ApproverPerformance/types/approverPerformance.types.ts
@@ -0,0 +1,48 @@
+/**
+ * Type definitions for Approver Performance page
+ */
+
+import type { ApproverPerformance } from '@/services/dashboard.service';
+
+export interface ApproverPerformanceStats {
+  total: number;
+  approvedByApprover: number;
+  rejectedByApprover: number;
+  pendingByApprover: number;
+  breached: number;
+  compliant: number;
+  approvalRate: number;
+  rejectionRate: number;
+  tatComplianceRate: number;
+  completedActions: number;
+}
+
+export interface ApproverPerformanceRequest {
+  requestId: string;
+  requestNumber: string;
+  title: string;
+  priority: string;
+  status: string;
+  approvalStatus?: string;
+  slaStatus?: string;
+  initiatorName?: string;
+  initiatorDepartment?: string;
+  submissionDate?: string | Date;
+  approvalActionDate?: string | Date;
+  levelNumber?: number;
+  totalLevels?: number;
+  levelElapsedHours?: number;
+  levelTatHours?: number;
+  isBreached?: boolean | number;
+}
+
+export interface ApproverPerformanceFilters {
+  search?: string;
+  status?: string;
+  priority?: string;
+  slaCompliance?: string;
+  dateRange?: string;
+  startDate?: Date;
+  endDate?: Date;
+}
+
diff --git a/src/pages/ApproverPerformance/utils/configMappers.ts b/src/pages/ApproverPerformance/utils/configMappers.ts
new file mode 100644
index 0000000..469906b
--- /dev/null
+++ b/src/pages/ApproverPerformance/utils/configMappers.ts
@@ -0,0 +1,101 @@
+/**
+ * Configuration mappers for priority, status, and SLA badges
+ */
+
+import { TrendingUp, Target, CheckCircle, XCircle, Clock, FileText } from 'lucide-react';
+
+export const getPriorityConfig = (priority: string) => {
+  switch (priority) {
+    case 'express':
+      return {
+        color: 'bg-red-100 text-red-800 border-red-200',
+        icon: TrendingUp,
+        iconColor: 'text-red-600'
+      };
+    case 'standard':
+      return {
+        color: 'bg-blue-100 text-blue-800 border-blue-200',
+        icon: Target,
+        iconColor: 'text-blue-600'
+      };
+    default:
+      return {
+        color: 'bg-gray-100 text-gray-800 border-gray-200',
+        icon: Target,
+        iconColor: 'text-gray-600'
+      };
+  }
+};
+
+export const getStatusConfig = (status: string) => {
+  switch (status) {
+    case 'approved':
+      return {
+        color: 'bg-green-100 text-green-800 border-green-200',
+        icon: CheckCircle,
+        iconColor: 'text-green-600'
+      };
+    case 'rejected':
+      return {
+        color: 'bg-red-100 text-red-800 border-red-200',
+        icon: XCircle,
+        iconColor: 'text-red-600'
+      };
+    case 'pending':
+      return {
+        color: 'bg-yellow-100 text-yellow-800 border-yellow-200',
+        icon: Clock,
+        iconColor: 'text-yellow-600'
+      };
+    case 'in-progress':
+      return {
+        color: 'bg-blue-100 text-blue-800 border-blue-200',
+        icon: Clock,
+        iconColor: 'text-blue-600'
+      };
+    case 'closed':
+      return {
+        color: 'bg-gray-100 text-gray-800 border-gray-200',
+        icon: CheckCircle,
+        iconColor: 'text-gray-600'
+      };
+    default:
+      return {
+        color: 'bg-gray-100 text-gray-800 border-gray-200',
+        icon: FileText,
+        iconColor: 'text-gray-600'
+      };
+  }
+};
+
+export const getSLAConfig = (status: string) => {
+  switch (status) {
+    case 'breached':
+      return {
+        color: 'bg-red-100 text-red-800 border-red-200',
+        label: 'Breached'
+      };
+    case 'critical':
+      return {
+        color: 'bg-orange-100 text-orange-800 border-orange-200',
+        label: 'Critical'
+      };
+    case 'approaching':
+      return {
+        color: 'bg-yellow-100 text-yellow-800 border-yellow-200',
+        label: 'Approaching'
+      };
+    case 'on_track':
+    case 'on-track':
+      return {
+        color: 'bg-green-100 text-green-800 border-green-200',
+        label: 'On Track'
+      };
+    default:
+      return {
+        color: 'bg-gray-100 text-gray-800 border-gray-200',
+        label: 'N/A'
+      };
+  }
+};
+
diff --git a/src/pages/ApproverPerformance/utils/formatters.ts b/src/pages/ApproverPerformance/utils/formatters.ts
new file mode 100644
index 0000000..97c90d5
--- /dev/null
+++ b/src/pages/ApproverPerformance/utils/formatters.ts
@@ -0,0 +1,24 @@
+/**
+ * Date and time formatting utilities
+ */
+
+import { format } from 'date-fns';
+
+export function formatDate(date: string | Date | null | undefined): string {
+  if (!date) return 'N/A';
+  try {
+    return format(new Date(date), 'MMM d, yyyy');
+  } catch {
+    return 'N/A';
+  }
+}
+
+export function formatDateTime(date: string | Date | null | undefined): string {
+  if (!date) return 'N/A';
+  try {
+    return format(new Date(date), 'MMM d, yyyy HH:mm');
+  } catch {
+    return 'N/A';
+  }
+}
+
diff --git a/src/pages/ApproverPerformance/utils/statsCalculations.ts b/src/pages/ApproverPerformance/utils/statsCalculations.ts
new file mode 100644
index 0000000..9661832
--- /dev/null
+++ b/src/pages/ApproverPerformance/utils/statsCalculations.ts
@@ -0,0 +1,85 @@
+/**
+ * Statistics calculation utilities for approver performance
+ */
+
+import type { ApproverPerformanceStats, ApproverPerformanceRequest } from '../types/approverPerformance.types';
+
+export function calculateApproverStats(
+  allFilteredRequests: ApproverPerformanceRequest[]
+): ApproverPerformanceStats {
+  const filtered = allFilteredRequests;
+  
+  // Count by approver's approval status (what the approver actually did)
+  const approvedByApprover = filtered.filter(r => {
+    const status = (r.approvalStatus || '').toLowerCase();
+    return status === 'approved';
+  }).length;
+  
+  const rejectedByApprover = filtered.filter(r => {
+    const status = (r.approvalStatus || '').toLowerCase();
+    return status === 'rejected';
+  }).length;
+  
+  const pendingByApprover = filtered.filter(r => {
+    const status = (r.approvalStatus || '').toLowerCase();
+    return ['pending', 'in_progress', 'in-progress'].includes(status);
+  }).length;
+  
+  // TAT compliance stats - check isBreached flag OR slaStatus === 'breached'
+  // This includes pending requests that have breached their TAT
+  const breached = filtered.filter(r => {
+    const isBreached = r.isBreached === true || r.isBreached === 1;
+    const slaStatusBreached = (r.slaStatus || '').toLowerCase() === 'breached';
+    return isBreached || slaStatusBreached;
+  }).length;
+  
+  // Compliant: completed actions (approved/rejected) that are NOT breached
+  // OR pending requests that haven't breached yet
+  const compliant = filtered.filter(r => {
+    const status = (r.approvalStatus || '').toLowerCase();
+    const isCompleted = status === 'approved' || status === 'rejected';
+    const isPending = ['pending', 'in_progress', 'in-progress'].includes(status);
+    const isNotBreached = !(r.isBreached === true || r.isBreached === 1) && 
+                         (r.slaStatus || '').toLowerCase() !== 'breached';
+    
+    // Completed and not breached = compliant
+    // Pending and not breached = also counts as compliant (hasn't breached yet)
+    return (isCompleted && isNotBreached) || (isPending && isNotBreached);
+  }).length;
+  
+  // Calculate approval rate (based on completed actions)
+  const completedActions = approvedByApprover + rejectedByApprover;
+  const approvalRate = completedActions > 0 
+    ? Math.round((approvedByApprover / completedActions) * 100) 
+    : 0;
+  
+  // Calculate rejection rate
+  const rejectionRate = completedActions > 0 
+    ? Math.round((rejectedByApprover / completedActions) * 100) 
+    : 0;
+  
+  // Calculate TAT compliance rate
+  // Use total requests (not just completed) to include pending requests in compliance calculation
+  // Use Math.floor to ensure consistent rounding with dashboard (prevents 79.5% vs 80% discrepancy)
+  const totalForCompliance = filtered.length;
+  const tatComplianceRate = totalForCompliance > 0 
+    ? Math.floor((compliant / totalForCompliance) * 100) 
+    : 0;
+  
+  return {
+    total: filtered.length,
+    // Approver's actions
+    approvedByApprover,
+    rejectedByApprover,
+    pendingByApprover,
+    // TAT stats
+    breached,
+    compliant,
+    // Rates
+    approvalRate,
+    rejectionRate,
+    tatComplianceRate,
+    completedActions
+  };
+}
+
diff --git a/src/pages/ClosedRequests/ClosedRequests.tsx b/src/pages/ClosedRequests/ClosedRequests.tsx
index 0f5e638..5967794 100644
--- a/src/pages/ClosedRequests/ClosedRequests.tsx
+++ b/src/pages/ClosedRequests/ClosedRequests.tsx
@@ -1,599 +1,118 @@
-import { useEffect, useState, useCallback } from 'react';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { Avatar, AvatarFallback } from '@/components/ui/avatar';
-import { Calendar, Filter, Search, FileText, AlertCircle, CheckCircle, ArrowRight, SortAsc, SortDesc, Flame, Target, RefreshCw, X, XCircle } from 'lucide-react';
-import workflowApi from '@/services/workflowApi';
-import { formatDateTime } from '@/utils/dateFormatter';
+import { useCallback, useRef } from 'react';
 
-interface Request {
-  id: string;
-  title: string;
-  description: string;
-  status: 'approved' | 'rejected' | 'closed';
-  priority: 'express' | 'standard';
-  initiator: { name: string; avatar: string };
-  createdAt: string;
-  dueDate?: string;
-  reason?: string;
-  department?: string;
-  totalLevels?: number;
-  completedLevels?: number;
-}
+// Components
+import { ClosedRequestsHeader } from './components/ClosedRequestsHeader';
+import { ClosedRequestsFilters as ClosedRequestsFiltersComponent } from './components/ClosedRequestsFilters';
+import { ClosedRequestsList } from './components/ClosedRequestsList';
+import { ClosedRequestsEmpty } from './components/ClosedRequestsEmpty';
+import { ClosedRequestsPagination } from './components/ClosedRequestsPagination';
 
-interface ClosedRequestsProps {
-  onViewRequest?: (requestId: string, requestTitle?: string) => void;
-}
+// Hooks
+import { useClosedRequests } from './hooks/useClosedRequests';
+import { useClosedRequestsFilters } from './hooks/useClosedRequestsFilters';
 
-// Removed static data; will load from API
-
-// Utility functions
-const getPriorityConfig = (priority: string) => {
-  switch (priority) {
-    case 'express':
-      return {
-        color: 'bg-red-100 text-red-800 border-red-200',
-        icon: Flame,
-        iconColor: 'text-red-600'
-      };
-    case 'standard':
-      return {
-        color: 'bg-blue-100 text-blue-800 border-blue-200',
-        icon: Target,
-        iconColor: 'text-blue-600'
-      };
-    default:
-      return {
-        color: 'bg-gray-100 text-gray-800 border-gray-200',
-        icon: Target,
-        iconColor: 'text-gray-600'
-      };
-  }
-};
-
-const getStatusConfig = (status: string) => {
-  switch (status) {
-    case 'approved':
-      return {
-        color: 'bg-emerald-100 text-emerald-800 border-emerald-300',
-        icon: CheckCircle,
-        iconColor: 'text-emerald-600',
-        label: 'Needs Closure',
-        description: 'Fully approved, awaiting initiator to finalize'
-      };
-    case 'closed':
-      return {
-        color: 'bg-slate-100 text-slate-800 border-slate-300',
-        icon: CheckCircle,
-        iconColor: 'text-slate-600',
-        label: 'Closed',
-        description: 'Request finalized and archived'
-      };
-    case 'rejected':
-      return {
-        color: 'bg-red-100 text-red-800 border-red-300',
-        icon: XCircle,
-        iconColor: 'text-red-600',
-        label: 'Rejected',
-        description: 'Request was declined'
-      };
-    default:
-      return {
-        color: 'bg-gray-100 text-gray-800 border-gray-200',
-        icon: AlertCircle,
-        iconColor: 'text-gray-600',
-        label: status,
-        description: ''
-      };
-  }
-};
+// Types
+import type { ClosedRequestsProps } from './types/closedRequests.types';
 
 export function ClosedRequests({ onViewRequest }: ClosedRequestsProps) {
-  const [searchTerm, setSearchTerm] = useState('');
-  const [priorityFilter, setPriorityFilter] = useState('all');
-  const [statusFilter, setStatusFilter] = useState('all');
-  const [sortBy, setSortBy] = useState<'created' | 'due' | 'priority'>('due');
-  const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('desc');
-  const [items, setItems] = useState<Request[]>([]);
-  const [loading, setLoading] = useState(false);
-  const [refreshing, setRefreshing] = useState(false);
-  
-  // Pagination states
-  const [currentPage, setCurrentPage] = useState(1);
-  const [totalPages, setTotalPages] = useState(1);
-  const [totalRecords, setTotalRecords] = useState(0);
-  const [itemsPerPage] = useState(10);
+  // Data fetching hook
+  const closedRequests = useClosedRequests({ itemsPerPage: 10 });
 
-  // Fetch closed requests for the current user only (user-scoped, not organization-wide)
-  // Note: This endpoint returns only requests where the user is:
-  // - An approver (for APPROVED, REJECTED, CLOSED requests)
-  // - A spectator (for APPROVED, REJECTED, CLOSED requests)
-  // - An initiator (for REJECTED or CLOSED requests only, not APPROVED - those are in Open Requests)
-  // This applies to ALL users including regular users, MANAGEMENT, and ADMIN roles
-  // For organization-wide view, users should use the "All Requests" screen (/requests)
-  const fetchRequests = useCallback(async (page: number = 1, filters?: { search?: string; status?: string; priority?: string; sortBy?: string; sortOrder?: string }) => {
-    try {
-      if (page === 1) {
-        setLoading(true);
-        setItems([]);
-      }
-      
-      console.log('[ClosedRequests] Fetching with filters:', { page, filters }); // Debug log
-      
-      // 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.listClosedByMe({ 
-        page, 
-        limit: itemsPerPage,
-        search: filters?.search,
-        status: filters?.status,
-        priority: filters?.priority,
-        sortBy: filters?.sortBy,
-        sortOrder: filters?.sortOrder
-      });
-      console.log('[ClosedRequests] API Response:', result); // Debug log
-      
-      // Extract data - workflowApi now returns { data: [], pagination: {} }
-      const data = Array.isArray((result as any)?.data) 
-        ? (result as any).data 
-        : [];
-      
-      console.log('[ClosedRequests] Parsed data count:', data.length); // Debug log
-      
-      // Set pagination data
-      const pagination = (result as any)?.pagination;
-      if (pagination) {
-        setCurrentPage(pagination.page || 1);
-        setTotalPages(pagination.totalPages || 1);
-        setTotalRecords(pagination.total || 0);
-      }
-      
-      const mapped: Request[] = data.map((r: any) => ({
-        id: r.requestNumber || r.request_number || r.requestId, // Use requestNumber as primary identifier
-        requestId: r.requestId, // Keep requestId for reference
-        displayId: r.requestNumber || r.request_number || r.requestId,
-        title: r.title,
-        description: r.description,
-        status: (r.status || '').toString().toLowerCase(),
-        priority: (r.priority || '').toString().toLowerCase(),
-        initiator: { name: r.initiator?.displayName || r.initiator?.email || '—', avatar: (r.initiator?.displayName || 'NA').split(' ').map((s: string) => s[0]).join('').slice(0,2).toUpperCase() },
-        createdAt: r.submittedAt || r.createdAt || r.created_at || '—',
-        dueDate: r.closureDate || r.closure_date || r.closedAt || undefined,
-        reason: r.conclusionRemark || r.conclusion_remark,
-        department: r.department,
-        totalLevels: r.totalLevels || 0,
-        completedLevels: r.summary?.approvedLevels || 0,
-      }));
-      setItems(mapped);
-    } catch (error) {
-      console.error('[ClosedRequests] Error fetching requests:', error);
-      setItems([]);
-    } finally {
-      setLoading(false);
-      setRefreshing(false);
-    }
-  }, [itemsPerPage]);
+  // Filters hook - use ref to avoid circular dependency
+  const fetchRef = useRef(closedRequests.fetchRequests);
+  fetchRef.current = closedRequests.fetchRequests;
 
-  const handleRefresh = () => {
-    setRefreshing(true);
-    fetchRequests(currentPage, { 
-      search: searchTerm || undefined, 
-      status: statusFilter !== 'all' ? statusFilter : undefined, 
-      priority: priorityFilter !== 'all' ? priorityFilter : undefined,
-      sortBy,
-      sortOrder
+  const filters = useClosedRequestsFilters({
+    onFiltersChange: useCallback(
+      (filters) => {
+        // Reset to page 1 when filters change
+        fetchRef.current(1, {
+          search: filters.search || undefined,
+          status: filters.status !== 'all' ? filters.status : undefined,
+          priority: filters.priority !== 'all' ? filters.priority : undefined,
+          sortBy: filters.sortBy,
+          sortOrder: filters.sortOrder,
+        });
+      },
+      []
+    ),
+  });
+
+  // Page change handler
+  const handlePageChange = useCallback(
+    (newPage: number) => {
+      if (newPage >= 1 && newPage <= closedRequests.pagination.totalPages) {
+        closedRequests.fetchRequests(newPage, {
+          search: filters.searchTerm || undefined,
+          status: filters.statusFilter !== 'all' ? filters.statusFilter : undefined,
+          priority: filters.priorityFilter !== 'all' ? filters.priorityFilter : undefined,
+          sortBy: filters.sortBy,
+          sortOrder: filters.sortOrder,
+        });
+      }
+    },
+    [closedRequests, filters]
+  );
+
+  // Refresh handler
+  const handleRefresh = useCallback(() => {
+    closedRequests.handleRefresh({
+      search: filters.searchTerm || undefined,
+      status: filters.statusFilter !== 'all' ? filters.statusFilter : undefined,
+      priority: filters.priorityFilter !== 'all' ? filters.priorityFilter : undefined,
+      sortBy: filters.sortBy,
+      sortOrder: filters.sortOrder,
     });
-  };
-
-  const handlePageChange = (newPage: number) => {
-    if (newPage >= 1 && newPage <= totalPages) {
-      setCurrentPage(newPage);
-      fetchRequests(newPage, { 
-        search: searchTerm || undefined, 
-        status: statusFilter !== 'all' ? statusFilter : undefined, 
-        priority: priorityFilter !== 'all' ? priorityFilter : undefined,
-        sortBy,
-        sortOrder
-      });
-    }
-  };
-
-  const getPageNumbers = () => {
-    const pages = [];
-    const maxPagesToShow = 5;
-    let startPage = Math.max(1, 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;
-  };
-
-  // Initial fetch on mount and when filters/sorting change (with debouncing for search)
-  useEffect(() => {
-    // Debounce search: wait 500ms after user stops typing
-    const timeoutId = setTimeout(() => {
-      console.log('[ClosedRequests] Filter changed, fetching...', { 
-        searchTerm, 
-        statusFilter, 
-        priorityFilter, 
-        sortBy, 
-        sortOrder 
-      }); // Debug log
-      
-      setCurrentPage(1); // Reset to page 1 when filters change
-      fetchRequests(1, { 
-        search: searchTerm || undefined, 
-        status: statusFilter !== 'all' ? statusFilter : undefined, 
-        priority: priorityFilter !== 'all' ? priorityFilter : undefined,
-        sortBy,
-        sortOrder
-      });
-    }, searchTerm ? 500 : 0); // Debounce only for search, instant for dropdowns
-
-    return () => clearTimeout(timeoutId);
-  }, [searchTerm, statusFilter, priorityFilter, sortBy, sortOrder, fetchRequests]);
-
-  // Backend handles both filtering and sorting - use items directly
-  // No client-side filtering/sorting needed anymore
-  const filteredAndSortedRequests = items;
-
-  const clearFilters = () => {
-    setSearchTerm('');
-    setPriorityFilter('all');
-    setStatusFilter('all');
-  };
-
-  const activeFiltersCount = [
-    searchTerm,
-    priorityFilter !== 'all' ? priorityFilter : null,
-    statusFilter !== 'all' ? statusFilter : null
-  ].filter(Boolean).length;
+  }, [closedRequests, filters]);
 
   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">
-        <div className="space-y-1 sm:space-y-2">
-          <div className="flex items-center gap-2 sm:gap-3">
-            <div className="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-slate-800 to-slate-900 rounded-xl flex items-center justify-center shadow-lg">
-              <FileText className="w-5 h-5 sm:w-6 sm:h-6 text-white" />
-            </div>
-            <div>
-              <h1 className="text-xl sm:text-2xl md:text-3xl font-bold text-gray-900">My Closed Requests</h1>
-              <p className="text-sm sm:text-base text-gray-600">Review your completed and archived requests</p>
-            </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} closed`}
-            <span className="hidden sm:inline ml-1">requests</span>
-          </Badge>
-          <Button 
-            variant="outline" 
-            size="sm" 
-            className="gap-1 sm:gap-2 h-8 sm:h-9"
-            onClick={handleRefresh}
-            disabled={refreshing}
-          >
-            <RefreshCw className={`w-3.5 h-3.5 sm:w-4 sm:h-4 ${refreshing ? 'animate-spin' : ''}`} />
-            <span className="hidden sm:inline">{refreshing ? 'Refreshing...' : 'Refresh'}</span>
-          </Button>
-        </div>
-      </div>
+    <div className="space-y-4 sm:space-y-6 max-w-7xl mx-auto" data-testid="closed-requests-page">
+      {/* Header */}
+      <ClosedRequestsHeader
+        totalRecords={closedRequests.pagination.totalRecords}
+        loading={closedRequests.loading}
+        refreshing={closedRequests.refreshing}
+        onRefresh={handleRefresh}
+      />
 
-      {/* Enhanced Filters Section */}
-      <Card className="shadow-lg border-0">
-        <CardHeader className="pb-3 sm:pb-4 px-3 sm:px-6">
-          <div className="flex items-center justify-between">
-            <div className="flex items-center gap-2 sm:gap-3">
-              <div className="p-1.5 sm:p-2 bg-blue-100 rounded-lg">
-                <Filter className="h-4 w-4 sm:h-5 sm:w-5 text-blue-600" />
-              </div>
-              <div>
-                <CardTitle className="text-base sm:text-lg">Filters & Search</CardTitle>
-                <CardDescription className="text-xs sm:text-sm">
-                  {activeFiltersCount > 0 && (
-                    <span className="text-blue-600 font-medium">
-                      {activeFiltersCount} filter{activeFiltersCount > 1 ? 's' : ''} active
-                    </span>
-                  )}
-                </CardDescription>
-              </div>
-            </div>
-            {activeFiltersCount > 0 && (
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={clearFilters}
-                className="text-red-600 hover:bg-red-50 gap-1 h-8 sm:h-9 px-2 sm:px-3"
-              >
-                <X className="w-3 h-3 sm:w-3.5 sm:h-3.5" />
-                <span className="text-xs sm:text-sm">Clear</span>
-              </Button>
-            )}
-          </div>
-        </CardHeader>
-        <CardContent className="space-y-3 sm:space-y-4 px-3 sm:px-6">
-          {/* Primary filters */}
-          <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
-                placeholder="Search requests, IDs..."
-                value={searchTerm}
-                onChange={(e) => setSearchTerm(e.target.value)}
-                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 transition-colors"
-              />
-            </div>
-            
-            <Select value={priorityFilter} onValueChange={setPriorityFilter}>
-              <SelectTrigger className="h-9 sm:h-10 md:h-11 text-sm sm:text-base bg-gray-50 border-gray-200 focus:bg-white">
-                <SelectValue placeholder="All Priorities" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="all">All Priorities</SelectItem>
-                <SelectItem value="express">
-                  <div className="flex items-center gap-2">
-                    <Flame className="w-4 h-4 text-orange-600" />
-                    <span>Express</span>
-                  </div>
-                </SelectItem>
-                <SelectItem value="standard">
-                  <div className="flex items-center gap-2">
-                    <Target className="w-4 h-4 text-blue-600" />
-                    <span>Standard</span>
-                  </div>
-                </SelectItem>
-              </SelectContent>
-            </Select>
-            
-            <Select value={statusFilter} onValueChange={setStatusFilter}>
-              <SelectTrigger className="h-9 sm:h-10 md:h-11 text-sm sm:text-base bg-gray-50 border-gray-200 focus:bg-white">
-                <SelectValue placeholder="All Statuses" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="all">All Statuses</SelectItem>
-                <SelectItem value="approved">
-                  <div className="flex items-center gap-2">
-                    <CheckCircle className="w-4 h-4 text-green-600" />
-                    <span>Approved</span>
-                  </div>
-                </SelectItem>
-                <SelectItem value="closed">
-                  <div className="flex items-center gap-2">
-                    <CheckCircle className="w-4 h-4 text-gray-600" />
-                    <span>Closed</span>
-                  </div>
-                </SelectItem>
-                <SelectItem value="rejected">
-                  <div className="flex items-center gap-2">
-                    <XCircle className="w-4 h-4 text-red-600" />
-                    <span>Rejected</span>
-                  </div>
-                </SelectItem>
-              </SelectContent>
-            </Select>
+      {/* Filters */}
+      <ClosedRequestsFiltersComponent
+        searchTerm={filters.searchTerm}
+        priorityFilter={filters.priorityFilter}
+        statusFilter={filters.statusFilter}
+        sortBy={filters.sortBy}
+        sortOrder={filters.sortOrder}
+        activeFiltersCount={filters.activeFiltersCount}
+        onSearchChange={filters.setSearchTerm}
+        onPriorityChange={filters.setPriorityFilter}
+        onStatusChange={filters.setStatusFilter}
+        onSortByChange={filters.setSortBy}
+        onSortOrderChange={() => filters.setSortOrder(filters.sortOrder === 'asc' ? 'desc' : 'asc')}
+        onClearFilters={filters.clearFilters}
+      />
 
-            <div className="flex gap-2">
-              <Select value={sortBy} onValueChange={(value: any) => setSortBy(value)}>
-                <SelectTrigger className="h-9 sm:h-10 md:h-11 text-sm sm:text-base bg-gray-50 border-gray-200 focus:bg-white">
-                  <SelectValue placeholder="Sort by" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="due">Due Date</SelectItem>
-                  <SelectItem value="created">Date Created</SelectItem>
-                  <SelectItem value="priority">Priority</SelectItem>
-                </SelectContent>
-              </Select>
-              
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc')}
-                className="px-2 sm:px-3 h-9 sm:h-10 md:h-11"
-              >
-                {sortOrder === 'asc' ? <SortAsc className="w-3.5 h-3.5 sm:w-4 sm:h-4" /> : <SortDesc className="w-3.5 h-3.5 sm:w-4 sm:h-4" />}
-              </Button>
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Requests List - Balanced Compact View */}
-      <div className="space-y-4">
-        {filteredAndSortedRequests.map((request) => {
-          const priorityConfig = getPriorityConfig(request.priority);
-          const statusConfig = getStatusConfig(request.status);
-          
-          return (
-            <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)}
-            >
-              <CardContent className="p-5">
-                <div className="flex items-start gap-5">
-                  {/* Left: Priority Icon */}
-                  <div className="flex-shrink-0 pt-1">
-                    <div className={`p-2.5 rounded-lg ${priorityConfig.color} border shadow-sm`}>
-                      <priorityConfig.icon className={`w-5 h-5 ${priorityConfig.iconColor}`} />
-                    </div>
-                  </div>
-
-                  {/* Center: Main Content */}
-                  <div className="flex-1 min-w-0 space-y-3">
-                    {/* Header Row */}
-                    <div className="flex items-center gap-2.5 flex-wrap">
-                      <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" 
-                        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" />
-                        {statusConfig.label}
-                      </Badge>
-                      {request.department && (
-                        <Badge variant="secondary" className="bg-blue-50 text-blue-700 text-xs px-2.5 py-0.5 hidden sm:inline-flex">
-                          {request.department}
-                        </Badge>
-                      )}
-                      <Badge 
-                        variant="outline" 
-                        className={`${priorityConfig.color} text-xs px-2.5 py-0.5 capitalize hidden md:inline-flex`}
-                      >
-                        {request.priority}
-                      </Badge>
-                    </div>
-
-                    {/* Title */}
-                    <h4 className="text-sm font-semibold text-gray-800 line-clamp-1 leading-relaxed">
-                      {request.title}
-                    </h4>
-
-                    {/* Metadata Row */}
-                    <div className="flex flex-wrap items-center gap-4 text-xs text-gray-600">
-                      <div className="flex items-center gap-1.5">
-                        <Avatar className="h-6 w-6 ring-2 ring-white shadow-sm">
-                          <AvatarFallback className="bg-gradient-to-br from-slate-700 to-slate-900 text-white text-[10px] font-bold">
-                            {request.initiator.avatar}
-                          </AvatarFallback>
-                        </Avatar>
-                        <span className="font-medium text-gray-900">{request.initiator.name}</span>
-                      </div>
-                      
-                      {(request.totalLevels ?? 0) > 0 && (
-                        <div className="flex items-center gap-1.5">
-                          <CheckCircle className="w-3.5 h-3.5 text-green-600" />
-                          <span className="font-medium">{request.completedLevels || 0}/{request.totalLevels} Approvals</span>
-                        </div>
-                      )}
-                      
-                      <div className="flex items-center gap-1.5">
-                        <Calendar className="w-3.5 h-3.5" />
-                        <span>Created: {request.createdAt !== '—' ? formatDateTime(request.createdAt) : '—'}</span>
-                      </div>
-                      
-                      {request.dueDate && (
-                        <div className="flex items-center gap-1.5">
-                          <CheckCircle className="w-3.5 h-3.5 text-slate-600" />
-                          <span className="font-medium">Closed: {formatDateTime(request.dueDate)}</span>
-                        </div>
-                      )}
-                    </div>
-                  </div>
-
-                  {/* Right: Arrow */}
-                  <div className="flex-shrink-0 flex items-center pt-2">
-                    <ArrowRight className="w-5 h-5 text-gray-400 group-hover:text-blue-600 group-hover:translate-x-1 transition-all" />
-                  </div>
-                </div>
-              </CardContent>
-            </Card>
-          );
-        })}
-      </div>
+      {/* Requests List */}
+      <ClosedRequestsList
+        requests={closedRequests.requests}
+        loading={closedRequests.loading}
+        onViewRequest={onViewRequest}
+      />
 
       {/* Empty State */}
-      {filteredAndSortedRequests.length === 0 && (
-        <Card className="shadow-lg border-0">
-          <CardContent className="flex flex-col items-center justify-center py-16">
-            <div className="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mb-4">
-              <FileText className="h-8 w-8 text-gray-400" />
-            </div>
-            <h3 className="text-xl font-semibold text-gray-900 mb-2">No requests found</h3>
-            <p className="text-gray-600 text-center max-w-md">
-              {searchTerm || activeFiltersCount > 0
-                ? 'Try adjusting your filters or search terms to see more results.'
-                : 'No closed requests available at the moment.'
-              }
-            </p>
-            {activeFiltersCount > 0 && (
-              <Button 
-                variant="outline" 
-                className="mt-4"
-                onClick={clearFilters}
-              >
-                Clear all filters
-              </Button>
-            )}
-          </CardContent>
-        </Card>
+      {closedRequests.requests.length === 0 && !closedRequests.loading && (
+        <ClosedRequestsEmpty
+          searchTerm={filters.searchTerm}
+          activeFiltersCount={filters.activeFiltersCount}
+          onClearFilters={filters.clearFilters}
+        />
       )}
 
-      {/* Pagination Controls */}
-      {totalPages > 1 && !loading && (
-        <Card className="shadow-md">
-          <CardContent className="p-4">
-            <div className="flex flex-col sm:flex-row items-center justify-between gap-3">
-              <div className="text-xs sm:text-sm text-muted-foreground">
-                Showing {((currentPage - 1) * itemsPerPage) + 1} to {Math.min(currentPage * itemsPerPage, totalRecords)} of {totalRecords} closed requests
-              </div>
-              
-              <div className="flex items-center gap-2">
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={() => handlePageChange(currentPage - 1)}
-                  disabled={currentPage === 1}
-                  className="h-8 w-8 p-0"
-                >
-                  <ArrowRight className="h-4 w-4 rotate-180" />
-                </Button>
-                
-                {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}
-                    variant={pageNum === currentPage ? "default" : "outline"}
-                    size="sm"
-                    onClick={() => handlePageChange(pageNum)}
-                    className={`h-8 w-8 p-0 ${pageNum === currentPage ? 'bg-blue-600 text-white hover:bg-blue-700' : ''}`}
-                  >
-                    {pageNum}
-                  </Button>
-                ))}
-                
-                {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"
-                  onClick={() => handlePageChange(currentPage + 1)}
-                  disabled={currentPage === totalPages}
-                  className="h-8 w-8 p-0"
-                >
-                  <ArrowRight className="h-4 w-4" />
-                </Button>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
+      {/* Pagination */}
+      {!closedRequests.loading && (
+        <ClosedRequestsPagination
+          pagination={closedRequests.pagination}
+          onPageChange={handlePageChange}
+        />
       )}
     </div>
   );
diff --git a/src/pages/ClosedRequests/components/ClosedRequestCard.tsx b/src/pages/ClosedRequests/components/ClosedRequestCard.tsx
new file mode 100644
index 0000000..767bb82
--- /dev/null
+++ b/src/pages/ClosedRequests/components/ClosedRequestCard.tsx
@@ -0,0 +1,112 @@
+/**
+ * Individual request card component for Closed Requests
+ */
+
+import { Card, CardContent } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Avatar, AvatarFallback } from '@/components/ui/avatar';
+import { ArrowRight, Calendar, CheckCircle } from 'lucide-react';
+import { formatDateTime } from '@/utils/dateFormatter';
+import { ClosedRequest } from '../types/closedRequests.types';
+import { getPriorityConfig, getStatusConfig } from '../utils/configMappers';
+
+interface ClosedRequestCardProps {
+  request: ClosedRequest;
+  onViewRequest?: (requestId: string, requestTitle?: string) => void;
+}
+
+export function ClosedRequestCard({ request, onViewRequest }: ClosedRequestCardProps) {
+  const priorityConfig = getPriorityConfig(request.priority);
+  const statusConfig = getStatusConfig(request.status);
+  const PriorityIcon = priorityConfig.icon;
+  const StatusIcon = statusConfig.icon;
+
+  return (
+    <Card 
+      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)}
+      data-testid={`closed-request-card-${request.id}`}
+    >
+      <CardContent className="p-5">
+        <div className="flex items-start gap-5">
+          {/* Left: Priority Icon */}
+          <div className="flex-shrink-0 pt-1">
+            <div className={`p-2.5 rounded-lg ${priorityConfig.color} border shadow-sm`}>
+              <PriorityIcon className={`w-5 h-5 ${priorityConfig.iconColor}`} />
+            </div>
+          </div>
+
+          {/* Center: Main Content */}
+          <div className="flex-1 min-w-0 space-y-3">
+            {/* Header Row */}
+            <div className="flex items-center gap-2.5 flex-wrap">
+              <h3 className="text-base font-bold text-gray-900 group-hover:text-blue-600 transition-colors">
+                {request.displayId || request.id}
+              </h3>
+              <Badge 
+                variant="outline" 
+                className={`${statusConfig.color} text-xs px-2.5 py-0.5 font-semibold shrink-0`}
+              >
+                <StatusIcon className="w-3.5 h-3.5 mr-1" />
+                {statusConfig.label}
+              </Badge>
+              {request.department && (
+                <Badge variant="secondary" className="bg-blue-50 text-blue-700 text-xs px-2.5 py-0.5 hidden sm:inline-flex">
+                  {request.department}
+                </Badge>
+              )}
+              <Badge 
+                variant="outline" 
+                className={`${priorityConfig.color} text-xs px-2.5 py-0.5 capitalize hidden md:inline-flex`}
+              >
+                {request.priority}
+              </Badge>
+            </div>
+
+            {/* Title */}
+            <h4 className="text-sm font-semibold text-gray-800 line-clamp-1 leading-relaxed">
+              {request.title}
+            </h4>
+
+            {/* Metadata Row */}
+            <div className="flex flex-wrap items-center gap-4 text-xs text-gray-600">
+              <div className="flex items-center gap-1.5">
+                <Avatar className="h-6 w-6 ring-2 ring-white shadow-sm">
+                  <AvatarFallback className="bg-gradient-to-br from-slate-700 to-slate-900 text-white text-[10px] font-bold">
+                    {request.initiator.avatar}
+                  </AvatarFallback>
+                </Avatar>
+                <span className="font-medium text-gray-900">{request.initiator.name}</span>
+              </div>
+              
+              {(request.totalLevels ?? 0) > 0 && (
+                <div className="flex items-center gap-1.5">
+                  <CheckCircle className="w-3.5 h-3.5 text-green-600" />
+                  <span className="font-medium">{request.completedLevels || 0}/{request.totalLevels} Approvals</span>
+                </div>
+              )}
+              
+              <div className="flex items-center gap-1.5">
+                <Calendar className="w-3.5 h-3.5" />
+                <span>Created: {request.createdAt !== '—' ? formatDateTime(request.createdAt) : '—'}</span>
+              </div>
+              
+              {request.dueDate && (
+                <div className="flex items-center gap-1.5">
+                  <CheckCircle className="w-3.5 h-3.5 text-slate-600" />
+                  <span className="font-medium">Closed: {formatDateTime(request.dueDate)}</span>
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Right: Arrow */}
+          <div className="flex-shrink-0 flex items-center pt-2">
+            <ArrowRight className="w-5 h-5 text-gray-400 group-hover:text-blue-600 group-hover:translate-x-1 transition-all" />
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
diff --git a/src/pages/ClosedRequests/components/ClosedRequestsEmpty.tsx b/src/pages/ClosedRequests/components/ClosedRequestsEmpty.tsx
new file mode 100644
index 0000000..91f881c
--- /dev/null
+++ b/src/pages/ClosedRequests/components/ClosedRequestsEmpty.tsx
@@ -0,0 +1,47 @@
+/**
+ * Empty state component for Closed Requests
+ */
+
+import { Card, CardContent } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { FileText } from 'lucide-react';
+
+interface ClosedRequestsEmptyProps {
+  searchTerm: string;
+  activeFiltersCount: number;
+  onClearFilters: () => void;
+}
+
+export function ClosedRequestsEmpty({
+  searchTerm,
+  activeFiltersCount,
+  onClearFilters,
+}: ClosedRequestsEmptyProps) {
+  return (
+    <Card className="shadow-lg border-0" data-testid="closed-requests-empty">
+      <CardContent className="flex flex-col items-center justify-center py-16">
+        <div className="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mb-4">
+          <FileText className="h-8 w-8 text-gray-400" />
+        </div>
+        <h3 className="text-xl font-semibold text-gray-900 mb-2">No requests found</h3>
+        <p className="text-gray-600 text-center max-w-md">
+          {searchTerm || activeFiltersCount > 0
+            ? 'Try adjusting your filters or search terms to see more results.'
+            : 'No closed requests available at the moment.'
+          }
+        </p>
+        {activeFiltersCount > 0 && (
+          <Button 
+            variant="outline" 
+            className="mt-4"
+            onClick={onClearFilters}
+            data-testid="closed-requests-empty-clear-filters"
+          >
+            Clear all filters
+          </Button>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
diff --git a/src/pages/ClosedRequests/components/ClosedRequestsFilters.tsx b/src/pages/ClosedRequests/components/ClosedRequestsFilters.tsx
new file mode 100644
index 0000000..0c9ad5f
--- /dev/null
+++ b/src/pages/ClosedRequests/components/ClosedRequestsFilters.tsx
@@ -0,0 +1,161 @@
+/**
+ * Filters component for Closed Requests
+ */
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Filter, Search, SortAsc, SortDesc, Flame, Target, CheckCircle, XCircle, X } from 'lucide-react';
+
+interface ClosedRequestsFiltersProps {
+  searchTerm: string;
+  priorityFilter: string;
+  statusFilter: string;
+  sortBy: 'created' | 'due' | 'priority';
+  sortOrder: 'asc' | 'desc';
+  activeFiltersCount: number;
+  onSearchChange: (value: string) => void;
+  onPriorityChange: (value: string) => void;
+  onStatusChange: (value: string) => void;
+  onSortByChange: (value: 'created' | 'due' | 'priority') => void;
+  onSortOrderChange: () => void;
+  onClearFilters: () => void;
+}
+
+export function ClosedRequestsFilters({
+  searchTerm,
+  priorityFilter,
+  statusFilter,
+  sortBy,
+  sortOrder,
+  activeFiltersCount,
+  onSearchChange,
+  onPriorityChange,
+  onStatusChange,
+  onSortByChange,
+  onSortOrderChange,
+  onClearFilters,
+}: ClosedRequestsFiltersProps) {
+  return (
+    <Card className="shadow-lg border-0" data-testid="closed-requests-filters">
+      <CardHeader className="pb-3 sm:pb-4 px-3 sm:px-6">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2 sm:gap-3">
+            <div className="p-1.5 sm:p-2 bg-blue-100 rounded-lg">
+              <Filter className="h-4 w-4 sm:h-5 sm:w-5 text-blue-600" />
+            </div>
+            <div>
+              <CardTitle className="text-base sm:text-lg">Filters & Search</CardTitle>
+              <CardDescription className="text-xs sm:text-sm">
+                {activeFiltersCount > 0 && (
+                  <span className="text-blue-600 font-medium">
+                    {activeFiltersCount} filter{activeFiltersCount > 1 ? 's' : ''} active
+                  </span>
+                )}
+              </CardDescription>
+            </div>
+          </div>
+          {activeFiltersCount > 0 && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={onClearFilters}
+              className="text-red-600 hover:bg-red-50 gap-1 h-8 sm:h-9 px-2 sm:px-3"
+              data-testid="closed-requests-clear-filters"
+            >
+              <X className="w-3 h-3 sm:w-3.5 sm:h-3.5" />
+              <span className="text-xs sm:text-sm">Clear</span>
+            </Button>
+          )}
+        </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-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
+              placeholder="Search requests, IDs..."
+              value={searchTerm}
+              onChange={(e) => onSearchChange(e.target.value)}
+              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 transition-colors"
+              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" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">All Priorities</SelectItem>
+              <SelectItem value="express">
+                <div className="flex items-center gap-2">
+                  <Flame className="w-4 h-4 text-orange-600" />
+                  <span>Express</span>
+                </div>
+              </SelectItem>
+              <SelectItem value="standard">
+                <div className="flex items-center gap-2">
+                  <Target className="w-4 h-4 text-blue-600" />
+                  <span>Standard</span>
+                </div>
+              </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="All Statuses" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">All Statuses</SelectItem>
+              <SelectItem value="approved">
+                <div className="flex items-center gap-2">
+                  <CheckCircle className="w-4 h-4 text-green-600" />
+                  <span>Approved</span>
+                </div>
+              </SelectItem>
+              <SelectItem value="closed">
+                <div className="flex items-center gap-2">
+                  <CheckCircle className="w-4 h-4 text-gray-600" />
+                  <span>Closed</span>
+                </div>
+              </SelectItem>
+              <SelectItem value="rejected">
+                <div className="flex items-center gap-2">
+                  <XCircle className="w-4 h-4 text-red-600" />
+                  <span>Rejected</span>
+                </div>
+              </SelectItem>
+            </SelectContent>
+          </Select>
+
+          <div className="flex gap-2">
+            <Select value={sortBy} onValueChange={(value) => onSortByChange(value as 'created' | 'due' | 'priority')}>
+              <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-sort-by">
+                <SelectValue placeholder="Sort by" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="due">Due Date</SelectItem>
+                <SelectItem value="created">Date Created</SelectItem>
+                <SelectItem value="priority">Priority</SelectItem>
+              </SelectContent>
+            </Select>
+            
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={onSortOrderChange}
+              className="px-2 sm:px-3 h-9 sm:h-10 md:h-11"
+              data-testid="closed-requests-sort-order"
+            >
+              {sortOrder === 'asc' ? <SortAsc className="w-3.5 h-3.5 sm:w-4 sm:h-4" /> : <SortDesc className="w-3.5 h-3.5 sm:w-4 sm:h-4" />}
+            </Button>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
diff --git a/src/pages/ClosedRequests/components/ClosedRequestsHeader.tsx b/src/pages/ClosedRequests/components/ClosedRequestsHeader.tsx
new file mode 100644
index 0000000..8578549
--- /dev/null
+++ b/src/pages/ClosedRequests/components/ClosedRequestsHeader.tsx
@@ -0,0 +1,56 @@
+/**
+ * Header component for Closed Requests page
+ */
+
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { FileText, RefreshCw } from 'lucide-react';
+
+interface ClosedRequestsHeaderProps {
+  totalRecords: number;
+  loading: boolean;
+  refreshing: boolean;
+  onRefresh: () => void;
+}
+
+export function ClosedRequestsHeader({
+  totalRecords,
+  loading,
+  refreshing,
+  onRefresh,
+}: ClosedRequestsHeaderProps) {
+  return (
+    <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-3 sm:gap-4 md:gap-6" data-testid="closed-requests-header">
+      <div className="space-y-1 sm:space-y-2">
+        <div className="flex items-center gap-2 sm:gap-3">
+          <div className="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-slate-800 to-slate-900 rounded-xl flex items-center justify-center shadow-lg">
+            <FileText className="w-5 h-5 sm:w-6 sm:h-6 text-white" />
+          </div>
+          <div>
+            <h1 className="text-xl sm:text-2xl md:text-3xl font-bold text-gray-900">My Closed Requests</h1>
+            <p className="text-sm sm:text-base text-gray-600">Review your completed and archived requests</p>
+          </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" data-testid="closed-requests-count">
+          {loading ? 'Loading…' : `${totalRecords} closed`}
+          <span className="hidden sm:inline ml-1">requests</span>
+        </Badge>
+        <Button 
+          variant="outline" 
+          size="sm" 
+          className="gap-1 sm:gap-2 h-8 sm:h-9"
+          onClick={onRefresh}
+          disabled={refreshing}
+          data-testid="closed-requests-refresh"
+        >
+          <RefreshCw className={`w-3.5 h-3.5 sm:w-4 sm:h-4 ${refreshing ? 'animate-spin' : ''}`} />
+          <span className="hidden sm:inline">{refreshing ? 'Refreshing...' : 'Refresh'}</span>
+        </Button>
+      </div>
+    </div>
+  );
+}
+
diff --git a/src/pages/ClosedRequests/components/ClosedRequestsList.tsx b/src/pages/ClosedRequests/components/ClosedRequestsList.tsx
new file mode 100644
index 0000000..a817576
--- /dev/null
+++ b/src/pages/ClosedRequests/components/ClosedRequestsList.tsx
@@ -0,0 +1,41 @@
+/**
+ * List component for Closed Requests with loading and empty states
+ */
+
+import { ClosedRequest } from '../types/closedRequests.types';
+import { ClosedRequestCard } from './ClosedRequestCard';
+
+interface ClosedRequestsListProps {
+  requests: ClosedRequest[];
+  loading: boolean;
+  onViewRequest?: (requestId: string, requestTitle?: string) => void;
+}
+
+export function ClosedRequestsList({ requests, loading, onViewRequest }: ClosedRequestsListProps) {
+  if (loading && requests.length === 0) {
+    return (
+      <div className="space-y-4" data-testid="closed-requests-list-loading">
+        {[...Array(3)].map((_, i) => (
+          <div key={i} className="h-32 bg-gray-100 animate-pulse rounded-lg" />
+        ))}
+      </div>
+    );
+  }
+
+  if (requests.length === 0) {
+    return null; // Empty state is handled by parent
+  }
+
+  return (
+    <div className="space-y-4" data-testid="closed-requests-list">
+      {requests.map((request) => (
+        <ClosedRequestCard
+          key={request.id}
+          request={request}
+          onViewRequest={onViewRequest}
+        />
+      ))}
+    </div>
+  );
+}
+
diff --git a/src/pages/ClosedRequests/components/ClosedRequestsPagination.tsx b/src/pages/ClosedRequests/components/ClosedRequestsPagination.tsx
new file mode 100644
index 0000000..67ce902
--- /dev/null
+++ b/src/pages/ClosedRequests/components/ClosedRequestsPagination.tsx
@@ -0,0 +1,107 @@
+/**
+ * Pagination component for Closed Requests
+ */
+
+import { Card, CardContent } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { ArrowRight } from 'lucide-react';
+import { getPageNumbers } from '../utils/paginationHelpers';
+import { PaginationState } from '../types/closedRequests.types';
+
+interface ClosedRequestsPaginationProps {
+  pagination: PaginationState;
+  onPageChange: (page: number) => void;
+}
+
+export function ClosedRequestsPagination({
+  pagination,
+  onPageChange,
+}: ClosedRequestsPaginationProps) {
+  const { currentPage, totalPages, totalRecords, itemsPerPage } = pagination;
+
+  if (totalPages <= 1) {
+    return null;
+  }
+
+  const pageNumbers = getPageNumbers(currentPage, totalPages);
+
+  return (
+    <Card className="shadow-md" data-testid="closed-requests-pagination">
+      <CardContent className="p-4">
+        <div className="flex flex-col sm:flex-row items-center justify-between gap-3">
+          <div className="text-xs sm:text-sm text-muted-foreground">
+            Showing {((currentPage - 1) * itemsPerPage) + 1} to {Math.min(currentPage * itemsPerPage, totalRecords)} of {totalRecords} closed requests
+          </div>
+          
+          <div className="flex items-center gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => onPageChange(currentPage - 1)}
+              disabled={currentPage === 1}
+              className="h-8 w-8 p-0"
+              data-testid="closed-requests-pagination-prev"
+            >
+              <ArrowRight className="h-4 w-4 rotate-180" />
+            </Button>
+            
+            {currentPage > 3 && totalPages > 5 && (
+              <>
+                <Button 
+                  variant="outline" 
+                  size="sm" 
+                  onClick={() => onPageChange(1)} 
+                  className="h-8 w-8 p-0"
+                  data-testid="closed-requests-pagination-first"
+                >
+                  1
+                </Button>
+                <span className="text-muted-foreground">...</span>
+              </>
+            )}
+            
+            {pageNumbers.map((pageNum) => (
+              <Button
+                key={pageNum}
+                variant={pageNum === currentPage ? "default" : "outline"}
+                size="sm"
+                onClick={() => onPageChange(pageNum)}
+                className={`h-8 w-8 p-0 ${pageNum === currentPage ? 'bg-blue-600 text-white hover:bg-blue-700' : ''}`}
+                data-testid={`closed-requests-pagination-page-${pageNum}`}
+              >
+                {pageNum}
+              </Button>
+            ))}
+            
+            {currentPage < totalPages - 2 && totalPages > 5 && (
+              <>
+                <span className="text-muted-foreground">...</span>
+                <Button 
+                  variant="outline" 
+                  size="sm" 
+                  onClick={() => onPageChange(totalPages)} 
+                  className="h-8 w-8 p-0"
+                  data-testid="closed-requests-pagination-last"
+                >
+                  {totalPages}
+                </Button>
+              </>
+            )}
+            
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => onPageChange(currentPage + 1)}
+              disabled={currentPage === totalPages}
+              className="h-8 w-8 p-0"
+              data-testid="closed-requests-pagination-next"
+            >
+              <ArrowRight className="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
diff --git a/src/pages/ClosedRequests/hooks/useClosedRequests.ts b/src/pages/ClosedRequests/hooks/useClosedRequests.ts
new file mode 100644
index 0000000..58c8eed
--- /dev/null
+++ b/src/pages/ClosedRequests/hooks/useClosedRequests.ts
@@ -0,0 +1,106 @@
+/**
+ * Hook for fetching and managing Closed Requests data
+ */
+
+import { useState, useCallback, useEffect, useRef } from 'react';
+import workflowApi from '@/services/workflowApi';
+import { ClosedRequest, PaginationState } from '../types/closedRequests.types';
+import { transformClosedRequests } from '../utils/requestTransformers';
+
+interface UseClosedRequestsOptions {
+  itemsPerPage?: number;
+  initialFilters?: {
+    search?: string;
+    status?: string;
+    priority?: string;
+    sortBy?: string;
+    sortOrder?: string;
+  };
+}
+
+export function useClosedRequests({ itemsPerPage = 10, initialFilters }: UseClosedRequestsOptions = {}) {
+  const [requests, setRequests] = useState<ClosedRequest[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [refreshing, setRefreshing] = useState(false);
+  const [pagination, setPagination] = useState<PaginationState>({
+    currentPage: 1,
+    totalPages: 1,
+    totalRecords: 0,
+    itemsPerPage,
+  });
+  const isInitialMount = useRef(true);
+
+  const fetchRequests = useCallback(
+    async (page: number = 1, filters?: { search?: string; status?: string; priority?: string; sortBy?: string; sortOrder?: string }) => {
+      try {
+        if (page === 1) {
+          setLoading(true);
+          setRequests([]);
+        }
+        
+        // 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.listClosedByMe({ 
+          page, 
+          limit: itemsPerPage,
+          search: filters?.search,
+          status: filters?.status,
+          priority: filters?.priority,
+          sortBy: filters?.sortBy,
+          sortOrder: filters?.sortOrder
+        });
+        
+        // Extract data - workflowApi now returns { data: [], pagination: {} }
+        const data = Array.isArray((result as any)?.data) 
+          ? (result as any).data 
+          : [];
+        
+        // Set pagination data
+        const paginationData = (result as any)?.pagination;
+        if (paginationData) {
+          setPagination({
+            currentPage: paginationData.page || 1,
+            totalPages: paginationData.totalPages || 1,
+            totalRecords: paginationData.total || 0,
+            itemsPerPage,
+          });
+        }
+        
+        const mapped = transformClosedRequests(data);
+        setRequests(mapped);
+      } catch (error) {
+        console.error('[ClosedRequests] Error fetching requests:', error);
+        setRequests([]);
+      } finally {
+        setLoading(false);
+        setRefreshing(false);
+      }
+    },
+    [itemsPerPage]
+  );
+
+  // Initial fetch on mount
+  useEffect(() => {
+    if (isInitialMount.current) {
+      fetchRequests(1, initialFilters);
+      isInitialMount.current = false;
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []); // Only run on mount
+
+  const handleRefresh = useCallback((filters?: { search?: string; status?: string; priority?: string; sortBy?: string; sortOrder?: string }) => {
+    setRefreshing(true);
+    fetchRequests(pagination.currentPage, filters);
+  }, [fetchRequests, pagination.currentPage]);
+
+  return {
+    requests,
+    loading,
+    refreshing,
+    pagination,
+    fetchRequests,
+    handleRefresh,
+  };
+}
+
diff --git a/src/pages/ClosedRequests/hooks/useClosedRequestsFilters.ts b/src/pages/ClosedRequests/hooks/useClosedRequestsFilters.ts
new file mode 100644
index 0000000..c37e517
--- /dev/null
+++ b/src/pages/ClosedRequests/hooks/useClosedRequestsFilters.ts
@@ -0,0 +1,87 @@
+/**
+ * Hook for managing Closed Requests filters and sorting
+ */
+
+import { useState, useCallback, useEffect, useRef } from 'react';
+import { ClosedRequestsFilters } from '../types/closedRequests.types';
+
+interface UseClosedRequestsFiltersOptions {
+  onFiltersChange?: (filters: ClosedRequestsFilters) => void;
+  debounceMs?: number;
+}
+
+export function useClosedRequestsFilters({ onFiltersChange, debounceMs = 500 }: UseClosedRequestsFiltersOptions = {}) {
+  const [searchTerm, setSearchTerm] = useState('');
+  const [priorityFilter, setPriorityFilter] = useState('all');
+  const [statusFilter, setStatusFilter] = useState('all');
+  const [sortBy, setSortBy] = useState<'created' | 'due' | 'priority'>('due');
+  const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('desc');
+  const debounceTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const isInitialMount = useRef(true);
+
+  const getFilters = useCallback((): ClosedRequestsFilters => {
+    return {
+      search: searchTerm,
+      status: statusFilter,
+      priority: priorityFilter,
+      sortBy,
+      sortOrder,
+    };
+  }, [searchTerm, statusFilter, priorityFilter, sortBy, sortOrder]);
+
+  // Debounced filter change handler
+  useEffect(() => {
+    // Skip initial mount to prevent double fetch
+    if (isInitialMount.current) {
+      isInitialMount.current = false;
+      return;
+    }
+
+    if (debounceTimeoutRef.current) {
+      clearTimeout(debounceTimeoutRef.current);
+    }
+
+    const timeoutId = setTimeout(() => {
+      if (onFiltersChange) {
+        onFiltersChange(getFilters());
+      }
+    }, searchTerm ? debounceMs : 0); // Debounce only for search, instant for dropdowns
+
+    debounceTimeoutRef.current = timeoutId;
+
+    return () => {
+      if (debounceTimeoutRef.current) {
+        clearTimeout(debounceTimeoutRef.current);
+      }
+    };
+  }, [searchTerm, statusFilter, priorityFilter, sortBy, sortOrder, onFiltersChange, getFilters, debounceMs]);
+
+  const clearFilters = useCallback(() => {
+    setSearchTerm('');
+    setPriorityFilter('all');
+    setStatusFilter('all');
+  }, []);
+
+  const activeFiltersCount = [
+    searchTerm,
+    priorityFilter !== 'all' ? priorityFilter : null,
+    statusFilter !== 'all' ? statusFilter : null
+  ].filter(Boolean).length;
+
+  return {
+    searchTerm,
+    priorityFilter,
+    statusFilter,
+    sortBy,
+    sortOrder,
+    setSearchTerm,
+    setPriorityFilter,
+    setStatusFilter,
+    setSortBy,
+    setSortOrder,
+    clearFilters,
+    activeFiltersCount,
+    getFilters,
+  };
+}
+
diff --git a/src/pages/ClosedRequests/types/closedRequests.types.ts b/src/pages/ClosedRequests/types/closedRequests.types.ts
new file mode 100644
index 0000000..293d585
--- /dev/null
+++ b/src/pages/ClosedRequests/types/closedRequests.types.ts
@@ -0,0 +1,54 @@
+/**
+ * Closed Requests TypeScript interfaces
+ */
+
+export interface ClosedRequest {
+  id: string;
+  requestId: string;
+  displayId?: string;
+  title: string;
+  description: string;
+  status: 'approved' | 'rejected' | 'closed';
+  priority: 'express' | 'standard';
+  initiator: { name: string; avatar: string };
+  createdAt: string;
+  dueDate?: string;
+  reason?: string;
+  department?: string;
+  totalLevels?: number;
+  completedLevels?: number;
+}
+
+export interface ClosedRequestsProps {
+  onViewRequest?: (requestId: string, requestTitle?: string) => void;
+}
+
+export interface ClosedRequestsFilters {
+  search: string;
+  status: string;
+  priority: string;
+  sortBy: 'created' | 'due' | 'priority';
+  sortOrder: 'asc' | 'desc';
+}
+
+export interface PaginationState {
+  currentPage: number;
+  totalPages: number;
+  totalRecords: number;
+  itemsPerPage: number;
+}
+
+export interface PriorityConfig {
+  color: string;
+  icon: React.ComponentType<{ className?: string }>;
+  iconColor: string;
+}
+
+export interface StatusConfig {
+  color: string;
+  icon: React.ComponentType<{ className?: string }>;
+  iconColor: string;
+  label: string;
+  description: string;
+}
+
diff --git a/src/pages/ClosedRequests/utils/configMappers.ts b/src/pages/ClosedRequests/utils/configMappers.ts
new file mode 100644
index 0000000..cbed1ff
--- /dev/null
+++ b/src/pages/ClosedRequests/utils/configMappers.ts
@@ -0,0 +1,67 @@
+/**
+ * Configuration mappers for priority and status badges
+ */
+
+import { Flame, Target, CheckCircle, XCircle, AlertCircle } from 'lucide-react';
+import { PriorityConfig, StatusConfig } from '../types/closedRequests.types';
+
+export function getPriorityConfig(priority: string): PriorityConfig {
+  switch (priority) {
+    case 'express':
+      return {
+        color: 'bg-red-100 text-red-800 border-red-200',
+        icon: Flame,
+        iconColor: 'text-red-600'
+      };
+    case 'standard':
+      return {
+        color: 'bg-blue-100 text-blue-800 border-blue-200',
+        icon: Target,
+        iconColor: 'text-blue-600'
+      };
+    default:
+      return {
+        color: 'bg-gray-100 text-gray-800 border-gray-200',
+        icon: Target,
+        iconColor: 'text-gray-600'
+      };
+  }
+}
+
+export function getStatusConfig(status: string): StatusConfig {
+  switch (status) {
+    case 'approved':
+      return {
+        color: 'bg-emerald-100 text-emerald-800 border-emerald-300',
+        icon: CheckCircle,
+        iconColor: 'text-emerald-600',
+        label: 'Needs Closure',
+        description: 'Fully approved, awaiting initiator to finalize'
+      };
+    case 'closed':
+      return {
+        color: 'bg-slate-100 text-slate-800 border-slate-300',
+        icon: CheckCircle,
+        iconColor: 'text-slate-600',
+        label: 'Closed',
+        description: 'Request finalized and archived'
+      };
+    case 'rejected':
+      return {
+        color: 'bg-red-100 text-red-800 border-red-300',
+        icon: XCircle,
+        iconColor: 'text-red-600',
+        label: 'Rejected',
+        description: 'Request was declined'
+      };
+    default:
+      return {
+        color: 'bg-gray-100 text-gray-800 border-gray-200',
+        icon: AlertCircle,
+        iconColor: 'text-gray-600',
+        label: status,
+        description: ''
+      };
+  }
+}
+
diff --git a/src/pages/ClosedRequests/utils/paginationHelpers.ts b/src/pages/ClosedRequests/utils/paginationHelpers.ts
new file mode 100644
index 0000000..7d3b51e
--- /dev/null
+++ b/src/pages/ClosedRequests/utils/paginationHelpers.ts
@@ -0,0 +1,21 @@
+/**
+ * Pagination helper functions
+ */
+
+export function getPageNumbers(currentPage: number, totalPages: number): number[] {
+  const pages: number[] = [];
+  const maxPagesToShow = 5;
+  let startPage = Math.max(1, 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;
+}
+
diff --git a/src/pages/ClosedRequests/utils/requestTransformers.ts b/src/pages/ClosedRequests/utils/requestTransformers.ts
new file mode 100644
index 0000000..f8ee67e
--- /dev/null
+++ b/src/pages/ClosedRequests/utils/requestTransformers.ts
@@ -0,0 +1,37 @@
+/**
+ * Request data transformation utilities
+ */
+
+import { ClosedRequest } from '../types/closedRequests.types';
+
+export function transformClosedRequest(r: any): ClosedRequest {
+  return {
+    id: r.requestNumber || r.request_number || r.requestId, // Use requestNumber as primary identifier
+    requestId: r.requestId, // Keep requestId for reference
+    displayId: r.requestNumber || r.request_number || r.requestId,
+    title: r.title,
+    description: r.description,
+    status: (r.status || '').toString().toLowerCase() as 'approved' | 'rejected' | 'closed',
+    priority: (r.priority || '').toString().toLowerCase() as 'express' | 'standard',
+    initiator: {
+      name: r.initiator?.displayName || r.initiator?.email || '—',
+      avatar: (r.initiator?.displayName || 'NA')
+        .split(' ')
+        .map((s: string) => s[0])
+        .join('')
+        .slice(0, 2)
+        .toUpperCase()
+    },
+    createdAt: r.submittedAt || r.createdAt || r.created_at || '—',
+    dueDate: r.closureDate || r.closure_date || r.closedAt || undefined,
+    reason: r.conclusionRemark || r.conclusion_remark,
+    department: r.department,
+    totalLevels: r.totalLevels || 0,
+    completedLevels: r.summary?.approvedLevels || 0,
+  };
+}
+
+export function transformClosedRequests(data: any[]): ClosedRequest[] {
+  return data.map(transformClosedRequest);
+}
+
diff --git a/src/pages/CreateRequest/CreateRequest.tsx b/src/pages/CreateRequest/CreateRequest.tsx
index 30b3861..eb0a961 100644
--- a/src/pages/CreateRequest/CreateRequest.tsx
+++ b/src/pages/CreateRequest/CreateRequest.tsx
@@ -1,1419 +1,286 @@
-import { useState, useRef, useEffect } from 'react';
-import { useParams } from 'react-router-dom';
-import { searchUsers, ensureUserExists, type UserSummary } from '@/services/userApi';
-import { createWorkflowMultipart, submitWorkflow, getWorkflowDetails, updateWorkflow, updateWorkflowMultipart, getDocumentPreviewUrl, downloadDocument } from '@/services/workflowApi';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } 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 { Separator } from '@/components/ui/separator';
-import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
-import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
-import { motion, AnimatePresence } from 'framer-motion';
+/**
+ * Main CreateRequest component - Clean composition only
+ * 
+ * This component orchestrates the CreateRequest flow by:
+ * - Composing layout structure
+ * - Wiring up hooks and components
+ * - Handling top-level callbacks
+ * 
+ * All business logic, API calls, and utilities are extracted to:
+ * - hooks/ - Business logic and state management
+ * - services/ - API operations
+ * - utils/ - Pure utility functions
+ * - components/ - UI components
+ */
+
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { useAuth } from '@/contexts/AuthContext';
 import { TemplateSelectionModal } from '@/components/modals/TemplateSelectionModal';
 import { FilePreview } from '@/components/common/FilePreview';
-import { 
-  ArrowLeft, 
-  ArrowRight, 
-  Upload, 
-  X, 
-  User, 
-  Clock, 
-  FileText,
-  Check,
-  Users,
-  Zap,
-  Shield,
-  Target,
-  Flame,
-  TrendingUp,
-  DollarSign,
-  AlertCircle,
-  CheckCircle,
-  Info,
-  Rocket,
-  Plus,
-  Minus,
-  Eye,
-  Lightbulb,
-  Settings,
-  Loader2
-} from 'lucide-react';
-import { format } from 'date-fns';
-import { useAuth } from '@/contexts/AuthContext';
-import { getAllConfigurations, AdminConfiguration } from '@/services/adminApi';
 import { PolicyViolationModal } from '@/components/modals/PolicyViolationModal';
-import { toast } from 'sonner';
+import { downloadDocument } from '@/services/workflowApi';
+
+// Custom Hooks
+import { useCreateRequestForm } from '@/hooks/useCreateRequestForm';
+import { useWizardNavigation } from '@/hooks/useWizardNavigation';
+import { useRequestModals } from './hooks/useRequestModals';
+import { useCreateRequestSubmission } from './hooks/useCreateRequestSubmission';
+import { useCreateRequestHandlers } from './hooks/useCreateRequestHandlers';
+
+// Constants
+import { REQUEST_TEMPLATES } from './constants/requestTemplates';
+
+// Components
+import { WizardStepper } from '@/components/workflow/CreateRequest/WizardStepper';
+import { WizardFooter } from '@/components/workflow/CreateRequest/WizardFooter';
+import { TemplateSelectionStep } from '@/components/workflow/CreateRequest/TemplateSelectionStep';
+import { BasicInformationStep } from '@/components/workflow/CreateRequest/BasicInformationStep';
+import { ApprovalWorkflowStep } from '@/components/workflow/CreateRequest/ApprovalWorkflowStep';
+import { ParticipantsStep } from '@/components/workflow/CreateRequest/ParticipantsStep';
+import { DocumentsStep } from '@/components/workflow/CreateRequest/DocumentsStep';
+import { ReviewSubmitStep } from '@/components/workflow/CreateRequest/ReviewSubmitStep';
+import { CreateRequestHeader } from './components/CreateRequestHeader';
+import { CreateRequestContent } from './components/CreateRequestContent';
+import { ValidationErrorModal } from './components/modals/ValidationErrorModal';
+import { DocumentErrorModal } from './components/modals/DocumentErrorModal';
 
 interface CreateRequestProps {
   onBack?: () => void;
   onSubmit?: (requestData: any) => void;
-  requestId?: string; // For edit mode
-  isEditMode?: boolean; // Flag to indicate edit mode
+  requestId?: string;
+  isEditMode?: boolean;
 }
 
-interface RequestTemplate {
-  id: string;
-  name: string;
-  description: string;
-  category: string;
-  icon: React.ComponentType<any>;
-  estimatedTime: string;
-  commonApprovers: string[];
-  suggestedSLA: number;
-  priority: 'high' | 'medium' | 'low';
-  fields: {
-    amount?: boolean;
-    vendor?: boolean;
-    timeline?: boolean;
-    impact?: boolean;
-  };
-}
-
-const REQUEST_TEMPLATES: RequestTemplate[] = [
-  {
-    id: 'custom',
-    name: 'Custom Request',
-    description: 'Create a custom request for unique business needs with full flexibility to define your own workflow and requirements',
-    category: 'General',
-    icon: Lightbulb,
-    estimatedTime: 'Variable',
-    commonApprovers: [],
-    suggestedSLA: 3,
-    priority: 'medium',
-    fields: {}
-  },
-  {
-    id: 'existing-template',
-    name: 'Existing Template',
-    description: 'Use a pre-configured template with predefined approval workflows, timelines, and requirements for faster processing',
-    category: 'Templates',
-    icon: FileText,
-    estimatedTime: '1-2 days',
-    commonApprovers: ['Department Head', 'Manager'],
-    suggestedSLA: 2,
-    priority: 'medium',
-    fields: { timeline: true }
-  }
-];
-
-const MOCK_USERS = [
-  { id: '1', name: 'Mike Johnson', role: 'Team Lead', avatar: 'MJ', department: 'Operations', email: 'mike.johnson@royalenfield.com', level: 2, canClose: false },
-  { id: '2', name: 'Lisa Wong', role: 'Finance Manager', avatar: 'LW', department: 'Finance', email: 'lisa.wong@royalenfield.com', level: 3, canClose: false },
-  { id: '3', name: 'David Kumar', role: 'Department Head', avatar: 'DK', department: 'IT', email: 'david.kumar@royalenfield.com', level: 4, canClose: true },
-  { id: '4', name: 'Anna Smith', role: 'Marketing Coordinator', avatar: 'AS', department: 'Marketing', email: 'anna.smith@royalenfield.com', level: 1, canClose: false },
-  { id: '5', name: 'John Doe', role: 'Budget Analyst', avatar: 'JD', department: 'Finance', email: 'john.doe@royalenfield.com', level: 2, canClose: false },
-  { id: '6', name: 'Sarah Chen', role: 'Marketing Manager', avatar: 'SC', department: 'Marketing', email: 'sarah.chen@royalenfield.com', level: 3, canClose: false },
-  { id: '7', name: 'Emily Davis', role: 'Creative Director', avatar: 'ED', department: 'Marketing', email: 'emily.davis@royalenfield.com', level: 3, canClose: false },
-  { id: '8', name: 'Robert Kim', role: 'Legal Counsel', avatar: 'RK', department: 'Legal', email: 'robert.kim@royalenfield.com', level: 4, canClose: true },
-  { id: '9', name: 'Jennifer Lee', role: 'CEO', avatar: 'JL', department: 'Executive', email: 'jennifer.lee@royalenfield.com', level: 5, canClose: true },
-  { id: '10', name: 'Michael Brown', role: 'CFO', avatar: 'MB', department: 'Finance', email: 'michael.brown@royalenfield.com', level: 5, canClose: true }
-];
-
-// User levels - keeping for future use
-// const USER_LEVELS = [
-//   { level: 1, name: 'Junior Level', description: 'Junior staff and coordinators', color: 'bg-gray-100 text-gray-800' },
-//   { level: 2, name: 'Mid Level', description: 'Team leads and supervisors', color: 'bg-blue-100 text-blue-800' },
-//   { level: 3, name: 'Senior Level', description: 'Managers and senior staff', color: 'bg-green-100 text-green-800' },
-//   { level: 4, name: 'Executive Level', description: 'Department heads and directors', color: 'bg-orange-100 text-orange-800' },
-//   { level: 5, name: 'C-Suite Level', description: 'Executive leadership', color: 'bg-purple-100 text-purple-800' }
-// ];
-
-// SLA Templates - keeping for future use
-// const SLA_TEMPLATES = [
-//   { id: 'urgent', name: 'Urgent', hours: 4, description: 'Critical business impact', color: 'bg-red-100 text-red-800' },
-//   { id: 'high', name: 'High Priority', hours: 24, description: 'High business impact', color: 'bg-orange-100 text-orange-800' },
-//   { id: 'medium', name: 'Medium Priority', hours: 72, description: 'Moderate business impact', color: 'bg-yellow-100 text-yellow-800' },
-//   { id: 'low', name: 'Low Priority', hours: 120, description: 'Low business impact', color: 'bg-green-100 text-green-800' },
-//   { id: 'custom', name: 'Custom SLA', hours: 0, description: 'Define your own timeline', color: 'bg-blue-100 text-blue-800' }
-// ];
-
-const STEP_NAMES = [
-  'Template Selection',
-  'Basic Information',
-  'Approval Workflow',
-  'Participants & Access',
-  'Documents & Attachments',
-  'Review & Submit'
-];
-
-export function CreateRequest({ onBack, onSubmit, requestId: propRequestId, isEditMode = false }: CreateRequestProps) {
+export function CreateRequest({
+  onBack,
+  onSubmit,
+  requestId: propRequestId,
+  isEditMode = false,
+}: CreateRequestProps) {
   const params = useParams<{ requestId: string }>();
+  const navigate = useNavigate();
   const editRequestId = params.requestId || propRequestId || '';
   const isEditing = isEditMode && !!editRequestId;
   const { user } = useAuth();
-  const [currentStep, setCurrentStep] = useState(1);
-  const [selectedTemplate, setSelectedTemplate] = useState<RequestTemplate | null>(null);
-  const [emailInput, setEmailInput] = useState('');
-  const [showTemplateModal, setShowTemplateModal] = useState(false);
-  const [newUserData, setNewUserData] = useState({
-    name: '',
-    email: '',
-    role: '',
-    department: '',
-    level: 1
-  });
 
-  // Approver email search state
-  const [userSearchResults, setUserSearchResults] = useState<Record<number, UserSummary[]>>({});
-  const [userSearchLoading, setUserSearchLoading] = useState<Record<number, boolean>>({});
-  const searchTimers = useRef<Record<number, any>>({});
+  // Form and state management hooks
+  const {
+    formData,
+    updateFormData,
+    selectedTemplate,
+    setSelectedTemplate,
+    loadingDraft,
+    systemPolicy,
+    documentPolicy,
+    existingDocuments,
+    setExistingDocuments,
+  } = useCreateRequestForm(isEditing, editRequestId, REQUEST_TEMPLATES);
 
-  // Participants search state (spectators & CC)
-  const [spectatorSearchResults, setSpectatorSearchResults] = useState<UserSummary[]>([]);
-  const [spectatorSearchLoading, setSpectatorSearchLoading] = useState(false);
-  const spectatorTimer = useRef<any>(null);
+  const {
+    currentStep,
+    totalSteps,
+    stepNames,
+    isStepValid,
+    nextStep: wizardNextStep,
+    prevStep: wizardPrevStep,
+  } = useWizardNavigation(isEditing, selectedTemplate, formData);
+
+  // Document management state
+  const [documents, setDocuments] = useState<File[]>([]);
+  const [documentsToDelete, setDocumentsToDelete] = useState<string[]>([]);
   const fileInputRef = useRef<HTMLInputElement>(null);
-  
-  const [formData, setFormData] = useState({
-    // Template and basic info
-    template: '',
-    title: '',
-    description: '',
-    category: '',
-    
-    // Details
-    priority: '',
-    urgency: '',
-    businessImpact: '',
-    amount: '',
-    currency: 'USD',
-    vendor: '',
-    timeline: '',
-    
-    // SLA and dates
-    slaTemplate: '',
-    slaHours: 0,
-    customSlaHours: 0,
-    slaEndDate: undefined as Date | undefined,
-    expectedCompletionDate: undefined as Date | undefined,
-    breachEscalation: true,
-    reminderSchedule: '50' as '25' | '50' | '75',
-    
-    // Workflow
-    workflowType: 'sequential' as 'sequential' | 'parallel',
-    requiresAllApprovals: true,
-    escalationEnabled: true,
-    reminderEnabled: true,
-    minimumLevel: 1,
-    maxLevel: 1,
-    
-    // Participants
-    approvers: [] as any[],
-    approverCount: 1,
-    spectators: [] as any[],
-    ccList: [] as any[],
-    invitedUsers: [] as any[],
-    
-    // Access settings
-    allowComments: true,
-    allowDocumentUpload: true,
-    
-    // Documents
-    documents: [] as File[],
-    
-    // Additional metadata
-    tags: [] as string[],
-    relatedRequests: [] as string[],
-    costCenter: '',
-    project: ''
-  });
 
-  const totalSteps = STEP_NAMES.length;
-  const [loadingDraft, setLoadingDraft] = useState(isEditing);
-  const [submitting, setSubmitting] = useState(false);
-  const [savingDraft, setSavingDraft] = useState(false);
-  const [existingDocuments, setExistingDocuments] = useState<any[]>([]); // Track documents from backend
-  const [documentsToDelete, setDocumentsToDelete] = useState<string[]>([]); // Track document IDs to delete
-  const [previewDocument, setPreviewDocument] = useState<{ fileName: string; fileType: string; fileUrl: string; fileSize?: number; file?: File; documentId?: string } | null>(null);
-  
-  // Document policy state
-  const [documentPolicy, setDocumentPolicy] = useState<{
-    maxFileSizeMB: number;
-    allowedFileTypes: string[];
-  }>({
-    maxFileSizeMB: 10,
-    allowedFileTypes: ['pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'jpg', 'jpeg', 'png', 'gif']
-  });
-  
-  // Document validation error modal
-  const [documentErrorModal, setDocumentErrorModal] = useState<{
-    open: boolean;
-    errors: Array<{ fileName: string; reason: string }>;
-  }>({
-    open: false,
-    errors: []
-  });
+  // Modal management
+  const {
+    validationModal,
+    policyViolationModal,
+    documentErrorModal,
+    openValidationModal,
+    closeValidationModal,
+    closePolicyViolationModal,
+    openDocumentErrorModal,
+    closeDocumentErrorModal,
+  } = useRequestModals();
 
-  // Validation modal states
-  const [validationModal, setValidationModal] = useState<{
-    open: boolean;
-    type: 'error' | 'self-assign' | 'not-found';
-    email: string;
-    message: string;
-  }>({
-    open: false,
-    type: 'error',
-    email: '',
-    message: ''
-  });
-
-  // Policy violation modal state
-  const [policyViolationModal, setPolicyViolationModal] = useState<{
-    open: boolean;
-    violations: Array<{ type: string; message: string; currentValue?: number; maxValue?: number }>;
-  }>({
-    open: false,
-    violations: []
-  });
-
-  // System policy configuration state
-  const [systemPolicy, setSystemPolicy] = useState<{
-    maxApprovalLevels: number;
-    maxParticipants: number;
-    allowSpectators: boolean;
-    maxSpectators: number;
-  }>({
-    maxApprovalLevels: 10,
-    maxParticipants: 50,
-    allowSpectators: true,
-    maxSpectators: 20
-  });
-
-  // Fetch document policy and system policy on mount
-  useEffect(() => {
-    const loadPolicies = async () => {
-      try {
-        // Load document policy
-        const docConfigs = await getAllConfigurations('DOCUMENT_POLICY');
-        const docConfigMap: Record<string, string> = {};
-        docConfigs.forEach((c: AdminConfiguration) => {
-          docConfigMap[c.configKey] = c.configValue;
-        });
-
-        const maxFileSizeMB = parseInt(docConfigMap['MAX_FILE_SIZE_MB'] || '10');
-        const allowedFileTypesStr = docConfigMap['ALLOWED_FILE_TYPES'] || 'pdf,doc,docx,xls,xlsx,ppt,pptx,jpg,jpeg,png,gif';
-        const allowedFileTypes = allowedFileTypesStr.split(',').map(ext => ext.trim().toLowerCase());
-
-        setDocumentPolicy({
-          maxFileSizeMB,
-          allowedFileTypes
-        });
-
-        // Load system policy (WORKFLOW_SHARING and TAT_SETTINGS)
-        const workflowConfigs = await getAllConfigurations('WORKFLOW_SHARING');
-        const tatConfigs = await getAllConfigurations('TAT_SETTINGS');
-        const allConfigs = [...workflowConfigs, ...tatConfigs];
-        const configMap: Record<string, string> = {};
-        allConfigs.forEach((c: AdminConfiguration) => {
-          configMap[c.configKey] = c.configValue;
-        });
-
-        setSystemPolicy({
-          maxApprovalLevels: parseInt(configMap['MAX_APPROVAL_LEVELS'] || '10'),
-          maxParticipants: parseInt(configMap['MAX_PARTICIPANTS_PER_REQUEST'] || '50'),
-          allowSpectators: configMap['ALLOW_ADD_SPECTATOR']?.toLowerCase() === 'true',
-          maxSpectators: parseInt(configMap['MAX_SPECTATORS_PER_REQUEST'] || '20')
-        });
-      } catch (error) {
-        console.error('Failed to load policies:', error);
-        // Use defaults if loading fails
-      }
-    };
-
-    loadPolicies();
-  }, []);
-
-  // Fetch draft data when in edit mode
-  useEffect(() => {
-    if (!isEditing || !editRequestId) return;
-    
-    let mounted = true;
-    (async () => {
-      try {
-        setLoadingDraft(true);
-        const details = await getWorkflowDetails(editRequestId);
-        if (!mounted || !details) return;
-        
-        const wf = details.workflow || {};
-        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);
-        
-        // Map priority
-        const priority = (wf.priority || '').toString().toLowerCase();
-        const priorityMap: Record<string, string> = {
-          'standard': 'standard',
-          'express': 'express'
-        };
-        
-        // Map template type
-        const templateType = wf.templateType === 'TEMPLATE' ? 'existing-template' : 'custom';
-        const template = REQUEST_TEMPLATES.find(t => t.id === templateType) || REQUEST_TEMPLATES[0] || null;
-        setSelectedTemplate(template);
-        
-        // Map approvers
-        const mappedApprovers = approvals
-          .sort((a: any, b: any) => (a.levelNumber || 0) - (b.levelNumber || 0))
-          .map((approval: any) => {
-            const tatHours = Number(approval.tatHours || 24);
-            const tatDays = Math.floor(tatHours / 24);
-            const tatHoursRemainder = tatHours % 24;
-            return {
-              id: approval.approverId || `temp-${approval.levelNumber}`,
-              name: approval.approverName || approval.approverEmail || '',
-              email: approval.approverEmail || '',
-              role: approval.levelName || `Level ${approval.levelNumber}`,
-              department: '',
-              avatar: (approval.approverName || approval.approverEmail || 'XX').substring(0, 2).toUpperCase(),
-              level: approval.levelNumber || 1,
-              canClose: false,
-              tat: tatDays > 0 ? tatDays : tatHoursRemainder,
-              tatType: tatDays > 0 ? 'days' as const : 'hours' as const,
-              userId: approval.approverId
-            };
-          });
-        
-        // Map spectators - check both participantType and participant_type fields
-        // Debug: log participants to understand the structure
-        console.log('Loading draft - participants:', participants);
-        
-        const mappedSpectators = participants
-          .filter((p: any) => {
-            // Check multiple possible field names for participantType
-            const pt = (p.participantType || p.participant_type || '').toString().toUpperCase().trim();
-            const isSpectator = pt === 'SPECTATOR';
-            if (!isSpectator) {
-              return false;
-            }
-            // Also ensure we have at least an email
-            const hasEmail = !!(p.userEmail || p.user_email || p.email);
-            if (!hasEmail) {
-              console.warn('Skipping spectator without email:', p);
-            }
-            return hasEmail;
-          })
-          .map((p: any, index: number) => {
-            // Use userId if available, otherwise generate a stable unique ID
-            const userId = p.userId || p.user_id || p.id;
-            const userName = p.userName || p.user_name || p.name || '';
-            const userEmail = p.userEmail || p.user_email || p.email || '';
-            
-            // Generate avatar from name or email
-            const avatarText = userName || userEmail || 'XX';
-            const avatar = avatarText
-              .split(' ')
-              .map((s: string) => s[0])
-              .filter(Boolean)
-              .join('')
-              .slice(0, 2)
-              .toUpperCase();
-            
-            return {
-              id: userId || `spectator-${editRequestId}-${index}-${Date.now()}`,
-              userId: userId, // Keep userId separate for reference
-              name: userName || userEmail || 'Spectator',
-              email: userEmail,
-              role: 'Spectator',
-              department: p.department || '',
-              avatar: avatar,
-              level: 1,
-              canClose: false
-            };
-          });
-        
-        // Debug: log mapped spectators
-        console.log('Mapped spectators:', mappedSpectators);
-        
-        // Update form data
-        setFormData(prev => ({
-          ...prev,
-          template: templateType,
-          title: wf.title || '',
-          description: wf.description || '',
-          priority: priorityMap[priority] || 'standard',
-          approvers: mappedApprovers,
-          approverCount: mappedApprovers.length || 1,
-          spectators: mappedSpectators,
-          maxLevel: Math.max(...mappedApprovers.map((a: any) => a.level || 1), 1)
-        }));
-        
-        // Skip template selection step if editing
-        setCurrentStep(2);
-      } catch (error) {
-        console.error('Failed to load draft:', error);
-      } finally {
-        if (mounted) setLoadingDraft(false);
-      }
-    })();
-    
-    return () => { mounted = false; };
-  }, [isEditing, editRequestId]);
-
-  const updateFormData = (field: string, value: any) => {
-    setFormData(prev => ({ ...prev, [field]: value }));
-  };
-
-  const validateEmail = (email: string) => {
-    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
-  };
-
-  const createUserFromEmail = (email: string, name: string = '', role: string = '', department: string = '', level: number = 1) => {
-    const avatar = name ? name.split(' ').map(n => (n?.[0] || '')).join('').toUpperCase() : email.split('@')[0]?.substring(0, 2).toUpperCase() || 'XX';
-    return {
-      id: `temp-${Date.now()}-${Math.random()}`,
-      name: name || email.split('@')[0],
-      email,
-      role: role || 'External User',
-      department: department || 'External',
-      avatar,
-      level,
-      canClose: level >= 4,
-      isInvited: true
-    };
-  };
-
-  const getPriorityIcon = (priority: string) => {
-    switch (priority) {
-      case 'high': return <Flame className="w-4 h-4 text-red-600" />;
-      case 'medium': return <Target className="w-4 h-4 text-orange-600" />;
-      case 'low': return <TrendingUp className="w-4 h-4 text-green-600" />;
-      default: return <Target className="w-4 h-4 text-gray-600" />;
-    }
-  };
-
-  const isStepValid = () => {
-    switch (currentStep) {
-      case 1: return selectedTemplate !== null;
-      case 2: return formData.title.trim() !== '' && formData.description.trim() !== '' && formData.priority !== '';
-      case 3: return (formData.approverCount || 1) > 0 && 
-                     formData.approvers.length === (formData.approverCount || 1) && 
-                     formData.approvers.every(approver => {
-                       if (!approver || !approver.email) return false;
-                       
-                       // Check if email is valid
-                       if (!validateEmail(approver.email)) return false;
-                       
-                       // Check if approver has a userId (selected via @ search)
-                       // If no userId, it means they manually typed the email
-                       if (!approver.userId) {
-                         // Will be validated and ensured when moving to next step
-                         return true; // Allow for now, will validate on next step
-                       }
-                       
-                       // Check TAT validation based on type
-                       const tatType = approver.tatType || 'hours';
-                       if (tatType === 'hours') {
-                         return approver.tat && approver.tat > 0 && approver.tat <= 720;
-                       } else if (tatType === 'days') {
-                         return approver.tat && approver.tat > 0 && approver.tat <= 30;
-                       }
-                       return false;
-                     });
-      case 4: return true; // Participants are optional except approvers
-      case 5: return true; // Documents are optional
-      case 6: return true; // Review & Submit
-      default: return false;
-    }
-  };
-
-  const nextStep = async () => {
-    if (!isStepValid()) return;
-    
-    // Scroll to top on mobile to ensure buttons are visible
-    if (window.innerWidth < 640) {
-      window.scrollTo({ top: 0, behavior: 'smooth' });
-    }
-    
-    // Special validation when leaving step 3 (Approval Workflow)
-    if (currentStep === 3) {
-      // Validate and ensure all approvers with manually entered emails exist
-      const approversToValidate = formData.approvers.filter(a => a && a.email && !a.userId);
-      
-      if (approversToValidate.length > 0) {
-        try {
-          // Show loading state (optional - can be added later)
-          const updatedApprovers = [...formData.approvers];
-          
-          for (let i = 0; i < updatedApprovers.length; i++) {
-            const approver = updatedApprovers[i];
-            
-            // Skip if already has userId (selected via @ search)
-            if (approver.userId) continue;
-            
-            // Skip if no email
-            if (!approver.email) continue;
-            
-            // Check if this email is the initiator's email
-            const initiatorEmail = (user as any)?.email?.toLowerCase();
-            if (approver.email.toLowerCase() === initiatorEmail) {
-              setValidationModal({
-                open: true,
-                type: 'self-assign',
-                email: approver.email,
-                message: ''
-              });
-              return; // Stop navigation
-            }
-            
-            // Search for the user by email in Okta directory
-            try {
-              const response = await searchUsers(approver.email, 1);
-              // Backend returns { success: true, data: [...users] }
-              const searchResults = response.data?.data || [];
-              
-              if (searchResults.length === 0) {
-                // User NOT found in Okta directory
-                setValidationModal({
-                  open: true,
-                  type: 'not-found',
-                  email: approver.email,
-                  message: ''
-                });
-                return; // Stop navigation - user must fix the email
-              } else {
-                // User found in Okta - ensure they exist in our DB and get userId
-                const foundUser = searchResults[0];
-                
-                if (!foundUser) {
-                  setValidationModal({
-                    open: true,
-                    type: 'error',
-                    email: approver.email,
-                    message: 'Could not retrieve user details. Please try again.'
-                  });
-                  return;
-                }
-                
-                // Ensure user exists in our database (creates if needed)
-                const dbUser = await ensureUserExists({
-                  userId: foundUser.userId,
-                  email: foundUser.email,
-                  displayName: foundUser.displayName,
-                  firstName: foundUser.firstName,
-                  lastName: foundUser.lastName,
-                  department: foundUser.department,
-                  phone: foundUser.phone,
-                  mobilePhone: foundUser.mobilePhone,
-                  designation: foundUser.designation,
-                  jobTitle: foundUser.jobTitle,
-                  manager: foundUser.manager,
-                  employeeId: foundUser.employeeId,
-                  employeeNumber: foundUser.employeeNumber,
-                  secondEmail: foundUser.secondEmail,
-                  location: foundUser.location
-                });
-                
-                // Update approver with DB userId and full details
-                updatedApprovers[i] = {
-                  ...approver,
-                  userId: dbUser.userId,
-                  name: dbUser.displayName || approver.name,
-                  department: dbUser.department || approver.department,
-                  avatar: (dbUser.displayName || dbUser.email).substring(0, 2).toUpperCase()
-                };
-                
-                console.log(`✅ Validated approver ${i + 1}: ${dbUser.displayName} (${dbUser.email})`);
-              }
-            } catch (error) {
-              console.error(`Failed to validate approver ${approver.email}:`, error);
-              setValidationModal({
-                open: true,
-                type: 'error',
-                email: approver.email,
-                message: `Failed to validate user. Please try again or select a different user.`
-              });
-              return; // Stop navigation
-            }
-          }
-          
-          // Update form data with validated approvers
-          updateFormData('approvers', updatedApprovers);
-        } catch (error) {
-          console.error('Failed to validate approvers:', error);
-          setValidationModal({
-            open: true,
-            type: 'error',
-            email: '',
-            message: 'Failed to validate approvers. Please try again.'
-          });
-          return; // Stop navigation
-        }
-      }
-    }
-    
-    // Proceed to next step
-    if (currentStep < totalSteps) {
-      setCurrentStep(currentStep + 1);
-    }
-  };
-
-  const prevStep = () => {
-    if (currentStep > 1) {
-      setCurrentStep(currentStep - 1);
-      // Scroll to top on mobile to ensure content is visible
-      if (window.innerWidth < 640) {
-        window.scrollTo({ top: 0, behavior: 'smooth' });
-      }
-    }
-  };
-
-  const selectTemplate = (template: RequestTemplate) => {
-    setSelectedTemplate(template);
-    updateFormData('template', template.id);
-    updateFormData('category', template.category);
-    updateFormData('priority', template.priority);
-    
-    // Auto-suggest SLA
-    const suggestedDate = new Date();
-    suggestedDate.setDate(suggestedDate.getDate() + template.suggestedSLA);
-    updateFormData('slaEndDate', suggestedDate);
-    
-    // If user selected "Existing Template", show the template selection modal
-    if (template.id === 'existing-template') {
-      setShowTemplateModal(true);
-    }
-  };
-
-  const handleTemplateSelection = (templateId: string) => {
-    // This will be handled by routing to the specific template wizard in App.tsx
-    if (onSubmit) {
-      onSubmit({ templateType: templateId });
-    }
-  };
-
-  const addUser = (user: any, type: 'approvers' | 'spectators' | 'ccList' | 'invitedUsers') => {
-    const userEmail = (user.email || '').toLowerCase();
-    const currentList = formData[type];
-    
-    // Check if user is already in the target list
-    if (currentList.find((u: any) => u.id === user.id || (u.email || '').toLowerCase() === userEmail)) {
-      setValidationModal({
-        open: true,
-        type: 'error',
-        email: user.email,
-        message: `${user.name || user.email} is already added as ${type.slice(0, -1)}.`
-      });
-      return;
-    }
-    
-    // Prevent adding same user in different roles
-    if (type === 'spectators') {
-      // Check if user is already an approver
-      const isApprover = formData.approvers.find((a: any) => 
-        a.id === user.id || (a.email || '').toLowerCase() === userEmail
-      );
-      if (isApprover) {
-        setValidationModal({
-          open: true,
-          type: 'error',
-          email: user.email,
-          message: `${user.name || user.email} is already an approver and cannot be added as a spectator.`
-        });
-        return;
-      }
-    } else if (type === 'approvers') {
-      // Check if user is already a spectator
-      const isSpectator = formData.spectators.find((s: any) => 
-        s.id === user.id || (s.email || '').toLowerCase() === userEmail
-      );
-      if (isSpectator) {
-        setValidationModal({
-          open: true,
-          type: 'error',
-          email: user.email,
-          message: `${user.name || user.email} is already a spectator and cannot be added as an approver.`
-        });
-        return;
-      }
-    }
-
-    // Policy validation before adding
-    const violations: Array<{ type: string; message: string; currentValue?: number; maxValue?: number }> = [];
-
-    if (type === 'approvers') {
-      // Check maximum approval levels
-      const updatedApprovers = [...currentList, user];
-      const maxLevel = Math.max(...updatedApprovers.map((a: any) => a.level || 1), 1);
-      if (maxLevel > systemPolicy.maxApprovalLevels) {
-        violations.push({
-          type: 'Maximum Approval Levels Exceeded',
-          message: `Adding this approver would exceed the maximum approval levels limit.`,
-          currentValue: maxLevel,
-          maxValue: systemPolicy.maxApprovalLevels
-        });
-      }
-
-      // Check maximum participants (approvers + spectators + initiator)
-      const totalParticipants = 1 + updatedApprovers.length + formData.spectators.length; // 1 for initiator
-      if (totalParticipants > systemPolicy.maxParticipants) {
-        violations.push({
-          type: 'Maximum Participants Exceeded',
-          message: `Adding this approver would exceed the maximum participants limit.`,
-          currentValue: totalParticipants,
-          maxValue: systemPolicy.maxParticipants
-        });
-      }
-    } else if (type === 'spectators') {
-      // Check if spectators are allowed
-      if (!systemPolicy.allowSpectators) {
-        violations.push({
-          type: 'Spectators Not Allowed',
-          message: `Adding spectators is not allowed by system policy.`,
-        });
-      }
-
-      // Check maximum spectators
-      const updatedSpectators = [...currentList, user];
-      if (updatedSpectators.length > systemPolicy.maxSpectators) {
-        violations.push({
-          type: 'Maximum Spectators Exceeded',
-          message: `Adding this spectator would exceed the maximum spectators limit.`,
-          currentValue: updatedSpectators.length,
-          maxValue: systemPolicy.maxSpectators
-        });
-      }
-
-      // Check maximum participants (approvers + spectators + initiator)
-      const totalParticipants = 1 + formData.approvers.length + updatedSpectators.length; // 1 for initiator
-      if (totalParticipants > systemPolicy.maxParticipants) {
-        violations.push({
-          type: 'Maximum Participants Exceeded',
-          message: `Adding this spectator would exceed the maximum participants limit.`,
-          currentValue: totalParticipants,
-          maxValue: systemPolicy.maxParticipants
-        });
-      }
-    }
-
-    // If there are violations, show policy violation modal
-    if (violations.length > 0) {
-      setPolicyViolationModal({
-        open: true,
-        violations
-      });
-      return;
-    }
-    
-    // Add user to the list
-    const updatedList = [...currentList, user];
-    updateFormData(type, updatedList);
-    
-    // Update max level if adding approver
-    if (type === 'approvers') {
-      const maxApproverLevel = Math.max(...updatedList.map((a: any) => a.level || 1), 1);
-      updateFormData('maxLevel', maxApproverLevel);
-    }
-  };
-
-  const removeUser = (userId: string, type: 'approvers' | 'spectators' | 'ccList' | 'invitedUsers') => {
-    const currentList = formData[type];
-    const updatedList = currentList.filter((u: any) => u.id !== userId);
-    updateFormData(type, updatedList);
-    
-    // Update max level if removing approver
-    if (type === 'approvers') {
-      const maxApproverLevel = Math.max(...updatedList.map((a: any) => a.level), 0);
-      updateFormData('maxLevel', maxApproverLevel);
-    }
-  };
-
-  const addUserByEmail = () => {
-    if (!validateEmail(emailInput)) return;
-    
-    // Check if user already exists
-    const existingUser = [...MOCK_USERS, ...formData.invitedUsers].find(u => u.email === emailInput);
-    if (existingUser) {
-      setEmailInput('');
-      return existingUser;
-    }
-    
-    // Create new user
-    const newUser = createUserFromEmail(
-      emailInput,
-      newUserData.name,
-      newUserData.role,
-      newUserData.department,
-      newUserData.level
-    );
-    
-    addUser(newUser, 'invitedUsers');
-    setEmailInput('');
-    setNewUserData({ name: '', email: '', role: '', department: '', level: 1 });
-    
-    return newUser;
-  };
-
-  const inviteAndAddUser = async (type: 'approvers' | 'spectators' | 'ccList') => {
-    // For spectators, validate against Okta before adding
-    if (type === 'spectators' && emailInput) {
-      // Check if this email is the initiator's email
-      const initiatorEmail = (user as any)?.email?.toLowerCase();
-      if (emailInput.toLowerCase() === initiatorEmail) {
-        setValidationModal({
-          open: true,
-          type: 'self-assign',
-          email: emailInput,
-          message: 'You cannot add yourself as a spectator.'
-        });
-        return;
-      }
-      
-      // Search for user in Okta directory
-      try {
-        const response = await searchUsers(emailInput, 1);
-        // Backend returns { success: true, data: [...users] }
-        const searchResults = response.data?.data || [];
-        
-        if (searchResults.length === 0) {
-          // User NOT found in Okta directory
-          setValidationModal({
-            open: true,
-            type: 'not-found',
-            email: emailInput,
-            message: ''
-          });
-          return;
-        }
-        
-        // User found in Okta - ensure they exist in DB
-        const foundUser = searchResults[0];
-        
-        if (!foundUser) {
-          setValidationModal({
-            open: true,
-            type: 'error',
-            email: emailInput,
-            message: 'Could not retrieve user details. Please try again.'
-          });
-          return;
-        }
-        
-        const dbUser = await ensureUserExists({
-          userId: foundUser.userId,
-          email: foundUser.email,
-          displayName: foundUser.displayName,
-          firstName: foundUser.firstName,
-          lastName: foundUser.lastName,
-          department: foundUser.department,
-          phone: foundUser.phone,
-          mobilePhone: foundUser.mobilePhone,
-          designation: foundUser.designation,
-          jobTitle: foundUser.jobTitle,
-          manager: foundUser.manager,
-          employeeId: foundUser.employeeId,
-          employeeNumber: foundUser.employeeNumber,
-          secondEmail: foundUser.secondEmail,
-          location: foundUser.location
-        });
-        
-        // Create spectator object with verified data
-        const spectator = {
-          id: dbUser.userId,
-          userId: dbUser.userId,
-          name: dbUser.displayName || dbUser.email.split('@')[0],
-          email: dbUser.email,
-          avatar: (dbUser.displayName || dbUser.email).substring(0, 2).toUpperCase(),
-          role: 'Spectator',
-          department: dbUser.department || '',
-          level: 1,
-          canClose: false
-        };
-        
-        // Add spectator
-        addUser(spectator, 'spectators');
-        setEmailInput('');
-        return;
-      } catch (error) {
-        console.error('Failed to validate spectator:', error);
-        setValidationModal({
-          open: true,
-          type: 'error',
-          email: emailInput,
-          message: 'Failed to validate user. Please try again.'
-        });
-        return;
-      }
-    }
-    
-    // For other types (deprecated flow)
-    const userObj = addUserByEmail();
-    if (userObj) {
-      addUser(userObj, type);
-    }
-  };
-
-  const validateFile = (file: File): { valid: boolean; reason?: string } => {
-    // Check file size
-    const maxSizeBytes = documentPolicy.maxFileSizeMB * 1024 * 1024;
-    if (file.size > maxSizeBytes) {
-      return {
-        valid: false,
-        reason: `File size exceeds the maximum allowed size of ${documentPolicy.maxFileSizeMB}MB. Current size: ${(file.size / (1024 * 1024)).toFixed(2)}MB`
-      };
-    }
-
-    // Check file extension
-    const fileName = file.name.toLowerCase();
-    const fileExtension = fileName.substring(fileName.lastIndexOf('.') + 1);
-    
-    if (!documentPolicy.allowedFileTypes.includes(fileExtension)) {
-      return {
-        valid: false,
-        reason: `File type "${fileExtension}" is not allowed. Allowed types: ${documentPolicy.allowedFileTypes.join(', ')}`
-      };
-    }
-
-    return { valid: true };
-  };
-
-  const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const files = Array.from(event.target.files || []);
-    
-    if (files.length === 0) return;
-
-    // Validate all files
-    const validationErrors: Array<{ fileName: string; reason: string }> = [];
-    const validFiles: File[] = [];
-
-    files.forEach(file => {
-      const validation = validateFile(file);
-      if (!validation.valid) {
-        validationErrors.push({
-          fileName: file.name,
-          reason: validation.reason || 'Unknown validation error'
-        });
-      } else {
-        validFiles.push(file);
-      }
+  // Submission logic
+  const { submitting, savingDraft, handleSubmit, handleSaveDraft } =
+    useCreateRequestSubmission({
+      formData,
+      selectedTemplate,
+      documents,
+      documentsToDelete,
+      user: user!,
+      isEditing,
+      editRequestId,
+      onSubmit,
     });
 
-    // If there are validation errors, show modal
-    if (validationErrors.length > 0) {
-      setDocumentErrorModal({
-        open: true,
-        errors: validationErrors
-      });
-    }
+  // Event handlers
+  const {
+    showTemplateModal,
+    setShowTemplateModal,
+    previewDocument,
+    selectTemplate,
+    handleTemplateSelection,
+    nextStep,
+    prevStep,
+    handlePreviewDocument,
+    closePreview,
+  } = useCreateRequestHandlers({
+    selectedTemplate,
+    setSelectedTemplate,
+    updateFormData,
+    formData,
+    currentStep,
+    isStepValid,
+    wizardNextStep,
+    wizardPrevStep,
+    user: user!,
+    openValidationModal,
+    onSubmit,
+  });
 
-    // Add only valid files
-    if (validFiles.length > 0) {
-      updateFormData('documents', [...formData.documents, ...validFiles]);
-      if (validFiles.length < files.length) {
-        toast.warning(`${validFiles.length} of ${files.length} file(s) were added. ${validationErrors.length} file(s) were rejected.`);
+  // 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 (onBack) {
+        onBack();
       } else {
-        toast.success(`${validFiles.length} file(s) added successfully`);
+        // 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 });
+        }
       }
+    } else {
+      // On other steps (2, 5, 6), go to previous step in wizard
+      prevStep();
     }
+  }, [currentStep, onBack, navigate, prevStep]);
 
-    // Reset file input
-    if (event.target) {
-      event.target.value = '';
+  // 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) {
+      setDocuments(formData.documents);
+      documentsSyncedRef.current = true;
+    }
+    isInitialMount.current = false;
+  }, [formData.documents]);
+
+  // Update formData.documents when documents change (one-way sync from local state to formData)
+  // 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) {
+      isUpdatingFromFormData.current = false;
+      prevDocumentsRef.current = documents;
+      return;
+    }
+    
+    // Only update if documents actually changed
+    if (prevDocumentsRef.current !== documents) {
+      updateFormData('documents', documents);
+      prevDocumentsRef.current = documents;
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [documents]);
+
+  // Render step content
+  const renderStepContent = () => {
+    switch (currentStep) {
+      case 1:
+        return (
+          <TemplateSelectionStep
+            templates={REQUEST_TEMPLATES}
+            selectedTemplate={selectedTemplate}
+            onSelectTemplate={selectTemplate}
+          />
+        );
+      case 2:
+        return (
+          <BasicInformationStep
+            formData={formData}
+            selectedTemplate={selectedTemplate}
+            updateFormData={updateFormData}
+          />
+        );
+      case 3:
+        return (
+          <ApprovalWorkflowStep
+            formData={formData}
+            updateFormData={updateFormData}
+            onValidationError={(error) =>
+              openValidationModal(
+                error.type as 'error' | 'self-assign' | 'not-found',
+                error.email,
+                error.message
+              )
+            }
+          />
+        );
+      case 4:
+        return (
+          <ParticipantsStep
+            formData={formData}
+            updateFormData={updateFormData}
+            onValidationError={(error) =>
+              openValidationModal(
+                error.type as 'error' | 'self-assign' | 'not-found',
+                error.email,
+                error.message
+              )
+            }
+            initiatorEmail={(user as any)?.email || ''}
+          />
+        );
+      case 5:
+        return (
+          <DocumentsStep
+            documentPolicy={documentPolicy}
+            isEditing={isEditing}
+            documents={documents}
+            existingDocuments={existingDocuments}
+            documentsToDelete={documentsToDelete}
+            onDocumentsChange={setDocuments}
+            onExistingDocumentsChange={setExistingDocuments}
+            onDocumentsToDeleteChange={setDocumentsToDelete}
+            onPreviewDocument={handlePreviewDocument}
+            onDocumentErrors={(errors) => openDocumentErrorModal(errors)}
+            fileInputRef={fileInputRef}
+          />
+        );
+      case 6:
+        return (
+          <ReviewSubmitStep
+            formData={formData}
+            selectedTemplate={selectedTemplate}
+          />
+        );
+      default:
+        return null;
     }
   };
 
-  const handleSubmit = async () => {
-    if (!isStepValid() || submitting || savingDraft) return;
-    
-    setSubmitting(true);
-
-    // Participants mapping
-    const initiatorId = user?.userId || '';
-    const initiatorEmail = (user as any)?.email || '';
-    const initiatorName = (user as any)?.displayName || (user as any)?.name || initiatorEmail.split('@')[0] || 'Initiator';
-
-    const participants = [
-      {
-        userId: initiatorId,
-        userEmail: initiatorEmail,
-        userName: initiatorName,
-        participantType: 'INITIATOR' as const,
-        canComment: true,
-        canViewDocuments: true,
-        canDownloadDocuments: true,
-        notificationEnabled: true,
-        addedBy: initiatorId,
-      },
-      // Approvers -> map to participants (APPROVER)
-      ...((formData.approvers || []).filter((a: any) => a?.email).map((a: any) => ({
-        userId: a.userId || undefined,
-        userEmail: a.email,
-        userName: a.name || a.email.split('@')[0],
-        participantType: 'APPROVER' as const,
-        canComment: true,
-        canViewDocuments: true,
-        canDownloadDocuments: true,
-        notificationEnabled: true,
-        addedBy: initiatorId,
-      })) as any[]),
-      // Spectators -> map to participants (SPECTATOR)
-      ...((formData.spectators || []).filter((s: any) => s?.email).map((s: any) => ({
-        userId: s.id || undefined,
-        userEmail: s.email,
-        userName: s.name || s.email.split('@')[0],
-        participantType: 'SPECTATOR' as const,
-        canComment: true,
-        canViewDocuments: true,
-        canDownloadDocuments: true,
-        notificationEnabled: true,
-        addedBy: initiatorId,
-      })) as any[]),
-    ];
-
-    // Ensure approver userIds are present (selected via @ lookup)
-    const hasMissingApproverIds = (formData.approvers || []).slice(0, formData.approverCount || 1)
-      .some((a: any) => !a?.userId || !a?.email);
-    if (hasMissingApproverIds) {
-      alert('Please select approvers using @ search so we can capture their user IDs.');
-      return;
-    }
-
-    const payload = {
-      templateId: selectedTemplate?.id || null,
-      templateType: selectedTemplate?.id === 'custom' ? 'CUSTOM' as const : 'TEMPLATE' as const,
-      title: formData.title,
-      description: formData.description,
-      priorityUi: (formData.priority === 'express' ? 'express' : 'standard') as 'express' | 'standard',
-      approverCount: formData.approverCount || 1,
-      approvers: (formData.approvers || []).map((a: any) => ({
-        userId: a?.userId || '',
-        email: a?.email || '',
-        name: a?.name,
-        tat: a?.tat || '',
-        tatType: a?.tatType || 'hours',
-      })),
-      spectators: (formData.spectators || [])
-        .filter((s: any) => {
-          const approverIds = (formData.approvers || []).map((a: any) => a?.userId).filter(Boolean);
-          const approverEmails = (formData.approvers || []).map((a: any) => a?.email?.toLowerCase?.()).filter(Boolean);
-          return !approverIds.includes(s?.id) && !approverEmails.includes((s?.email || '').toLowerCase());
-        })
-        .map((s: any) => ({
-        userId: s?.id || '',
-        name: s?.name || s?.email?.split('@')?.[0] || 'Spectator',
-        email: s?.email || '',
-      })),
-      ccList: (formData.ccList || []).map((c: any) => ({
-        id: c?.id,
-        name: c?.name || c?.email?.split('@')?.[0] || 'CC',
-        email: c?.email || '',
-      })),
-      // Backend service supports participants field (optional)
-      participants,
-    };
-
-    // Handle edit mode - update existing draft with full structure
-    if (isEditing && editRequestId) {
-      // Build approval levels
-      const approvalLevels = (formData.approvers || []).slice(0, formData.approverCount || 1).map((a: any, index: number) => {
-        const tat = typeof a.tat === 'number' ? a.tat : 0;
-        const tatHours = a.tatType === 'days' ? tat * 24 : tat || 24;
-        return {
-          levelNumber: index + 1,
-          levelName: `Level ${index + 1}`,
-          approverId: a.userId || '',
-          approverEmail: a.email || '',
-          approverName: a.name || a.email?.split('@')[0] || `Approver ${index + 1}`,
-          tatHours: tatHours,
-          isFinalApprover: index + 1 === (formData.approverCount || 1)
-        };
-      });
-
-      // Build participants
-      const participants = [
-        {
-          userId: user?.userId || '',
-          userEmail: (user as any)?.email || '',
-          userName: (user as any)?.displayName || (user as any)?.name || (user as any)?.email?.split('@')[0] || 'Initiator',
-          participantType: 'INITIATOR' as const,
-          canComment: true,
-          canViewDocuments: true,
-          canDownloadDocuments: true,
-          notificationEnabled: true,
-        },
-        ...((formData.approvers || []).filter((a: any) => a?.email && a?.userId).map((a: any) => ({
-          userId: a.userId,
-          userEmail: a.email,
-          userName: a.name || a.email.split('@')[0],
-          participantType: 'APPROVER' as const,
-          canComment: true,
-          canViewDocuments: true,
-          canDownloadDocuments: true,
-          notificationEnabled: true,
-        })) as any[]),
-        ...((formData.spectators || []).filter((s: any) => s?.email).map((s: any) => ({
-          userId: s.id || s.userId || undefined,
-          userEmail: s.email,
-          userName: s.name || s.email.split('@')[0],
-          participantType: 'SPECTATOR' as const,
-          canComment: true,
-          canViewDocuments: true,
-          canDownloadDocuments: true,
-          notificationEnabled: true,
-        })) as any[]),
-      ];
-
-      // Build update payload
-      const updatePayload = {
-        title: formData.title,
-        description: formData.description,
-        priority: formData.priority === 'express' ? 'EXPRESS' : 'STANDARD',
-        approvalLevels: approvalLevels,
-        participants: participants,
-        deleteDocumentIds: documentsToDelete.length > 0 ? documentsToDelete : undefined,
-      };
-
-      // Determine if we need multipart (new files or deletions)
-      const hasNewFiles = formData.documents && formData.documents.length > 0;
-      const hasDeletions = documentsToDelete.length > 0;
-
-      if (hasNewFiles || hasDeletions) {
-        // Use multipart update
-        try {
-          await updateWorkflowMultipart(editRequestId, updatePayload, formData.documents || [], documentsToDelete);
-          // Submit the updated workflow
-          try {
-            await submitWorkflow(editRequestId);
-            onSubmit?.({ ...formData, backendId: editRequestId, template: selectedTemplate });
-          } catch (err) {
-            console.error('Failed to submit workflow:', err);
-            setSubmitting(false);
-          }
-        } catch (err) {
-          console.error('Failed to update workflow:', err);
-          setSubmitting(false);
-        }
-      } else {
-        // Use regular update
-        try {
-          await updateWorkflow(editRequestId, updatePayload);
-          // Submit the updated workflow
-          try {
-            await submitWorkflow(editRequestId);
-            onSubmit?.({ ...formData, backendId: editRequestId, template: selectedTemplate });
-          } catch (err) {
-            console.error('Failed to submit workflow:', err);
-            setSubmitting(false);
-          }
-        } catch (err) {
-          console.error('Failed to update workflow:', err);
-          setSubmitting(false);
-        }
-      }
-      return;
-    }
-    
-    // Create new workflow
-    try {
-      const res = await createWorkflowMultipart(payload as any, formData.documents || [], 'SUPPORTING');
-      const id = (res as any).id;
-      try {
-        await submitWorkflow(id);
-        onSubmit?.({ ...formData, backendId: id, template: selectedTemplate });
-      } catch (err) {
-        console.error('Failed to submit workflow:', err);
-        setSubmitting(false);
-      }
-    } catch (err) {
-      console.error('Failed to create workflow:', err);
-      setSubmitting(false);
-    }
-  };
-
-  const handleSaveDraft = async () => {
-    // Same payload as submit, but do NOT call submit endpoint
-    if (!selectedTemplate || !formData.title.trim() || !formData.description.trim() || !formData.priority) {
-      // allow minimal validation for draft: require title/description/priority/template
-      return;
-    }
-    
-    if (submitting || savingDraft) return;
-    
-    setSavingDraft(true);
-    
-    // Handle edit mode - update existing draft with full structure
-    if (isEditing && editRequestId) {
-      // Build approval levels
-      const approvalLevels = (formData.approvers || []).slice(0, formData.approverCount || 1).map((a: any, index: number) => {
-        const tat = typeof a.tat === 'number' ? a.tat : 0;
-        const tatHours = a.tatType === 'days' ? tat * 24 : tat || 24;
-        return {
-          levelNumber: index + 1,
-          levelName: `Level ${index + 1}`,
-          approverId: a.userId || '',
-          approverEmail: a.email || '',
-          approverName: a.name || a.email?.split('@')[0] || `Approver ${index + 1}`,
-          tatHours: tatHours,
-          isFinalApprover: index + 1 === (formData.approverCount || 1)
-        };
-      });
-
-      // Build participants
-      const participants = [
-        {
-          userId: user?.userId || '',
-          userEmail: (user as any)?.email || '',
-          userName: (user as any)?.displayName || (user as any)?.name || (user as any)?.email?.split('@')[0] || 'Initiator',
-          participantType: 'INITIATOR' as const,
-          canComment: true,
-          canViewDocuments: true,
-          canDownloadDocuments: true,
-          notificationEnabled: true,
-        },
-        ...((formData.approvers || []).filter((a: any) => a?.email && a?.userId).map((a: any) => ({
-          userId: a.userId,
-          userEmail: a.email,
-          userName: a.name || a.email.split('@')[0],
-          participantType: 'APPROVER' as const,
-          canComment: true,
-          canViewDocuments: true,
-          canDownloadDocuments: true,
-          notificationEnabled: true,
-        })) as any[]),
-        ...((formData.spectators || []).filter((s: any) => s?.email).map((s: any) => ({
-          userId: s.id || s.userId || undefined,
-          userEmail: s.email,
-          userName: s.name || s.email.split('@')[0],
-          participantType: 'SPECTATOR' as const,
-          canComment: true,
-          canViewDocuments: true,
-          canDownloadDocuments: true,
-          notificationEnabled: true,
-        })) as any[]),
-      ];
-
-      // Build update payload
-      const updatePayload = {
-        title: formData.title,
-        description: formData.description,
-        priority: formData.priority === 'express' ? 'EXPRESS' : 'STANDARD',
-        approvalLevels: approvalLevels,
-        participants: participants,
-        deleteDocumentIds: documentsToDelete.length > 0 ? documentsToDelete : undefined,
-      };
-
-      // Determine if we need multipart (new files or deletions)
-      const hasNewFiles = formData.documents && formData.documents.length > 0;
-      const hasDeletions = documentsToDelete.length > 0;
-
-      if (hasNewFiles || hasDeletions) {
-        // Use multipart update
-        try {
-          await updateWorkflowMultipart(editRequestId, updatePayload, formData.documents || [], documentsToDelete);
-          onSubmit?.({ ...formData, backendId: editRequestId, template: selectedTemplate });
-        } catch (err) {
-          console.error('Failed to update draft:', err);
-          setSavingDraft(false);
-        }
-      } else {
-        // Use regular update
-        try {
-          await updateWorkflow(editRequestId, updatePayload);
-          onSubmit?.({ ...formData, backendId: editRequestId, template: selectedTemplate });
-        } catch (err) {
-          console.error('Failed to update draft:', err);
-          setSavingDraft(false);
-        }
-      }
-      return;
-    }
-    
-    // Build participants array for draft (same as handleSubmit)
-    const initiatorId = user?.userId || '';
-    const initiatorEmail = (user as any)?.email || '';
-    const initiatorName = (user as any)?.displayName || (user as any)?.name || initiatorEmail.split('@')[0] || 'Initiator';
-
-    const participants = [
-      {
-        userId: initiatorId,
-        userEmail: initiatorEmail,
-        userName: initiatorName,
-        participantType: 'INITIATOR' as const,
-        canComment: true,
-        canViewDocuments: true,
-        canDownloadDocuments: true,
-        notificationEnabled: true,
-        addedBy: initiatorId,
-      },
-      // Approvers -> map to participants (APPROVER)
-      ...((formData.approvers || []).filter((a: any) => a?.email).map((a: any) => ({
-        userId: a.userId || undefined,
-        userEmail: a.email,
-        userName: a.name || a.email.split('@')[0],
-        participantType: 'APPROVER' as const,
-        canComment: true,
-        canViewDocuments: true,
-        canDownloadDocuments: true,
-        notificationEnabled: true,
-        addedBy: initiatorId,
-      })) as any[]),
-      // Spectators -> map to participants (SPECTATOR)
-      ...((formData.spectators || []).filter((s: any) => s?.email).map((s: any) => ({
-        userId: s.id || undefined,
-        userEmail: s.email,
-        userName: s.name || s.email.split('@')[0],
-        participantType: 'SPECTATOR' as const,
-        canComment: true,
-        canViewDocuments: true,
-        canDownloadDocuments: true,
-        notificationEnabled: true,
-        addedBy: initiatorId,
-      })) as any[]),
-    ];
-
-    // Create new draft
-    const payload = {
-      templateId: selectedTemplate?.id || null,
-      templateType: selectedTemplate?.id === 'custom' ? 'CUSTOM' as const : 'TEMPLATE' as const,
-      title: formData.title,
-      description: formData.description,
-      priorityUi: (formData.priority === 'express' ? 'express' : 'standard') as 'express' | 'standard',
-      approverCount: formData.approverCount || 1,
-      approvers: (formData.approvers || []).map((a: any) => ({
-        userId: a?.userId || '',
-        email: a?.email || '',
-        name: a?.name,
-        tat: a?.tat || '',
-        tatType: a?.tatType || 'hours',
-      })),
-      spectators: (formData.spectators || [])
-        .filter((s: any) => {
-          const approverIds = (formData.approvers || []).map((a: any) => a?.userId).filter(Boolean);
-          const approverEmails = (formData.approvers || []).map((a: any) => a?.email?.toLowerCase?.()).filter(Boolean);
-          return !approverIds.includes(s?.id) && !approverEmails.includes((s?.email || '').toLowerCase());
-        })
-        .map((s: any) => ({
-        userId: s?.id || '',
-        name: s?.name || s?.email?.split('@')?.[0] || 'Spectator',
-        email: s?.email || '',
-      })),
-      ccList: (formData.ccList || []).map((c: any) => ({
-        id: c?.id,
-        name: c?.name || c?.email?.split('@')?.[0] || 'CC',
-        email: c?.email || '',
-      })),
-      participants: participants, // Include participants array for draft
-    };
-    try {
-      const res = await createWorkflowMultipart(payload as any, formData.documents || [], 'SUPPORTING');
-      onSubmit?.({ ...formData, backendId: (res as any).id, template: selectedTemplate });
-    } catch (err) {
-      console.error('Failed to save draft:', err);
-      setSavingDraft(false);
-    }
-  };
-
-  // Show loading state while fetching draft data
+  // Loading state
   if (loadingDraft) {
     return (
-      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
+      <div
+        className="min-h-screen bg-gray-50 flex items-center justify-center"
+        data-testid="create-request-loading"
+      >
         <div className="text-center">
           <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
           <p className="text-gray-600">Loading draft...</p>
@@ -1422,1904 +289,49 @@ export function CreateRequest({ onBack, onSubmit, requestId: propRequestId, isEd
     );
   }
 
-  const renderStepContent = () => {
-    switch (currentStep) {
-      case 1:
-        return (
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            exit={{ opacity: 0, y: -20 }}
-            className="min-h-full flex flex-col items-center justify-center py-8"
-          >
-            {/* Header Section */}
-            <div className="text-center mb-12 max-w-3xl">
-              <h1 className="text-4xl lg:text-5xl font-bold text-gray-900 mb-4">
-                Choose Your Request Type
-              </h1>
-              <p className="text-lg text-gray-600">
-                Start with a pre-built template for faster approvals, or create a custom request tailored to your needs.
-              </p>
-            </div>
-
-            {/* Template Cards Grid */}
-            <div className="w-full max-w-6xl grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
-              {REQUEST_TEMPLATES.map((template) => (
-                <motion.div
-                  key={template.id}
-                  whileHover={{ scale: 1.03 }}
-                  whileTap={{ scale: 0.98 }}
-                  transition={{ type: "spring", stiffness: 300, damping: 20 }}
-                >
-                  <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={() => selectTemplate(template)}
-                  >
-                    <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'
-                        }`}>
-                          <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 }}
-                          >
-                            <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">{template.name}</CardTitle>
-                        <div className="flex items-center gap-2">
-                          <Badge variant="secondary" className="text-xs">
-                            {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">
-                        {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">
-                          <Clock className="w-3.5 h-3.5" />
-                          <span>{template.estimatedTime}</span>
-                        </div>
-                        <div className="flex items-center gap-1.5">
-                          <Users className="w-3.5 h-3.5" />
-                          <span>{template.commonApprovers.length} approvers</span>
-                        </div>
-                      </div>
-                    </CardContent>
-                  </Card>
-                </motion.div>
-              ))}
-            </div>
-
-            {/* Template Details Card - Only show when template is selected */}
-            <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"
-                >
-                  <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">
-                        <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">
-                          <Label className="text-blue-900 font-semibold">Suggested SLA</Label>
-                          <p className="text-blue-700 mt-1">{selectedTemplate.suggestedSLA} days</p>
-                        </div>
-                        <div className="bg-white/60 p-3 rounded-lg">
-                          <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">
-                          <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">
-                        <Label className="text-blue-900 font-semibold">Common Approvers</Label>
-                        <div className="flex flex-wrap gap-2 mt-2">
-                          {selectedTemplate.commonApprovers.map((approver, index) => (
-                            <Badge key={`${selectedTemplate.id}-approver-${index}-${approver}`} variant="outline" className="border-blue-300 text-blue-700 bg-white">
-                              {approver}
-                            </Badge>
-                          ))}
-                        </div>
-                      </div>
-                    </CardContent>
-                  </Card>
-                </motion.div>
-              )}
-            </AnimatePresence>
-          </motion.div>
-        );
-
-      case 2:
-        return (
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            exit={{ opacity: 0, y: -20 }}
-            className="space-y-6"
-          >
-            <div className="text-center mb-8">
-              <div className="w-16 h-16 bg-gradient-to-br from-green-500 to-blue-600 rounded-2xl flex items-center justify-center mx-auto mb-4">
-                <FileText className="w-8 h-8 text-white" />
-              </div>
-              <h2 className="text-2xl font-bold text-gray-900 mb-2">Basic Information</h2>
-              <p className="text-gray-600">
-                Provide the essential details for your {selectedTemplate?.name || 'request'}.
-              </p>
-            </div>
-
-            <div className="max-w-2xl mx-auto space-y-6">
-              <div>
-                <Label htmlFor="title" className="text-base font-semibold">Request Title *</Label>
-                <p className="text-sm text-gray-600 mb-3">
-                  Be specific and descriptive. This will be visible to all participants.
-                </p>
-                <Input
-                  id="title"
-                  placeholder="e.g., Approval on new office location"
-                  value={formData.title}
-                  onChange={(e) => updateFormData('title', e.target.value)}
-                  className="text-base h-12 border-2 border-gray-300 focus:border-blue-500 bg-white shadow-sm"
-                />
-              </div>
-              
-              <div>
-                <Label htmlFor="description" className="text-base font-semibold">Detailed Description *</Label>
-                <p className="text-sm text-gray-600 mb-3">
-                  Explain what you need approval for, why it's needed, and any relevant background information.
-                </p>
-                <Textarea
-                  id="description"
-                  placeholder="Provide comprehensive details about your request including scope, objectives, expected outcomes, and any supporting context that will help approvers make an informed decision."
-                  className="min-h-[120px] text-base border-2 border-gray-300 focus:border-blue-500 bg-white shadow-sm resize-none"
-                  value={formData.description}
-                  onChange={(e) => updateFormData('description', e.target.value)}
-                />
-              </div>
-
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                <div>
-                  <Label className="text-base font-semibold">Priority Level *</Label>
-                  <p className="text-sm text-gray-600 mb-2">
-                    select priority for your request
-                  </p>
-                  <RadioGroup
-                    value={formData.priority || ''}
-                    onValueChange={(value) => {
-                      console.log('Priority changed to:', value);
-                      updateFormData('priority', value);
-                    }}
-                  >
-                    <div 
-                      className={`flex items-center space-x-3 p-3 rounded-lg border-2 cursor-pointer transition-all ${
-                        formData.priority === 'express' 
-                          ? 'border-red-500 bg-red-100' 
-                          : 'border-red-200 bg-red-50 hover:bg-red-100'
-                      }`}
-                      onClick={() => updateFormData('priority', 'express')}
-                    >
-                      <RadioGroupItem value="express" id="express" />
-                      <div className="flex-1">
-                        <div className="flex items-center gap-2 mb-1">
-                          <Zap className="w-4 h-4 text-red-600" />
-                          <Label htmlFor="express" className="font-medium text-red-900 cursor-pointer">Express</Label>
-                          <Badge variant="destructive" className="text-xs">URGENT</Badge>
-                        </div>
-                        <p className="text-xs text-red-700">
-                          Includes calendar days in TAT - faster processing timeline
-                        </p>
-                      </div>
-                    </div>
-                    <div 
-                      className={`flex items-center space-x-3 p-3 rounded-lg border cursor-pointer transition-all ${
-                        formData.priority === 'standard' 
-                          ? 'border-blue-500 bg-blue-50' 
-                          : 'border-gray-200 hover:bg-gray-50'
-                      }`}
-                      onClick={() => updateFormData('priority', 'standard')}
-                    >
-                      <RadioGroupItem value="standard" id="standard" />
-                      <div className="flex-1">
-                        <div className="flex items-center gap-2 mb-1">
-                          <Clock className="w-4 h-4 text-blue-600" />
-                          <Label htmlFor="standard" className="font-medium text-blue-900 cursor-pointer">Standard</Label>
-                          <Badge variant="secondary" className="text-xs">DEFAULT</Badge>
-                        </div>
-                        <p className="text-xs text-gray-600">
-                          Includes working days in TAT - regular processing timeline
-                        </p>
-                      </div>
-                    </div>
-                  </RadioGroup>
-                </div>
-
-
-              </div>
-
-              {/* SLA Configuration */}
-              <div className="space-y-4">
-
-
-
-              </div>
-
-              {/* Template-specific fields */}
-              {(selectedTemplate?.fields.amount || selectedTemplate?.fields.vendor || selectedTemplate?.fields.timeline || selectedTemplate?.fields.impact) && (
-                <div className="border-t pt-6">
-                  <h3 className="text-lg font-semibold text-gray-900 mb-4">Additional Details</h3>
-                  <div className="space-y-6">
-                    {selectedTemplate?.fields.amount && (
-                      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-                        <div className="md:col-span-2">
-                          <Label htmlFor="amount" className="text-base font-semibold">Budget Amount</Label>
-                          <Input
-                            id="amount"
-                            placeholder="Enter amount"
-                            value={formData.amount}
-                            onChange={(e) => updateFormData('amount', e.target.value)}
-                            className="text-base h-12 border-2 border-gray-300 focus:border-blue-500 bg-white shadow-sm"
-                          />
-                        </div>
-                        <div>
-                          <Label className="text-base font-semibold">Currency</Label>
-                          <Select value={formData.currency} onValueChange={(value) => updateFormData('currency', value)}>
-                            <SelectTrigger className="h-12 border-2 border-gray-300 focus:border-blue-500 bg-white shadow-sm">
-                              <SelectValue />
-                            </SelectTrigger>
-                            <SelectContent>
-                              <SelectItem value="USD">USD ($)</SelectItem>
-                              <SelectItem value="EUR">EUR (€)</SelectItem>
-                              <SelectItem value="GBP">GBP (£)</SelectItem>
-                              <SelectItem value="INR">INR (₹)</SelectItem>
-                            </SelectContent>
-                          </Select>
-                        </div>
-                      </div>
-                    )}
-
-                    {selectedTemplate?.fields.vendor && (
-                      <div>
-                        <Label htmlFor="vendor" className="text-base font-semibold">Vendor/Supplier</Label>
-                        <Input
-                          id="vendor"
-                          placeholder="Enter vendor or supplier name"
-                          value={formData.vendor}
-                          onChange={(e) => updateFormData('vendor', e.target.value)}
-                          className="text-base h-12 border-2 border-gray-300 focus:border-blue-500 bg-white shadow-sm"
-                        />
-                      </div>
-                    )}
-
-                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                      <div>
-                        <Label htmlFor="costCenter" className="text-base font-semibold">Cost Center</Label>
-                        <Input
-                          id="costCenter"
-                          placeholder="e.g., Marketing, IT, Operations"
-                          value={formData.costCenter}
-                          onChange={(e) => updateFormData('costCenter', e.target.value)}
-                          className="text-base h-12 border-2 border-gray-300 focus:border-blue-500 bg-white shadow-sm"
-                        />
-                      </div>
-                      <div>
-                        <Label htmlFor="project" className="text-base font-semibold">Related Project</Label>
-                        <Input
-                          id="project"
-                          placeholder="Associated project name or code"
-                          value={formData.project}
-                          onChange={(e) => updateFormData('project', e.target.value)}
-                          className="text-base h-12 border-2 border-gray-300 focus:border-blue-500 bg-white shadow-sm"
-                        />
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              )}
-            </div>
-          </motion.div>
-        );
-
-      case 3:
-        return (
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            exit={{ opacity: 0, y: -20 }}
-            className="space-y-6"
-          >
-            <div className="text-center mb-8">
-              <div className="w-16 h-16 bg-gradient-to-br from-orange-500 to-red-600 rounded-2xl flex items-center justify-center mx-auto mb-4">
-                <Users className="w-8 h-8 text-white" />
-              </div>
-              <h2 className="text-2xl font-bold text-gray-900 mb-2">Approval Workflow</h2>
-              <p className="text-gray-600">
-                Define the approval hierarchy and assign approvers by email ID.
-              </p>
-            </div>
-
-            <div className="max-w-4xl mx-auto space-y-8">
-              {/* Number of Approvers */}
-              <Card>
-                <CardHeader>
-                  <CardTitle className="flex items-center gap-2">
-                    <Settings className="w-5 h-5" />
-                    Approval Configuration
-                  </CardTitle>
-                  <CardDescription>
-                    Configure how many approvers you need and define the approval sequence.
-                  </CardDescription>
-                </CardHeader>
-                <CardContent className="space-y-6">
-                  <div>
-                    <Label className="text-base font-semibold mb-4 block">Number of Approvers *</Label>
-                    <div className="flex items-center gap-4">
-                      <Button 
-                        type="button"
-                        variant="outline" 
-                        size="sm"
-                        onClick={() => {
-                          const currentCount = formData.approverCount || 1;
-                          const newCount = Math.max(1, currentCount - 1);
-                          updateFormData('approverCount', newCount);
-                          // Trim approvers array if reducing count
-                          if (formData.approvers.length > newCount) {
-                            updateFormData('approvers', formData.approvers.slice(0, newCount));
-                          }
-                        }}
-                        disabled={(formData.approverCount || 1) <= 1}
-                      >
-                        <Minus className="w-4 h-4" />
-                      </Button>
-                      <span className="text-2xl font-semibold w-12 text-center">{formData.approverCount || 1}</span>
-                      <Button 
-                        type="button"
-                        variant="outline" 
-                        size="sm"
-                        onClick={() => {
-                          const currentCount = formData.approverCount || 1;
-                          const newCount = Math.min(10, currentCount + 1);
-                          updateFormData('approverCount', newCount);
-                        }}
-                        disabled={(formData.approverCount || 1) >= 10}
-                      >
-                        <Plus className="w-4 h-4" />
-                      </Button>
-                    </div>
-                    <p className="text-sm text-gray-600 mt-2">
-                      Maximum 10 approvers allowed. Each approver will review sequentially.
-                    </p>
-                  </div>
-                </CardContent>
-              </Card>
-
-              {/* Approval Hierarchy */}
-              <Card>
-                <CardHeader>
-                  <CardTitle className="flex items-center gap-2">
-                    <Shield className="w-5 h-5" />
-                    Approval Hierarchy *
-                  </CardTitle>
-                  <CardDescription>
-                    Define the approval sequence. Each approver will review the request in order from Level 1 to Level {formData.approverCount || 1}.
-                  </CardDescription>
-                </CardHeader>
-                <CardContent className="space-y-6">
-                  {/* Initiator Card */}
-                  <div className="p-4 rounded-lg border-2 border-blue-200 bg-blue-50">
-                    <div className="flex items-center gap-3">
-                      <div className="w-10 h-10 bg-blue-600 rounded-full flex items-center justify-center">
-                        <User className="w-5 h-5 text-white" />
-                      </div>
-                      <div className="flex-1">
-                        <div className="flex items-center gap-2">
-                          <span className="font-semibold text-blue-900">Request Initiator</span>
-                          <Badge variant="secondary" className="text-xs">YOU</Badge>
-                        </div>
-                        <p className="text-sm text-blue-700">Creates and submits the request</p>
-                      </div>
-                    </div>
-                  </div>
-
-                  {/* Dynamic Approver Cards */}
-                  {Array.from({ length: formData.approverCount || 1 }, (_, index) => {
-                    const level = index + 1;
-                    const isLast = level === (formData.approverCount || 1);
-                    
-                    // Ensure approvers array has enough items
-                    if (!formData.approvers[index]) {
-                      const newApprovers = [...formData.approvers];
-                      newApprovers[index] = { email: '', name: '', level: level, tat: '' as any };
-                      updateFormData('approvers', newApprovers);
-                    }
-
-                    return (
-                      <div key={level} className="space-y-3">
-                        {/* Connection Line */}
-                        <div className="flex justify-center">
-                          <div className="w-px h-6 bg-gray-300"></div>
-                        </div>
-                        
-                        {/* Approver Card */}
-                        <div className={`p-4 rounded-lg border-2 transition-all ${
-                          formData.approvers[index]?.email 
-                            ? 'border-green-200 bg-green-50' 
-                            : 'border-gray-200 bg-gray-50'
-                        }`}>
-                          <div className="flex items-center gap-3">
-                            <div className={`w-10 h-10 rounded-full flex items-center justify-center ${
-                              formData.approvers[index]?.email 
-                                ? 'bg-green-600' 
-                                : 'bg-gray-400'
-                            }`}>
-                              <span className="text-white font-semibold">{level}</span>
-                            </div>
-                            <div className="flex-1">
-                              <div className="flex items-center gap-2 mb-3">
-                                <span className="font-semibold text-gray-900">
-                                  Approver Level {level}
-                                </span>
-                                {isLast && (
-                                  <Badge variant="destructive" className="text-xs">FINAL APPROVER</Badge>
-                                )}
-                              </div>
-                              <div className="space-y-4">
-                                <div>
-                                  <div className="flex items-center justify-between mb-1">
-                                    <Label htmlFor={`approver-${level}`} className="text-sm font-medium">
-                                      Email Address *
-                                    </Label>
-                                    {formData.approvers[index]?.email && formData.approvers[index]?.userId && (
-                                      <Badge variant="outline" className="text-xs bg-green-50 text-green-700 border-green-300">
-                                        <CheckCircle className="w-3 h-3 mr-1" />
-                                        Verified
-                                      </Badge>
-                                    )}
-                                    {formData.approvers[index]?.email && !formData.approvers[index]?.userId && (
-                                      <Badge variant="outline" className="text-xs bg-amber-50 text-amber-700 border-amber-300">
-                                        <AlertCircle className="w-3 h-3 mr-1" />
-                                        Needs Validation
-                                      </Badge>
-                                    )}
-                                  </div>
-                                  <div className="relative">
-                                    <Input
-                                    id={`approver-${level}`}
-                                    type="email"
-                                    placeholder="approver@royalenfield.com"
-                                    value={formData.approvers[index]?.email || ''}
-                                      onChange={(e) => {
-                                        const value = e.target.value;
-                                        const newApprovers = [...formData.approvers];
-                                        
-                                        // If email changed, clear userId to force revalidation
-                                        const previousEmail = newApprovers[index]?.email;
-                                        const emailChanged = previousEmail !== value;
-                                        
-                                        newApprovers[index] = {
-                                          ...newApprovers[index],
-                                          email: value,
-                                          level: level,
-                                          // Clear userId if email was changed (requires revalidation)
-                                          userId: emailChanged ? undefined : newApprovers[index]?.userId,
-                                          name: emailChanged ? undefined : newApprovers[index]?.name,
-                                          department: emailChanged ? undefined : newApprovers[index]?.department,
-                                          avatar: emailChanged ? undefined : newApprovers[index]?.avatar
-                                        };
-                                        updateFormData('approvers', newApprovers);
-
-                                        // Debounced search for users by email/name
-                                        if (searchTimers.current[index]) {
-                                          clearTimeout(searchTimers.current[index]);
-                                        }
-                                        // Only trigger search when tagging with '@' as first character
-                                        if (!value || !value.startsWith('@') || value.length < 2) {
-                                          setUserSearchResults(prev => ({ ...prev, [index]: [] }));
-                                          setUserSearchLoading(prev => ({ ...prev, [index]: false }));
-                                          return;
-                                        }
-                                        setUserSearchLoading(prev => ({ ...prev, [index]: true }));
-                                        searchTimers.current[index] = setTimeout(async () => {
-                                          try {
-                                            const term = value.slice(1); // remove leading '@'
-                                            const response = await searchUsers(term, 10);
-                                            // Backend returns { success: true, data: [...users] }
-                                            const results = response.data?.data || [];
-                                            setUserSearchResults(prev => ({ ...prev, [index]: results }));
-                                          } catch (err) {
-                                            setUserSearchResults(prev => ({ ...prev, [index]: [] }));
-                                          } finally {
-                                            setUserSearchLoading(prev => ({ ...prev, [index]: false }));
-                                          }
-                                        }, 300);
-                                      }}
-                                      className="h-10 border-2 border-gray-300 focus:border-blue-500 mt-1 w-full"
-                                    />
-                                    {/* Search suggestions (absolute dropdown) */}
-                                    {(userSearchLoading[index] || (userSearchResults[index]?.length || 0) > 0) && (
-                                      <div className="absolute left-0 right-0 top-full mt-1 z-50 border rounded-md bg-white shadow-lg">
-                                        {userSearchLoading[index] ? (
-                                          <div className="p-2 text-xs text-gray-500">Searching...</div>
-                                        ) : (
-                                          <ul className="max-h-56 overflow-auto divide-y">
-                                            {userSearchResults[index]?.map((u) => (
-                                              <li
-                                                key={u.userId}
-                                                className="p-2 text-sm cursor-pointer hover:bg-gray-50"
-                                      onClick={async () => {
-                                        // Check if user is already a spectator
-                                        const spectatorIds = (formData.spectators || []).map((s: any) => s?.id).filter(Boolean);
-                                        const spectatorEmails = (formData.spectators || []).map((s: any) => s?.email?.toLowerCase?.()).filter(Boolean);
-                                        if (spectatorIds.includes(u.userId) || spectatorEmails.includes((u.email || '').toLowerCase())) {
-                                          setValidationModal({
-                                            open: true,
-                                            type: 'error',
-                                            email: u.email,
-                                            message: `${u.displayName || u.email} is already a spectator and cannot be added as an approver.`
-                                          });
-                                          return;
-                                        }
-                                        
-                                        // Check if user is already another approver
-                                        const approverEmails = (formData.approvers || [])
-                                          .filter((_, i) => i !== index) // Exclude current position
-                                          .map((a: any) => a?.email?.toLowerCase?.())
-                                          .filter(Boolean);
-                                        if (approverEmails.includes((u.email || '').toLowerCase())) {
-                                          setValidationModal({
-                                            open: true,
-                                            type: 'error',
-                                            email: u.email,
-                                            message: `${u.displayName || u.email} is already an approver at another level.`
-                                          });
-                                          return;
-                                        }
-                                        
-                                        // Ensure user exists in database and get the DB userId
-                                        let dbUserId = u.userId;
-                                        try {
-                                          const dbUser = await ensureUserExists({
-                                            userId: u.userId,
-                                            email: u.email,
-                                            displayName: u.displayName,
-                                            firstName: u.firstName,
-                                            lastName: u.lastName,
-                                            department: u.department,
-                                            phone: u.phone,
-                                            mobilePhone: u.mobilePhone,
-                                            designation: u.designation,
-                                            jobTitle: u.jobTitle,
-                                            manager: u.manager,
-                                            employeeId: u.employeeId,
-                                            employeeNumber: u.employeeNumber,
-                                            secondEmail: u.secondEmail,
-                                            location: u.location
-                                          });
-                                          // Use the database userId (UUID) instead of Okta ID
-                                          dbUserId = dbUser.userId;
-                                        } catch (err) {
-                                          console.error('Failed to ensure user exists:', err);
-                                          // Continue with Okta ID if ensure fails
-                                        }
-                                        
-                                                  const updated = [...formData.approvers];
-                                                  updated[index] = {
-                                                    ...updated[index],
-                                                    email: u.email,
-                                                    name: u.displayName || [u.firstName, u.lastName].filter(Boolean).join(' '),
-                                                    userId: dbUserId,
-                                                    level: level,
-                                                  };
-                                                  updateFormData('approvers', updated);
-                                                  setUserSearchResults(prev => ({ ...prev, [index]: [] }));
-                                                }}
-                                              >
-                                                <div className="font-medium text-gray-900">{u.displayName || u.email}</div>
-                                                <div className="text-xs text-gray-600">{u.email}</div>
-                                              </li>
-                                            ))}
-                                          </ul>
-                                        )}
-                                      </div>
-                                    )}
-                                  </div>
-                                  {formData.approvers[index]?.userId ? (
-                                    <p className="text-xs text-green-600 mt-1 flex items-center gap-1">
-                                      <CheckCircle className="w-3 h-3" />
-                                      User verified in organization directory
-                                    </p>
-                                  ) : formData.approvers[index]?.email ? (
-                                    <div className="mt-1 p-2 bg-amber-50 border border-amber-200 rounded">
-                                      <p className="text-xs text-amber-700 flex items-center gap-1 font-medium">
-                                        <AlertCircle className="w-3 h-3" />
-                                        This email will be validated against Okta directory
-                                      </p>
-                                      <p className="text-xs text-amber-600 mt-1">
-                                        If user doesn't exist in Okta, you won't be able to proceed. Use @ search for guaranteed results.
-                                      </p>
-                                    </div>
-                                  ) : (
-                                    <p className="text-xs text-gray-500 mt-1 flex items-center gap-1">
-                                      <span className="font-medium">@</span>
-                                      Use @ sign to search and select a user (recommended)
-                                    </p>
-                                  )}
-                                </div>
-
-                                {/* Peer Approver Section */}
-                                <div className="border-t border-gray-200 pt-3">
-
-
-                                  {(formData.approvers[index]?.showPeerInput || formData.approvers[index]?.peerEmail) && (
-                                    <div className="space-y-2">
-                                      <Input
-                                        type="email"
-                                        placeholder="peer.approver@royalenfield.com"
-                                        value={formData.approvers[index]?.peerEmail || ''}
-                                        onChange={(e) => {
-                                          const newApprovers = [...formData.approvers];
-                                          newApprovers[index] = {
-                                            ...newApprovers[index],
-                                            peerEmail: e.target.value,
-                                            level: level
-                                          };
-                                          updateFormData('approvers', newApprovers);
-                                        }}
-                                        className="h-9 border-2 border-gray-300 focus:border-blue-500 text-sm"
-                                      />
-                                      <p className="text-xs text-gray-500">
-                                        This user can approve the request if the main approver is unavailable.
-                                      </p>
-                                    </div>
-                                  )}
-
-                                  {formData.approvers[index]?.peerEmail && (
-                                    <div className="mt-2 p-2 bg-blue-50 rounded-lg border border-blue-200">
-                                      <div className="flex items-center gap-2">
-                                        <div className="w-6 h-6 bg-blue-600 rounded-full flex items-center justify-center">
-                                          <Users className="w-3 h-3 text-white" />
-                                        </div>
-                                        <div className="flex-1">
-                                          <p className="text-sm font-medium text-blue-900">
-                                            {formData.approvers[index]?.peerEmail}
-                                          </p>
-                                          <p className="text-xs text-blue-700">Peer Approver</p>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  )}
-                                </div>
-                                
-                                <div>
-                                  <Label htmlFor={`tat-${level}`} className="text-sm font-medium">
-                                    TAT (Turn Around Time) *
-                                  </Label>
-                                  <div className="flex items-center gap-2 mt-1">
-                                    <Input
-                                      id={`tat-${level}`}
-                                      type="number"
-                                      placeholder={formData.approvers[index]?.tatType === 'days' ? '7' : '24'}
-                                      min="1"
-                                      max={formData.approvers[index]?.tatType === 'days' ? '30' : '720'}
-                                      value={formData.approvers[index]?.tat || ''}
-                                      onChange={(e) => {
-                                        const newApprovers = [...formData.approvers];
-                                        newApprovers[index] = {
-                                          ...newApprovers[index],
-                                          tat: parseInt(e.target.value) || '',
-                                          level: level,
-                                          tatType: formData.approvers[index]?.tatType || 'hours'
-                                        };
-                                        updateFormData('approvers', newApprovers);
-                                      }}
-                                      className="h-10 border-2 border-gray-300 focus:border-blue-500 flex-1"
-                                    />
-                                    
-                                    <Select
-                                      value={formData.approvers[index]?.tatType || 'hours'}
-                                      onValueChange={(value) => {
-                                        const newApprovers = [...formData.approvers];
-                                        newApprovers[index] = {
-                                          ...newApprovers[index],
-                                          tatType: value as 'hours' | 'days',
-                                          level: level,
-                                          // Clear the value when switching to set appropriate defaults
-                                          tat: ''
-                                        };
-                                        updateFormData('approvers', newApprovers);
-                                      }}
-                                    >
-                                      <SelectTrigger className="w-20 h-10 border-2 border-gray-300">
-                                        <SelectValue />
-                                      </SelectTrigger>
-                                      <SelectContent>
-                                        <SelectItem value="hours">Hours</SelectItem>
-                                        <SelectItem value="days">Days</SelectItem>
-                                      </SelectContent>
-                                    </Select>
-                                  </div>
-                                  <p className="text-xs text-gray-600 mt-1">
-                                    {formData.approvers[index]?.tatType === 'days' 
-                                      ? 'Maximum days for this approver to review and respond (1-30 days)'
-                                      : 'Maximum time for this approver to review and respond (1-720 hours)'
-                                    }
-                                  </p>
-                                </div>
-                                
-                                <p className="text-xs text-gray-600">
-                                  {isLast 
-                                    ? 'This approver can close the request upon approval' 
-                                    : 'Request will proceed to next level upon approval'
-                                  }
-                                </p>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    );
-                  })}
-
-                  {/* Enhanced Summary with TAT */}
-                  <div className="mt-6 space-y-4">
-                    {/* Approval Flow Summary */}
-                    <div className="p-4 bg-blue-50 rounded-lg border border-blue-200">
-                      <div className="flex items-start gap-3">
-                        <Info className="w-5 h-5 text-blue-600 mt-0.5" />
-                        <div>
-                          <h4 className="font-semibold text-blue-900 mb-1">Approval Flow Summary</h4>
-                          <p className="text-sm text-blue-700">
-                            Your request will follow this sequence: <strong>You (Initiator)</strong> → 
-                            {Array.from({ length: formData.approverCount || 1 }, (_, i) => 
-                              ` Level ${i + 1} Approver`
-                            ).join(' → ')}. 
-                            The final approver can close the request.
-                          </p>
-                        </div>
-                      </div>
-                    </div>
-
-                    {/* TAT Summary */}
-                    {(() => {
-                      // Calculate total TAT
-                      let totalHours = 0;
-                      let tatBreakdown = [];
-                      let hasIncompleteData = false;
-
-                      for (let i = 0; i < (formData.approverCount || 1); i++) {
-                        const approver = formData.approvers[i];
-                        if (approver?.tat && approver?.tatType) {
-                          const tatValue = parseInt(approver.tat);
-                          const hours = approver.tatType === 'days' ? tatValue * 24 : tatValue;
-                          totalHours += hours;
-                          tatBreakdown.push({
-                            level: i + 1,
-                            tat: approver.tat,
-                            tatType: approver.tatType,
-                            hours: hours
-                          });
-                        } else {
-                          hasIncompleteData = true;
-                        }
-                      }
-
-                      const totalDays = Math.ceil(totalHours / 24);
-                      const workingDays = Math.ceil(totalHours / 8); // Assuming 8-hour working days
-
-                      return (
-                        <div className="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>
-                                {!hasIncompleteData && (
-                                  <div className="text-right">
-                                    <div className="text-lg font-bold text-emerald-800">{totalDays} {totalDays === 1 ? 'Day' : 'Days'}</div>
-                                    <div className="text-xs text-emerald-600">Total Duration</div>
-                                  </div>
-                                )}
-                              </div>
-                              
-                              {hasIncompleteData ? (
-                                <p className="text-sm text-amber-700 bg-amber-50 p-2 rounded border border-amber-200">
-                                  <AlertCircle className="w-4 h-4 inline mr-1" />
-                                  Complete all approver TAT information to see total duration summary
-                                </p>
-                              ) : (
-                                <div className="space-y-3">
-                                  {/* TAT Breakdown */}
-                                  <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-                                    {tatBreakdown.map((item, index) => (
-                                      <div key={index} 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 {item.level}</span>
-                                          <span className="text-sm text-emerald-700">{item.tat} {item.tatType}</span>
-                                        </div>
-                                      </div>
-                                    ))}
-                                  </div>
-                                  
-                                  {/* Total Summary */}
-                                  <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>
-                      );
-                    })()}
-                  </div>
-                </CardContent>
-              </Card>
-            </div>
-          </motion.div>
-        );
-
-      case 4:
-        return (
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            exit={{ opacity: 0, y: -20 }}
-            className="space-y-6"
-          >
-            <div className="text-center mb-8">
-              <div className="w-16 h-16 bg-gradient-to-br from-teal-500 to-green-600 rounded-2xl flex items-center justify-center mx-auto mb-4">
-                <Eye className="w-8 h-8 text-white" />
-              </div>
-              <h2 className="text-2xl font-bold text-gray-900 mb-2">Participants & Access</h2>
-              <p className="text-gray-600">
-                Configure additional participants and visibility settings for your request.
-              </p>
-            </div>
-
-            <div className="max-w-3xl mx-auto space-y-8">
-
-
-              {/* Additional Participants */}
-              <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
-                {/* Spectators */}
-                <Card>
-                  <CardHeader>
-                    <CardTitle className="flex items-center justify-between text-base">
-                      <div className="flex items-center gap-2">
-                        <Eye className="w-4 h-4" />
-                        Spectators
-                      </div>
-                      <Badge variant="outline" className="text-xs">
-                        {formData.spectators.length}
-                      </Badge>
-                    </CardTitle>
-                    <CardDescription>
-                      Users who can view and comment but cannot approve
-                    </CardDescription>
-                  </CardHeader>
-                  <CardContent className="space-y-4">
-                    <div className="space-y-2">
-
-                      
-                      <div className="flex items-center gap-2">
-                        <div className="relative w-full">
-                          <Input
-                            placeholder="Use @ sign to add a user"
-                            value={emailInput}
-                            onChange={(e) => {
-                            const value = e.target.value;
-                            setEmailInput(value);
-                            // Trigger search only when tagging with '@'
-                            if (spectatorTimer.current) clearTimeout(spectatorTimer.current);
-                            if (!value || !value.startsWith('@') || value.length < 2) {
-                              setSpectatorSearchResults([]);
-                              setSpectatorSearchLoading(false);
-                              return;
-                            }
-                            setSpectatorSearchLoading(true);
-                            spectatorTimer.current = setTimeout(async () => {
-                              try {
-                                const term = value.slice(1);
-                                const response = await searchUsers(term, 10);
-                                // Backend returns { success: true, data: [...users] }
-                                const results = response.data?.data || [];
-                                setSpectatorSearchResults(results);
-                              } catch {
-                                setSpectatorSearchResults([]);
-                              } finally {
-                                setSpectatorSearchLoading(false);
-                              }
-                            }, 300);
-                            }}
-                            onKeyPress={async (e) => {
-                              // Allow Enter key to add spectator (will validate)
-                              if (e.key === 'Enter' && validateEmail(emailInput)) {
-                                e.preventDefault();
-                                await inviteAndAddUser('spectators');
-                              }
-                            }}
-                            className="text-sm w-full"
-                          />
-                          {(spectatorSearchLoading || spectatorSearchResults.length > 0) && (
-                            <div className="absolute left-0 right-0 top-full mt-1 z-50 border rounded-md bg-white shadow-lg">
-                              {spectatorSearchLoading ? (
-                                <div className="p-2 text-xs text-gray-500">Searching...</div>
-                              ) : (
-                                <ul className="max-h-56 overflow-auto divide-y">
-                                  {spectatorSearchResults.map(u => (
-                                    <li
-                                      key={u.userId}
-                                      className="p-2 text-sm cursor-pointer hover:bg-gray-50"
-                                      onClick={async () => {
-                                        // Check if user is already an approver
-                                        const approverIds = (formData.approvers || []).map((a: any) => a?.userId).filter(Boolean);
-                                        const approverEmails = (formData.approvers || []).map((a: any) => a?.email?.toLowerCase?.()).filter(Boolean);
-                                        if (approverIds.includes(u.userId) || approverEmails.includes((u.email || '').toLowerCase())) {
-                                          setValidationModal({
-                                            open: true,
-                                            type: 'error',
-                                            email: u.email,
-                                            message: `${u.displayName || u.email} is already an approver and cannot be added as a spectator.`
-                                          });
-                                          setEmailInput('');
-                                          setSpectatorSearchResults([]);
-                                          return;
-                                        }
-                                        
-                                        // Ensure user exists in database and get the DB userId
-                                        let dbUserId = u.userId;
-                                        try {
-                                          const dbUser = await ensureUserExists({
-                                            userId: u.userId,
-                                            email: u.email,
-                                            displayName: u.displayName,
-                                            firstName: u.firstName,
-                                            lastName: u.lastName,
-                                            department: u.department,
-                                            phone: u.phone,
-                                            mobilePhone: u.mobilePhone,
-                                            designation: u.designation,
-                                            jobTitle: u.jobTitle,
-                                            manager: u.manager,
-                                            employeeId: u.employeeId,
-                                            employeeNumber: u.employeeNumber,
-                                            secondEmail: u.secondEmail,
-                                            location: u.location
-                                          });
-                                          // Use the database userId (UUID) instead of Okta ID
-                                          dbUserId = dbUser.userId;
-                                        } catch (err) {
-                                          console.error('Failed to ensure user exists:', err);
-                                          // Continue with Okta ID if ensure fails
-                                        }
-                                        
-                                        // Add selected spectator directly with precise id/name/email
-                                        const spectator = {
-                                          id: dbUserId,
-                                          name: u.displayName || [u.firstName, u.lastName].filter(Boolean).join(' ') || u.email.split('@')[0],
-                                          email: u.email,
-                                          avatar: (u.displayName || u.email).split(' ').map((s: string) => s[0]).join('').slice(0, 2).toUpperCase(),
-                                          role: 'Spectator',
-                                          department: u.department || '',
-                                          level: 1,
-                                          canClose: false
-                                        } as any;
-                                        addUser(spectator, 'spectators');
-                                        setEmailInput('');
-                                        setSpectatorSearchResults([]);
-                                      }}
-                                    >
-                                      <div className="font-medium text-gray-900">{u.displayName || u.email}</div>
-                                      <div className="text-xs text-gray-600">{u.email}</div>
-                                    </li>
-                                  ))}
-                                </ul>
-                              )}
-                            </div>
-                          )}
-                        </div>
-                        <Button
-                          size="sm"
-                          onClick={async () => {
-                            await inviteAndAddUser('spectators');
-                          }}
-                          disabled={!validateEmail(emailInput)}
-                        >
-                          Add
-                        </Button>
-                      </div>
-                      <p className="text-xs text-blue-600 bg-blue-50 border border-blue-200 rounded p-2 flex items-center gap-1">
-                        <Info className="w-3 h-3 flex-shrink-0" />
-                        <span>
-                          Use <span className="font-mono bg-blue-100 px-1 rounded">@</span> sign to search users, or type email directly (will be validated against organization directory)
-                        </span>
-                      </p>
-                    </div>
-
-                    <div className="space-y-2 max-h-40 overflow-y-auto">
-                      {formData.spectators.map((spectator) => (
-                        <div key={spectator.id} className="flex items-center justify-between p-2 bg-teal-50 rounded-lg">
-                          <div className="flex items-center gap-2">
-                            <Avatar className="h-6 w-6">
-                              <AvatarFallback className="bg-teal-600 text-white text-xs">
-                                {spectator.avatar}
-                              </AvatarFallback>
-                            </Avatar>
-                            <span className="text-sm font-medium">{spectator.name}</span>
-                          </div>
-                          <Button
-                            variant="ghost"
-                            size="sm"
-                            onClick={() => removeUser(spectator.id, 'spectators')}
-                          >
-                            <X className="h-3 w-3" />
-                          </Button>
-                        </div>
-                      ))}
-                    </div>
-                  </CardContent>
-                </Card>
-
-                {/* CC List */}
-
-              </div>
-            </div>
-          </motion.div>
-        );
-
-      case 5:
-        return (
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            exit={{ opacity: 0, y: -20 }}
-            className="space-y-6"
-          >
-            <div className="text-center mb-8">
-              <div className="w-16 h-16 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-2xl flex items-center justify-center mx-auto mb-4">
-                <Upload className="w-8 h-8 text-white" />
-              </div>
-              <h2 className="text-2xl font-bold text-gray-900 mb-2">Documents & Attachments</h2>
-              <p className="text-gray-600">
-                Upload supporting documents, files, and any additional materials for your request.
-              </p>
-            </div>
-
-            <div className="max-w-2xl mx-auto space-y-6">
-              <Card>
-                <CardHeader>
-                  <CardTitle className="flex items-center gap-2">
-                    <FileText className="w-5 h-5" />
-                    File Upload
-                  </CardTitle>
-                    <CardDescription>
-                      Attach supporting documents. Max {documentPolicy.maxFileSizeMB}MB per file. Allowed types: {documentPolicy.allowedFileTypes.join(', ')}
-                    </CardDescription>
-                </CardHeader>
-                <CardContent>
-                  <div className="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center hover:border-gray-400 transition-colors">
-                    <Upload className="h-12 w-12 mx-auto mb-4 text-gray-400" />
-                    <h3 className="text-lg font-semibold text-gray-900 mb-2">Upload Files</h3>
-                    <p className="text-gray-600 mb-4">
-                      Drag and drop files here, or click to browse
-                    </p>
-                    <input
-                      type="file"
-                      multiple
-                      accept={documentPolicy.allowedFileTypes.map(ext => `.${ext}`).join(',')}
-                      onChange={handleFileUpload}
-                      className="hidden"
-                      id="file-upload"
-                      ref={fileInputRef}
-                    />
-                    <Button variant="outline" size="lg" type="button" onClick={() => fileInputRef.current?.click()}>
-                      <Plus className="w-4 h-4 mr-2" />
-                      Browse Files
-                    </Button>
-                    <p className="text-xs text-gray-500 mt-2">
-                      Supported formats: {documentPolicy.allowedFileTypes.map(ext => ext.toUpperCase()).join(', ')} (Max {documentPolicy.maxFileSizeMB}MB per file)
-                    </p>
-                  </div>
-                </CardContent>
-              </Card>
-
-              {/* Existing Documents (from backend) */}
-              {isEditing && existingDocuments.length > 0 && (
-                <Card>
-                  <CardHeader>
-                    <CardTitle className="flex items-center justify-between">
-                      <span>Existing Documents</span>
-                      <Badge variant="secondary">
-                        {existingDocuments.filter(d => !documentsToDelete.includes(d.documentId || d.document_id || '')).length} file{existingDocuments.filter(d => !documentsToDelete.includes(d.documentId || d.document_id || '')).length !== 1 ? 's' : ''}
-                      </Badge>
-                    </CardTitle>
-                  </CardHeader>
-                  <CardContent>
-                    <div className="space-y-3">
-                      {existingDocuments.map((doc: any) => {
-                        const docId = doc.documentId || doc.document_id || '';
-                        const isDeleted = documentsToDelete.includes(docId);
-                        if (isDeleted) return null;
-                        
-                        return (
-                          <div key={docId} className={`flex items-center justify-between p-4 rounded-lg border ${isDeleted ? 'bg-red-50 border-red-200 opacity-50' : 'bg-gray-50'}`}>
-                            <div className="flex items-center gap-3">
-                              <div className="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
-                                <FileText className="h-5 w-5 text-blue-600" />
-                              </div>
-                              <div>
-                                <p className="font-medium text-gray-900">{doc.originalFileName || doc.fileName || 'Document'}</p>
-                                <div className="flex items-center gap-3 text-sm text-gray-600">
-                                  <span>{doc.fileSize ? (Number(doc.fileSize) / (1024 * 1024)).toFixed(2) + ' MB' : 'Unknown size'}</span>
-                                  <span>•</span>
-                                  <span>Uploaded {doc.uploadedAt ? new Date(doc.uploadedAt).toLocaleDateString() : 'previously'}</span>
-                                </div>
-                              </div>
-                            </div>
-                            <div className="flex items-center gap-2">
-                              {/* Preview button - only for images and PDFs */}
-                              {(() => {
-                                const type = (doc.fileType || doc.file_type || '').toLowerCase();
-                                const name = (doc.originalFileName || doc.fileName || '').toLowerCase();
-                                return type.includes('image') || type.includes('pdf') || 
-                                       name.endsWith('.jpg') || name.endsWith('.jpeg') || 
-                                       name.endsWith('.png') || name.endsWith('.gif') ||
-                                       name.endsWith('.pdf');
-                              })() && (
-                                <Button 
-                                  variant="ghost" 
-                                  size="sm" 
-                                  title="Preview document"
-                                  onClick={() => {
-                                    setPreviewDocument({
-                                      fileName: doc.originalFileName || doc.fileName || 'Document',
-                                      fileType: doc.fileType || doc.file_type || 'application/octet-stream',
-                                      fileUrl: getDocumentPreviewUrl(docId),
-                                      fileSize: Number(doc.fileSize || doc.file_size || 0),
-                                      documentId: docId
-                                    } as any);
-                                  }}
-                                >
-                                  <Eye className="h-4 w-4" />
-                                </Button>
-                              )}
-                              <Button
-                                variant="ghost"
-                                size="sm"
-                                onClick={() => {
-                                  setDocumentsToDelete(prev => [...prev, docId]);
-                                }}
-                                title="Delete document"
-                              >
-                                <X className="h-4 w-4 text-red-600" />
-                              </Button>
-                            </div>
-                          </div>
-                        );
-                      })}
-                    </div>
-                  </CardContent>
-                </Card>
-              )}
-
-              {/* New Documents (being uploaded) */}
-              {formData.documents.length > 0 && (
-                <Card>
-                  <CardHeader>
-                    <CardTitle className="flex items-center justify-between">
-                      <span>New Files to Upload</span>
-                      <Badge variant="secondary">
-                        {formData.documents.length} file{formData.documents.length !== 1 ? 's' : ''}
-                      </Badge>
-                    </CardTitle>
-                  </CardHeader>
-                  <CardContent>
-                    <div className="space-y-3">
-                      {formData.documents.map((file, index) => (
-                        <div key={index} className="flex items-center justify-between p-4 bg-gray-50 rounded-lg border">
-                          <div className="flex items-center gap-3">
-                            <div className="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
-                              <FileText className="h-5 w-5 text-blue-600" />
-                            </div>
-                            <div>
-                              <p className="font-medium text-gray-900">{file.name}</p>
-                              <div className="flex items-center gap-3 text-sm text-gray-600">
-                                <span>{(file.size / (1024 * 1024)).toFixed(2)} MB</span>
-                                <span>•</span>
-                                <span>{file.type || 'Unknown type'}</span>
-                              </div>
-                            </div>
-                          </div>
-                          <div className="flex items-center gap-2">
-                            {/* Preview button - only for images and PDFs */}
-                            {(() => {
-                              const type = (file.type || '').toLowerCase();
-                              const name = (file.name || '').toLowerCase();
-                              return type.includes('image') || type.includes('pdf') || 
-                                     name.endsWith('.jpg') || name.endsWith('.jpeg') || 
-                                     name.endsWith('.png') || name.endsWith('.gif') ||
-                                     name.endsWith('.pdf');
-                            })() && (
-                              <Button 
-                                variant="ghost" 
-                                size="sm" 
-                                title="Preview file"
-                                onClick={() => {
-                                  // Create object URL for the file
-                                  const fileUrl = URL.createObjectURL(file);
-                                  setPreviewDocument({
-                                    fileName: file.name,
-                                    fileType: file.type || 'application/octet-stream',
-                                    fileUrl: fileUrl,
-                                    fileSize: file.size,
-                                    file: file
-                                  });
-                                }}
-                              >
-                                <Eye className="h-4 w-4" />
-                              </Button>
-                            )}
-                            <Button
-                              variant="ghost"
-                              size="sm"
-                              onClick={() => {
-                                const newDocs = formData.documents.filter((_, i) => i !== index);
-                                updateFormData('documents', newDocs);
-                              }}
-                              title="Remove file"
-                            >
-                              <X className="h-4 w-4" />
-                            </Button>
-                          </div>
-                        </div>
-                      ))}
-                    </div>
-                  </CardContent>
-                </Card>
-              )}
-
-              {/* Documents marked for deletion */}
-              {isEditing && documentsToDelete.length > 0 && (
-                <Card className="border-red-200 bg-red-50">
-                  <CardHeader>
-                    <CardTitle className="flex items-center gap-2 text-red-900">
-                      <X className="w-5 h-5" />
-                      Documents to be Deleted ({documentsToDelete.length})
-                    </CardTitle>
-                  </CardHeader>
-                  <CardContent>
-                    <div className="space-y-2">
-                      {documentsToDelete.map((docId) => {
-                        const doc = existingDocuments.find(d => (d.documentId || d.document_id) === docId);
-                        return (
-                          <div key={docId} className="flex items-center justify-between p-2 bg-red-100 rounded">
-                            <span className="text-sm text-red-900">{doc?.originalFileName || doc?.fileName || 'Document'}</span>
-                            <Button
-                              variant="ghost"
-                              size="sm"
-                              onClick={() => {
-                                setDocumentsToDelete(prev => prev.filter(id => id !== docId));
-                              }}
-                              className="text-red-600 hover:text-red-800"
-                            >
-                              <X className="h-3 w-3" />
-                            </Button>
-                          </div>
-                        );
-                      })}
-                    </div>
-                  </CardContent>
-                </Card>
-              )}
-            </div>
-          </motion.div>
-        );
-
-      case 6:
-        return (
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            exit={{ opacity: 0, y: -20 }}
-            className="space-y-6"
-          >
-            <div className="text-center mb-8">
-              <div className="w-16 h-16 bg-gradient-to-br from-green-500 to-teal-600 rounded-2xl flex items-center justify-center mx-auto mb-4">
-                <CheckCircle className="w-8 h-8 text-white" />
-              </div>
-              <h2 className="text-2xl font-bold text-gray-900 mb-2">Review & Submit</h2>
-              <p className="text-gray-600">
-                Please review all details before submitting your request for approval.
-              </p>
-            </div>
-
-            <div className="max-w-5xl mx-auto space-y-8">
-              {/* Request Overview */}
-              <Card className="border-2 border-green-200 bg-green-50/50">
-                <CardHeader>
-                  <CardTitle className="flex items-center gap-2 text-green-900">
-                    <Rocket className="w-5 h-5" />
-                    Request Overview
-                  </CardTitle>
-                </CardHeader>
-                <CardContent className="space-y-6">
-                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-                    <div>
-                      <Label className="text-green-900 font-semibold">Request Type</Label>
-                      <p className="text-green-800 mt-1">{selectedTemplate?.name}</p>
-                      <Badge variant="outline" className="mt-2 text-xs border-green-300 text-green-700">
-                        {selectedTemplate?.category}
-                      </Badge>
-                    </div>
-                    <div>
-                      <Label className="text-green-900 font-semibold">Priority</Label>
-                      <div className="flex items-center gap-2 mt-1">
-                        {getPriorityIcon(formData.priority)}
-                        <span className="text-green-800 capitalize">{formData.priority}</span>
-                      </div>
-                    </div>
-                    <div>
-                      <Label className="text-green-900 font-semibold">Workflow Type</Label>
-                      <p className="text-green-800 mt-1 capitalize">{formData.workflowType}</p>
-                      <p className="text-sm text-green-700">{formData.approverCount || 1} Level{(formData.approverCount || 1) > 1 ? 's' : ''}</p>
-                    </div>
-
-                  </div>
-                  
-                  <div>
-                    <Label className="text-green-900 font-semibold">Request Title</Label>
-                    <p className="text-green-800 font-medium mt-1 text-lg">{formData.title}</p>
-                  </div>
-                </CardContent>
-              </Card>
-
-              {/* Basic Information */}
-              <Card>
-                <CardHeader>
-                  <CardTitle className="flex items-center gap-2">
-                    <FileText className="w-5 h-5" />
-                    Basic Information
-                  </CardTitle>
-                </CardHeader>
-                <CardContent className="space-y-4">
-                  <div>
-                    <Label className="font-semibold">Description</Label>
-                    <p className="text-sm text-gray-700 mt-1 p-3 bg-gray-50 rounded-lg border">
-                      {formData.description}
-                    </p>
-                  </div>
-
-                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                    <div>
-                      <Label className="font-semibold">Priority Level</Label>
-                      <div className="flex items-center gap-2 mt-1">
-                        {getPriorityIcon(formData.priority)}
-                        <span className="capitalize font-medium">{formData.priority}</span>
-                      </div>
-                    </div>
-                    {formData.urgency && (
-                      <div>
-                        <Label className="font-semibold">Urgency</Label>
-                        <p className="text-sm text-gray-700 mt-1 capitalize">{formData.urgency}</p>
-                      </div>
-                    )}
-                  </div>
-
-                  {formData.businessImpact && (
-                    <div>
-                      <Label className="font-semibold">Business Impact</Label>
-                      <p className="text-sm text-gray-700 mt-1 p-3 bg-gray-50 rounded-lg border">
-                        {formData.businessImpact}
-                      </p>
-                    </div>
-                  )}
-                    
-                  {/* Financial Information */}
-                  {formData.amount && (
-                    <div className="p-3 bg-blue-50 rounded-lg border border-blue-200">
-                      <div className="flex items-center gap-2 mb-3">
-                        <DollarSign className="w-4 h-4 text-blue-600" />
-                        <Label className="font-semibold text-blue-900">Financial Details</Label>
-                      </div>
-                      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                        <div>
-                          <span className="text-sm text-blue-700">Amount</span>
-                          <p className="font-semibold text-blue-900">{formData.amount} {formData.currency}</p>
-                        </div>
-                        {formData.costCenter && (
-                          <div>
-                            <span className="text-sm text-blue-700">Cost Center</span>
-                            <p className="font-medium text-blue-900">{formData.costCenter}</p>
-                          </div>
-                        )}
-                      </div>
-                    </div>
-                  )}
-
-                  {/* Additional Fields */}
-                  {(formData.vendor || formData.timeline || formData.project) && (
-                    <div className="space-y-3">
-                      <Label className="font-semibold">Additional Information</Label>
-                      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                        {formData.vendor && (
-                          <div>
-                            <span className="text-sm text-gray-600">Vendor</span>
-                            <p className="text-sm font-medium">{formData.vendor}</p>
-                          </div>
-                        )}
-                        {formData.timeline && (
-                          <div>
-                            <span className="text-sm text-gray-600">Timeline</span>
-                            <p className="text-sm font-medium">{formData.timeline}</p>
-                          </div>
-                        )}
-                        {formData.project && (
-                          <div>
-                            <span className="text-sm text-gray-600">Related Project</span>
-                            <p className="text-sm font-medium">{formData.project}</p>
-                          </div>
-                        )}
-                        {formData.expectedCompletionDate && (
-                          <div>
-                            <span className="text-sm text-gray-600">Expected Completion</span>
-                            <p className="text-sm font-medium">{format(formData.expectedCompletionDate, 'PPP')}</p>
-                          </div>
-                        )}
-                      </div>
-                    </div>
-                  )}
-                </CardContent>
-              </Card>
-
-              {/* Approval Workflow */}
-              <Card className="border-2 border-orange-200 bg-orange-50/50">
-                <CardHeader>
-                  <CardTitle className="flex items-center gap-2 text-orange-900">
-                    <Users className="w-5 h-5" />
-                    Approval Workflow
-                  </CardTitle>
-                  <CardDescription className="text-orange-700">
-                    Sequential approval hierarchy with TAT (Turn Around Time) for each level
-                  </CardDescription>
-                </CardHeader>
-                <CardContent className="space-y-6">
-                  <div className="grid grid-cols-1 md:grid-cols-3 gap-4 p-3 bg-orange-100 rounded-lg">
-                    <div>
-                      <Label className="text-orange-900 font-semibold">Workflow Type</Label>
-                      <p className="text-orange-800 mt-1 capitalize">{formData.workflowType}</p>
-                    </div>
-                    <div>
-                      <Label className="text-orange-900 font-semibold">Approval Levels</Label>
-                      <p className="text-orange-800 mt-1">{formData.approverCount || 1} Level{(formData.approverCount || 1) > 1 ? 's' : ''}</p>
-                    </div>
-                    <div>
-                      <Label className="text-orange-900 font-semibold">Escalation</Label>
-                      <p className="text-orange-800 mt-1">{formData.escalationEnabled ? 'Enabled' : 'Disabled'}</p>
-                    </div>
-                  </div>
-
-                  {/* Approver Details */}
-                  <div className="space-y-4">
-                    {Array.from({ length: formData.approverCount || 1 }, (_, index) => {
-                      const level = index + 1;
-                      const isLast = level === (formData.approverCount || 1);
-                      const approver = formData.approvers[index];
-                      
-                      return (
-                        <div key={level} className="p-4 bg-white rounded-lg border border-orange-200">
-                          <div className="flex items-center gap-4">
-                            <div className={`w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 ${
-                              approver?.email ? 'bg-green-600' : 'bg-gray-400'
-                            }`}>
-                              <span className="text-white font-semibold">{level}</span>
-                            </div>
-                            <div className="flex-1">
-                              <div className="flex items-center gap-2 mb-2">
-                                <span className="font-semibold text-gray-900">
-                                  Approver Level {level}
-                                </span>
-                                {isLast && (
-                                  <Badge variant="destructive" className="text-xs">FINAL APPROVER</Badge>
-                                )}
-                              </div>
-                              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                                <div>
-                                  <span className="text-sm text-gray-600">Email Address</span>
-                                  <p className="text-sm font-medium text-gray-900">
-                                    {approver?.email || 'Not assigned'}
-                                  </p>
-                                </div>
-                                <div>
-                                  <span className="text-sm text-gray-600">TAT (Turn Around Time)</span>
-                                  <p className="text-sm font-medium text-gray-900">
-                                    {approver?.tat ? 
-                                      `${approver.tat} ${approver.tatType === 'days' ? 'day' : 'hour'}${approver.tat !== 1 ? 's' : ''}` 
-                                      : 'Not set'
-                                    }
-                                  </p>
-                                </div>
-                              </div>
-                            </div>
-                            <div className="flex flex-col items-end gap-1">
-                              {approver?.email && (
-                                <Badge variant="outline" className="text-xs border-green-300 text-green-700">
-                                  ✓ Assigned
-                                </Badge>
-                              )}
-                              {isLast && (
-                                <Badge className="text-xs bg-red-100 text-red-800 border border-red-200">
-                                  Can Close
-                                </Badge>
-                              )}
-                            </div>
-                          </div>
-                        </div>
-                      );
-                    })}
-                  </div>
-                </CardContent>
-              </Card>
-
-              {/* Participants & Access */}
-              <Card>
-                <CardHeader>
-                  <CardTitle className="flex items-center gap-2">
-                    <Eye className="w-5 h-5" />
-                    Participants & Access Control
-                  </CardTitle>
-                </CardHeader>
-                <CardContent className="space-y-4">
-                  <div className="grid grid-cols-1 md:grid-cols-3 gap-4 p-3 bg-gray-50 rounded-lg">
-
-                    <div>
-                      <Label className="font-semibold">Comments</Label>
-                      <p className="text-sm text-gray-700 mt-1">{formData.allowComments ? 'Allowed' : 'Disabled'}</p>
-                    </div>
-                    <div>
-                      <Label className="font-semibold">Document Upload</Label>
-                      <p className="text-sm text-gray-700 mt-1">{formData.allowDocumentUpload ? 'Allowed' : 'Disabled'}</p>
-                    </div>
-                  </div>
-
-                  {/* Spectators */}
-                  {formData.spectators.length > 0 && (
-                    <div>
-                      <Label className="font-semibold text-sm">Spectators ({formData.spectators.length})</Label>
-                      <div className="flex flex-wrap gap-2 mt-2">
-                        {formData.spectators.map((spectator) => (
-                          <Badge key={spectator.id} variant="outline" className="text-xs">
-                            {spectator.name} ({spectator.email})
-                          </Badge>
-                        ))}
-                      </div>
-                      <p className="text-xs text-gray-600 mt-2">View-only access with commenting privileges</p>
-                    </div>
-                  )}
-
-                  {/* CC List */}
-                  {formData.ccList.length > 0 && (
-                    <div>
-                      <Label className="font-semibold text-sm">CC List ({formData.ccList.length})</Label>
-                      <div className="flex flex-wrap gap-2 mt-2">
-                        {formData.ccList.map((cc) => (
-                          <Badge key={cc.id} variant="secondary" className="text-xs">
-                            {cc.name} ({cc.email})
-                          </Badge>
-                        ))}
-                      </div>
-                      <p className="text-xs text-gray-600 mt-2">Will receive email notifications about request updates</p>
-                    </div>
-                  )}
-                </CardContent>
-              </Card>
-
-              {/* Documents & Attachments */}
-              {formData.documents.length > 0 && (
-                <Card>
-                  <CardHeader>
-                    <CardTitle className="flex items-center gap-2">
-                      <Upload className="w-5 h-5" />
-                      Documents & Attachments
-                    </CardTitle>
-                    <CardDescription>
-                      {formData.documents.length} document{formData.documents.length !== 1 ? 's' : ''} attached to this request
-                    </CardDescription>
-                  </CardHeader>
-                  <CardContent>
-                    <div className="space-y-3">
-                      {formData.documents.map((doc, index) => (
-                        <div key={index} className="flex items-center gap-3 p-3 bg-gray-50 rounded-lg border">
-                          <FileText className="w-5 h-5 text-gray-500 flex-shrink-0" />
-                          <div className="flex-1 min-w-0">
-                            <p className="font-medium text-sm truncate">{doc.name}</p>
-                            <div className="flex items-center gap-3 text-xs text-gray-500 mt-1">
-                              <span>{(doc.size / (1024 * 1024)).toFixed(2)} MB</span>
-                              <span>•</span>
-                              <span>{doc.type || 'Unknown type'}</span>
-                            </div>
-                          </div>
-                        </div>
-                      ))}
-                    </div>
-                  </CardContent>
-                </Card>
-              )}
-
-
-
-              {/* Final Confirmation */}
-              <Card className="border-2 border-blue-200 bg-blue-50/50">
-                <CardContent className="pt-6">
-                  <div className="flex items-start gap-4">
-                    <CheckCircle className="w-6 h-6 text-blue-600 mt-1 flex-shrink-0" />
-                    <div className="flex-1">
-                      <h3 className="font-semibold text-blue-900 mb-2">Ready to Submit Request</h3>
-                      <p className="text-sm text-blue-700 mb-4">
-                        Once submitted, your request will enter the approval workflow and notifications will be sent to all relevant participants.
-                      </p>
-                      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
-                        <div>
-                          <span className="text-blue-700">Request Type:</span>
-                          <p className="font-medium text-blue-900">{selectedTemplate?.name}</p>
-                        </div>
-                        <div>
-                          <span className="text-blue-700">Approval Levels:</span>
-                          <p className="font-medium text-blue-900">{formData.approverCount || 1}</p>
-                        </div>
-                        <div>
-                          <span className="text-blue-700">Documents:</span>
-                          <p className="font-medium text-blue-900">{formData.documents.length} attached</p>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </CardContent>
-              </Card>
-            </div>
-          </motion.div>
-        );
-
-      default:
-        return null;
-    }
-  };
-
-
-
+  // Main render
   return (
-    <div className="h-full flex flex-col bg-gradient-to-br from-gray-50 to-white">
-      {/* Header - Compact on Mobile */}
-      <div className="bg-white border-b border-gray-200 px-3 sm:px-6 py-3 sm:py-4 flex-shrink-0">
-        <div className="flex items-center justify-between max-w-6xl mx-auto gap-2 sm:gap-4">
-          <div className="flex items-center gap-2 sm:gap-4 flex-1 min-w-0">
-            <Button variant="ghost" size="icon" onClick={onBack} className="shrink-0 h-8 w-8 sm:h-10 sm:w-10">
-              <ArrowLeft className="h-4 w-4 sm:h-5 sm:w-5" />
-            </Button>
-            <div className="min-w-0">
-              <h1 className="text-base sm:text-xl md:text-2xl font-bold text-gray-900 truncate">
-                {isEditing ? 'Edit Draft' : 'New Request'}
-              </h1>
-              <p className="text-xs sm:text-sm text-gray-600 hidden sm:block">
-                Step {currentStep} of {totalSteps}: {STEP_NAMES[currentStep - 1]}
-              </p>
-            </div>
-          </div>
-          <div className="hidden md:flex items-center gap-4">
-            <div className="text-right">
-              <p className="text-sm font-medium text-gray-900">{Math.round((currentStep / totalSteps) * 100)}% Complete</p>
-              <p className="text-xs text-gray-600">{totalSteps - currentStep} steps remaining</p>
-            </div>
-          </div>
-        </div>
-      </div>
+    <div
+      className="h-full flex flex-col bg-gradient-to-br from-gray-50 to-white"
+      data-testid="create-request"
+    >
+      <CreateRequestHeader
+        isEditing={isEditing}
+        currentStep={currentStep}
+        totalSteps={totalSteps}
+        stepNames={stepNames}
+        onBack={handleBackButton}
+      />
 
-      {/* Progress Bar - Mobile Optimized */}
-      <div className="bg-white border-b border-gray-200 px-3 sm:px-6 py-2 sm:py-3 flex-shrink-0">
-        <div className="max-w-6xl mx-auto">
-          {/* Mobile: Current step indicator only */}
-          <div className="block sm:hidden">
-            <div className="flex items-center justify-between mb-2">
-              <div className="flex items-center gap-2">
-                <div className="w-8 h-8 rounded-full bg-green-600 text-white flex items-center justify-center text-xs font-semibold">
-                  {currentStep}
-                </div>
-                <div>
-                  <p className="text-xs font-semibold text-gray-900">{STEP_NAMES[currentStep - 1]}</p>
-                  <p className="text-xs text-gray-600">Step {currentStep} of {totalSteps}</p>
-                </div>
-              </div>
-              <div className="text-right">
-                <p className="text-xs font-medium text-green-600">{Math.round((currentStep / totalSteps) * 100)}%</p>
-              </div>
-            </div>
-            {/* Progress bar */}
-            <div className="w-full bg-gray-200 h-1.5 rounded-full overflow-hidden">
-              <div 
-                className="bg-green-600 h-full transition-all duration-300"
-                style={{ width: `${(currentStep / totalSteps) * 100}%` }}
-              />
-            </div>
-          </div>
+      <WizardStepper
+        currentStep={currentStep}
+        totalSteps={totalSteps}
+        stepNames={stepNames}
+      />
 
-          {/* Desktop: Full step indicator */}
-          <div className="hidden sm:block">
-            <div className="flex items-center justify-between mb-2">
-              {STEP_NAMES.map((_, index) => (
-                <div key={index} className="flex items-center">
-                  <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' 
-                      : 'bg-gray-200 text-gray-600'
-                  }`}>
-                    {index + 1 < currentStep ? (
-                      <Check className="w-4 h-4" />
-                    ) : (
-                      index + 1
-                    )}
-                  </div>
-                  {index < STEP_NAMES.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>
-              ))}
-            </div>
-            <div className="hidden lg:flex justify-between text-xs text-gray-600 mt-2">
-              {STEP_NAMES.map((step, index) => (
-                <span key={index} className={`${
-                  index + 1 === currentStep ? 'font-semibold text-blue-600' : ''
-                }`}>
-                  {step}
-                </span>
-              ))}
-            </div>
-          </div>
-        </div>
-      </div>
+      <CreateRequestContent>{renderStepContent()}</CreateRequestContent>
 
-      {/* Content - with extra bottom padding for mobile keyboards */}
-      <div className="flex-1 overflow-y-auto pb-24 sm:pb-4">
-        <div className="max-w-6xl mx-auto p-3 sm:p-6 pb-6 sm:pb-6">
-          <AnimatePresence mode="wait">
-            {renderStepContent()}
-          </AnimatePresence>
-        </div>
-      </div>
+      <WizardFooter
+        currentStep={currentStep}
+        totalSteps={totalSteps}
+        isStepValid={isStepValid()}
+        onPrev={prevStep}
+        onNext={nextStep}
+        onSubmit={handleSubmit}
+        onSaveDraft={handleSaveDraft}
+        submitting={submitting}
+        savingDraft={savingDraft}
+        loadingDraft={loadingDraft}
+        isEditing={isEditing}
+      />
 
-      {/* Footer - Fixed on mobile for better keyboard handling */}
-      <div className="fixed sm:relative bottom-0 left-0 right-0 bg-white border-t border-gray-200 px-3 sm:px-6 py-3 sm:py-4 flex-shrink-0 shadow-lg sm:shadow-none z-50">
-        <div className="flex flex-col sm:flex-row justify-between items-stretch sm:items-center gap-2 sm:gap-4 max-w-6xl mx-auto">
-          {/* Previous Button */}
-          <Button
-            variant="outline"
-            onClick={prevStep}
-            disabled={currentStep === 1}
-            size="sm"
-            className="sm:size-lg order-2 sm:order-1"
-          >
-            <ArrowLeft className="h-3 w-3 sm:h-4 sm:w-4 mr-1 sm:mr-2" />
-            <span className="text-xs sm:text-sm">Previous</span>
-          </Button>
-
-          {/* Action Buttons */}
-          <div className="flex gap-2 sm:gap-3 order-1 sm:order-2">
-            <Button 
-              variant="outline" 
-              onClick={handleSaveDraft} 
-              size="sm"
-              className="sm:size-lg flex-1 sm:flex-none text-xs sm:text-sm" 
-              disabled={loadingDraft || submitting || savingDraft}
-            >
-              {savingDraft ? (
-                <>
-                  <Loader2 className="h-3 w-3 sm:h-4 sm:w-4 mr-1 sm:mr-2 animate-spin" />
-                  {isEditing ? 'Updating...' : 'Saving...'}
-                </>
-              ) : (
-                isEditing ? 'Update Draft' : 'Save Draft'
-              )}
-            </Button>
-            {currentStep === totalSteps ? (
-              <Button
-                onClick={handleSubmit}
-                disabled={!isStepValid() || loadingDraft || submitting || savingDraft}
-                size="sm"
-                className="sm:size-lg bg-green-600 hover:bg-green-700 flex-1 sm:flex-none sm:px-8 text-xs sm:text-sm"
-              >
-                {submitting ? (
-                  <>
-                    <Loader2 className="h-3 w-3 sm:h-4 sm:w-4 mr-1 sm:mr-2 animate-spin" />
-                    Submitting...
-                  </>
-                ) : (
-                  <>
-                    <Rocket className="h-3 w-3 sm:h-4 sm:w-4 mr-1 sm:mr-2" />
-                    Submit
-                  </>
-                )}
-              </Button>
-            ) : (
-              <Button
-                onClick={async () => {
-                  console.log('Next button clicked!');
-                  console.log('Current step:', currentStep);
-                  console.log('Is step valid:', isStepValid());
-                  console.log('Form data:', formData);
-                  await nextStep();
-                }}
-                disabled={!isStepValid()}
-                size="sm"
-                className="sm:size-lg flex-1 sm:flex-none sm:px-8 text-xs sm:text-sm"
-              >
-                <span className="hidden sm:inline">Next Step</span>
-                <span className="sm:hidden">Next</span>
-                <ArrowRight className="h-3 w-3 sm:h-4 sm:w-4 ml-1 sm:ml-2" />
-              </Button>
-            )}
-          </div>
-        </div>
-      </div>
-
-      {/* Template Selection Modal */}
-      <TemplateSelectionModal 
+      {/* Modals */}
+      <TemplateSelectionModal
         open={showTemplateModal}
         onClose={() => setShowTemplateModal(false)}
         onSelectTemplate={handleTemplateSelection}
       />
 
-      {/* File Preview Modal */}
       {previewDocument && (
         <FilePreview
           fileName={previewDocument.fileName}
@@ -3327,15 +339,8 @@ export function CreateRequest({ onBack, onSubmit, requestId: propRequestId, isEd
           fileUrl={previewDocument.fileUrl}
           fileSize={previewDocument.fileSize}
           open={!!previewDocument}
-          onClose={() => {
-            // Clean up object URL to prevent memory leaks
-            if (previewDocument.fileUrl) {
-              URL.revokeObjectURL(previewDocument.fileUrl);
-            }
-            setPreviewDocument(null);
-          }}
+          onClose={closePreview}
           onDownload={async () => {
-            // For new uploads (File object), download using browser download
             if (previewDocument.file) {
               const link = document.createElement('a');
               link.href = previewDocument.fileUrl;
@@ -3344,158 +349,35 @@ export function CreateRequest({ onBack, onSubmit, requestId: propRequestId, isEd
               link.click();
               document.body.removeChild(link);
             } else if (previewDocument.documentId) {
-              // For existing documents from draft, use the API download function
               await downloadDocument(previewDocument.documentId);
             }
           }}
           attachmentId={previewDocument.documentId}
         />
       )}
-      
-      {/* Document Validation Error Modal */}
-      <Dialog open={documentErrorModal.open} onOpenChange={(open) => setDocumentErrorModal(prev => ({ ...prev, open }))}>
-        <DialogContent className="sm:max-w-lg">
-          <DialogHeader>
-            <DialogTitle className="flex items-center gap-2">
-              <AlertCircle className="w-5 h-5 text-red-600" />
-              Document Upload Policy Violation
-            </DialogTitle>
-            <DialogDescription asChild>
-              <div className="space-y-3">
-                <p className="text-gray-700">
-                  The following file(s) could not be uploaded due to policy violations:
-                </p>
-                <div className="space-y-2 max-h-60 overflow-y-auto">
-                  {documentErrorModal.errors.map((error, index) => (
-                    <div key={index} className="bg-red-50 border border-red-200 rounded-lg p-3">
-                      <p className="font-medium text-red-900 text-sm">{error.fileName}</p>
-                      <p className="text-xs text-red-700 mt-1">{error.reason}</p>
-                    </div>
-                  ))}
-                </div>
-                <div className="bg-blue-50 border border-blue-200 rounded-lg p-3">
-                  <p className="text-sm text-blue-800 font-semibold mb-1">Document Policy:</p>
-                  <ul className="text-xs text-blue-700 space-y-1 list-disc list-inside">
-                    <li>Maximum file size: {documentPolicy.maxFileSizeMB}MB</li>
-                    <li>Allowed file types: {documentPolicy.allowedFileTypes.join(', ')}</li>
-                  </ul>
-                </div>
-              </div>
-            </DialogDescription>
-          </DialogHeader>
-          <DialogFooter>
-            <Button
-              onClick={() => setDocumentErrorModal({ open: false, errors: [] })}
-              className="w-full sm:w-auto"
-            >
-              OK
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
 
-      {/* Validation Error Modal */}
-      <Dialog open={validationModal.open} onOpenChange={(open) => setValidationModal(prev => ({ ...prev, open }))}>
-        <DialogContent className="sm:max-w-md">
-          <DialogHeader>
-            <DialogTitle className="flex items-center gap-2">
-              {validationModal.type === 'self-assign' && (
-                <>
-                  <AlertCircle className="w-5 h-5 text-amber-600" />
-                  Cannot Add Yourself
-                </>
-              )}
-              {validationModal.type === 'not-found' && (
-                <>
-                  <AlertCircle className="w-5 h-5 text-red-600" />
-                  User Not Found
-                </>
-              )}
-              {validationModal.type === 'error' && (
-                <>
-                  <AlertCircle className="w-5 h-5 text-red-600" />
-                  Validation Error
-                </>
-              )}
-            </DialogTitle>
-            <DialogDescription asChild>
-              <div className="space-y-3">
-                {validationModal.type === 'self-assign' && (
-                  <>
-                    <p className="text-gray-700">
-                      You cannot add yourself (<strong>{validationModal.email}</strong>) as an approver.
-                    </p>
-                    <div className="bg-amber-50 border border-amber-200 rounded-lg p-3">
-                      <p className="text-sm text-amber-800">
-                        <strong>Why?</strong> The initiator creates the request and cannot approve their own request. Please select a different user.
-                      </p>
-                    </div>
-                  </>
-                )}
-                
-                {validationModal.type === 'not-found' && (
-                  <>
-                    <p className="text-gray-700">
-                      User <strong>{validationModal.email}</strong> was not found in the organization directory.
-                    </p>
-                    <div className="bg-red-50 border border-red-200 rounded-lg p-3 space-y-2">
-                      <p className="text-sm text-red-800 font-semibold">Please verify:</p>
-                      <ul className="text-sm text-red-700 space-y-1 list-disc list-inside">
-                        <li>Email address is spelled correctly</li>
-                        <li>User exists in Okta/SSO system</li>
-                        <li>User has an active account</li>
-                      </ul>
-                    </div>
-                    <div className="bg-blue-50 border border-blue-200 rounded-lg p-3">
-                      <p className="text-sm text-blue-800 flex items-center gap-1">
-                        <Lightbulb className="w-4 h-4" />
-                        <strong>Tip:</strong> Use <span className="font-mono bg-blue-100 px-1 rounded">@</span> sign to search and select users from the directory for guaranteed results.
-                      </p>
-                    </div>
-                  </>
-                )}
-                
-                {validationModal.type === 'error' && (
-                  <>
-                    <p className="text-gray-700">
-                      {validationModal.email && (
-                        <>Failed to validate <strong>{validationModal.email}</strong>.</>
-                      )}
-                      {!validationModal.email && <>An error occurred during validation.</>}
-                    </p>
-                    {validationModal.message && (
-                      <div className="bg-gray-50 border border-gray-200 rounded-lg p-3">
-                        <p className="text-sm text-gray-700">{validationModal.message}</p>
-                      </div>
-                    )}
-                  </>
-                )}
-              </div>
-            </DialogDescription>
-          </DialogHeader>
-          <DialogFooter>
-            <Button
-              onClick={() => setValidationModal(prev => ({ ...prev, open: false }))}
-              className="w-full sm:w-auto"
-            >
-              {validationModal.type === 'not-found' ? 'Fix Email' : 'OK'}
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
+      <ValidationErrorModal
+        modal={validationModal}
+        onClose={closeValidationModal}
+      />
+
+      <DocumentErrorModal
+        modal={documentErrorModal}
+        documentPolicy={documentPolicy}
+        onClose={closeDocumentErrorModal}
+      />
 
-      {/* Policy Violation Modal */}
       <PolicyViolationModal
         open={policyViolationModal.open}
-        onClose={() => setPolicyViolationModal({ open: false, violations: [] })}
+        onClose={closePolicyViolationModal}
         violations={policyViolationModal.violations}
         policyDetails={{
           maxApprovalLevels: systemPolicy.maxApprovalLevels,
           maxParticipants: systemPolicy.maxParticipants,
           allowSpectators: systemPolicy.allowSpectators,
-          maxSpectators: systemPolicy.maxSpectators
+          maxSpectators: systemPolicy.maxSpectators,
         }}
       />
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/pages/CreateRequest/components/CreateRequestContent.tsx b/src/pages/CreateRequest/components/CreateRequestContent.tsx
new file mode 100644
index 0000000..5677cca
--- /dev/null
+++ b/src/pages/CreateRequest/components/CreateRequestContent.tsx
@@ -0,0 +1,24 @@
+/**
+ * Content wrapper component for CreateRequest
+ */
+
+import { AnimatePresence } from 'framer-motion';
+import { ReactNode } from 'react';
+
+interface CreateRequestContentProps {
+  children: ReactNode;
+}
+
+export function CreateRequestContent({ children }: CreateRequestContentProps) {
+  return (
+    <div
+      className="flex-1 overflow-y-auto pb-24 sm:pb-4"
+      data-testid="create-request-content"
+    >
+      <div className="max-w-6xl mx-auto p-3 sm:p-6 pb-6 sm:pb-6">
+        <AnimatePresence mode="wait">{children}</AnimatePresence>
+      </div>
+    </div>
+  );
+}
+
diff --git a/src/pages/CreateRequest/components/CreateRequestHeader.tsx b/src/pages/CreateRequest/components/CreateRequestHeader.tsx
new file mode 100644
index 0000000..673853d
--- /dev/null
+++ b/src/pages/CreateRequest/components/CreateRequestHeader.tsx
@@ -0,0 +1,71 @@
+/**
+ * Header component for CreateRequest
+ */
+
+import { Button } from '@/components/ui/button';
+import { ArrowLeft } from 'lucide-react';
+
+interface CreateRequestHeaderProps {
+  isEditing: boolean;
+  currentStep: number;
+  totalSteps: number;
+  stepNames: string[];
+  onBack?: () => void;
+}
+
+export function CreateRequestHeader({
+  isEditing,
+  currentStep,
+  totalSteps,
+  stepNames,
+  onBack,
+}: CreateRequestHeaderProps) {
+  return (
+    <div
+      className="bg-white border-b border-gray-200 px-3 sm:px-6 py-3 sm:py-4 flex-shrink-0"
+      data-testid="create-request-header"
+    >
+      <div className="flex items-center justify-between max-w-6xl mx-auto gap-2 sm:gap-4">
+        <div className="flex items-center gap-2 sm:gap-4 flex-1 min-w-0">
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={onBack}
+            className="shrink-0 h-8 w-8 sm:h-10 sm:w-10"
+            data-testid="create-request-back-button"
+          >
+            <ArrowLeft className="h-4 w-4 sm:h-5 sm:w-5" />
+          </Button>
+          <div className="min-w-0">
+            <h1
+              className="text-base sm:text-xl md:text-2xl font-bold text-gray-900 truncate"
+              data-testid="create-request-title"
+            >
+              {isEditing ? 'Edit Draft' : 'New Request'}
+            </h1>
+            <p
+              className="text-xs sm:text-sm text-gray-600 hidden sm:block"
+              data-testid="create-request-step-info"
+            >
+              Step {currentStep} of {totalSteps}: {stepNames[currentStep - 1]}
+            </p>
+          </div>
+        </div>
+        <div
+          className="hidden md:flex items-center gap-4"
+          data-testid="create-request-progress-info"
+        >
+          <div className="text-right">
+            <p className="text-sm font-medium text-gray-900">
+              {Math.round((currentStep / totalSteps) * 100)}% Complete
+            </p>
+            <p className="text-xs text-gray-600">
+              {totalSteps - currentStep} steps remaining
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
diff --git a/src/pages/CreateRequest/components/modals/DocumentErrorModal.tsx b/src/pages/CreateRequest/components/modals/DocumentErrorModal.tsx
new file mode 100644
index 0000000..0c9ceb2
--- /dev/null
+++ b/src/pages/CreateRequest/components/modals/DocumentErrorModal.tsx
@@ -0,0 +1,92 @@
+/**
+ * Document error modal component
+ */
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { AlertCircle } from 'lucide-react';
+import { DocumentErrorModalState } from '../../types/createRequest.types';
+import { DocumentPolicy } from '@/hooks/useCreateRequestForm';
+
+interface DocumentErrorModalProps {
+  modal: DocumentErrorModalState;
+  documentPolicy: DocumentPolicy;
+  onClose: () => void;
+}
+
+export function DocumentErrorModal({
+  modal,
+  documentPolicy,
+  onClose,
+}: DocumentErrorModalProps) {
+  return (
+    <Dialog
+      open={modal.open}
+      onOpenChange={(open) => !open && onClose()}
+      data-testid="create-request-document-error-modal"
+    >
+      <DialogContent className="sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle
+            className="flex items-center gap-2"
+            data-testid="document-error-modal-title"
+          >
+            <AlertCircle className="w-5 h-5 text-red-600" />
+            Document Upload Policy Violation
+          </DialogTitle>
+          <DialogDescription asChild>
+            <div className="space-y-3">
+              <p className="text-gray-700">
+                The following file(s) could not be uploaded due to policy
+                violations:
+              </p>
+              <div className="space-y-2 max-h-60 overflow-y-auto">
+                {modal.errors.map((error, index) => (
+                  <div
+                    key={index}
+                    className="bg-red-50 border border-red-200 rounded-lg p-3"
+                    data-testid={`document-error-${index}`}
+                  >
+                    <p className="font-medium text-red-900 text-sm">
+                      {error.fileName}
+                    </p>
+                    <p className="text-xs text-red-700 mt-1">{error.reason}</p>
+                  </div>
+                ))}
+              </div>
+              <div className="bg-blue-50 border border-blue-200 rounded-lg p-3">
+                <p className="text-sm text-blue-800 font-semibold mb-1">
+                  Document Policy:
+                </p>
+                <ul className="text-xs text-blue-700 space-y-1 list-disc list-inside">
+                  <li>Maximum file size: {documentPolicy.maxFileSizeMB}MB</li>
+                  <li>
+                    Allowed file types:{' '}
+                    {documentPolicy.allowedFileTypes.join(', ')}
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button
+            onClick={onClose}
+            className="w-full sm:w-auto"
+            data-testid="document-error-modal-ok-button"
+          >
+            OK
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
diff --git a/src/pages/CreateRequest/components/modals/ValidationErrorModal.tsx b/src/pages/CreateRequest/components/modals/ValidationErrorModal.tsx
new file mode 100644
index 0000000..47444c1
--- /dev/null
+++ b/src/pages/CreateRequest/components/modals/ValidationErrorModal.tsx
@@ -0,0 +1,138 @@
+/**
+ * Validation error modal component
+ */
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { AlertCircle, Lightbulb } from 'lucide-react';
+import { ValidationModalState } from '../../types/createRequest.types';
+
+interface ValidationErrorModalProps {
+  modal: ValidationModalState;
+  onClose: () => void;
+}
+
+export function ValidationErrorModal({
+  modal,
+  onClose,
+}: ValidationErrorModalProps) {
+  return (
+    <Dialog
+      open={modal.open}
+      onOpenChange={(open) => !open && onClose()}
+      data-testid="create-request-validation-modal"
+    >
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle
+            className="flex items-center gap-2"
+            data-testid="validation-modal-title"
+          >
+            {modal.type === 'self-assign' && (
+              <>
+                <AlertCircle className="w-5 h-5 text-amber-600" />
+                Cannot Add Yourself
+              </>
+            )}
+            {modal.type === 'not-found' && (
+              <>
+                <AlertCircle className="w-5 h-5 text-red-600" />
+                User Not Found
+              </>
+            )}
+            {modal.type === 'error' && (
+              <>
+                <AlertCircle className="w-5 h-5 text-red-600" />
+                Validation Error
+              </>
+            )}
+          </DialogTitle>
+          <DialogDescription asChild>
+            <div className="space-y-3">
+              {modal.type === 'self-assign' && (
+                <>
+                  <p className="text-gray-700">
+                    You cannot add yourself (<strong>{modal.email}</strong>) as
+                    an approver.
+                  </p>
+                  <div className="bg-amber-50 border border-amber-200 rounded-lg p-3">
+                    <p className="text-sm text-amber-800">
+                      <strong>Why?</strong> The initiator creates the request and
+                      cannot approve their own request. Please select a different
+                      user.
+                    </p>
+                  </div>
+                </>
+              )}
+
+              {modal.type === 'not-found' && (
+                <>
+                  <p className="text-gray-700">
+                    User <strong>{modal.email}</strong> was not found in the
+                    organization directory.
+                  </p>
+                  <div className="bg-red-50 border border-red-200 rounded-lg p-3 space-y-2">
+                    <p className="text-sm text-red-800 font-semibold">
+                      Please verify:
+                    </p>
+                    <ul className="text-sm text-red-700 space-y-1 list-disc list-inside">
+                      <li>Email address is spelled correctly</li>
+                      <li>User exists in Okta/SSO system</li>
+                      <li>User has an active account</li>
+                    </ul>
+                  </div>
+                  <div className="bg-blue-50 border border-blue-200 rounded-lg p-3">
+                    <p className="text-sm text-blue-800 flex items-center gap-1">
+                      <Lightbulb className="w-4 h-4" />
+                      <strong>Tip:</strong> Use{' '}
+                      <span className="font-mono bg-blue-100 px-1 rounded">
+                        @
+                      </span>{' '}
+                      sign to search and select users from the directory for
+                      guaranteed results.
+                    </p>
+                  </div>
+                </>
+              )}
+
+              {modal.type === 'error' && (
+                <>
+                  <p className="text-gray-700">
+                    {modal.email && (
+                      <>
+                        Failed to validate <strong>{modal.email}</strong>.
+                      </>
+                    )}
+                    {!modal.email && <>An error occurred during validation.</>}
+                  </p>
+                  {modal.message && (
+                    <div className="bg-gray-50 border border-gray-200 rounded-lg p-3">
+                      <p className="text-sm text-gray-700">{modal.message}</p>
+                    </div>
+                  )}
+                </>
+              )}
+            </div>
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button
+            onClick={onClose}
+            className="w-full sm:w-auto"
+            data-testid="validation-modal-ok-button"
+          >
+            {modal.type === 'not-found' ? 'Fix Email' : 'OK'}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
diff --git a/src/pages/CreateRequest/constants/requestTemplates.ts b/src/pages/CreateRequest/constants/requestTemplates.ts
new file mode 100644
index 0000000..1bd7dff
--- /dev/null
+++ b/src/pages/CreateRequest/constants/requestTemplates.ts
@@ -0,0 +1,36 @@
+/**
+ * Request template definitions
+ */
+
+import { RequestTemplate } from '@/hooks/useCreateRequestForm';
+import { Lightbulb, FileText } from 'lucide-react';
+
+export const REQUEST_TEMPLATES: RequestTemplate[] = [
+  {
+    id: 'custom',
+    name: 'Custom Request',
+    description:
+      'Create a custom request for unique business needs with full flexibility to define your own workflow and requirements',
+    category: 'General',
+    icon: Lightbulb,
+    estimatedTime: 'Variable',
+    commonApprovers: [],
+    suggestedSLA: 3,
+    priority: 'medium',
+    fields: {},
+  },
+  {
+    id: 'existing-template',
+    name: 'Existing Template',
+    description:
+      'Use a pre-configured template with predefined approval workflows, timelines, and requirements for faster processing',
+    category: 'Templates',
+    icon: FileText,
+    estimatedTime: '1-2 days',
+    commonApprovers: ['Department Head', 'Manager'],
+    suggestedSLA: 2,
+    priority: 'medium',
+    fields: { timeline: true },
+  },
+];
+
diff --git a/src/pages/CreateRequest/hooks/useApproverValidation.ts b/src/pages/CreateRequest/hooks/useApproverValidation.ts
new file mode 100644
index 0000000..5b3e4d8
--- /dev/null
+++ b/src/pages/CreateRequest/hooks/useApproverValidation.ts
@@ -0,0 +1,183 @@
+/**
+ * Hook for validating approvers during step transitions
+ */
+
+import { searchUsers, ensureUserExists } from '@/services/userApi';
+
+interface ValidationResult {
+  success: boolean;
+  error?: {
+    type: 'self-assign' | 'not-found' | 'error';
+    email: string;
+    message: string;
+  };
+}
+
+/**
+ * Validate a single approver
+ */
+async function validateApprover(
+  approver: any,
+  initiatorEmail: string
+): Promise<ValidationResult> {
+  // Check if approver email matches initiator email
+  if (approver.email.toLowerCase() === initiatorEmail.toLowerCase()) {
+    return {
+      success: false,
+      error: {
+        type: 'self-assign',
+        email: approver.email,
+        message: '',
+      },
+    };
+  }
+
+  try {
+    // Search for user in Okta directory
+    const response = await searchUsers(approver.email, 1);
+    const searchResults = response.data?.data || [];
+
+    if (searchResults.length === 0) {
+      return {
+        success: false,
+        error: {
+          type: 'not-found',
+          email: approver.email,
+          message: '',
+        },
+      };
+    }
+
+    const foundUser = searchResults[0];
+    if (!foundUser) {
+      return {
+        success: false,
+        error: {
+          type: 'error',
+          email: approver.email,
+          message: 'Could not retrieve user details. Please try again.',
+        },
+      };
+    }
+
+    // Ensure user exists in database
+    await ensureUserExists({
+      userId: foundUser.userId,
+      email: foundUser.email,
+      displayName: foundUser.displayName,
+      firstName: foundUser.firstName,
+      lastName: foundUser.lastName,
+      department: foundUser.department,
+      phone: foundUser.phone,
+      mobilePhone: foundUser.mobilePhone,
+      designation: foundUser.designation,
+      jobTitle: foundUser.jobTitle,
+      manager: foundUser.manager,
+      employeeId: foundUser.employeeId,
+      employeeNumber: foundUser.employeeNumber,
+      secondEmail: foundUser.secondEmail,
+      location: foundUser.location,
+    });
+
+    return {
+      success: true,
+    };
+  } catch (error) {
+    console.error(`Failed to validate approver ${approver.email}:`, error);
+    return {
+      success: false,
+      error: {
+        type: 'error',
+        email: approver.email,
+        message: 'Failed to validate user. Please try again or select a different user.',
+      },
+    };
+  }
+}
+
+/**
+ * Validate all approvers that need validation
+ */
+export async function validateApprovers(
+  approvers: any[],
+  initiatorEmail: string
+): Promise<{
+  success: boolean;
+  validatedApprovers?: any[];
+  error?: {
+    type: 'self-assign' | 'not-found' | 'error';
+    email: string;
+    message: string;
+  };
+}> {
+  const approversToValidate = approvers.filter(
+    (a) => a && a.email && !a.userId
+  );
+
+  if (approversToValidate.length === 0) {
+    return { success: true, validatedApprovers: approvers };
+  }
+
+  const updatedApprovers = [...approvers];
+
+  for (let i = 0; i < updatedApprovers.length; i++) {
+    const approver = updatedApprovers[i];
+
+    // Skip if already has userId (selected via @ search)
+    if (approver.userId || !approver.email) continue;
+
+    const validation = await validateApprover(approver, initiatorEmail);
+
+    if (!validation.success) {
+      return {
+        success: false,
+        error: validation.error,
+      };
+    }
+
+    // Update approver with validated data
+    try {
+      const response = await searchUsers(approver.email, 1);
+      const searchResults = response.data?.data || [];
+      const foundUser = searchResults[0];
+
+      if (foundUser) {
+        const dbUser = await ensureUserExists({
+          userId: foundUser.userId,
+          email: foundUser.email,
+          displayName: foundUser.displayName,
+          firstName: foundUser.firstName,
+          lastName: foundUser.lastName,
+          department: foundUser.department,
+          phone: foundUser.phone,
+          mobilePhone: foundUser.mobilePhone,
+          designation: foundUser.designation,
+          jobTitle: foundUser.jobTitle,
+          manager: foundUser.manager,
+          employeeId: foundUser.employeeId,
+          employeeNumber: foundUser.employeeNumber,
+          secondEmail: foundUser.secondEmail,
+          location: foundUser.location,
+        });
+
+        updatedApprovers[i] = {
+          ...approver,
+          userId: dbUser.userId,
+          name: dbUser.displayName || approver.name,
+          department: dbUser.department || approver.department,
+          avatar: (dbUser.displayName || dbUser.email)
+            .substring(0, 2)
+            .toUpperCase(),
+        };
+      }
+    } catch (error) {
+      console.error(`Failed to update approver ${approver.email}:`, error);
+    }
+  }
+
+  return {
+    success: true,
+    validatedApprovers: updatedApprovers,
+  };
+}
+
diff --git a/src/pages/CreateRequest/hooks/useCreateRequestHandlers.ts b/src/pages/CreateRequest/hooks/useCreateRequestHandlers.ts
new file mode 100644
index 0000000..7381ab7
--- /dev/null
+++ b/src/pages/CreateRequest/hooks/useCreateRequestHandlers.ts
@@ -0,0 +1,157 @@
+/**
+ * Hook for CreateRequest event handlers
+ * 
+ * Contains all handler functions for:
+ * - Template selection
+ * - Step navigation
+ * - Document preview
+ */
+
+import { useState } from 'react';
+import { RequestTemplate, FormData } from '@/hooks/useCreateRequestForm';
+import { PreviewDocument } from '../types/createRequest.types';
+import { getDocumentPreviewUrl } from '@/services/workflowApi';
+import { validateApprovers } from './useApproverValidation';
+
+interface UseHandlersOptions {
+  selectedTemplate: RequestTemplate | null;
+  setSelectedTemplate: (template: RequestTemplate | null) => void;
+  updateFormData: (field: keyof FormData, value: any) => void;
+  formData: FormData;
+  currentStep: number;
+  isStepValid: () => boolean;
+  wizardNextStep: () => void;
+  wizardPrevStep: () => void;
+  user: any;
+  openValidationModal: (
+    type: 'error' | 'self-assign' | 'not-found',
+    email: string,
+    message: string
+  ) => void;
+  onSubmit?: (requestData: any) => void;
+}
+
+export function useCreateRequestHandlers({
+  selectedTemplate,
+  setSelectedTemplate,
+  updateFormData,
+  formData,
+  currentStep,
+  isStepValid,
+  wizardNextStep,
+  wizardPrevStep,
+  user,
+  openValidationModal,
+  onSubmit,
+}: UseHandlersOptions) {
+  const [showTemplateModal, setShowTemplateModal] = useState(false);
+  const [previewDocument, setPreviewDocument] =
+    useState<PreviewDocument | null>(null);
+
+  // Template selection handler
+  const selectTemplate = (template: RequestTemplate) => {
+    setSelectedTemplate(template);
+    updateFormData('template', template.id);
+    updateFormData('category', template.category);
+    updateFormData('priority', template.priority);
+
+    const suggestedDate = new Date();
+    suggestedDate.setDate(suggestedDate.getDate() + template.suggestedSLA);
+    updateFormData('slaEndDate', suggestedDate);
+
+    if (template.id === 'existing-template') {
+      setShowTemplateModal(true);
+    }
+  };
+
+  const handleTemplateSelection = (templateId: string) => {
+    if (onSubmit) {
+      onSubmit({ templateType: templateId });
+    }
+  };
+
+  // Step navigation with validation
+  const nextStep = async () => {
+    if (!isStepValid()) return;
+
+    if (window.innerWidth < 640) {
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+    }
+
+    // Special validation when leaving step 3 (Approval Workflow)
+    if (currentStep === 3) {
+      const initiatorEmail = (user as any)?.email?.toLowerCase() || '';
+      const validation = await validateApprovers(
+        formData.approvers,
+        initiatorEmail
+      );
+
+      if (!validation.success && validation.error) {
+        openValidationModal(
+          validation.error.type,
+          validation.error.email,
+          validation.error.message
+        );
+        return;
+      }
+
+      if (validation.validatedApprovers) {
+        updateFormData('approvers', validation.validatedApprovers);
+      }
+    }
+
+    wizardNextStep();
+  };
+
+  const prevStep = () => {
+    wizardPrevStep();
+    // Scroll to top on mobile to ensure content is visible
+    if (window.innerWidth < 640) {
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+    }
+  };
+
+  // Document preview handlers
+  const handlePreviewDocument = (doc: any, isExisting: boolean) => {
+    if (isExisting) {
+      const docId = doc.documentId || doc.document_id || '';
+      setPreviewDocument({
+        fileName: doc.originalFileName || doc.fileName || 'Document',
+        fileType:
+          doc.fileType || doc.file_type || 'application/octet-stream',
+        fileUrl: getDocumentPreviewUrl(docId),
+        fileSize: Number(doc.fileSize || doc.file_size || 0),
+        documentId: docId,
+      });
+    } else {
+      const fileUrl = URL.createObjectURL(doc);
+      setPreviewDocument({
+        fileName: doc.name,
+        fileType: doc.type || 'application/octet-stream',
+        fileUrl: fileUrl,
+        fileSize: doc.size,
+        file: doc,
+      });
+    }
+  };
+
+  const closePreview = () => {
+    if (previewDocument?.fileUrl && previewDocument?.file) {
+      URL.revokeObjectURL(previewDocument.fileUrl);
+    }
+    setPreviewDocument(null);
+  };
+
+  return {
+    showTemplateModal,
+    setShowTemplateModal,
+    previewDocument,
+    selectTemplate,
+    handleTemplateSelection,
+    nextStep,
+    prevStep,
+    handlePreviewDocument,
+    closePreview,
+  };
+}
+
diff --git a/src/pages/CreateRequest/hooks/useCreateRequestSubmission.ts b/src/pages/CreateRequest/hooks/useCreateRequestSubmission.ts
new file mode 100644
index 0000000..b227330
--- /dev/null
+++ b/src/pages/CreateRequest/hooks/useCreateRequestSubmission.ts
@@ -0,0 +1,167 @@
+/**
+ * Hook for handling workflow submission and draft saving
+ */
+
+import { useState } from 'react';
+import { FormData, RequestTemplate } from '@/hooks/useCreateRequestForm';
+import {
+  buildCreatePayload,
+  buildUpdatePayload,
+  validateApproversForSubmission,
+} from '../utils/payloadBuilders';
+import {
+  createAndSubmitWorkflow,
+  updateAndSubmitWorkflow,
+  createWorkflow,
+  updateWorkflowRequest,
+} from '../services/createRequestService';
+
+interface UseSubmissionOptions {
+  formData: FormData;
+  selectedTemplate: RequestTemplate | null;
+  documents: File[];
+  documentsToDelete: string[];
+  user: any;
+  isEditing: boolean;
+  editRequestId: string;
+  onSubmit?: (requestData: any) => void;
+}
+
+export function useCreateRequestSubmission({
+  formData,
+  selectedTemplate,
+  documents,
+  documentsToDelete,
+  user,
+  isEditing,
+  editRequestId,
+  onSubmit,
+}: UseSubmissionOptions) {
+  const [submitting, setSubmitting] = useState(false);
+  const [savingDraft, setSavingDraft] = useState(false);
+
+  const handleSubmit = async () => {
+    if (submitting || savingDraft) return;
+
+    // Validate approvers
+    const validation = validateApproversForSubmission(
+      formData.approvers || [],
+      formData.approverCount || 1
+    );
+
+    if (!validation.valid) {
+      alert(validation.message);
+      return;
+    }
+
+    setSubmitting(true);
+
+    try {
+      if (isEditing && editRequestId) {
+        // Update existing workflow
+        const updatePayload = buildUpdatePayload(
+          formData,
+          user,
+          documentsToDelete
+        );
+
+        await updateAndSubmitWorkflow(
+          editRequestId,
+          updatePayload,
+          documents,
+          documentsToDelete
+        );
+
+        onSubmit?.({
+          ...formData,
+          backendId: editRequestId,
+          template: selectedTemplate,
+        });
+      } else {
+        // Create new workflow
+        const createPayload = buildCreatePayload(
+          formData,
+          selectedTemplate,
+          user
+        );
+
+        const result = await createAndSubmitWorkflow(createPayload, documents);
+
+        onSubmit?.({
+          ...formData,
+          backendId: result.id,
+          template: selectedTemplate,
+        });
+      }
+    } catch (error) {
+      console.error('Failed to submit workflow:', error);
+      setSubmitting(false);
+    }
+  };
+
+  const handleSaveDraft = async () => {
+    // Validate minimum required fields
+    if (
+      !selectedTemplate ||
+      !formData.title.trim() ||
+      !formData.description.trim() ||
+      !formData.priority
+    ) {
+      return;
+    }
+
+    if (submitting || savingDraft) return;
+
+    setSavingDraft(true);
+
+    try {
+      if (isEditing && editRequestId) {
+        // Update existing draft
+        const updatePayload = buildUpdatePayload(
+          formData,
+          user,
+          documentsToDelete
+        );
+
+        await updateWorkflowRequest(
+          editRequestId,
+          updatePayload,
+          documents,
+          documentsToDelete
+        );
+
+        onSubmit?.({
+          ...formData,
+          backendId: editRequestId,
+          template: selectedTemplate,
+        });
+      } else {
+        // Create new draft
+        const createPayload = buildCreatePayload(
+          formData,
+          selectedTemplate,
+          user
+        );
+
+        const result = await createWorkflow(createPayload, documents);
+
+        onSubmit?.({
+          ...formData,
+          backendId: result.id,
+          template: selectedTemplate,
+        });
+      }
+    } catch (error) {
+      console.error('Failed to save draft:', error);
+      setSavingDraft(false);
+    }
+  };
+
+  return {
+    submitting,
+    savingDraft,
+    handleSubmit,
+    handleSaveDraft,
+  };
+}
+
diff --git a/src/pages/CreateRequest/hooks/useRequestModals.ts b/src/pages/CreateRequest/hooks/useRequestModals.ts
new file mode 100644
index 0000000..88c50ed
--- /dev/null
+++ b/src/pages/CreateRequest/hooks/useRequestModals.ts
@@ -0,0 +1,92 @@
+/**
+ * Hook for managing modal states in CreateRequest
+ */
+
+import { useState } from 'react';
+import {
+  ValidationModalState,
+  PolicyViolationModalState,
+  DocumentErrorModalState,
+} from '../types/createRequest.types';
+
+export function useRequestModals() {
+  const [validationModal, setValidationModal] = useState<ValidationModalState>({
+    open: false,
+    type: 'error',
+    email: '',
+    message: '',
+  });
+
+  const [policyViolationModal, setPolicyViolationModal] =
+    useState<PolicyViolationModalState>({
+      open: false,
+      violations: [],
+    });
+
+  const [documentErrorModal, setDocumentErrorModal] =
+    useState<DocumentErrorModalState>({
+      open: false,
+      errors: [],
+    });
+
+  const openValidationModal = (
+    type: 'error' | 'self-assign' | 'not-found',
+    email: string,
+    message: string = ''
+  ) => {
+    setValidationModal({
+      open: true,
+      type,
+      email,
+      message,
+    });
+  };
+
+  const closeValidationModal = () => {
+    setValidationModal((prev) => ({ ...prev, open: false }));
+  };
+
+  const openPolicyViolationModal = (
+    violations: Array<{
+      type: string;
+      message: string;
+      currentValue?: number;
+      maxValue?: number;
+    }>
+  ) => {
+    setPolicyViolationModal({
+      open: true,
+      violations,
+    });
+  };
+
+  const closePolicyViolationModal = () => {
+    setPolicyViolationModal({ open: false, violations: [] });
+  };
+
+  const openDocumentErrorModal = (
+    errors: Array<{ fileName: string; reason: string }>
+  ) => {
+    setDocumentErrorModal({
+      open: true,
+      errors,
+    });
+  };
+
+  const closeDocumentErrorModal = () => {
+    setDocumentErrorModal({ open: false, errors: [] });
+  };
+
+  return {
+    validationModal,
+    policyViolationModal,
+    documentErrorModal,
+    openValidationModal,
+    closeValidationModal,
+    openPolicyViolationModal,
+    closePolicyViolationModal,
+    openDocumentErrorModal,
+    closeDocumentErrorModal,
+  };
+}
+
diff --git a/src/pages/CreateRequest/services/createRequestService.ts b/src/pages/CreateRequest/services/createRequestService.ts
new file mode 100644
index 0000000..68c8cf1
--- /dev/null
+++ b/src/pages/CreateRequest/services/createRequestService.ts
@@ -0,0 +1,86 @@
+/**
+ * Service layer for CreateRequest API operations
+ */
+
+import {
+  createWorkflowMultipart,
+  submitWorkflow,
+  updateWorkflow,
+  updateWorkflowMultipart,
+} from '@/services/workflowApi';
+import {
+  CreateWorkflowPayload,
+  UpdateWorkflowPayload,
+} from '../types/createRequest.types';
+
+/**
+ * Create a new workflow
+ */
+export async function createWorkflow(
+  payload: CreateWorkflowPayload,
+  documents: File[]
+): Promise<{ id: string }> {
+  const res = await createWorkflowMultipart(
+    payload as any,
+    documents || [],
+    'SUPPORTING'
+  );
+  return { id: (res as any).id };
+}
+
+/**
+ * Update an existing workflow
+ */
+export async function updateWorkflowRequest(
+  requestId: string,
+  payload: UpdateWorkflowPayload,
+  documents: File[],
+  documentsToDelete: string[]
+): Promise<void> {
+  const hasNewFiles = documents && documents.length > 0;
+  const hasDeletions = documentsToDelete.length > 0;
+
+  if (hasNewFiles || hasDeletions) {
+    await updateWorkflowMultipart(
+      requestId,
+      payload,
+      documents || [],
+      documentsToDelete
+    );
+  } else {
+    await updateWorkflow(requestId, payload);
+  }
+}
+
+/**
+ * Submit a workflow
+ */
+export async function submitWorkflowRequest(requestId: string): Promise<void> {
+  await submitWorkflow(requestId);
+}
+
+/**
+ * Create and submit a workflow in one operation
+ */
+export async function createAndSubmitWorkflow(
+  payload: CreateWorkflowPayload,
+  documents: File[]
+): Promise<{ id: string }> {
+  const result = await createWorkflow(payload, documents);
+  await submitWorkflowRequest(result.id);
+  return result;
+}
+
+/**
+ * Update and submit a workflow in one operation
+ */
+export async function updateAndSubmitWorkflow(
+  requestId: string,
+  payload: UpdateWorkflowPayload,
+  documents: File[],
+  documentsToDelete: string[]
+): Promise<void> {
+  await updateWorkflowRequest(requestId, payload, documents, documentsToDelete);
+  await submitWorkflowRequest(requestId);
+}
+
diff --git a/src/pages/CreateRequest/types/createRequest.types.ts b/src/pages/CreateRequest/types/createRequest.types.ts
new file mode 100644
index 0000000..25e5faa
--- /dev/null
+++ b/src/pages/CreateRequest/types/createRequest.types.ts
@@ -0,0 +1,124 @@
+/**
+ * Type definitions for CreateRequest module
+ */
+
+import { FormData, RequestTemplate } from '@/hooks/useCreateRequestForm';
+
+export interface Participant {
+  userId?: string;
+  userEmail: string;
+  userName: string;
+  participantType: 'INITIATOR' | 'APPROVER' | 'SPECTATOR';
+  canComment: boolean;
+  canViewDocuments: boolean;
+  canDownloadDocuments: boolean;
+  notificationEnabled: boolean;
+  addedBy?: string;
+}
+
+export interface ApprovalLevel {
+  levelNumber: number;
+  levelName: string;
+  approverId: string;
+  approverEmail: string;
+  approverName: string;
+  tatHours: number;
+  isFinalApprover: boolean;
+}
+
+export interface Approver {
+  userId?: string;
+  email: string;
+  name?: string;
+  tat?: number | string;
+  tatType?: 'hours' | 'days';
+  level?: number;
+}
+
+export interface Spectator {
+  id?: string;
+  userId?: string;
+  email: string;
+  name: string;
+}
+
+export interface CreateWorkflowPayload {
+  templateId: string | null;
+  templateType: 'CUSTOM' | 'TEMPLATE';
+  title: string;
+  description: string;
+  priorityUi: 'express' | 'standard';
+  approverCount: number;
+  approvers: Array<{
+    userId: string;
+    email: string;
+    name?: string;
+    tat: number | string;
+    tatType: 'hours' | 'days';
+  }>;
+  spectators: Array<{
+    userId: string;
+    name: string;
+    email: string;
+  }>;
+  ccList: Array<{
+    id?: string;
+    name: string;
+    email: string;
+  }>;
+  participants: Participant[];
+}
+
+export interface UpdateWorkflowPayload {
+  title: string;
+  description: string;
+  priority: 'EXPRESS' | 'STANDARD';
+  approvalLevels: ApprovalLevel[];
+  participants: Participant[];
+  deleteDocumentIds?: string[];
+}
+
+export interface ValidationModalState {
+  open: boolean;
+  type: 'error' | 'self-assign' | 'not-found';
+  email: string;
+  message: string;
+}
+
+export interface PolicyViolationModalState {
+  open: boolean;
+  violations: Array<{
+    type: string;
+    message: string;
+    currentValue?: number;
+    maxValue?: number;
+  }>;
+}
+
+export interface DocumentErrorModalState {
+  open: boolean;
+  errors: Array<{
+    fileName: string;
+    reason: string;
+  }>;
+}
+
+export interface PreviewDocument {
+  fileName: string;
+  fileType: string;
+  fileUrl: string;
+  fileSize?: number;
+  file?: File;
+  documentId?: string;
+}
+
+export interface SubmissionContext {
+  formData: FormData;
+  selectedTemplate: RequestTemplate | null;
+  documents: File[];
+  documentsToDelete: string[];
+  user: any;
+  isEditing: boolean;
+  editRequestId: string;
+}
+
diff --git a/src/pages/CreateRequest/utils/approvalLevelBuilders.ts b/src/pages/CreateRequest/utils/approvalLevelBuilders.ts
new file mode 100644
index 0000000..45decb7
--- /dev/null
+++ b/src/pages/CreateRequest/utils/approvalLevelBuilders.ts
@@ -0,0 +1,51 @@
+/**
+ * Utility functions for building approval levels
+ */
+
+import { ApprovalLevel, Approver } from '../types/createRequest.types';
+
+/**
+ * Calculate TAT in hours
+ */
+export function calculateTatHours(tat: number | string, tatType: 'hours' | 'days'): number {
+  const tatValue = typeof tat === 'number' ? tat : parseInt(String(tat)) || 0;
+  return tatType === 'days' ? tatValue * 24 : tatValue || 24;
+}
+
+/**
+ * Build a single approval level
+ */
+export function buildApproverLevel(
+  approver: Approver,
+  levelNumber: number,
+  isFinalApprover: boolean
+): ApprovalLevel {
+  const tatHours = calculateTatHours(approver.tat || 24, approver.tatType || 'hours');
+
+  return {
+    levelNumber,
+    levelName: `Level ${levelNumber}`,
+    approverId: approver.userId || '',
+    approverEmail: approver.email || '',
+    approverName: approver.name || approver.email?.split('@')[0] || `Approver ${levelNumber}`,
+    tatHours,
+    isFinalApprover,
+  };
+}
+
+/**
+ * Build all approval levels from approvers array
+ */
+export function buildApprovalLevels(
+  approvers: Approver[],
+  approverCount: number
+): ApprovalLevel[] {
+  return approvers
+    .slice(0, approverCount)
+    .map((approver, index) => {
+      const levelNumber = index + 1;
+      const isFinalApprover = levelNumber === approverCount;
+      return buildApproverLevel(approver, levelNumber, isFinalApprover);
+    });
+}
+
diff --git a/src/pages/CreateRequest/utils/participantMappers.ts b/src/pages/CreateRequest/utils/participantMappers.ts
new file mode 100644
index 0000000..6a0a222
--- /dev/null
+++ b/src/pages/CreateRequest/utils/participantMappers.ts
@@ -0,0 +1,110 @@
+/**
+ * Utility functions for mapping users to participants
+ */
+
+import { Participant, Approver, Spectator } from '../types/createRequest.types';
+
+/**
+ * Map initiator to participant
+ */
+export function mapInitiatorToParticipant(user: any): Participant {
+  const initiatorId = user?.userId || '';
+  const initiatorEmail = (user as any)?.email || '';
+  const initiatorName = (user as any)?.displayName || 
+                       (user as any)?.name || 
+                       initiatorEmail.split('@')[0] || 
+                       'Initiator';
+
+  return {
+    userId: initiatorId,
+    userEmail: initiatorEmail,
+    userName: initiatorName,
+    participantType: 'INITIATOR',
+    canComment: true,
+    canViewDocuments: true,
+    canDownloadDocuments: true,
+    notificationEnabled: true,
+    addedBy: initiatorId,
+  };
+}
+
+/**
+ * Map approvers to participants
+ */
+export function mapApproversToParticipants(
+  approvers: Approver[],
+  initiatorId: string
+): Participant[] {
+  return approvers
+    .filter((a) => a?.email)
+    .map((a) => ({
+      userId: a.userId || undefined,
+      userEmail: a.email,
+      userName: a.name || a.email.split('@')[0] || 'Approver',
+      participantType: 'APPROVER' as const,
+      canComment: true,
+      canViewDocuments: true,
+      canDownloadDocuments: true,
+      notificationEnabled: true,
+      addedBy: initiatorId,
+    }));
+}
+
+/**
+ * Map spectators to participants
+ */
+export function mapSpectatorsToParticipants(
+  spectators: Spectator[],
+  initiatorId: string
+): Participant[] {
+  return spectators
+    .filter((s) => s?.email)
+    .map((s) => ({
+      userId: s.id || s.userId || undefined,
+      userEmail: s.email,
+      userName: s.name || s.email.split('@')[0] || 'Spectator',
+      participantType: 'SPECTATOR' as const,
+      canComment: true,
+      canViewDocuments: true,
+      canDownloadDocuments: true,
+      notificationEnabled: true,
+      addedBy: initiatorId,
+    }));
+}
+
+/**
+ * Build complete participants array
+ */
+export function buildParticipantsArray(
+  user: any,
+  approvers: Approver[],
+  spectators: Spectator[]
+): Participant[] {
+  const initiator = mapInitiatorToParticipant(user);
+  const initiatorId = user?.userId || '';
+  
+  const approverParticipants = mapApproversToParticipants(approvers, initiatorId);
+  const spectatorParticipants = mapSpectatorsToParticipants(spectators, initiatorId);
+
+  return [initiator, ...approverParticipants, ...spectatorParticipants];
+}
+
+/**
+ * Filter duplicate participants (for edit mode)
+ */
+export function filterDuplicateParticipants(
+  approvers: Approver[],
+  spectators: Spectator[]
+): Spectator[] {
+  const approverIds = approvers.map((a) => a?.userId).filter(Boolean);
+  const approverEmails = approvers
+    .map((a) => a?.email?.toLowerCase?.())
+    .filter(Boolean);
+
+  return spectators.filter((s) => {
+    const isDuplicateId = approverIds.includes(s?.id);
+    const isDuplicateEmail = approverEmails.includes((s?.email || '').toLowerCase());
+    return !isDuplicateId && !isDuplicateEmail;
+  });
+}
+
diff --git a/src/pages/CreateRequest/utils/payloadBuilders.ts b/src/pages/CreateRequest/utils/payloadBuilders.ts
new file mode 100644
index 0000000..8e9d2e5
--- /dev/null
+++ b/src/pages/CreateRequest/utils/payloadBuilders.ts
@@ -0,0 +1,114 @@
+/**
+ * Utility functions for building API payloads
+ */
+
+import { FormData, RequestTemplate } from '@/hooks/useCreateRequestForm';
+import {
+  CreateWorkflowPayload,
+  UpdateWorkflowPayload,
+} from '../types/createRequest.types';
+import {
+  buildParticipantsArray,
+  filterDuplicateParticipants,
+} from './participantMappers';
+import { buildApprovalLevels } from './approvalLevelBuilders';
+
+/**
+ * Build create workflow payload
+ */
+export function buildCreatePayload(
+  formData: FormData,
+  selectedTemplate: RequestTemplate | null,
+  user: any
+): CreateWorkflowPayload {
+  const participants = buildParticipantsArray(
+    user,
+    formData.approvers || [],
+    formData.spectators || []
+  );
+
+  const filteredSpectators = filterDuplicateParticipants(
+    formData.approvers || [],
+    formData.spectators || []
+  );
+
+  return {
+    templateId: selectedTemplate?.id || null,
+    templateType: selectedTemplate?.id === 'custom' ? 'CUSTOM' : 'TEMPLATE',
+    title: formData.title,
+    description: formData.description,
+    priorityUi: formData.priority === 'express' ? 'express' : 'standard',
+    approverCount: formData.approverCount || 1,
+    approvers: (formData.approvers || []).map((a: any) => ({
+      userId: a?.userId || '',
+      email: a?.email || '',
+      name: a?.name,
+      tat: a?.tat || '',
+      tatType: a?.tatType || 'hours',
+    })),
+    spectators: filteredSpectators.map((s) => ({
+      userId: s?.id || '',
+      name: s?.name || s?.email?.split('@')?.[0] || 'Spectator',
+      email: s?.email || '',
+    })),
+    ccList: (formData.ccList || []).map((c: any) => ({
+      id: c?.id,
+      name: c?.name || c?.email?.split('@')?.[0] || 'CC',
+      email: c?.email || '',
+    })),
+    participants,
+  };
+}
+
+/**
+ * Build update workflow payload
+ */
+export function buildUpdatePayload(
+  formData: FormData,
+  user: any,
+  documentsToDelete: string[]
+): UpdateWorkflowPayload {
+  const approvalLevels = buildApprovalLevels(
+    formData.approvers || [],
+    formData.approverCount || 1
+  );
+
+  const participants = buildParticipantsArray(
+    user,
+    (formData.approvers || []).filter((a: any) => a?.email && a?.userId),
+    (formData.spectators || []).filter((s: any) => s?.email)
+  );
+
+  return {
+    title: formData.title,
+    description: formData.description,
+    priority: formData.priority === 'express' ? 'EXPRESS' : 'STANDARD',
+    approvalLevels,
+    participants,
+    deleteDocumentIds: documentsToDelete.length > 0 ? documentsToDelete : undefined,
+  };
+}
+
+/**
+ * Validate approvers before submission
+ */
+export function validateApproversForSubmission(
+  approvers: any[],
+  approverCount: number
+): { valid: boolean; message?: string } {
+  const approversToCheck = approvers.slice(0, approverCount);
+  
+  const hasMissingIds = approversToCheck.some(
+    (a: any) => !a?.userId || !a?.email
+  );
+
+  if (hasMissingIds) {
+    return {
+      valid: false,
+      message: 'Please select approvers using @ search so we can capture their user IDs.',
+    };
+  }
+
+  return { valid: true };
+}
+
diff --git a/src/pages/Dashboard/Dashboard.tsx b/src/pages/Dashboard/Dashboard.tsx
index 2b580c9..234053a 100644
--- a/src/pages/Dashboard/Dashboard.tsx
+++ b/src/pages/Dashboard/Dashboard.tsx
@@ -1,43 +1,32 @@
-import { useEffect, useState, useMemo, useCallback } from 'react';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import { Progress } from '@/components/ui/progress';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { Separator } from '@/components/ui/separator';
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { 
-  FileText, 
-  Clock, 
-  AlertTriangle, 
-  CheckCircle, 
-  Zap,
-  Shield,
-  Activity,
-  Target,
-  Flame,
-  Settings,
-  RefreshCw,
-  MessageSquare,
-  Filter,
-  Download,
-  Users,
-  PieChart,
-  Calendar as CalendarIcon,
-  ArrowRight
-} from 'lucide-react';
-import { format } from 'date-fns';
-import { dashboardService, type DashboardKPIs, type DateRange, type AIRemarkUtilization, type ApproverPerformance, type DepartmentStats, type PriorityDistribution, type UpcomingDeadline, type RecentActivity, type CriticalRequest } from '@/services/dashboard.service';
+import { useEffect, useMemo, useCallback } from 'react';
+import { RefreshCw } from 'lucide-react';
+import { type DateRange } from '@/services/dashboard.service';
 import { useAuth, hasManagementAccess } from '@/contexts/AuthContext';
-import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, PieChart as RechartsPieChart, Pie, Cell, BarChart, Bar } from 'recharts';
-import { KPICard } from '@/components/dashboard/KPICard';
-import { StatCard } from '@/components/dashboard/StatCard';
-import { CriticalAlertCard, CriticalAlertData } from '@/components/dashboard/CriticalAlertCard';
-import { ActivityFeedItem, ActivityData } from '@/components/dashboard/ActivityFeedItem';
-import { Pagination } from '@/components/common/Pagination';
-import { formatHoursMinutes } from '@/utils/slaTracker';
+
+// Custom Hooks
+import { useDashboardFilters } from './hooks/useDashboardFilters';
+import { useDashboardPagination } from './hooks/useDashboardPagination';
+import { useDashboardData } from './hooks/useDashboardData';
+import { useDashboardExports } from './hooks/useDashboardExports';
+
+// Components
+import { DashboardHero } from './components/DashboardHero';
+import { DashboardFiltersBar } from './components/DashboardFiltersBar';
+import { AdminKPICards } from './components/sections/AdminKPICards';
+import { UserKPICards } from './components/sections/UserKPICards';
+import { CriticalAlertsSection } from './components/sections/CriticalAlertsSection';
+import { RecentActivitySection } from './components/sections/RecentActivitySection';
+import { AdminAnalyticsSection } from './components/sections/AdminAnalyticsSection';
+import { UserMetricsSection } from './components/sections/UserMetricsSection';
+import { PriorityDistributionReport } from './components/sections/PriorityDistributionReport';
+import { TATBreachReport } from './components/sections/TATBreachReport';
+import { UpcomingDeadlinesSection } from './components/sections/UpcomingDeadlinesSection';
+import { AIRemarkUtilizationReport } from './components/sections/AIRemarkUtilizationReport';
+import { ApproverPerformanceReport } from './components/sections/ApproverPerformanceReport';
+
+// Utils
+import { buildFilterUrl, getQuickActions } from './utils/dashboardNavigation';
+import { getBreachedRequests, getUpcomingDeadlinesNotBreached } from './utils/dashboardCalculations';
 
 interface DashboardProps {
   onNavigate?: (page: string) => void;
@@ -47,466 +36,119 @@ interface DashboardProps {
 
 export function Dashboard({ onNavigate, onNewRequest }: DashboardProps) {
   const { user } = useAuth();
-  const [kpis, setKpis] = useState<DashboardKPIs | null>(null);
-  const [recentActivity, setRecentActivity] = useState<ActivityData[]>([]);
-  const [criticalRequests, setCriticalRequests] = useState<(CriticalRequest | CriticalAlertData)[]>([]);
-  const [departmentStats, setDepartmentStats] = useState<any[]>([]);
-  const [priorityDistribution, setPriorityDistribution] = useState<any[]>([]);
-  const [upcomingDeadlines, setUpcomingDeadlines] = useState<any[]>([]);
-  const [aiRemarkUtilization, setAiRemarkUtilization] = useState<AIRemarkUtilization | null>(null);
-  const [approverPerformance, setApproverPerformance] = useState<ApproverPerformance[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [refreshing, setRefreshing] = useState(false);
-  const [exportingDeptStats, setExportingDeptStats] = useState(false);
-  const [exportingApproverPerformance, setExportingApproverPerformance] = useState(false);
   
-  // Filter states
-  const [dateRange, setDateRange] = useState<DateRange>('month');
-  const [customStartDate, setCustomStartDate] = useState<Date | undefined>(undefined);
-  const [customEndDate, setCustomEndDate] = useState<Date | undefined>(undefined);
-  const [showCustomDatePicker, setShowCustomDatePicker] = useState(false);
-  
-  // Pagination states
-  const [activityPage, setActivityPage] = useState(1);
-  const [activityTotalPages, setActivityTotalPages] = useState(1);
-  const [activityTotalRecords, setActivityTotalRecords] = useState(0);
-  
-  const [criticalPage, setCriticalPage] = useState(1);
-  const [criticalTotalPages, setCriticalTotalPages] = useState(1);
-  const [criticalTotalRecords, setCriticalTotalRecords] = useState(0);
-  
-  const [deadlinesPage, setDeadlinesPage] = useState(1);
-  const [deadlinesTotalPages, setDeadlinesTotalPages] = useState(1);
-  const [deadlinesTotalRecords, setDeadlinesTotalRecords] = useState(0);
-  
-  const [approverPage, setApproverPage] = useState(1);
-  const [approverTotalPages, setApproverTotalPages] = useState(1);
-  const [approverTotalRecords, setApproverTotalRecords] = useState(0);
+  // Determine user role
+  const isAdmin = useMemo(() => hasManagementAccess(user), [user]);
 
-  // Determine user role - both ADMIN and MANAGEMENT see enhanced dashboard
-  const isAdmin = useMemo(() => {
-    return hasManagementAccess(user);
-  }, [user]);
+  // Filters
+  const filters = useDashboardFilters();
+  const { dateRange, customStartDate, customEndDate, showCustomDatePicker, handleDateRangeChange, handleApplyCustomDate, resetCustomDates, setCustomStartDate, setCustomEndDate, setShowCustomDatePicker } = filters;
 
-  // Backend returns critical requests including pending requests that have breached TAT
-  // Backend already filters for breached requests (is_breached = true) and includes PENDING/IN_PROGRESS statuses
-  // The backend query explicitly includes: WHERE wf.status IN ('PENDING', 'IN_PROGRESS') AND ta.is_breached = true
-  // So all critical requests returned are already pending/in-progress and breached - no additional filtering needed
-  // However, we still verify breachCount > 0 or isCritical to ensure data integrity
-  const breachedRequests = useMemo(() => {
-    return criticalRequests.filter(r => {
-      // Include all requests that are breached (breachCount > 0) or marked as critical
-      // Backend already ensures these are pending/in-progress requests that have breached TAT
-      const isBreached = (r.breachCount || 0) > 0;
-      const isCritical = (r as any).isCritical === true;
-      const status = (r as any).status;
-      
-      // If status is available, ensure it's pending/in-progress (backend should already filter this)
-      // This is a safety check to ensure we only show pending/in-progress requests that have breached
-      if (status) {
-        const isPendingOrInProgress = status === 'pending' || status === 'in-progress' || 
-                                       status === 'PENDING' || status === 'IN_PROGRESS';
-        // Include if (breached or critical) AND status is pending/in-progress
-        // This ensures pending requests that have breached are included
-        return (isBreached || isCritical) && isPendingOrInProgress;
-      }
-      
-      // Fallback: if no status info, include all breached or critical requests
-      // (Backend should always provide status, but this is a safety fallback)
-      return isBreached || isCritical;
-    });
-  }, [criticalRequests]);
+  // Pagination
+  const pagination = useDashboardPagination();
+  const {
+    activity: activityPagination,
+    critical: criticalPagination,
+    deadlines: deadlinesPagination,
+    approver: approverPagination,
+    updateActivityPagination,
+    updateCriticalPagination,
+    updateDeadlinesPagination,
+    updateApproverPagination,
+    handleActivityPageChange,
+    handleCriticalPageChange,
+    handleDeadlinesPageChange,
+    handleApproverPageChange,
+  } = pagination;
 
-  // Filter upcoming deadlines to show only requests about to breach (not yet breached)
-  const upcomingDeadlinesNotBreached = useMemo(() => {
-    return upcomingDeadlines.filter(deadline => {
-      const tatPercentage = Number(deadline.tatPercentageUsed) || 0;
-      const remainingHours = Number(deadline.remainingHours) || 0;
-      // Show only if not yet breached (remainingHours > 0 and tatPercentage < 100)
-      return remainingHours > 0 && tatPercentage < 100;
-    });
-  }, [upcomingDeadlines]);
+  // Data fetching
+  const dashboardData = useDashboardData({
+    isAdmin,
+    dateRange,
+    customStartDate,
+    customEndDate,
+    onPaginationUpdate: {
+      activity: updateActivityPagination,
+      critical: updateCriticalPagination,
+      deadlines: updateDeadlinesPagination,
+      approver: updateApproverPagination,
+    },
+  });
+  const {
+    kpis,
+    recentActivity,
+    criticalRequests,
+    departmentStats,
+    priorityDistribution,
+    upcomingDeadlines,
+    aiRemarkUtilization,
+    approverPerformance,
+    loading,
+    refreshing,
+    fetchDashboardData,
+    fetchRecentActivities,
+    fetchCriticalRequests,
+    fetchUpcomingDeadlines,
+    fetchApproverPerformance,
+  } = dashboardData;
 
-  // Fetch recent activities with pagination
-  const fetchRecentActivities = useCallback(async (page: number = 1) => {
-    try {
-      const result = await dashboardService.getRecentActivity(page, 10);
-      setRecentActivity(result.activities);
-      setActivityPage(result.pagination.currentPage);
-      setActivityTotalPages(result.pagination.totalPages);
-      setActivityTotalRecords(result.pagination.totalRecords);
-    } catch (error) {
-      console.error('Failed to fetch recent activities:', error);
-    }
-  }, []);
+  // Exports
+  const exports = useDashboardExports();
+  const { exportingDeptStats, exportingApproverPerformance, handleExportDepartmentStats, handleExportApproverPerformance } = exports;
 
-  // Fetch critical requests with pagination
-  const fetchCriticalRequests = useCallback(async (page: number = 1) => {
-    try {
-      const result = await dashboardService.getCriticalRequests(page, 10);
-      setCriticalRequests(result.criticalRequests);
-      setCriticalPage(result.pagination.currentPage);
-      setCriticalTotalPages(result.pagination.totalPages);
-      setCriticalTotalRecords(result.pagination.totalRecords);
-    } catch (error) {
-      console.error('Failed to fetch critical requests:', error);
-    }
-  }, []);
+  // Calculated values
+  const breachedRequests = useMemo(() => getBreachedRequests(criticalRequests), [criticalRequests]);
+  const upcomingDeadlinesNotBreached = useMemo(() => getUpcomingDeadlinesNotBreached(upcomingDeadlines), [upcomingDeadlines]);
 
-  // Fetch upcoming deadlines with pagination
-  const fetchUpcomingDeadlines = useCallback(async (page: number = 1) => {
-    try {
-      const result = await dashboardService.getUpcomingDeadlines(page, 10);
-      setUpcomingDeadlines(result.deadlines);
-      setDeadlinesPage(result.pagination.currentPage);
-      setDeadlinesTotalPages(result.pagination.totalPages);
-      setDeadlinesTotalRecords(result.pagination.totalRecords);
-    } catch (error) {
-      console.error('Failed to fetch upcoming deadlines:', error);
-    }
-  }, []);
-
-  // Fetch approver performance with pagination
-  const fetchApproverPerformance = useCallback(async (selectedDateRange: DateRange = 'month', page: number = 1, customStart?: Date, customEnd?: Date) => {
-    try {
-      const result = await dashboardService.getApproverPerformance(selectedDateRange, page, 10, customStart, customEnd);
-      setApproverPerformance(result.performance);
-      setApproverPage(result.pagination.currentPage);
-      setApproverTotalPages(result.pagination.totalPages);
-      setApproverTotalRecords(result.pagination.totalRecords);
-    } catch (error) {
-      console.error('Failed to fetch approver performance:', error);
-    }
-  }, []);
-
-  // Fetch dashboard data
-  const fetchDashboardData = useCallback(async (showRefreshing = false, selectedDateRange: DateRange = 'month', customStart?: Date, customEnd?: Date) => {
-    try {
-      if (showRefreshing) {
-        setRefreshing(true);
-      } else {
-        setLoading(true);
-      }
-
-      // Prepare params for custom date range
-      const params: any = { dateRange: selectedDateRange };
-      if (selectedDateRange === 'custom' && customStart && customEnd) {
-        params.startDate = customStart.toISOString();
-        params.endDate = customEnd.toISOString();
-      }
-
-      // Fetch common data for all users
-      const commonPromises = [
-        dashboardService.getKPIs(selectedDateRange, customStart, customEnd),
-        dashboardService.getRecentActivity(1, 10),
-        dashboardService.getCriticalRequests(1, 10),
-        dashboardService.getUpcomingDeadlines(1, 10)
-      ];
-
-      // Fetch admin-only data if user is admin
-      const adminPromises = isAdmin ? [
-        dashboardService.getDepartmentStats(selectedDateRange, customStart, customEnd),
-        dashboardService.getPriorityDistribution(selectedDateRange, customStart, customEnd),
-        dashboardService.getAIRemarkUtilization(selectedDateRange, customStart, customEnd),
-        dashboardService.getApproverPerformance(selectedDateRange, 1, 10, customStart, customEnd)
-      ] : [];
-
-      // Fetch all data in parallel
-      const results = await Promise.all([...commonPromises, ...adminPromises]);
-      
-      const kpisData = results[0] as DashboardKPIs;
-      const activityResult = results[1] as { activities: RecentActivity[]; pagination: { currentPage: number; totalPages: number; totalRecords: number; limit: number } };
-      const criticalResult = results[2] as { criticalRequests: CriticalRequest[]; pagination: { currentPage: number; totalPages: number; totalRecords: number; limit: number } };
-      const deadlinesResult = results[3] as { deadlines: UpcomingDeadline[]; pagination: { currentPage: number; totalPages: number; totalRecords: number; limit: number } };
-
-      setKpis(kpisData);
-      setRecentActivity(activityResult.activities);
-      setActivityPage(activityResult.pagination.currentPage);
-      setActivityTotalPages(activityResult.pagination.totalPages);
-      setActivityTotalRecords(activityResult.pagination.totalRecords);
-      
-      setCriticalRequests(criticalResult.criticalRequests);
-      setCriticalPage(criticalResult.pagination.currentPage);
-      setCriticalTotalPages(criticalResult.pagination.totalPages);
-      setCriticalTotalRecords(criticalResult.pagination.totalRecords);
-      
-      setUpcomingDeadlines(deadlinesResult.deadlines);
-      setDeadlinesPage(deadlinesResult.pagination.currentPage);
-      setDeadlinesTotalPages(deadlinesResult.pagination.totalPages);
-      setDeadlinesTotalRecords(deadlinesResult.pagination.totalRecords);
-      
-      // Only set admin-specific data if user is admin
-      if (isAdmin && results.length >= 8) {
-        const deptStats = results[4] as DepartmentStats[];
-        const priorityDist = results[5] as PriorityDistribution[];
-        const aiUtilization = results[6] as AIRemarkUtilization;
-        const approverResult = results[7] as { performance: ApproverPerformance[]; pagination: { currentPage: number; totalPages: number; totalRecords: number; limit: number } };
-        setDepartmentStats(deptStats);
-        setPriorityDistribution(priorityDist);
-        setAiRemarkUtilization(aiUtilization);
-        setApproverPerformance(approverResult.performance);
-        setApproverPage(approverResult.pagination.currentPage);
-        setApproverTotalPages(approverResult.pagination.totalPages);
-        setApproverTotalRecords(approverResult.pagination.totalRecords);
-      } else if (!isAdmin) {
-        // Reset admin-specific data for normal users
-        setDepartmentStats([]);
-        setPriorityDistribution([]);
-        setAiRemarkUtilization(null);
-        setApproverPerformance([]);
-      }
-    } catch (error) {
-      console.error('Failed to fetch dashboard data:', error);
-    } finally {
-      setLoading(false);
-      setRefreshing(false);
-    }
-  }, [isAdmin]);
-
-  const handleRefresh = () => {
+  // Handlers
+  const handleRefresh = useCallback(() => {
     if (dateRange === 'custom' && customStartDate && customEndDate) {
-      fetchDashboardData(true, dateRange, customStartDate, customEndDate);
+      fetchDashboardData(true);
     } else {
-      fetchDashboardData(true, dateRange);
+      fetchDashboardData(true);
     }
-  };
+  }, [dateRange, customStartDate, customEndDate, fetchDashboardData]);
 
-  const handleDateRangeChange = (value: string) => {
-    const newRange = value as DateRange;
-    setDateRange(newRange);
-    if (newRange !== 'custom') {
-      setCustomStartDate(undefined);
-      setCustomEndDate(undefined);
-      setShowCustomDatePicker(false);
-    } else {
-      setShowCustomDatePicker(true);
-    }
-  };
-
-  const handleApplyCustomDate = () => {
-    if (customStartDate && customEndDate) {
-      if (customStartDate > customEndDate) {
-        // Swap dates if start is after end
-        const temp = customStartDate;
-        setCustomStartDate(customEndDate);
-        setCustomEndDate(temp);
-        fetchDashboardData(false, dateRange, customEndDate, temp);
-      } else {
-        fetchDashboardData(false, dateRange, customStartDate, customEndDate);
+  const handleApplyCustomDateWrapper = useCallback(() => {
+    handleApplyCustomDate(() => {
+      if (customStartDate && customEndDate) {
+        fetchDashboardData(false);
       }
-      setShowCustomDatePicker(false);
-    }
-  };
+    });
+  }, [customStartDate, customEndDate, handleApplyCustomDate, fetchDashboardData]);
 
-  // Pagination handlers
-  const handleActivityPageChange = (newPage: number) => {
-    if (newPage >= 1 && newPage <= activityTotalPages) {
-      setActivityPage(newPage);
-      fetchRecentActivities(newPage);
-    }
-  };
+  const handleActivityPageChangeWrapper = useCallback((newPage: number) => {
+    handleActivityPageChange(newPage, fetchRecentActivities);
+  }, [handleActivityPageChange, fetchRecentActivities]);
 
-  const handleCriticalPageChange = (newPage: number) => {
-    if (newPage >= 1 && newPage <= criticalTotalPages) {
-      setCriticalPage(newPage);
-      fetchCriticalRequests(newPage);
-    }
-  };
+  const handleCriticalPageChangeWrapper = useCallback((newPage: number) => {
+    handleCriticalPageChange(newPage, fetchCriticalRequests);
+  }, [handleCriticalPageChange, fetchCriticalRequests]);
 
-  const handleDeadlinesPageChange = (newPage: number) => {
-    if (newPage >= 1 && newPage <= deadlinesTotalPages) {
-      setDeadlinesPage(newPage);
-      fetchUpcomingDeadlines(newPage);
-    }
-  };
+  const handleDeadlinesPageChangeWrapper = useCallback((newPage: number) => {
+    handleDeadlinesPageChange(newPage, fetchUpcomingDeadlines);
+  }, [handleDeadlinesPageChange, fetchUpcomingDeadlines]);
 
-  const handleApproverPageChange = (newPage: number) => {
-    if (newPage >= 1 && newPage <= approverTotalPages) {
-      setApproverPage(newPage);
-      if (dateRange === 'custom' && customStartDate && customEndDate) {
-        fetchApproverPerformance(dateRange, newPage, customStartDate, customEndDate);
-      } else {
-        fetchApproverPerformance(dateRange, newPage);
-      }
-    }
-  };
-
-  // Export Approver Performance to CSV
-  const exportApproverPerformanceToCSV = async () => {
-    try {
-      setExportingApproverPerformance(true);
-      
-      // Fetch all approver performance data (no pagination)
-      // Use a large limit to get all data
-      const allData: ApproverPerformance[] = [];
-      let currentPage = 1;
-      let hasMore = true;
-      const maxPages = 100; // Safety limit
-      
-      while (hasMore && currentPage <= maxPages) {
-        const result = await dashboardService.getApproverPerformance(
-          dateRange,
-          currentPage,
-          100, // Large page size
-          customStartDate,
-          customEndDate
-        );
-        
-        if (result.performance && result.performance.length > 0) {
-          allData.push(...result.performance);
-          currentPage++;
-          hasMore = currentPage <= result.pagination.totalPages;
-        } else {
-          hasMore = false;
-        }
-      }
-      
-      // Convert to CSV format
-      const csvRows = [
-        ['Approver Name', 'Total Approved', 'TAT Compliance (%)', 'Avg Response Time', 'Pending Count'].join(',')
-      ];
-      
-      allData.forEach((approver) => {
-        const row = [
-          `"${(approver.approverName || 'Unknown').replace(/"/g, '""')}"`,
-          approver.totalApproved || 0,
-          approver.tatCompliancePercent || 0,
-          formatHoursMinutes(approver.avgResponseHours),
-          approver.pendingCount || 0
-        ];
-        csvRows.push(row.join(','));
-      });
-      
-      const csvContent = csvRows.join('\n');
-      const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
-      const link = document.createElement('a');
-      const url = URL.createObjectURL(blob);
-      link.setAttribute('href', url);
-      link.setAttribute('download', `approver-performance-report-${new Date().toISOString().split('T')[0]}.csv`);
-      link.style.visibility = 'hidden';
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link);
-      URL.revokeObjectURL(url);
-    } catch (error: any) {
-      console.error('Failed to export approver performance:', error);
-      alert('Failed to export approver performance data. Please try again.');
-    } finally {
-      setExportingApproverPerformance(false);
-    }
-  };
-
-  // Export Department Stats to CSV
-  const exportDepartmentStatsToCSV = async () => {
-    try {
-      setExportingDeptStats(true);
-      
-      // Get all department stats (not just the displayed ones)
-      const allDeptStats = await dashboardService.getDepartmentStats(dateRange, customStartDate, customEndDate);
-      
-      const csvRows = [
-        ['Department', 'Total Requests', 'Approved', 'Rejected', 'In Progress', 'Approval Rate (%)'].join(',')
-      ];
-      
-      allDeptStats.forEach((dept: any) => {
-        const row = [
-          `"${(dept.department || 'Unknown').replace(/"/g, '""')}"`,
-          dept.totalRequests || 0,
-          dept.approved || 0,
-          dept.rejected || 0,
-          dept.inProgress || 0,
-          dept.approvalRate || 0
-        ];
-        csvRows.push(row.join(','));
-      });
-      
-      const csvContent = csvRows.join('\n');
-      const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
-      const link = document.createElement('a');
-      const url = URL.createObjectURL(blob);
-      link.setAttribute('href', url);
-      link.setAttribute('download', `department-workflow-summary-${new Date().toISOString().split('T')[0]}.csv`);
-      link.style.visibility = 'hidden';
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link);
-    } catch (error: any) {
-      console.error('Failed to export department stats:', error);
-      alert('Failed to export department statistics. Please try again.');
-    } finally {
-      setExportingDeptStats(false);
-    }
-  };
-
-  // Helper function for activity pagination page numbers
-  const getActivityPageNumbers = () => {
-    const pages = [];
-    const maxPagesToShow = 3; // Reduced for narrow column
-    let startPage = Math.max(1, activityPage - Math.floor(maxPagesToShow / 2));
-    let endPage = Math.min(activityTotalPages, 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;
-  };
+  const handleApproverPageChangeWrapper = useCallback((newPage: number) => {
+    handleApproverPageChange(newPage, () => fetchApproverPerformance(newPage));
+  }, [handleApproverPageChange, fetchApproverPerformance]);
 
   useEffect(() => {
     if (dateRange === 'custom') {
       // Don't auto-fetch for custom dates until user applies them
       if (customStartDate && customEndDate) {
-        fetchDashboardData(false, dateRange, customStartDate, customEndDate);
+        fetchDashboardData(false);
       }
     } else {
-      fetchDashboardData(false, dateRange);
+      fetchDashboardData(false);
     }
-  }, [fetchDashboardData, dateRange, customStartDate, customEndDate]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [dateRange, customStartDate, customEndDate]);
 
-  // Memoize quick actions to prevent recreation on each render
-  const quickActions = useMemo(() => {
-    const actions = [
-      { label: 'New Request', icon: FileText, action: () => onNewRequest?.(), color: 'bg-emerald-600 hover:bg-emerald-700' },
-      { label: 'View Pending', icon: Clock, action: () => onNavigate?.('open-requests'), color: 'bg-blue-600 hover:bg-blue-700' },
-      { label: 'Settings', icon: Settings, action: () => onNavigate?.('settings'), color: 'bg-slate-600 hover:bg-slate-700' }
-    ];
-    
-    // Only show Reports button for admin users
-    if (isAdmin) {
-      actions.splice(2, 0, { label: 'Reports', icon: Activity, action: () => onNavigate?.('detailed-reports'), color: 'bg-purple-600 hover:bg-purple-700' });
-    }
-    
-    return actions;
-  }, [onNavigate, onNewRequest, isAdmin]);
+  // Quick actions
+  const quickActions = useMemo(() => getQuickActions(isAdmin, onNewRequest, onNavigate), [isAdmin, onNewRequest, onNavigate]);
 
-  // Helper function to build filter URL params
-  const buildFilterUrl = useCallback((filters: {
-    status?: string;
-    priority?: string;
-    slaCompliance?: string;
-    department?: string;
-    dateRange?: DateRange;
-    startDate?: Date;
-    endDate?: Date;
-  }) => {
-    const params = new URLSearchParams();
-    if (filters.status) params.set('status', filters.status);
-    if (filters.priority) params.set('priority', filters.priority);
-    if (filters.slaCompliance) params.set('slaCompliance', filters.slaCompliance);
-    if (filters.department) params.set('department', filters.department);
-    if (filters.dateRange) params.set('dateRange', filters.dateRange);
-    if (filters.startDate) params.set('startDate', filters.startDate.toISOString());
-    if (filters.endDate) params.set('endDate', filters.endDate.toISOString());
-    const queryString = params.toString();
-    // Navigate to new Requests screen instead of My Requests
-    return queryString ? `/requests?${queryString}` : '/requests';
-  }, []);
-
-  // Handler for KPI clicks - navigates to Requests screen with filters
+  // KPI click handler
   const handleKPIClick = useCallback((filters: {
     status?: string;
     priority?: string;
@@ -518,7 +160,7 @@ export function Dashboard({ onNavigate, onNewRequest }: DashboardProps) {
   }) => {
     const url = buildFilterUrl(filters);
     onNavigate?.(url);
-  }, [buildFilterUrl, onNavigate]);
+  }, [onNavigate]);
 
   if (loading) {
     return (
@@ -532,1496 +174,141 @@ export function Dashboard({ onNavigate, onNewRequest }: DashboardProps) {
   }
 
   return (
-    <div className="space-y-4 sm:space-y-6 max-w-7xl mx-auto p-3 sm:p-4">
-      {/* Hero Section with Clear Background */}
-      <Card className="relative overflow-hidden shadow-xl border-0">
-        <div className="absolute inset-0 bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900"></div>
-        
-        <CardContent className="relative z-10 p-4 sm:p-6 lg:p-12">
-          <div className="flex flex-col lg:flex-row items-start lg:items-center justify-between gap-4 sm:gap-6">
-            <div className="text-white w-full lg:w-auto">
-              <div className="flex items-center gap-3 sm:gap-4 mb-4 sm:mb-6">
-                <div className="w-12 h-12 sm:w-16 sm:h-16 bg-yellow-400 rounded-xl flex items-center justify-center shadow-lg">
-                  <Shield className="w-6 h-6 sm:w-8 sm:h-8 text-slate-900" />
-                </div>
-                <div>
-                  <h1 className="text-2xl sm:text-3xl lg:text-4xl font-bold mb-1 sm:mb-2 text-white">
-                    {isAdmin ? 'Management Dashboard' : 'My Dashboard'}
-                  </h1>
-                  <p className="text-sm sm:text-lg lg:text-xl text-gray-200">
-                    {isAdmin ? 'Organization-wide analytics and insights' : 'Track your requests and approvals'}
-                  </p>
-                </div>
-              </div>
-              
-              <div className="flex flex-wrap gap-2 sm:gap-4 mt-4 sm:mt-8">
-                {quickActions.map((action, index) => (
-                  <Button
-                    key={index}
-                    onClick={action.action}
-                    className={`${action.color} text-white border-0 shadow-lg hover:shadow-xl transition-all duration-200`}
-                    size={window.innerWidth < 640 ? "sm" : "lg"}
-                  >
-                    <action.icon className="w-4 h-4 sm:w-5 sm:h-5 mr-1 sm:mr-2" />
-                    {action.label}
-                  </Button>
-                ))}
-              </div>
-            </div>
+    <div className="space-y-4 sm:space-y-6 max-w-7xl mx-auto p-3 sm:p-4" data-testid="dashboard">
+      <DashboardHero isAdmin={isAdmin} quickActions={quickActions} />
+      
+      <DashboardFiltersBar
+        isAdmin={isAdmin}
+        dateRange={dateRange}
+        customStartDate={customStartDate}
+        customEndDate={customEndDate}
+        showCustomDatePicker={showCustomDatePicker}
+        refreshing={refreshing}
+        onDateRangeChange={handleDateRangeChange}
+        onCustomStartDateChange={setCustomStartDate}
+        onCustomEndDateChange={setCustomEndDate}
+        onShowCustomDatePickerChange={setShowCustomDatePicker}
+        onApplyCustomDate={handleApplyCustomDateWrapper}
+        onResetCustomDates={resetCustomDates}
+        onRefresh={handleRefresh}
+      />
 
-            {/* Decorative Elements */}
-            <div className="hidden lg:flex items-center gap-4">
-              <div className="w-24 h-24 bg-yellow-400/20 rounded-full flex items-center justify-center">
-                <div className="w-16 h-16 bg-yellow-400/30 rounded-full flex items-center justify-center">
-                  <Zap className="w-8 h-8 text-yellow-400" />
-                </div>
-              </div>
-              <div className="w-16 h-16 bg-white/10 rounded-full flex items-center justify-center">
-                <Activity className="w-6 h-6 text-white/80" />
-              </div>
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Filters Bar */}
-      <Card className="shadow-md">
-        <CardContent className="p-4">
-          <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
-            <div className="flex items-center gap-2">
-              <Filter className="w-5 h-5 text-muted-foreground" />
-              <h3 className="font-semibold text-gray-900">Filters</h3>
-              {isAdmin && (
-                <Badge variant="outline" className="bg-purple-50 text-purple-700 border-purple-200">
-                  Management View
-                </Badge>
-              )}
-            </div>
-
-            <div className="flex flex-wrap items-center gap-3 w-full sm:w-auto">
-              {/* Date Range Filter */}
-              {isAdmin ? (
-                <div className="flex items-center gap-2">
-                  <CalendarIcon className="w-4 h-4 text-muted-foreground" />
-                  <Select value={dateRange} onValueChange={handleDateRangeChange}>
-                    <SelectTrigger className="w-[140px]">
-                      <SelectValue placeholder="Select period" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="today">Today</SelectItem>
-                      <SelectItem value="week">This Week</SelectItem>
-                      <SelectItem value="month">This Month</SelectItem>
-                      <SelectItem value="custom">Custom Range</SelectItem>
-                    </SelectContent>
-                  </Select>
-                  
-                  {/* Custom Date Range Picker */}
-                  {dateRange === 'custom' && (
-                    <Popover open={showCustomDatePicker} onOpenChange={setShowCustomDatePicker}>
-                      <PopoverTrigger asChild>
-                        <Button variant="outline" size="sm" className="gap-2">
-                          <CalendarIcon className="w-4 h-4" />
-                          {customStartDate && customEndDate 
-                            ? `${format(customStartDate, 'MMM d, yyyy')} - ${format(customEndDate, 'MMM d, yyyy')}`
-                            : 'Select dates'}
-                        </Button>
-                      </PopoverTrigger>
-                      <PopoverContent className="w-auto p-4" align="start" sideOffset={8}>
-                        <div className="space-y-4">
-                          <div className="space-y-3">
-                            <div className="space-y-2">
-                              <Label htmlFor="start-date" className="text-sm font-medium">Start Date</Label>
-                              <Input
-                                id="start-date"
-                                type="date"
-                                value={customStartDate ? format(customStartDate, 'yyyy-MM-dd') : ''}
-                                onChange={(e) => {
-                                  const date = e.target.value ? new Date(e.target.value) : undefined;
-                                  if (date) {
-                                    setCustomStartDate(date);
-                                    if (customEndDate && date > customEndDate) {
-                                      setCustomEndDate(date);
-                                    }
-                                  } else {
-                                    setCustomStartDate(undefined);
-                                  }
-                                }}
-                                max={format(new Date(), 'yyyy-MM-dd')}
-                                className="w-full"
-                              />
-                            </div>
-                            <div className="space-y-2">
-                              <Label htmlFor="end-date" className="text-sm font-medium">End Date</Label>
-                              <Input
-                                id="end-date"
-                                type="date"
-                                value={customEndDate ? format(customEndDate, 'yyyy-MM-dd') : ''}
-                                onChange={(e) => {
-                                  const date = e.target.value ? new Date(e.target.value) : undefined;
-                                  if (date) {
-                                    setCustomEndDate(date);
-                                    if (customStartDate && date < customStartDate) {
-                                      setCustomStartDate(date);
-                                    }
-                                  } else {
-                                    setCustomEndDate(undefined);
-                                  }
-                                }}
-                                min={customStartDate ? format(customStartDate, 'yyyy-MM-dd') : undefined}
-                                max={format(new Date(), 'yyyy-MM-dd')}
-                                className="w-full"
-                              />
-                            </div>
-                          </div>
-                          <div className="flex gap-2 pt-2 border-t">
-                            <Button 
-                              size="sm" 
-                              onClick={handleApplyCustomDate}
-                              disabled={!customStartDate || !customEndDate}
-                              className="flex-1 bg-re-green hover:bg-re-green/90"
-                            >
-                              Apply
-                            </Button>
-                            <Button 
-                              size="sm" 
-                              variant="outline"
-                              onClick={() => {
-                                setShowCustomDatePicker(false);
-                                setCustomStartDate(undefined);
-                                setCustomEndDate(undefined);
-                                setDateRange('month');
-                              }}
-                            >
-                              Cancel
-                            </Button>
-                          </div>
-                        </div>
-                      </PopoverContent>
-                    </Popover>
-                  )}
-                </div>
-              ) : (
-                <div className="flex items-center gap-2">
-                  <CalendarIcon className="w-4 h-4 text-muted-foreground" />
-                  <Select value={dateRange} onValueChange={(value) => setDateRange(value as DateRange)}>
-                    <SelectTrigger className="w-[140px]">
-                      <SelectValue placeholder="Select period" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="today">Today</SelectItem>
-                      <SelectItem value="week">This Week</SelectItem>
-                      <SelectItem value="month">This Month</SelectItem>
-                    </SelectContent>
-                  </Select>
-                </div>
-              )}
-
-              <Separator orientation="vertical" className="h-6 hidden sm:block" />
-
-              {/* Refresh Button */}
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={handleRefresh}
-                disabled={refreshing}
-                className="gap-2 min-w-[110px]"
-              >
-                <RefreshCw className={`w-4 h-4 ${refreshing ? 'animate-spin' : ''}`} />
-                <span className="inline-block w-[60px] text-center">
-                  {refreshing ? 'Refreshing...' : 'Refresh'}
-                </span>
-              </Button>
-
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* ADMIN DASHBOARD - Comprehensive View */}
+      {/* KPI Cards Section */}
       {isAdmin ? (
-        <>
-          {/* Admin Stats Cards */}
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6" data-testid="admin-kpi-cards">
-            {/* Total Requests */}
-            <KPICard
-              title="Total Requests"
-              value={kpis?.requestVolume.totalRequests || 0}
-              icon={FileText}
-              iconBgColor="bg-blue-50"
-              iconColor="text-blue-600"
-              testId="kpi-total-requests"
-              onClick={() => handleKPIClick({
-                dateRange: dateRange,
-                startDate: customStartDate,
-                endDate: customEndDate
-              })}
-            >
-              {/* Row 1: Approved and Rejected */}
-              <div className="grid grid-cols-2 gap-2 mb-2">
-                <StatCard 
-                  label="Approved" 
-                  value={kpis?.requestVolume.approvedRequests || 0} 
-                  bgColor="bg-green-50" 
-                  textColor="text-green-600"
-                  testId="stat-approved"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    handleKPIClick({
-                      status: 'approved',
-                      dateRange: dateRange,
-                      startDate: customStartDate,
-                      endDate: customEndDate
-                    });
-                  }}
-                />
-                <StatCard 
-                  label="Rejected" 
-                  value={kpis?.requestVolume.rejectedRequests || 0} 
-                  bgColor="bg-red-50" 
-                  textColor="text-red-600"
-                  testId="stat-rejected"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    handleKPIClick({
-                      status: 'rejected',
-                      dateRange: dateRange,
-                      startDate: customStartDate,
-                      endDate: customEndDate
-                    });
-                  }}
-                />
-              </div>
-              {/* Row 2: Pending and Closed */}
-              <div className="grid grid-cols-2 gap-2">
-                <StatCard 
-                  label="Pending" 
-                  value={kpis?.requestVolume.openRequests || 0} 
-                  bgColor="bg-orange-50" 
-                  textColor="text-orange-600"
-                  testId="stat-pending"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    handleKPIClick({
-                      status: 'pending',
-                      dateRange: dateRange,
-                      startDate: customStartDate,
-                      endDate: customEndDate
-                    });
-                  }}
-                />
-                <StatCard 
-                  label="Closed" 
-                  value={kpis?.requestVolume.closedRequests || 0} 
-                  bgColor="bg-gray-50" 
-                  textColor="text-gray-600"
-                  testId="stat-closed"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    handleKPIClick({
-                      status: 'closed',
-                      dateRange: dateRange,
-                      startDate: customStartDate,
-                      endDate: customEndDate
-                    });
-                  }}
-                />
-              </div>
-            </KPICard>
-
-            {/* SLA Compliance */}
-            <KPICard
-              title="SLA Compliance"
-              value={`${kpis?.tatEfficiency.avgTATCompliance || 0}%`}
-              icon={Target}
-              iconBgColor="bg-green-50"
-              iconColor="text-green-600"
-              testId="kpi-sla-compliance"
-              onClick={() => handleKPIClick({
-                dateRange: dateRange,
-                startDate: customStartDate,
-                endDate: customEndDate
-              })}
-            >
-              <Progress value={kpis?.tatEfficiency.avgTATCompliance || 0} className="h-2 mb-4" data-testid="sla-progress-bar" />
-              <div className="grid grid-cols-2 gap-2">
-                <StatCard 
-                  label="Compliant" 
-                  value={kpis?.tatEfficiency.compliantWorkflows || 0} 
-                  bgColor="bg-green-50" 
-                  textColor="text-green-600"
-                  testId="stat-compliant"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    handleKPIClick({
-                      slaCompliance: 'compliant',
-                      dateRange: dateRange,
-                      startDate: customStartDate,
-                      endDate: customEndDate
-                    });
-                  }}
-                />
-                <StatCard 
-                  label="Breached" 
-                  value={kpis?.tatEfficiency.delayedWorkflows || 0} 
-                  bgColor="bg-red-50" 
-                  textColor="text-red-600"
-                  testId="stat-breached"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    handleKPIClick({
-                      slaCompliance: 'breached',
-                      dateRange: dateRange,
-                      startDate: customStartDate,
-                      endDate: customEndDate
-                    });
-                  }}
-                />
-              </div>
-            </KPICard>
-
-            {/* Avg Cycle Time */}
-            <KPICard
-              title="Avg Cycle Time"
-              value={kpis?.tatEfficiency.avgCycleTimeHours ? formatHoursMinutes(kpis.tatEfficiency.avgCycleTimeHours) : '0h'}
-              icon={Clock}
-              iconBgColor="bg-purple-50"
-              iconColor="text-purple-600"
-              subtitle={`≈ ${kpis?.tatEfficiency.avgCycleTimeDays.toFixed(1) || 0} working days`}
-              testId="kpi-avg-cycle-time"
-              onClick={() => handleKPIClick({
-                dateRange: dateRange,
-                startDate: customStartDate,
-                endDate: customEndDate
-              })}
-            >
-              <div className="grid grid-cols-2 gap-2">
-                <StatCard 
-                  label="Express" 
-                  value={(() => {
-                    const express = priorityDistribution.find(p => p.priority === 'express');
-                    const hours = express ? Number(express.avgCycleTimeHours) : 0;
-                    return hours > 0 ? formatHoursMinutes(hours) : 'N/A';
-                  })()} 
-                  bgColor="bg-orange-50" 
-                  textColor="text-orange-600"
-                  testId="stat-express-time"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    handleKPIClick({
-                      priority: 'express',
-                      dateRange: dateRange,
-                      startDate: customStartDate,
-                      endDate: customEndDate
-                    });
-                  }}
-                />
-                <StatCard 
-                  label="Standard" 
-                  value={(() => {
-                    const standard = priorityDistribution.find(p => p.priority === 'standard');
-                    const hours = standard ? Number(standard.avgCycleTimeHours) : 0;
-                    return hours > 0 ? formatHoursMinutes(hours) : 'N/A';
-                  })()} 
-                  bgColor="bg-blue-50" 
-                  textColor="text-blue-600"
-                  testId="stat-standard-time"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    handleKPIClick({
-                      priority: 'standard',
-                      dateRange: dateRange,
-                      startDate: customStartDate,
-                      endDate: customEndDate
-                    });
-                  }}
-                />
-              </div>
-            </KPICard>
-          </div>
-        </>
+        <AdminKPICards
+          kpis={kpis}
+          priorityDistribution={priorityDistribution}
+          dateRange={dateRange}
+          customStartDate={customStartDate}
+          customEndDate={customEndDate}
+          onKPIClick={handleKPIClick}
+        />
       ) : (
-        <>
-          {/* NORMAL USER DASHBOARD - Personal View */}
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6" data-testid="user-kpi-cards">
-            {/* My Requests Created */}
-            <KPICard
-              title="My Requests (Submitted)"
-              value={kpis?.requestVolume.totalRequests || 0}
-              icon={FileText}
-              iconBgColor="bg-blue-50"
-              iconColor="text-blue-600"
-              testId="kpi-my-requests"
-              onClick={() => handleKPIClick({
-                dateRange: dateRange,
-                startDate: customStartDate,
-                endDate: customEndDate
-              })}
-            >
-              <div className="grid grid-cols-3 gap-1.5">
-                <StatCard 
-                  label="Approved" 
-                  value={kpis?.requestVolume.approvedRequests || 0} 
-                  bgColor="bg-green-50" 
-                  textColor="text-green-600" 
-                  testId="stat-user-approved"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    handleKPIClick({
-                      status: 'approved',
-                      dateRange: dateRange,
-                      startDate: customStartDate,
-                      endDate: customEndDate
-                    });
-                  }}
-                />
-                <StatCard 
-                  label="Pending" 
-                  value={kpis?.requestVolume.openRequests || 0} 
-                  bgColor="bg-orange-50" 
-                  textColor="text-orange-600" 
-                  testId="stat-user-pending"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    handleKPIClick({
-                      status: 'pending',
-                      dateRange: dateRange,
-                      startDate: customStartDate,
-                      endDate: customEndDate
-                    });
-                  }}
-                />
-                <StatCard 
-                  label="Draft" 
-                  value={kpis?.requestVolume.draftRequests || 0} 
-                  bgColor="bg-gray-50" 
-                  textColor="text-gray-600" 
-                  testId="stat-user-draft"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    handleKPIClick({
-                      status: 'draft',
-                      dateRange: dateRange,
-                      startDate: customStartDate,
-                      endDate: customEndDate
-                    });
-                  }}
-                />
-              </div>
-            </KPICard>
-
-            {/* My Pending Actions */}
-            <KPICard
-              title="Awaiting My Approval"
-              value={kpis?.approverLoad.pendingActions || 0}
-              icon={Clock}
-              iconBgColor="bg-orange-50"
-              iconColor="text-orange-600"
-              subtitle="at current level"
-              testId="kpi-pending-actions"
-            >
-              <div className="grid grid-cols-2 gap-2">
-                <StatCard label="Approved Today" value={kpis?.approverLoad.completedToday || 0} bgColor="bg-blue-50" textColor="text-blue-600" testId="stat-today" />
-                <StatCard label="This Week" value={kpis?.approverLoad.completedThisWeek || 0} bgColor="bg-green-50" textColor="text-green-600" testId="stat-week" />
-              </div>
-            </KPICard>
-
-            {/* Critical Alerts */}
-            <KPICard
-              title="Critical Alerts"
-              value={criticalRequests.length}
-              icon={Flame}
-              iconBgColor="bg-red-50"
-              iconColor="text-red-600"
-              testId="kpi-user-critical"
-            >
-              <div className="grid grid-cols-2 gap-2">
-                <StatCard label="Breached" value={criticalRequests.filter(r => r.breachCount > 0).length} bgColor="bg-orange-50" textColor="text-red-600" testId="stat-user-breached" />
-                <StatCard label="Warning" value={criticalRequests.filter(r => r.breachCount === 0).length} bgColor="bg-yellow-50" textColor="text-orange-600" testId="stat-user-warning" />
-              </div>
-            </KPICard>
-
-            {/* My Success Rate */}
-            <KPICard
-              title="Success Rate"
-              value={`${kpis && kpis.requestVolume.totalRequests > 0 ? ((kpis.requestVolume.approvedRequests / kpis.requestVolume.totalRequests) * 100).toFixed(0) : 0}%`}
-              icon={CheckCircle}
-              iconBgColor="bg-green-50"
-              iconColor="text-green-600"
-              subtitle={`of ${kpis?.requestVolume.totalRequests || 0} requests approved`}
-              testId="kpi-success-rate"
-            >
-              <div className="flex justify-between items-center text-xs mt-2">
-                <span className="text-muted-foreground">Rejected</span>
-                <span className="font-semibold text-red-600">{kpis?.requestVolume.rejectedRequests || 0}</span>
-              </div>
-            </KPICard>
-      </div>
-        </>
+        <UserKPICards
+          kpis={kpis}
+          criticalRequests={criticalRequests}
+          dateRange={dateRange}
+          customStartDate={customStartDate}
+          customEndDate={customEndDate}
+          onKPIClick={handleKPIClick}
+        />
       )}
 
+      {/* Alerts and Activity Section */}
       <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-6" style={{ height: '60vh', minHeight: '480px' }} data-testid="dashboard-alerts-activity">
-        {/* Critical Alerts */}
-        <Card className="lg:col-span-2 shadow-md hover:shadow-lg transition-shadow flex flex-col overflow-hidden" style={{ height: '100%' }} data-testid="critical-alerts-section">
-          <CardHeader className="pb-3 sm:pb-4 flex-shrink-0">
-            <div className="flex items-center justify-between">
-              <div className="flex items-center gap-2 sm:gap-3">
-                <div className="p-2 sm:p-3 bg-red-100 rounded-lg">
-                  <Flame className="h-4 w-4 sm:h-5 sm:w-5 text-red-600" />
-                </div>
-                <div>
-                  <CardTitle className="text-base sm:text-lg text-gray-900">Critical Alerts</CardTitle>
-                  <CardDescription className="text-xs sm:text-sm text-gray-600">
-                    {isAdmin ? 'Organization-wide' : 'My requests'}
-                  </CardDescription>
-                </div>
-              </div>
-              <Badge 
-                variant="destructive" 
-                className={`font-semibold text-xs sm:text-sm ${criticalTotalRecords > 0 ? 'animate-pulse' : ''}`}
-                data-testid="critical-count-badge"
-              >
-                {criticalTotalRecords}
-              </Badge>
-            </div>
-          </CardHeader>
-          <CardContent className="overflow-y-auto flex-1 p-4" style={{ maxHeight: criticalTotalPages > 1 ? 'calc(100% - 140px)' : 'calc(100% - 80px)' }}>
-            <div className="space-y-3 sm:space-y-4">
-            {breachedRequests.length === 0 ? (
-                <div className="text-center py-6 sm:py-8 text-muted-foreground" data-testid="no-critical-alerts">
-                  <CheckCircle className="w-10 h-10 sm:w-12 sm:h-12 mx-auto mb-2 text-green-500" />
-                  <p className="text-sm">No critical alerts</p>
-                  <p className="text-xs">All requests are within TAT</p>
-                </div>
-              ) : (
-                breachedRequests.map((request) => (
-                  <CriticalAlertCard
-                    key={request.requestId}
-                    alert={request}
-                    onNavigate={(reqNum) => onNavigate?.(`request/${reqNum}`)}
-                    testId="dashboard-critical-alert"
-                  />
-                ))
-              )}
-            </div>
-          </CardContent>
-          
-          {/* Pagination - Outside scrollable area, compact design */}
-          {criticalTotalPages > 1 && breachedRequests.length > 0 && (
-            <div className="border-t bg-gray-50 px-4 py-2 flex-shrink-0">
-              <div className="flex flex-col gap-2">
-                <div className="text-xs text-muted-foreground text-center">
-                  Page {criticalPage} of {criticalTotalPages} ({criticalTotalRecords} total)
-                </div>
-                <div className="flex items-center justify-center gap-1 flex-wrap">
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    onClick={() => handleCriticalPageChange(criticalPage - 1)}
-                    disabled={criticalPage === 1}
-                    className="h-7 w-7 p-0"
-                  >
-                    <ArrowRight className="h-3 w-3 rotate-180" />
-                  </Button>
-                  
-                  {(() => {
-                    const pages = [];
-                    const maxPagesToShow = 3;
-                    let startPage = Math.max(1, criticalPage - Math.floor(maxPagesToShow / 2));
-                    let endPage = Math.min(criticalTotalPages, 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.map((pageNum) => (
-                      <Button
-                        key={pageNum}
-                        variant={pageNum === criticalPage ? "default" : "outline"}
-                        size="sm"
-                        onClick={() => handleCriticalPageChange(pageNum)}
-                        className={`h-7 w-7 p-0 text-xs ${pageNum === criticalPage ? 'bg-red-600 text-white hover:bg-red-700' : ''}`}
-                      >
-                        {pageNum}
-                      </Button>
-                    ));
-                  })()}
-                  
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    onClick={() => handleCriticalPageChange(criticalPage + 1)}
-                    disabled={criticalPage === criticalTotalPages}
-                    className="h-7 w-7 p-0"
-                  >
-                    <ArrowRight className="h-3 w-3" />
-                  </Button>
-                </div>
-              </div>
-            </div>
-          )}
-        </Card>
-
-        {/* Recent Activity */}
-        <Card className="lg:col-span-1 shadow-md hover:shadow-lg transition-shadow flex flex-col overflow-hidden" style={{ height: '100%' }}>
-          <CardHeader className="pb-3 sm:pb-4 flex-shrink-0">
-            <div className="flex items-center justify-between gap-2">
-              <div className="flex items-center gap-2 sm:gap-3 flex-1 min-w-0">
-                <div className="p-2 sm:p-3 bg-blue-100 rounded-lg">
-                  <Activity className="h-4 w-4 sm:h-5 sm:w-5 text-blue-600" />
-                </div>
-                <div className="min-w-0">
-                  <CardTitle className="text-base sm:text-lg text-gray-900">Recent Activity</CardTitle>
-                  <CardDescription className="text-xs sm:text-sm text-gray-600 truncate">
-                    {isAdmin ? 'All workflow updates' : 'My workflow updates'}
-                  </CardDescription>
-                </div>
-              </div>
-              <Button 
-                variant="ghost" 
-                size="sm" 
-                className="text-blue-600 hover:bg-blue-50 font-medium flex-shrink-0 h-8 sm:h-9 px-2 sm:px-3 sm:min-w-[100px]"
-                onClick={handleRefresh}
-                disabled={refreshing}
-              >
-                <RefreshCw className={`w-3 h-3 sm:w-4 sm:h-4 ${refreshing ? 'animate-spin' : ''}`} />
-                <span className="hidden sm:inline ml-2 sm:w-[60px] sm:text-center">
-                  {refreshing ? 'Refreshing...' : 'Refresh'}
-                </span>
-              </Button>
-            </div>
-          </CardHeader>
-          <CardContent className="overflow-y-auto flex-1 p-4" style={{ maxHeight: activityTotalPages > 1 ? 'calc(100% - 140px)' : 'calc(100% - 80px)' }}>
-            <div className="space-y-2 sm:space-y-3">
-              {recentActivity.length === 0 ? (
-                <div className="text-center py-6 sm:py-8 text-muted-foreground" data-testid="no-recent-activity">
-                  <Activity className="w-10 h-10 sm:w-12 sm:h-12 mx-auto mb-2 text-gray-400" />
-                  <p className="text-sm">No recent activity</p>
-                  <p className="text-xs">Activity will appear here once requests are processed</p>
-                </div>
-              ) : (
-                recentActivity.map((activity) => (
-                  <ActivityFeedItem
-                    key={activity.activityId}
-                    activity={activity}
-                    currentUserId={(user as any)?.userId}
-                    currentUserDisplayName={(user as any)?.displayName}
-                    currentUserEmail={(user as any)?.email}
-                    onNavigate={(reqNum) => onNavigate?.(`request/${reqNum}`)}
-                    testId="dashboard-activity"
-                  />
-                ))
-              )}
-            </div>
-          </CardContent>
-          
-          {/* Pagination - Outside scrollable area, compact design */}
-          {activityTotalPages > 1 && recentActivity.length > 0 && (
-            <div className="border-t bg-gray-50 px-4 py-2 flex-shrink-0">
-              <div className="flex flex-col gap-2">
-                <div className="text-xs text-muted-foreground text-center">
-                  Page {activityPage} of {activityTotalPages} ({activityTotalRecords} total)
-                </div>
-                <div className="flex items-center justify-center gap-1 flex-wrap">
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    onClick={() => handleActivityPageChange(activityPage - 1)}
-                    disabled={activityPage === 1}
-                    className="h-7 w-7 p-0"
-                  >
-                    <ArrowRight className="h-3 w-3 rotate-180" />
-                  </Button>
-                  
-                  {getActivityPageNumbers().map((pageNum) => (
-                    <Button
-                      key={pageNum}
-                      variant={pageNum === activityPage ? "default" : "outline"}
-                      size="sm"
-                      onClick={() => handleActivityPageChange(pageNum)}
-                      className={`h-7 w-7 p-0 text-xs ${pageNum === activityPage ? 'bg-blue-600 text-white hover:bg-blue-700' : ''}`}
-                    >
-                      {pageNum}
-                    </Button>
-                  ))}
-                  
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    onClick={() => handleActivityPageChange(activityPage + 1)}
-                    disabled={activityPage === activityTotalPages}
-                    className="h-7 w-7 p-0"
-                  >
-                    <ArrowRight className="h-3 w-3" />
-                  </Button>
-                </div>
-              </div>
-            </div>
-          )}
-        </Card>
+        <CriticalAlertsSection
+          isAdmin={isAdmin}
+          breachedRequests={breachedRequests}
+          pagination={criticalPagination}
+          onPageChange={handleCriticalPageChangeWrapper}
+          onNavigate={onNavigate}
+        />
+        <RecentActivitySection
+          isAdmin={isAdmin}
+          recentActivity={recentActivity}
+          pagination={activityPagination}
+          refreshing={refreshing}
+          onPageChange={handleActivityPageChangeWrapper}
+          onRefresh={handleRefresh}
+          onNavigate={onNavigate}
+          currentUserId={(user as any)?.userId}
+          currentUserDisplayName={(user as any)?.displayName}
+          currentUserEmail={(user as any)?.email}
+        />
       </div>
 
       {/* ADMIN - Additional Analytics */}
       {isAdmin && kpis && (
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-6">
-          {/* Left Side: Active Levels and Collaboration stacked - 1/3 width */}
-          <div className="flex flex-col gap-4 sm:gap-6 lg:col-span-1">
-            {/* Active Levels */}
-            <Card className="shadow-md hover:shadow-lg transition-shadow flex-1">
-              <CardHeader className="pb-3">
-                <div className="flex items-center gap-2">
-                  <div className="p-2 bg-blue-100 rounded-lg">
-                    <Activity className="h-4 w-4 text-blue-600" />
-                  </div>
-                  <CardTitle className="text-sm">Active Levels</CardTitle>
-                </div>
-              </CardHeader>
-              <CardContent>
-                <div className="space-y-3">
-                  <div className="flex items-baseline gap-2">
-                    <span className="text-2xl sm:text-3xl font-bold text-blue-600">{upcomingDeadlines.length}</span>
-                    <span className="text-xs text-muted-foreground">levels</span>
-                  </div>
-                  <Separator />
-                  <div className="space-y-1 text-xs">
-                    <div className="flex justify-between items-center">
-                      <span className="text-muted-foreground">Avg Time/Level</span>
-                      <span className="font-semibold">
-                        {upcomingDeadlines.length > 0 
-                          ? (kpis.tatEfficiency.avgCycleTimeHours / upcomingDeadlines.length).toFixed(1) 
-                          : '0'}h
-                      </span>
-                    </div>
-                    <div className="flex justify-between items-center">
-                      <span className="text-muted-foreground">At Risk</span>
-                      <span className="font-semibold text-red-600">
-                        {criticalRequests.filter(r => r.breachCount > 0).length}
-                      </span>
-                    </div>
-                  </div>
-                </div>
-              </CardContent>
-            </Card>
-
-            {/* Collaboration */}
-            <Card className="shadow-md hover:shadow-lg transition-shadow flex-1">
-              <CardHeader className="pb-3">
-                <div className="flex items-center gap-2">
-                  <div className="p-2 bg-indigo-100 rounded-lg">
-                    <MessageSquare className="h-4 w-4 text-indigo-600" />
-                  </div>
-                  <CardTitle className="text-sm">Collaboration</CardTitle>
-                </div>
-              </CardHeader>
-              <CardContent>
-                <div className="space-y-3">
-                  <div className="grid grid-cols-2 gap-2">
-                    <div className="text-center p-2 bg-indigo-50 rounded">
-                      <p className="text-xs text-muted-foreground">Notes</p>
-                      <p className="text-lg sm:text-xl font-bold text-indigo-600">{kpis.engagement.workNotesAdded}</p>
-                    </div>
-                    <div className="text-center p-2 bg-purple-50 rounded">
-                      <p className="text-xs text-muted-foreground">Files</p>
-                      <p className="text-lg sm:text-xl font-bold text-purple-600">{kpis.engagement.attachmentsUploaded}</p>
-                    </div>
-                  </div>
-                  <Separator />
-                  <div className="text-xs text-muted-foreground text-center">
-                    {kpis.requestVolume.totalRequests > 0 
-                      ? (kpis.engagement.workNotesAdded / kpis.requestVolume.totalRequests).toFixed(1)
-                      : '0'} avg notes per request
-                  </div>
-                </div>
-              </CardContent>
-            </Card>
-          </div>
-
-          {/* Right Side: Department-wise Workflow Summary - Full height - 2/3 width */}
-          {departmentStats.length > 0 && (
-            <Card className="shadow-md hover:shadow-lg transition-shadow lg:col-span-2">
-              <CardHeader>
-                <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
-                  <div className="flex items-center gap-3">
-                    <div className="bg-blue-50 p-2 sm:p-3 rounded-lg">
-                      <PieChart className="h-5 w-5 sm:h-6 sm:w-6 text-blue-600" />
-                    </div>
-                    <div>
-                      <CardTitle className="text-base sm:text-lg lg:text-xl">Department-wise Workflow Summary</CardTitle>
-                      <CardDescription className="text-xs sm:text-sm">
-                        Workflow distribution across departments
-                      </CardDescription>
-                    </div>
-                  </div>
-                  <Button 
-                    variant="outline" 
-                    size="sm" 
-                    className="gap-2 self-start sm:self-auto"
-                    onClick={exportDepartmentStatsToCSV}
-                    disabled={exportingDeptStats}
-                  >
-                    <Download className={`w-3 h-3 sm:w-4 sm:h-4 ${exportingDeptStats ? 'animate-pulse' : ''}`} />
-                    <span className="text-xs sm:text-sm">
-                      {exportingDeptStats ? 'Exporting...' : 'Export'}
-                    </span>
-                  </Button>
-                </div>
-              </CardHeader>
-              <CardContent>
-                <ResponsiveContainer width="100%" height={400}>
-                  <BarChart data={departmentStats}>
-                    <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
-                    <XAxis 
-                      dataKey="department" 
-                      stroke="#999" 
-                      tick={(props) => {
-                        const { x, y, payload } = props;
-                        return (
-                          <g transform={`translate(${x},${y})`}>
-                            <text
-                              x={0}
-                              y={0}
-                              dy={16}
-                              textAnchor="middle"
-                              fill="#999"
-                              fontSize={11}
-                              className="cursor-pointer hover:text-blue-600 hover:underline"
-                              onClick={() => {
-                                handleKPIClick({
-                                  department: payload.value,
-                                  dateRange: dateRange,
-                                  startDate: customStartDate,
-                                  endDate: customEndDate
-                                });
-                              }}
-                            >
-                              {payload.value}
-                            </text>
-                          </g>
-                        );
-                      }}
-                    />
-                    <YAxis 
-                      stroke="#999" 
-                      tick={{ fontSize: 11 }}
-                    />
-                    <Tooltip 
-                      contentStyle={{ 
-                        backgroundColor: '#ffffff',
-                        border: '1px solid #e5e7eb',
-                        borderRadius: '6px',
-                        fontSize: '12px'
-                      }}
-                    />
-                    <Legend 
-                      verticalAlign="bottom"
-                      height={36}
-                      iconType="square"
-                      wrapperStyle={{ fontSize: '12px', paddingTop: '10px' }}
-                    />
-                    <Bar dataKey="approved" fill="#10b981" name="Approved" />
-                    <Bar dataKey="inProgress" fill="#f59e0b" name="Pending" />
-                    <Bar dataKey="rejected" fill="#ef4444" name="Rejected" />
-                  </BarChart>
-                </ResponsiveContainer>
-              </CardContent>
-            </Card>
-          )}
-        </div>
+        <AdminAnalyticsSection
+          kpis={kpis}
+          upcomingDeadlines={upcomingDeadlines}
+          criticalRequests={criticalRequests}
+          departmentStats={departmentStats}
+          dateRange={dateRange}
+          customStartDate={customStartDate}
+          customEndDate={customEndDate}
+          exportingDeptStats={exportingDeptStats}
+          onKPIClick={handleKPIClick}
+          onExportDepartmentStats={handleExportDepartmentStats}
+        />
       )}
 
       {/* NORMAL USER - Personal Metrics */}
-      {!isAdmin && kpis && (
-        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
-          {/* Collaboration Activity */}
-          <Card className="shadow-md hover:shadow-lg transition-shadow">
-            <CardHeader className="pb-3">
-              <div className="flex items-center gap-2">
-                <div className="p-2 bg-indigo-100 rounded-lg">
-                  <MessageSquare className="h-4 w-4 text-indigo-600" />
-                </div>
-                <CardTitle className="text-sm">My Activity</CardTitle>
-              </div>
-            </CardHeader>
-            <CardContent>
-              <div className="space-y-3">
-                <div className="grid grid-cols-2 gap-2">
-                  <div className="text-center p-3 bg-indigo-50 rounded">
-                    <p className="text-xs text-muted-foreground mb-1">Work Notes</p>
-                    <p className="text-xl sm:text-2xl font-bold text-indigo-600">{kpis.engagement.workNotesAdded}</p>
-                  </div>
-                  <div className="text-center p-3 bg-purple-50 rounded">
-                    <p className="text-xs text-muted-foreground mb-1">Attachments</p>
-                    <p className="text-xl sm:text-2xl font-bold text-purple-600">{kpis.engagement.attachmentsUploaded}</p>
-                  </div>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-
-          {/* Avg Response Time */}
-          <Card className="shadow-md hover:shadow-lg transition-shadow">
-            <CardHeader className="pb-3">
-              <div className="flex items-center gap-2">
-                <div className="p-2 bg-purple-100 rounded-lg">
-                  <Clock className="h-4 w-4 text-purple-600" />
-                </div>
-                <CardTitle className="text-sm">Avg Response Time</CardTitle>
-              </div>
-            </CardHeader>
-            <CardContent>
-              <div className="space-y-3">
-                <div className="flex items-baseline gap-2">
-                  <span className="text-2xl sm:text-3xl font-bold text-purple-600">
-                    {formatHoursMinutes(kpis.tatEfficiency.avgCycleTimeHours)}
-                  </span>
-                </div>
-                <Separator />
-                <div className="text-xs text-muted-foreground text-center">
-                  ≈ {kpis.tatEfficiency.avgCycleTimeDays.toFixed(1)} working days
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-        </div>
-      )}
-
+      {!isAdmin && kpis && <UserMetricsSection kpis={kpis} />}
 
       {/* Priority Distribution Report */}
       {isAdmin && priorityDistribution.length > 0 && (
-        <Card className="shadow-md hover:shadow-lg transition-shadow">
-          <CardHeader className="pb-3">
-            <div className="flex items-center gap-3">
-              <div className="bg-green-50 p-2 sm:p-3 rounded-lg">
-                <Target className="h-5 w-5 sm:h-6 sm:w-6 text-green-600" />
-              </div>
-              <div>
-                <CardTitle className="text-base sm:text-lg lg:text-xl">Priority Distribution Report</CardTitle>
-                <CardDescription className="text-xs sm:text-sm">Express vs Standard workflow analysis</CardDescription>
-              </div>
-            </div>
-          </CardHeader>
-          <CardContent>
-            {/* Summary Cards */}
-            <div className="grid grid-cols-2 gap-4 mb-6">
-              {priorityDistribution.map((priority, idx) => {
-                const avgCycleTime = Number(priority.avgCycleTimeHours) || 0;
-                const isExpress = priority.priority === 'express';
-                const bgColor = isExpress ? 'bg-red-50' : 'bg-blue-50';
-                const dotColor = isExpress ? 'bg-red-500' : 'bg-blue-500';
-                
-                return (
-                  <div key={idx} className={`${bgColor} p-4 rounded-lg`}>
-                    <div className="flex items-center gap-2 mb-2">
-                      <div className={`w-3 h-3 ${dotColor} rounded-full`}></div>
-                      <span className="text-sm text-gray-600 capitalize">{priority.priority}</span>
-                    </div>
-                    <div className="text-2xl sm:text-3xl font-bold text-gray-900 mb-1">
-                      {priority.totalCount}
-                    </div>
-                    <div className="text-xs text-gray-500">
-                      Avg: {formatHoursMinutes(avgCycleTime)} cycle
-                    </div>
-                  </div>
-                );
-              })}
-            </div>
-
-            {/* Pie Chart */}
-            <div className="flex justify-center">
-              <ResponsiveContainer width="100%" height={300}>
-                <RechartsPieChart>
-                  <Pie
-                    data={priorityDistribution.map(p => ({
-                      name: p.priority.charAt(0).toUpperCase() + p.priority.slice(1),
-                      value: p.totalCount,
-                      priority: p.priority,
-                      percentage: Math.round((p.totalCount / priorityDistribution.reduce((sum, item) => sum + item.totalCount, 0)) * 100)
-                    }))}
-                    cx="50%"
-                    cy="50%"
-                    labelLine={true}
-                    label={({ cx, cy, midAngle, outerRadius, name, percentage }) => {
-                      const RADIAN = Math.PI / 180;
-                      // Position label outside the pie with more distance for 50-50 case
-                      const radius = outerRadius + 35;
-                      const x = cx + radius * Math.cos(-midAngle * RADIAN);
-                      const y = cy + radius * Math.sin(-midAngle * RADIAN);
-                      
-                      return (
-                        <text
-                          x={x}
-                          y={y}
-                          fill="#1f2937"
-                          textAnchor={x > cx ? 'start' : 'end'}
-                          dominantBaseline="central"
-                          style={{ 
-                            fontSize: '14px', 
-                            fontWeight: '600',
-                            pointerEvents: 'none'
-                          }}
-                        >
-                          {`${name}: ${percentage}%`}
-                        </text>
-                      );
-                    }}
-                    outerRadius={90}
-                    fill="#8884d8"
-                    dataKey="value"
-                    onClick={(data: any) => {
-                      if (data && data.priority && onNavigate) {
-                        // Navigate to requests page with priority filter pre-filled
-                        onNavigate(`requests?priority=${data.priority}`);
-                      }
-                    }}
-                    style={{ cursor: 'pointer' }}
-                  >
-                    {priorityDistribution.map((priority, index) => (
-                      <Cell 
-                        key={`cell-${index}`} 
-                        fill={priority.priority === 'express' ? '#ef4444' : '#3b82f6'}
-                        style={{ cursor: 'pointer' }}
-                      />
-                    ))}
-                  </Pie>
-                  <Tooltip 
-                    contentStyle={{ 
-                      backgroundColor: '#ffffff',
-                      border: '1px solid #e5e7eb',
-                      borderRadius: '6px',
-                      fontSize: '12px'
-                    }}
-                    formatter={(value: any, _name: any, props: any) => {
-                      const priority = props.payload?.priority || '';
-                      return [
-                        `${value} requests`,
-                        `Click for ${priority}`
-                      ];
-                    }}
-                  />
-                </RechartsPieChart>
-              </ResponsiveContainer>
-            </div>
-          </CardContent>
-        </Card>
+        <PriorityDistributionReport
+          priorityDistribution={priorityDistribution}
+          onNavigate={onNavigate}
+        />
       )}
 
       {/* TAT Breach Report */}
       {isAdmin && breachedRequests.length > 0 && (
-        <Card className="shadow-md hover:shadow-lg transition-shadow">
-          <CardHeader>
-            <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
-              <div className="flex items-center gap-3">
-                <div className="bg-red-50 p-2 sm:p-3 rounded-lg">
-                  <AlertTriangle className="h-5 w-5 sm:h-6 sm:w-6 text-red-600" />
-                </div>
-                <div>
-                  <CardTitle className="text-base sm:text-lg lg:text-xl">TAT Breach Report</CardTitle>
-                  <CardDescription className="text-xs sm:text-sm">
-                    Requests that breached defined turnaround time
-                  </CardDescription>
-                </div>
-              </div>
-              <Badge variant="destructive" className="text-sm font-medium self-start sm:self-auto">
-                {breachedRequests.length} {breachedRequests.length === 1 ? 'Breach' : 'Breaches'}
-              </Badge>
-            </div>
-          </CardHeader>
-          <CardContent>
-            <div className="overflow-x-auto -mx-4 sm:mx-0">
-              <table className="w-full min-w-[1000px]">
-                <thead>
-                  <tr className="border-b border-gray-200 bg-gray-50">
-                    <th className="text-left py-3 px-4 text-sm font-medium text-gray-700">Request ID</th>
-                    <th className="text-left py-3 px-4 text-sm font-medium text-gray-700">Title</th>
-                    <th className="text-left py-3 px-4 text-sm font-medium text-gray-700">Department</th>
-                    <th className="text-left py-3 px-4 text-sm font-medium text-gray-700">Approver</th>
-                    <th className="text-left py-3 px-4 text-sm font-medium text-gray-700">Level</th>
-                    <th className="text-left py-3 px-4 text-sm font-medium text-gray-700">Breach Time</th>
-                    <th className="text-left py-3 px-4 text-sm font-medium text-gray-700 min-w-[200px] max-w-[300px]">Reason</th>
-                    <th className="text-left py-3 px-4 text-sm font-medium text-gray-700">Priority</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {breachedRequests.map((req: any, idx) => {
-                    const breachTime = req.breachTime || 0;
-                    const formatBreachTime = (hours: number) => {
-                      if (hours <= 0) return 'Just breached';
-                      if (hours < 1) return `${Math.round(hours * 60)} min`;
-                      if (hours < 24) return formatHoursMinutes(hours);
-                      const days = Math.floor(hours / 24);
-                      const remainingHours = hours % 24;
-                      return remainingHours > 0 ? `${days}d ${formatHoursMinutes(remainingHours)}` : `${days}d`;
-                    };
-                    
-                    return (
-                      <tr key={idx} className="border-b border-gray-100 hover:bg-gray-50 transition-colors">
-                        <td className="py-3 px-4 text-sm font-medium text-blue-600 cursor-pointer hover:underline"
-                            onClick={() => onNavigate?.(`request/${req.requestNumber}`)}>
-                          {req.requestNumber}
-                        </td>
-                        <td className="py-3 px-4 text-sm text-gray-900 max-w-xs truncate" title={req.title}>
-                          {req.title}
-                        </td>
-                        <td 
-                          className="py-3 px-4 text-sm text-gray-700 cursor-pointer hover:text-blue-600 hover:underline"
-                          onClick={() => {
-                            if (req.department && req.department !== 'Unknown') {
-                              handleKPIClick({
-                                department: req.department,
-                                dateRange: dateRange,
-                                startDate: customStartDate,
-                                endDate: customEndDate
-                              });
-                            }
-                          }}
-                        >
-                          {req.department || 'Unknown'}
-                        </td>
-                        <td 
-                          className="py-3 px-4 text-sm text-gray-700"
-                        >
-                          {req.approverId ? (
-                            <span
-                              className="cursor-pointer hover:text-blue-600 hover:underline"
-                              onClick={() => {
-                                if (onNavigate) {
-                                  // Navigate to requests page with approver filter pre-filled
-                                  const params = new URLSearchParams();
-                                  params.set('approver', req.approverId!);
-                                  params.set('approverType', 'current'); // Since these are current approvers
-                                  params.set('slaCompliance', 'breached'); // Filter for breached requests
-                                  onNavigate(`requests?${params.toString()}`);
-                                }
-                              }}
-                              title="Click to view all requests for this approver"
-                            >
-                              {req.approver || 'N/A'}
-                            </span>
-                          ) : (
-                            req.approver || 'N/A'
-                          )}
-                        </td>
-                        <td className="py-3 px-4 text-sm text-gray-700">
-                          {req.currentLevel && req.totalLevels ? (
-                            <span className="font-medium">
-                              {req.currentLevel}/{req.totalLevels}
-                            </span>
-                          ) : req.currentLevel ? (
-                            <span className="font-medium">{req.currentLevel}/—</span>
-                          ) : (
-                            <span className="text-gray-400">—</span>
-                          )}
-                        </td>
-                        <td className="py-3 px-4">
-                          <span className="bg-red-500 text-white px-2 py-1 rounded text-xs font-medium">
-                            {formatBreachTime(breachTime)}
-                          </span>
-                        </td>
-                        <td className="py-3 px-4 text-sm text-gray-700 min-w-[200px] max-w-[300px]">
-                          <div className="max-h-32 overflow-y-auto">
-                            <p className="whitespace-pre-line break-words leading-relaxed">
-                              {req.breachReason || 'TAT Exceeded'}
-                            </p>
-                          </div>
-                        </td>
-                        <td className="py-3 px-4">
-                          <Badge 
-                            variant="outline" 
-                            className={`text-xs font-medium ${
-                              req.priority === 'express' ? 'bg-orange-100 text-orange-800 border-orange-200' : 'bg-blue-100 text-blue-800 border-blue-200'
-                            }`}
-                          >
-                            {req.priority}
-                          </Badge>
-                        </td>
-                      </tr>
-                    );
-                  })}
-                </tbody>
-              </table>
-            </div>
-            
-            {/* Pagination for TAT Breach Report */}
-            <div className="mt-4">
-              <Pagination
-                currentPage={criticalPage}
-                totalPages={criticalTotalPages}
-                totalRecords={criticalTotalRecords}
-                itemsPerPage={10}
-                onPageChange={handleCriticalPageChange}
-                itemLabel="critical requests"
-                testIdPrefix="dashboard-critical-pagination"
-              />
-            </div>
-          </CardContent>
-        </Card>
+        <TATBreachReport
+          breachedRequests={breachedRequests}
+          pagination={criticalPagination}
+          dateRange={dateRange}
+          customStartDate={customStartDate}
+          customEndDate={customEndDate}
+          onPageChange={handleCriticalPageChangeWrapper}
+          onKPIClick={handleKPIClick}
+          onNavigate={onNavigate}
+        />
       )}
 
       {/* Upcoming Deadlines / Workflow Aging */}
       {upcomingDeadlinesNotBreached.length > 0 && (
-        <Card className="shadow-md hover:shadow-lg transition-shadow">
-          <CardHeader>
-            <div className="flex items-center justify-between gap-2">
-              <div className="flex items-center gap-2">
-                <CalendarIcon className="h-4 w-4 sm:h-5 sm:w-5 text-orange-600" />
-                <div>
-                  <CardTitle className="text-base sm:text-lg">Upcoming Deadlines</CardTitle>
-                  <CardDescription className="text-xs sm:text-sm">
-                    {isAdmin ? 'Current active levels organization-wide' : 'Requests awaiting your approval'}
-                  </CardDescription>
-                </div>
-              </div>
-            </div>
-          </CardHeader>
-          <CardContent>
-            <div className="space-y-2 sm:space-y-3">
-              {upcomingDeadlinesNotBreached.map((deadline, idx) => {
-                const tatPercentage = Number(deadline.tatPercentageUsed) || 0;
-                const elapsedHours = Number(deadline.elapsedHours) || 0;
-                const remainingHours = Number(deadline.remainingHours) || 0;
-                
-                return (
-                  <div key={idx} className="p-3 sm:p-4 border rounded-lg hover:shadow-md transition-all cursor-pointer"
-                       onClick={() => onNavigate?.(`request/${deadline.requestNumber}`)}>
-                    <div className="flex items-start justify-between gap-2 mb-2">
-                      <div className="flex-1 min-w-0">
-                        <div className="flex items-center gap-1 sm:gap-2 mb-1 flex-wrap">
-                          <span className="font-semibold text-xs sm:text-sm">{deadline.requestNumber}</span>
-                          <Badge variant="outline" className={`text-xs ${deadline.priority === 'express' ? 'bg-orange-50 text-orange-700' : 'bg-blue-50 text-blue-700'}`}>
-                            {deadline.priority}
-                          </Badge>
-                        </div>
-                        <p className="text-xs sm:text-sm text-muted-foreground truncate">{deadline.requestTitle}</p>
-                        <div className="flex items-center gap-2 mt-1 text-xs text-muted-foreground flex-wrap">
-                          <Badge variant="outline" className="text-xs bg-blue-50 text-blue-700 border-blue-200">
-                            Level {deadline.levelNumber || deadline.currentLevel}/{deadline.totalLevels || '?'}
-                          </Badge>
-                          <span className="truncate">{deadline.approverName}</span>
-                        </div>
-                      </div>
-                      <div className="text-right flex-shrink-0">
-                        <p className="text-xs text-muted-foreground">TAT Used</p>
-                        <p className={`text-base sm:text-lg font-bold ${tatPercentage >= 80 ? 'text-red-600' : tatPercentage >= 50 ? 'text-orange-600' : 'text-green-600'}`}>
-                          {tatPercentage.toFixed(0)}%
-                        </p>
-                      </div>
-                    </div>
-                    <div className="space-y-1">
-                      <Progress 
-                        value={tatPercentage} 
-                        className={`h-1.5 sm:h-2 ${tatPercentage >= 80 ? 'bg-red-100' : tatPercentage >= 50 ? 'bg-orange-100' : 'bg-green-100'}`}
-                      />
-                      <div className="flex justify-between text-xs text-muted-foreground">
-                        <span>{formatHoursMinutes(elapsedHours)} elapsed</span>
-                        <span>{formatHoursMinutes(remainingHours)} left</span>
-                      </div>
-                    </div>
-                  </div>
-                );
-              })}
-            </div>
-            
-            {/* Pagination for Upcoming Deadlines */}
-            <div className="mt-4">
-              <Pagination
-                currentPage={deadlinesPage}
-                totalPages={deadlinesTotalPages}
-                totalRecords={deadlinesTotalRecords}
-                itemsPerPage={10}
-                onPageChange={handleDeadlinesPageChange}
-                itemLabel="deadlines"
-                testIdPrefix="dashboard-deadlines-pagination"
-              />
-            </div>
-          </CardContent>
-        </Card>
+        <UpcomingDeadlinesSection
+          isAdmin={isAdmin}
+          upcomingDeadlines={upcomingDeadlinesNotBreached}
+          pagination={deadlinesPagination}
+          onPageChange={handleDeadlinesPageChangeWrapper}
+          onNavigate={onNavigate}
+        />
       )}
 
       {/* AI Remark Utilization Report (Admin Only) */}
       {isAdmin && aiRemarkUtilization && (
-        <Card className="shadow-md hover:shadow-lg transition-shadow">
-          <CardHeader className="pb-3">
-            <div className="flex items-center gap-3">
-              <div className="bg-purple-50 p-2 sm:p-3 rounded-lg">
-                <Zap className="h-5 w-5 sm:h-6 sm:w-6 text-purple-600" />
-              </div>
-              <div>
-                <CardTitle className="text-base sm:text-lg lg:text-xl">AI Remark Utilization Report</CardTitle>
-                <CardDescription className="text-xs sm:text-sm">AI-generated remarks usage and edits</CardDescription>
-              </div>
-            </div>
-          </CardHeader>
-          <CardContent>
-            {/* Summary Cards */}
-            <div className="grid grid-cols-3 gap-4 mb-6">
-              <div className="bg-purple-50 p-4 rounded-lg text-center">
-                <div className="text-sm text-gray-600 mb-1">Total Usage</div>
-                <div className="text-2xl font-bold text-gray-900">{aiRemarkUtilization.totalUsage}</div>
-              </div>
-              <div className="bg-pink-50 p-4 rounded-lg text-center">
-                <div className="text-sm text-gray-600 mb-1">Total Edits</div>
-                <div className="text-2xl font-bold text-gray-900">{aiRemarkUtilization.totalEdits}</div>
-              </div>
-              <div className="bg-purple-50 p-4 rounded-lg text-center">
-                <div className="text-sm text-gray-600 mb-1">Edit Rate</div>
-                <div className="text-2xl font-bold text-gray-900">{aiRemarkUtilization.editRate}%</div>
-              </div>
-            </div>
-
-            {/* Monthly Trends Line Graph */}
-            {aiRemarkUtilization.monthlyTrends && aiRemarkUtilization.monthlyTrends.length > 0 && (
-              <ResponsiveContainer width="100%" height={250}>
-                <LineChart data={aiRemarkUtilization.monthlyTrends}>
-                  <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
-                  <XAxis dataKey="month" stroke="#999" tick={{ fontSize: 11 }} />
-                  <YAxis stroke="#999" tick={{ fontSize: 11 }} />
-                  <Tooltip 
-                    contentStyle={{ 
-                      backgroundColor: '#ffffff',
-                      border: '1px solid #e5e7eb',
-                      borderRadius: '6px',
-                      fontSize: '12px'
-                    }}
-                  />
-                  <Legend 
-                    verticalAlign="bottom"
-                    height={36}
-                    iconType="circle"
-                    wrapperStyle={{ fontSize: '12px', paddingTop: '10px' }}
-                  />
-                  <Line 
-                    type="monotone" 
-                    dataKey="aiUsage" 
-                    stroke="#8b5cf6" 
-                    strokeWidth={2}
-                    name="AI Usage"
-                    dot={{ fill: '#8b5cf6', r: 4 }}
-                  />
-                  <Line 
-                    type="monotone" 
-                    dataKey="manualEdits" 
-                    stroke="#ec4899" 
-                    strokeWidth={2}
-                    name="Manual Edits"
-                    dot={{ fill: '#ec4899', r: 4 }}
-                  />
-                </LineChart>
-              </ResponsiveContainer>
-            )}
-          </CardContent>
-        </Card>
+        <AIRemarkUtilizationReport aiRemarkUtilization={aiRemarkUtilization} />
       )}
 
       {/* Approver Performance Report (Admin Only) */}
       {isAdmin && approverPerformance.length > 0 && (
-        <Card className="shadow-md hover:shadow-lg transition-shadow">
-          <CardHeader className="pb-3">
-            <div className="flex items-center justify-between gap-3">
-              <div className="flex items-center gap-3">
-                <div className="bg-yellow-50 p-2 sm:p-3 rounded-lg">
-                  <Users className="h-5 w-5 sm:h-6 sm:w-6 text-yellow-600" />
-                </div>
-                <div>
-                  <CardTitle className="text-base sm:text-lg lg:text-xl">Approver Performance Report</CardTitle>
-                  <CardDescription className="text-xs sm:text-sm">Response time & TAT compliance tracking</CardDescription>
-                </div>
-              </div>
-              <Button
-                onClick={exportApproverPerformanceToCSV}
-                disabled={exportingApproverPerformance || loading}
-                className="bg-re-green hover:bg-re-green/90 text-white shrink-0"
-                size="sm"
-              >
-                {exportingApproverPerformance ? (
-                  <>
-                    <RefreshCw className="w-4 h-4 mr-2 animate-spin" />
-                    Exporting...
-                  </>
-                ) : (
-                  <>
-                    <Download className="w-4 h-4 mr-2" />
-                    Export
-                  </>
-                )}
-              </Button>
-            </div>
-          </CardHeader>
-          <CardContent>
-            <div className="space-y-3">
-              {approverPerformance.map((approver, idx) => {
-                const tatPercent = approver.tatCompliancePercent;
-                const getTatColorClass = (tat: number) => {
-                  if (tat >= 95) return 'bg-green-100 text-green-700';
-                  if (tat >= 90) return 'bg-blue-100 text-blue-700';
-                  if (tat >= 85) return 'bg-orange-100 text-orange-700';
-                  return 'bg-red-100 text-red-700';
-                };
-
-                return (
-                  <div 
-                    key={idx} 
-                    className="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow cursor-pointer"
-                    onClick={() => {
-                      const params = new URLSearchParams();
-                      params.set('approverId', approver.approverId);
-                      params.set('approverName', approver.approverName);
-                      params.set('dateRange', dateRange);
-                      if (dateRange === 'custom' && customStartDate && customEndDate) {
-                        params.set('startDate', customStartDate.toISOString());
-                        params.set('endDate', customEndDate.toISOString());
-                      }
-                      onNavigate?.(`/approver-performance?${params.toString()}`);
-                    }}
-                  >
-                    <div className="flex items-center justify-between mb-2">
-                      <div className="flex items-center gap-3">
-                        <div className="w-8 h-8 bg-orange-500 rounded-full flex items-center justify-center text-white font-semibold text-sm flex-shrink-0">
-                          {idx + 1}
-                        </div>
-                        <div className="min-w-0">
-                          <div className="font-medium text-gray-900 truncate">{approver.approverName}</div>
-                          <div className="text-xs text-gray-500">{approver.totalApproved} requests approved</div>
-                        </div>
-                      </div>
-                      <span className={`px-2 py-1 rounded text-xs font-medium ${getTatColorClass(tatPercent)} flex-shrink-0`}>
-                        {tatPercent}% TAT
-                      </span>
-                    </div>
-                    <div className="grid grid-cols-2 gap-4 mt-3">
-                      <div>
-                        <div className="text-xs text-gray-500">Avg Response</div>
-                        <div className="text-sm font-medium text-gray-900">{formatHoursMinutes(approver.avgResponseHours)}</div>
-                      </div>
-                      <div>
-                        <div className="text-xs text-gray-500">Pending</div>
-                        <div className="text-sm font-medium text-gray-900">
-                          <span className="bg-gray-500 text-white px-2 py-1 rounded text-xs">{approver.pendingCount}</span>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                );
-              })}
-            </div>
-            
-            {/* Pagination for Approver Performance */}
-            <div className="mt-4">
-              <Pagination
-                currentPage={approverPage}
-                totalPages={approverTotalPages}
-                totalRecords={approverTotalRecords}
-                itemsPerPage={10}
-                onPageChange={handleApproverPageChange}
-                itemLabel="approvers"
-                testIdPrefix="dashboard-approver-pagination"
-              />
-            </div>
-          </CardContent>
-        </Card>
+        <ApproverPerformanceReport
+          approverPerformance={approverPerformance}
+          pagination={approverPagination}
+          dateRange={dateRange}
+          customStartDate={customStartDate}
+          customEndDate={customEndDate}
+          loading={loading}
+          exportingApproverPerformance={exportingApproverPerformance}
+          onPageChange={handleApproverPageChangeWrapper}
+          onExport={handleExportApproverPerformance}
+          onNavigate={onNavigate}
+        />
       )}
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/pages/Dashboard/components/DashboardFiltersBar.tsx b/src/pages/Dashboard/components/DashboardFiltersBar.tsx
new file mode 100644
index 0000000..331699b
--- /dev/null
+++ b/src/pages/Dashboard/components/DashboardFiltersBar.tsx
@@ -0,0 +1,202 @@
+/**
+ * Dashboard Filters Bar Component
+ * Handles date range filtering and refresh functionality
+ */
+
+import { Card, CardContent } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Separator } from '@/components/ui/separator';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Filter, Calendar as CalendarIcon, RefreshCw } from 'lucide-react';
+import { format } from 'date-fns';
+import { DateRange } from '@/services/dashboard.service';
+
+interface DashboardFiltersBarProps {
+  isAdmin: boolean;
+  dateRange: DateRange;
+  customStartDate?: Date;
+  customEndDate?: Date;
+  showCustomDatePicker: boolean;
+  refreshing: boolean;
+  onDateRangeChange: (value: string) => void;
+  onCustomStartDateChange: (date: Date | undefined) => void;
+  onCustomEndDateChange: (date: Date | undefined) => void;
+  onShowCustomDatePickerChange: (show: boolean) => void;
+  onApplyCustomDate: () => void;
+  onResetCustomDates: () => void;
+  onRefresh: () => void;
+}
+
+export function DashboardFiltersBar({
+  isAdmin,
+  dateRange,
+  customStartDate,
+  customEndDate,
+  showCustomDatePicker,
+  refreshing,
+  onDateRangeChange,
+  onCustomStartDateChange,
+  onCustomEndDateChange,
+  onShowCustomDatePickerChange,
+  onApplyCustomDate,
+  onResetCustomDates,
+  onRefresh,
+}: DashboardFiltersBarProps) {
+  return (
+    <Card className="shadow-md" data-testid="dashboard-filters-bar">
+      <CardContent className="p-4">
+        <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
+          <div className="flex items-center gap-2">
+            <Filter className="w-5 h-5 text-muted-foreground" />
+            <h3 className="font-semibold text-gray-900">Filters</h3>
+            {isAdmin && (
+              <Badge variant="outline" className="bg-purple-50 text-purple-700 border-purple-200" data-testid="management-badge">
+                Management View
+              </Badge>
+            )}
+          </div>
+
+          <div className="flex flex-wrap items-center gap-3 w-full sm:w-auto">
+            {/* Date Range Filter */}
+            {isAdmin ? (
+              <div className="flex items-center gap-2">
+                <CalendarIcon className="w-4 h-4 text-muted-foreground" />
+                <Select value={dateRange} onValueChange={onDateRangeChange} data-testid="date-range-select">
+                  <SelectTrigger className="w-[140px]">
+                    <SelectValue placeholder="Select period" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="today">Today</SelectItem>
+                    <SelectItem value="week">This Week</SelectItem>
+                    <SelectItem value="month">This Month</SelectItem>
+                    <SelectItem value="custom">Custom Range</SelectItem>
+                  </SelectContent>
+                </Select>
+                
+                {/* Custom Date Range Picker */}
+                {dateRange === 'custom' && (
+                  <Popover open={showCustomDatePicker} onOpenChange={onShowCustomDatePickerChange}>
+                    <PopoverTrigger asChild>
+                      <Button variant="outline" size="sm" className="gap-2" data-testid="custom-date-trigger">
+                        <CalendarIcon className="w-4 h-4" />
+                        {customStartDate && customEndDate 
+                          ? `${format(customStartDate, 'MMM d, yyyy')} - ${format(customEndDate, 'MMM d, yyyy')}`
+                          : 'Select dates'}
+                      </Button>
+                    </PopoverTrigger>
+                    <PopoverContent className="w-auto p-4" align="start" sideOffset={8} data-testid="custom-date-picker">
+                      <div className="space-y-4">
+                        <div className="space-y-3">
+                          <div className="space-y-2">
+                            <Label htmlFor="start-date" className="text-sm font-medium">Start Date</Label>
+                            <Input
+                              id="start-date"
+                              type="date"
+                              value={customStartDate ? format(customStartDate, 'yyyy-MM-dd') : ''}
+                              onChange={(e) => {
+                                const date = e.target.value ? new Date(e.target.value) : undefined;
+                                if (date) {
+                                  onCustomStartDateChange(date);
+                                  if (customEndDate && date > customEndDate) {
+                                    onCustomEndDateChange(date);
+                                  }
+                                } else {
+                                  onCustomStartDateChange(undefined);
+                                }
+                              }}
+                              max={format(new Date(), 'yyyy-MM-dd')}
+                              className="w-full"
+                              data-testid="start-date-input"
+                            />
+                          </div>
+                          <div className="space-y-2">
+                            <Label htmlFor="end-date" className="text-sm font-medium">End Date</Label>
+                            <Input
+                              id="end-date"
+                              type="date"
+                              value={customEndDate ? format(customEndDate, 'yyyy-MM-dd') : ''}
+                              onChange={(e) => {
+                                const date = e.target.value ? new Date(e.target.value) : undefined;
+                                if (date) {
+                                  onCustomEndDateChange(date);
+                                  if (customStartDate && date < customStartDate) {
+                                    onCustomStartDateChange(date);
+                                  }
+                                } else {
+                                  onCustomEndDateChange(undefined);
+                                }
+                              }}
+                              min={customStartDate ? format(customStartDate, 'yyyy-MM-dd') : undefined}
+                              max={format(new Date(), 'yyyy-MM-dd')}
+                              className="w-full"
+                              data-testid="end-date-input"
+                            />
+                          </div>
+                        </div>
+                        <div className="flex gap-2 pt-2 border-t">
+                          <Button 
+                            size="sm" 
+                            onClick={onApplyCustomDate}
+                            disabled={!customStartDate || !customEndDate}
+                            className="flex-1 bg-re-green hover:bg-re-green/90"
+                            data-testid="apply-custom-date"
+                          >
+                            Apply
+                          </Button>
+                          <Button 
+                            size="sm" 
+                            variant="outline"
+                            onClick={onResetCustomDates}
+                            data-testid="cancel-custom-date"
+                          >
+                            Cancel
+                          </Button>
+                        </div>
+                      </div>
+                    </PopoverContent>
+                  </Popover>
+                )}
+              </div>
+            ) : (
+              <div className="flex items-center gap-2">
+                <CalendarIcon className="w-4 h-4 text-muted-foreground" />
+                <Select value={dateRange} onValueChange={(value) => onDateRangeChange(value)} data-testid="date-range-select-user">
+                  <SelectTrigger className="w-[140px]">
+                    <SelectValue placeholder="Select period" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="today">Today</SelectItem>
+                    <SelectItem value="week">This Week</SelectItem>
+                    <SelectItem value="month">This Month</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            )}
+
+            <Separator orientation="vertical" className="h-6 hidden sm:block" />
+
+            {/* Refresh Button */}
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={onRefresh}
+              disabled={refreshing}
+              className="gap-2 min-w-[110px]"
+              data-testid="refresh-button"
+            >
+              <RefreshCw className={`w-4 h-4 ${refreshing ? 'animate-spin' : ''}`} />
+              <span className="inline-block w-[60px] text-center">
+                {refreshing ? 'Refreshing...' : 'Refresh'}
+              </span>
+            </Button>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
diff --git a/src/pages/Dashboard/components/DashboardHero.tsx b/src/pages/Dashboard/components/DashboardHero.tsx
new file mode 100644
index 0000000..46edd0f
--- /dev/null
+++ b/src/pages/Dashboard/components/DashboardHero.tsx
@@ -0,0 +1,70 @@
+/**
+ * Dashboard Hero Section Component
+ * Displays the main dashboard header with title and quick actions
+ */
+
+import { Card, CardContent } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Shield, Zap, Activity } from 'lucide-react';
+import { QuickAction } from '../utils/dashboardNavigation';
+
+interface DashboardHeroProps {
+  isAdmin: boolean;
+  quickActions: QuickAction[];
+}
+
+export function DashboardHero({ isAdmin, quickActions }: DashboardHeroProps) {
+  return (
+    <Card className="relative overflow-hidden shadow-xl border-0" data-testid="dashboard-hero">
+      <div className="absolute inset-0 bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900"></div>
+      
+      <CardContent className="relative z-10 p-4 sm:p-6 lg:p-12">
+        <div className="flex flex-col lg:flex-row items-start lg:items-center justify-between gap-4 sm:gap-6">
+          <div className="text-white w-full lg:w-auto">
+            <div className="flex items-center gap-3 sm:gap-4 mb-4 sm:mb-6">
+              <div className="w-12 h-12 sm:w-16 sm:h-16 bg-yellow-400 rounded-xl flex items-center justify-center shadow-lg" data-testid="hero-icon">
+                <Shield className="w-6 h-6 sm:w-8 sm:h-8 text-slate-900" />
+              </div>
+              <div>
+                <h1 className="text-2xl sm:text-3xl lg:text-4xl font-bold mb-1 sm:mb-2 text-white" data-testid="hero-title">
+                  {isAdmin ? 'Management Dashboard' : 'My Dashboard'}
+                </h1>
+                <p className="text-sm sm:text-lg lg:text-xl text-gray-200" data-testid="hero-subtitle">
+                  {isAdmin ? 'Organization-wide analytics and insights' : 'Track your requests and approvals'}
+                </p>
+              </div>
+            </div>
+            
+            <div className="flex flex-wrap gap-2 sm:gap-4 mt-4 sm:mt-8" data-testid="quick-actions">
+              {quickActions.map((action, index) => (
+                <Button
+                  key={index}
+                  onClick={action.action}
+                  className={`${action.color} text-white border-0 shadow-lg hover:shadow-xl transition-all duration-200`}
+                  size={window.innerWidth < 640 ? "sm" : "lg"}
+                  data-testid={`quick-action-${action.label.toLowerCase().replace(/\s+/g, '-')}`}
+                >
+                  <action.icon className="w-4 h-4 sm:w-5 sm:h-5 mr-1 sm:mr-2" />
+                  {action.label}
+                </Button>
+              ))}
+            </div>
+          </div>
+
+          {/* Decorative Elements */}
+          <div className="hidden lg:flex items-center gap-4" data-testid="hero-decorations">
+            <div className="w-24 h-24 bg-yellow-400/20 rounded-full flex items-center justify-center">
+              <div className="w-16 h-16 bg-yellow-400/30 rounded-full flex items-center justify-center">
+                <Zap className="w-8 h-8 text-yellow-400" />
+              </div>
+            </div>
+            <div className="w-16 h-16 bg-white/10 rounded-full flex items-center justify-center">
+              <Activity className="w-6 h-6 text-white/80" />
+            </div>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
diff --git a/src/pages/Dashboard/components/sections/AIRemarkUtilizationReport.tsx b/src/pages/Dashboard/components/sections/AIRemarkUtilizationReport.tsx
new file mode 100644
index 0000000..0fbc02f
--- /dev/null
+++ b/src/pages/Dashboard/components/sections/AIRemarkUtilizationReport.tsx
@@ -0,0 +1,92 @@
+/**
+ * AI Remark Utilization Report Component
+ * Displays AI remark usage statistics and trends
+ */
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Zap } from 'lucide-react';
+import { AIRemarkUtilization } from '@/services/dashboard.service';
+import { ResponsiveContainer, LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';
+
+interface AIRemarkUtilizationReportProps {
+  aiRemarkUtilization: AIRemarkUtilization | null;
+}
+
+export function AIRemarkUtilizationReport({ aiRemarkUtilization }: AIRemarkUtilizationReportProps) {
+  if (!aiRemarkUtilization) return null;
+
+  return (
+    <Card className="shadow-md hover:shadow-lg transition-shadow" data-testid="ai-remark-utilization-report">
+      <CardHeader className="pb-3">
+        <div className="flex items-center gap-3">
+          <div className="bg-purple-50 p-2 sm:p-3 rounded-lg">
+            <Zap className="h-5 w-5 sm:h-6 sm:w-6 text-purple-600" />
+          </div>
+          <div>
+            <CardTitle className="text-base sm:text-lg lg:text-xl">AI Remark Utilization Report</CardTitle>
+            <CardDescription className="text-xs sm:text-sm">AI-generated remarks usage and edits</CardDescription>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent>
+        {/* Summary Cards */}
+        <div className="grid grid-cols-3 gap-4 mb-6">
+          <div className="bg-purple-50 p-4 rounded-lg text-center" data-testid="ai-total-usage">
+            <div className="text-sm text-gray-600 mb-1">Total Usage</div>
+            <div className="text-2xl font-bold text-gray-900">{aiRemarkUtilization.totalUsage}</div>
+          </div>
+          <div className="bg-pink-50 p-4 rounded-lg text-center" data-testid="ai-total-edits">
+            <div className="text-sm text-gray-600 mb-1">Total Edits</div>
+            <div className="text-2xl font-bold text-gray-900">{aiRemarkUtilization.totalEdits}</div>
+          </div>
+          <div className="bg-purple-50 p-4 rounded-lg text-center" data-testid="ai-edit-rate">
+            <div className="text-sm text-gray-600 mb-1">Edit Rate</div>
+            <div className="text-2xl font-bold text-gray-900">{aiRemarkUtilization.editRate}%</div>
+          </div>
+        </div>
+
+        {/* Monthly Trends Line Graph */}
+        {aiRemarkUtilization.monthlyTrends && aiRemarkUtilization.monthlyTrends.length > 0 && (
+          <ResponsiveContainer width="100%" height={250}>
+            <LineChart data={aiRemarkUtilization.monthlyTrends}>
+              <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
+              <XAxis dataKey="month" stroke="#999" tick={{ fontSize: 11 }} />
+              <YAxis stroke="#999" tick={{ fontSize: 11 }} />
+              <Tooltip
+                contentStyle={{
+                  backgroundColor: '#ffffff',
+                  border: '1px solid #e5e7eb',
+                  borderRadius: '6px',
+                  fontSize: '12px',
+                }}
+              />
+              <Legend
+                verticalAlign="bottom"
+                height={36}
+                iconType="circle"
+                wrapperStyle={{ fontSize: '12px', paddingTop: '10px' }}
+              />
+              <Line
+                type="monotone"
+                dataKey="aiUsage"
+                stroke="#8b5cf6"
+                strokeWidth={2}
+                name="AI Usage"
+                dot={{ fill: '#8b5cf6', r: 4 }}
+              />
+              <Line
+                type="monotone"
+                dataKey="manualEdits"
+                stroke="#ec4899"
+                strokeWidth={2}
+                name="Manual Edits"
+                dot={{ fill: '#ec4899', r: 4 }}
+              />
+            </LineChart>
+          </ResponsiveContainer>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
diff --git a/src/pages/Dashboard/components/sections/AdminAnalyticsSection.tsx b/src/pages/Dashboard/components/sections/AdminAnalyticsSection.tsx
new file mode 100644
index 0000000..45e3b28
--- /dev/null
+++ b/src/pages/Dashboard/components/sections/AdminAnalyticsSection.tsx
@@ -0,0 +1,213 @@
+/**
+ * Admin Analytics Section Component
+ * Displays Active Levels, Collaboration, and Department Stats
+ */
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Separator } from '@/components/ui/separator';
+import { Activity, MessageSquare, PieChart, Download } from 'lucide-react';
+import { DashboardKPIs, DepartmentStats, UpcomingDeadline, DateRange } from '@/services/dashboard.service';
+import { CriticalRequest, CriticalAlertData } from '@/services/dashboard.service';
+import { ResponsiveContainer, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';
+import { KPIClickFilters } from '../../components/types/dashboard.types';
+
+interface AdminAnalyticsSectionProps {
+  kpis: DashboardKPIs | null;
+  upcomingDeadlines: UpcomingDeadline[];
+  criticalRequests: (CriticalRequest | CriticalAlertData)[];
+  departmentStats: DepartmentStats[];
+  dateRange: DateRange;
+  customStartDate?: Date;
+  customEndDate?: Date;
+  exportingDeptStats: boolean;
+  onKPIClick: (filters: KPIClickFilters) => void;
+  onExportDepartmentStats: (dateRange: DateRange, startDate?: Date, endDate?: Date) => void;
+}
+
+export function AdminAnalyticsSection({
+  kpis,
+  upcomingDeadlines,
+  criticalRequests,
+  departmentStats,
+  dateRange,
+  customStartDate,
+  customEndDate,
+  exportingDeptStats,
+  onKPIClick,
+  onExportDepartmentStats,
+}: AdminAnalyticsSectionProps) {
+  if (!kpis) return null;
+
+  const getFilterParams = () => ({
+    dateRange,
+    startDate: customStartDate,
+    endDate: customEndDate,
+  });
+
+  return (
+    <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-6" data-testid="admin-analytics-section">
+      {/* Left Side: Active Levels and Collaboration stacked - 1/3 width */}
+      <div className="flex flex-col gap-4 sm:gap-6 lg:col-span-1">
+        {/* Active Levels */}
+        <Card className="shadow-md hover:shadow-lg transition-shadow flex-1" data-testid="active-levels-card">
+          <CardHeader className="pb-3">
+            <div className="flex items-center gap-2">
+              <div className="p-2 bg-blue-100 rounded-lg">
+                <Activity className="h-4 w-4 text-blue-600" />
+              </div>
+              <CardTitle className="text-sm">Active Levels</CardTitle>
+            </div>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-3">
+              <div className="flex items-baseline gap-2">
+                <span className="text-2xl sm:text-3xl font-bold text-blue-600">{upcomingDeadlines.length}</span>
+                <span className="text-xs text-muted-foreground">levels</span>
+              </div>
+              <Separator />
+              <div className="space-y-1 text-xs">
+                <div className="flex justify-between items-center">
+                  <span className="text-muted-foreground">Avg Time/Level</span>
+                  <span className="font-semibold">
+                    {upcomingDeadlines.length > 0
+                      ? (kpis.tatEfficiency.avgCycleTimeHours / upcomingDeadlines.length).toFixed(1)
+                      : '0'}
+                    h
+                  </span>
+                </div>
+                <div className="flex justify-between items-center">
+                  <span className="text-muted-foreground">At Risk</span>
+                  <span className="font-semibold text-red-600">
+                    {criticalRequests.filter((r) => r.breachCount > 0).length}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Collaboration */}
+        <Card className="shadow-md hover:shadow-lg transition-shadow flex-1" data-testid="collaboration-card">
+          <CardHeader className="pb-3">
+            <div className="flex items-center gap-2">
+              <div className="p-2 bg-indigo-100 rounded-lg">
+                <MessageSquare className="h-4 w-4 text-indigo-600" />
+              </div>
+              <CardTitle className="text-sm">Collaboration</CardTitle>
+            </div>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-3">
+              <div className="grid grid-cols-2 gap-2">
+                <div className="text-center p-2 bg-indigo-50 rounded">
+                  <p className="text-xs text-muted-foreground">Notes</p>
+                  <p className="text-lg sm:text-xl font-bold text-indigo-600">{kpis.engagement.workNotesAdded}</p>
+                </div>
+                <div className="text-center p-2 bg-purple-50 rounded">
+                  <p className="text-xs text-muted-foreground">Files</p>
+                  <p className="text-lg sm:text-xl font-bold text-purple-600">
+                    {kpis.engagement.attachmentsUploaded}
+                  </p>
+                </div>
+              </div>
+              <Separator />
+              <div className="text-xs text-muted-foreground text-center">
+                {kpis.requestVolume.totalRequests > 0
+                  ? (kpis.engagement.workNotesAdded / kpis.requestVolume.totalRequests).toFixed(1)
+                  : '0'}{' '}
+                avg notes per request
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Right Side: Department-wise Workflow Summary - Full height - 2/3 width */}
+      {departmentStats.length > 0 && (
+        <Card className="shadow-md hover:shadow-lg transition-shadow lg:col-span-2" data-testid="department-stats-card">
+          <CardHeader>
+            <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+              <div className="flex items-center gap-3">
+                <div className="bg-blue-50 p-2 sm:p-3 rounded-lg">
+                  <PieChart className="h-5 w-5 sm:h-6 sm:w-6 text-blue-600" />
+                </div>
+                <div>
+                  <CardTitle className="text-base sm:text-lg lg:text-xl">Department-wise Workflow Summary</CardTitle>
+                  <CardDescription className="text-xs sm:text-sm">
+                    Workflow distribution across departments
+                  </CardDescription>
+                </div>
+              </div>
+              <Button
+                variant="outline"
+                size="sm"
+                className="gap-2 self-start sm:self-auto"
+                onClick={() => onExportDepartmentStats(dateRange, customStartDate, customEndDate)}
+                disabled={exportingDeptStats}
+                data-testid="export-dept-stats-button"
+              >
+                <Download className={`w-3 h-3 sm:w-4 sm:h-4 ${exportingDeptStats ? 'animate-pulse' : ''}`} />
+                <span className="text-xs sm:text-sm">{exportingDeptStats ? 'Exporting...' : 'Export'}</span>
+              </Button>
+            </div>
+          </CardHeader>
+          <CardContent>
+            <ResponsiveContainer width="100%" height={400}>
+              <BarChart data={departmentStats}>
+                <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
+                <XAxis
+                  dataKey="department"
+                  stroke="#999"
+                  tick={(props) => {
+                    const { x, y, payload } = props;
+                    return (
+                      <g transform={`translate(${x},${y})`}>
+                        <text
+                          x={0}
+                          y={0}
+                          dy={16}
+                          textAnchor="middle"
+                          fill="#999"
+                          fontSize={11}
+                          className="cursor-pointer hover:text-blue-600 hover:underline"
+                          onClick={() => {
+                            onKPIClick({
+                              ...getFilterParams(),
+                              department: payload.value,
+                            });
+                          }}
+                        >
+                          {payload.value}
+                        </text>
+                      </g>
+                    );
+                  }}
+                />
+                <YAxis stroke="#999" tick={{ fontSize: 11 }} />
+                <Tooltip
+                  contentStyle={{
+                    backgroundColor: '#ffffff',
+                    border: '1px solid #e5e7eb',
+                    borderRadius: '6px',
+                    fontSize: '12px',
+                  }}
+                />
+                <Legend
+                  verticalAlign="bottom"
+                  height={36}
+                  iconType="square"
+                  wrapperStyle={{ fontSize: '12px', paddingTop: '10px' }}
+                />
+                <Bar dataKey="approved" fill="#10b981" name="Approved" />
+                <Bar dataKey="inProgress" fill="#f59e0b" name="Pending" />
+                <Bar dataKey="rejected" fill="#ef4444" name="Rejected" />
+              </BarChart>
+            </ResponsiveContainer>
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  );
+}
+
diff --git a/src/pages/Dashboard/components/sections/AdminKPICards.tsx b/src/pages/Dashboard/components/sections/AdminKPICards.tsx
new file mode 100644
index 0000000..3cc7676
--- /dev/null
+++ b/src/pages/Dashboard/components/sections/AdminKPICards.tsx
@@ -0,0 +1,191 @@
+/**
+ * Admin KPI Cards Section Component
+ * Displays comprehensive KPI cards for admin users
+ */
+
+import { FileText, Clock, Target } from 'lucide-react';
+import { KPICard } from '@/components/dashboard/KPICard';
+import { StatCard } from '@/components/dashboard/StatCard';
+import { Progress } from '@/components/ui/progress';
+import { DashboardKPIs, DateRange, PriorityDistribution } from '@/services/dashboard.service';
+import { formatHoursMinutes } from '@/utils/slaTracker';
+import { KPIClickFilters } from '../../components/types/dashboard.types';
+
+interface AdminKPICardsProps {
+  kpis: DashboardKPIs | null;
+  priorityDistribution: PriorityDistribution[];
+  dateRange: DateRange;
+  customStartDate?: Date;
+  customEndDate?: Date;
+  onKPIClick: (filters: KPIClickFilters) => void;
+}
+
+export function AdminKPICards({
+  kpis,
+  priorityDistribution,
+  dateRange,
+  customStartDate,
+  customEndDate,
+  onKPIClick,
+}: AdminKPICardsProps) {
+  const getFilterParams = () => ({
+    dateRange,
+    startDate: customStartDate,
+    endDate: customEndDate,
+  });
+
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6" data-testid="admin-kpi-cards">
+      {/* Total Requests */}
+      <KPICard
+        title="Total Requests"
+        value={kpis?.requestVolume.totalRequests || 0}
+        icon={FileText}
+        iconBgColor="bg-blue-50"
+        iconColor="text-blue-600"
+        testId="kpi-total-requests"
+        onClick={() => onKPIClick(getFilterParams())}
+      >
+        {/* Row 1: Approved and Rejected */}
+        <div className="grid grid-cols-2 gap-2 mb-2">
+          <StatCard
+            label="Approved"
+            value={kpis?.requestVolume.approvedRequests || 0}
+            bgColor="bg-green-50"
+            textColor="text-green-600"
+            testId="stat-approved"
+            onClick={(e) => {
+              e.stopPropagation();
+              onKPIClick({ ...getFilterParams(), status: 'approved' });
+            }}
+          />
+          <StatCard
+            label="Rejected"
+            value={kpis?.requestVolume.rejectedRequests || 0}
+            bgColor="bg-red-50"
+            textColor="text-red-600"
+            testId="stat-rejected"
+            onClick={(e) => {
+              e.stopPropagation();
+              onKPIClick({ ...getFilterParams(), status: 'rejected' });
+            }}
+          />
+        </div>
+        {/* Row 2: Pending and Closed */}
+        <div className="grid grid-cols-2 gap-2">
+          <StatCard
+            label="Pending"
+            value={kpis?.requestVolume.openRequests || 0}
+            bgColor="bg-orange-50"
+            textColor="text-orange-600"
+            testId="stat-pending"
+            onClick={(e) => {
+              e.stopPropagation();
+              onKPIClick({ ...getFilterParams(), status: 'pending' });
+            }}
+          />
+          <StatCard
+            label="Closed"
+            value={kpis?.requestVolume.closedRequests || 0}
+            bgColor="bg-gray-50"
+            textColor="text-gray-600"
+            testId="stat-closed"
+            onClick={(e) => {
+              e.stopPropagation();
+              onKPIClick({ ...getFilterParams(), status: 'closed' });
+            }}
+          />
+        </div>
+      </KPICard>
+
+      {/* SLA Compliance */}
+      <KPICard
+        title="SLA Compliance"
+        value={`${kpis?.tatEfficiency.avgTATCompliance || 0}%`}
+        icon={Target}
+        iconBgColor="bg-green-50"
+        iconColor="text-green-600"
+        testId="kpi-sla-compliance"
+        onClick={() => onKPIClick(getFilterParams())}
+      >
+        <div className="flex flex-col flex-1">
+          <Progress
+            value={kpis?.tatEfficiency.avgTATCompliance || 0}
+            className="h-2 mb-2"
+            data-testid="sla-progress-bar"
+          />
+          <div className="grid grid-cols-2 gap-2 mt-auto">
+            <StatCard
+              label="Compliant"
+              value={kpis?.tatEfficiency.compliantWorkflows || 0}
+              bgColor="bg-green-50"
+              textColor="text-green-600"
+              testId="stat-compliant"
+              onClick={(e) => {
+                e.stopPropagation();
+                onKPIClick({ ...getFilterParams(), slaCompliance: 'compliant' });
+              }}
+            />
+            <StatCard
+              label="Breached"
+              value={kpis?.tatEfficiency.delayedWorkflows || 0}
+              bgColor="bg-red-50"
+              textColor="text-red-600"
+              testId="stat-breached"
+              onClick={(e) => {
+                e.stopPropagation();
+                onKPIClick({ ...getFilterParams(), slaCompliance: 'breached' });
+              }}
+            />
+          </div>
+        </div>
+      </KPICard>
+
+      {/* Avg Cycle Time */}
+      <KPICard
+        title="Avg Cycle Time"
+        value={kpis?.tatEfficiency.avgCycleTimeHours ? formatHoursMinutes(kpis.tatEfficiency.avgCycleTimeHours) : '0h'}
+        icon={Clock}
+        iconBgColor="bg-purple-50"
+        iconColor="text-purple-600"
+        subtitle={`≈ ${kpis?.tatEfficiency.avgCycleTimeDays.toFixed(1) || 0} working days`}
+        testId="kpi-avg-cycle-time"
+        onClick={() => onKPIClick(getFilterParams())}
+      >
+        <div className="grid grid-cols-2 gap-2 mt-auto">
+          <StatCard
+            label="Express"
+            value={(() => {
+              const express = priorityDistribution.find((p) => p.priority === 'express');
+              const hours = express ? Number(express.avgCycleTimeHours) : 0;
+              return hours > 0 ? formatHoursMinutes(hours) : 'N/A';
+            })()}
+            bgColor="bg-orange-50"
+            textColor="text-orange-600"
+            testId="stat-express-time"
+            onClick={(e) => {
+              e.stopPropagation();
+              onKPIClick({ ...getFilterParams(), priority: 'express' });
+            }}
+          />
+          <StatCard
+            label="Standard"
+            value={(() => {
+              const standard = priorityDistribution.find((p) => p.priority === 'standard');
+              const hours = standard ? Number(standard.avgCycleTimeHours) : 0;
+              return hours > 0 ? formatHoursMinutes(hours) : 'N/A';
+            })()}
+            bgColor="bg-blue-50"
+            textColor="text-blue-600"
+            testId="stat-standard-time"
+            onClick={(e) => {
+              e.stopPropagation();
+              onKPIClick({ ...getFilterParams(), priority: 'standard' });
+            }}
+          />
+        </div>
+      </KPICard>
+    </div>
+  );
+}
+
diff --git a/src/pages/Dashboard/components/sections/ApproverPerformanceReport.tsx b/src/pages/Dashboard/components/sections/ApproverPerformanceReport.tsx
new file mode 100644
index 0000000..e710701
--- /dev/null
+++ b/src/pages/Dashboard/components/sections/ApproverPerformanceReport.tsx
@@ -0,0 +1,154 @@
+/**
+ * Approver Performance Report Component
+ * Displays approver performance metrics with pagination
+ */
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Users, RefreshCw, Download } from 'lucide-react';
+import { ApproverPerformance, DateRange } from '@/services/dashboard.service';
+import { Pagination } from '@/components/common/Pagination';
+import { formatHoursMinutes } from '@/utils/slaTracker';
+import { getTATColorClass } from '../../utils/dashboardCalculations';
+
+interface ApproverPerformanceReportProps {
+  approverPerformance: ApproverPerformance[];
+  pagination: {
+    page: number;
+    totalPages: number;
+    totalRecords: number;
+  };
+  dateRange: DateRange;
+  customStartDate?: Date;
+  customEndDate?: Date;
+  loading: boolean;
+  exportingApproverPerformance: boolean;
+  onPageChange: (page: number) => void;
+  onExport: (dateRange: DateRange, startDate?: Date, endDate?: Date) => void;
+  onNavigate?: (path: string) => void;
+}
+
+export function ApproverPerformanceReport({
+  approverPerformance,
+  pagination,
+  dateRange,
+  customStartDate,
+  customEndDate,
+  loading,
+  exportingApproverPerformance,
+  onPageChange,
+  onExport,
+  onNavigate,
+}: ApproverPerformanceReportProps) {
+  if (approverPerformance.length === 0) return null;
+
+  return (
+    <Card className="shadow-md hover:shadow-lg transition-shadow" data-testid="approver-performance-report">
+      <CardHeader className="pb-3">
+        <div className="flex items-center justify-between gap-3">
+          <div className="flex items-center gap-3">
+            <div className="bg-yellow-50 p-2 sm:p-3 rounded-lg">
+              <Users className="h-5 w-5 sm:h-6 sm:w-6 text-yellow-600" />
+            </div>
+            <div>
+              <CardTitle className="text-base sm:text-lg lg:text-xl">Approver Performance Report</CardTitle>
+              <CardDescription className="text-xs sm:text-sm">Response time & TAT compliance tracking</CardDescription>
+            </div>
+          </div>
+          <Button
+            onClick={() => onExport(dateRange, customStartDate, customEndDate)}
+            disabled={exportingApproverPerformance || loading}
+            className="bg-re-green hover:bg-re-green/90 text-white shrink-0"
+            size="sm"
+            data-testid="export-approver-performance-button"
+          >
+            {exportingApproverPerformance ? (
+              <>
+                <RefreshCw className="w-4 h-4 mr-2 animate-spin" />
+                Exporting...
+              </>
+            ) : (
+              <>
+                <Download className="w-4 h-4 mr-2" />
+                Export
+              </>
+            )}
+          </Button>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-3">
+          {approverPerformance.map((approver, idx) => {
+            const tatPercent = approver.tatCompliancePercent;
+
+            return (
+              <div
+                key={idx}
+                className="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow cursor-pointer"
+                onClick={() => {
+                  const params = new URLSearchParams();
+                  params.set('approverId', approver.approverId);
+                  params.set('approverName', approver.approverName);
+                  params.set('dateRange', dateRange);
+                  if (dateRange === 'custom' && customStartDate && customEndDate) {
+                    params.set('startDate', customStartDate.toISOString());
+                    params.set('endDate', customEndDate.toISOString());
+                  }
+                  onNavigate?.(`/approver-performance?${params.toString()}`);
+                }}
+                data-testid={`approver-item-${approver.approverId}`}
+              >
+                <div className="flex items-center justify-between mb-2">
+                  <div className="flex items-center gap-3">
+                    <div className="w-8 h-8 bg-orange-500 rounded-full flex items-center justify-center text-white font-semibold text-sm flex-shrink-0">
+                      {idx + 1}
+                    </div>
+                    <div className="min-w-0">
+                      <div className="font-medium text-gray-900 truncate">{approver.approverName}</div>
+                      <div className="text-xs text-gray-500">{approver.totalApproved} requests approved</div>
+                    </div>
+                  </div>
+                  <span
+                    className={`px-2 py-1 rounded text-xs font-medium ${getTATColorClass(tatPercent)} flex-shrink-0`}
+                  >
+                    {tatPercent}% TAT
+                  </span>
+                </div>
+                <div className="grid grid-cols-2 gap-4 mt-3">
+                  <div>
+                    <div className="text-xs text-gray-500">Avg Response</div>
+                    <div className="text-sm font-medium text-gray-900">
+                      {formatHoursMinutes(approver.avgResponseHours)}
+                    </div>
+                  </div>
+                  <div>
+                    <div className="text-xs text-gray-500">Pending</div>
+                    <div className="text-sm font-medium text-gray-900">
+                      <span className="bg-gray-500 text-white px-2 py-1 rounded text-xs">
+                        {approver.pendingCount}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+
+        {/* Pagination for Approver Performance */}
+        <div className="mt-4">
+          <Pagination
+            currentPage={pagination.page}
+            totalPages={pagination.totalPages}
+            totalRecords={pagination.totalRecords}
+            itemsPerPage={10}
+            onPageChange={onPageChange}
+            itemLabel="approvers"
+            testIdPrefix="dashboard-approver-pagination"
+          />
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
diff --git a/src/pages/Dashboard/components/sections/CriticalAlertsSection.tsx b/src/pages/Dashboard/components/sections/CriticalAlertsSection.tsx
new file mode 100644
index 0000000..d344831
--- /dev/null
+++ b/src/pages/Dashboard/components/sections/CriticalAlertsSection.tsx
@@ -0,0 +1,134 @@
+/**
+ * Critical Alerts Section Component
+ * Displays critical alerts with pagination
+ */
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Flame, CheckCircle, ArrowRight } from 'lucide-react';
+import { CriticalAlertCard } from '@/components/dashboard/CriticalAlertCard';
+import { CriticalRequest, CriticalAlertData } from '@/services/dashboard.service';
+import { getPageNumbers } from '../../utils/dashboardCalculations';
+
+interface CriticalAlertsSectionProps {
+  isAdmin: boolean;
+  breachedRequests: (CriticalRequest | CriticalAlertData)[];
+  pagination: {
+    page: number;
+    totalPages: number;
+    totalRecords: number;
+  };
+  onPageChange: (page: number) => void;
+  onNavigate?: (path: string) => void;
+}
+
+export function CriticalAlertsSection({
+  isAdmin,
+  breachedRequests,
+  pagination,
+  onPageChange,
+  onNavigate,
+}: CriticalAlertsSectionProps) {
+  return (
+    <Card
+      className="lg:col-span-2 shadow-md hover:shadow-lg transition-shadow flex flex-col overflow-hidden"
+      style={{ height: '100%' }}
+      data-testid="critical-alerts-section"
+    >
+      <CardHeader className="pb-3 sm:pb-4 flex-shrink-0">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2 sm:gap-3">
+            <div className="p-2 sm:p-3 bg-red-100 rounded-lg">
+              <Flame className="h-4 w-4 sm:h-5 sm:w-5 text-red-600" />
+            </div>
+            <div>
+              <CardTitle className="text-base sm:text-lg text-gray-900">Critical Alerts</CardTitle>
+              <CardDescription className="text-xs sm:text-sm text-gray-600">
+                {isAdmin ? 'Organization-wide' : 'My requests'}
+              </CardDescription>
+            </div>
+          </div>
+          <Badge
+            variant="destructive"
+            className={`font-semibold text-xs sm:text-sm ${pagination.totalRecords > 0 ? 'animate-pulse' : ''}`}
+            data-testid="critical-count-badge"
+          >
+            {pagination.totalRecords}
+          </Badge>
+        </div>
+      </CardHeader>
+      <CardContent
+        className="overflow-y-auto flex-1 p-4"
+        style={{ maxHeight: pagination.totalPages > 1 ? 'calc(100% - 140px)' : 'calc(100% - 80px)' }}
+      >
+        <div className="space-y-3 sm:space-y-4">
+          {breachedRequests.length === 0 ? (
+            <div className="text-center py-6 sm:py-8 text-muted-foreground" data-testid="no-critical-alerts">
+              <CheckCircle className="w-10 h-10 sm:w-12 sm:h-12 mx-auto mb-2 text-green-500" />
+              <p className="text-sm">No critical alerts</p>
+              <p className="text-xs">All requests are within TAT</p>
+            </div>
+          ) : (
+            breachedRequests.map((request) => (
+              <CriticalAlertCard
+                key={request.requestId}
+                alert={request}
+                onNavigate={(reqNum) => onNavigate?.(`request/${reqNum}`)}
+                testId="dashboard-critical-alert"
+              />
+            ))
+          )}
+        </div>
+      </CardContent>
+
+      {/* Pagination - Outside scrollable area, compact design */}
+      {pagination.totalPages > 1 && breachedRequests.length > 0 && (
+        <div className="border-t bg-gray-50 px-4 py-2 flex-shrink-0">
+          <div className="flex flex-col gap-2">
+            <div className="text-xs text-muted-foreground text-center">
+              Page {pagination.page} of {pagination.totalPages} ({pagination.totalRecords} total)
+            </div>
+            <div className="flex items-center justify-center gap-1 flex-wrap">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => onPageChange(pagination.page - 1)}
+                disabled={pagination.page === 1}
+                className="h-7 w-7 p-0"
+                data-testid="critical-pagination-prev"
+              >
+                <ArrowRight className="h-3 w-3 rotate-180" />
+              </Button>
+
+              {getPageNumbers(pagination.page, pagination.totalPages, 3).map((pageNum) => (
+                <Button
+                  key={pageNum}
+                  variant={pageNum === pagination.page ? 'default' : 'outline'}
+                  size="sm"
+                  onClick={() => onPageChange(pageNum)}
+                  className={`h-7 w-7 p-0 text-xs ${pageNum === pagination.page ? 'bg-red-600 text-white hover:bg-red-700' : ''}`}
+                  data-testid={`critical-pagination-page-${pageNum}`}
+                >
+                  {pageNum}
+                </Button>
+              ))}
+
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => onPageChange(pagination.page + 1)}
+                disabled={pagination.page === pagination.totalPages}
+                className="h-7 w-7 p-0"
+                data-testid="critical-pagination-next"
+              >
+                <ArrowRight className="h-3 w-3" />
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
+    </Card>
+  );
+}
+
diff --git a/src/pages/Dashboard/components/sections/PriorityDistributionReport.tsx b/src/pages/Dashboard/components/sections/PriorityDistributionReport.tsx
new file mode 100644
index 0000000..44afc61
--- /dev/null
+++ b/src/pages/Dashboard/components/sections/PriorityDistributionReport.tsx
@@ -0,0 +1,134 @@
+/**
+ * Priority Distribution Report Component
+ * Displays priority distribution analysis with pie chart
+ */
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Target } from 'lucide-react';
+import { PriorityDistribution } from '@/services/dashboard.service';
+import { formatHoursMinutes } from '@/utils/slaTracker';
+import { ResponsiveContainer, PieChart as RechartsPieChart, Pie, Cell, Tooltip } from 'recharts';
+
+interface PriorityDistributionReportProps {
+  priorityDistribution: PriorityDistribution[];
+  onNavigate?: (path: string) => void;
+}
+
+export function PriorityDistributionReport({
+  priorityDistribution,
+  onNavigate,
+}: PriorityDistributionReportProps) {
+  if (priorityDistribution.length === 0) return null;
+
+  return (
+    <Card className="shadow-md hover:shadow-lg transition-shadow" data-testid="priority-distribution-report">
+      <CardHeader className="pb-3">
+        <div className="flex items-center gap-3">
+          <div className="bg-green-50 p-2 sm:p-3 rounded-lg">
+            <Target className="h-5 w-5 sm:h-6 sm:w-6 text-green-600" />
+          </div>
+          <div>
+            <CardTitle className="text-base sm:text-lg lg:text-xl">Priority Distribution Report</CardTitle>
+            <CardDescription className="text-xs sm:text-sm">Express vs Standard workflow analysis</CardDescription>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent>
+        {/* Summary Cards */}
+        <div className="grid grid-cols-2 gap-4 mb-6">
+          {priorityDistribution.map((priority, idx) => {
+            const avgCycleTime = Number(priority.avgCycleTimeHours) || 0;
+            const isExpress = priority.priority === 'express';
+            const bgColor = isExpress ? 'bg-red-50' : 'bg-blue-50';
+            const dotColor = isExpress ? 'bg-red-500' : 'bg-blue-500';
+
+            return (
+              <div key={idx} className={`${bgColor} p-4 rounded-lg`} data-testid={`priority-card-${priority.priority}`}>
+                <div className="flex items-center gap-2 mb-2">
+                  <div className={`w-3 h-3 ${dotColor} rounded-full`}></div>
+                  <span className="text-sm text-gray-600 capitalize">{priority.priority}</span>
+                </div>
+                <div className="text-2xl sm:text-3xl font-bold text-gray-900 mb-1">{priority.totalCount}</div>
+                <div className="text-xs text-gray-500">Avg: {formatHoursMinutes(avgCycleTime)} cycle</div>
+              </div>
+            );
+          })}
+        </div>
+
+        {/* Pie Chart */}
+        <div className="flex justify-center">
+          <ResponsiveContainer width="100%" height={300}>
+            <RechartsPieChart>
+              <Pie
+                data={priorityDistribution.map((p) => ({
+                  name: p.priority.charAt(0).toUpperCase() + p.priority.slice(1),
+                  value: p.totalCount,
+                  priority: p.priority,
+                  percentage: Math.round(
+                    (p.totalCount / priorityDistribution.reduce((sum, item) => sum + item.totalCount, 0)) * 100
+                  ),
+                }))}
+                cx="50%"
+                cy="50%"
+                labelLine={true}
+                label={({ cx, cy, midAngle, outerRadius, name, percentage }) => {
+                  const RADIAN = Math.PI / 180;
+                  const radius = outerRadius + 35;
+                  const x = cx + radius * Math.cos(-midAngle * RADIAN);
+                  const y = cy + radius * Math.sin(-midAngle * RADIAN);
+
+                  return (
+                    <text
+                      x={x}
+                      y={y}
+                      fill="#1f2937"
+                      textAnchor={x > cx ? 'start' : 'end'}
+                      dominantBaseline="central"
+                      style={{
+                        fontSize: '14px',
+                        fontWeight: '600',
+                        pointerEvents: 'none',
+                      }}
+                    >
+                      {`${name}: ${percentage}%`}
+                    </text>
+                  );
+                }}
+                outerRadius={90}
+                fill="#8884d8"
+                dataKey="value"
+                onClick={(data: any) => {
+                  if (data && data.priority && onNavigate) {
+                    onNavigate(`requests?priority=${data.priority}`);
+                  }
+                }}
+                style={{ cursor: 'pointer' }}
+              >
+                {priorityDistribution.map((priority, index) => (
+                  <Cell
+                    key={`cell-${index}`}
+                    fill={priority.priority === 'express' ? '#ef4444' : '#3b82f6'}
+                    style={{ cursor: 'pointer' }}
+                  />
+                ))}
+              </Pie>
+              <Tooltip
+                contentStyle={{
+                  backgroundColor: '#ffffff',
+                  border: '1px solid #e5e7eb',
+                  borderRadius: '6px',
+                  fontSize: '12px',
+                }}
+                formatter={(value: any, _name: any, props: any) => {
+                  const priority = props.payload?.priority || '';
+                  return [`${value} requests`, `Click for ${priority}`];
+                }}
+              />
+            </RechartsPieChart>
+          </ResponsiveContainer>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
diff --git a/src/pages/Dashboard/components/sections/RecentActivitySection.tsx b/src/pages/Dashboard/components/sections/RecentActivitySection.tsx
new file mode 100644
index 0000000..3ceb9af
--- /dev/null
+++ b/src/pages/Dashboard/components/sections/RecentActivitySection.tsx
@@ -0,0 +1,151 @@
+/**
+ * Recent Activity Section Component
+ * Displays recent activity feed with pagination
+ */
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Activity, RefreshCw, ArrowRight } from 'lucide-react';
+import { ActivityFeedItem, ActivityData } from '@/components/dashboard/ActivityFeedItem';
+import { getPageNumbers } from '../../utils/dashboardCalculations';
+
+interface RecentActivitySectionProps {
+  isAdmin: boolean;
+  recentActivity: ActivityData[];
+  pagination: {
+    page: number;
+    totalPages: number;
+    totalRecords: number;
+  };
+  refreshing: boolean;
+  onPageChange: (page: number) => void;
+  onRefresh: () => void;
+  onNavigate?: (path: string) => void;
+  currentUserId?: string;
+  currentUserDisplayName?: string;
+  currentUserEmail?: string;
+}
+
+export function RecentActivitySection({
+  isAdmin,
+  recentActivity,
+  pagination,
+  refreshing,
+  onPageChange,
+  onRefresh,
+  onNavigate,
+  currentUserId,
+  currentUserDisplayName,
+  currentUserEmail,
+}: RecentActivitySectionProps) {
+  return (
+    <Card
+      className="lg:col-span-1 shadow-md hover:shadow-lg transition-shadow flex flex-col overflow-hidden"
+      style={{ height: '100%' }}
+      data-testid="recent-activity-section"
+    >
+      <CardHeader className="pb-3 sm:pb-4 flex-shrink-0">
+        <div className="flex items-center justify-between gap-2">
+          <div className="flex items-center gap-2 sm:gap-3 flex-1 min-w-0">
+            <div className="p-2 sm:p-3 bg-blue-100 rounded-lg">
+              <Activity className="h-4 w-4 sm:h-5 sm:w-5 text-blue-600" />
+            </div>
+            <div className="min-w-0">
+              <CardTitle className="text-base sm:text-lg text-gray-900">Recent Activity</CardTitle>
+              <CardDescription className="text-xs sm:text-sm text-gray-600 truncate">
+                {isAdmin ? 'All workflow updates' : 'My workflow updates'}
+              </CardDescription>
+            </div>
+          </div>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="text-blue-600 hover:bg-blue-50 font-medium flex-shrink-0 h-8 sm:h-9 px-2 sm:px-3 sm:min-w-[100px]"
+            onClick={onRefresh}
+            disabled={refreshing}
+            data-testid="activity-refresh-button"
+          >
+            <RefreshCw className={`w-3 h-3 sm:w-4 sm:h-4 ${refreshing ? 'animate-spin' : ''}`} />
+            <span className="hidden sm:inline ml-2 sm:w-[60px] sm:text-center">
+              {refreshing ? 'Refreshing...' : 'Refresh'}
+            </span>
+          </Button>
+        </div>
+      </CardHeader>
+      <CardContent
+        className="overflow-y-auto flex-1 p-4"
+        style={{ maxHeight: pagination.totalPages > 1 ? 'calc(100% - 140px)' : 'calc(100% - 80px)' }}
+      >
+        <div className="space-y-2 sm:space-y-3">
+          {recentActivity.length === 0 ? (
+            <div className="text-center py-6 sm:py-8 text-muted-foreground" data-testid="no-recent-activity">
+              <Activity className="w-10 h-10 sm:w-12 sm:h-12 mx-auto mb-2 text-gray-400" />
+              <p className="text-sm">No recent activity</p>
+              <p className="text-xs">Activity will appear here once requests are processed</p>
+            </div>
+          ) : (
+            recentActivity.map((activity) => (
+              <ActivityFeedItem
+                key={activity.activityId}
+                activity={activity}
+                currentUserId={currentUserId}
+                currentUserDisplayName={currentUserDisplayName}
+                currentUserEmail={currentUserEmail}
+                onNavigate={(reqNum) => onNavigate?.(`request/${reqNum}`)}
+                testId="dashboard-activity"
+              />
+            ))
+          )}
+        </div>
+      </CardContent>
+
+      {/* Pagination - Outside scrollable area, compact design */}
+      {pagination.totalPages > 1 && recentActivity.length > 0 && (
+        <div className="border-t bg-gray-50 px-4 py-2 flex-shrink-0">
+          <div className="flex flex-col gap-2">
+            <div className="text-xs text-muted-foreground text-center">
+              Page {pagination.page} of {pagination.totalPages} ({pagination.totalRecords} total)
+            </div>
+            <div className="flex items-center justify-center gap-1 flex-wrap">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => onPageChange(pagination.page - 1)}
+                disabled={pagination.page === 1}
+                className="h-7 w-7 p-0"
+                data-testid="activity-pagination-prev"
+              >
+                <ArrowRight className="h-3 w-3 rotate-180" />
+              </Button>
+
+              {getPageNumbers(pagination.page, pagination.totalPages, 3).map((pageNum) => (
+                <Button
+                  key={pageNum}
+                  variant={pageNum === pagination.page ? 'default' : 'outline'}
+                  size="sm"
+                  onClick={() => onPageChange(pageNum)}
+                  className={`h-7 w-7 p-0 text-xs ${pageNum === pagination.page ? 'bg-blue-600 text-white hover:bg-blue-700' : ''}`}
+                  data-testid={`activity-pagination-page-${pageNum}`}
+                >
+                  {pageNum}
+                </Button>
+              ))}
+
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => onPageChange(pagination.page + 1)}
+                disabled={pagination.page === pagination.totalPages}
+                className="h-7 w-7 p-0"
+                data-testid="activity-pagination-next"
+              >
+                <ArrowRight className="h-3 w-3" />
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
+    </Card>
+  );
+}
+
diff --git a/src/pages/Dashboard/components/sections/TATBreachReport.tsx b/src/pages/Dashboard/components/sections/TATBreachReport.tsx
new file mode 100644
index 0000000..aed2770
--- /dev/null
+++ b/src/pages/Dashboard/components/sections/TATBreachReport.tsx
@@ -0,0 +1,192 @@
+/**
+ * TAT Breach Report Component
+ * Displays requests that breached TAT with detailed table
+ */
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { AlertTriangle } from 'lucide-react';
+import { CriticalRequest, CriticalAlertData, DateRange } from '@/services/dashboard.service';
+import { Pagination } from '@/components/common/Pagination';
+import { formatBreachTime } from '../../utils/dashboardCalculations';
+import { KPIClickFilters } from '../../components/types/dashboard.types';
+
+interface TATBreachReportProps {
+  breachedRequests: (CriticalRequest | CriticalAlertData)[];
+  pagination: {
+    page: number;
+    totalPages: number;
+    totalRecords: number;
+  };
+  dateRange: DateRange;
+  customStartDate?: Date;
+  customEndDate?: Date;
+  onPageChange: (page: number) => void;
+  onKPIClick: (filters: KPIClickFilters) => void;
+  onNavigate?: (path: string) => void;
+}
+
+export function TATBreachReport({
+  breachedRequests,
+  pagination,
+  dateRange,
+  customStartDate,
+  customEndDate,
+  onPageChange,
+  onKPIClick,
+  onNavigate,
+}: TATBreachReportProps) {
+  if (breachedRequests.length === 0) return null;
+
+  const getFilterParams = () => ({
+    dateRange,
+    startDate: customStartDate,
+    endDate: customEndDate,
+  });
+
+  return (
+    <Card className="shadow-md hover:shadow-lg transition-shadow" data-testid="tat-breach-report">
+      <CardHeader>
+        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+          <div className="flex items-center gap-3">
+            <div className="bg-red-50 p-2 sm:p-3 rounded-lg">
+              <AlertTriangle className="h-5 w-5 sm:h-6 sm:w-6 text-red-600" />
+            </div>
+            <div>
+              <CardTitle className="text-base sm:text-lg lg:text-xl">TAT Breach Report</CardTitle>
+              <CardDescription className="text-xs sm:text-sm">
+                Requests that breached defined turnaround time
+              </CardDescription>
+            </div>
+          </div>
+          <Badge variant="destructive" className="text-sm font-medium self-start sm:self-auto">
+            {breachedRequests.length} {breachedRequests.length === 1 ? 'Breach' : 'Breaches'}
+          </Badge>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <div className="overflow-x-auto -mx-4 sm:mx-0">
+          <table className="w-full min-w-[1000px]">
+            <thead>
+              <tr className="border-b border-gray-200 bg-gray-50">
+                <th className="text-left py-3 px-4 text-sm font-medium text-gray-700">Request ID</th>
+                <th className="text-left py-3 px-4 text-sm font-medium text-gray-700">Title</th>
+                <th className="text-left py-3 px-4 text-sm font-medium text-gray-700">Department</th>
+                <th className="text-left py-3 px-4 text-sm font-medium text-gray-700">Approver</th>
+                <th className="text-left py-3 px-4 text-sm font-medium text-gray-700">Level</th>
+                <th className="text-left py-3 px-4 text-sm font-medium text-gray-700">Breach Time</th>
+                <th className="text-left py-3 px-4 text-sm font-medium text-gray-700 min-w-[200px] max-w-[300px]">
+                  Reason
+                </th>
+                <th className="text-left py-3 px-4 text-sm font-medium text-gray-700">Priority</th>
+              </tr>
+            </thead>
+            <tbody>
+              {breachedRequests.map((req: any, idx) => {
+                const breachTime = req.breachTime || 0;
+
+                return (
+                  <tr key={idx} className="border-b border-gray-100 hover:bg-gray-50 transition-colors">
+                    <td
+                      className="py-3 px-4 text-sm font-medium text-blue-600 cursor-pointer hover:underline"
+                      onClick={() => onNavigate?.(`request/${req.requestNumber}`)}
+                      data-testid={`breach-request-${req.requestNumber}`}
+                    >
+                      {req.requestNumber}
+                    </td>
+                    <td className="py-3 px-4 text-sm text-gray-900 max-w-xs truncate" title={req.title}>
+                      {req.title}
+                    </td>
+                    <td
+                      className="py-3 px-4 text-sm text-gray-700 cursor-pointer hover:text-blue-600 hover:underline"
+                      onClick={() => {
+                        if (req.department && req.department !== 'Unknown') {
+                          onKPIClick({
+                            ...getFilterParams(),
+                            department: req.department,
+                          });
+                        }
+                      }}
+                    >
+                      {req.department || 'Unknown'}
+                    </td>
+                    <td className="py-3 px-4 text-sm text-gray-700">
+                      {req.approverId ? (
+                        <span
+                          className="cursor-pointer hover:text-blue-600 hover:underline"
+                          onClick={() => {
+                            if (onNavigate) {
+                              const params = new URLSearchParams();
+                              params.set('approver', req.approverId!);
+                              params.set('approverType', 'current');
+                              params.set('slaCompliance', 'breached');
+                              onNavigate(`requests?${params.toString()}`);
+                            }
+                          }}
+                          title="Click to view all requests for this approver"
+                        >
+                          {req.approver || 'N/A'}
+                        </span>
+                      ) : (
+                        req.approver || 'N/A'
+                      )}
+                    </td>
+                    <td className="py-3 px-4 text-sm text-gray-700">
+                      {req.currentLevel && req.totalLevels ? (
+                        <span className="font-medium">
+                          {req.currentLevel}/{req.totalLevels}
+                        </span>
+                      ) : req.currentLevel ? (
+                        <span className="font-medium">{req.currentLevel}/—</span>
+                      ) : (
+                        <span className="text-gray-400">—</span>
+                      )}
+                    </td>
+                    <td className="py-3 px-4">
+                      <span className="bg-red-500 text-white px-2 py-1 rounded text-xs font-medium">
+                        {formatBreachTime(breachTime)}
+                      </span>
+                    </td>
+                    <td className="py-3 px-4 text-sm text-gray-700 min-w-[200px] max-w-[300px]">
+                      <div className="max-h-32 overflow-y-auto">
+                        <p className="whitespace-pre-line break-words leading-relaxed">
+                          {req.breachReason || 'TAT Exceeded'}
+                        </p>
+                      </div>
+                    </td>
+                    <td className="py-3 px-4">
+                      <Badge
+                        variant="outline"
+                        className={`text-xs font-medium ${
+                          req.priority === 'express'
+                            ? 'bg-orange-100 text-orange-800 border-orange-200'
+                            : 'bg-blue-100 text-blue-800 border-blue-200'
+                        }`}
+                      >
+                        {req.priority}
+                      </Badge>
+                    </td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        </div>
+
+        {/* Pagination for TAT Breach Report */}
+        <div className="mt-4">
+          <Pagination
+            currentPage={pagination.page}
+            totalPages={pagination.totalPages}
+            totalRecords={pagination.totalRecords}
+            itemsPerPage={10}
+            onPageChange={onPageChange}
+            itemLabel="critical requests"
+            testIdPrefix="dashboard-critical-pagination"
+          />
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
diff --git a/src/pages/Dashboard/components/sections/UpcomingDeadlinesSection.tsx b/src/pages/Dashboard/components/sections/UpcomingDeadlinesSection.tsx
new file mode 100644
index 0000000..6cece06
--- /dev/null
+++ b/src/pages/Dashboard/components/sections/UpcomingDeadlinesSection.tsx
@@ -0,0 +1,129 @@
+/**
+ * Upcoming Deadlines Section Component
+ * Displays upcoming deadlines with pagination
+ */
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Progress } from '@/components/ui/progress';
+import { Calendar as CalendarIcon } from 'lucide-react';
+import { UpcomingDeadline } from '@/services/dashboard.service';
+import { Pagination } from '@/components/common/Pagination';
+import { formatHoursMinutes } from '@/utils/slaTracker';
+
+interface UpcomingDeadlinesSectionProps {
+  isAdmin: boolean;
+  upcomingDeadlines: UpcomingDeadline[];
+  pagination: {
+    page: number;
+    totalPages: number;
+    totalRecords: number;
+  };
+  onPageChange: (page: number) => void;
+  onNavigate?: (path: string) => void;
+}
+
+export function UpcomingDeadlinesSection({
+  isAdmin,
+  upcomingDeadlines,
+  pagination,
+  onPageChange,
+  onNavigate,
+}: UpcomingDeadlinesSectionProps) {
+  if (upcomingDeadlines.length === 0) return null;
+
+  return (
+    <Card className="shadow-md hover:shadow-lg transition-shadow" data-testid="upcoming-deadlines-section">
+      <CardHeader>
+        <div className="flex items-center justify-between gap-2">
+          <div className="flex items-center gap-2">
+            <CalendarIcon className="h-4 w-4 sm:h-5 sm:w-5 text-orange-600" />
+            <div>
+              <CardTitle className="text-base sm:text-lg">Upcoming Deadlines</CardTitle>
+              <CardDescription className="text-xs sm:text-sm">
+                {isAdmin ? 'Current active levels organization-wide' : 'Requests awaiting your approval'}
+              </CardDescription>
+            </div>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-2 sm:space-y-3">
+          {upcomingDeadlines.map((deadline, idx) => {
+            const tatPercentage = Number(deadline.tatPercentageUsed) || 0;
+            const elapsedHours = Number(deadline.elapsedHours) || 0;
+            const remainingHours = Number(deadline.remainingHours) || 0;
+
+            return (
+              <div
+                key={idx}
+                className="p-3 sm:p-4 border rounded-lg hover:shadow-md transition-all cursor-pointer"
+                onClick={() => onNavigate?.(`request/${deadline.requestNumber}`)}
+                data-testid={`deadline-item-${deadline.requestNumber}`}
+              >
+                <div className="flex items-start justify-between gap-2 mb-2">
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-1 sm:gap-2 mb-1 flex-wrap">
+                      <span className="font-semibold text-xs sm:text-sm">{deadline.requestNumber}</span>
+                      <Badge
+                        variant="outline"
+                        className={`text-xs ${
+                          deadline.priority === 'express' ? 'bg-orange-50 text-orange-700' : 'bg-blue-50 text-blue-700'
+                        }`}
+                      >
+                        {deadline.priority}
+                      </Badge>
+                    </div>
+                    <p className="text-xs sm:text-sm text-muted-foreground truncate">{deadline.requestTitle}</p>
+                    <div className="flex items-center gap-2 mt-1 text-xs text-muted-foreground flex-wrap">
+                      <Badge variant="outline" className="text-xs bg-blue-50 text-blue-700 border-blue-200">
+                        Level {deadline.levelNumber || '?'}/{(deadline as any).totalLevels || '?'}
+                      </Badge>
+                      <span className="truncate">{deadline.approverName}</span>
+                    </div>
+                  </div>
+                  <div className="text-right flex-shrink-0">
+                    <p className="text-xs text-muted-foreground">TAT Used</p>
+                    <p
+                      className={`text-base sm:text-lg font-bold ${
+                        tatPercentage >= 80 ? 'text-red-600' : tatPercentage >= 50 ? 'text-orange-600' : 'text-green-600'
+                      }`}
+                    >
+                      {tatPercentage.toFixed(0)}%
+                    </p>
+                  </div>
+                </div>
+                <div className="space-y-1">
+                  <Progress
+                    value={tatPercentage}
+                    className={`h-1.5 sm:h-2 ${
+                      tatPercentage >= 80 ? 'bg-red-100' : tatPercentage >= 50 ? 'bg-orange-100' : 'bg-green-100'
+                    }`}
+                  />
+                  <div className="flex justify-between text-xs text-muted-foreground">
+                    <span>{formatHoursMinutes(elapsedHours)} elapsed</span>
+                    <span>{formatHoursMinutes(remainingHours)} left</span>
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+
+        {/* Pagination for Upcoming Deadlines */}
+        <div className="mt-4">
+          <Pagination
+            currentPage={pagination.page}
+            totalPages={pagination.totalPages}
+            totalRecords={pagination.totalRecords}
+            itemsPerPage={10}
+            onPageChange={onPageChange}
+            itemLabel="deadlines"
+            testIdPrefix="dashboard-deadlines-pagination"
+          />
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
diff --git a/src/pages/Dashboard/components/sections/UserKPICards.tsx b/src/pages/Dashboard/components/sections/UserKPICards.tsx
new file mode 100644
index 0000000..09e7992
--- /dev/null
+++ b/src/pages/Dashboard/components/sections/UserKPICards.tsx
@@ -0,0 +1,193 @@
+/**
+ * User KPI Cards Section Component
+ * Displays personal KPI cards for regular users
+ */
+
+import { FileText, Clock, Flame, CheckCircle } from 'lucide-react';
+import { KPICard } from '@/components/dashboard/KPICard';
+import { StatCard } from '@/components/dashboard/StatCard';
+import { Progress } from '@/components/ui/progress';
+import { DashboardKPIs, DateRange } from '@/services/dashboard.service';
+import { CriticalRequest, CriticalAlertData } from '@/services/dashboard.service';
+import { KPIClickFilters } from '../../components/types/dashboard.types';
+
+interface UserKPICardsProps {
+  kpis: DashboardKPIs | null;
+  criticalRequests: (CriticalRequest | CriticalAlertData)[];
+  dateRange: DateRange;
+  customStartDate?: Date;
+  customEndDate?: Date;
+  onKPIClick: (filters: KPIClickFilters) => void;
+}
+
+export function UserKPICards({
+  kpis,
+  criticalRequests,
+  dateRange,
+  customStartDate,
+  customEndDate,
+  onKPIClick,
+}: UserKPICardsProps) {
+  const getFilterParams = () => ({
+    dateRange,
+    startDate: customStartDate,
+    endDate: customEndDate,
+  });
+
+  const successRate = kpis && kpis.requestVolume.totalRequests > 0 
+    ? ((kpis.requestVolume.approvedRequests / kpis.requestVolume.totalRequests) * 100) 
+    : 0;
+
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4 items-stretch" data-testid="user-kpi-cards">
+      {/* My Requests Created */}
+      <KPICard
+        title="My Requests (Submitted)"
+        value={kpis?.requestVolume.totalRequests || 0}
+        icon={FileText}
+        iconBgColor="bg-blue-50"
+        iconColor="text-blue-600"
+        testId="kpi-my-requests"
+        onClick={() => onKPIClick(getFilterParams())}
+      >
+        <div className="grid grid-cols-2 gap-1.5 sm:gap-2">
+          <StatCard
+            label="Approved"
+            value={kpis?.requestVolume.approvedRequests || 0}
+            bgColor="bg-green-50"
+            textColor="text-green-600"
+            testId="stat-user-approved"
+            onClick={(e) => {
+              e.stopPropagation();
+              onKPIClick({ ...getFilterParams(), status: 'approved' });
+            }}
+          />
+          <StatCard
+            label="Pending"
+            value={kpis?.requestVolume.openRequests || 0}
+            bgColor="bg-orange-50"
+            textColor="text-orange-600"
+            testId="stat-user-pending"
+            onClick={(e) => {
+              e.stopPropagation();
+              onKPIClick({ ...getFilterParams(), status: 'pending' });
+            }}
+          />
+          <StatCard
+            label="Draft"
+            value={kpis?.requestVolume.draftRequests || 0}
+            bgColor="bg-gray-50"
+            textColor="text-gray-600"
+            testId="stat-user-draft"
+            onClick={(e) => {
+              e.stopPropagation();
+              onKPIClick({ ...getFilterParams(), status: 'draft' });
+            }}
+          />
+          <StatCard
+            label="Closed"
+            value={kpis?.requestVolume.closedRequests || 0}
+            bgColor="bg-blue-50"
+            textColor="text-blue-600"
+            testId="stat-user-closed"
+            onClick={(e) => {
+              e.stopPropagation();
+              onKPIClick({ ...getFilterParams(), status: 'closed' });
+            }}
+          />
+        </div>
+      </KPICard>
+
+      {/* Awaiting My Approval */}
+      <KPICard
+        title="Awaiting My Approval"
+        value={kpis?.approverLoad.pendingActions || 0}
+        icon={Clock}
+        iconBgColor="bg-orange-50"
+        iconColor="text-orange-600"
+        subtitle="at current level"
+        testId="kpi-pending-actions"
+      >
+        <div className="grid grid-cols-2 gap-2 mt-auto">
+          <StatCard
+            label="Approved Today"
+            value={kpis?.approverLoad.completedToday || 0}
+            bgColor="bg-blue-50"
+            textColor="text-blue-600"
+            testId="stat-today"
+          />
+          <StatCard
+            label="This Week"
+            value={kpis?.approverLoad.completedThisWeek || 0}
+            bgColor="bg-green-50"
+            textColor="text-green-600"
+            testId="stat-week"
+          />
+        </div>
+      </KPICard>
+
+      {/* Critical Alerts */}
+      <KPICard
+        title="Critical Alerts"
+        value={criticalRequests.length}
+        icon={Flame}
+        iconBgColor="bg-red-50"
+        iconColor="text-red-600"
+        testId="kpi-user-critical"
+      >
+        <div className="grid grid-cols-2 gap-2 mt-auto">
+          <StatCard
+            label="Breached"
+            value={criticalRequests.filter((r) => r.breachCount > 0).length}
+            bgColor="bg-orange-50"
+            textColor="text-red-600"
+            testId="stat-user-breached"
+          />
+          <StatCard
+            label="Warning"
+            value={criticalRequests.filter((r) => r.breachCount === 0).length}
+            bgColor="bg-yellow-50"
+            textColor="text-orange-600"
+            testId="stat-user-warning"
+          />
+        </div>
+      </KPICard>
+
+      {/* Success Rate with Progress Bar */}
+      <KPICard
+        title="Success Rate"
+        value={`${successRate.toFixed(0)}%`}
+        icon={CheckCircle}
+        iconBgColor="bg-green-50"
+        iconColor="text-green-600"
+        subtitle={`of ${kpis?.requestVolume.totalRequests || 0} requests approved`}
+        testId="kpi-success-rate"
+      >
+        <div className="space-y-4 mt-3 flex flex-col flex-1">
+          <div className="space-y-3">
+            <Progress 
+              value={successRate} 
+              className="h-4 bg-gray-200 [&>div]:bg-green-600"
+              data-testid="success-rate-progress"
+            />
+            <div className="flex justify-between items-center text-xs">
+              <span className="text-muted-foreground">Rejected</span>
+              <span className="font-semibold text-red-600">{kpis?.requestVolume.rejectedRequests || 0}</span>
+            </div>
+          </div>
+          <div className="grid grid-cols-2 gap-2 mt-auto">
+            <div className="bg-green-50 rounded-lg p-2 text-center">
+              <div className="text-xs text-muted-foreground mb-1">Approved</div>
+              <div className="text-lg font-semibold text-green-600">{kpis?.requestVolume.approvedRequests || 0}</div>
+            </div>
+            <div className="bg-red-50 rounded-lg p-2 text-center">
+              <div className="text-xs text-muted-foreground mb-1">Rejected</div>
+              <div className="text-lg font-semibold text-red-600">{kpis?.requestVolume.rejectedRequests || 0}</div>
+            </div>
+          </div>
+        </div>
+      </KPICard>
+    </div>
+  );
+}
+
diff --git a/src/pages/Dashboard/components/sections/UserMetricsSection.tsx b/src/pages/Dashboard/components/sections/UserMetricsSection.tsx
new file mode 100644
index 0000000..a325f0f
--- /dev/null
+++ b/src/pages/Dashboard/components/sections/UserMetricsSection.tsx
@@ -0,0 +1,76 @@
+/**
+ * User Metrics Section Component
+ * Displays personal metrics for regular users
+ */
+
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Separator } from '@/components/ui/separator';
+import { MessageSquare, Clock } from 'lucide-react';
+import { DashboardKPIs } from '@/services/dashboard.service';
+import { formatHoursMinutes } from '@/utils/slaTracker';
+
+interface UserMetricsSectionProps {
+  kpis: DashboardKPIs | null;
+}
+
+export function UserMetricsSection({ kpis }: UserMetricsSectionProps) {
+  if (!kpis) return null;
+
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6" data-testid="user-metrics-section">
+      {/* Collaboration Activity */}
+      <Card className="shadow-md hover:shadow-lg transition-shadow" data-testid="user-activity-card">
+        <CardHeader className="pb-3">
+          <div className="flex items-center gap-2">
+            <div className="p-2 bg-indigo-100 rounded-lg">
+              <MessageSquare className="h-4 w-4 text-indigo-600" />
+            </div>
+            <CardTitle className="text-sm">My Activity</CardTitle>
+          </div>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-3">
+            <div className="grid grid-cols-2 gap-2">
+              <div className="text-center p-3 bg-indigo-50 rounded">
+                <p className="text-xs text-muted-foreground mb-1">Work Notes</p>
+                <p className="text-xl sm:text-2xl font-bold text-indigo-600">{kpis.engagement.workNotesAdded}</p>
+              </div>
+              <div className="text-center p-3 bg-purple-50 rounded">
+                <p className="text-xs text-muted-foreground mb-1">Attachments</p>
+                <p className="text-xl sm:text-2xl font-bold text-purple-600">
+                  {kpis.engagement.attachmentsUploaded}
+                </p>
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Avg Response Time */}
+      <Card className="shadow-md hover:shadow-lg transition-shadow" data-testid="user-response-time-card">
+        <CardHeader className="pb-3">
+          <div className="flex items-center gap-2">
+            <div className="p-2 bg-purple-100 rounded-lg">
+              <Clock className="h-4 w-4 text-purple-600" />
+            </div>
+            <CardTitle className="text-sm">Avg Response Time</CardTitle>
+          </div>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-3">
+            <div className="flex items-baseline gap-2">
+              <span className="text-2xl sm:text-3xl font-bold text-purple-600">
+                {formatHoursMinutes(kpis.tatEfficiency.avgCycleTimeHours)}
+              </span>
+            </div>
+            <Separator />
+            <div className="text-xs text-muted-foreground text-center">
+              ≈ {kpis.tatEfficiency.avgCycleTimeDays.toFixed(1)} working days
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
diff --git a/src/pages/Dashboard/components/types/dashboard.types.ts b/src/pages/Dashboard/components/types/dashboard.types.ts
new file mode 100644
index 0000000..c8055bc
--- /dev/null
+++ b/src/pages/Dashboard/components/types/dashboard.types.ts
@@ -0,0 +1,16 @@
+/**
+ * Dashboard component types
+ */
+
+import { DateRange } from '@/services/dashboard.service';
+
+export interface KPIClickFilters {
+  status?: string;
+  priority?: string;
+  slaCompliance?: string;
+  department?: string;
+  dateRange?: DateRange;
+  startDate?: Date;
+  endDate?: Date;
+}
+
diff --git a/src/pages/Dashboard/hooks/useDashboardData.ts b/src/pages/Dashboard/hooks/useDashboardData.ts
new file mode 100644
index 0000000..649fc08
--- /dev/null
+++ b/src/pages/Dashboard/hooks/useDashboardData.ts
@@ -0,0 +1,203 @@
+/**
+ * Hook for fetching and managing dashboard data
+ */
+
+import { useState, useCallback, useRef } from 'react';
+import { dashboardService, type DashboardKPIs, type DateRange, type AIRemarkUtilization, type ApproverPerformance, type DepartmentStats, type PriorityDistribution, type UpcomingDeadline, type RecentActivity, type CriticalRequest } from '@/services/dashboard.service';
+import { ActivityData, CriticalAlertData } from '@/components/dashboard/ActivityFeedItem';
+
+interface UseDashboardDataOptions {
+  isAdmin: boolean;
+  dateRange: DateRange;
+  customStartDate?: Date;
+  customEndDate?: Date;
+  onPaginationUpdate: {
+    activity: (page: number, totalPages: number, totalRecords: number) => void;
+    critical: (page: number, totalPages: number, totalRecords: number) => void;
+    deadlines: (page: number, totalPages: number, totalRecords: number) => void;
+    approver: (page: number, totalPages: number, totalRecords: number) => void;
+  };
+}
+
+export function useDashboardData({
+  isAdmin,
+  dateRange,
+  customStartDate,
+  customEndDate,
+  onPaginationUpdate,
+}: UseDashboardDataOptions) {
+  const [kpis, setKpis] = useState<DashboardKPIs | null>(null);
+  const [recentActivity, setRecentActivity] = useState<ActivityData[]>([]);
+  const [criticalRequests, setCriticalRequests] = useState<(CriticalRequest | CriticalAlertData)[]>([]);
+  const [departmentStats, setDepartmentStats] = useState<DepartmentStats[]>([]);
+  const [priorityDistribution, setPriorityDistribution] = useState<PriorityDistribution[]>([]);
+  const [upcomingDeadlines, setUpcomingDeadlines] = useState<UpcomingDeadline[]>([]);
+  const [aiRemarkUtilization, setAiRemarkUtilization] = useState<AIRemarkUtilization | null>(null);
+  const [approverPerformance, setApproverPerformance] = useState<ApproverPerformance[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [refreshing, setRefreshing] = useState(false);
+
+  // Use ref to store latest pagination callbacks to avoid dependency issues
+  const paginationCallbacksRef = useRef(onPaginationUpdate);
+  paginationCallbacksRef.current = onPaginationUpdate;
+
+  const fetchDashboardData = useCallback(async (showRefreshing = false) => {
+    try {
+      if (showRefreshing) {
+        setRefreshing(true);
+      } else {
+        setLoading(true);
+      }
+
+      // Fetch common data for all users
+      const commonPromises = [
+        dashboardService.getKPIs(dateRange, customStartDate, customEndDate),
+        dashboardService.getRecentActivity(1, 10),
+        dashboardService.getCriticalRequests(1, 10),
+        dashboardService.getUpcomingDeadlines(1, 10)
+      ];
+
+      // Fetch admin-only data if user is admin
+      const adminPromises = isAdmin ? [
+        dashboardService.getDepartmentStats(dateRange, customStartDate, customEndDate),
+        dashboardService.getPriorityDistribution(dateRange, customStartDate, customEndDate),
+        dashboardService.getAIRemarkUtilization(dateRange, customStartDate, customEndDate),
+        dashboardService.getApproverPerformance(dateRange, 1, 10, customStartDate, customEndDate)
+      ] : [];
+
+      // Fetch all data in parallel
+      const results = await Promise.all([...commonPromises, ...adminPromises]);
+      
+      const kpisData = results[0] as DashboardKPIs;
+      const activityResult = results[1] as { activities: RecentActivity[]; pagination: { currentPage: number; totalPages: number; totalRecords: number; limit: number } };
+      const criticalResult = results[2] as { criticalRequests: CriticalRequest[]; pagination: { currentPage: number; totalPages: number; totalRecords: number; limit: number } };
+      const deadlinesResult = results[3] as { deadlines: UpcomingDeadline[]; pagination: { currentPage: number; totalPages: number; totalRecords: number; limit: number } };
+
+      setKpis(kpisData);
+      setRecentActivity(activityResult.activities);
+      paginationCallbacksRef.current.activity(
+        activityResult.pagination.currentPage,
+        activityResult.pagination.totalPages,
+        activityResult.pagination.totalRecords
+      );
+      
+      setCriticalRequests(criticalResult.criticalRequests);
+      paginationCallbacksRef.current.critical(
+        criticalResult.pagination.currentPage,
+        criticalResult.pagination.totalPages,
+        criticalResult.pagination.totalRecords
+      );
+      
+      setUpcomingDeadlines(deadlinesResult.deadlines);
+      paginationCallbacksRef.current.deadlines(
+        deadlinesResult.pagination.currentPage,
+        deadlinesResult.pagination.totalPages,
+        deadlinesResult.pagination.totalRecords
+      );
+      
+      // Only set admin-specific data if user is admin
+      if (isAdmin && results.length >= 8) {
+        const deptStats = results[4] as DepartmentStats[];
+        const priorityDist = results[5] as PriorityDistribution[];
+        const aiUtilization = results[6] as AIRemarkUtilization;
+        const approverResult = results[7] as { performance: ApproverPerformance[]; pagination: { currentPage: number; totalPages: number; totalRecords: number; limit: number } };
+        setDepartmentStats(deptStats);
+        setPriorityDistribution(priorityDist);
+        setAiRemarkUtilization(aiUtilization);
+        setApproverPerformance(approverResult.performance);
+        paginationCallbacksRef.current.approver(
+          approverResult.pagination.currentPage,
+          approverResult.pagination.totalPages,
+          approverResult.pagination.totalRecords
+        );
+      } else if (!isAdmin) {
+        // Reset admin-specific data for normal users
+        setDepartmentStats([]);
+        setPriorityDistribution([]);
+        setAiRemarkUtilization(null);
+        setApproverPerformance([]);
+      }
+    } catch (error) {
+      console.error('Failed to fetch dashboard data:', error);
+    } finally {
+      setLoading(false);
+      setRefreshing(false);
+    }
+  }, [isAdmin, dateRange, customStartDate, customEndDate]);
+
+  // Fetch individual data with pagination
+  const fetchRecentActivities = useCallback(async (page: number = 1) => {
+    try {
+      const result = await dashboardService.getRecentActivity(page, 10);
+      setRecentActivity(result.activities);
+      paginationCallbacksRef.current.activity(
+        result.pagination.currentPage,
+        result.pagination.totalPages,
+        result.pagination.totalRecords
+      );
+    } catch (error) {
+      console.error('Failed to fetch recent activities:', error);
+    }
+  }, []);
+
+  const fetchCriticalRequests = useCallback(async (page: number = 1) => {
+    try {
+      const result = await dashboardService.getCriticalRequests(page, 10);
+      setCriticalRequests(result.criticalRequests);
+      paginationCallbacksRef.current.critical(
+        result.pagination.currentPage,
+        result.pagination.totalPages,
+        result.pagination.totalRecords
+      );
+    } catch (error) {
+      console.error('Failed to fetch critical requests:', error);
+    }
+  }, []);
+
+  const fetchUpcomingDeadlines = useCallback(async (page: number = 1) => {
+    try {
+      const result = await dashboardService.getUpcomingDeadlines(page, 10);
+      setUpcomingDeadlines(result.deadlines);
+      paginationCallbacksRef.current.deadlines(
+        result.pagination.currentPage,
+        result.pagination.totalPages,
+        result.pagination.totalRecords
+      );
+    } catch (error) {
+      console.error('Failed to fetch upcoming deadlines:', error);
+    }
+  }, []);
+
+  const fetchApproverPerformance = useCallback(async (page: number = 1) => {
+    try {
+      const result = await dashboardService.getApproverPerformance(dateRange, page, 10, customStartDate, customEndDate);
+      setApproverPerformance(result.performance);
+      paginationCallbacksRef.current.approver(
+        result.pagination.currentPage,
+        result.pagination.totalPages,
+        result.pagination.totalRecords
+      );
+    } catch (error) {
+      console.error('Failed to fetch approver performance:', error);
+    }
+  }, [dateRange, customStartDate, customEndDate]);
+
+  return {
+    kpis,
+    recentActivity,
+    criticalRequests,
+    departmentStats,
+    priorityDistribution,
+    upcomingDeadlines,
+    aiRemarkUtilization,
+    approverPerformance,
+    loading,
+    refreshing,
+    fetchDashboardData,
+    fetchRecentActivities,
+    fetchCriticalRequests,
+    fetchUpcomingDeadlines,
+    fetchApproverPerformance,
+  };
+}
+
diff --git a/src/pages/Dashboard/hooks/useDashboardExports.ts b/src/pages/Dashboard/hooks/useDashboardExports.ts
new file mode 100644
index 0000000..862df49
--- /dev/null
+++ b/src/pages/Dashboard/hooks/useDashboardExports.ts
@@ -0,0 +1,52 @@
+/**
+ * Hook for managing dashboard export functionality
+ */
+
+import { useState, useCallback } from 'react';
+import { DateRange } from '@/services/dashboard.service';
+import { exportApproverPerformanceToCSV, exportDepartmentStatsToCSV } from '../utils/dashboardExports';
+
+export function useDashboardExports() {
+  const [exportingDeptStats, setExportingDeptStats] = useState(false);
+  const [exportingApproverPerformance, setExportingApproverPerformance] = useState(false);
+
+  const handleExportDepartmentStats = useCallback(async (
+    dateRange: DateRange,
+    customStartDate?: Date,
+    customEndDate?: Date
+  ) => {
+    try {
+      setExportingDeptStats(true);
+      await exportDepartmentStatsToCSV(dateRange, customStartDate, customEndDate);
+    } catch (error: any) {
+      console.error('Failed to export department stats:', error);
+      alert('Failed to export department statistics. Please try again.');
+    } finally {
+      setExportingDeptStats(false);
+    }
+  }, []);
+
+  const handleExportApproverPerformance = useCallback(async (
+    dateRange: DateRange,
+    customStartDate?: Date,
+    customEndDate?: Date
+  ) => {
+    try {
+      setExportingApproverPerformance(true);
+      await exportApproverPerformanceToCSV(dateRange, customStartDate, customEndDate);
+    } catch (error: any) {
+      console.error('Failed to export approver performance:', error);
+      alert('Failed to export approver performance data. Please try again.');
+    } finally {
+      setExportingApproverPerformance(false);
+    }
+  }, []);
+
+  return {
+    exportingDeptStats,
+    exportingApproverPerformance,
+    handleExportDepartmentStats,
+    handleExportApproverPerformance,
+  };
+}
+
diff --git a/src/pages/Dashboard/hooks/useDashboardFilters.ts b/src/pages/Dashboard/hooks/useDashboardFilters.ts
new file mode 100644
index 0000000..26b23e3
--- /dev/null
+++ b/src/pages/Dashboard/hooks/useDashboardFilters.ts
@@ -0,0 +1,62 @@
+/**
+ * Hook for managing dashboard filters (date range, custom dates)
+ */
+
+import { useState, useCallback } from 'react';
+import { DateRange } from '@/services/dashboard.service';
+
+export function useDashboardFilters() {
+  const [dateRange, setDateRange] = useState<DateRange>('month');
+  const [customStartDate, setCustomStartDate] = useState<Date | undefined>(undefined);
+  const [customEndDate, setCustomEndDate] = useState<Date | undefined>(undefined);
+  const [showCustomDatePicker, setShowCustomDatePicker] = useState(false);
+
+  const handleDateRangeChange = useCallback((value: string) => {
+    const newRange = value as DateRange;
+    setDateRange(newRange);
+    if (newRange !== 'custom') {
+      setCustomStartDate(undefined);
+      setCustomEndDate(undefined);
+      setShowCustomDatePicker(false);
+    } else {
+      setShowCustomDatePicker(true);
+    }
+  }, []);
+
+  const handleApplyCustomDate = useCallback((onApply: (start: Date, end: Date) => void) => {
+    if (customStartDate && customEndDate) {
+      if (customStartDate > customEndDate) {
+        // Swap dates if start is after end
+        const temp = customStartDate;
+        setCustomStartDate(customEndDate);
+        setCustomEndDate(temp);
+        onApply(customEndDate, temp);
+      } else {
+        onApply(customStartDate, customEndDate);
+      }
+      setShowCustomDatePicker(false);
+    }
+  }, [customStartDate, customEndDate]);
+
+  const resetCustomDates = useCallback(() => {
+    setCustomStartDate(undefined);
+    setCustomEndDate(undefined);
+    setShowCustomDatePicker(false);
+    setDateRange('month');
+  }, []);
+
+  return {
+    dateRange,
+    customStartDate,
+    customEndDate,
+    showCustomDatePicker,
+    setDateRange,
+    setCustomStartDate,
+    setCustomEndDate,
+    setShowCustomDatePicker,
+    handleDateRangeChange,
+    handleApplyCustomDate,
+    resetCustomDates,
+  };
+}
+
diff --git a/src/pages/Dashboard/hooks/useDashboardPagination.ts b/src/pages/Dashboard/hooks/useDashboardPagination.ts
new file mode 100644
index 0000000..4778954
--- /dev/null
+++ b/src/pages/Dashboard/hooks/useDashboardPagination.ts
@@ -0,0 +1,97 @@
+/**
+ * Hook for managing dashboard pagination state and handlers
+ */
+
+import { useState, useCallback } from 'react';
+
+interface PaginationState {
+  page: number;
+  totalPages: number;
+  totalRecords: number;
+}
+
+export function useDashboardPagination() {
+  const [activity, setActivity] = useState<PaginationState>({
+    page: 1,
+    totalPages: 1,
+    totalRecords: 0,
+  });
+  
+  const [critical, setCritical] = useState<PaginationState>({
+    page: 1,
+    totalPages: 1,
+    totalRecords: 0,
+  });
+  
+  const [deadlines, setDeadlines] = useState<PaginationState>({
+    page: 1,
+    totalPages: 1,
+    totalRecords: 0,
+  });
+  
+  const [approver, setApprover] = useState<PaginationState>({
+    page: 1,
+    totalPages: 1,
+    totalRecords: 0,
+  });
+
+  const updateActivityPagination = useCallback((page: number, totalPages: number, totalRecords: number) => {
+    setActivity({ page, totalPages, totalRecords });
+  }, []);
+
+  const updateCriticalPagination = useCallback((page: number, totalPages: number, totalRecords: number) => {
+    setCritical({ page, totalPages, totalRecords });
+  }, []);
+
+  const updateDeadlinesPagination = useCallback((page: number, totalPages: number, totalRecords: number) => {
+    setDeadlines({ page, totalPages, totalRecords });
+  }, []);
+
+  const updateApproverPagination = useCallback((page: number, totalPages: number, totalRecords: number) => {
+    setApprover({ page, totalPages, totalRecords });
+  }, []);
+
+  const handleActivityPageChange = useCallback((newPage: number, onPageChange: (page: number) => void) => {
+    if (newPage >= 1 && newPage <= activity.totalPages) {
+      setActivity(prev => ({ ...prev, page: newPage }));
+      onPageChange(newPage);
+    }
+  }, [activity.totalPages]);
+
+  const handleCriticalPageChange = useCallback((newPage: number, onPageChange: (page: number) => void) => {
+    if (newPage >= 1 && newPage <= critical.totalPages) {
+      setCritical(prev => ({ ...prev, page: newPage }));
+      onPageChange(newPage);
+    }
+  }, [critical.totalPages]);
+
+  const handleDeadlinesPageChange = useCallback((newPage: number, onPageChange: (page: number) => void) => {
+    if (newPage >= 1 && newPage <= deadlines.totalPages) {
+      setDeadlines(prev => ({ ...prev, page: newPage }));
+      onPageChange(newPage);
+    }
+  }, [deadlines.totalPages]);
+
+  const handleApproverPageChange = useCallback((newPage: number, onPageChange: (page: number) => void) => {
+    if (newPage >= 1 && newPage <= approver.totalPages) {
+      setApprover(prev => ({ ...prev, page: newPage }));
+      onPageChange(newPage);
+    }
+  }, [approver.totalPages]);
+
+  return {
+    activity,
+    critical,
+    deadlines,
+    approver,
+    updateActivityPagination,
+    updateCriticalPagination,
+    updateDeadlinesPagination,
+    updateApproverPagination,
+    handleActivityPageChange,
+    handleCriticalPageChange,
+    handleDeadlinesPageChange,
+    handleApproverPageChange,
+  };
+}
+
diff --git a/src/pages/Dashboard/types/dashboard.types.ts b/src/pages/Dashboard/types/dashboard.types.ts
new file mode 100644
index 0000000..d9e4f52
--- /dev/null
+++ b/src/pages/Dashboard/types/dashboard.types.ts
@@ -0,0 +1,62 @@
+/**
+ * Dashboard-specific TypeScript types and interfaces
+ */
+
+import { DateRange, DashboardKPIs, CriticalRequest, UpcomingDeadline, RecentActivity, DepartmentStats, PriorityDistribution, AIRemarkUtilization, ApproverPerformance } from '@/services/dashboard.service';
+import { ActivityData, CriticalAlertData } from '@/components/dashboard/ActivityFeedItem';
+
+export interface DashboardFilters {
+  dateRange: DateRange;
+  customStartDate?: Date;
+  customEndDate?: Date;
+  showCustomDatePicker: boolean;
+}
+
+export interface DashboardPagination {
+  activity: {
+    page: number;
+    totalPages: number;
+    totalRecords: number;
+  };
+  critical: {
+    page: number;
+    totalPages: number;
+    totalRecords: number;
+  };
+  deadlines: {
+    page: number;
+    totalPages: number;
+    totalRecords: number;
+  };
+  approver: {
+    page: number;
+    totalPages: number;
+    totalRecords: number;
+  };
+}
+
+export interface DashboardState {
+  kpis: DashboardKPIs | null;
+  recentActivity: ActivityData[];
+  criticalRequests: (CriticalRequest | CriticalAlertData)[];
+  departmentStats: DepartmentStats[];
+  priorityDistribution: PriorityDistribution[];
+  upcomingDeadlines: UpcomingDeadline[];
+  aiRemarkUtilization: AIRemarkUtilization | null;
+  approverPerformance: ApproverPerformance[];
+  loading: boolean;
+  refreshing: boolean;
+  exportingDeptStats: boolean;
+  exportingApproverPerformance: boolean;
+}
+
+export interface KPIClickFilters {
+  status?: string;
+  priority?: string;
+  slaCompliance?: string;
+  department?: string;
+  dateRange?: DateRange;
+  startDate?: Date;
+  endDate?: Date;
+}
+
diff --git a/src/pages/Dashboard/utils/dashboardCalculations.ts b/src/pages/Dashboard/utils/dashboardCalculations.ts
new file mode 100644
index 0000000..80db3dc
--- /dev/null
+++ b/src/pages/Dashboard/utils/dashboardCalculations.ts
@@ -0,0 +1,91 @@
+/**
+ * Dashboard calculation and filtering utilities
+ */
+
+import { CriticalRequest, UpcomingDeadline } from '@/services/dashboard.service';
+import { CriticalAlertData } from '@/components/dashboard/CriticalAlertCard';
+
+/**
+ * Filter critical requests to show only breached requests
+ */
+export function getBreachedRequests(
+  criticalRequests: (CriticalRequest | CriticalAlertData)[]
+): (CriticalRequest | CriticalAlertData)[] {
+  return criticalRequests.filter(r => {
+    const isBreached = (r.breachCount || 0) > 0;
+    const isCritical = (r as any).isCritical === true;
+    const status = (r as any).status;
+    
+    if (status) {
+      const isPendingOrInProgress = status === 'pending' || status === 'in-progress' || 
+                                     status === 'PENDING' || status === 'IN_PROGRESS';
+      return (isBreached || isCritical) && isPendingOrInProgress;
+    }
+    
+    return isBreached || isCritical;
+  });
+}
+
+/**
+ * Filter upcoming deadlines to show only requests about to breach (not yet breached)
+ */
+export function getUpcomingDeadlinesNotBreached(
+  upcomingDeadlines: UpcomingDeadline[]
+): UpcomingDeadline[] {
+  return upcomingDeadlines.filter(deadline => {
+    const tatPercentage = Number(deadline.tatPercentageUsed) || 0;
+    const remainingHours = Number(deadline.remainingHours) || 0;
+    return remainingHours > 0 && tatPercentage < 100;
+  });
+}
+
+/**
+ * Format breach time for display
+ */
+export function formatBreachTime(hours: number): string {
+  if (hours <= 0) return 'Just breached';
+  if (hours < 1) return `${Math.round(hours * 60)} min`;
+  if (hours < 24) {
+    const h = Math.floor(hours);
+    const m = Math.round((hours - h) * 60);
+    return m > 0 ? `${h}h ${m}m` : `${h}h`;
+  }
+  const days = Math.floor(hours / 24);
+  const remainingHours = hours % 24;
+  if (remainingHours > 0) {
+    const h = Math.floor(remainingHours);
+    const m = Math.round((remainingHours - h) * 60);
+    return m > 0 ? `${days}d ${h}h ${m}m` : `${days}d ${h}h`;
+  }
+  return `${days}d`;
+}
+
+/**
+ * Get TAT color class based on percentage
+ */
+export function getTATColorClass(tat: number): string {
+  if (tat >= 95) return 'bg-green-100 text-green-700';
+  if (tat >= 90) return 'bg-blue-100 text-blue-700';
+  if (tat >= 85) return 'bg-orange-100 text-orange-700';
+  return 'bg-red-100 text-red-700';
+}
+
+/**
+ * Get page numbers for pagination display
+ */
+export function getPageNumbers(currentPage: number, totalPages: number, maxPagesToShow: number = 3): number[] {
+  const pages = [];
+  let startPage = Math.max(1, 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;
+}
+
diff --git a/src/pages/Dashboard/utils/dashboardExports.ts b/src/pages/Dashboard/utils/dashboardExports.ts
new file mode 100644
index 0000000..0fdfa02
--- /dev/null
+++ b/src/pages/Dashboard/utils/dashboardExports.ts
@@ -0,0 +1,110 @@
+/**
+ * Dashboard export utility functions
+ * Handles CSV exports for dashboard data
+ */
+
+import { ApproverPerformance, DateRange } from '@/services/dashboard.service';
+import { dashboardService } from '@/services/dashboard.service';
+import { formatHoursMinutes } from '@/utils/slaTracker';
+
+/**
+ * Export Approver Performance data to CSV
+ */
+export async function exportApproverPerformanceToCSV(
+  dateRange: DateRange,
+  customStartDate?: Date,
+  customEndDate?: Date
+): Promise<void> {
+  // Fetch all approver performance data (no pagination)
+  const allData: ApproverPerformance[] = [];
+  let currentPage = 1;
+  let hasMore = true;
+  const maxPages = 100; // Safety limit
+  
+  while (hasMore && currentPage <= maxPages) {
+    const result = await dashboardService.getApproverPerformance(
+      dateRange,
+      currentPage,
+      100, // Large page size
+      customStartDate,
+      customEndDate
+    );
+    
+    if (result.performance && result.performance.length > 0) {
+      allData.push(...result.performance);
+      currentPage++;
+      hasMore = currentPage <= result.pagination.totalPages;
+    } else {
+      hasMore = false;
+    }
+  }
+  
+  // Convert to CSV format
+  const csvRows = [
+    ['Approver Name', 'Total Approved', 'TAT Compliance (%)', 'Avg Response Time', 'Pending Count'].join(',')
+  ];
+  
+  allData.forEach((approver) => {
+    const row = [
+      `"${(approver.approverName || 'Unknown').replace(/"/g, '""')}"`,
+      approver.totalApproved || 0,
+      approver.tatCompliancePercent || 0,
+      formatHoursMinutes(approver.avgResponseHours),
+      approver.pendingCount || 0
+    ];
+    csvRows.push(row.join(','));
+  });
+  
+  const csvContent = csvRows.join('\n');
+  const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
+  const link = document.createElement('a');
+  const url = URL.createObjectURL(blob);
+  link.setAttribute('href', url);
+  link.setAttribute('download', `approver-performance-report-${new Date().toISOString().split('T')[0]}.csv`);
+  link.style.visibility = 'hidden';
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+  URL.revokeObjectURL(url);
+}
+
+/**
+ * Export Department Stats data to CSV
+ */
+export async function exportDepartmentStatsToCSV(
+  dateRange: DateRange,
+  customStartDate?: Date,
+  customEndDate?: Date
+): Promise<void> {
+  // Get all department stats
+  const allDeptStats = await dashboardService.getDepartmentStats(dateRange, customStartDate, customEndDate);
+  
+  const csvRows = [
+    ['Department', 'Total Requests', 'Approved', 'Rejected', 'In Progress', 'Approval Rate (%)'].join(',')
+  ];
+  
+  allDeptStats.forEach((dept: any) => {
+    const row = [
+      `"${(dept.department || 'Unknown').replace(/"/g, '""')}"`,
+      dept.totalRequests || 0,
+      dept.approved || 0,
+      dept.rejected || 0,
+      dept.inProgress || 0,
+      dept.approvalRate || 0
+    ];
+    csvRows.push(row.join(','));
+  });
+  
+  const csvContent = csvRows.join('\n');
+  const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
+  const link = document.createElement('a');
+  const url = URL.createObjectURL(blob);
+  link.setAttribute('href', url);
+  link.setAttribute('download', `department-workflow-summary-${new Date().toISOString().split('T')[0]}.csv`);
+  link.style.visibility = 'hidden';
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+  URL.revokeObjectURL(url);
+}
+
diff --git a/src/pages/Dashboard/utils/dashboardNavigation.ts b/src/pages/Dashboard/utils/dashboardNavigation.ts
new file mode 100644
index 0000000..f9662d7
--- /dev/null
+++ b/src/pages/Dashboard/utils/dashboardNavigation.ts
@@ -0,0 +1,59 @@
+/**
+ * Dashboard navigation utility functions
+ */
+
+import { DateRange } from '@/services/dashboard.service';
+import { FileText, Clock, Settings, Activity, LucideIcon } from 'lucide-react';
+
+/**
+ * Build filter URL params for navigation
+ */
+export function buildFilterUrl(filters: {
+  status?: string;
+  priority?: string;
+  slaCompliance?: string;
+  department?: string;
+  dateRange?: DateRange;
+  startDate?: Date;
+  endDate?: Date;
+}): string {
+  const params = new URLSearchParams();
+  if (filters.status) params.set('status', filters.status);
+  if (filters.priority) params.set('priority', filters.priority);
+  if (filters.slaCompliance) params.set('slaCompliance', filters.slaCompliance);
+  if (filters.department) params.set('department', filters.department);
+  if (filters.dateRange) params.set('dateRange', filters.dateRange);
+  if (filters.startDate) params.set('startDate', filters.startDate.toISOString());
+  if (filters.endDate) params.set('endDate', filters.endDate.toISOString());
+  const queryString = params.toString();
+  return queryString ? `/requests?${queryString}` : '/requests';
+}
+
+export interface QuickAction {
+  label: string;
+  icon: LucideIcon;
+  action: () => void;
+  color: string;
+}
+
+/**
+ * Get quick actions for dashboard
+ */
+export function getQuickActions(
+  isAdmin: boolean,
+  onNewRequest?: () => void,
+  onNavigate?: (page: string) => void
+): QuickAction[] {
+  const actions: QuickAction[] = [
+    { label: 'New Request', icon: FileText, action: () => onNewRequest?.(), color: 'bg-emerald-600 hover:bg-emerald-700' },
+    { label: 'View Pending', icon: Clock, action: () => onNavigate?.('open-requests'), color: 'bg-blue-600 hover:bg-blue-700' },
+    { label: 'Settings', icon: Settings, action: () => onNavigate?.('settings'), color: 'bg-slate-600 hover:bg-slate-700' }
+  ];
+  
+  if (isAdmin) {
+    actions.splice(2, 0, { label: 'Reports', icon: Activity, action: () => onNavigate?.('detailed-reports'), color: 'bg-purple-600 hover:bg-purple-700' });
+  }
+  
+  return actions;
+}
+
diff --git a/src/pages/DetailedReports/DetailedReports.tsx b/src/pages/DetailedReports/DetailedReports.tsx
index c28fb73..104eeea 100644
--- a/src/pages/DetailedReports/DetailedReports.tsx
+++ b/src/pages/DetailedReports/DetailedReports.tsx
@@ -1,29 +1,19 @@
-import { useState, useEffect, useCallback, useMemo } from 'react';
+import { useState, useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
-import { Label } from '@/components/ui/label';
-import { 
-  ArrowLeft, 
-  FileText, 
-  Activity, 
-  History, 
-  Timer, 
-  Download, 
-  ChevronRight,
-  Search,
-  Loader2,
-  AlertCircle,
-  Calendar as CalendarIcon
-} from 'lucide-react';
-import { format } from 'date-fns';
-import { dashboardService, type DateRange } from '@/services/dashboard.service';
-import { formatHoursMinutes } from '@/utils/slaTracker';
+
+// Components
+import { DetailedReportsHeader } from './components/DetailedReportsHeader';
+import { RequestLifecycleReport } from './components/sections/RequestLifecycleReport';
+import { UserActivityLogReport } from './components/sections/UserActivityLogReport';
+import { WorkflowAgingReport } from './components/sections/WorkflowAgingReport';
+
+// Hooks
+import { useDateFilter } from './hooks/useDateFilter';
+import { useLifecycleReport } from './hooks/useLifecycleReport';
+import { useActivityLogReport } from './hooks/useActivityLogReport';
+import { useAgingReport } from './hooks/useAgingReport';
+import { useThreshold } from './hooks/useThreshold';
+import { useDetailedReportsExports } from './hooks/useDetailedReportsExports';
 
 interface DetailedReportsProps {
   onBack?: () => void;
@@ -31,1568 +21,186 @@ interface DetailedReportsProps {
 
 export function DetailedReports({ onBack }: DetailedReportsProps) {
   const navigate = useNavigate();
-  const [threshold, setThreshold] = useState('7');
-  const [thresholdError, setThresholdError] = useState<string | null>(null);
   const [searchQuery, setSearchQuery] = useState('');
-  
-  // Date range filters - shared across all reports
-  const [lifecycleDateRange, setLifecycleDateRange] = useState<DateRange>('month');
-  const [lifecycleCustomStartDate, setLifecycleCustomStartDate] = useState<Date | undefined>(undefined);
-  const [lifecycleCustomEndDate, setLifecycleCustomEndDate] = useState<Date | undefined>(undefined);
-  const [showLifecycleCustomDatePicker, setShowLifecycleCustomDatePicker] = useState(false);
-  // Temporary state for date picker inputs (only applied when "Apply" is clicked)
-  const [tempLifecycleCustomStartDate, setTempLifecycleCustomStartDate] = useState<Date | undefined>(undefined);
-  const [tempLifecycleCustomEndDate, setTempLifecycleCustomEndDate] = useState<Date | undefined>(undefined);
-  
-  const [activityDateRange, setActivityDateRange] = useState<DateRange>('month');
-  const [activityCustomStartDate, setActivityCustomStartDate] = useState<Date | undefined>(undefined);
-  const [activityCustomEndDate, setActivityCustomEndDate] = useState<Date | undefined>(undefined);
-  const [showActivityCustomDatePicker, setShowActivityCustomDatePicker] = useState(false);
-  // Temporary state for date picker inputs (only applied when "Apply" is clicked)
-  const [tempActivityCustomStartDate, setTempActivityCustomStartDate] = useState<Date | undefined>(undefined);
-  const [tempActivityCustomEndDate, setTempActivityCustomEndDate] = useState<Date | undefined>(undefined);
-  
-  const [agingDateRange, setAgingDateRange] = useState<DateRange>('month');
-  const [agingCustomStartDate, setAgingCustomStartDate] = useState<Date | undefined>(undefined);
-  const [agingCustomEndDate, setAgingCustomEndDate] = useState<Date | undefined>(undefined);
-  const [showAgingCustomDatePicker, setShowAgingCustomDatePicker] = useState(false);
-  // Temporary state for date picker inputs (only applied when "Apply" is clicked)
-  const [tempAgingCustomStartDate, setTempAgingCustomStartDate] = useState<Date | undefined>(undefined);
-  const [tempAgingCustomEndDate, setTempAgingCustomEndDate] = useState<Date | undefined>(undefined);
-  
-  // Activity log filters
   const [filterCategory, setFilterCategory] = useState<string>('all');
   const [filterSeverity, setFilterSeverity] = useState<string>('all');
 
-  // Loading states
-  const [loadingLifecycle, setLoadingLifecycle] = useState(true);
-  const [loadingActivity, setLoadingActivity] = useState(true);
-  const [loadingAging, setLoadingAging] = useState(true);
-  
-  // Pagination loading states (for subtle loading indicators)
-  const [loadingLifecyclePage, setLoadingLifecyclePage] = useState(false);
-  const [loadingActivityPage, setLoadingActivityPage] = useState(false);
-  const [loadingAgingPage, setLoadingAgingPage] = useState(false);
+  // Date filters for each report
+  const lifecycleDateFilter = useDateFilter('month');
+  const activityDateFilter = useDateFilter('month');
+  const agingDateFilter = useDateFilter('month');
 
-  // Error states
-  const [errorLifecycle, setErrorLifecycle] = useState<string | null>(null);
-  const [errorActivity, setErrorActivity] = useState<string | null>(null);
-  const [errorAging, setErrorAging] = useState<string | null>(null);
+  // Threshold management
+  const threshold = useThreshold('7');
 
-  // Data states
-  const [lifecycleRequests, setLifecycleRequests] = useState<any[]>([]);
-  const [activityLog, setActivityLog] = useState<any[]>([]);
-  const [agingWorkflows, setAgingWorkflows] = useState<any[]>([]);
+  // Data fetching hooks
+  const lifecycleReport = useLifecycleReport({
+    dateRange: lifecycleDateFilter.dateRange,
+    customStartDate: lifecycleDateFilter.customStartDate,
+    customEndDate: lifecycleDateFilter.customEndDate,
+  });
 
-  // Pagination states - Lifecycle uses 10 records per page (cards are taller), others use 20
-  const LIFECYCLE_RECORDS_PER_PAGE = 10;
-  const RECORDS_PER_PAGE = 20;
-  
-  const [lifecyclePage, setLifecyclePage] = useState(1);
-  const [lifecycleTotalPages, setLifecycleTotalPages] = useState(1);
-  const [lifecycleTotalRecords, setLifecycleTotalRecords] = useState(0);
-  
-  const [activityPage, setActivityPage] = useState(1);
-  const [activityTotalPages, setActivityTotalPages] = useState(1);
-  const [activityTotalRecords, setActivityTotalRecords] = useState(0);
-  
-  const [agingPage, setAgingPage] = useState(1);
-  const [agingTotalPages, setAgingTotalPages] = useState(1);
-  const [agingTotalRecords, setAgingTotalRecords] = useState(0);
-  
-  // Export loading states
-  const [exportingLifecycle, setExportingLifecycle] = useState(false);
-  const [exportingActivity, setExportingActivity] = useState(false);
-  const [exportingAging, setExportingAging] = useState(false);
+  const activityLogReport = useActivityLogReport({
+    dateRange: activityDateFilter.dateRange,
+    customStartDate: activityDateFilter.customStartDate,
+    customEndDate: activityDateFilter.customEndDate,
+    filterCategory,
+    filterSeverity,
+  });
 
-  const handleBack = () => {
+  const agingReport = useAgingReport({
+    threshold: threshold.threshold,
+    dateRange: agingDateFilter.dateRange,
+    customStartDate: agingDateFilter.customStartDate,
+    customEndDate: agingDateFilter.customEndDate,
+    searchQuery,
+  });
+
+  // Export hooks
+  const exports = useDetailedReportsExports();
+
+  // Navigation handlers
+  const handleBack = useCallback(() => {
     if (onBack) {
       onBack();
     } else {
       navigate('/dashboard');
     }
-  };
+  }, [onBack, navigate]);
 
-  const handleViewRequest = (requestId: string) => {
+  const handleViewRequest = useCallback((requestId: string) => {
     navigate(`/request/${requestId}`);
-  };
+  }, [navigate]);
 
+  // Export handlers
+  const handleExportLifecycle = useCallback(() => {
+    exports.handleExportLifecycle(
+      lifecycleDateFilter.dateRange,
+      lifecycleDateFilter.customStartDate,
+      lifecycleDateFilter.customEndDate
+    );
+  }, [exports, lifecycleDateFilter]);
 
-  // Helper function to format TAT hours (working hours to working days)
-  // Backend returns working hours, so we divide by 8 (working hours per day) not 24
-  const formatTAT = (hours: number | null | undefined): string => {
-    if (!hours && hours !== 0) return 'N/A';
-    const WORKING_HOURS_PER_DAY = 8;
-    if (hours < WORKING_HOURS_PER_DAY) return formatHoursMinutes(hours);
-    const days = Math.floor(hours / WORKING_HOURS_PER_DAY);
-    const remainingHours = hours % WORKING_HOURS_PER_DAY;
-    return remainingHours > 0 ? `${days}d ${formatHoursMinutes(remainingHours)}` : `${days}d`;
-  };
+  const handleExportActivity = useCallback(() => {
+    exports.handleExportActivity(
+      activityDateFilter.dateRange,
+      activityDateFilter.customStartDate,
+      activityDateFilter.customEndDate,
+      filterCategory,
+      filterSeverity
+    );
+  }, [exports, activityDateFilter, filterCategory, filterSeverity]);
 
-  // Helper function to format date
-  const formatDate = (date: string | null | undefined): string => {
-    if (!date) return 'N/A';
-    try {
-      const d = new Date(date);
-      return d.toLocaleDateString('en-US', { 
-        year: 'numeric', 
-        month: 'short', 
-        day: 'numeric',
-        hour: '2-digit',
-        minute: '2-digit'
-      });
-    } catch {
-      return date;
-    }
-  };
-
-  // Helper function to format date for CSV export (no commas, consistent format)
-  const formatDateForCSV = (date: string | null | undefined): string => {
-    if (!date) return 'N/A';
-    try {
-      const d = new Date(date);
-      // Format: YYYY-MM-DD HH:MM (no commas, Excel-friendly)
-      const year = d.getFullYear();
-      const month = String(d.getMonth() + 1).padStart(2, '0');
-      const day = String(d.getDate()).padStart(2, '0');
-      const hours = String(d.getHours()).padStart(2, '0');
-      const minutes = String(d.getMinutes()).padStart(2, '0');
-      return `${year}-${month}-${day} ${hours}:${minutes}`;
-    } catch {
-      return date;
-    }
-  };
-
-  // Helper function to map activity type to display label
-  const mapActivityType = (type: string, _activityDescription?: string): string => {
-    const typeLower = (type || '').toLowerCase();
-    if (typeLower.includes('created') || typeLower.includes('create')) return 'Created Request';
-    if (typeLower.includes('approval') || typeLower.includes('approved')) return 'Approved Request';
-    if (typeLower.includes('rejection') || typeLower.includes('rejected')) return 'Rejected Request';
-    if (typeLower.includes('comment')) return 'Added Comment';
-    if (typeLower.includes('view') || typeLower.includes('viewed')) return 'Viewed Request';
-    if (typeLower.includes('upload') || typeLower.includes('document')) return 'Uploaded Document';
-    if (typeLower.includes('login')) return 'Login';
-    return type || 'Activity';
-  };
-
-  // Fetch Request Lifecycle Report data
-  const fetchLifecycleData = useCallback(async (page: number = 1) => {
-    const isInitialLoad = page === 1 && lifecycleRequests.length === 0;
-    
-    try {
-      if (isInitialLoad) {
-        setLoadingLifecycle(true);
-      } else {
-        setLoadingLifecyclePage(true);
-      }
-      setErrorLifecycle(null);
-      const result = await dashboardService.getLifecycleReport(
-        page, 
-        LIFECYCLE_RECORDS_PER_PAGE,
-        lifecycleDateRange,
-        lifecycleCustomStartDate,
-        lifecycleCustomEndDate
+  const handleExportAging = useCallback(() => {
+    const thresholdValue = parseInt(threshold.threshold, 10);
+    if (!isNaN(thresholdValue) && thresholdValue >= 1) {
+      exports.handleExportAging(
+        thresholdValue,
+        agingDateFilter.dateRange,
+        agingDateFilter.customStartDate,
+        agingDateFilter.customEndDate
       );
-      
-      const mapped = result.lifecycleData.map((req: any) => {
-        const overallTAT = formatTAT(req.overallTATHours);
-
-        return {
-          id: req.requestNumber,
-          requestId: req.requestId,
-          title: req.title,
-          priority: req.priority || 'medium',
-          status: req.status,
-          initiator: req.initiatorName || 'Unknown',
-          initDate: formatDate(req.submissionDate),
-          currentStage: req.currentStageName || `Level ${req.currentLevel}`,
-          overallTAT,
-          currentLevel: req.currentLevel,
-          totalLevels: req.totalLevels,
-          breachCount: req.breachCount || 0
-        };
-      });
-
-      setLifecycleRequests(mapped);
-      setLifecyclePage(result.pagination.currentPage);
-      setLifecycleTotalPages(result.pagination.totalPages);
-      setLifecycleTotalRecords(result.pagination.totalRecords);
-    } catch (error: any) {
-      console.error('Failed to fetch lifecycle data:', error);
-      setErrorLifecycle(error?.message || 'Failed to load lifecycle data');
-    } finally {
-      if (isInitialLoad) {
-        setLoadingLifecycle(false);
-      } else {
-        setLoadingLifecyclePage(false);
-      }
     }
-  }, [lifecycleRequests.length, lifecycleDateRange, lifecycleCustomStartDate, lifecycleCustomEndDate]);
-
-  // Fetch User Activity Log data
-  const fetchActivityData = useCallback(async (page: number = 1) => {
-    const isInitialLoad = page === 1 && activityLog.length === 0;
-    
-    try {
-      if (isInitialLoad) {
-        setLoadingActivity(true);
-      } else {
-        setLoadingActivityPage(true);
-      }
-      setErrorActivity(null);
-      const result = await dashboardService.getActivityLogReport(
-        page, 
-        RECORDS_PER_PAGE,
-        activityDateRange, // dateRange
-        undefined, // filterUserId
-        undefined, // filterType
-        filterCategory && filterCategory !== 'all' ? filterCategory : undefined,
-        filterSeverity && filterSeverity !== 'all' ? filterSeverity : undefined,
-        activityCustomStartDate,
-        activityCustomEndDate
-      );
-      
-      const mapped = result.activities.map((activity: any) => {
-        const action = mapActivityType(activity.type || '', activity.details as string);
-        
-        // For login activities, show meaningful details
-        // System events use a special UUID: 00000000-0000-0000-0000-000000000001
-        const isLoginActivity = (activity.type || '').toLowerCase() === 'login' || 
-                               activity.requestId === '00000000-0000-0000-0000-000000000001' ||
-                               activity.requestId === 'SYSTEM_LOGIN'; // Legacy check
-        const details = isLoginActivity 
-          ? (activity.details || 'User login')
-          : (activity.requestTitle || activity.requestNumber || activity.details || 'N/A');
-        
-        return {
-          timestamp: activity.timestamp ? formatDate(activity.timestamp) : 'N/A',
-          user: activity.userName || 'Unknown',
-          action,
-          details,
-          ip: activity.ipAddress || 'N/A',
-          userAgent: activity.userAgent || null,
-          requestId: isLoginActivity ? 'System Login' : (activity.requestNumber || activity.requestId || '-'),
-          userId: activity.userId
-        };
-      });
-
-      setActivityLog(mapped);
-      setActivityPage(result.pagination.currentPage);
-      setActivityTotalPages(result.pagination.totalPages);
-      setActivityTotalRecords(result.pagination.totalRecords);
-    } catch (error: any) {
-      console.error('Failed to fetch activity data:', error);
-      setErrorActivity(error?.message || 'Failed to load activity data');
-    } finally {
-      if (isInitialLoad) {
-        setLoadingActivity(false);
-      } else {
-        setLoadingActivityPage(false);
-      }
-    }
-  }, [activityLog.length, filterCategory, filterSeverity, activityDateRange, activityCustomStartDate, activityCustomEndDate]);
-
-  // Fetch Workflow Aging Report data
-  const fetchAgingData = useCallback(async (page: number = 1) => {
-    const isInitialLoad = page === 1 && agingWorkflows.length === 0;
-    
-    try {
-      if (isInitialLoad) {
-        setLoadingAging(true);
-      } else {
-        setLoadingAgingPage(true);
-      }
-      setErrorAging(null);
-      
-      // Validate threshold before fetching
-      const thresholdValue = parseInt(threshold, 10);
-      if (isNaN(thresholdValue) || thresholdValue < 1) {
-        setErrorAging('Please enter a valid threshold (minimum 1 day)');
-        return;
-      }
-      
-      const result = await dashboardService.getWorkflowAgingReport(
-        thresholdValue, 
-        page, 
-        RECORDS_PER_PAGE,
-        agingDateRange,
-        agingCustomStartDate,
-        agingCustomEndDate
-      );
-
-      const mapped = result.agingData.map((req: any) => {
-        return {
-          id: req.requestNumber || req.requestId,
-          requestId: req.requestId,
-          title: req.title,
-          initiator: req.initiatorName || 'Unknown',
-          startDate: req.submissionDate ? new Date(req.submissionDate).toLocaleDateString() : 'N/A',
-          daysOpen: req.daysOpen,
-          currentStage: req.currentStageName || `Level ${req.currentLevel}`,
-          assignedTo: req.currentApproverName || 'N/A',
-          priority: req.priority || 'medium',
-          status: req.status || 'pending'
-        };
-      });
-
-      setAgingWorkflows(mapped);
-      setAgingPage(result.pagination.currentPage);
-      setAgingTotalPages(result.pagination.totalPages);
-      setAgingTotalRecords(result.pagination.totalRecords);
-    } catch (error: any) {
-      console.error('Failed to fetch aging data:', error);
-      setErrorAging(error?.message || 'Failed to load aging data');
-    } finally {
-      if (isInitialLoad) {
-        setLoadingAging(false);
-      } else {
-        setLoadingAgingPage(false);
-      }
-    }
-  }, [threshold, agingWorkflows.length, agingDateRange, agingCustomStartDate, agingCustomEndDate]);
-
-  // Fetch all data on mount
-  useEffect(() => {
-    fetchLifecycleData(1);
-    fetchActivityData(1);
-    fetchAgingData(1);
-  }, [fetchLifecycleData, fetchActivityData, fetchAgingData]);
-
-  // Refetch lifecycle data when date range changes
-  useEffect(() => {
-    // If custom range is selected but dates are not set, don't fetch yet
-    if (lifecycleDateRange === 'custom' && (!lifecycleCustomStartDate || !lifecycleCustomEndDate)) {
-      return;
-    }
-    fetchLifecycleData(1);
-  }, [lifecycleDateRange, lifecycleCustomStartDate, lifecycleCustomEndDate, fetchLifecycleData]);
-
-  // Refetch aging data when threshold or date range changes
-  useEffect(() => {
-    // If custom range is selected but dates are not set, don't fetch yet
-    if (agingDateRange === 'custom' && (!agingCustomStartDate || !agingCustomEndDate)) {
-      return;
-    }
-    fetchAgingData(1);
-  }, [threshold, agingDateRange, agingCustomStartDate, agingCustomEndDate, fetchAgingData]);
-
-  // Refetch activity data when filters or date range changes
-  useEffect(() => {
-    // If custom range is selected but dates are not set, don't fetch yet
-    if (activityDateRange === 'custom' && (!activityCustomStartDate || !activityCustomEndDate)) {
-      return;
-    }
-    fetchActivityData(1);
-  }, [filterCategory, filterSeverity, activityDateRange, activityCustomStartDate, activityCustomEndDate, fetchActivityData]);
-
-  // Date range change handlers
-  const handleLifecycleDateRangeChange = (value: string) => {
-    const newRange = value as DateRange;
-    setLifecycleDateRange(newRange);
-    if (newRange !== 'custom') {
-      setLifecycleCustomStartDate(undefined);
-      setLifecycleCustomEndDate(undefined);
-      setTempLifecycleCustomStartDate(undefined);
-      setTempLifecycleCustomEndDate(undefined);
-      setShowLifecycleCustomDatePicker(false);
-    } else {
-      // Initialize temp state from actual state when opening
-      setTempLifecycleCustomStartDate(lifecycleCustomStartDate);
-      setTempLifecycleCustomEndDate(lifecycleCustomEndDate);
-      setShowLifecycleCustomDatePicker(true);
-    }
-  };
-
-  const handleActivityDateRangeChange = (value: string) => {
-    const newRange = value as DateRange;
-    setActivityDateRange(newRange);
-    if (newRange !== 'custom') {
-      setActivityCustomStartDate(undefined);
-      setActivityCustomEndDate(undefined);
-      setTempActivityCustomStartDate(undefined);
-      setTempActivityCustomEndDate(undefined);
-      setShowActivityCustomDatePicker(false);
-    } else {
-      // Initialize temp state from actual state when opening
-      setTempActivityCustomStartDate(activityCustomStartDate);
-      setTempActivityCustomEndDate(activityCustomEndDate);
-      setShowActivityCustomDatePicker(true);
-    }
-  };
-
-  const handleAgingDateRangeChange = (value: string) => {
-    const newRange = value as DateRange;
-    setAgingDateRange(newRange);
-    if (newRange !== 'custom') {
-      setAgingCustomStartDate(undefined);
-      setAgingCustomEndDate(undefined);
-      setTempAgingCustomStartDate(undefined);
-      setTempAgingCustomEndDate(undefined);
-      setShowAgingCustomDatePicker(false);
-    } else {
-      // Initialize temp state from actual state when opening
-      setTempAgingCustomStartDate(agingCustomStartDate);
-      setTempAgingCustomEndDate(agingCustomEndDate);
-      setShowAgingCustomDatePicker(true);
-    }
-  };
-
-  const handleApplyLifecycleCustomDate = () => {
-    if (tempLifecycleCustomStartDate && tempLifecycleCustomEndDate) {
-      // Swap dates if start > end
-      if (tempLifecycleCustomStartDate > tempLifecycleCustomEndDate) {
-        const temp = tempLifecycleCustomStartDate;
-        setLifecycleCustomStartDate(tempLifecycleCustomEndDate);
-        setLifecycleCustomEndDate(temp);
-        setTempLifecycleCustomStartDate(tempLifecycleCustomEndDate);
-        setTempLifecycleCustomEndDate(temp);
-      } else {
-        setLifecycleCustomStartDate(tempLifecycleCustomStartDate);
-        setLifecycleCustomEndDate(tempLifecycleCustomEndDate);
-      }
-      setShowLifecycleCustomDatePicker(false);
-    }
-  };
-
-  const handleApplyActivityCustomDate = () => {
-    if (tempActivityCustomStartDate && tempActivityCustomEndDate) {
-      // Swap dates if start > end
-      if (tempActivityCustomStartDate > tempActivityCustomEndDate) {
-        const temp = tempActivityCustomStartDate;
-        setActivityCustomStartDate(tempActivityCustomEndDate);
-        setActivityCustomEndDate(temp);
-        setTempActivityCustomStartDate(tempActivityCustomEndDate);
-        setTempActivityCustomEndDate(temp);
-      } else {
-        setActivityCustomStartDate(tempActivityCustomStartDate);
-        setActivityCustomEndDate(tempActivityCustomEndDate);
-      }
-      setShowActivityCustomDatePicker(false);
-    }
-  };
-
-  const handleApplyAgingCustomDate = () => {
-    if (tempAgingCustomStartDate && tempAgingCustomEndDate) {
-      // Swap dates if start > end
-      if (tempAgingCustomStartDate > tempAgingCustomEndDate) {
-        const temp = tempAgingCustomStartDate;
-        setAgingCustomStartDate(tempAgingCustomEndDate);
-        setAgingCustomEndDate(temp);
-        setTempAgingCustomStartDate(tempAgingCustomEndDate);
-        setTempAgingCustomEndDate(temp);
-      } else {
-        setAgingCustomStartDate(tempAgingCustomStartDate);
-        setAgingCustomEndDate(tempAgingCustomEndDate);
-      }
-      setShowAgingCustomDatePicker(false);
-    }
-  };
-
-  // CSV Export Functions - Fetch all data for export
-  const exportLifecycleToCSV = async () => {
-    try {
-      setExportingLifecycle(true);
-      // Fetch all data with a very large limit
-      const result = await dashboardService.getLifecycleReport(
-        1, 
-        10000,
-        lifecycleDateRange,
-        lifecycleCustomStartDate,
-        lifecycleCustomEndDate
-      );
-      
-      // Use the same mapping logic as the display to ensure consistency
-      const csvRows = [
-        ['Request Number', 'Title', 'Priority', 'Status', 'Initiator', 'Submission Date', 'Current Stage', 'Overall TAT', 'Current Level', 'Total Levels', 'Breach Count'].join(',')
-      ];
-      
-      result.lifecycleData.forEach((req: any) => {
-        // Use the exact same mapping logic as fetchLifecycleData
-        const overallTAT = formatTAT(req.overallTATHours);
-        const mappedRequest = {
-          requestNumber: req.requestNumber || '',
-          title: req.title || '',
-          priority: req.priority || 'medium',
-          status: req.status || '',
-          initiator: req.initiatorName || 'Unknown',
-          submissionDate: req.submissionDate ? formatDate(req.submissionDate) : 'N/A',
-          currentStage: req.currentStageName || `Level ${req.currentLevel}`,
-          overallTAT: overallTAT,
-          currentLevel: req.currentLevel || '',
-          totalLevels: req.totalLevels || '',
-          breachCount: req.breachCount || 0
-        };
-        
-        // CSV row with proper escaping - all fields that might contain commas/spaces should be quoted
-        // Use CSV-safe date format (no commas)
-        const submissionDateCSV = req.submissionDate ? formatDateForCSV(req.submissionDate) : 'N/A';
-        const row = [
-          mappedRequest.requestNumber, // No quotes needed - just alphanumeric
-          `"${mappedRequest.title.replace(/"/g, '""')}"`, // Quote title (may contain commas)
-          mappedRequest.priority, // No quotes needed
-          mappedRequest.status, // No quotes needed
-          `"${mappedRequest.initiator.replace(/"/g, '""')}"`, // Quote initiator (may contain spaces)
-          submissionDateCSV, // CSV-safe date format (no commas, no quotes needed)
-          `"${mappedRequest.currentStage.replace(/"/g, '""')}"`, // Quote stage name (may contain spaces)
-          mappedRequest.overallTAT, // No quotes needed - format like "1.5h"
-          mappedRequest.currentLevel.toString(), // No quotes needed
-          mappedRequest.totalLevels.toString(), // No quotes needed
-          mappedRequest.breachCount.toString() // No quotes needed
-        ];
-        csvRows.push(row.join(','));
-      });
-      
-      const csvContent = csvRows.join('\n');
-      const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
-      const link = document.createElement('a');
-      const url = URL.createObjectURL(blob);
-      link.setAttribute('href', url);
-      link.setAttribute('download', `lifecycle-report-${new Date().toISOString().split('T')[0]}.csv`);
-      link.style.visibility = 'hidden';
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link);
-    } catch (error: any) {
-      console.error('Failed to export lifecycle data:', error);
-      alert('Failed to export lifecycle data. Please try again.');
-    } finally {
-      setExportingLifecycle(false);
-    }
-  };
-
-  const exportActivityToCSV = async () => {
-    try {
-      setExportingActivity(true);
-      // Fetch all data with a very large limit
-      const result = await dashboardService.getActivityLogReport(
-        1, 
-        10000,
-        activityDateRange,
-        undefined, // filterUserId
-        undefined, // filterType
-        filterCategory && filterCategory !== 'all' ? filterCategory : undefined,
-        filterSeverity && filterSeverity !== 'all' ? filterSeverity : undefined,
-        activityCustomStartDate,
-        activityCustomEndDate
-      );
-      
-      const csvRows = [
-        ['Timestamp', 'User', 'Action', 'Details', 'IP Address', 'User Agent', 'Request ID'].join(',')
-      ];
-      
-      result.activities.forEach((activity: any) => {
-        const action = mapActivityType(activity.type || '', activity.details as string);
-        // Use CSV-safe date format (no commas)
-        const timestampCSV = activity.timestamp ? formatDateForCSV(activity.timestamp) : 'N/A';
-        const row = [
-          timestampCSV, // CSV-safe date format (no commas, no quotes needed)
-          `"${(activity.userName || 'Unknown').replace(/"/g, '""')}"`,
-          `"${action.replace(/"/g, '""')}"`,
-          `"${(activity.requestTitle || activity.requestNumber || activity.details || 'N/A').replace(/"/g, '""')}"`,
-          activity.ipAddress || 'N/A',
-          `"${(activity.userAgent || '').replace(/"/g, '""')}"`,
-          activity.requestNumber || activity.requestId || '-'
-        ];
-        csvRows.push(row.join(','));
-      });
-      
-      const csvContent = csvRows.join('\n');
-      const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
-      const link = document.createElement('a');
-      const url = URL.createObjectURL(blob);
-      link.setAttribute('href', url);
-      link.setAttribute('download', `activity-log-report-${new Date().toISOString().split('T')[0]}.csv`);
-      link.style.visibility = 'hidden';
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link);
-    } catch (error: any) {
-      console.error('Failed to export activity data:', error);
-      alert('Failed to export activity data. Please try again.');
-    } finally {
-      setExportingActivity(false);
-    }
-  };
-
-  const exportAgingToCSV = async () => {
-    try {
-      setExportingAging(true);
-      // Fetch all data with a very large limit
-      const result = await dashboardService.getWorkflowAgingReport(
-        parseInt(threshold), 
-        1, 
-        10000,
-        agingDateRange,
-        agingCustomStartDate,
-        agingCustomEndDate
-      );
-      
-      const csvRows = [
-        ['Request ID', 'Title', 'Initiator', 'Start Date', 'Days Open (Business)', 'Current Stage', 'Assigned To', 'Priority', 'Status'].join(',')
-      ];
-      
-      result.agingData.forEach((req: any) => {
-        // Use CSV-safe date format (no commas)
-        const startDateCSV = req.submissionDate ? formatDateForCSV(req.submissionDate) : 'N/A';
-        const row = [
-          req.requestNumber || req.requestId || '',
-          `"${(req.title || '').replace(/"/g, '""')}"`,
-          `"${(req.initiatorName || 'Unknown').replace(/"/g, '""')}"`,
-          startDateCSV, // CSV-safe date format (no commas, no quotes needed)
-          req.daysOpen || 0,
-          `"${(req.currentStageName || `Level ${req.currentLevel}`).replace(/"/g, '""')}"`,
-          `"${(req.currentApproverName || 'N/A').replace(/"/g, '""')}"`,
-          req.priority || 'medium',
-          req.status || 'pending'
-        ];
-        csvRows.push(row.join(','));
-      });
-      
-      const csvContent = csvRows.join('\n');
-      const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
-      const link = document.createElement('a');
-      const url = URL.createObjectURL(blob);
-      link.setAttribute('href', url);
-      link.setAttribute('download', `workflow-aging-report-${new Date().toISOString().split('T')[0]}.csv`);
-      link.style.visibility = 'hidden';
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link);
-    } catch (error: any) {
-      console.error('Failed to export aging data:', error);
-      alert('Failed to export aging data. Please try again.');
-    } finally {
-      setExportingAging(false);
-    }
-  };
-
-  // Filter aging workflows based on search (client-side filtering for current page only)
-  const filteredAgingWorkflows = useMemo(() => {
-    return agingWorkflows.filter(workflow => {
-      if (!searchQuery) return true;
-      const query = searchQuery.toLowerCase();
-      return (
-        workflow.id?.toLowerCase().includes(query) ||
-        workflow.title?.toLowerCase().includes(query) ||
-        workflow.initiator?.toLowerCase().includes(query)
-      );
-    });
-  }, [agingWorkflows, searchQuery]);
-
-  const getActionBadgeColor = (action: string) => {
-    switch (action) {
-      case 'Login':
-        return 'text-blue-700 bg-blue-100 border-blue-200';
-      case 'Created Request':
-        return 'text-purple-700 bg-purple-100 border-purple-200';
-      case 'Approved Request':
-        return 'text-emerald-700 bg-emerald-100 border-emerald-200';
-      case 'Rejected Request':
-        return 'text-red-700 bg-red-100 border-red-200';
-      case 'Added Comment':
-        return 'text-amber-700 bg-amber-100 border-amber-200';
-      case 'Viewed Request':
-        return 'text-gray-700 bg-gray-100 border-gray-200';
-      case 'Uploaded Document':
-        return 'text-indigo-700 bg-indigo-100 border-indigo-200';
-      default:
-        return 'text-gray-700 bg-gray-100 border-gray-200';
-    }
-  };
-
-  const getPriorityColor = (priority: string) => {
-    switch (priority) {
-      case 'high':
-        return 'bg-red-100 text-red-800 border-red-200';
-      case 'medium':
-        return 'bg-orange-100 text-orange-800 border-orange-200';
-      case 'low':
-        return 'bg-green-100 text-green-800 border-green-200';
-      default:
-        return 'bg-gray-100 text-gray-800 border-gray-200';
-    }
-  };
-
-  const getStatusColor = (status: string) => {
-    switch (status) {
-      case 'Delayed':
-        return 'text-red-700 bg-red-100 border-red-200';
-      case 'On Time':
-        return 'text-emerald-700 bg-emerald-100 border-emerald-200';
-      case 'Pending':
-        return 'bg-orange-100 text-orange-800 border-orange-200';
-      default:
-        return 'bg-gray-100 text-gray-800 border-gray-200';
-    }
-  };
-
-  const getDaysOpenColor = (days: number) => {
-    if (days >= 20) return 'bg-red-600';
-    if (days >= 10) return 'bg-orange-500';
-    return 'bg-amber-500';
-  };
+  }, [exports, threshold.threshold, agingDateFilter]);
 
+  // Clear filters handler
+  const handleClearActivityFilters = useCallback(() => {
+    setFilterCategory('all');
+    setFilterSeverity('all');
+    activityDateFilter.reset();
+  }, [activityDateFilter]);
 
   return (
-    <div className="flex-1 p-3 lg:p-6 overflow-auto min-w-0">
+    <div className="flex-1 p-3 lg:p-6 overflow-auto min-w-0" data-testid="detailed-reports">
       <div className="space-y-6 max-w-7xl mx-auto p-4">
-        {/* Header */}
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-4">
-            <Button
-              variant="outline"
-              onClick={handleBack}
-              className="inline-flex items-center gap-2"
-            >
-              <ArrowLeft className="w-4 h-4 mr-2" />
-              Back to Dashboard
-            </Button>
-            <div className="flex items-center gap-3">
-              <div className="p-3 bg-purple-100 rounded-lg">
-                <FileText className="h-6 w-6 text-purple-600" />
-              </div>
-              <div>
-                <h1 className="text-2xl font-bold text-gray-900">Detailed Reports</h1>
-                <p className="text-sm text-gray-600">Comprehensive workflow and activity reports</p>
-              </div>
-            </div>
-          </div>
-        </div>
+        <DetailedReportsHeader onBack={handleBack} />
 
         {/* Request Lifecycle Report */}
-        <Card className="shadow-lg hover:shadow-xl transition-shadow">
-          <CardHeader>
-            <div className="flex items-center justify-between">
-              <div className="flex items-center gap-3">
-                <div className="p-3 bg-blue-100 rounded-lg">
-                  <Activity className="h-5 w-5 text-blue-600" />
-                </div>
-                <div>
-                  <CardTitle className="text-lg text-gray-900">Request Lifecycle Report</CardTitle>
-                  <CardDescription className="text-gray-600">
-                    End-to-end status with timeline and TAT compliance
-                  </CardDescription>
-                </div>
-              </div>
-              <Button 
-                variant="outline" 
-                size="sm" 
-                className="gap-2"
-                onClick={exportLifecycleToCSV}
-                disabled={exportingLifecycle}
-              >
-                <Download className="w-4 h-4" />
-                {exportingLifecycle ? 'Exporting...' : 'Download CSV'}
-              </Button>
-            </div>
-            <div className="mt-4 flex items-center gap-3 flex-wrap">
-              <CalendarIcon className="w-4 h-4 text-muted-foreground" />
-              <Select value={lifecycleDateRange} onValueChange={handleLifecycleDateRangeChange}>
-                <SelectTrigger className="w-[160px]">
-                  <SelectValue placeholder="Date Range" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="today">Today</SelectItem>
-                  <SelectItem value="week">This Week</SelectItem>
-                  <SelectItem value="month">This Month</SelectItem>
-                  <SelectItem value="custom">Custom Range</SelectItem>
-                </SelectContent>
-              </Select>
-              
-              {/* Custom Date Range Picker for Lifecycle */}
-              {lifecycleDateRange === 'custom' && (
-                <Popover open={showLifecycleCustomDatePicker} onOpenChange={setShowLifecycleCustomDatePicker}>
-                  <PopoverTrigger asChild>
-                    <Button variant="outline" size="sm" className="gap-2">
-                      <CalendarIcon className="w-4 h-4" />
-                      {lifecycleCustomStartDate && lifecycleCustomEndDate 
-                        ? `${format(lifecycleCustomStartDate, 'MMM d, yyyy')} - ${format(lifecycleCustomEndDate, 'MMM d, yyyy')}`
-                        : 'Select dates'}
-                    </Button>
-                  </PopoverTrigger>
-                  <PopoverContent className="w-auto p-4" align="start" sideOffset={8}>
-                    <div className="space-y-4">
-                      <div className="space-y-3">
-                        <div className="space-y-2">
-                          <Label htmlFor="lifecycle-start-date" className="text-sm font-medium">Start Date</Label>
-                          <Input
-                            id="lifecycle-start-date"
-                            type="date"
-                            value={tempLifecycleCustomStartDate ? format(tempLifecycleCustomStartDate, 'yyyy-MM-dd') : ''}
-                            onChange={(e) => {
-                              const date = e.target.value ? new Date(e.target.value) : undefined;
-                              if (date) {
-                                setTempLifecycleCustomStartDate(date);
-                                if (tempLifecycleCustomEndDate && date > tempLifecycleCustomEndDate) {
-                                  setTempLifecycleCustomEndDate(date);
-                                }
-                              } else {
-                                setTempLifecycleCustomStartDate(undefined);
-                              }
-                            }}
-                            max={format(new Date(), 'yyyy-MM-dd')}
-                            className="w-full"
-                          />
-                        </div>
-                        <div className="space-y-2">
-                          <Label htmlFor="lifecycle-end-date" className="text-sm font-medium">End Date</Label>
-                          <Input
-                            id="lifecycle-end-date"
-                            type="date"
-                            value={tempLifecycleCustomEndDate ? format(tempLifecycleCustomEndDate, 'yyyy-MM-dd') : ''}
-                            onChange={(e) => {
-                              const date = e.target.value ? new Date(e.target.value) : undefined;
-                              if (date) {
-                                setTempLifecycleCustomEndDate(date);
-                                if (tempLifecycleCustomStartDate && date < tempLifecycleCustomStartDate) {
-                                  setTempLifecycleCustomStartDate(date);
-                                }
-                              } else {
-                                setTempLifecycleCustomEndDate(undefined);
-                              }
-                            }}
-                            min={tempLifecycleCustomStartDate ? format(tempLifecycleCustomStartDate, 'yyyy-MM-dd') : undefined}
-                            max={format(new Date(), 'yyyy-MM-dd')}
-                            className="w-full"
-                          />
-                        </div>
-                      </div>
-                      <div className="flex gap-2 pt-2 border-t">
-                        <Button 
-                          size="sm" 
-                          onClick={handleApplyLifecycleCustomDate}
-                          disabled={!tempLifecycleCustomStartDate || !tempLifecycleCustomEndDate}
-                          className="flex-1 bg-re-green hover:bg-re-green/90"
-                        >
-                          Apply
-                        </Button>
-                        <Button 
-                          size="sm" 
-                          variant="outline"
-                          onClick={() => {
-                            setShowLifecycleCustomDatePicker(false);
-                            setTempLifecycleCustomStartDate(lifecycleCustomStartDate);
-                            setTempLifecycleCustomEndDate(lifecycleCustomEndDate);
-                            if (!lifecycleCustomStartDate || !lifecycleCustomEndDate) {
-                              setLifecycleCustomStartDate(undefined);
-                              setLifecycleCustomEndDate(undefined);
-                              setLifecycleDateRange('month');
-                            }
-                          }}
-                        >
-                          Cancel
-                        </Button>
-                      </div>
-                    </div>
-                  </PopoverContent>
-                </Popover>
-              )}
-            </div>
-          </CardHeader>
-          <CardContent>
-            {loadingLifecycle ? (
-              <div className="flex items-center justify-center py-12">
-                <Loader2 className="w-6 h-6 animate-spin text-gray-400" />
-                <span className="ml-2 text-sm text-gray-600">Loading lifecycle data...</span>
-              </div>
-            ) : errorLifecycle ? (
-              <div className="flex items-center justify-center py-12 text-red-600">
-                <AlertCircle className="w-5 h-5 mr-2" />
-                <span className="text-sm">{errorLifecycle}</span>
-              </div>
-            ) : lifecycleRequests.length === 0 ? (
-              <div className="text-center py-12 text-gray-500">
-                <p className="text-sm">No lifecycle data available</p>
-              </div>
-            ) : (
-              <div className="space-y-4">
-                {lifecycleRequests.map((request) => (
-                  <div key={request.id} className="border rounded-xl overflow-hidden">
-                    <div 
-                      className="p-4 bg-gradient-to-r from-gray-50 to-white hover:bg-gray-100 cursor-pointer transition-all"
-                      onClick={() => handleViewRequest(request.requestId || request.id)}
-                    >
-                      <div className="flex items-center justify-between">
-                        <div className="flex items-center gap-4">
-                          <div className="flex flex-col">
-                            <div className="flex items-center gap-2 mb-1">
-                              <button
-                                onClick={(e) => {
-                                  e.stopPropagation();
-                                  handleViewRequest(request.requestId || request.id);
-                                }}
-                                className="font-semibold text-sm text-blue-600 hover:text-blue-800 hover:underline cursor-pointer transition-colors"
-                              >
-                                {request.id}
-                              </button>
-                              <Badge className={getPriorityColor(request.priority)}>
-                                {request.priority}
-                              </Badge>
-                              <Badge className={getStatusColor(request.status)}>
-                                {request.status}
-                              </Badge>
-                            </div>
-                            <p className="text-sm text-gray-700">{request.title}</p>
-                            <p className="text-xs text-gray-500 mt-1">
-                            Initiated by <span className="font-medium">{request.initiator}</span> on {request.initDate}
-                          </p>
-                          {request.currentStage && !request.currentStage.includes('Level') && (
-                            <p className="text-xs text-gray-400 mt-0.5">Stage: {request.currentStage}</p>
-                          )}
-                          </div>
-                        </div>
-                        <div className="flex items-center gap-4">
-                          <div className="text-right">
-                            <p className="text-xs text-gray-500">Current Stage</p>
-                            <p className="text-sm font-semibold text-gray-900">{request.currentStage}</p>
-                            <p className="text-xs text-gray-400 mt-0.5">(Level {request.currentLevel}/{request.totalLevels})</p>
-                          </div>
-                          <div className="text-right">
-                            <p className="text-xs text-gray-500">Overall TAT</p>
-                            <p className="text-sm font-semibold text-gray-900">{request.overallTAT}</p>
-                            {request.breachCount > 0 && (
-                              <p className="text-xs text-red-500 mt-0.5">{request.breachCount} breach{request.breachCount > 1 ? 'es' : ''}</p>
-                            )}
-                          </div>
-                          <Button
-                            variant="ghost"
-                            size="sm"
-                            onClick={() => handleViewRequest(request.requestId || request.id)}
-                            className="gap-1.5"
-                          >
-                            <ChevronRight className="w-4 h-4" />
-                          </Button>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                ))}
-              </div>
-            )}
-            {lifecycleTotalPages > 1 && (
-              <div className="flex items-center justify-between p-4 border-t relative">
-                {loadingLifecyclePage && (
-                  <div className="absolute inset-0 bg-white/80 flex items-center justify-center z-10 rounded-b-lg">
-                    <Loader2 className="w-5 h-5 animate-spin text-gray-400" />
-                  </div>
-                )}
-                <p className="text-sm text-gray-600">
-                  Showing page {lifecyclePage} of {lifecycleTotalPages} ({lifecycleTotalRecords} total records)
-                </p>
-                <div className="flex gap-2">
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    onClick={() => fetchLifecycleData(lifecyclePage - 1)}
-                    disabled={lifecyclePage <= 1 || loadingLifecyclePage}
-                  >
-                    Previous
-                  </Button>
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    onClick={() => fetchLifecycleData(lifecyclePage + 1)}
-                    disabled={lifecyclePage >= lifecycleTotalPages || loadingLifecyclePage}
-                  >
-                    Next
-                  </Button>
-                </div>
-              </div>
-            )}
-          </CardContent>
-        </Card>
+        <RequestLifecycleReport
+          lifecycleRequests={lifecycleReport.lifecycleRequests}
+          loading={lifecycleReport.loading}
+          loadingPage={lifecycleReport.loadingPage}
+          error={lifecycleReport.error}
+          pagination={lifecycleReport.pagination}
+          dateRange={lifecycleDateFilter.dateRange}
+          customStartDate={lifecycleDateFilter.customStartDate}
+          customEndDate={lifecycleDateFilter.customEndDate}
+          showCustomDatePicker={lifecycleDateFilter.showCustomDatePicker}
+          tempCustomStartDate={lifecycleDateFilter.tempCustomStartDate}
+          tempCustomEndDate={lifecycleDateFilter.tempCustomEndDate}
+          exporting={exports.exportingLifecycle}
+          onDateRangeChange={lifecycleDateFilter.handleDateRangeChange}
+          onShowCustomDatePickerChange={lifecycleDateFilter.setShowCustomDatePicker}
+          onStartDateChange={lifecycleDateFilter.handleStartDateChange}
+          onEndDateChange={lifecycleDateFilter.handleEndDateChange}
+          onApplyCustomDate={lifecycleDateFilter.handleApplyCustomDate}
+          onCancelCustomDate={lifecycleDateFilter.handleCancelCustomDate}
+          onPageChange={lifecycleReport.fetchData}
+          onExport={handleExportLifecycle}
+          onViewRequest={handleViewRequest}
+        />
 
         {/* User Activity Log Report */}
-        <Card className="shadow-lg hover:shadow-xl transition-shadow">
-          <CardHeader>
-            <div className="flex items-center justify-between">
-              <div className="flex items-center gap-3">
-                <div className="p-3 bg-indigo-100 rounded-lg">
-                  <History className="h-5 w-5 text-indigo-600" />
-                </div>
-                <div>
-                  <CardTitle className="text-lg text-gray-900">User Activity Log Report</CardTitle>
-                  <CardDescription className="text-gray-600">
-                    Consolidated user actions and activity history
-                  </CardDescription>
-                </div>
-              </div>
-              <Button 
-                variant="outline" 
-                size="sm" 
-                className="gap-2"
-                onClick={exportActivityToCSV}
-                disabled={exportingActivity}
-              >
-                <Download className="w-4 h-4" />
-                {exportingActivity ? 'Exporting...' : 'Download CSV'}
-              </Button>
-            </div>
-            <div className="mt-4 flex items-center gap-4 flex-wrap">
-              <div className="flex items-center gap-2">
-                <CalendarIcon className="w-4 h-4 text-muted-foreground" />
-                <Select value={activityDateRange} onValueChange={handleActivityDateRangeChange}>
-                  <SelectTrigger className="w-[160px]">
-                    <SelectValue placeholder="Date Range" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="today">Today</SelectItem>
-                    <SelectItem value="week">This Week</SelectItem>
-                    <SelectItem value="month">This Month</SelectItem>
-                    <SelectItem value="custom">Custom Range</SelectItem>
-                  </SelectContent>
-                </Select>
-                
-                {/* Custom Date Range Picker for Activity */}
-                {activityDateRange === 'custom' && (
-                  <Popover open={showActivityCustomDatePicker} onOpenChange={setShowActivityCustomDatePicker}>
-                    <PopoverTrigger asChild>
-                      <Button variant="outline" size="sm" className="gap-2">
-                        <CalendarIcon className="w-4 h-4" />
-                        {activityCustomStartDate && activityCustomEndDate 
-                          ? `${format(activityCustomStartDate, 'MMM d, yyyy')} - ${format(activityCustomEndDate, 'MMM d, yyyy')}`
-                          : 'Select dates'}
-                      </Button>
-                    </PopoverTrigger>
-                    <PopoverContent className="w-auto p-4" align="start" sideOffset={8}>
-                      <div className="space-y-4">
-                        <div className="space-y-3">
-                          <div className="space-y-2">
-                            <Label htmlFor="activity-start-date" className="text-sm font-medium">Start Date</Label>
-                            <Input
-                              id="activity-start-date"
-                              type="date"
-                              value={tempActivityCustomStartDate ? format(tempActivityCustomStartDate, 'yyyy-MM-dd') : ''}
-                              onChange={(e) => {
-                                const date = e.target.value ? new Date(e.target.value) : undefined;
-                                if (date) {
-                                  setTempActivityCustomStartDate(date);
-                                  if (tempActivityCustomEndDate && date > tempActivityCustomEndDate) {
-                                    setTempActivityCustomEndDate(date);
-                                  }
-                                } else {
-                                  setTempActivityCustomStartDate(undefined);
-                                }
-                              }}
-                              max={format(new Date(), 'yyyy-MM-dd')}
-                              className="w-full"
-                            />
-                          </div>
-                          <div className="space-y-2">
-                            <Label htmlFor="activity-end-date" className="text-sm font-medium">End Date</Label>
-                            <Input
-                              id="activity-end-date"
-                              type="date"
-                              value={tempActivityCustomEndDate ? format(tempActivityCustomEndDate, 'yyyy-MM-dd') : ''}
-                              onChange={(e) => {
-                                const date = e.target.value ? new Date(e.target.value) : undefined;
-                                if (date) {
-                                  setTempActivityCustomEndDate(date);
-                                  if (tempActivityCustomStartDate && date < tempActivityCustomStartDate) {
-                                    setTempActivityCustomStartDate(date);
-                                  }
-                                } else {
-                                  setTempActivityCustomEndDate(undefined);
-                                }
-                              }}
-                              min={tempActivityCustomStartDate ? format(tempActivityCustomStartDate, 'yyyy-MM-dd') : undefined}
-                              max={format(new Date(), 'yyyy-MM-dd')}
-                              className="w-full"
-                            />
-                          </div>
-                        </div>
-                        <div className="flex gap-2 pt-2 border-t">
-                          <Button 
-                            size="sm" 
-                            onClick={handleApplyActivityCustomDate}
-                            disabled={!tempActivityCustomStartDate || !tempActivityCustomEndDate}
-                            className="flex-1 bg-re-green hover:bg-re-green/90"
-                          >
-                            Apply
-                          </Button>
-                          <Button 
-                            size="sm" 
-                            variant="outline"
-                            onClick={() => {
-                              setShowActivityCustomDatePicker(false);
-                              setTempActivityCustomStartDate(activityCustomStartDate);
-                              setTempActivityCustomEndDate(activityCustomEndDate);
-                              if (!activityCustomStartDate || !activityCustomEndDate) {
-                                setActivityCustomStartDate(undefined);
-                                setActivityCustomEndDate(undefined);
-                                setActivityDateRange('month');
-                              }
-                            }}
-                          >
-                            Cancel
-                          </Button>
-                        </div>
-                      </div>
-                    </PopoverContent>
-                  </Popover>
-                )}
-              </div>
-              <div className="flex items-center gap-2">
-                <label className="text-sm text-gray-600 whitespace-nowrap">Category:</label>
-                <Select value={filterCategory} onValueChange={setFilterCategory}>
-                  <SelectTrigger className="w-40">
-                    <SelectValue placeholder="All Categories" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="all">All Categories</SelectItem>
-                    <SelectItem value="WORKFLOW">Workflow</SelectItem>
-                    <SelectItem value="COLLABORATION">Collaboration</SelectItem>
-                    <SelectItem value="DOCUMENT">Document</SelectItem>
-                    <SelectItem value="AUTHENTICATION">Authentication</SelectItem>
-                    <SelectItem value="SYSTEM">System</SelectItem>
-                    <SelectItem value="OTHER">Other</SelectItem>
-                  </SelectContent>
-                </Select>
-              </div>
-              <div className="flex items-center gap-2">
-                <label className="text-sm text-gray-600 whitespace-nowrap">Severity:</label>
-                <Select value={filterSeverity} onValueChange={setFilterSeverity}>
-                  <SelectTrigger className="w-40">
-                    <SelectValue placeholder="All Severities" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="all">All Severities</SelectItem>
-                    <SelectItem value="INFO">Info</SelectItem>
-                    <SelectItem value="WARNING">Warning</SelectItem>
-                    <SelectItem value="ERROR">Error</SelectItem>
-                    <SelectItem value="CRITICAL">Critical</SelectItem>
-                  </SelectContent>
-                </Select>
-              </div>
-              {(filterCategory !== 'all' || filterSeverity !== 'all' || activityDateRange !== 'month' || activityCustomStartDate || activityCustomEndDate) && (
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={() => {
-                    setFilterCategory('all');
-                    setFilterSeverity('all');
-                    setActivityDateRange('month');
-                    setActivityCustomStartDate(undefined);
-                    setActivityCustomEndDate(undefined);
-                    setShowActivityCustomDatePicker(false);
-                  }}
-                  className="text-xs"
-                >
-                  Clear Filters
-                </Button>
-              )}
-            </div>
-          </CardHeader>
-          <CardContent>
-            {loadingActivity ? (
-              <div className="flex items-center justify-center py-12">
-                <Loader2 className="w-6 h-6 animate-spin text-gray-400" />
-                <span className="ml-2 text-sm text-gray-600">Loading activity data...</span>
-              </div>
-            ) : errorActivity ? (
-              <div className="flex items-center justify-center py-12 text-red-600">
-                <AlertCircle className="w-5 h-5 mr-2" />
-                <span className="text-sm">{errorActivity}</span>
-              </div>
-            ) : activityLog.length === 0 ? (
-              <div className="text-center py-12 text-gray-500">
-                <p className="text-sm">No activity data available</p>
-              </div>
-            ) : (
-              <div className="rounded-lg border">
-                <Table>
-                  <TableHeader>
-                    <TableRow className="bg-gray-50">
-                      <TableHead className="font-semibold">Timestamp</TableHead>
-                      <TableHead className="font-semibold">User</TableHead>
-                      <TableHead className="font-semibold">Action</TableHead>
-                      <TableHead className="font-semibold">Details</TableHead>
-                      <TableHead className="font-semibold">IP Address</TableHead>
-                      <TableHead className="font-semibold">Request ID</TableHead>
-                    </TableRow>
-                  </TableHeader>
-                  <TableBody>
-                    {activityLog.map((activity, index) => (
-                      <TableRow key={index} className="hover:bg-gray-50">
-                        <TableCell className="text-xs font-medium">{activity.timestamp}</TableCell>
-                        <TableCell className="text-sm">{activity.user}</TableCell>
-                        <TableCell>
-                          <Badge className={getActionBadgeColor(activity.action)}>
-                            {activity.action}
-                          </Badge>
-                        </TableCell>
-                        <TableCell className="text-sm text-gray-600">{activity.details}</TableCell>
-                        <TableCell className="text-xs font-mono text-gray-500">
-                          {activity.ip && activity.ip !== 'N/A' ? (
-                            <span title={activity.userAgent || ''}>{activity.ip}</span>
-                          ) : (
-                            <span className="text-gray-400 italic" title="IP address not yet captured">N/A</span>
-                          )}
-                        </TableCell>
-                        <TableCell>
-                          {activity.requestId !== '-' && activity.requestId !== 'System Login' ? (
-                            <button
-                              onClick={() => {
-                                // Extract request number from requestId (could be requestNumber or requestId)
-                                const requestIdentifier = activity.requestId;
-                                if (requestIdentifier) {
-                                  handleViewRequest(requestIdentifier);
-                                }
-                              }}
-                              className="hover:underline"
-                            >
-                              <Badge variant="outline" className="text-xs cursor-pointer hover:bg-blue-50 hover:border-blue-300 transition-colors">
-                                {activity.requestId}
-                              </Badge>
-                            </button>
-                          ) : (
-                            <span className="text-xs text-gray-400">-</span>
-                          )}
-                        </TableCell>
-                      </TableRow>
-                    ))}
-                  </TableBody>
-                </Table>
-                {activityTotalPages > 1 && (
-                  <div className="flex items-center justify-between p-4 border-t relative">
-                    {loadingActivityPage && (
-                      <div className="absolute inset-0 bg-white/80 flex items-center justify-center z-10 rounded-b-lg">
-                        <Loader2 className="w-5 h-5 animate-spin text-gray-400" />
-                      </div>
-                    )}
-                    <p className="text-sm text-gray-600">
-                      Showing page {activityPage} of {activityTotalPages} ({activityTotalRecords} total records)
-                    </p>
-                    <div className="flex gap-2">
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        onClick={() => fetchActivityData(activityPage - 1)}
-                        disabled={activityPage <= 1 || loadingActivityPage}
-                      >
-                        Previous
-                      </Button>
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        onClick={() => fetchActivityData(activityPage + 1)}
-                        disabled={activityPage >= activityTotalPages || loadingActivityPage}
-                      >
-                        Next
-                      </Button>
-                    </div>
-                  </div>
-                )}
-              </div>
-            )}
-          </CardContent>
-        </Card>
+        <UserActivityLogReport
+          activityLog={activityLogReport.activityLog}
+          loading={activityLogReport.loading}
+          loadingPage={activityLogReport.loadingPage}
+          error={activityLogReport.error}
+          pagination={activityLogReport.pagination}
+          dateRange={activityDateFilter.dateRange}
+          customStartDate={activityDateFilter.customStartDate}
+          customEndDate={activityDateFilter.customEndDate}
+          showCustomDatePicker={activityDateFilter.showCustomDatePicker}
+          tempCustomStartDate={activityDateFilter.tempCustomStartDate}
+          tempCustomEndDate={activityDateFilter.tempCustomEndDate}
+          filterCategory={filterCategory}
+          filterSeverity={filterSeverity}
+          exporting={exports.exportingActivity}
+          onDateRangeChange={activityDateFilter.handleDateRangeChange}
+          onShowCustomDatePickerChange={activityDateFilter.setShowCustomDatePicker}
+          onStartDateChange={activityDateFilter.handleStartDateChange}
+          onEndDateChange={activityDateFilter.handleEndDateChange}
+          onApplyCustomDate={activityDateFilter.handleApplyCustomDate}
+          onCancelCustomDate={activityDateFilter.handleCancelCustomDate}
+          onCategoryChange={setFilterCategory}
+          onSeverityChange={setFilterSeverity}
+          onClearFilters={handleClearActivityFilters}
+          onPageChange={activityLogReport.fetchData}
+          onExport={handleExportActivity}
+          onViewRequest={handleViewRequest}
+        />
 
         {/* Workflow Aging Report */}
-        <Card className="shadow-lg hover:shadow-xl transition-shadow">
-          <CardHeader>
-            <div className="flex items-center justify-between">
-              <div className="flex items-center gap-3">
-                <div className="p-3 bg-amber-100 rounded-lg">
-                  <Timer className="h-5 w-5 text-amber-600" />
-                </div>
-                <div>
-                  <CardTitle className="text-lg text-gray-900">Workflow Aging Report</CardTitle>
-                  <CardDescription className="text-gray-600">
-                    Workflows exceeding aging threshold
-                  </CardDescription>
-                </div>
-              </div>
-              <div className="flex items-center gap-3 flex-wrap">
-                <div className="flex items-center gap-2">
-                  <label className="text-sm text-gray-600 whitespace-nowrap">Threshold:</label>
-                  <div className="flex flex-col gap-1">
-                    <div className="flex items-center gap-2">
-                      <Input
-                        type="number"
-                        min="1"
-                        value={threshold}
-                        onChange={(e) => {
-                          const value = e.target.value;
-                          // Allow empty string while typing
-                          if (value === '') {
-                            setThreshold('');
-                            setThresholdError(null);
-                            return;
-                          }
-                          // Parse as integer
-                          const numValue = parseInt(value, 10);
-                          // Validate: must be a positive integer >= 1
-                          if (isNaN(numValue) || numValue < 1) {
-                            setThresholdError('Minimum threshold is 1 day');
-                            setThreshold(value); // Keep the invalid value for user to see
-                          } else {
-                            setThresholdError(null);
-                            setThreshold(value);
-                          }
-                        }}
-                        onBlur={(e) => {
-                          const value = e.target.value;
-                          // If empty or invalid on blur, reset to minimum (1)
-                          if (value === '' || isNaN(parseInt(value, 10)) || parseInt(value, 10) < 1) {
-                            setThreshold('1');
-                            setThresholdError(null);
-                          }
-                        }}
-                        className={`w-24 ${thresholdError ? 'border-red-500 focus:border-red-500 focus:ring-red-500' : ''}`}
-                        placeholder="Days"
-                      />
-                      <span className="text-sm text-gray-600 whitespace-nowrap">days</span>
-                    </div>
-                    {thresholdError && (
-                      <span className="text-xs text-red-600">{thresholdError}</span>
-                    )}
-                  </div>
-                </div>
-                <Badge variant="outline" className="font-semibold">
-                  {agingTotalRecords} workflows
-                </Badge>
-                <Button 
-                  variant="outline" 
-                  size="sm" 
-                  className="gap-2"
-                  onClick={exportAgingToCSV}
-                  disabled={exportingAging}
-                >
-                  <Download className="w-4 h-4" />
-                  {exportingAging ? 'Exporting...' : 'Download CSV'}
-                </Button>
-              </div>
-            </div>
-            <div className="mt-4 flex items-center gap-4 flex-wrap">
-              <div className="flex items-center gap-2">
-                <CalendarIcon className="w-4 h-4 text-muted-foreground" />
-                <Select value={agingDateRange} onValueChange={handleAgingDateRangeChange}>
-                  <SelectTrigger className="w-[160px]">
-                    <SelectValue placeholder="Date Range" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="today">Today</SelectItem>
-                    <SelectItem value="week">This Week</SelectItem>
-                    <SelectItem value="month">This Month</SelectItem>
-                    <SelectItem value="custom">Custom Range</SelectItem>
-                  </SelectContent>
-                </Select>
-                
-                {/* Custom Date Range Picker for Aging */}
-                {agingDateRange === 'custom' && (
-                  <Popover open={showAgingCustomDatePicker} onOpenChange={setShowAgingCustomDatePicker}>
-                    <PopoverTrigger asChild>
-                      <Button variant="outline" size="sm" className="gap-2">
-                        <CalendarIcon className="w-4 h-4" />
-                        {agingCustomStartDate && agingCustomEndDate 
-                          ? `${format(agingCustomStartDate, 'MMM d, yyyy')} - ${format(agingCustomEndDate, 'MMM d, yyyy')}`
-                          : 'Select dates'}
-                      </Button>
-                    </PopoverTrigger>
-                    <PopoverContent className="w-auto p-4" align="start" sideOffset={8}>
-                      <div className="space-y-4">
-                        <div className="space-y-3">
-                          <div className="space-y-2">
-                            <Label htmlFor="aging-start-date" className="text-sm font-medium">Start Date</Label>
-                            <Input
-                              id="aging-start-date"
-                              type="date"
-                              value={tempAgingCustomStartDate ? format(tempAgingCustomStartDate, 'yyyy-MM-dd') : ''}
-                              onChange={(e) => {
-                                const date = e.target.value ? new Date(e.target.value) : undefined;
-                                if (date) {
-                                  setTempAgingCustomStartDate(date);
-                                  if (tempAgingCustomEndDate && date > tempAgingCustomEndDate) {
-                                    setTempAgingCustomEndDate(date);
-                                  }
-                                } else {
-                                  setTempAgingCustomStartDate(undefined);
-                                }
-                              }}
-                              max={format(new Date(), 'yyyy-MM-dd')}
-                              className="w-full"
-                            />
-                          </div>
-                          <div className="space-y-2">
-                            <Label htmlFor="aging-end-date" className="text-sm font-medium">End Date</Label>
-                            <Input
-                              id="aging-end-date"
-                              type="date"
-                              value={tempAgingCustomEndDate ? format(tempAgingCustomEndDate, 'yyyy-MM-dd') : ''}
-                              onChange={(e) => {
-                                const date = e.target.value ? new Date(e.target.value) : undefined;
-                                if (date) {
-                                  setTempAgingCustomEndDate(date);
-                                  if (tempAgingCustomStartDate && date < tempAgingCustomStartDate) {
-                                    setTempAgingCustomStartDate(date);
-                                  }
-                                } else {
-                                  setTempAgingCustomEndDate(undefined);
-                                }
-                              }}
-                              min={tempAgingCustomStartDate ? format(tempAgingCustomStartDate, 'yyyy-MM-dd') : undefined}
-                              max={format(new Date(), 'yyyy-MM-dd')}
-                              className="w-full"
-                            />
-                          </div>
-                        </div>
-                        <div className="flex gap-2 pt-2 border-t">
-                          <Button 
-                            size="sm" 
-                            onClick={handleApplyAgingCustomDate}
-                            disabled={!tempAgingCustomStartDate || !tempAgingCustomEndDate}
-                            className="flex-1 bg-re-green hover:bg-re-green/90"
-                          >
-                            Apply
-                          </Button>
-                          <Button 
-                            size="sm" 
-                            variant="outline"
-                            onClick={() => {
-                              setShowAgingCustomDatePicker(false);
-                              setTempAgingCustomStartDate(agingCustomStartDate);
-                              setTempAgingCustomEndDate(agingCustomEndDate);
-                              if (!agingCustomStartDate || !agingCustomEndDate) {
-                                setAgingCustomStartDate(undefined);
-                                setAgingCustomEndDate(undefined);
-                                setAgingDateRange('month');
-                              }
-                            }}
-                          >
-                            Cancel
-                          </Button>
-                        </div>
-                      </div>
-                    </PopoverContent>
-                  </Popover>
-                )}
-              </div>
-              <div className="relative flex-1 min-w-[200px]">
-                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
-                <Input
-                  placeholder="Search by Request ID, Title, or Initiator..."
-                  value={searchQuery}
-                  onChange={(e) => setSearchQuery(e.target.value)}
-                  className="pl-10"
-                />
-              </div>
-            </div>
-          </CardHeader>
-          <CardContent>
-            {loadingAging ? (
-              <div className="flex items-center justify-center py-12">
-                <Loader2 className="w-6 h-6 animate-spin text-gray-400" />
-                <span className="ml-2 text-sm text-gray-600">Loading aging data...</span>
-              </div>
-            ) : errorAging ? (
-              <div className="flex items-center justify-center py-12 text-red-600">
-                <AlertCircle className="w-5 h-5 mr-2" />
-                <span className="text-sm">{errorAging}</span>
-              </div>
-            ) : filteredAgingWorkflows.length === 0 ? (
-              <div className="text-center py-12 text-gray-500">
-                <p className="text-sm">No workflows found exceeding {threshold} days threshold</p>
-              </div>
-            ) : (
-              <div className="rounded-lg border">
-                <Table>
-                  <TableHeader>
-                    <TableRow className="bg-gray-50">
-                      <TableHead className="font-semibold">Request ID</TableHead>
-                      <TableHead className="font-semibold">Title</TableHead>
-                      <TableHead className="font-semibold">Initiator</TableHead>
-                      <TableHead className="font-semibold">Start Date</TableHead>
-                      <TableHead className="font-semibold">Days Open</TableHead>
-                      <TableHead className="font-semibold">Current Stage</TableHead>
-                      <TableHead className="font-semibold">Assigned To</TableHead>
-                      <TableHead className="font-semibold">Priority</TableHead>
-                      <TableHead className="font-semibold">Status</TableHead>
-                    </TableRow>
-                  </TableHeader>
-                  <TableBody>
-                    {filteredAgingWorkflows.map((workflow) => (
-                      <TableRow key={workflow.id} className="hover:bg-gray-50">
-                        <TableCell className="font-medium text-sm">
-                          <button
-                            onClick={() => handleViewRequest(workflow.requestId || workflow.id)}
-                            className="text-blue-600 hover:text-blue-800 hover:underline cursor-pointer transition-colors"
-                          >
-                            {workflow.id}
-                          </button>
-                        </TableCell>
-                        <TableCell className="text-sm">{workflow.title}</TableCell>
-                        <TableCell className="text-sm">
-                          {workflow.initiator}
-                        </TableCell>
-                        <TableCell className="text-sm text-gray-600">{workflow.startDate}</TableCell>
-                        <TableCell>
-                          <Badge className={`${getDaysOpenColor(workflow.daysOpen)} text-white border-transparent`}>
-                            {workflow.daysOpen} days
-                            <span className="ml-1 text-xs opacity-75">(business)</span>
-                          </Badge>
-                        </TableCell>
-                        <TableCell className="text-sm">
-                          {workflow.currentStage}
-                        </TableCell>
-                        <TableCell className="text-sm">
-                          {workflow.assignedTo && workflow.assignedTo !== 'N/A' ? (
-                            workflow.assignedTo
-                          ) : (
-                            <span className="text-gray-400 italic" title="Assigned approver not available">N/A</span>
-                          )}
-                        </TableCell>
-                        <TableCell>
-                          <Badge className={getPriorityColor(workflow.priority)}>
-                            {workflow.priority}
-                          </Badge>
-                        </TableCell>
-                        <TableCell>
-                          <Badge className={getStatusColor(workflow.status)}>
-                            {workflow.status}
-                          </Badge>
-                        </TableCell>
-                      </TableRow>
-                    ))}
-                  </TableBody>
-                </Table>
-                {agingTotalPages > 1 && (
-                  <div className="flex items-center justify-between p-4 border-t relative">
-                    {loadingAgingPage && (
-                      <div className="absolute inset-0 bg-white/80 flex items-center justify-center z-10 rounded-b-lg">
-                        <Loader2 className="w-5 h-5 animate-spin text-gray-400" />
-                      </div>
-                    )}
-                    <p className="text-sm text-gray-600">
-                      Showing page {agingPage} of {agingTotalPages} ({agingTotalRecords} total records)
-                    </p>
-                    <div className="flex gap-2">
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        onClick={() => fetchAgingData(agingPage - 1)}
-                        disabled={agingPage <= 1 || loadingAgingPage}
-                      >
-                        Previous
-                      </Button>
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        onClick={() => fetchAgingData(agingPage + 1)}
-                        disabled={agingPage >= agingTotalPages || loadingAgingPage}
-                      >
-                        Next
-                      </Button>
-                    </div>
-                  </div>
-                )}
-              </div>
-            )}
-          </CardContent>
-        </Card>
+        <WorkflowAgingReport
+          agingWorkflows={agingReport.agingWorkflows}
+          loading={agingReport.loading}
+          loadingPage={agingReport.loadingPage}
+          error={agingReport.error}
+          pagination={agingReport.pagination}
+          threshold={threshold.threshold}
+          thresholdError={threshold.thresholdError}
+          dateRange={agingDateFilter.dateRange}
+          customStartDate={agingDateFilter.customStartDate}
+          customEndDate={agingDateFilter.customEndDate}
+          showCustomDatePicker={agingDateFilter.showCustomDatePicker}
+          tempCustomStartDate={agingDateFilter.tempCustomStartDate}
+          tempCustomEndDate={agingDateFilter.tempCustomEndDate}
+          searchQuery={searchQuery}
+          exporting={exports.exportingAging}
+          onThresholdChange={threshold.handleThresholdChange}
+          onThresholdBlur={threshold.handleThresholdBlur}
+          onDateRangeChange={agingDateFilter.handleDateRangeChange}
+          onShowCustomDatePickerChange={agingDateFilter.setShowCustomDatePicker}
+          onStartDateChange={agingDateFilter.handleStartDateChange}
+          onEndDateChange={agingDateFilter.handleEndDateChange}
+          onApplyCustomDate={agingDateFilter.handleApplyCustomDate}
+          onCancelCustomDate={agingDateFilter.handleCancelCustomDate}
+          onSearchChange={setSearchQuery}
+          onPageChange={agingReport.fetchData}
+          onExport={handleExportAging}
+          onViewRequest={handleViewRequest}
+        />
       </div>
     </div>
   );
 }
-
diff --git a/src/pages/DetailedReports/components/DateRangeFilter.tsx b/src/pages/DetailedReports/components/DateRangeFilter.tsx
new file mode 100644
index 0000000..8aeaafc
--- /dev/null
+++ b/src/pages/DetailedReports/components/DateRangeFilter.tsx
@@ -0,0 +1,139 @@
+/**
+ * Reusable Date Range Filter Component
+ */
+
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Calendar as CalendarIcon } from 'lucide-react';
+import { format } from 'date-fns';
+import { DateRange } from '@/services/dashboard.service';
+
+interface DateRangeFilterProps {
+  dateRange: DateRange;
+  customStartDate?: Date;
+  customEndDate?: Date;
+  showCustomDatePicker: boolean;
+  tempCustomStartDate?: Date;
+  tempCustomEndDate?: Date;
+  onDateRangeChange: (value: string) => void;
+  onShowCustomDatePickerChange: (open: boolean) => void;
+  onStartDateChange: (date: Date | undefined) => void;
+  onEndDateChange: (date: Date | undefined) => void;
+  onApply: () => void;
+  onCancel: () => void;
+  testIdPrefix?: string;
+}
+
+export function DateRangeFilter({
+  dateRange,
+  customStartDate,
+  customEndDate,
+  showCustomDatePicker,
+  tempCustomStartDate,
+  tempCustomEndDate,
+  onDateRangeChange,
+  onShowCustomDatePickerChange,
+  onStartDateChange,
+  onEndDateChange,
+  onApply,
+  onCancel,
+  testIdPrefix = 'date-filter',
+}: DateRangeFilterProps) {
+  const displayDateRange =
+    customStartDate && customEndDate
+      ? `${format(customStartDate, 'MMM d, yyyy')} - ${format(customEndDate, 'MMM d, yyyy')}`
+      : 'Select dates';
+
+  return (
+    <div className="flex items-center gap-2" data-testid={`${testIdPrefix}-container`}>
+      <CalendarIcon className="w-4 h-4 text-muted-foreground" />
+      <Select value={dateRange} onValueChange={onDateRangeChange} data-testid={`${testIdPrefix}-select`}>
+        <SelectTrigger className="w-[160px]">
+          <SelectValue placeholder="Date Range" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="today">Today</SelectItem>
+          <SelectItem value="week">This Week</SelectItem>
+          <SelectItem value="month">This Month</SelectItem>
+          <SelectItem value="custom">Custom Range</SelectItem>
+        </SelectContent>
+      </Select>
+
+      {/* Custom Date Range Picker */}
+      {dateRange === 'custom' && (
+        <Popover open={showCustomDatePicker} onOpenChange={onShowCustomDatePickerChange}>
+          <PopoverTrigger asChild>
+            <Button variant="outline" size="sm" className="gap-2" data-testid={`${testIdPrefix}-custom-trigger`}>
+              <CalendarIcon className="w-4 h-4" />
+              {displayDateRange}
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-auto p-4" align="start" sideOffset={8}>
+            <div className="space-y-4">
+              <div className="space-y-3">
+                <div className="space-y-2">
+                  <Label htmlFor={`${testIdPrefix}-start-date`} className="text-sm font-medium">
+                    Start Date
+                  </Label>
+                  <Input
+                    id={`${testIdPrefix}-start-date`}
+                    type="date"
+                    value={tempCustomStartDate ? format(tempCustomStartDate, 'yyyy-MM-dd') : ''}
+                    onChange={(e) => {
+                      const date = e.target.value ? new Date(e.target.value) : undefined;
+                      onStartDateChange(date);
+                    }}
+                    max={format(new Date(), 'yyyy-MM-dd')}
+                    className="w-full"
+                    data-testid={`${testIdPrefix}-start-input`}
+                  />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor={`${testIdPrefix}-end-date`} className="text-sm font-medium">
+                    End Date
+                  </Label>
+                  <Input
+                    id={`${testIdPrefix}-end-date`}
+                    type="date"
+                    value={tempCustomEndDate ? format(tempCustomEndDate, 'yyyy-MM-dd') : ''}
+                    onChange={(e) => {
+                      const date = e.target.value ? new Date(e.target.value) : undefined;
+                      onEndDateChange(date);
+                    }}
+                    min={tempCustomStartDate ? format(tempCustomStartDate, 'yyyy-MM-dd') : undefined}
+                    max={format(new Date(), 'yyyy-MM-dd')}
+                    className="w-full"
+                    data-testid={`${testIdPrefix}-end-input`}
+                  />
+                </div>
+              </div>
+              <div className="flex gap-2 pt-2 border-t">
+                <Button
+                  size="sm"
+                  onClick={onApply}
+                  disabled={!tempCustomStartDate || !tempCustomEndDate}
+                  className="flex-1 bg-re-green hover:bg-re-green/90"
+                  data-testid={`${testIdPrefix}-apply-button`}
+                >
+                  Apply
+                </Button>
+                <Button
+                  size="sm"
+                  variant="outline"
+                  onClick={onCancel}
+                  data-testid={`${testIdPrefix}-cancel-button`}
+                >
+                  Cancel
+                </Button>
+              </div>
+            </div>
+          </PopoverContent>
+        </Popover>
+      )}
+    </div>
+  );
+}
+
diff --git a/src/pages/DetailedReports/components/DetailedReportsHeader.tsx b/src/pages/DetailedReports/components/DetailedReportsHeader.tsx
new file mode 100644
index 0000000..79c6a1b
--- /dev/null
+++ b/src/pages/DetailedReports/components/DetailedReportsHeader.tsx
@@ -0,0 +1,33 @@
+/**
+ * Detailed Reports Header Component
+ */
+
+import { Button } from '@/components/ui/button';
+import { ArrowLeft, FileText } from 'lucide-react';
+
+interface DetailedReportsHeaderProps {
+  onBack: () => void;
+}
+
+export function DetailedReportsHeader({ onBack }: DetailedReportsHeaderProps) {
+  return (
+    <div className="flex items-center justify-between" data-testid="detailed-reports-header">
+      <div className="flex items-center gap-4">
+        <Button variant="outline" onClick={onBack} className="inline-flex items-center gap-2" data-testid="back-button">
+          <ArrowLeft className="w-4 h-4 mr-2" />
+          Back to Dashboard
+        </Button>
+        <div className="flex items-center gap-3">
+          <div className="p-3 bg-purple-100 rounded-lg">
+            <FileText className="h-6 w-6 text-purple-600" />
+          </div>
+          <div>
+            <h1 className="text-2xl font-bold text-gray-900">Detailed Reports</h1>
+            <p className="text-sm text-gray-600">Comprehensive workflow and activity reports</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
diff --git a/src/pages/DetailedReports/components/sections/RequestLifecycleReport.tsx b/src/pages/DetailedReports/components/sections/RequestLifecycleReport.tsx
new file mode 100644
index 0000000..51c4022
--- /dev/null
+++ b/src/pages/DetailedReports/components/sections/RequestLifecycleReport.tsx
@@ -0,0 +1,219 @@
+/**
+ * Request Lifecycle Report Section Component
+ */
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Activity, Download, ChevronRight, Loader2, AlertCircle } from 'lucide-react';
+import { LifecycleRequest, PaginationState } from '../../types/detailedReports.types';
+import { DateRangeFilter } from '../DateRangeFilter';
+import { DateRange } from '@/services/dashboard.service';
+import { getPriorityColor, getStatusColor } from '../../utils/colorMappers';
+
+interface RequestLifecycleReportProps {
+  lifecycleRequests: LifecycleRequest[];
+  loading: boolean;
+  loadingPage: boolean;
+  error: string | null;
+  pagination: PaginationState;
+  dateRange: DateRange;
+  customStartDate?: Date;
+  customEndDate?: Date;
+  showCustomDatePicker: boolean;
+  tempCustomStartDate?: Date;
+  tempCustomEndDate?: Date;
+  exporting: boolean;
+  onDateRangeChange: (value: string) => void;
+  onShowCustomDatePickerChange: (open: boolean) => void;
+  onStartDateChange: (date: Date | undefined) => void;
+  onEndDateChange: (date: Date | undefined) => void;
+  onApplyCustomDate: () => void;
+  onCancelCustomDate: () => void;
+  onPageChange: (page: number) => void;
+  onExport: () => void;
+  onViewRequest: (requestId: string) => void;
+}
+
+export function RequestLifecycleReport({
+  lifecycleRequests,
+  loading,
+  loadingPage,
+  error,
+  pagination,
+  dateRange,
+  customStartDate,
+  customEndDate,
+  showCustomDatePicker,
+  tempCustomStartDate,
+  tempCustomEndDate,
+  exporting,
+  onDateRangeChange,
+  onShowCustomDatePickerChange,
+  onStartDateChange,
+  onEndDateChange,
+  onApplyCustomDate,
+  onCancelCustomDate,
+  onPageChange,
+  onExport,
+  onViewRequest,
+}: RequestLifecycleReportProps) {
+  return (
+    <Card className="shadow-lg hover:shadow-xl transition-shadow" data-testid="request-lifecycle-report">
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <div className="p-3 bg-blue-100 rounded-lg">
+              <Activity className="h-5 w-5 text-blue-600" />
+            </div>
+            <div>
+              <CardTitle className="text-lg text-gray-900">Request Lifecycle Report</CardTitle>
+              <CardDescription className="text-gray-600">End-to-end status with timeline and TAT compliance</CardDescription>
+            </div>
+          </div>
+          <Button variant="outline" size="sm" className="gap-2" onClick={onExport} disabled={exporting} data-testid="export-lifecycle-button">
+            <Download className="w-4 h-4" />
+            {exporting ? 'Exporting...' : 'Download CSV'}
+          </Button>
+        </div>
+        <div className="mt-4 flex items-center gap-3 flex-wrap">
+          <DateRangeFilter
+            dateRange={dateRange}
+            customStartDate={customStartDate}
+            customEndDate={customEndDate}
+            showCustomDatePicker={showCustomDatePicker}
+            tempCustomStartDate={tempCustomStartDate}
+            tempCustomEndDate={tempCustomEndDate}
+            onDateRangeChange={onDateRangeChange}
+            onShowCustomDatePickerChange={onShowCustomDatePickerChange}
+            onStartDateChange={onStartDateChange}
+            onEndDateChange={onEndDateChange}
+            onApply={onApplyCustomDate}
+            onCancel={onCancelCustomDate}
+            testIdPrefix="lifecycle"
+          />
+        </div>
+      </CardHeader>
+      <CardContent>
+        {loading ? (
+          <div className="flex items-center justify-center py-12" data-testid="lifecycle-loading">
+            <Loader2 className="w-6 h-6 animate-spin text-gray-400" />
+            <span className="ml-2 text-sm text-gray-600">Loading lifecycle data...</span>
+          </div>
+        ) : error ? (
+          <div className="flex items-center justify-center py-12 text-red-600" data-testid="lifecycle-error">
+            <AlertCircle className="w-5 h-5 mr-2" />
+            <span className="text-sm">{error}</span>
+          </div>
+        ) : lifecycleRequests.length === 0 ? (
+          <div className="text-center py-12 text-gray-500" data-testid="lifecycle-empty">
+            <p className="text-sm">No lifecycle data available</p>
+          </div>
+        ) : (
+          <div className="space-y-4">
+            {lifecycleRequests.map((request) => (
+              <div key={request.id} className="border rounded-xl overflow-hidden" data-testid={`lifecycle-request-${request.id}`}>
+                <div
+                  className="p-4 bg-gradient-to-r from-gray-50 to-white hover:bg-gray-100 cursor-pointer transition-all"
+                  onClick={() => onViewRequest(request.requestId || request.id)}
+                >
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-4">
+                      <div className="flex flex-col">
+                        <div className="flex items-center gap-2 mb-1">
+                          <button
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              onViewRequest(request.requestId || request.id);
+                            }}
+                            className="font-semibold text-sm text-blue-600 hover:text-blue-800 hover:underline cursor-pointer transition-colors"
+                            data-testid={`lifecycle-request-link-${request.id}`}
+                          >
+                            {request.id}
+                          </button>
+                          <Badge className={getPriorityColor(request.priority)} data-testid={`lifecycle-priority-${request.id}`}>
+                            {request.priority}
+                          </Badge>
+                          <Badge className={getStatusColor(request.status)} data-testid={`lifecycle-status-${request.id}`}>
+                            {request.status}
+                          </Badge>
+                        </div>
+                        <p className="text-sm text-gray-700">{request.title}</p>
+                        <p className="text-xs text-gray-500 mt-1">
+                          Initiated by <span className="font-medium">{request.initiator}</span> on {request.initDate}
+                        </p>
+                        {request.currentStage && !request.currentStage.includes('Level') && (
+                          <p className="text-xs text-gray-400 mt-0.5">Stage: {request.currentStage}</p>
+                        )}
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-4">
+                      <div className="text-right">
+                        <p className="text-xs text-gray-500">Current Stage</p>
+                        <p className="text-sm font-semibold text-gray-900">{request.currentStage}</p>
+                        <p className="text-xs text-gray-400 mt-0.5">
+                          (Level {request.currentLevel}/{request.totalLevels})
+                        </p>
+                      </div>
+                      <div className="text-right">
+                        <p className="text-xs text-gray-500">Overall TAT</p>
+                        <p className="text-sm font-semibold text-gray-900">{request.overallTAT}</p>
+                        {request.breachCount > 0 && (
+                          <p className="text-xs text-red-500 mt-0.5">
+                            {request.breachCount} breach{request.breachCount > 1 ? 'es' : ''}
+                          </p>
+                        )}
+                      </div>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => onViewRequest(request.requestId || request.id)}
+                        className="gap-1.5"
+                        data-testid={`lifecycle-view-button-${request.id}`}
+                      >
+                        <ChevronRight className="w-4 h-4" />
+                      </Button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+        {pagination.totalPages > 1 && (
+          <div className="flex items-center justify-between p-4 border-t relative" data-testid="lifecycle-pagination">
+            {loadingPage && (
+              <div className="absolute inset-0 bg-white/80 flex items-center justify-center z-10 rounded-b-lg">
+                <Loader2 className="w-5 h-5 animate-spin text-gray-400" />
+              </div>
+            )}
+            <p className="text-sm text-gray-600">
+              Showing page {pagination.page} of {pagination.totalPages} ({pagination.totalRecords} total records)
+            </p>
+            <div className="flex gap-2">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => onPageChange(pagination.page - 1)}
+                disabled={pagination.page <= 1 || loadingPage}
+                data-testid="lifecycle-pagination-prev"
+              >
+                Previous
+              </Button>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => onPageChange(pagination.page + 1)}
+                disabled={pagination.page >= pagination.totalPages || loadingPage}
+                data-testid="lifecycle-pagination-next"
+              >
+                Next
+              </Button>
+            </div>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
diff --git a/src/pages/DetailedReports/components/sections/UserActivityLogReport.tsx b/src/pages/DetailedReports/components/sections/UserActivityLogReport.tsx
new file mode 100644
index 0000000..1d9e6f0
--- /dev/null
+++ b/src/pages/DetailedReports/components/sections/UserActivityLogReport.tsx
@@ -0,0 +1,266 @@
+/**
+ * User Activity Log Report Section Component
+ */
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { History, Download, Loader2, AlertCircle } from 'lucide-react';
+import { ActivityLogEntry, PaginationState } from '../../types/detailedReports.types';
+import { DateRangeFilter } from '../DateRangeFilter';
+import { DateRange } from '@/services/dashboard.service';
+import { getActionBadgeColor } from '../../utils/colorMappers';
+
+interface UserActivityLogReportProps {
+  activityLog: ActivityLogEntry[];
+  loading: boolean;
+  loadingPage: boolean;
+  error: string | null;
+  pagination: PaginationState;
+  dateRange: DateRange;
+  customStartDate?: Date;
+  customEndDate?: Date;
+  showCustomDatePicker: boolean;
+  tempCustomStartDate?: Date;
+  tempCustomEndDate?: Date;
+  filterCategory: string;
+  filterSeverity: string;
+  exporting: boolean;
+  onDateRangeChange: (value: string) => void;
+  onShowCustomDatePickerChange: (open: boolean) => void;
+  onStartDateChange: (date: Date | undefined) => void;
+  onEndDateChange: (date: Date | undefined) => void;
+  onApplyCustomDate: () => void;
+  onCancelCustomDate: () => void;
+  onCategoryChange: (value: string) => void;
+  onSeverityChange: (value: string) => void;
+  onClearFilters: () => void;
+  onPageChange: (page: number) => void;
+  onExport: () => void;
+  onViewRequest: (requestId: string) => void;
+}
+
+export function UserActivityLogReport({
+  activityLog,
+  loading,
+  loadingPage,
+  error,
+  pagination,
+  dateRange,
+  customStartDate,
+  customEndDate,
+  showCustomDatePicker,
+  tempCustomStartDate,
+  tempCustomEndDate,
+  filterCategory,
+  filterSeverity,
+  exporting,
+  onDateRangeChange,
+  onShowCustomDatePickerChange,
+  onStartDateChange,
+  onEndDateChange,
+  onApplyCustomDate,
+  onCancelCustomDate,
+  onCategoryChange,
+  onSeverityChange,
+  onClearFilters,
+  onPageChange,
+  onExport,
+  onViewRequest,
+}: UserActivityLogReportProps) {
+  const hasActiveFilters =
+    filterCategory !== 'all' ||
+    filterSeverity !== 'all' ||
+    dateRange !== 'month' ||
+    customStartDate ||
+    customEndDate;
+
+  return (
+    <Card className="shadow-lg hover:shadow-xl transition-shadow" data-testid="user-activity-log-report">
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <div className="p-3 bg-indigo-100 rounded-lg">
+              <History className="h-5 w-5 text-indigo-600" />
+            </div>
+            <div>
+              <CardTitle className="text-lg text-gray-900">User Activity Log Report</CardTitle>
+              <CardDescription className="text-gray-600">Consolidated user actions and activity history</CardDescription>
+            </div>
+          </div>
+          <Button variant="outline" size="sm" className="gap-2" onClick={onExport} disabled={exporting} data-testid="export-activity-button">
+            <Download className="w-4 h-4" />
+            {exporting ? 'Exporting...' : 'Download CSV'}
+          </Button>
+        </div>
+        <div className="mt-4 flex items-center gap-4 flex-wrap">
+          <DateRangeFilter
+            dateRange={dateRange}
+            customStartDate={customStartDate}
+            customEndDate={customEndDate}
+            showCustomDatePicker={showCustomDatePicker}
+            tempCustomStartDate={tempCustomStartDate}
+            tempCustomEndDate={tempCustomEndDate}
+            onDateRangeChange={onDateRangeChange}
+            onShowCustomDatePickerChange={onShowCustomDatePickerChange}
+            onStartDateChange={onStartDateChange}
+            onEndDateChange={onEndDateChange}
+            onApply={onApplyCustomDate}
+            onCancel={onCancelCustomDate}
+            testIdPrefix="activity"
+          />
+          <div className="flex items-center gap-2">
+            <label className="text-sm text-gray-600 whitespace-nowrap">Category:</label>
+            <Select value={filterCategory} onValueChange={onCategoryChange} data-testid="activity-category-filter">
+              <SelectTrigger className="w-40">
+                <SelectValue placeholder="All Categories" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All Categories</SelectItem>
+                <SelectItem value="WORKFLOW">Workflow</SelectItem>
+                <SelectItem value="COLLABORATION">Collaboration</SelectItem>
+                <SelectItem value="DOCUMENT">Document</SelectItem>
+                <SelectItem value="AUTHENTICATION">Authentication</SelectItem>
+                <SelectItem value="SYSTEM">System</SelectItem>
+                <SelectItem value="OTHER">Other</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="flex items-center gap-2">
+            <label className="text-sm text-gray-600 whitespace-nowrap">Severity:</label>
+            <Select value={filterSeverity} onValueChange={onSeverityChange} data-testid="activity-severity-filter">
+              <SelectTrigger className="w-40">
+                <SelectValue placeholder="All Severities" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All Severities</SelectItem>
+                <SelectItem value="INFO">Info</SelectItem>
+                <SelectItem value="WARNING">Warning</SelectItem>
+                <SelectItem value="ERROR">Error</SelectItem>
+                <SelectItem value="CRITICAL">Critical</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          {hasActiveFilters && (
+            <Button variant="ghost" size="sm" onClick={onClearFilters} className="text-xs" data-testid="activity-clear-filters">
+              Clear Filters
+            </Button>
+          )}
+        </div>
+      </CardHeader>
+      <CardContent>
+        {loading ? (
+          <div className="flex items-center justify-center py-12" data-testid="activity-loading">
+            <Loader2 className="w-6 h-6 animate-spin text-gray-400" />
+            <span className="ml-2 text-sm text-gray-600">Loading activity data...</span>
+          </div>
+        ) : error ? (
+          <div className="flex items-center justify-center py-12 text-red-600" data-testid="activity-error">
+            <AlertCircle className="w-5 h-5 mr-2" />
+            <span className="text-sm">{error}</span>
+          </div>
+        ) : activityLog.length === 0 ? (
+          <div className="text-center py-12 text-gray-500" data-testid="activity-empty">
+            <p className="text-sm">No activity data available</p>
+          </div>
+        ) : (
+          <div className="rounded-lg border">
+            <Table>
+              <TableHeader>
+                <TableRow className="bg-gray-50">
+                  <TableHead className="font-semibold">Timestamp</TableHead>
+                  <TableHead className="font-semibold">User</TableHead>
+                  <TableHead className="font-semibold">Action</TableHead>
+                  <TableHead className="font-semibold">Details</TableHead>
+                  <TableHead className="font-semibold">IP Address</TableHead>
+                  <TableHead className="font-semibold">Request ID</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {activityLog.map((activity, index) => (
+                  <TableRow key={index} className="hover:bg-gray-50" data-testid={`activity-row-${index}`}>
+                    <TableCell className="text-xs font-medium">{activity.timestamp}</TableCell>
+                    <TableCell className="text-sm">{activity.user}</TableCell>
+                    <TableCell>
+                      <Badge className={getActionBadgeColor(activity.action)} data-testid={`activity-action-${index}`}>
+                        {activity.action}
+                      </Badge>
+                    </TableCell>
+                    <TableCell className="text-sm text-gray-600">{activity.details}</TableCell>
+                    <TableCell className="text-xs font-mono text-gray-500">
+                      {activity.ip && activity.ip !== 'N/A' ? (
+                        <span title={activity.userAgent || ''}>{activity.ip}</span>
+                      ) : (
+                        <span className="text-gray-400 italic" title="IP address not yet captured">
+                          N/A
+                        </span>
+                      )}
+                    </TableCell>
+                    <TableCell>
+                      {activity.requestId !== '-' && activity.requestId !== 'System Login' ? (
+                        <button
+                          onClick={() => {
+                            const requestIdentifier = activity.requestId;
+                            if (requestIdentifier) {
+                              onViewRequest(requestIdentifier);
+                            }
+                          }}
+                          className="hover:underline"
+                          data-testid={`activity-request-link-${index}`}
+                        >
+                          <Badge
+                            variant="outline"
+                            className="text-xs cursor-pointer hover:bg-blue-50 hover:border-blue-300 transition-colors"
+                          >
+                            {activity.requestId}
+                          </Badge>
+                        </button>
+                      ) : (
+                        <span className="text-xs text-gray-400">-</span>
+                      )}
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+            {pagination.totalPages > 1 && (
+              <div className="flex items-center justify-between p-4 border-t relative" data-testid="activity-pagination">
+                {loadingPage && (
+                  <div className="absolute inset-0 bg-white/80 flex items-center justify-center z-10 rounded-b-lg">
+                    <Loader2 className="w-5 h-5 animate-spin text-gray-400" />
+                  </div>
+                )}
+                <p className="text-sm text-gray-600">
+                  Showing page {pagination.page} of {pagination.totalPages} ({pagination.totalRecords} total records)
+                </p>
+                <div className="flex gap-2">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => onPageChange(pagination.page - 1)}
+                    disabled={pagination.page <= 1 || loadingPage}
+                    data-testid="activity-pagination-prev"
+                  >
+                    Previous
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => onPageChange(pagination.page + 1)}
+                    disabled={pagination.page >= pagination.totalPages || loadingPage}
+                    data-testid="activity-pagination-next"
+                  >
+                    Next
+                  </Button>
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
diff --git a/src/pages/DetailedReports/components/sections/WorkflowAgingReport.tsx b/src/pages/DetailedReports/components/sections/WorkflowAgingReport.tsx
new file mode 100644
index 0000000..d56fb75
--- /dev/null
+++ b/src/pages/DetailedReports/components/sections/WorkflowAgingReport.tsx
@@ -0,0 +1,262 @@
+/**
+ * Workflow Aging Report Section Component
+ */
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+import { Timer, Download, Search, Loader2, AlertCircle } from 'lucide-react';
+import { AgingWorkflow, PaginationState } from '../../types/detailedReports.types';
+import { DateRangeFilter } from '../DateRangeFilter';
+import { DateRange } from '@/services/dashboard.service';
+import { getPriorityColor, getStatusColor, getDaysOpenColor } from '../../utils/colorMappers';
+
+interface WorkflowAgingReportProps {
+  agingWorkflows: AgingWorkflow[];
+  loading: boolean;
+  loadingPage: boolean;
+  error: string | null;
+  pagination: PaginationState;
+  threshold: string;
+  thresholdError: string | null;
+  dateRange: DateRange;
+  customStartDate?: Date;
+  customEndDate?: Date;
+  showCustomDatePicker: boolean;
+  tempCustomStartDate?: Date;
+  tempCustomEndDate?: Date;
+  searchQuery: string;
+  exporting: boolean;
+  onThresholdChange: (value: string) => void;
+  onThresholdBlur: () => void;
+  onDateRangeChange: (value: string) => void;
+  onShowCustomDatePickerChange: (open: boolean) => void;
+  onStartDateChange: (date: Date | undefined) => void;
+  onEndDateChange: (date: Date | undefined) => void;
+  onApplyCustomDate: () => void;
+  onCancelCustomDate: () => void;
+  onSearchChange: (value: string) => void;
+  onPageChange: (page: number) => void;
+  onExport: () => void;
+  onViewRequest: (requestId: string) => void;
+}
+
+export function WorkflowAgingReport({
+  agingWorkflows,
+  loading,
+  loadingPage,
+  error,
+  pagination,
+  threshold,
+  thresholdError,
+  dateRange,
+  customStartDate,
+  customEndDate,
+  showCustomDatePicker,
+  tempCustomStartDate,
+  tempCustomEndDate,
+  searchQuery,
+  exporting,
+  onThresholdChange,
+  onThresholdBlur,
+  onDateRangeChange,
+  onShowCustomDatePickerChange,
+  onStartDateChange,
+  onEndDateChange,
+  onApplyCustomDate,
+  onCancelCustomDate,
+  onSearchChange,
+  onPageChange,
+  onExport,
+  onViewRequest,
+}: WorkflowAgingReportProps) {
+  return (
+    <Card className="shadow-lg hover:shadow-xl transition-shadow" data-testid="workflow-aging-report">
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <div className="p-3 bg-amber-100 rounded-lg">
+              <Timer className="h-5 w-5 text-amber-600" />
+            </div>
+            <div>
+              <CardTitle className="text-lg text-gray-900">Workflow Aging Report</CardTitle>
+              <CardDescription className="text-gray-600">Workflows exceeding aging threshold</CardDescription>
+            </div>
+          </div>
+          <div className="flex items-center gap-3 flex-wrap">
+            <div className="flex items-center gap-2">
+              <label className="text-sm text-gray-600 whitespace-nowrap">Threshold:</label>
+              <div className="flex flex-col gap-1">
+                <div className="flex items-center gap-2">
+                  <Input
+                    type="number"
+                    min="1"
+                    value={threshold}
+                    onChange={(e) => onThresholdChange(e.target.value)}
+                    onBlur={onThresholdBlur}
+                    className={`w-24 ${thresholdError ? 'border-red-500 focus:border-red-500 focus:ring-red-500' : ''}`}
+                    placeholder="Days"
+                    data-testid="aging-threshold-input"
+                  />
+                  <span className="text-sm text-gray-600 whitespace-nowrap">days</span>
+                </div>
+                {thresholdError && <span className="text-xs text-red-600">{thresholdError}</span>}
+              </div>
+            </div>
+            <Badge variant="outline" className="font-semibold" data-testid="aging-total-badge">
+              {pagination.totalRecords} workflows
+            </Badge>
+            <Button variant="outline" size="sm" className="gap-2" onClick={onExport} disabled={exporting} data-testid="export-aging-button">
+              <Download className="w-4 h-4" />
+              {exporting ? 'Exporting...' : 'Download CSV'}
+            </Button>
+          </div>
+        </div>
+        <div className="mt-4 flex items-center gap-4 flex-wrap">
+          <DateRangeFilter
+            dateRange={dateRange}
+            customStartDate={customStartDate}
+            customEndDate={customEndDate}
+            showCustomDatePicker={showCustomDatePicker}
+            tempCustomStartDate={tempCustomStartDate}
+            tempCustomEndDate={tempCustomEndDate}
+            onDateRangeChange={onDateRangeChange}
+            onShowCustomDatePickerChange={onShowCustomDatePickerChange}
+            onStartDateChange={onStartDateChange}
+            onEndDateChange={onEndDateChange}
+            onApply={onApplyCustomDate}
+            onCancel={onCancelCustomDate}
+            testIdPrefix="aging"
+          />
+          <div className="relative flex-1 min-w-[200px]">
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
+            <Input
+              placeholder="Search by Request ID, Title, or Initiator..."
+              value={searchQuery}
+              onChange={(e) => onSearchChange(e.target.value)}
+              className="pl-10"
+              data-testid="aging-search-input"
+            />
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent>
+        {loading ? (
+          <div className="flex items-center justify-center py-12" data-testid="aging-loading">
+            <Loader2 className="w-6 h-6 animate-spin text-gray-400" />
+            <span className="ml-2 text-sm text-gray-600">Loading aging data...</span>
+          </div>
+        ) : error ? (
+          <div className="flex items-center justify-center py-12 text-red-600" data-testid="aging-error">
+            <AlertCircle className="w-5 h-5 mr-2" />
+            <span className="text-sm">{error}</span>
+          </div>
+        ) : agingWorkflows.length === 0 ? (
+          <div className="text-center py-12 text-gray-500" data-testid="aging-empty">
+            <p className="text-sm">No workflows found exceeding {threshold} days threshold</p>
+          </div>
+        ) : (
+          <div className="rounded-lg border">
+            <Table>
+              <TableHeader>
+                <TableRow className="bg-gray-50">
+                  <TableHead className="font-semibold">Request ID</TableHead>
+                  <TableHead className="font-semibold">Title</TableHead>
+                  <TableHead className="font-semibold">Initiator</TableHead>
+                  <TableHead className="font-semibold">Start Date</TableHead>
+                  <TableHead className="font-semibold">Days Open</TableHead>
+                  <TableHead className="font-semibold">Current Stage</TableHead>
+                  <TableHead className="font-semibold">Assigned To</TableHead>
+                  <TableHead className="font-semibold">Priority</TableHead>
+                  <TableHead className="font-semibold">Status</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {agingWorkflows.map((workflow) => (
+                  <TableRow key={workflow.id} className="hover:bg-gray-50" data-testid={`aging-workflow-${workflow.id}`}>
+                    <TableCell className="font-medium text-sm">
+                      <button
+                        onClick={() => onViewRequest(workflow.requestId || workflow.id)}
+                        className="text-blue-600 hover:text-blue-800 hover:underline cursor-pointer transition-colors"
+                        data-testid={`aging-request-link-${workflow.id}`}
+                      >
+                        {workflow.id}
+                      </button>
+                    </TableCell>
+                    <TableCell className="text-sm">{workflow.title}</TableCell>
+                    <TableCell className="text-sm">{workflow.initiator}</TableCell>
+                    <TableCell className="text-sm text-gray-600">{workflow.startDate}</TableCell>
+                    <TableCell>
+                      <Badge
+                        className={`${getDaysOpenColor(workflow.daysOpen)} text-white border-transparent`}
+                        data-testid={`aging-days-${workflow.id}`}
+                      >
+                        {workflow.daysOpen} days
+                        <span className="ml-1 text-xs opacity-75">(business)</span>
+                      </Badge>
+                    </TableCell>
+                    <TableCell className="text-sm">{workflow.currentStage}</TableCell>
+                    <TableCell className="text-sm">
+                      {workflow.assignedTo && workflow.assignedTo !== 'N/A' ? (
+                        workflow.assignedTo
+                      ) : (
+                        <span className="text-gray-400 italic" title="Assigned approver not available">
+                          N/A
+                        </span>
+                      )}
+                    </TableCell>
+                    <TableCell>
+                      <Badge className={getPriorityColor(workflow.priority)} data-testid={`aging-priority-${workflow.id}`}>
+                        {workflow.priority}
+                      </Badge>
+                    </TableCell>
+                    <TableCell>
+                      <Badge className={getStatusColor(workflow.status)} data-testid={`aging-status-${workflow.id}`}>
+                        {workflow.status}
+                      </Badge>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+            {pagination.totalPages > 1 && (
+              <div className="flex items-center justify-between p-4 border-t relative" data-testid="aging-pagination">
+                {loadingPage && (
+                  <div className="absolute inset-0 bg-white/80 flex items-center justify-center z-10 rounded-b-lg">
+                    <Loader2 className="w-5 h-5 animate-spin text-gray-400" />
+                  </div>
+                )}
+                <p className="text-sm text-gray-600">
+                  Showing page {pagination.page} of {pagination.totalPages} ({pagination.totalRecords} total records)
+                </p>
+                <div className="flex gap-2">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => onPageChange(pagination.page - 1)}
+                    disabled={pagination.page <= 1 || loadingPage}
+                    data-testid="aging-pagination-prev"
+                  >
+                    Previous
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => onPageChange(pagination.page + 1)}
+                    disabled={pagination.page >= pagination.totalPages || loadingPage}
+                    data-testid="aging-pagination-next"
+                  >
+                    Next
+                  </Button>
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
diff --git a/src/pages/DetailedReports/hooks/useActivityLogReport.ts b/src/pages/DetailedReports/hooks/useActivityLogReport.ts
new file mode 100644
index 0000000..b0da38a
--- /dev/null
+++ b/src/pages/DetailedReports/hooks/useActivityLogReport.ts
@@ -0,0 +1,129 @@
+/**
+ * Hook for fetching and managing User Activity Log Report data
+ */
+
+import { useState, useCallback, useEffect, useRef } from 'react';
+import { dashboardService, type DateRange } from '@/services/dashboard.service';
+import { ActivityLogEntry, PaginationState } from '../types/detailedReports.types';
+import { formatDate, mapActivityType } from '../utils/formatting';
+
+const RECORDS_PER_PAGE = 20;
+
+interface UseActivityLogReportOptions {
+  dateRange: DateRange;
+  customStartDate?: Date;
+  customEndDate?: Date;
+  filterCategory?: string;
+  filterSeverity?: string;
+}
+
+export function useActivityLogReport({
+  dateRange,
+  customStartDate,
+  customEndDate,
+  filterCategory,
+  filterSeverity,
+}: UseActivityLogReportOptions) {
+  const [activityLog, setActivityLog] = useState<ActivityLogEntry[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [loadingPage, setLoadingPage] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [pagination, setPagination] = useState<PaginationState>({
+    page: 1,
+    totalPages: 1,
+    totalRecords: 0,
+  });
+  const isInitialMount = useRef(true);
+
+  const fetchData = useCallback(
+    async (page: number = 1) => {
+      const isInitialLoad = page === 1 && isInitialMount.current;
+
+      try {
+        if (isInitialLoad) {
+          setLoading(true);
+        } else {
+          setLoadingPage(true);
+        }
+        setError(null);
+
+        const result = await dashboardService.getActivityLogReport(
+          page,
+          RECORDS_PER_PAGE,
+          dateRange,
+          undefined, // filterUserId
+          undefined, // filterType
+          filterCategory && filterCategory !== 'all' ? filterCategory : undefined,
+          filterSeverity && filterSeverity !== 'all' ? filterSeverity : undefined,
+          customStartDate,
+          customEndDate
+        );
+
+        const mapped = result.activities.map((activity: any) => {
+          const action = mapActivityType(activity.type || '', activity.details as string);
+
+          // For login activities, show meaningful details
+          const isLoginActivity =
+            (activity.type || '').toLowerCase() === 'login' ||
+            activity.requestId === '00000000-0000-0000-0000-000000000001' ||
+            activity.requestId === 'SYSTEM_LOGIN';
+          const details = isLoginActivity
+            ? activity.details || 'User login'
+            : activity.requestTitle || activity.requestNumber || activity.details || 'N/A';
+
+          return {
+            timestamp: activity.timestamp ? formatDate(activity.timestamp) : 'N/A',
+            user: activity.userName || 'Unknown',
+            action,
+            details,
+            ip: activity.ipAddress || 'N/A',
+            userAgent: activity.userAgent || null,
+            requestId: isLoginActivity
+              ? 'System Login'
+              : activity.requestNumber || activity.requestId || '-',
+            userId: activity.userId,
+          };
+        });
+
+        setActivityLog(mapped);
+        setPagination({
+          page: result.pagination.currentPage,
+          totalPages: result.pagination.totalPages,
+          totalRecords: result.pagination.totalRecords,
+        });
+      } catch (error: any) {
+        console.error('Failed to fetch activity data:', error);
+        setError(error?.message || 'Failed to load activity data');
+      } finally {
+        if (isInitialLoad) {
+          setLoading(false);
+        } else {
+          setLoadingPage(false);
+        }
+      }
+      if (isInitialLoad) {
+        isInitialMount.current = false;
+      }
+    },
+    [filterCategory, filterSeverity, dateRange, customStartDate, customEndDate]
+  );
+
+  // Fetch data when filters change
+  useEffect(() => {
+    if (dateRange === 'custom' && (!customStartDate || !customEndDate)) {
+      return;
+    }
+    fetchData(1);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [filterCategory, filterSeverity, dateRange, customStartDate, customEndDate]);
+
+  return {
+    activityLog,
+    loading,
+    loadingPage,
+    error,
+    pagination,
+    fetchData,
+  };
+}
+
diff --git a/src/pages/DetailedReports/hooks/useAgingReport.ts b/src/pages/DetailedReports/hooks/useAgingReport.ts
new file mode 100644
index 0000000..9c21e3b
--- /dev/null
+++ b/src/pages/DetailedReports/hooks/useAgingReport.ts
@@ -0,0 +1,134 @@
+/**
+ * Hook for fetching and managing Workflow Aging Report data
+ */
+
+import { useState, useCallback, useEffect, useMemo, useRef } from 'react';
+import { dashboardService, type DateRange } from '@/services/dashboard.service';
+import { AgingWorkflow, PaginationState } from '../types/detailedReports.types';
+
+const RECORDS_PER_PAGE = 20;
+
+interface UseAgingReportOptions {
+  threshold: string;
+  dateRange: DateRange;
+  customStartDate?: Date;
+  customEndDate?: Date;
+  searchQuery?: string;
+}
+
+export function useAgingReport({
+  threshold,
+  dateRange,
+  customStartDate,
+  customEndDate,
+  searchQuery = '',
+}: UseAgingReportOptions) {
+  const [agingWorkflows, setAgingWorkflows] = useState<AgingWorkflow[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [loadingPage, setLoadingPage] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [pagination, setPagination] = useState<PaginationState>({
+    page: 1,
+    totalPages: 1,
+    totalRecords: 0,
+  });
+  const isInitialMount = useRef(true);
+
+  const fetchData = useCallback(
+    async (page: number = 1) => {
+      const isInitialLoad = page === 1 && isInitialMount.current;
+
+      try {
+        if (isInitialLoad) {
+          setLoading(true);
+        } else {
+          setLoadingPage(true);
+        }
+        setError(null);
+
+        // Validate threshold before fetching
+        const thresholdValue = parseInt(threshold, 10);
+        if (isNaN(thresholdValue) || thresholdValue < 1) {
+          setError('Please enter a valid threshold (minimum 1 day)');
+          return;
+        }
+
+        const result = await dashboardService.getWorkflowAgingReport(
+          thresholdValue,
+          page,
+          RECORDS_PER_PAGE,
+          dateRange,
+          customStartDate,
+          customEndDate
+        );
+
+        const mapped = result.agingData.map((req: any) => {
+          return {
+            id: req.requestNumber || req.requestId,
+            requestId: req.requestId,
+            title: req.title,
+            initiator: req.initiatorName || 'Unknown',
+            startDate: req.submissionDate ? new Date(req.submissionDate).toLocaleDateString() : 'N/A',
+            daysOpen: req.daysOpen,
+            currentStage: req.currentStageName || `Level ${req.currentLevel}`,
+            assignedTo: req.currentApproverName || 'N/A',
+            priority: req.priority || 'medium',
+            status: req.status || 'pending',
+          };
+        });
+
+        setAgingWorkflows(mapped);
+        setPagination({
+          page: result.pagination.currentPage,
+          totalPages: result.pagination.totalPages,
+          totalRecords: result.pagination.totalRecords,
+        });
+      } catch (error: any) {
+        console.error('Failed to fetch aging data:', error);
+        setError(error?.message || 'Failed to load aging data');
+      } finally {
+        if (isInitialLoad) {
+          setLoading(false);
+        } else {
+          setLoadingPage(false);
+        }
+      }
+      if (isInitialLoad) {
+        isInitialMount.current = false;
+      }
+    },
+    [threshold, dateRange, customStartDate, customEndDate]
+  );
+
+  // Filter aging workflows based on search (client-side filtering for current page only)
+  const filteredAgingWorkflows = useMemo(() => {
+    return agingWorkflows.filter((workflow) => {
+      if (!searchQuery) return true;
+      const query = searchQuery.toLowerCase();
+      return (
+        workflow.id?.toLowerCase().includes(query) ||
+        workflow.title?.toLowerCase().includes(query) ||
+        workflow.initiator?.toLowerCase().includes(query)
+      );
+    });
+  }, [agingWorkflows, searchQuery]);
+
+  // Fetch data when threshold or date range changes
+  useEffect(() => {
+    if (dateRange === 'custom' && (!customStartDate || !customEndDate)) {
+      return;
+    }
+    fetchData(1);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [threshold, dateRange, customStartDate, customEndDate]);
+
+  return {
+    agingWorkflows: filteredAgingWorkflows,
+    loading,
+    loadingPage,
+    error,
+    pagination,
+    fetchData,
+  };
+}
+
diff --git a/src/pages/DetailedReports/hooks/useDateFilter.ts b/src/pages/DetailedReports/hooks/useDateFilter.ts
new file mode 100644
index 0000000..d57a864
--- /dev/null
+++ b/src/pages/DetailedReports/hooks/useDateFilter.ts
@@ -0,0 +1,117 @@
+/**
+ * Hook for managing date filter state
+ */
+
+import { useState, useCallback } from 'react';
+import { DateRange } from '@/services/dashboard.service';
+import { format } from 'date-fns';
+
+export function useDateFilter(initialRange: DateRange = 'month') {
+  const [dateRange, setDateRange] = useState<DateRange>(initialRange);
+  const [customStartDate, setCustomStartDate] = useState<Date | undefined>(undefined);
+  const [customEndDate, setCustomEndDate] = useState<Date | undefined>(undefined);
+  const [showCustomDatePicker, setShowCustomDatePicker] = useState(false);
+  const [tempCustomStartDate, setTempCustomStartDate] = useState<Date | undefined>(undefined);
+  const [tempCustomEndDate, setTempCustomEndDate] = useState<Date | undefined>(undefined);
+
+  const handleDateRangeChange = useCallback((value: string) => {
+    const newRange = value as DateRange;
+    setDateRange(newRange);
+    if (newRange !== 'custom') {
+      setCustomStartDate(undefined);
+      setCustomEndDate(undefined);
+      setTempCustomStartDate(undefined);
+      setTempCustomEndDate(undefined);
+      setShowCustomDatePicker(false);
+    } else {
+      // Initialize temp state from actual state when opening
+      setTempCustomStartDate(customStartDate);
+      setTempCustomEndDate(customEndDate);
+      setShowCustomDatePicker(true);
+    }
+  }, [customStartDate, customEndDate]);
+
+  const handleApplyCustomDate = useCallback(() => {
+    if (tempCustomStartDate && tempCustomEndDate) {
+      // Swap dates if start > end
+      if (tempCustomStartDate > tempCustomEndDate) {
+        const temp = tempCustomStartDate;
+        setCustomStartDate(tempCustomEndDate);
+        setCustomEndDate(temp);
+        setTempCustomStartDate(tempCustomEndDate);
+        setTempCustomEndDate(temp);
+      } else {
+        setCustomStartDate(tempCustomStartDate);
+        setCustomEndDate(tempCustomEndDate);
+      }
+      setShowCustomDatePicker(false);
+    }
+  }, [tempCustomStartDate, tempCustomEndDate]);
+
+  const handleCancelCustomDate = useCallback(() => {
+    setShowCustomDatePicker(false);
+    setTempCustomStartDate(customStartDate);
+    setTempCustomEndDate(customEndDate);
+    if (!customStartDate || !customEndDate) {
+      setCustomStartDate(undefined);
+      setCustomEndDate(undefined);
+      setDateRange('month');
+    }
+  }, [customStartDate, customEndDate]);
+
+  const handleStartDateChange = useCallback((date: Date | undefined) => {
+    if (date) {
+      setTempCustomStartDate(date);
+      if (tempCustomEndDate && date > tempCustomEndDate) {
+        setTempCustomEndDate(date);
+      }
+    } else {
+      setTempCustomStartDate(undefined);
+    }
+  }, [tempCustomEndDate]);
+
+  const handleEndDateChange = useCallback((date: Date | undefined) => {
+    if (date) {
+      setTempCustomEndDate(date);
+      if (tempCustomStartDate && date < tempCustomStartDate) {
+        setTempCustomStartDate(date);
+      }
+    } else {
+      setTempCustomEndDate(undefined);
+    }
+  }, [tempCustomStartDate]);
+
+  const getDisplayDateRange = useCallback((): string => {
+    if (customStartDate && customEndDate) {
+      return `${format(customStartDate, 'MMM d, yyyy')} - ${format(customEndDate, 'MMM d, yyyy')}`;
+    }
+    return 'Select dates';
+  }, [customStartDate, customEndDate]);
+
+  const reset = useCallback(() => {
+    setDateRange('month');
+    setCustomStartDate(undefined);
+    setCustomEndDate(undefined);
+    setShowCustomDatePicker(false);
+    setTempCustomStartDate(undefined);
+    setTempCustomEndDate(undefined);
+  }, []);
+
+  return {
+    dateRange,
+    customStartDate,
+    customEndDate,
+    showCustomDatePicker,
+    tempCustomStartDate,
+    tempCustomEndDate,
+    setShowCustomDatePicker,
+    handleDateRangeChange,
+    handleApplyCustomDate,
+    handleCancelCustomDate,
+    handleStartDateChange,
+    handleEndDateChange,
+    getDisplayDateRange,
+    reset,
+  };
+}
+
diff --git a/src/pages/DetailedReports/hooks/useDetailedReportsExports.ts b/src/pages/DetailedReports/hooks/useDetailedReportsExports.ts
new file mode 100644
index 0000000..8163d5a
--- /dev/null
+++ b/src/pages/DetailedReports/hooks/useDetailedReportsExports.ts
@@ -0,0 +1,74 @@
+/**
+ * Hook for managing CSV export functionality
+ */
+
+import { useState, useCallback } from 'react';
+import { DateRange } from '@/services/dashboard.service';
+import { exportLifecycleToCSV, exportActivityToCSV, exportAgingToCSV } from '../utils/csvExports';
+
+export function useDetailedReportsExports() {
+  const [exportingLifecycle, setExportingLifecycle] = useState(false);
+  const [exportingActivity, setExportingActivity] = useState(false);
+  const [exportingAging, setExportingAging] = useState(false);
+
+  const handleExportLifecycle = useCallback(
+    async (dateRange: DateRange, customStartDate?: Date, customEndDate?: Date) => {
+      try {
+        setExportingLifecycle(true);
+        await exportLifecycleToCSV(dateRange, customStartDate, customEndDate);
+      } catch (error: any) {
+        console.error('Failed to export lifecycle data:', error);
+        alert('Failed to export lifecycle data. Please try again.');
+      } finally {
+        setExportingLifecycle(false);
+      }
+    },
+    []
+  );
+
+  const handleExportActivity = useCallback(
+    async (
+      dateRange: DateRange,
+      customStartDate?: Date,
+      customEndDate?: Date,
+      filterCategory?: string,
+      filterSeverity?: string
+    ) => {
+      try {
+        setExportingActivity(true);
+        await exportActivityToCSV(dateRange, customStartDate, customEndDate, filterCategory, filterSeverity);
+      } catch (error: any) {
+        console.error('Failed to export activity data:', error);
+        alert('Failed to export activity data. Please try again.');
+      } finally {
+        setExportingActivity(false);
+      }
+    },
+    []
+  );
+
+  const handleExportAging = useCallback(
+    async (threshold: number, dateRange: DateRange, customStartDate?: Date, customEndDate?: Date) => {
+      try {
+        setExportingAging(true);
+        await exportAgingToCSV(threshold, dateRange, customStartDate, customEndDate);
+      } catch (error: any) {
+        console.error('Failed to export aging data:', error);
+        alert('Failed to export aging data. Please try again.');
+      } finally {
+        setExportingAging(false);
+      }
+    },
+    []
+  );
+
+  return {
+    exportingLifecycle,
+    exportingActivity,
+    exportingAging,
+    handleExportLifecycle,
+    handleExportActivity,
+    handleExportAging,
+  };
+}
+
diff --git a/src/pages/DetailedReports/hooks/useLifecycleReport.ts b/src/pages/DetailedReports/hooks/useLifecycleReport.ts
new file mode 100644
index 0000000..c1e5375
--- /dev/null
+++ b/src/pages/DetailedReports/hooks/useLifecycleReport.ts
@@ -0,0 +1,110 @@
+/**
+ * Hook for fetching and managing Request Lifecycle Report data
+ */
+
+import { useState, useCallback, useEffect, useRef } from 'react';
+import { dashboardService, type DateRange } from '@/services/dashboard.service';
+import { LifecycleRequest, PaginationState } from '../types/detailedReports.types';
+import { formatTAT, formatDate } from '../utils/formatting';
+
+const LIFECYCLE_RECORDS_PER_PAGE = 10;
+
+interface UseLifecycleReportOptions {
+  dateRange: DateRange;
+  customStartDate?: Date;
+  customEndDate?: Date;
+}
+
+export function useLifecycleReport({ dateRange, customStartDate, customEndDate }: UseLifecycleReportOptions) {
+  const [lifecycleRequests, setLifecycleRequests] = useState<LifecycleRequest[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [loadingPage, setLoadingPage] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [pagination, setPagination] = useState<PaginationState>({
+    page: 1,
+    totalPages: 1,
+    totalRecords: 0,
+  });
+  const isInitialMount = useRef(true);
+
+  const fetchData = useCallback(
+    async (page: number = 1) => {
+      const isInitialLoad = page === 1 && isInitialMount.current;
+
+      try {
+        if (isInitialLoad) {
+          setLoading(true);
+        } else {
+          setLoadingPage(true);
+        }
+        setError(null);
+
+        const result = await dashboardService.getLifecycleReport(
+          page,
+          LIFECYCLE_RECORDS_PER_PAGE,
+          dateRange,
+          customStartDate,
+          customEndDate
+        );
+
+        const mapped = result.lifecycleData.map((req: any) => {
+          const overallTAT = formatTAT(req.overallTATHours);
+
+          return {
+            id: req.requestNumber,
+            requestId: req.requestId,
+            title: req.title,
+            priority: req.priority || 'medium',
+            status: req.status,
+            initiator: req.initiatorName || 'Unknown',
+            initDate: formatDate(req.submissionDate),
+            currentStage: req.currentStageName || `Level ${req.currentLevel}`,
+            overallTAT,
+            currentLevel: req.currentLevel,
+            totalLevels: req.totalLevels,
+            breachCount: req.breachCount || 0,
+          };
+        });
+
+        setLifecycleRequests(mapped);
+        setPagination({
+          page: result.pagination.currentPage,
+          totalPages: result.pagination.totalPages,
+          totalRecords: result.pagination.totalRecords,
+        });
+      } catch (error: any) {
+        console.error('Failed to fetch lifecycle data:', error);
+        setError(error?.message || 'Failed to load lifecycle data');
+      } finally {
+        if (isInitialLoad) {
+          setLoading(false);
+        } else {
+          setLoadingPage(false);
+        }
+      }
+      if (isInitialLoad) {
+        isInitialMount.current = false;
+      }
+    },
+    [dateRange, customStartDate, customEndDate]
+  );
+
+  // Fetch data when filters change
+  useEffect(() => {
+    if (dateRange === 'custom' && (!customStartDate || !customEndDate)) {
+      return;
+    }
+    fetchData(1);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [dateRange, customStartDate, customEndDate]);
+
+  return {
+    lifecycleRequests,
+    loading,
+    loadingPage,
+    error,
+    pagination,
+    fetchData,
+  };
+}
+
diff --git a/src/pages/DetailedReports/hooks/useThreshold.ts b/src/pages/DetailedReports/hooks/useThreshold.ts
new file mode 100644
index 0000000..fd6a312
--- /dev/null
+++ b/src/pages/DetailedReports/hooks/useThreshold.ts
@@ -0,0 +1,46 @@
+/**
+ * Hook for managing threshold input state and validation
+ */
+
+import { useState, useCallback } from 'react';
+
+export function useThreshold(initialValue: string = '7') {
+  const [threshold, setThreshold] = useState(initialValue);
+  const [thresholdError, setThresholdError] = useState<string | null>(null);
+
+  const handleThresholdChange = useCallback((value: string) => {
+    // Allow empty string while typing
+    if (value === '') {
+      setThreshold('');
+      setThresholdError(null);
+      return;
+    }
+    // Parse as integer
+    const numValue = parseInt(value, 10);
+    // Validate: must be a positive integer >= 1
+    if (isNaN(numValue) || numValue < 1) {
+      setThresholdError('Minimum threshold is 1 day');
+      setThreshold(value); // Keep the invalid value for user to see
+    } else {
+      setThresholdError(null);
+      setThreshold(value);
+    }
+  }, []);
+
+  const handleThresholdBlur = useCallback(() => {
+    // If empty or invalid on blur, reset to minimum (1)
+    if (threshold === '' || isNaN(parseInt(threshold, 10)) || parseInt(threshold, 10) < 1) {
+      setThreshold('1');
+      setThresholdError(null);
+    }
+  }, [threshold]);
+
+  return {
+    threshold,
+    thresholdError,
+    setThreshold,
+    handleThresholdChange,
+    handleThresholdBlur,
+  };
+}
+
diff --git a/src/pages/DetailedReports/types/detailedReports.types.ts b/src/pages/DetailedReports/types/detailedReports.types.ts
new file mode 100644
index 0000000..1a9f0a2
--- /dev/null
+++ b/src/pages/DetailedReports/types/detailedReports.types.ts
@@ -0,0 +1,60 @@
+/**
+ * Detailed Reports TypeScript interfaces
+ */
+
+import { DateRange } from '@/services/dashboard.service';
+
+export interface LifecycleRequest {
+  id: string;
+  requestId: string;
+  title: string;
+  priority: string;
+  status: string;
+  initiator: string;
+  initDate: string;
+  currentStage: string;
+  overallTAT: string;
+  currentLevel: number;
+  totalLevels: number;
+  breachCount: number;
+}
+
+export interface ActivityLogEntry {
+  timestamp: string;
+  user: string;
+  action: string;
+  details: string;
+  ip: string;
+  userAgent: string | null;
+  requestId: string;
+  userId?: string;
+}
+
+export interface AgingWorkflow {
+  id: string;
+  requestId: string;
+  title: string;
+  initiator: string;
+  startDate: string;
+  daysOpen: number;
+  currentStage: string;
+  assignedTo: string;
+  priority: string;
+  status: string;
+}
+
+export interface PaginationState {
+  page: number;
+  totalPages: number;
+  totalRecords: number;
+}
+
+export interface DateFilterState {
+  dateRange: DateRange;
+  customStartDate?: Date;
+  customEndDate?: Date;
+  showCustomDatePicker: boolean;
+  tempCustomStartDate?: Date;
+  tempCustomEndDate?: Date;
+}
+
diff --git a/src/pages/DetailedReports/utils/colorMappers.ts b/src/pages/DetailedReports/utils/colorMappers.ts
new file mode 100644
index 0000000..82d8197
--- /dev/null
+++ b/src/pages/DetailedReports/utils/colorMappers.ts
@@ -0,0 +1,69 @@
+/**
+ * Color mapping utility functions for badges and status indicators
+ */
+
+/**
+ * Get badge color class for activity action
+ */
+export function getActionBadgeColor(action: string): string {
+  switch (action) {
+    case 'Login':
+      return 'text-blue-700 bg-blue-100 border-blue-200';
+    case 'Created Request':
+      return 'text-purple-700 bg-purple-100 border-purple-200';
+    case 'Approved Request':
+      return 'text-emerald-700 bg-emerald-100 border-emerald-200';
+    case 'Rejected Request':
+      return 'text-red-700 bg-red-100 border-red-200';
+    case 'Added Comment':
+      return 'text-amber-700 bg-amber-100 border-amber-200';
+    case 'Viewed Request':
+      return 'text-gray-700 bg-gray-100 border-gray-200';
+    case 'Uploaded Document':
+      return 'text-indigo-700 bg-indigo-100 border-indigo-200';
+    default:
+      return 'text-gray-700 bg-gray-100 border-gray-200';
+  }
+}
+
+/**
+ * Get badge color class for priority
+ */
+export function getPriorityColor(priority: string): string {
+  switch (priority) {
+    case 'high':
+      return 'bg-red-100 text-red-800 border-red-200';
+    case 'medium':
+      return 'bg-orange-100 text-orange-800 border-orange-200';
+    case 'low':
+      return 'bg-green-100 text-green-800 border-green-200';
+    default:
+      return 'bg-gray-100 text-gray-800 border-gray-200';
+  }
+}
+
+/**
+ * Get badge color class for status
+ */
+export function getStatusColor(status: string): string {
+  switch (status) {
+    case 'Delayed':
+      return 'text-red-700 bg-red-100 border-red-200';
+    case 'On Time':
+      return 'text-emerald-700 bg-emerald-100 border-emerald-200';
+    case 'Pending':
+      return 'bg-orange-100 text-orange-800 border-orange-200';
+    default:
+      return 'bg-gray-100 text-gray-800 border-gray-200';
+  }
+}
+
+/**
+ * Get background color class for days open indicator
+ */
+export function getDaysOpenColor(days: number): string {
+  if (days >= 20) return 'bg-red-600';
+  if (days >= 10) return 'bg-orange-500';
+  return 'bg-amber-500';
+}
+
diff --git a/src/pages/DetailedReports/utils/csvExports.ts b/src/pages/DetailedReports/utils/csvExports.ts
new file mode 100644
index 0000000..03387b9
--- /dev/null
+++ b/src/pages/DetailedReports/utils/csvExports.ts
@@ -0,0 +1,168 @@
+/**
+ * CSV Export utility functions for Detailed Reports
+ */
+
+import { dashboardService, type DateRange } from '@/services/dashboard.service';
+import { formatTAT, formatDate, formatDateForCSV, mapActivityType } from './formatting';
+import { LifecycleRequest, ActivityLogEntry, AgingWorkflow } from '../types/detailedReports.types';
+
+/**
+ * Export Lifecycle Report to CSV
+ */
+export async function exportLifecycleToCSV(
+  dateRange: DateRange,
+  customStartDate?: Date,
+  customEndDate?: Date
+): Promise<void> {
+  // Fetch all data with a very large limit
+  const result = await dashboardService.getLifecycleReport(1, 10000, dateRange, customStartDate, customEndDate);
+
+  const csvRows = [
+    [
+      'Request Number',
+      'Title',
+      'Priority',
+      'Status',
+      'Initiator',
+      'Submission Date',
+      'Current Stage',
+      'Overall TAT',
+      'Current Level',
+      'Total Levels',
+      'Breach Count',
+    ].join(','),
+  ];
+
+  result.lifecycleData.forEach((req: any) => {
+    const overallTAT = formatTAT(req.overallTATHours);
+    const submissionDateCSV = req.submissionDate ? formatDateForCSV(req.submissionDate) : 'N/A';
+    const row = [
+      req.requestNumber || '',
+      `"${(req.title || '').replace(/"/g, '""')}"`,
+      req.priority || 'medium',
+      req.status || '',
+      `"${(req.initiatorName || 'Unknown').replace(/"/g, '""')}"`,
+      submissionDateCSV,
+      `"${(req.currentStageName || `Level ${req.currentLevel}`).replace(/"/g, '""')}"`,
+      overallTAT,
+      (req.currentLevel || '').toString(),
+      (req.totalLevels || '').toString(),
+      (req.breachCount || 0).toString(),
+    ];
+    csvRows.push(row.join(','));
+  });
+
+  downloadCSV(csvRows, `lifecycle-report-${new Date().toISOString().split('T')[0]}.csv`);
+}
+
+/**
+ * Export Activity Log Report to CSV
+ */
+export async function exportActivityToCSV(
+  dateRange: DateRange,
+  customStartDate?: Date,
+  customEndDate?: Date,
+  filterCategory?: string,
+  filterSeverity?: string
+): Promise<void> {
+  const result = await dashboardService.getActivityLogReport(
+    1,
+    10000,
+    dateRange,
+    undefined, // filterUserId
+    undefined, // filterType
+    filterCategory && filterCategory !== 'all' ? filterCategory : undefined,
+    filterSeverity && filterSeverity !== 'all' ? filterSeverity : undefined,
+    customStartDate,
+    customEndDate
+  );
+
+  const csvRows = [
+    ['Timestamp', 'User', 'Action', 'Details', 'IP Address', 'User Agent', 'Request ID'].join(','),
+  ];
+
+  result.activities.forEach((activity: any) => {
+    const action = mapActivityType(activity.type || '', activity.details as string);
+    const timestampCSV = activity.timestamp ? formatDateForCSV(activity.timestamp) : 'N/A';
+    const row = [
+      timestampCSV,
+      `"${(activity.userName || 'Unknown').replace(/"/g, '""')}"`,
+      `"${action.replace(/"/g, '""')}"`,
+      `"${(activity.requestTitle || activity.requestNumber || activity.details || 'N/A').replace(/"/g, '""')}"`,
+      activity.ipAddress || 'N/A',
+      `"${(activity.userAgent || '').replace(/"/g, '""')}"`,
+      activity.requestNumber || activity.requestId || '-',
+    ];
+    csvRows.push(row.join(','));
+  });
+
+  downloadCSV(csvRows, `activity-log-report-${new Date().toISOString().split('T')[0]}.csv`);
+}
+
+/**
+ * Export Workflow Aging Report to CSV
+ */
+export async function exportAgingToCSV(
+  threshold: number,
+  dateRange: DateRange,
+  customStartDate?: Date,
+  customEndDate?: Date
+): Promise<void> {
+  const result = await dashboardService.getWorkflowAgingReport(
+    threshold,
+    1,
+    10000,
+    dateRange,
+    customStartDate,
+    customEndDate
+  );
+
+  const csvRows = [
+    [
+      'Request ID',
+      'Title',
+      'Initiator',
+      'Start Date',
+      'Days Open (Business)',
+      'Current Stage',
+      'Assigned To',
+      'Priority',
+      'Status',
+    ].join(','),
+  ];
+
+  result.agingData.forEach((req: any) => {
+    const startDateCSV = req.submissionDate ? formatDateForCSV(req.submissionDate) : 'N/A';
+    const row = [
+      req.requestNumber || req.requestId || '',
+      `"${(req.title || '').replace(/"/g, '""')}"`,
+      `"${(req.initiatorName || 'Unknown').replace(/"/g, '""')}"`,
+      startDateCSV,
+      (req.daysOpen || 0).toString(),
+      `"${(req.currentStageName || `Level ${req.currentLevel}`).replace(/"/g, '""')}"`,
+      `"${(req.currentApproverName || 'N/A').replace(/"/g, '""')}"`,
+      req.priority || 'medium',
+      req.status || 'pending',
+    ];
+    csvRows.push(row.join(','));
+  });
+
+  downloadCSV(csvRows, `workflow-aging-report-${new Date().toISOString().split('T')[0]}.csv`);
+}
+
+/**
+ * Helper function to download CSV file
+ */
+function downloadCSV(csvRows: string[], filename: string): void {
+  const csvContent = csvRows.join('\n');
+  const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
+  const link = document.createElement('a');
+  const url = URL.createObjectURL(blob);
+  link.setAttribute('href', url);
+  link.setAttribute('download', filename);
+  link.style.visibility = 'hidden';
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+}
+
diff --git a/src/pages/DetailedReports/utils/formatting.ts b/src/pages/DetailedReports/utils/formatting.ts
new file mode 100644
index 0000000..20e7b60
--- /dev/null
+++ b/src/pages/DetailedReports/utils/formatting.ts
@@ -0,0 +1,72 @@
+/**
+ * Formatting utility functions for Detailed Reports
+ */
+
+import { formatHoursMinutes } from '@/utils/slaTracker';
+
+/**
+ * Format TAT hours (working hours to working days)
+ * Backend returns working hours, so we divide by 8 (working hours per day) not 24
+ */
+export function formatTAT(hours: number | null | undefined): string {
+  if (!hours && hours !== 0) return 'N/A';
+  const WORKING_HOURS_PER_DAY = 8;
+  if (hours < WORKING_HOURS_PER_DAY) return formatHoursMinutes(hours);
+  const days = Math.floor(hours / WORKING_HOURS_PER_DAY);
+  const remainingHours = hours % WORKING_HOURS_PER_DAY;
+  return remainingHours > 0 ? `${days}d ${formatHoursMinutes(remainingHours)}` : `${days}d`;
+}
+
+/**
+ * Format date for display
+ */
+export function formatDate(date: string | null | undefined): string {
+  if (!date) return 'N/A';
+  try {
+    const d = new Date(date);
+    return d.toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+  } catch {
+    return date;
+  }
+}
+
+/**
+ * Format date for CSV export (no commas, consistent format)
+ */
+export function formatDateForCSV(date: string | null | undefined): string {
+  if (!date) return 'N/A';
+  try {
+    const d = new Date(date);
+    // Format: YYYY-MM-DD HH:MM (no commas, Excel-friendly)
+    const year = d.getFullYear();
+    const month = String(d.getMonth() + 1).padStart(2, '0');
+    const day = String(d.getDate()).padStart(2, '0');
+    const hours = String(d.getHours()).padStart(2, '0');
+    const minutes = String(d.getMinutes()).padStart(2, '0');
+    return `${year}-${month}-${day} ${hours}:${minutes}`;
+  } catch {
+    return date;
+  }
+}
+
+/**
+ * Map activity type to display label
+ */
+export function mapActivityType(type: string, _activityDescription?: string): string {
+  const typeLower = (type || '').toLowerCase();
+  if (typeLower.includes('created') || typeLower.includes('create')) return 'Created Request';
+  if (typeLower.includes('approval') || typeLower.includes('approved')) return 'Approved Request';
+  if (typeLower.includes('rejection') || typeLower.includes('rejected')) return 'Rejected Request';
+  if (typeLower.includes('comment')) return 'Added Comment';
+  if (typeLower.includes('view') || typeLower.includes('viewed')) return 'Viewed Request';
+  if (typeLower.includes('upload') || typeLower.includes('document')) return 'Uploaded Document';
+  if (typeLower.includes('login')) return 'Login';
+  return type || 'Activity';
+}
+
diff --git a/src/pages/MyRequests/MyRequests.tsx b/src/pages/MyRequests/MyRequests.tsx
index 19b74f4..3dac0fb 100644
--- a/src/pages/MyRequests/MyRequests.tsx
+++ b/src/pages/MyRequests/MyRequests.tsx
@@ -1,231 +1,74 @@
-import { useEffect, useState, useCallback } from 'react';
-import { Card, CardContent } from '@/components/ui/card';
-import { Input } from '@/components/ui/input';
-import { Badge } from '@/components/ui/badge';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { 
-  FileText, 
-  Search, 
-  Clock, 
-  CheckCircle, 
-  XCircle,
-  User,
-  ArrowRight,
-  TrendingUp,
-  Edit,
-  Flame,
-  Target,
-  AlertCircle
-} from 'lucide-react';
-import { motion } from 'framer-motion';
-import workflowApi from '@/services/workflowApi';
+import { useCallback, useRef } from 'react';
+import { FileText } from 'lucide-react';
 import { PageHeader } from '@/components/common/PageHeader';
-import { StatsCard } from '@/components/dashboard/StatsCard';
 import { Pagination } from '@/components/common/Pagination';
 
+// Components
+import { MyRequestsStatsSection } from './components/MyRequestsStats';
+import { MyRequestsFilters as MyRequestsFiltersComponent } from './components/MyRequestsFilters';
+import { MyRequestsList } from './components/MyRequestsList';
+
+// Hooks
+import { useMyRequests } from './hooks/useMyRequests';
+import { useMyRequestsFilters } from './hooks/useMyRequestsFilters';
+import { useMyRequestsStats } from './hooks/useMyRequestsStats';
+
+// Utils
+import { transformRequests } from './utils/requestTransformers';
+
+// Types
+import type { MyRequestsFilters } from './types/myRequests.types';
+
 interface MyRequestsProps {
   onViewRequest: (requestId: string, requestTitle?: string, status?: string) => void;
   dynamicRequests?: any[];
 }
 
-const getPriorityConfig = (priority: string) => {
-  switch (priority) {
-    case 'express':
-      return {
-        color: 'bg-red-100 text-red-800 border-red-200',
-        icon: Flame,
-        iconColor: 'text-red-600'
-      };
-    case 'standard':
-      return {
-        color: 'bg-blue-100 text-blue-800 border-blue-200',
-        icon: Target,
-        iconColor: 'text-blue-600'
-      };
-    default:
-      return {
-        color: 'bg-gray-100 text-gray-800 border-gray-200',
-        icon: Target,
-        iconColor: 'text-gray-600'
-      };
-  }
-};
-
-const getStatusConfig = (status: string) => {
-  switch (status) {
-    case 'approved':
-      return {
-        color: 'bg-green-100 text-green-800 border-green-200',
-        icon: CheckCircle,
-        iconColor: 'text-green-600'
-      };
-    case 'rejected':
-      return {
-        color: 'bg-red-100 text-red-800 border-red-200',
-        icon: XCircle,
-        iconColor: 'text-red-600'
-      };
-    case 'pending':
-      return {
-        color: 'bg-yellow-100 text-yellow-800 border-yellow-200',
-        icon: Clock,
-        iconColor: 'text-yellow-600'
-      };
-    case 'closed':
-      return {
-        color: 'bg-gray-100 text-gray-800 border-gray-200',
-        icon: CheckCircle,
-        iconColor: 'text-gray-600'
-      };
-    case 'draft':
-      return {
-        color: 'bg-gray-100 text-gray-800 border-gray-200',
-        icon: Edit,
-        iconColor: 'text-gray-600'
-      };
-    default:
-      return {
-        color: 'bg-gray-100 text-gray-800 border-gray-200',
-        icon: AlertCircle,
-        iconColor: 'text-gray-600'
-      };
-  }
-};
-
-
 export function MyRequests({ onViewRequest, dynamicRequests = [] }: MyRequestsProps) {
-  const [searchTerm, setSearchTerm] = useState('');
-  const [statusFilter, setStatusFilter] = useState('all');
-  const [priorityFilter, setPriorityFilter] = useState('all');
-  const [apiRequests, setApiRequests] = useState<any[]>([]);
-  const [loading, setLoading] = useState(false);
-  const [hasFetchedFromApi, setHasFetchedFromApi] = useState(false);
-  
-  // Pagination states
-  const [currentPage, setCurrentPage] = useState(1);
-  const [totalPages, setTotalPages] = useState(1);
-  const [totalRecords, setTotalRecords] = useState(0);
-  const [itemsPerPage] = useState(10);
+  // Data fetching hook
+  const myRequests = useMyRequests({ itemsPerPage: 10 });
 
-  const fetchMyRequests = useCallback(async (page: number = 1, filters?: { search?: string; status?: string; priority?: string }) => {
-    try {
-      if (page === 1) {
-        setLoading(true);
-        setApiRequests([]);
-      }
-      
-      const result = await workflowApi.listMyWorkflows({ 
-        page, 
-        limit: itemsPerPage,
-        search: filters?.search,
-        status: filters?.status,
-        priority: filters?.priority
-      });
-      console.log('[MyRequests] API Response:', result); // Debug log
-      
-      // Extract data - workflowApi now returns { data: [], pagination: {} }
-      const items = Array.isArray((result as any)?.data) 
-        ? (result as any).data 
-        : [];
-      
-      console.log('[MyRequests] Parsed items:', items); // Debug log
-      
-      setApiRequests(items);
-      setHasFetchedFromApi(true);
-      
-      // Set pagination data
-      const pagination = (result as any)?.pagination;
-      if (pagination) {
-        setCurrentPage(pagination.page || 1);
-        setTotalPages(pagination.totalPages || 1);
-        setTotalRecords(pagination.total || 0);
-      }
-    } catch (error) {
-      console.error('[MyRequests] Error fetching requests:', error);
-      setApiRequests([]);
-      setHasFetchedFromApi(true);
-    } finally {
-      setLoading(false);
-    }
-  }, [itemsPerPage]);
+  // Filters hook - use ref to avoid circular dependency
+  const fetchRef = useRef(myRequests.fetchMyRequests);
+  fetchRef.current = myRequests.fetchMyRequests;
 
-  const handlePageChange = (newPage: number) => {
-    if (newPage >= 1 && newPage <= totalPages) {
-      setCurrentPage(newPage);
-      fetchMyRequests(newPage, { 
-        search: searchTerm || undefined, 
-        status: statusFilter !== 'all' ? statusFilter : undefined, 
-        priority: priorityFilter !== 'all' ? priorityFilter : undefined 
-      });
-    }
-  };
+  const filters = useMyRequestsFilters({
+    onFiltersChange: useCallback(
+      (filters: MyRequestsFilters) => {
+        // Reset to page 1 when filters change
+        fetchRef.current(1, {
+          search: filters.search || undefined,
+          status: filters.status !== 'all' ? filters.status : undefined,
+          priority: filters.priority !== 'all' ? filters.priority : undefined,
+        });
+      },
+      []
+    ),
+  });
 
-  // Initial fetch on mount
-  useEffect(() => {
-    fetchMyRequests(1, { 
-      search: searchTerm || undefined, 
-      status: statusFilter !== 'all' ? statusFilter : undefined, 
-      priority: priorityFilter !== 'all' ? priorityFilter : undefined 
-    });
-  }, [fetchMyRequests]);
-  
-  // Fetch when filters change (with debouncing for search)
-  useEffect(() => {
-    // Debounce search: wait 500ms after user stops typing
-    const timeoutId = setTimeout(() => {
-      if (hasFetchedFromApi) { // Only refetch if we've already loaded data once
-        setCurrentPage(1); // Reset to page 1 when filters change
-        fetchMyRequests(1, { 
-          search: searchTerm || undefined, 
-          status: statusFilter !== 'all' ? statusFilter : undefined, 
-          priority: priorityFilter !== 'all' ? priorityFilter : undefined 
+  // Handle dynamic requests (fallback until API loads)
+  const convertedDynamicRequests = transformRequests(dynamicRequests);
+  const sourceRequests = myRequests.hasFetchedFromApi ? myRequests.requests : convertedDynamicRequests;
+
+  // Stats calculation
+  const stats = useMyRequestsStats({
+    requests: sourceRequests,
+    totalRecords: myRequests.pagination.totalRecords,
+  });
+
+  // Page change handler
+  const handlePageChange = useCallback(
+    (newPage: number) => {
+      if (newPage >= 1 && newPage <= myRequests.pagination.totalPages) {
+        myRequests.fetchMyRequests(newPage, {
+          search: filters.searchTerm || undefined,
+          status: filters.statusFilter !== 'all' ? filters.statusFilter : undefined,
+          priority: filters.priorityFilter !== 'all' ? filters.priorityFilter : undefined,
         });
       }
-    }, searchTerm ? 500 : 0); // Debounce only for search, instant for dropdowns
-
-    return () => clearTimeout(timeoutId);
-  }, [searchTerm, statusFilter, priorityFilter, hasFetchedFromApi, fetchMyRequests]);
-  
-  // Convert API/dynamic requests to the format expected by this component
-  // Once API has fetched (even if empty), always use API data, never fall back to props
-  const sourceRequests = hasFetchedFromApi ? apiRequests : dynamicRequests;
-  const convertedDynamicRequests = Array.isArray(sourceRequests) ? sourceRequests.map((req: any) => {
-    const createdAt = req.submittedAt || req.submitted_at || req.createdAt || req.created_at;
-    const priority = (req.priority || '').toString().toLowerCase();
-    
-    return {
-      id: req.requestNumber || req.request_number || req.requestId || req.id || req.request_id,
-      requestId: req.requestId || req.id || req.request_id,
-      displayId: req.requestNumber || req.request_number || req.id,
-      title: req.title,
-      description: req.description,
-      status: (req.status || '').toString().toLowerCase().replace('_','-'),
-      priority: priority,
-      department: req.department,
-      submittedDate: req.submittedAt || (req.createdAt ? new Date(req.createdAt).toISOString().split('T')[0] : undefined),
-      createdAt: createdAt,
-      currentApprover: req.currentApprover?.name || req.currentApprover?.email || '—',
-      approverLevel: req.currentLevel && req.totalLevels ? `${req.currentLevel} of ${req.totalLevels}` : (req.currentStep && req.totalSteps ? `${req.currentStep} of ${req.totalSteps}` : '—'),
-      templateType: req.templateType,
-      templateName: req.templateName
-    };
-  }) : [];
-  
-  // Use only API/dynamic requests - backend already filtered
-  const allRequests = convertedDynamicRequests;
-
-  // No frontend filtering - backend handles all filtering
-  const filteredRequests = allRequests;
-
-  // Stats calculation - using total from pagination for total count
-  const stats = {
-    total: totalRecords || allRequests.length,
-    pending: allRequests.filter(r => r.status === 'pending').length,
-    approved: allRequests.filter(r => r.status === 'approved').length,
-    rejected: allRequests.filter(r => r.status === 'rejected').length,
-    draft: allRequests.filter(r => r.status === 'draft').length,
-    closed: allRequests.filter(r => r.status === 'closed').length
-  };
+    },
+    [myRequests, filters]
+  );
 
   return (
     <div className="space-y-4 sm:space-y-6 max-w-7xl mx-auto" data-testid="my-requests-page">
@@ -235,258 +78,47 @@ export function MyRequests({ onViewRequest, dynamicRequests = [] }: MyRequestsPr
         title="My Requests"
         description="Track and manage all your submitted requests"
         badge={{
-          value: `${totalRecords || allRequests.length} total`,
+          value: `${myRequests.pagination.totalRecords || sourceRequests.length} total`,
           label: 'requests',
-          loading
+          loading: myRequests.loading,
         }}
         testId="my-requests-header"
       />
 
       {/* Stats Overview */}
-      <div className="grid grid-cols-2 md:grid-cols-5 gap-3 sm:gap-4" data-testid="my-requests-stats">
-        <StatsCard
-          label="Total"
-          value={stats.total}
-          icon={FileText}
-          iconColor="text-blue-600"
-          gradient="bg-gradient-to-br from-blue-50 to-blue-100 border-blue-200"
-          textColor="text-blue-700"
-          valueColor="text-blue-900"
-          testId="stat-total"
-        />
-        
-        <StatsCard
-          label="Pending"
-          value={stats.pending}
-          icon={Clock}
-          iconColor="text-orange-600"
-          gradient="bg-gradient-to-br from-orange-50 to-orange-100 border-orange-200"
-          textColor="text-orange-700"
-          valueColor="text-orange-900"
-          testId="stat-pending"
-        />
-        
-        <StatsCard
-          label="Approved"
-          value={stats.approved}
-          icon={CheckCircle}
-          iconColor="text-green-600"
-          gradient="bg-gradient-to-br from-green-50 to-green-100 border-green-200"
-          textColor="text-green-700"
-          valueColor="text-green-900"
-          testId="stat-approved"
-        />
-        
-        <StatsCard
-          label="Rejected"
-          value={stats.rejected}
-          icon={XCircle}
-          iconColor="text-red-600"
-          gradient="bg-gradient-to-br from-red-50 to-red-100 border-red-200"
-          textColor="text-red-700"
-          valueColor="text-red-900"
-          testId="stat-rejected"
-        />
-        
-        <StatsCard
-          label="Draft"
-          value={stats.draft}
-          icon={Edit}
-          iconColor="text-gray-600"
-          gradient="bg-gradient-to-br from-gray-50 to-gray-100 border-gray-200"
-          textColor="text-gray-700"
-          valueColor="text-gray-900"
-          testId="stat-draft"
-        />
-      </div>
+      <MyRequestsStatsSection stats={stats} />
 
       {/* Filters and Search */}
-      <Card className="border-gray-200" data-testid="my-requests-filters">
-        <CardContent className="p-3 sm:p-4 md:p-6">
-          <div className="flex flex-col md:flex-row gap-3 sm:gap-4 items-start md:items-center">
-            <div className="flex-1 relative w-full">
-              <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
-                placeholder="Search requests by title, description, or ID..."
-                value={searchTerm}
-                onChange={(e) => setSearchTerm(e.target.value)}
-                className="pl-9 text-sm sm:text-base 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="search-input"
-              />
-            </div>
-            
-            <div className="flex gap-2 sm:gap-3 w-full md:w-auto">
-              <Select value={statusFilter} onValueChange={setStatusFilter}>
-                <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="status-filter"
-                >
-                  <SelectValue placeholder="Status" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="all">All Status</SelectItem>
-                  <SelectItem value="draft">Draft</SelectItem>
-                  <SelectItem value="pending">Pending</SelectItem>
-                  <SelectItem value="approved">Approved</SelectItem>
-                  <SelectItem value="rejected">Rejected</SelectItem>
-                  <SelectItem value="closed">Closed</SelectItem>
-                </SelectContent>
-              </Select>
-
-              <Select value={priorityFilter} onValueChange={setPriorityFilter}>
-                <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="priority-filter"
-                >
-                  <SelectValue placeholder="Priority" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="all">All Priority</SelectItem>
-                  <SelectItem value="express">Express</SelectItem>
-                  <SelectItem value="standard">Standard</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-          </div>
-        </CardContent>
-      </Card>
+      <MyRequestsFiltersComponent
+        searchTerm={filters.searchTerm}
+        statusFilter={filters.statusFilter}
+        priorityFilter={filters.priorityFilter}
+        onSearchChange={filters.setSearchTerm}
+        onStatusChange={filters.setStatusFilter}
+        onPriorityChange={filters.setPriorityFilter}
+      />
 
       {/* Requests List */}
-      <div className="space-y-4" data-testid="my-requests-list">
-        {loading ? (
-          <Card data-testid="loading-state">
-            <CardContent className="p-6 text-sm text-gray-600">Loading your requests…</CardContent>
-          </Card>
-        ) : filteredRequests.length === 0 ? (
-          <Card data-testid="empty-state">
-            <CardContent className="p-12 text-center">
-              <FileText className="w-12 h-12 text-gray-400 mx-auto mb-4" />
-              <h3 className="text-lg font-medium text-gray-900 mb-2">No requests found</h3>
-              <p className="text-gray-600">
-                {searchTerm || statusFilter !== 'all' || priorityFilter !== 'all'
-                  ? 'Try adjusting your search or filters'
-                  : 'You haven\'t created any requests yet'}
-              </p>
-            </CardContent>
-          </Card>
-        ) : (
-          filteredRequests.map((request, index) => (
-            <motion.div
-              key={request.id}
-              initial={{ opacity: 0, y: 20 }}
-              animate={{ opacity: 1, y: 0 }}
-              transition={{ delay: index * 0.1 }}
-            >
-              <Card 
-                className="group hover:shadow-lg transition-all duration-300 cursor-pointer border border-gray-200 shadow-sm hover:shadow-md"
-                onClick={() => onViewRequest(request.id, request.title, request.status)}
-                data-testid={`request-card-${request.id}`}
-              >
-                <CardContent className="p-3 sm:p-6">
-                  <div className="space-y-3 sm:space-y-4">
-                    {/* Header with Title and Status Badges */}
-                    <div className="flex items-start justify-between gap-2">
-                      <div className="flex-1 min-w-0">
-                        <h4 
-                          className="text-base sm:text-lg font-semibold text-gray-900 mb-2 group-hover:text-blue-600 transition-colors line-clamp-2"
-                          data-testid="request-title"
-                        >
-                          {request.title}
-                        </h4>
-                        <div className="flex flex-wrap items-center gap-1.5 sm:gap-2 mb-2">
-                          <Badge 
-                            variant="outline" 
-                            className={`${getStatusConfig(request.status).color} border font-medium text-xs shrink-0`}
-                            data-testid="status-badge"
-                          >
-                            {(() => {
-                              const IconComponent = getStatusConfig(request.status).icon;
-                              return <IconComponent className="w-3 h-3 mr-1" />;
-                            })()}
-                            <span className="capitalize">{request.status}</span>
-                          </Badge>
-                          <Badge 
-                            variant="outline" 
-                            className={`${getPriorityConfig(request.priority).color} border font-medium text-xs capitalize shrink-0`}
-                            data-testid="priority-badge"
-                          >
-                            {(() => {
-                              const IconComponent = getPriorityConfig(request.priority).icon;
-                              return <IconComponent className="w-3 h-3 mr-1" />;
-                            })()}
-                            {request.priority}
-                          </Badge>
-                          {(request as any).templateType && (
-                            <Badge 
-                              variant="secondary" 
-                              className="bg-purple-100 text-purple-700 text-xs shrink-0 hidden sm:inline-flex"
-                              data-testid="template-badge"
-                            >
-                              <FileText className="w-3 h-3 mr-1" />
-                              Template: {(request as any).templateName}
-                            </Badge>
-                          )}
-                        </div>
-                        <p 
-                          className="text-xs sm:text-sm text-gray-600 mb-2 sm:mb-3 line-clamp-2"
-                          data-testid="request-description"
-                        >
-                          {request.description}
-                        </p>
-                        <div className="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-4 text-xs sm:text-sm text-gray-500">
-                          <span className="truncate" data-testid="request-id-display">
-                            <span className="font-medium">ID:</span> {(request as any).displayId || request.id}
-                          </span>
-                          <span className="truncate" data-testid="submitted-date">
-                            <span className="font-medium">Submitted:</span> {request.submittedDate ? new Date(request.submittedDate).toLocaleDateString() : 'N/A'}
-                          </span>
-                        </div>
-                      </div>
-                      <ArrowRight className="w-4 h-4 sm:w-5 sm:h-5 text-gray-400 group-hover:text-blue-600 transition-colors flex-shrink-0 mt-1" />
-                    </div>
-
-                    {/* Current Approver and Level Info */}
-                    <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 sm:gap-4 pt-3 border-t border-gray-100">
-                      <div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4">
-                        <div className="flex items-center gap-2 min-w-0">
-                          <User className="w-3.5 h-3.5 sm:w-4 sm:h-4 text-gray-400 flex-shrink-0" />
-                          <span className="text-xs sm:text-sm truncate" data-testid="current-approver">
-                            <span className="text-gray-500">Current Approver:</span> <span className="text-gray-900 font-medium">{request.currentApprover}</span>
-                          </span>
-                        </div>
-                        <div className="flex items-center gap-2">
-                          <TrendingUp className="w-3.5 h-3.5 sm:w-4 sm:h-4 text-gray-400 flex-shrink-0" />
-                          <span className="text-xs sm:text-sm" data-testid="approval-level">
-                            <span className="text-gray-500">Approval Level:</span> <span className="text-gray-900 font-medium">{request.approverLevel}</span>
-                          </span>
-                        </div>
-                      </div>
-                      <div className="flex items-center gap-1.5 text-xs text-gray-500">
-                        <Clock className="w-3.5 h-3.5 flex-shrink-0" />
-                        <span data-testid="submitted-timestamp">
-                          Submitted: {request.submittedDate ? new Date(request.submittedDate).toLocaleDateString() : 'N/A'}
-                        </span>
-                      </div>
-                    </div>
-                  </div>
-                </CardContent>
-              </Card>
-            </motion.div>
-          ))
-        )}
-      </div>
+      <MyRequestsList
+        requests={sourceRequests}
+        loading={myRequests.loading}
+        searchTerm={filters.searchTerm}
+        statusFilter={filters.statusFilter}
+        priorityFilter={filters.priorityFilter}
+        onViewRequest={onViewRequest}
+      />
 
       {/* Pagination */}
       <Pagination
-        currentPage={currentPage}
-        totalPages={totalPages}
-        totalRecords={totalRecords}
-        itemsPerPage={itemsPerPage}
+        currentPage={myRequests.pagination.currentPage}
+        totalPages={myRequests.pagination.totalPages}
+        totalRecords={myRequests.pagination.totalRecords}
+        itemsPerPage={myRequests.pagination.itemsPerPage}
         onPageChange={handlePageChange}
-        loading={loading}
+        loading={myRequests.loading}
         itemLabel="requests"
         testIdPrefix="my-requests-pagination"
       />
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/pages/MyRequests/components/MyRequestsFilters.tsx b/src/pages/MyRequests/components/MyRequestsFilters.tsx
new file mode 100644
index 0000000..966db7e
--- /dev/null
+++ b/src/pages/MyRequests/components/MyRequestsFilters.tsx
@@ -0,0 +1,79 @@
+/**
+ * My Requests Filters Section Component
+ */
+
+import { Card, CardContent } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Search } from 'lucide-react';
+
+interface MyRequestsFiltersProps {
+  searchTerm: string;
+  statusFilter: string;
+  priorityFilter: string;
+  onSearchChange: (value: string) => void;
+  onStatusChange: (value: string) => void;
+  onPriorityChange: (value: string) => void;
+}
+
+export function MyRequestsFilters({
+  searchTerm,
+  statusFilter,
+  priorityFilter,
+  onSearchChange,
+  onStatusChange,
+  onPriorityChange,
+}: MyRequestsFiltersProps) {
+  return (
+    <Card className="border-gray-200" data-testid="my-requests-filters">
+      <CardContent className="p-3 sm:p-4 md:p-6">
+        <div className="flex flex-col md:flex-row gap-3 sm:gap-4 items-start md:items-center">
+          <div className="flex-1 relative w-full">
+            <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
+              placeholder="Search requests by title, description, or ID..."
+              value={searchTerm}
+              onChange={(e) => onSearchChange(e.target.value)}
+              className="pl-9 text-sm sm:text-base 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="search-input"
+            />
+          </div>
+
+          <div className="flex gap-2 sm:gap-3 w-full md:w-auto">
+            <Select value={statusFilter} onValueChange={onStatusChange}>
+              <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="status-filter"
+              >
+                <SelectValue placeholder="Status" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All Status</SelectItem>
+                <SelectItem value="draft">Draft</SelectItem>
+                <SelectItem value="pending">Pending</SelectItem>
+                <SelectItem value="approved">Approved</SelectItem>
+                <SelectItem value="rejected">Rejected</SelectItem>
+                <SelectItem value="closed">Closed</SelectItem>
+              </SelectContent>
+            </Select>
+
+            <Select value={priorityFilter} onValueChange={onPriorityChange}>
+              <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="priority-filter"
+              >
+                <SelectValue placeholder="Priority" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All Priority</SelectItem>
+                <SelectItem value="express">Express</SelectItem>
+                <SelectItem value="standard">Standard</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
diff --git a/src/pages/MyRequests/components/MyRequestsList.tsx b/src/pages/MyRequests/components/MyRequestsList.tsx
new file mode 100644
index 0000000..3e7aa96
--- /dev/null
+++ b/src/pages/MyRequests/components/MyRequestsList.tsx
@@ -0,0 +1,58 @@
+/**
+ * My Requests List Section Component
+ */
+
+import { Card, CardContent } from '@/components/ui/card';
+import { FileText } from 'lucide-react';
+import { MyRequest } from '../types/myRequests.types';
+import { RequestCard } from './RequestCard';
+
+interface MyRequestsListProps {
+  requests: MyRequest[];
+  loading: boolean;
+  searchTerm: string;
+  statusFilter: string;
+  priorityFilter: string;
+  onViewRequest: (requestId: string, requestTitle?: string, status?: string) => void;
+}
+
+export function MyRequestsList({
+  requests,
+  loading,
+  searchTerm,
+  statusFilter,
+  priorityFilter,
+  onViewRequest,
+}: MyRequestsListProps) {
+  if (loading) {
+    return (
+      <Card data-testid="loading-state">
+        <CardContent className="p-6 text-sm text-gray-600">Loading your requests…</CardContent>
+      </Card>
+    );
+  }
+
+  if (requests.length === 0) {
+    const hasActiveFilters = searchTerm || statusFilter !== 'all' || priorityFilter !== 'all';
+    return (
+      <Card data-testid="empty-state">
+        <CardContent className="p-12 text-center">
+          <FileText className="w-12 h-12 text-gray-400 mx-auto mb-4" />
+          <h3 className="text-lg font-medium text-gray-900 mb-2">No requests found</h3>
+          <p className="text-gray-600">
+            {hasActiveFilters ? 'Try adjusting your search or filters' : "You haven't created any requests yet"}
+          </p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <div className="space-y-4" data-testid="my-requests-list">
+      {requests.map((request, index) => (
+        <RequestCard key={request.id} request={request} index={index} onViewRequest={onViewRequest} />
+      ))}
+    </div>
+  );
+}
+
diff --git a/src/pages/MyRequests/components/MyRequestsStats.tsx b/src/pages/MyRequests/components/MyRequestsStats.tsx
new file mode 100644
index 0000000..6e54209
--- /dev/null
+++ b/src/pages/MyRequests/components/MyRequestsStats.tsx
@@ -0,0 +1,73 @@
+/**
+ * My Requests Stats Section Component
+ */
+
+import { FileText, Clock, CheckCircle, XCircle, Edit } from 'lucide-react';
+import { StatsCard } from '@/components/dashboard/StatsCard';
+import { MyRequestsStats } from '../types/myRequests.types';
+
+interface MyRequestsStatsProps {
+  stats: MyRequestsStats;
+}
+
+export function MyRequestsStatsSection({ stats }: MyRequestsStatsProps) {
+  return (
+    <div className="grid grid-cols-2 md:grid-cols-5 gap-3 sm:gap-4" data-testid="my-requests-stats">
+      <StatsCard
+        label="Total"
+        value={stats.total}
+        icon={FileText}
+        iconColor="text-blue-600"
+        gradient="bg-gradient-to-br from-blue-50 to-blue-100 border-blue-200"
+        textColor="text-blue-700"
+        valueColor="text-blue-900"
+        testId="stat-total"
+      />
+
+      <StatsCard
+        label="Pending"
+        value={stats.pending}
+        icon={Clock}
+        iconColor="text-orange-600"
+        gradient="bg-gradient-to-br from-orange-50 to-orange-100 border-orange-200"
+        textColor="text-orange-700"
+        valueColor="text-orange-900"
+        testId="stat-pending"
+      />
+
+      <StatsCard
+        label="Approved"
+        value={stats.approved}
+        icon={CheckCircle}
+        iconColor="text-green-600"
+        gradient="bg-gradient-to-br from-green-50 to-green-100 border-green-200"
+        textColor="text-green-700"
+        valueColor="text-green-900"
+        testId="stat-approved"
+      />
+
+      <StatsCard
+        label="Rejected"
+        value={stats.rejected}
+        icon={XCircle}
+        iconColor="text-red-600"
+        gradient="bg-gradient-to-br from-red-50 to-red-100 border-red-200"
+        textColor="text-red-700"
+        valueColor="text-red-900"
+        testId="stat-rejected"
+      />
+
+      <StatsCard
+        label="Draft"
+        value={stats.draft}
+        icon={Edit}
+        iconColor="text-gray-600"
+        gradient="bg-gradient-to-br from-gray-50 to-gray-100 border-gray-200"
+        textColor="text-gray-700"
+        valueColor="text-gray-900"
+        testId="stat-draft"
+      />
+    </div>
+  );
+}
+
diff --git a/src/pages/MyRequests/components/RequestCard.tsx b/src/pages/MyRequests/components/RequestCard.tsx
new file mode 100644
index 0000000..5dc3bf6
--- /dev/null
+++ b/src/pages/MyRequests/components/RequestCard.tsx
@@ -0,0 +1,122 @@
+/**
+ * Request Card Component
+ * Displays a single request card in the My Requests list
+ */
+
+import { Card, CardContent } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { ArrowRight, User, TrendingUp, Clock, FileText } from 'lucide-react';
+import { motion } from 'framer-motion';
+import { MyRequest } from '../types/myRequests.types';
+import { getPriorityConfig, getStatusConfig } from '../utils/configMappers';
+
+interface RequestCardProps {
+  request: MyRequest;
+  index: number;
+  onViewRequest: (requestId: string, requestTitle?: string, status?: string) => void;
+}
+
+export function RequestCard({ request, index, onViewRequest }: RequestCardProps) {
+  const statusConfig = getStatusConfig(request.status);
+  const priorityConfig = getPriorityConfig(request.priority);
+  const StatusIcon = statusConfig.icon;
+  const PriorityIcon = priorityConfig.icon;
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ delay: index * 0.1 }}
+    >
+      <Card
+        className="group hover:shadow-lg transition-all duration-300 cursor-pointer border border-gray-200 shadow-sm hover:shadow-md"
+        onClick={() => onViewRequest(request.id, request.title, request.status)}
+        data-testid={`request-card-${request.id}`}
+      >
+        <CardContent className="p-3 sm:p-6">
+          <div className="space-y-3 sm:space-y-4">
+            {/* Header with Title and Status Badges */}
+            <div className="flex items-start justify-between gap-2">
+              <div className="flex-1 min-w-0">
+                <h4
+                  className="text-base sm:text-lg font-semibold text-gray-900 mb-2 group-hover:text-blue-600 transition-colors line-clamp-2"
+                  data-testid="request-title"
+                >
+                  {request.title}
+                </h4>
+                <div className="flex flex-wrap items-center gap-1.5 sm:gap-2 mb-2">
+                  <Badge
+                    variant="outline"
+                    className={`${statusConfig.color} border font-medium text-xs shrink-0`}
+                    data-testid="status-badge"
+                  >
+                    <StatusIcon className="w-3 h-3 mr-1" />
+                    <span className="capitalize">{request.status}</span>
+                  </Badge>
+                  <Badge
+                    variant="outline"
+                    className={`${priorityConfig.color} border font-medium text-xs capitalize shrink-0`}
+                    data-testid="priority-badge"
+                  >
+                    <PriorityIcon className="w-3 h-3 mr-1" />
+                    {request.priority}
+                  </Badge>
+                  {request.templateType && (
+                    <Badge
+                      variant="secondary"
+                      className="bg-purple-100 text-purple-700 text-xs shrink-0 hidden sm:inline-flex"
+                      data-testid="template-badge"
+                    >
+                      <FileText className="w-3 h-3 mr-1" />
+                      Template: {request.templateName}
+                    </Badge>
+                  )}
+                </div>
+                <p className="text-xs sm:text-sm text-gray-600 mb-2 sm:mb-3 line-clamp-2" data-testid="request-description">
+                  {request.description}
+                </p>
+                <div className="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-4 text-xs sm:text-sm text-gray-500">
+                  <span className="truncate" data-testid="request-id-display">
+                    <span className="font-medium">ID:</span> {request.displayId || request.id}
+                  </span>
+                  <span className="truncate" data-testid="submitted-date">
+                    <span className="font-medium">Submitted:</span>{' '}
+                    {request.submittedDate ? new Date(request.submittedDate).toLocaleDateString() : 'N/A'}
+                  </span>
+                </div>
+              </div>
+              <ArrowRight className="w-4 h-4 sm:w-5 sm:h-5 text-gray-400 group-hover:text-blue-600 transition-colors flex-shrink-0 mt-1" />
+            </div>
+
+            {/* Current Approver and Level Info */}
+            <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 sm:gap-4 pt-3 border-t border-gray-100">
+              <div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4">
+                <div className="flex items-center gap-2 min-w-0">
+                  <User className="w-3.5 h-3.5 sm:w-4 sm:h-4 text-gray-400 flex-shrink-0" />
+                  <span className="text-xs sm:text-sm truncate" data-testid="current-approver">
+                    <span className="text-gray-500">Current Approver:</span>{' '}
+                    <span className="text-gray-900 font-medium">{request.currentApprover}</span>
+                  </span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <TrendingUp className="w-3.5 h-3.5 sm:w-4 sm:h-4 text-gray-400 flex-shrink-0" />
+                  <span className="text-xs sm:text-sm" data-testid="approval-level">
+                    <span className="text-gray-500">Approval Level:</span>{' '}
+                    <span className="text-gray-900 font-medium">{request.approverLevel}</span>
+                  </span>
+                </div>
+              </div>
+              <div className="flex items-center gap-1.5 text-xs text-gray-500">
+                <Clock className="w-3.5 h-3.5 flex-shrink-0" />
+                <span data-testid="submitted-timestamp">
+                  Submitted: {request.submittedDate ? new Date(request.submittedDate).toLocaleDateString() : 'N/A'}
+                </span>
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </motion.div>
+  );
+}
+
diff --git a/src/pages/MyRequests/hooks/useMyRequests.ts b/src/pages/MyRequests/hooks/useMyRequests.ts
new file mode 100644
index 0000000..c331000
--- /dev/null
+++ b/src/pages/MyRequests/hooks/useMyRequests.ts
@@ -0,0 +1,92 @@
+/**
+ * Hook for fetching and managing My Requests data
+ */
+
+import { useState, useCallback, useEffect, useRef } from 'react';
+import workflowApi from '@/services/workflowApi';
+import { MyRequest, PaginationState } from '../types/myRequests.types';
+import { transformRequests } from '../utils/requestTransformers';
+
+interface UseMyRequestsOptions {
+  itemsPerPage?: number;
+  initialFilters?: {
+    search?: string;
+    status?: string;
+    priority?: string;
+  };
+}
+
+export function useMyRequests({ itemsPerPage = 10, initialFilters }: UseMyRequestsOptions = {}) {
+  const [requests, setRequests] = useState<MyRequest[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [hasFetchedFromApi, setHasFetchedFromApi] = useState(false);
+  const [pagination, setPagination] = useState<PaginationState>({
+    currentPage: 1,
+    totalPages: 1,
+    totalRecords: 0,
+    itemsPerPage,
+  });
+  const isInitialMount = useRef(true);
+
+  const fetchMyRequests = useCallback(
+    async (page: number = 1, filters?: { search?: string; status?: string; priority?: string }) => {
+      try {
+        if (page === 1) {
+          setLoading(true);
+          setRequests([]);
+        }
+
+        const result = await workflowApi.listMyWorkflows({
+          page,
+          limit: itemsPerPage,
+          search: filters?.search,
+          status: filters?.status,
+          priority: filters?.priority,
+        });
+
+        // Extract data - workflowApi now returns { data: [], pagination: {} }
+        const items = Array.isArray((result as any)?.data) ? (result as any).data : [];
+
+        const transformedRequests = transformRequests(items);
+        setRequests(transformedRequests);
+        setHasFetchedFromApi(true);
+
+        // Set pagination data
+        const paginationData = (result as any)?.pagination;
+        if (paginationData) {
+          setPagination({
+            currentPage: paginationData.page || 1,
+            totalPages: paginationData.totalPages || 1,
+            totalRecords: paginationData.total || 0,
+            itemsPerPage,
+          });
+        }
+      } catch (error) {
+        console.error('[MyRequests] Error fetching requests:', error);
+        setRequests([]);
+        setHasFetchedFromApi(true);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [itemsPerPage]
+  );
+
+  // Initial fetch on mount
+  useEffect(() => {
+    if (isInitialMount.current) {
+      fetchMyRequests(1, initialFilters);
+      isInitialMount.current = false;
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []); // Only run on mount
+
+  return {
+    requests,
+    loading,
+    hasFetchedFromApi,
+    pagination,
+    fetchMyRequests,
+  };
+}
+
diff --git a/src/pages/MyRequests/hooks/useMyRequestsFilters.ts b/src/pages/MyRequests/hooks/useMyRequestsFilters.ts
new file mode 100644
index 0000000..009bdea
--- /dev/null
+++ b/src/pages/MyRequests/hooks/useMyRequestsFilters.ts
@@ -0,0 +1,65 @@
+/**
+ * Hook for managing My Requests filters and search
+ */
+
+import { useState, useCallback, useEffect, useRef } from 'react';
+import { MyRequestsFilters } from '../types/myRequests.types';
+
+interface UseMyRequestsFiltersOptions {
+  onFiltersChange?: (filters: MyRequestsFilters) => void;
+  debounceMs?: number;
+}
+
+export function useMyRequestsFilters({ onFiltersChange, debounceMs = 500 }: UseMyRequestsFiltersOptions = {}) {
+  const [searchTerm, setSearchTerm] = useState('');
+  const [statusFilter, setStatusFilter] = useState('all');
+  const [priorityFilter, setPriorityFilter] = useState('all');
+  const debounceTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  const getFilters = useCallback((): MyRequestsFilters => {
+    return {
+      search: searchTerm,
+      status: statusFilter,
+      priority: priorityFilter,
+    };
+  }, [searchTerm, statusFilter, priorityFilter]);
+
+  // Debounced filter change handler
+  useEffect(() => {
+    if (debounceTimeoutRef.current) {
+      clearTimeout(debounceTimeoutRef.current);
+    }
+
+    const timeoutId = setTimeout(() => {
+      if (onFiltersChange) {
+        onFiltersChange(getFilters());
+      }
+    }, searchTerm ? debounceMs : 0); // Debounce only for search, instant for dropdowns
+
+    debounceTimeoutRef.current = timeoutId;
+
+    return () => {
+      if (debounceTimeoutRef.current) {
+        clearTimeout(debounceTimeoutRef.current);
+      }
+    };
+  }, [searchTerm, statusFilter, priorityFilter, onFiltersChange, getFilters, debounceMs]);
+
+  const resetFilters = useCallback(() => {
+    setSearchTerm('');
+    setStatusFilter('all');
+    setPriorityFilter('all');
+  }, []);
+
+  return {
+    searchTerm,
+    statusFilter,
+    priorityFilter,
+    setSearchTerm,
+    setStatusFilter,
+    setPriorityFilter,
+    getFilters,
+    resetFilters,
+  };
+}
+
diff --git a/src/pages/MyRequests/hooks/useMyRequestsStats.ts b/src/pages/MyRequests/hooks/useMyRequestsStats.ts
new file mode 100644
index 0000000..68ec7f5
--- /dev/null
+++ b/src/pages/MyRequests/hooks/useMyRequestsStats.ts
@@ -0,0 +1,27 @@
+/**
+ * Hook for calculating My Requests statistics
+ */
+
+import { useMemo } from 'react';
+import { MyRequest, MyRequestsStats } from '../types/myRequests.types';
+
+interface UseMyRequestsStatsOptions {
+  requests: MyRequest[];
+  totalRecords?: number;
+}
+
+export function useMyRequestsStats({ requests, totalRecords }: UseMyRequestsStatsOptions): MyRequestsStats {
+  const stats = useMemo(() => {
+    return {
+      total: totalRecords || requests.length,
+      pending: requests.filter((r) => r.status === 'pending').length,
+      approved: requests.filter((r) => r.status === 'approved').length,
+      rejected: requests.filter((r) => r.status === 'rejected').length,
+      draft: requests.filter((r) => r.status === 'draft').length,
+      closed: requests.filter((r) => r.status === 'closed').length,
+    };
+  }, [requests, totalRecords]);
+
+  return stats;
+}
+
diff --git a/src/pages/MyRequests/types/myRequests.types.ts b/src/pages/MyRequests/types/myRequests.types.ts
new file mode 100644
index 0000000..1de785b
--- /dev/null
+++ b/src/pages/MyRequests/types/myRequests.types.ts
@@ -0,0 +1,43 @@
+/**
+ * My Requests TypeScript interfaces
+ */
+
+export interface MyRequest {
+  id: string;
+  requestId: string;
+  displayId?: string;
+  title: string;
+  description?: string;
+  status: string;
+  priority: string;
+  department?: string;
+  submittedDate?: string;
+  createdAt?: string;
+  currentApprover?: string;
+  approverLevel?: string;
+  templateType?: string;
+  templateName?: string;
+}
+
+export interface MyRequestsStats {
+  total: number;
+  pending: number;
+  approved: number;
+  rejected: number;
+  draft: number;
+  closed: number;
+}
+
+export interface MyRequestsFilters {
+  search: string;
+  status: string;
+  priority: string;
+}
+
+export interface PaginationState {
+  currentPage: number;
+  totalPages: number;
+  totalRecords: number;
+  itemsPerPage: number;
+}
+
diff --git a/src/pages/MyRequests/utils/configMappers.ts b/src/pages/MyRequests/utils/configMappers.ts
new file mode 100644
index 0000000..f35f1d8
--- /dev/null
+++ b/src/pages/MyRequests/utils/configMappers.ts
@@ -0,0 +1,89 @@
+/**
+ * Configuration mapping utility functions for My Requests
+ */
+
+import { Flame, Target, CheckCircle, XCircle, Clock, Edit, AlertCircle } from 'lucide-react';
+import { LucideIcon } from 'lucide-react';
+
+interface PriorityConfig {
+  color: string;
+  icon: LucideIcon;
+  iconColor: string;
+}
+
+interface StatusConfig {
+  color: string;
+  icon: LucideIcon;
+  iconColor: string;
+}
+
+/**
+ * Get priority configuration (color, icon, etc.)
+ */
+export function getPriorityConfig(priority: string): PriorityConfig {
+  switch (priority) {
+    case 'express':
+      return {
+        color: 'bg-red-100 text-red-800 border-red-200',
+        icon: Flame,
+        iconColor: 'text-red-600',
+      };
+    case 'standard':
+      return {
+        color: 'bg-blue-100 text-blue-800 border-blue-200',
+        icon: Target,
+        iconColor: 'text-blue-600',
+      };
+    default:
+      return {
+        color: 'bg-gray-100 text-gray-800 border-gray-200',
+        icon: Target,
+        iconColor: 'text-gray-600',
+      };
+  }
+}
+
+/**
+ * Get status configuration (color, icon, etc.)
+ */
+export function getStatusConfig(status: string): StatusConfig {
+  switch (status) {
+    case 'approved':
+      return {
+        color: 'bg-green-100 text-green-800 border-green-200',
+        icon: CheckCircle,
+        iconColor: 'text-green-600',
+      };
+    case 'rejected':
+      return {
+        color: 'bg-red-100 text-red-800 border-red-200',
+        icon: XCircle,
+        iconColor: 'text-red-600',
+      };
+    case 'pending':
+      return {
+        color: 'bg-yellow-100 text-yellow-800 border-yellow-200',
+        icon: Clock,
+        iconColor: 'text-yellow-600',
+      };
+    case 'closed':
+      return {
+        color: 'bg-gray-100 text-gray-800 border-gray-200',
+        icon: CheckCircle,
+        iconColor: 'text-gray-600',
+      };
+    case 'draft':
+      return {
+        color: 'bg-gray-100 text-gray-800 border-gray-200',
+        icon: Edit,
+        iconColor: 'text-gray-600',
+      };
+    default:
+      return {
+        color: 'bg-gray-100 text-gray-800 border-gray-200',
+        icon: AlertCircle,
+        iconColor: 'text-gray-600',
+      };
+  }
+}
+
diff --git a/src/pages/MyRequests/utils/requestTransformers.ts b/src/pages/MyRequests/utils/requestTransformers.ts
new file mode 100644
index 0000000..3bcb527
--- /dev/null
+++ b/src/pages/MyRequests/utils/requestTransformers.ts
@@ -0,0 +1,43 @@
+/**
+ * Request data transformation utilities
+ */
+
+import { MyRequest } from '../types/myRequests.types';
+
+/**
+ * Transform API/dynamic request data to MyRequest format
+ */
+export function transformRequest(req: any): MyRequest {
+  const createdAt = req.submittedAt || req.submitted_at || req.createdAt || req.created_at;
+  const priority = (req.priority || '').toString().toLowerCase();
+
+  return {
+    id: req.requestNumber || req.request_number || req.requestId || req.id || req.request_id,
+    requestId: req.requestId || req.id || req.request_id,
+    displayId: req.requestNumber || req.request_number || req.id,
+    title: req.title,
+    description: req.description,
+    status: (req.status || '').toString().toLowerCase().replace('_', '-'),
+    priority: priority,
+    department: req.department,
+    submittedDate: req.submittedAt || (req.createdAt ? new Date(req.createdAt).toISOString().split('T')[0] : undefined),
+    createdAt: createdAt,
+    currentApprover: req.currentApprover?.name || req.currentApprover?.email || '—',
+    approverLevel:
+      req.currentLevel && req.totalLevels
+        ? `${req.currentLevel} of ${req.totalLevels}`
+        : req.currentStep && req.totalSteps
+          ? `${req.currentStep} of ${req.totalSteps}`
+          : '—',
+    templateType: req.templateType,
+    templateName: req.templateName,
+  };
+}
+
+/**
+ * Transform array of requests
+ */
+export function transformRequests(requests: any[]): MyRequest[] {
+  return Array.isArray(requests) ? requests.map(transformRequest) : [];
+}
+
diff --git a/src/pages/RequestDetail/RequestDetail.tsx b/src/pages/RequestDetail/RequestDetail.tsx
index a9e2219..adc6e4b 100644
--- a/src/pages/RequestDetail/RequestDetail.tsx
+++ b/src/pages/RequestDetail/RequestDetail.tsx
@@ -3,19 +3,9 @@
  * 
  * Purpose: Display and manage detailed view of a workflow request
  * 
- * Features:
- * - View request details and approval workflow
- * - Approve/Reject requests (if user is assigned approver)
- * - Add/Skip approvers (if user is initiator)
- * - Upload and view documents
- * - Real-time work notes chat
- * - Activity timeline with audit trail
- * - TAT/SLA tracking with alerts
- * - Conclusion remark generation and finalization
- * 
  * Architecture:
- * - Custom hooks for complex logic (useRequestDetails, useRequestSocket, etc.)
- * - Reusable components (ApprovalStepCard, DocumentCard, SLAProgressBar)
+ * - Uses custom hooks for complex logic (data fetching, socket, document upload, etc.)
+ * - Delegates UI rendering to specialized tab components
  * - Error boundary for graceful error handling
  * - Real-time WebSocket integration
  */
@@ -23,35 +13,17 @@
 import { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { Component, ErrorInfo, ReactNode } from 'react';
-
-// UI Components
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
-import { Avatar, AvatarFallback } from '@/components/ui/avatar';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { Textarea } from '@/components/ui/textarea';
-import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
-
-// Utility imports
-import { formatDateTime, formatDateShort } from '@/utils/dateFormatter';
-import { getPriorityConfig, getStatusConfig, getActionTypeIcon } from '@/utils/requestDetailHelpers.tsx';
-
-// Service imports
-import { downloadDocument, getDocumentPreviewUrl } from '@/services/workflowApi';
-
-// Component imports
-import { FilePreview } from '@/components/common/FilePreview';
-import { ApprovalModal } from '@/components/approval/ApprovalModal/ApprovalModal';
-import { RejectionModal } from '@/components/approval/RejectionModal/RejectionModal';
-import { SkipApproverModal } from '@/components/approval/SkipApproverModal';
-import { AddApproverModal } from '@/components/participant/AddApproverModal';
-import { AddSpectatorModal } from '@/components/participant/AddSpectatorModal';
-import { ActionStatusModal } from '@/components/common/ActionStatusModal';
-import { WorkNoteChat } from '@/components/workNote/WorkNoteChat/WorkNoteChat';
-import { ApprovalStepCard } from '@/components/workflow/ApprovalWorkflow';
-import { DocumentCard } from '@/components/workflow/DocumentUpload';
-import { SLAProgressBar } from '@/components/sla/SLAProgressBar';
+import {
+  ClipboardList,
+  TrendingUp,
+  FileText,
+  Activity,
+  MessageSquare,
+  AlertTriangle,
+} from 'lucide-react';
+import { Badge } from '@/components/ui/badge';
 
 // Context and hooks
 import { useAuth } from '@/contexts/AuthContext';
@@ -60,64 +32,36 @@ import { useRequestSocket } from '@/hooks/useRequestSocket';
 import { useDocumentUpload } from '@/hooks/useDocumentUpload';
 import { useConclusionRemark } from '@/hooks/useConclusionRemark';
 import { useModalManager } from '@/hooks/useModalManager';
-// Icon imports
-import { 
-  ArrowLeft, 
-  User, 
-  FileText, 
-  MessageSquare, 
-  CheckCircle, 
-  XCircle,
-  Eye,
-  TrendingUp,
-  RefreshCw,
-  Activity,
-  Mail,
-  Phone,
-  Upload,
-  UserPlus,
-  ClipboardList,
-  AlertTriangle,
-  Loader2,
-  AlertCircle
-} from 'lucide-react';
+import { downloadDocument } from '@/services/workflowApi';
+
+// Components
+import { RequestDetailHeader } from './components/RequestDetailHeader';
+import { OverviewTab } from './components/tabs/OverviewTab';
+import { WorkflowTab } from './components/tabs/WorkflowTab';
+import { DocumentsTab } from './components/tabs/DocumentsTab';
+import { ActivityTab } from './components/tabs/ActivityTab';
+import { WorkNotesTab } from './components/tabs/WorkNotesTab';
+import { QuickActionsSidebar } from './components/QuickActionsSidebar';
+import { RequestDetailModals } from './components/RequestDetailModals';
+import { RequestDetailProps } from './types/requestDetail.types';
 
 /**
  * Error Boundary Component
- * 
- * Purpose: Catch and handle React errors gracefully
- * 
- * Benefits:
- * - Prevents entire app crash if RequestDetail has an error
- * - Shows user-friendly error message
- * - Provides recovery options (reload or go back)
- * - Logs errors for debugging
- * 
- * Catches:
- * - Runtime errors in component tree
- * - Rendering errors
- * - Lifecycle method errors
  */
-class RequestDetailErrorBoundary extends Component<
-  { children: ReactNode }, 
-  { hasError: boolean; error: Error | null }
-> {
+class RequestDetailErrorBoundary extends Component<{ children: ReactNode }, { hasError: boolean; error: Error | null }> {
   constructor(props: { children: ReactNode }) {
     super(props);
     this.state = { hasError: false, error: null };
   }
 
-  // Static method: Update state when error is caught
   static getDerivedStateFromError(error: Error) {
     return { hasError: true, error };
   }
 
-  // Lifecycle: Log error details for debugging
   override componentDidCatch(error: Error, errorInfo: ErrorInfo) {
     console.error('RequestDetail Error:', error, errorInfo);
   }
 
-  // Render: Show error UI or normal children
   override render() {
     if (this.state.hasError) {
       return (
@@ -125,9 +69,7 @@ class RequestDetailErrorBoundary extends Component<
           <div className="max-w-md w-full bg-white rounded-lg shadow-lg p-8 text-center">
             <AlertTriangle className="w-16 h-16 text-red-500 mx-auto mb-4" />
             <h2 className="text-2xl font-bold mb-2">Error Loading Request</h2>
-            <p className="text-gray-600 mb-4">
-              {this.state.error?.message || 'An unexpected error occurred'}
-            </p>
+            <p className="text-gray-600 mb-4">{this.state.error?.message || 'An unexpected error occurred'}</p>
             <Button onClick={() => window.location.reload()} className="mr-2">
               Reload Page
             </Button>
@@ -142,60 +84,20 @@ class RequestDetailErrorBoundary extends Component<
   }
 }
 
-/**
- * RequestDetailProps Interface
- * 
- * Props:
- * @param requestId - Request number or UUID to load
- * @param onBack - Optional callback for back button navigation
- * @param dynamicRequests - Optional array of requests for fallback data
- */
-interface RequestDetailProps {
-  requestId: string;
-  onBack?: () => void;
-  dynamicRequests?: any[];
-}
-
 /**
  * RequestDetailInner Component
- * 
- * Purpose: Main component logic for request detail view
- * 
- * Architecture:
- * - Uses custom hooks for complex logic (data fetching, socket, document upload, etc.)
- * - Delegates state management to specialized hooks
- * - Focuses on UI rendering and user interactions
- * - All heavy lifting is done by hooks, keeping this component clean
  */
-function RequestDetailInner({
-  requestId: propRequestId,
-  onBack,
-  dynamicRequests = []
-}: RequestDetailProps) {
-  // Route params: Get request identifier from URL
+function RequestDetailInner({ requestId: propRequestId, onBack, dynamicRequests = [] }: RequestDetailProps) {
   const params = useParams<{ requestId: string }>();
   const requestIdentifier = params.requestId || propRequestId || '';
-  
-  // URL query params: Read initial tab from URL (e.g., ?tab=worknotes)
+
   const urlParams = new URLSearchParams(window.location.search);
   const initialTab = urlParams.get('tab') || 'overview';
-  
-  // State: Currently active tab
+
   const [activeTab, setActiveTab] = useState(initialTab);
-  
-  // Auth: Get current logged-in user
   const { user } = useAuth();
-  
-  /**
-   * Custom Hook: useRequestDetails
-   * 
-   * Handles:
-   * - Request data fetching and transformation
-   * - Approval flow mapping with TAT alerts
-   * - Spectator and participant management
-   * - Current user's role determination (initiator, approver, spectator)
-   * - Data refresh functionality
-   */
+
+  // Custom hooks
   const {
     request,
     apiRequest,
@@ -204,35 +106,16 @@ function RequestDetailInner({
     currentApprovalLevel,
     isSpectator,
     isInitiator,
-    existingParticipants
+    existingParticipants,
   } = useRequestDetails(requestIdentifier, dynamicRequests, user);
-  
-  /**
-   * Custom Hook: useRequestSocket
-   * 
-   * Handles:
-   * - WebSocket connection management
-   * - Real-time work notes updates
-   * - TAT alerts listening
-   * - Merged timeline of work notes and activities
-   * - Unread work notes badge
-   */
+
   const {
     mergedMessages,
     unreadWorkNotes,
     workNoteAttachments,
-    setWorkNoteAttachments
+    setWorkNoteAttachments,
   } = useRequestSocket(requestIdentifier, apiRequest, activeTab, user);
-  
-  /**
-   * Custom Hook: useDocumentUpload
-   * 
-   * Handles:
-   * - Document upload functionality
-   * - File input triggering
-   * - Upload loading state
-   * - Document preview modal
-   */
+
   const {
     uploadingDocument,
     triggerFileInput,
@@ -240,18 +123,9 @@ function RequestDetailInner({
     setPreviewDocument,
     documentPolicy,
     documentError,
-    setDocumentError
+    setDocumentError,
   } = useDocumentUpload(apiRequest, refreshDetails);
-  
-  /**
-   * Custom Hook: useModalManager
-   * 
-   * Handles:
-   * - All modal visibility states
-   * - Approve/Reject/Skip actions
-   * - Add approver/spectator actions
-   * - Action status feedback
-   */
+
   const {
     showApproveModal,
     setShowApproveModal,
@@ -273,18 +147,9 @@ function RequestDetailInner({
     handleRejectConfirm,
     handleAddApprover,
     handleSkipApprover,
-    handleAddSpectator
+    handleAddSpectator,
   } = useModalManager(requestIdentifier, currentApprovalLevel, refreshDetails);
-  
-  /**
-   * Custom Hook: useConclusionRemark
-   * 
-   * Handles:
-   * - AI-generated conclusion fetching
-   * - Conclusion generation
-   * - Conclusion finalization and request closure
-   * - Navigation after closure
-   */
+
   const {
     conclusionRemark,
     setConclusionRemark,
@@ -292,25 +157,10 @@ function RequestDetailInner({
     conclusionSubmitting,
     aiGenerated,
     handleGenerateConclusion,
-    handleFinalizeConclusion
-  } = useConclusionRemark(
-    request,
-    requestIdentifier,
-    isInitiator,
-    refreshDetails,
-    onBack,
-    setActionStatus,
-    setShowActionStatusModal
-  );
+    handleFinalizeConclusion,
+  } = useConclusionRemark(request, requestIdentifier, isInitiator, refreshDetails, onBack, setActionStatus, setShowActionStatusModal);
 
-  /**
-   * Effect: Auto-switch tab when URL query parameter changes
-   * 
-   * Use Case: When user clicks notification, URL includes ?tab=worknotes
-   * This effect automatically switches to the specified tab
-   * 
-   * Trigger: When requestIdentifier changes (navigating to different request)
-   */
+  // Auto-switch tab when URL query parameter changes
   useEffect(() => {
     const urlParams = new URLSearchParams(window.location.search);
     const tabParam = urlParams.get('tab');
@@ -320,33 +170,23 @@ function RequestDetailInner({
     }
   }, [requestIdentifier]);
 
-  /**
-   * Handler: handleRefresh
-   * 
-   * Purpose: Trigger manual refresh of request data
-   * Delegates to useRequestDetails hook's refreshDetails function
-   */
   const handleRefresh = () => {
     refreshDetails();
   };
 
-  /**
-   * Computed: Get display configuration for priority and status badges
-   * Uses helper functions from requestDetailHelpers utility
-   */
-  const priorityConfig = getPriorityConfig(request?.priority || 'standard');
-  const statusConfig = getStatusConfig(request?.status || 'pending');
-
-  /**
-   * Computed: Determine if request needs conclusion from initiator
-   * TRUE when: Request is approved AND current user is the initiator
-   * Purpose: Show conclusion remark form to close the request
-   */
   const needsClosure = request?.status === 'approved' && isInitiator;
 
-  /**
-   * Early return: Show loading state while request data is being fetched
-   */
+  // Get current levels for WorkNotesTab
+  const currentLevels = (request?.approvalFlow || [])
+    .filter((flow: any) => flow && typeof flow.step === 'number')
+    .map((flow: any) => ({
+      levelNumber: flow.step || 0,
+      approverName: flow.approver || 'Unknown',
+      status: flow.status || 'pending',
+      tatHours: flow.tatHours || 24,
+    }));
+
+  // Loading state
   if (!request && !apiRequest) {
     return (
       <div className="flex items-center justify-center h-screen" data-testid="loading-state">
@@ -358,9 +198,7 @@ function RequestDetailInner({
     );
   }
 
-  /**
-   * Early return: Show error state if request not found
-   */
+  // Error state
   if (!request) {
     return (
       <div className="flex items-center justify-center h-screen" data-testid="not-found-state">
@@ -368,7 +206,6 @@ function RequestDetailInner({
           <h2 className="text-2xl font-bold text-gray-900 mb-2">Request Not Found</h2>
           <p className="text-gray-600 mb-4">The request you're looking for doesn't exist.</p>
           <Button onClick={onBack}>
-            <ArrowLeft className="w-4 h-4 mr-2" />
             Go Back
           </Button>
         </div>
@@ -376,922 +213,195 @@ function RequestDetailInner({
     );
   }
 
-  /**
-   * Main Render: Request detail UI with tabs
-   * 
-   * Layout structure:
-   * - Header: Request ID, title, priority, status, refresh button
-   * - SLA Progress Bar: Overall request SLA/TAT tracking
-   * - Tabs: Overview, Workflow, Documents, Activity, Work Notes
-   * - Sidebar: Quick actions (approve, reject, add participants)
-   * - Modals: All action modals rendered at bottom
-   */
   return (
     <>
-    <div className="min-h-screen bg-gray-50" data-testid="request-detail-page">
-      <div className="max-w-7xl mx-auto">
-        {/* Header Section: Request ID, title, badges, refresh button */}
-        <div className="bg-white rounded-lg shadow-sm border border-gray-300 mb-4 sm:mb-6" data-testid="request-detail-header">
-          {/* Top Header */}
-          <div className="p-3 sm:p-4 md:p-6 border-b border-gray-300">
-            <div className="flex items-start sm:items-center justify-between gap-2 sm:gap-4">
-              <div className="flex items-start sm:items-center gap-2 sm:gap-4 min-w-0 flex-1">
-                {/* Back Button: Navigate to previous page */}
-                <Button 
-                  variant="ghost" 
-                  size="icon" 
-                  onClick={onBack}
-                  className="rounded-lg flex-shrink-0 h-8 w-8 sm:h-10 sm:w-10"
-                  data-testid="back-button"
-                >
-                  <ArrowLeft className="h-4 w-4 sm:h-5 sm:h-5" />
-                </Button>
-                
-                  <div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-3 min-w-0 flex-1">
-                  {/* File Icon */}
-                  <div className="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0">
-                    <FileText className="w-4 h-4 sm:w-5 sm:h-5 text-blue-600" />
-                  </div>
-                  
-                  <div className="flex flex-col sm:flex-row sm:items-center gap-2 min-w-0 flex-1">
-                    {/* Request ID/Number */}
-                    <h1 className="text-sm sm:text-base md:text-lg font-bold text-gray-900 truncate" data-testid="request-id">
-                      {request.id || 'N/A'}
-                    </h1>
-                    {/* Priority and Status Badges */}
-                    <div className="flex flex-wrap items-center gap-1.5 sm:gap-2">
-                      <Badge 
-                        className={`${priorityConfig.color} rounded-full px-2 sm:px-3 text-xs capitalize shrink-0`} 
-                        variant="outline"
-                        data-testid="priority-badge"
-                      >
-                        {priorityConfig.label}
-                      </Badge>
-                      <Badge 
-                        className={`${statusConfig.color} rounded-full px-2 sm:px-3 text-xs capitalize shrink-0`} 
-                        variant="outline"
-                        data-testid="status-badge"
-                      >
-                        {statusConfig.label}
-                      </Badge>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              
-              {/* Refresh Button: Manually reload request data */}
-              <Button 
-                variant="outline" 
-                size="sm" 
-                className="gap-1 sm:gap-2 flex-shrink-0 h-8 sm:h-9"
-                onClick={handleRefresh}
-                disabled={refreshing}
-                data-testid="refresh-button"
+      <div className="min-h-screen bg-gray-50" data-testid="request-detail-page">
+        <div className="max-w-7xl mx-auto">
+          {/* Header Section */}
+          <RequestDetailHeader
+            request={request}
+            refreshing={refreshing}
+            onBack={onBack || (() => window.history.back())}
+            onRefresh={handleRefresh}
+          />
+
+          {/* Tabs */}
+          <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full" data-testid="request-detail-tabs">
+            <div className="overflow-x-auto -mx-4 px-4 sm:mx-0 sm:px-0 mb-4 sm:mb-6">
+              <TabsList className="inline-flex h-10 sm:h-11 items-center justify-start rounded-lg bg-gray-100 p-1 text-gray-500 min-w-max sm:w-full">
+              <TabsTrigger
+                value="overview"
+                className="inline-flex items-center justify-center whitespace-nowrap rounded-md px-2 sm:px-3 py-1.5 text-xs sm:text-sm font-medium ring-offset-white transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-400 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white data-[state=active]:text-gray-900 data-[state=active]:shadow-sm gap-1 sm:gap-1.5 shrink-0"
+                data-testid="tab-overview"
               >
-                <RefreshCw className={`w-3.5 h-3.5 sm:w-4 sm:h-4 ${refreshing ? 'animate-spin' : ''}`} />
-                <span className="hidden sm:inline">{refreshing ? 'Refreshing...' : 'Refresh'}</span>
-              </Button>
+                <ClipboardList className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
+                <span>Overview</span>
+              </TabsTrigger>
+              <TabsTrigger
+                value="workflow"
+                className="inline-flex items-center justify-center whitespace-nowrap rounded-md px-2 sm:px-3 py-1.5 text-xs sm:text-sm font-medium ring-offset-white transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-400 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white data-[state=active]:text-gray-900 data-[state=active]:shadow-sm gap-1 sm:gap-1.5 shrink-0"
+                data-testid="tab-workflow"
+              >
+                <TrendingUp className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
+                <span>Workflow</span>
+              </TabsTrigger>
+              <TabsTrigger
+                value="documents"
+                className="inline-flex items-center justify-center whitespace-nowrap rounded-md px-2 sm:px-3 py-1.5 text-xs sm:text-sm font-medium ring-offset-white transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-400 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white data-[state=active]:text-gray-900 data-[state=active]:shadow-sm gap-1 sm:gap-1.5 shrink-0"
+                data-testid="tab-documents"
+              >
+                <FileText className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
+                <span>Docs</span>
+              </TabsTrigger>
+              <TabsTrigger
+                value="activity"
+                className="inline-flex items-center justify-center whitespace-nowrap rounded-md px-2 sm:px-3 py-1.5 text-xs sm:text-sm font-medium ring-offset-white transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-400 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white data-[state=active]:text-gray-900 data-[state=active]:shadow-sm gap-1 sm:gap-1.5 shrink-0"
+                data-testid="tab-activity"
+              >
+                <Activity className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
+                <span>Activity</span>
+              </TabsTrigger>
+              <TabsTrigger
+                value="worknotes"
+                className="inline-flex items-center justify-center whitespace-nowrap rounded-md px-2 sm:px-3 py-1.5 text-xs sm:text-sm font-medium ring-offset-white transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-400 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white data-[state=active]:text-gray-900 data-[state=active]:shadow-sm gap-1 sm:gap-1.5 relative shrink-0"
+                data-testid="tab-worknotes"
+              >
+                <MessageSquare className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
+                <span>Work Notes</span>
+                {unreadWorkNotes > 0 && (
+                  <Badge
+                    className="absolute -top-1 -right-1 h-5 w-5 rounded-full bg-red-500 text-white text-[10px] flex items-center justify-center p-0"
+                    data-testid="worknotes-unread-badge"
+                  >
+                    {unreadWorkNotes > 9 ? '9+' : unreadWorkNotes}
+                  </Badge>
+                )}
+              </TabsTrigger>
+              </TabsList>
             </div>
 
-            {/* Request Title */}
-            <div className="mt-3 ml-0 sm:ml-14">
-              <h2 className="text-base sm:text-lg md:text-xl font-semibold text-gray-900 line-clamp-2" data-testid="request-title">
-                {request.title}
-              </h2>
-            </div>
-          </div>
+            {/* Main Layout */}
+            <div className={activeTab === 'worknotes' ? '' : 'grid grid-cols-1 lg:grid-cols-3 gap-6'}>
+              {/* Left Column: Tab content */}
+              <div className={activeTab === 'worknotes' ? '' : 'lg:col-span-2'}>
+                <TabsContent value="overview" className="mt-0" data-testid="overview-tab-content">
+                  <OverviewTab
+                    request={request}
+                    isInitiator={isInitiator}
+                    needsClosure={needsClosure}
+                    conclusionRemark={conclusionRemark}
+                    setConclusionRemark={setConclusionRemark}
+                    conclusionLoading={conclusionLoading}
+                    conclusionSubmitting={conclusionSubmitting}
+                    aiGenerated={aiGenerated}
+                    handleGenerateConclusion={handleGenerateConclusion}
+                    handleFinalizeConclusion={handleFinalizeConclusion}
+                  />
+                </TabsContent>
 
-          {/* SLA Progress Section: Shows overall request SLA/TAT from backend */}
-          <div className="px-3 sm:px-4 md:px-6 py-3 sm:py-4 bg-gradient-to-r from-blue-50 to-indigo-50 border-b border-gray-200" data-testid="sla-section">
-            <SLAProgressBar
-              sla={request.summary?.sla || request.sla}
-              requestStatus={request.status}
-              testId="request-sla"
-            />
-          </div>
+                <TabsContent value="workflow" className="mt-0">
+                  <WorkflowTab
+                    request={request}
+                    user={user}
+                    isInitiator={isInitiator}
+                    onSkipApprover={(data) => {
+                      if (!data.levelId) {
+                        alert('Level ID not available');
+                        return;
+                      }
+                      setSkipApproverData(data);
+                      setShowSkipApproverModal(true);
+                    }}
+                    onRefresh={refreshDetails}
+                  />
+                </TabsContent>
+
+                <TabsContent value="documents" className="mt-0">
+                  <DocumentsTab
+                    request={request}
+                    workNoteAttachments={workNoteAttachments}
+                    uploadingDocument={uploadingDocument}
+                    documentPolicy={documentPolicy}
+                    triggerFileInput={triggerFileInput}
+                    setPreviewDocument={setPreviewDocument}
+                    downloadDocument={downloadDocument}
+                  />
+                </TabsContent>
+
+                <TabsContent value="activity" className="mt-0">
+                  <ActivityTab request={request} />
+                </TabsContent>
+
+                <TabsContent value="worknotes" className="mt-0" forceMount={true} hidden={activeTab !== 'worknotes'}>
+                  <WorkNotesTab
+                    requestId={requestIdentifier}
+                    requestTitle={request.title}
+                    mergedMessages={mergedMessages}
+                    setWorkNoteAttachments={setWorkNoteAttachments}
+                    isInitiator={isInitiator}
+                    currentLevels={currentLevels}
+                    onAddApprover={handleAddApprover}
+                  />
+                </TabsContent>
+              </div>
+
+              {/* Right Column: Quick Actions Sidebar */}
+              {activeTab !== 'worknotes' && (
+                <QuickActionsSidebar
+                  request={request}
+                  isInitiator={isInitiator}
+                  isSpectator={isSpectator}
+                  currentApprovalLevel={currentApprovalLevel}
+                  onAddApprover={() => setShowAddApproverModal(true)}
+                  onAddSpectator={() => setShowAddSpectatorModal(true)}
+                  onApprove={() => setShowApproveModal(true)}
+                  onReject={() => setShowRejectModal(true)}
+                />
+              )}
+            </div>
+          </Tabs>
         </div>
-
-        {/* Tabs: Overview, Workflow, Documents, Activity, Work Notes */}
-        <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full" data-testid="request-detail-tabs">
-          <TabsList className="inline-flex h-10 sm:h-11 items-center justify-start rounded-lg bg-gray-100 p-1 text-gray-500 w-full mb-4 sm:mb-6">
-            <TabsTrigger 
-              value="overview" 
-              className="inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-xs sm:text-sm font-medium ring-offset-white transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-400 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white data-[state=active]:text-gray-900 data-[state=active]:shadow-sm gap-1.5"
-              data-testid="tab-overview"
-            >
-              <ClipboardList className="w-4 h-4" />
-              <span>Overview</span>
-            </TabsTrigger>
-            <TabsTrigger 
-              value="workflow" 
-              className="inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-xs sm:text-sm font-medium ring-offset-white transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-400 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white data-[state=active]:text-gray-900 data-[state=active]:shadow-sm gap-1.5"
-              data-testid="tab-workflow"
-            >
-              <TrendingUp className="w-4 h-4" />
-              <span>Workflow</span>
-            </TabsTrigger>
-            <TabsTrigger 
-              value="documents" 
-              className="inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-xs sm:text-sm font-medium ring-offset-white transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-400 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white data-[state=active]:text-gray-900 data-[state=active]:shadow-sm gap-1.5"
-              data-testid="tab-documents"
-            >
-              <FileText className="w-4 h-4" />
-              <span>Docs</span>
-            </TabsTrigger>
-            <TabsTrigger 
-              value="activity" 
-              className="inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-xs sm:text-sm font-medium ring-offset-white transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-400 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white data-[state=active]:text-gray-900 data-[state=active]:shadow-sm gap-1.5"
-              data-testid="tab-activity"
-            >
-              <Activity className="w-4 h-4" />
-              <span>Activity</span>
-            </TabsTrigger>
-            <TabsTrigger 
-              value="worknotes" 
-              className="inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-xs sm:text-sm font-medium ring-offset-white transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-400 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white data-[state=active]:text-gray-900 data-[state=active]:shadow-sm gap-1.5 relative"
-              data-testid="tab-worknotes"
-            >
-              <MessageSquare className="w-4 h-4" />
-              <span>Work Notes</span>
-              {/* Unread Work Notes Badge */}
-              {unreadWorkNotes > 0 && (
-                <Badge 
-                  className="absolute -top-1 -right-1 h-5 w-5 rounded-full bg-red-500 text-white text-[10px] flex items-center justify-center p-0"
-                  data-testid="worknotes-unread-badge"
-                >
-                  {unreadWorkNotes > 9 ? '9+' : unreadWorkNotes}
-                </Badge>
-              )}
-            </TabsTrigger>
-          </TabsList>
-
-          {/* Main Layout: Full width for Work Notes, Grid with sidebar for other tabs */}
-          <div className={activeTab === 'worknotes' ? '' : 'grid grid-cols-1 lg:grid-cols-3 gap-6'}>
-            {/* Left Column: Tab content (2/3 width normally, full width for work notes) */}
-            <div className={activeTab === 'worknotes' ? '' : 'lg:col-span-2'}>
-
-          {/* Overview Tab: Request initiator, details, and conclusion */}
-          <TabsContent value="overview" className="mt-0" data-testid="overview-tab-content">
-            <div className="space-y-4 sm:space-y-6">
-                {/* Request Initiator Card */}
-                <Card data-testid="initiator-card">
-                  <CardHeader className="pb-3 sm:pb-4">
-                    <CardTitle className="flex items-center gap-2 text-sm sm:text-base">
-                      <User className="w-4 h-4 sm:w-5 sm:h-5 text-blue-600" />
-                      Request Initiator
-                    </CardTitle>
-                  </CardHeader>
-                  <CardContent>
-                    <div className="flex items-start gap-3 sm:gap-4">
-                      <Avatar className="h-10 w-10 sm:h-12 sm:w-12 ring-2 ring-white shadow-sm flex-shrink-0">
-                        <AvatarFallback className="bg-gray-700 text-white font-semibold text-sm">
-                          {request.initiator?.avatar || 'U'}
-                        </AvatarFallback>
-                      </Avatar>
-                      <div className="flex-1 min-w-0">
-                        <h3 className="font-semibold text-gray-900 text-sm sm:text-base truncate">{request.initiator?.name || 'N/A'}</h3>
-                        <p className="text-xs sm:text-sm text-gray-600 truncate">{request.initiator?.role || 'N/A'}</p>
-                        <p className="text-xs sm:text-sm text-gray-500 truncate">{request.initiator?.department || 'N/A'}</p>
-                        
-                        <div className="mt-2 sm:mt-3 space-y-1.5 sm:space-y-2">
-                          <div className="flex items-center gap-2 text-xs sm:text-sm text-gray-600 min-w-0">
-                            <Mail className="w-3.5 h-3.5 sm:w-4 sm:h-4 flex-shrink-0" />
-                            <span className="truncate">{request.initiator?.email || 'N/A'}</span>
-                          </div>
-                          <div className="flex items-center gap-2 text-xs sm:text-sm text-gray-600">
-                            <Phone className="w-3.5 h-3.5 sm:w-4 sm:h-4 flex-shrink-0" />
-                            <span>{request.initiator?.phone || 'N/A'}</span>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </CardContent>
-                </Card>
-
-                {/* Request Details Card */}
-                <Card data-testid="request-details-card">
-                  <CardHeader className="pb-3 sm:pb-4">
-                    <CardTitle className="flex items-center gap-2 text-sm sm:text-base">
-                      <FileText className="w-4 h-4 sm:w-5 sm:h-5 text-blue-600" />
-                      Request Details
-                    </CardTitle>
-                  </CardHeader>
-                  <CardContent className="space-y-3 sm:space-y-4">
-                    <div>
-                      <label className="text-xs sm:text-sm font-medium text-gray-700 block mb-2">Description</label>
-                      <div className="bg-gray-50 rounded-lg p-3 sm:p-4 border border-gray-300">
-                        <p className="text-xs sm:text-sm text-gray-700 whitespace-pre-line leading-relaxed break-words">
-                          {request.description}
-                        </p>
-                      </div>
-                    </div>
-
-                    {/* Additional Details: Category, Subcategory (if applicable) */}
-                    {(request.category || request.subcategory) && (
-                      <div className="grid grid-cols-2 gap-4 pt-4 border-t border-gray-300">
-                        {request.category && (
-                          <div>
-                            <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">Category</label>
-                            <p className="text-sm text-gray-900 font-medium mt-1">{request.category}</p>
-                          </div>
-                        )}
-                        {request.subcategory && (
-                          <div>
-                            <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">Subcategory</label>
-                            <p className="text-sm text-gray-900 font-medium mt-1">{request.subcategory}</p>
-                          </div>
-                        )}
-                      </div>
-                    )}
-
-                    {/* Amount (if applicable) */}
-                    {request.amount && (
-                      <div className="pt-4 border-t border-gray-300">
-                        <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">Amount</label>
-                        <p className="text-lg font-bold text-gray-900 mt-1">{request.amount}</p>
-                      </div>
-                    )}
-
-                    {/* Timestamps: Created and Last Updated */}
-                    <div className="grid grid-cols-2 gap-4 pt-4 border-t border-gray-300">
-                      <div>
-                        <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">Created</label>
-                        <p className="text-sm text-gray-900 font-medium mt-1">{formatDateTime(request.createdAt)}</p>
-                      </div>
-                      <div>
-                        <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">Last Updated</label>
-                        <p className="text-sm text-gray-900 font-medium mt-1">{formatDateTime(request.updatedAt)}</p>
-                      </div>
-                    </div>
-                  </CardContent>
-                </Card>
-
-                {/* Claim Management Details: Show only for claim management requests */}
-                {request.claimDetails && (
-                  <Card>
-                    <CardHeader className="pb-4">
-                      <CardTitle className="flex items-center gap-2 text-base">
-                        <FileText className="w-5 h-5 text-purple-600" />
-                        Claim Management Details
-                      </CardTitle>
-                    </CardHeader>
-                    <CardContent className="space-y-4">
-                      <div className="grid grid-cols-2 gap-4">
-                        <div>
-                          <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">Activity Name</label>
-                          <p className="text-sm text-gray-900 font-medium mt-1">{request.claimDetails.activityName || 'N/A'}</p>
-                        </div>
-                        <div>
-                          <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">Activity Type</label>
-                          <p className="text-sm text-gray-900 font-medium mt-1">{request.claimDetails.activityType || 'N/A'}</p>
-                        </div>
-                        <div>
-                          <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">Location</label>
-                          <p className="text-sm text-gray-900 font-medium mt-1">{request.claimDetails.location || 'N/A'}</p>
-                        </div>
-                        <div>
-                          <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">Activity Date</label>
-                          <p className="text-sm text-gray-900 font-medium mt-1">{request.claimDetails.activityDate ? formatDateShort(request.claimDetails.activityDate) : 'N/A'}</p>
-                        </div>
-                        <div>
-                          <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">Dealer Code</label>
-                          <p className="text-sm text-gray-900 font-medium mt-1">{request.claimDetails.dealerCode || 'N/A'}</p>
-                        </div>
-                        <div>
-                          <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">Dealer Name</label>
-                          <p className="text-sm text-gray-900 font-medium mt-1">{request.claimDetails.dealerName || 'N/A'}</p>
-                        </div>
-                      </div>
-
-                      {request.claimDetails.requestDescription && (
-                        <div className="pt-4 border-t border-gray-300">
-                          <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">Request Description</label>
-                          <p className="text-sm text-gray-700 mt-2 bg-gray-50 p-3 rounded-lg whitespace-pre-line">
-                            {request.claimDetails.requestDescription}
-                          </p>
-                        </div>
-                      )}
-                    </CardContent>
-                  </Card>
-                )}
-
-                {/* Read-Only Conclusion Remark: Shows for closed requests */}
-                {request.status === 'closed' && request.conclusionRemark && (
-                  <Card>
-                    <CardHeader className="bg-gradient-to-r from-gray-50 to-slate-50 border-b border-gray-200">
-                      <CardTitle className="flex items-center gap-2 text-base">
-                        <CheckCircle className="w-5 h-5 text-gray-600" />
-                        Conclusion Remark
-                      </CardTitle>
-                      <CardDescription className="mt-1 text-xs sm:text-sm">
-                        Final summary of this closed request
-                      </CardDescription>
-                    </CardHeader>
-                    <CardContent className="pt-4">
-                      <div className="bg-gray-50 border border-gray-200 rounded-lg p-4">
-                        <p className="text-sm text-gray-700 whitespace-pre-line leading-relaxed">
-                          {request.conclusionRemark}
-                        </p>
-                      </div>
-                      
-                      {request.closureDate && (
-                        <div className="mt-3 flex items-center justify-between text-xs text-gray-500 border-t border-gray-200 pt-3">
-                          <span>Request closed on {formatDateTime(request.closureDate)}</span>
-                          <span>By {request.initiator?.name || 'Initiator'}</span>
-                        </div>
-                      )}
-                    </CardContent>
-                  </Card>
-                )}
-
-                {/* Conclusion Remark Section: Shows when request is approved (initiator finalizes) */}
-                {needsClosure && (
-                  <Card data-testid="conclusion-remark-card">
-                    <CardHeader className="bg-gradient-to-r from-green-50 to-emerald-50 border-b border-green-200">
-                      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
-                        <div>
-                          <CardTitle className="flex items-center gap-2 text-base sm:text-lg">
-                            <CheckCircle className="w-5 h-5 text-green-600" />
-                            Conclusion Remark - Final Step
-                          </CardTitle>
-                          <CardDescription className="mt-1 text-xs sm:text-sm">
-                            All approvals are complete. Please review and finalize the conclusion to close this request.
-                          </CardDescription>
-                        </div>
-                        {/* AI Generation Button */}
-                        <Button
-                          variant="outline"
-                          size="sm"
-                          onClick={handleGenerateConclusion}
-                          disabled={conclusionLoading}
-                          className="gap-2 shrink-0"
-                          data-testid="generate-ai-conclusion-button"
-                        >
-                          <RefreshCw className={`w-3.5 h-3.5 ${conclusionLoading ? 'animate-spin' : ''}`} />
-                          {aiGenerated ? 'Regenerate' : 'Generate with AI'}
-                        </Button>
-                      </div>
-                    </CardHeader>
-                    <CardContent className="pt-4">
-                      {conclusionLoading ? (
-                        <div className="flex items-center justify-center py-8" data-testid="conclusion-loading">
-                          <div className="text-center">
-                            <Loader2 className="w-8 h-8 text-blue-600 animate-spin mx-auto mb-2" />
-                            <p className="text-sm text-gray-600">Preparing conclusion remark...</p>
-                          </div>
-                        </div>
-                      ) : (
-                        <div className="space-y-4">
-                          <div>
-                            <div className="flex items-center justify-between mb-2">
-                              <label className="text-sm font-medium text-gray-700">
-                                Conclusion Remark
-                              </label>
-                              {/* AI Generated Badge */}
-                              {aiGenerated && (
-                                <span className="text-xs text-blue-600" data-testid="ai-generated-label">
-                                  ✓ System-generated suggestion (editable)
-                                </span>
-                              )}
-                            </div>
-                            
-                            {/* Conclusion Textarea */}
-                            <Textarea
-                              value={conclusionRemark}
-                              onChange={(e) => setConclusionRemark(e.target.value)}
-                              placeholder="Enter a professional conclusion remark summarizing the request outcome, key decisions, and approvals..."
-                              className="text-sm resize-none"
-                              style={{ height: '160px' }}
-                              maxLength={2000}
-                              data-testid="conclusion-remark-textarea"
-                            />
-                            
-                            <div className="flex items-center justify-between mt-2">
-                              <p className="text-xs text-gray-500">
-                                This will be the final summary for this request
-                              </p>
-                              <p className="text-xs text-gray-500" data-testid="character-count">
-                                {conclusionRemark.length} / 2000 characters
-                              </p>
-                            </div>
-                          </div>
-
-                          {/* Info Box: What happens when finalizing */}
-                          <div className="bg-blue-50 border border-blue-200 rounded-lg p-3">
-                            <p className="text-xs sm:text-sm font-semibold text-blue-900 mb-1.5">Finalizing this request will:</p>
-                            <ul className="text-xs sm:text-sm text-blue-800 space-y-0.5 pl-4">
-                              <li className="list-disc">Change request status to "CLOSED"</li>
-                              <li className="list-disc">Notify all participants of closure</li>
-                              <li className="list-disc">Move request to Closed Requests</li>
-                              <li className="list-disc">Save conclusion remark permanently</li>
-                            </ul>
-                          </div>
-
-                          {/* Finalize Button */}
-                          <div className="flex gap-3 justify-end pt-3 border-t">
-                            <Button
-                              onClick={handleFinalizeConclusion}
-                              disabled={conclusionSubmitting || !conclusionRemark.trim()}
-                              className="bg-green-600 hover:bg-green-700 text-white"
-                              data-testid="finalize-close-button"
-                            >
-                              {conclusionSubmitting ? (
-                                <>
-                                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
-                                  Finalizing...
-                                </>
-                              ) : (
-                                <>
-                                  <CheckCircle className="w-4 h-4 mr-2" />
-                                  Finalize & Close Request
-                                </>
-                              )}
-                            </Button>
-                          </div>
-                        </div>
-                      )}
-                    </CardContent>
-                  </Card>
-                )}
-            </div>
-          </TabsContent>
-
-          {/* Workflow Tab: Approval steps with TAT tracking */}
-          <TabsContent value="workflow" className="mt-0">
-            <Card>
-              <CardHeader>
-                <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 sm:gap-4">
-                  <div>
-                    <CardTitle className="flex items-center gap-2 text-sm sm:text-base">
-                      <TrendingUp className="w-4 h-4 sm:w-5 sm:h-5 text-blue-600" />
-                      Approval Workflow
-                    </CardTitle>
-                    <CardDescription className="mt-1 sm:mt-2 text-xs sm:text-sm">
-                      Track the approval progress through each step
-                    </CardDescription>
-                  </div>
-                  {/* Progress Badge: Current step and completion count */}
-                  {request.totalSteps && (() => {
-                    const completedCount = request.approvalFlow?.filter((s: any) => s.status === 'approved').length || 0;
-                    return (
-                      <Badge variant="outline" className="font-medium text-xs sm:text-sm shrink-0">
-                        Step {request.currentStep} of {request.totalSteps} - {completedCount} completed
-                      </Badge>
-                    );
-                  })()}
-                </div>
-              </CardHeader>
-              <CardContent>
-                {request.approvalFlow && request.approvalFlow.length > 0 ? (
-                  <div className="space-y-4 sm:space-y-6">
-                    {/* Map each approval step to ApprovalStepCard component */}
-                    {request.approvalFlow.map((step: any, index: number) => {
-                      // Get approval details with backend-calculated SLA
-                      const approval = request.approvals?.find((a: any) => a.levelId === step.levelId);
-                      
-                      // Check if this approver is the current user
-                      const currentUserEmail = (user as any)?.email?.toLowerCase();
-                      const approverEmail = step.approverEmail?.toLowerCase();
-                      const isCurrentUser = currentUserEmail && approverEmail && currentUserEmail === approverEmail;
-
-                      return (
-                        <ApprovalStepCard
-                          key={index}
-                          step={step}
-                          index={index}
-                          approval={approval}
-                          isCurrentUser={isCurrentUser}
-                          isInitiator={isInitiator}
-                          onSkipApprover={(data) => {
-                            if (!data.levelId) {
-                              alert('Level ID not available');
-                              return;
-                            }
-                            setSkipApproverData(data);
-                            setShowSkipApproverModal(true);
-                          }}
-                          onRefresh={refreshDetails}
-                          testId="workflow-step"
-                        />
-                      );
-                    })}
-                  </div>
-                ) : (
-                  <p className="text-sm text-gray-500 text-center py-8" data-testid="no-workflow-steps">No workflow steps defined</p>
-                )}
-              </CardContent>
-            </Card>
-          </TabsContent>
-
-          {/* Documents Tab: Request documents and work note attachments */}
-          <TabsContent value="documents" className="mt-0">
-            <div className="space-y-4 sm:space-y-6">
-              {/* Section 1: Request Documents */}
-              <Card>
-                <CardHeader>
-                  <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 sm:gap-4">
-                    <div>
-                      <CardTitle className="flex items-center gap-2 text-sm sm:text-base">
-                        <FileText className="w-4 h-4 sm:w-5 sm:h-5 text-blue-600" />
-                        Request Documents
-                      </CardTitle>
-                      <CardDescription className="text-xs sm:text-sm mt-1">Documents attached while creating the request</CardDescription>
-                    </div>
-                    {/* Upload Document Button */}
-                    <div className="flex flex-col items-end gap-1">
-                      <Button 
-                        size="sm" 
-                        onClick={triggerFileInput}
-                        disabled={uploadingDocument || request.status === 'closed'}
-                        className="gap-1 sm:gap-2 h-8 sm:h-9 text-xs sm:text-sm shrink-0"
-                        data-testid="upload-document-btn"
-                      >
-                        <Upload className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
-                        {uploadingDocument ? 'Uploading...' : request.status === 'closed' ? 'Closed' : 'Upload'}
-                        <span className="hidden sm:inline">{request.status === 'closed' ? '' : 'Document'}</span>
-                      </Button>
-                      <p className="text-xs text-gray-500 whitespace-nowrap">
-                        Max {documentPolicy.maxFileSizeMB}MB
-                      </p>
-                    </div>
-                  </div>
-                </CardHeader>
-                <CardContent>
-                  {request.documents && request.documents.length > 0 ? (
-                    <div className="space-y-3">
-                      {/* Map documents to DocumentCard component */}
-                      {request.documents.map((doc: any, index: number) => (
-                        <DocumentCard
-                          key={index}
-                          document={doc}
-                          onPreview={(previewDoc) => setPreviewDocument(previewDoc)}
-                          onDownload={downloadDocument}
-                          testId="request-document"
-                        />
-                      ))}
-                    </div>
-                  ) : (
-                    <p className="text-sm text-gray-500 text-center py-8" data-testid="no-documents">No documents uploaded yet</p>
-                  )}
-                </CardContent>
-              </Card>
-
-              {/* Section 2: Work Note Attachments */}
-              <Card>
-                <CardHeader>
-                  <CardTitle className="flex items-center gap-2 text-sm sm:text-base">
-                    <MessageSquare className="w-4 h-4 sm:w-5 sm:h-5 text-purple-600" />
-                    Work Note Attachments
-                  </CardTitle>
-                  <CardDescription className="text-xs sm:text-sm">Files shared in work notes discussions</CardDescription>
-                </CardHeader>
-                <CardContent>
-                  {workNoteAttachments && workNoteAttachments.length > 0 ? (
-                    <div className="space-y-3">
-                      {/* Map work note attachments to DocumentCard component */}
-                      {workNoteAttachments.map((file: any, index: number) => (
-                        <DocumentCard
-                          key={file.attachmentId || index}
-                          document={{
-                            documentId: file.attachmentId || '',
-                            name: file.name,
-                            fileType: file.type || '',
-                            size: file.size ? `${(file.size / 1024).toFixed(1)} KB` : 'Unknown size',
-                            sizeBytes: file.size,
-                            uploadedBy: file.uploadedBy,
-                            uploadedAt: file.uploadedAt
-                          }}
-                          onPreview={(previewDoc) => setPreviewDocument(previewDoc)}
-                          onDownload={async (attachmentId) => {
-                            const { downloadWorkNoteAttachment } = require('@/services/workflowApi');
-                            await downloadWorkNoteAttachment(attachmentId);
-                          }}
-                          testId="worknote-attachment"
-                        />
-                      ))}
-                    </div>
-                  ) : (
-                    <p className="text-sm text-gray-500 text-center py-8" data-testid="no-attachments">No files shared in work notes yet</p>
-                  )}
-                </CardContent>
-              </Card>
-            </div>
-          </TabsContent>
-
-          {/* Activity Tab: Complete audit trail of all actions */}
-          <TabsContent value="activity" className="mt-0">
-            <Card>
-              <CardHeader>
-                <CardTitle className="flex items-center gap-2 text-sm sm:text-base">
-                  <Activity className="w-4 h-4 sm:w-5 sm:h-5 text-orange-600" />
-                  Activity Timeline
-                </CardTitle>
-                <CardDescription className="text-xs sm:text-sm">
-                  Complete audit trail of all request activities
-                </CardDescription>
-              </CardHeader>
-              <CardContent>
-                <div className="space-y-4 sm:space-y-6">
-                  {/* Map activity entries to timeline items */}
-                  {request.auditTrail && request.auditTrail.length > 0 ? request.auditTrail.map((entry: any, index: number) => (
-                    <div key={index} className="flex items-start gap-4" data-testid={`activity-item-${index}`}>
-                      {/* Icon based on activity type */}
-                      <div className="flex-shrink-0">
-                        <div className="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center">
-                          {getActionTypeIcon(entry.type)}
-                        </div>
-                      </div>
-                      
-                      {/* Activity Content */}
-                      <div className="flex-1 min-w-0">
-                        <div className="bg-white rounded-lg border border-gray-200 p-4 shadow-sm">
-                          {/* Header with action title and timestamp */}
-                          <div className="flex items-center justify-between mb-2">
-                            <h4 className="font-semibold text-gray-900">{entry.action}</h4>
-                            <span className="text-xs text-gray-500 whitespace-nowrap ml-4">{formatDateTime(entry.timestamp)}</span>
-                          </div>
-                          
-                          {/* Details */}
-                          <div className="text-sm text-gray-600 leading-relaxed">
-                            <p className="whitespace-pre-line break-words">{entry.details}</p>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  )) : (
-                    <div className="text-center py-12" data-testid="no-activity">
-                      <Activity className="w-12 h-12 text-gray-400 mx-auto mb-4" />
-                      <p className="text-sm text-gray-500">No activity recorded yet</p>
-                      <p className="text-xs text-gray-400 mt-2">Actions and updates will appear here</p>
-                    </div>
-                  )}
-                </div>
-              </CardContent>
-            </Card>
-          </TabsContent>
-
-          {/* Work Notes Tab: Real-time chat (Full Width) */}
-          <TabsContent value="worknotes" className="mt-0" forceMount={true} hidden={activeTab !== 'worknotes'}>
-            <div className="h-[calc(100vh-300px)] min-h-[600px]">
-              <WorkNoteChat 
-                requestId={requestIdentifier}
-                requestTitle={request.title}
-                skipSocketJoin={true}
-                messages={mergedMessages}
-                onAttachmentsExtracted={setWorkNoteAttachments}
-                isInitiator={isInitiator}
-                currentLevels={(request.approvalFlow || [])
-                  .filter((flow: any) => flow && typeof flow.step === 'number')
-                  .map((flow: any) => ({
-                    levelNumber: flow.step || 0,
-                    approverName: flow.approver || 'Unknown',
-                    status: flow.status || 'pending',
-                    tatHours: flow.tatHours || 24
-                  }))
-                }
-                onAddApprover={handleAddApprover}
-              />
-            </div>
-          </TabsContent>
-
-            </div>
-
-            {/* Right Column: Quick Actions Sidebar (1/3 width, hidden for Work Notes) */}
-            {activeTab !== 'worknotes' && (
-            <div className="space-y-4 sm:space-y-6">
-              {/* Quick Actions Card */}
-              <Card data-testid="quick-actions-card">
-                <CardHeader className="pb-2">
-                  <CardTitle className="text-sm sm:text-base">Quick Actions</CardTitle>
-                </CardHeader>
-                <CardContent className="space-y-2">
-                  {/* Add Approver: Only initiator can add (not for closed requests) */}
-                  {isInitiator && request.status !== 'closed' && (
-                    <Button 
-                      variant="outline" 
-                      className="w-full justify-start gap-2 bg-white text-gray-700 border-gray-300 hover:bg-gray-50 hover:text-gray-900 h-9 sm:h-10 text-xs sm:text-sm"
-                      onClick={() => setShowAddApproverModal(true)}
-                      data-testid="add-approver-button"
-                    >
-                      <UserPlus className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
-                      Add Approver
-                    </Button>
-                  )}
-                  {/* Add Spectator: Non-spectators can add (not for closed requests) */}
-                  {!isSpectator && request.status !== 'closed' && (
-                    <Button 
-                      variant="outline" 
-                      className="w-full justify-start gap-2 bg-white text-gray-700 border-gray-300 hover:bg-gray-50 hover:text-gray-900 h-9 sm:h-10 text-xs sm:text-sm"
-                      onClick={() => setShowAddSpectatorModal(true)}
-                      data-testid="add-spectator-button"
-                    >
-                      <Eye className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
-                      Add Spectator
-                    </Button>
-                  )}
-
-                  {/* Approve/Reject Buttons: Only show for assigned approvers */}
-                  <div className="pt-3 sm:pt-4 space-y-2">
-                    {!isSpectator && currentApprovalLevel && (
-                      <>
-                        <Button 
-                          className="w-full bg-green-600 hover:bg-green-700 text-white h-9 sm:h-10 text-xs sm:text-sm"
-                          onClick={() => setShowApproveModal(true)}
-                          data-testid="approve-request-button"
-                        >
-                          <CheckCircle className="w-3.5 h-3.5 sm:w-4 sm:h-4 mr-2" />
-                          Approve Request
-                        </Button>
-                        <Button 
-                          variant="destructive"
-                          className="w-full h-9 sm:h-10 text-xs sm:text-sm"
-                          onClick={() => setShowRejectModal(true)}
-                          data-testid="reject-request-button"
-                        >
-                          <XCircle className="w-3.5 h-3.5 sm:w-4 sm:h-4 mr-2" />
-                          Reject Request
-                        </Button>
-                      </>
-                    )}
-                  </div>
-                </CardContent>
-              </Card>
-
-              {/* Spectators Card: List of users with view-only access */}
-              {request.spectators && request.spectators.length > 0 && (
-                <Card data-testid="spectators-card">
-                  <CardHeader className="pb-2">
-                    <CardTitle className="text-sm sm:text-base">Spectators</CardTitle>
-                  </CardHeader>
-                  <CardContent className="space-y-3">
-                    {request.spectators.map((spectator: any, index: number) => (
-                      <div key={index} className="flex items-center gap-3" data-testid={`spectator-${index}`}>
-                        <Avatar className="h-8 w-8">
-                          <AvatarFallback className="bg-blue-100 text-blue-800 text-xs font-semibold">
-                            {spectator.avatar}
-                          </AvatarFallback>
-                        </Avatar>
-                        <div className="flex-1 min-w-0">
-                          <p className="text-sm font-medium text-gray-900">{spectator.name}</p>
-                          <p className="text-xs text-gray-500 truncate">{spectator.role}</p>
-                        </div>
-                      </div>
-                    ))}
-                  </CardContent>
-                </Card>
-              )}
-            </div>
-            )}
-          </div>
-        </Tabs>
       </div>
-    </div>
-    
-    {/* Modals: All action modals rendered here */}
-    
-    {/* Approval Modal */}
-    <ApprovalModal
-      open={showApproveModal}
-      onClose={() => setShowApproveModal(false)}
-      onConfirm={handleApproveConfirm}
-      requestIdDisplay={request.id}
-      requestTitle={request.title}
-    />
-    
-    {/* Rejection Modal */}
-    <RejectionModal
-      open={showRejectModal}
-      onClose={() => setShowRejectModal(false)}
-      onConfirm={handleRejectConfirm}
-      requestIdDisplay={request.id}
-      requestTitle={request.title}
-    />
-    
-    {/* Add Approver Modal */}
-    <AddApproverModal
-      open={showAddApproverModal}
-      onClose={() => setShowAddApproverModal(false)}
-      onConfirm={handleAddApprover}
-      requestIdDisplay={request.id}
-      requestTitle={request.title}
-      existingParticipants={existingParticipants}
-      currentLevels={(request.approvalFlow || [])
-        .filter((flow: any) => flow && typeof flow.step === 'number')
-        .map((flow: any) => ({
-          levelNumber: flow.step || 0,
-          approverName: flow.approver || 'Unknown',
-          status: flow.status || 'pending',
-          tatHours: flow.tatHours || 24
-        }))
-      }
-    />
-    
-    {/* Add Spectator Modal */}
-    <AddSpectatorModal
-      open={showAddSpectatorModal}
-      onClose={() => setShowAddSpectatorModal(false)}
-      onConfirm={handleAddSpectator}
-      requestIdDisplay={request.id}
-      requestTitle={request.title}
-      existingParticipants={existingParticipants}
-    />
-    
-    {/* Skip Approver Modal */}
-    <SkipApproverModal
-      open={showSkipApproverModal}
-      onClose={() => {
-        setShowSkipApproverModal(false);
-        setSkipApproverData(null);
-      }}
-      onConfirm={handleSkipApprover}
-      approverName={skipApproverData?.approverName}
-      levelNumber={skipApproverData?.levelNumber}
-      requestIdDisplay={request.id}
-      requestTitle={request.title}
-    />
-    
-    {/* File Preview Modal */}
-    {previewDocument && (
-      <FilePreview
-        fileName={previewDocument.fileName}
-        fileType={previewDocument.fileType}
-        fileUrl={getDocumentPreviewUrl(previewDocument.documentId)}
-        fileSize={previewDocument.fileSize}
-        attachmentId={previewDocument.documentId}
-        onDownload={downloadDocument}
-        open={!!previewDocument}
-        onClose={() => setPreviewDocument(null)}
-      />
-    )}
-    
-    {/* Action Status Modal: Success/Error feedback */}
-    {actionStatus && (
-      <ActionStatusModal
-        open={showActionStatusModal}
-        onClose={() => {
-          setShowActionStatusModal(false);
-          setActionStatus(null);
-        }}
-        success={actionStatus.success}
-        title={actionStatus.title}
-        message={actionStatus.message}
-      />
-    )}
 
-    {/* Document Validation Error Modal */}
-    <Dialog open={documentError.show} onOpenChange={(open) => setDocumentError(prev => ({ ...prev, show: open }))}>
-      <DialogContent className="sm:max-w-lg">
-        <DialogHeader>
-          <DialogTitle className="flex items-center gap-2">
-            <AlertCircle className="w-5 h-5 text-red-600" />
-            Document Upload Policy Violation
-          </DialogTitle>
-          <DialogDescription asChild>
-            <div className="space-y-3">
-              <p className="text-gray-700">
-                The following file(s) could not be uploaded due to policy violations:
-              </p>
-              <div className="space-y-2 max-h-60 overflow-y-auto">
-                {documentError.errors.map((error, index) => (
-                  <div key={index} className="bg-red-50 border border-red-200 rounded-lg p-3">
-                    <p className="font-medium text-red-900 text-sm">{error.fileName}</p>
-                    <p className="text-xs text-red-700 mt-1">{error.reason}</p>
-                  </div>
-                ))}
-              </div>
-              <div className="bg-blue-50 border border-blue-200 rounded-lg p-3">
-                <p className="text-sm text-blue-800 font-semibold mb-1">Document Policy:</p>
-                <ul className="text-xs text-blue-700 space-y-1 list-disc list-inside">
-                  <li>Maximum file size: {documentPolicy.maxFileSizeMB}MB</li>
-                  <li>Allowed file types: {documentPolicy.allowedFileTypes.join(', ')}</li>
-                </ul>
-              </div>
-            </div>
-          </DialogDescription>
-        </DialogHeader>
-        <DialogFooter>
-          <Button
-            onClick={() => setDocumentError({ show: false, errors: [] })}
-            className="w-full sm:w-auto"
-          >
-            OK
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+      {/* Modals */}
+      <RequestDetailModals
+        showApproveModal={showApproveModal}
+        showRejectModal={showRejectModal}
+        showAddApproverModal={showAddApproverModal}
+        showAddSpectatorModal={showAddSpectatorModal}
+        showSkipApproverModal={showSkipApproverModal}
+        showActionStatusModal={showActionStatusModal}
+        previewDocument={previewDocument}
+        documentError={documentError}
+        request={request}
+        skipApproverData={skipApproverData}
+        actionStatus={actionStatus}
+        existingParticipants={existingParticipants}
+        currentLevels={currentLevels}
+        setShowApproveModal={setShowApproveModal}
+        setShowRejectModal={setShowRejectModal}
+        setShowAddApproverModal={setShowAddApproverModal}
+        setShowAddSpectatorModal={setShowAddSpectatorModal}
+        setShowSkipApproverModal={setShowSkipApproverModal}
+        setShowActionStatusModal={setShowActionStatusModal}
+        setPreviewDocument={setPreviewDocument}
+        setDocumentError={setDocumentError}
+        setSkipApproverData={setSkipApproverData}
+        setActionStatus={setActionStatus}
+        handleApproveConfirm={handleApproveConfirm}
+        handleRejectConfirm={handleRejectConfirm}
+        handleAddApprover={handleAddApprover}
+        handleAddSpectator={handleAddSpectator}
+        handleSkipApprover={handleSkipApprover}
+        downloadDocument={downloadDocument}
+        documentPolicy={documentPolicy}
+      />
     </>
   );
 }
 
 /**
  * RequestDetail Component (Exported)
- * 
- * Purpose: Wrap RequestDetailInner with Error Boundary
- * 
- * Benefits:
- * - Prevents app crash if errors occur
- * - Shows graceful error UI
- * - Provides error recovery options
  */
 export function RequestDetail(props: RequestDetailProps) {
   return (
diff --git a/src/pages/RequestDetail/components/QuickActionsSidebar.tsx b/src/pages/RequestDetail/components/QuickActionsSidebar.tsx
new file mode 100644
index 0000000..1c80390
--- /dev/null
+++ b/src/pages/RequestDetail/components/QuickActionsSidebar.tsx
@@ -0,0 +1,118 @@
+/**
+ * Quick Actions Sidebar Component
+ */
+
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Avatar, AvatarFallback } from '@/components/ui/avatar';
+import { UserPlus, Eye, CheckCircle, XCircle } from 'lucide-react';
+
+interface QuickActionsSidebarProps {
+  request: any;
+  isInitiator: boolean;
+  isSpectator: boolean;
+  currentApprovalLevel: any;
+  onAddApprover: () => void;
+  onAddSpectator: () => void;
+  onApprove: () => void;
+  onReject: () => void;
+}
+
+export function QuickActionsSidebar({
+  request,
+  isInitiator,
+  isSpectator,
+  currentApprovalLevel,
+  onAddApprover,
+  onAddSpectator,
+  onApprove,
+  onReject,
+}: QuickActionsSidebarProps) {
+  return (
+    <div className="space-y-4 sm:space-y-6">
+      {/* Quick Actions Card */}
+      <Card data-testid="quick-actions-card">
+        <CardHeader className="pb-2">
+          <CardTitle className="text-sm sm:text-base">Quick Actions</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-2">
+          {/* Add Approver */}
+          {isInitiator && request.status !== 'closed' && (
+            <Button
+              variant="outline"
+              className="w-full justify-start gap-2 bg-white text-gray-700 border-gray-300 hover:bg-gray-50 hover:text-gray-900 h-9 sm:h-10 text-xs sm:text-sm"
+              onClick={onAddApprover}
+              data-testid="add-approver-button"
+            >
+              <UserPlus className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
+              Add Approver
+            </Button>
+          )}
+
+          {/* Add Spectator */}
+          {!isSpectator && request.status !== 'closed' && (
+            <Button
+              variant="outline"
+              className="w-full justify-start gap-2 bg-white text-gray-700 border-gray-300 hover:bg-gray-50 hover:text-gray-900 h-9 sm:h-10 text-xs sm:text-sm"
+              onClick={onAddSpectator}
+              data-testid="add-spectator-button"
+            >
+              <Eye className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
+              Add Spectator
+            </Button>
+          )}
+
+          {/* Approve/Reject Buttons */}
+          <div className="pt-3 sm:pt-4 space-y-2">
+            {!isSpectator && currentApprovalLevel && (
+              <>
+                <Button
+                  className="w-full bg-green-600 hover:bg-green-700 text-white h-9 sm:h-10 text-xs sm:text-sm"
+                  onClick={onApprove}
+                  data-testid="approve-request-button"
+                >
+                  <CheckCircle className="w-3.5 h-3.5 sm:w-4 sm:h-4 mr-2" />
+                  Approve Request
+                </Button>
+                <Button
+                  variant="destructive"
+                  className="w-full h-9 sm:h-10 text-xs sm:text-sm"
+                  onClick={onReject}
+                  data-testid="reject-request-button"
+                >
+                  <XCircle className="w-3.5 h-3.5 sm:w-4 sm:h-4 mr-2" />
+                  Reject Request
+                </Button>
+              </>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Spectators Card */}
+      {request.spectators && request.spectators.length > 0 && (
+        <Card data-testid="spectators-card">
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm sm:text-base">Spectators</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            {request.spectators.map((spectator: any, index: number) => (
+              <div key={index} className="flex items-center gap-3" data-testid={`spectator-${index}`}>
+                <Avatar className="h-8 w-8">
+                  <AvatarFallback className="bg-blue-100 text-blue-800 text-xs font-semibold">
+                    {spectator.avatar}
+                  </AvatarFallback>
+                </Avatar>
+                <div className="flex-1 min-w-0">
+                  <p className="text-sm font-medium text-gray-900">{spectator.name}</p>
+                  <p className="text-xs text-gray-500 truncate">{spectator.role}</p>
+                </div>
+              </div>
+            ))}
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  );
+}
+
diff --git a/src/pages/RequestDetail/components/RequestDetailHeader.tsx b/src/pages/RequestDetail/components/RequestDetailHeader.tsx
new file mode 100644
index 0000000..cafb73e
--- /dev/null
+++ b/src/pages/RequestDetail/components/RequestDetailHeader.tsx
@@ -0,0 +1,100 @@
+/**
+ * Request Detail Header Component
+ */
+
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { ArrowLeft, FileText, RefreshCw } from 'lucide-react';
+import { getPriorityConfig, getStatusConfig } from '@/utils/requestDetailHelpers';
+import { SLAProgressBar } from '@/components/sla/SLAProgressBar';
+
+interface RequestDetailHeaderProps {
+  request: any;
+  refreshing: boolean;
+  onBack: () => void;
+  onRefresh: () => void;
+}
+
+export function RequestDetailHeader({ request, refreshing, onBack, onRefresh }: RequestDetailHeaderProps) {
+  const priorityConfig = getPriorityConfig(request?.priority || 'standard');
+  const statusConfig = getStatusConfig(request?.status || 'pending');
+
+  return (
+    <div className="bg-white rounded-lg shadow-sm border border-gray-300 mb-4 sm:mb-6" data-testid="request-detail-header">
+      {/* Top Header */}
+      <div className="p-3 sm:p-4 md:p-6 border-b border-gray-300">
+        <div className="flex items-start sm:items-center justify-between gap-2 sm:gap-4">
+          <div className="flex items-start sm:items-center gap-2 sm:gap-4 min-w-0 flex-1">
+            {/* Back Button */}
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={onBack}
+              className="rounded-lg flex-shrink-0 h-8 w-8 sm:h-10 sm:w-10"
+              data-testid="back-button"
+            >
+              <ArrowLeft className="h-4 w-4 sm:h-5 sm:h-5" />
+            </Button>
+
+            <div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-3 min-w-0 flex-1">
+              {/* File Icon */}
+              <div className="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0">
+                <FileText className="w-4 h-4 sm:w-5 sm:h-5 text-blue-600" />
+              </div>
+
+              <div className="flex flex-col sm:flex-row sm:items-center gap-2 min-w-0 flex-1">
+                {/* Request ID/Number */}
+                <h1 className="text-sm sm:text-base md:text-lg font-bold text-gray-900 truncate" data-testid="request-id">
+                  {request.id || 'N/A'}
+                </h1>
+                {/* Priority and Status Badges */}
+                <div className="flex flex-wrap items-center gap-1.5 sm:gap-2">
+                  <Badge
+                    className={`${priorityConfig.color} rounded-full px-2 sm:px-3 text-xs capitalize shrink-0`}
+                    variant="outline"
+                    data-testid="priority-badge"
+                  >
+                    {priorityConfig.label}
+                  </Badge>
+                  <Badge
+                    className={`${statusConfig.color} rounded-full px-2 sm:px-3 text-xs capitalize shrink-0`}
+                    variant="outline"
+                    data-testid="status-badge"
+                  >
+                    {statusConfig.label}
+                  </Badge>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Refresh Button */}
+          <Button
+            variant="outline"
+            size="sm"
+            className="gap-1 sm:gap-2 flex-shrink-0 h-8 sm:h-9"
+            onClick={onRefresh}
+            disabled={refreshing}
+            data-testid="refresh-button"
+          >
+            <RefreshCw className={`w-3.5 h-3.5 sm:w-4 sm:h-4 ${refreshing ? 'animate-spin' : ''}`} />
+            <span className="hidden sm:inline">{refreshing ? 'Refreshing...' : 'Refresh'}</span>
+          </Button>
+        </div>
+
+        {/* Request Title */}
+        <div className="mt-3 ml-0 sm:ml-14">
+          <h2 className="text-base sm:text-lg md:text-xl font-semibold text-gray-900 line-clamp-2" data-testid="request-title">
+            {request.title}
+          </h2>
+        </div>
+      </div>
+
+      {/* SLA Progress Section */}
+      <div className="px-3 sm:px-4 md:px-6 py-3 sm:py-4 bg-gradient-to-r from-blue-50 to-indigo-50 border-b border-gray-200" data-testid="sla-section">
+        <SLAProgressBar sla={request.summary?.sla || request.sla} requestStatus={request.status} testId="request-sla" />
+      </div>
+    </div>
+  );
+}
+
diff --git a/src/pages/RequestDetail/components/RequestDetailModals.tsx b/src/pages/RequestDetail/components/RequestDetailModals.tsx
new file mode 100644
index 0000000..bc1013d
--- /dev/null
+++ b/src/pages/RequestDetail/components/RequestDetailModals.tsx
@@ -0,0 +1,210 @@
+/**
+ * Request Detail Modals Component
+ * Consolidates all modals used in Request Detail
+ */
+
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { AlertCircle } from 'lucide-react';
+import { ApprovalModal } from '@/components/approval/ApprovalModal/ApprovalModal';
+import { RejectionModal } from '@/components/approval/RejectionModal/RejectionModal';
+import { SkipApproverModal } from '@/components/approval/SkipApproverModal';
+import { AddApproverModal } from '@/components/participant/AddApproverModal';
+import { AddSpectatorModal } from '@/components/participant/AddSpectatorModal';
+import { ActionStatusModal } from '@/components/common/ActionStatusModal';
+import { FilePreview } from '@/components/common/FilePreview';
+import { getDocumentPreviewUrl } from '@/services/workflowApi';
+
+interface RequestDetailModalsProps {
+  // Modal visibility states
+  showApproveModal: boolean;
+  showRejectModal: boolean;
+  showAddApproverModal: boolean;
+  showAddSpectatorModal: boolean;
+  showSkipApproverModal: boolean;
+  showActionStatusModal: boolean;
+  previewDocument: any;
+  documentError: { show: boolean; errors: any[] };
+
+  // Modal data
+  request: any;
+  skipApproverData: any;
+  actionStatus: any;
+  existingParticipants: any[];
+  currentLevels: any[];
+
+  // Handlers
+  setShowApproveModal: (show: boolean) => void;
+  setShowRejectModal: (show: boolean) => void;
+  setShowAddApproverModal: (show: boolean) => void;
+  setShowAddSpectatorModal: (show: boolean) => void;
+  setShowSkipApproverModal: (show: boolean) => void;
+  setShowActionStatusModal: (show: boolean) => void;
+  setPreviewDocument: (doc: any) => void;
+  setDocumentError: (error: any) => void;
+  setSkipApproverData: (data: any) => void;
+  setActionStatus: (status: any) => void;
+  handleApproveConfirm: (description: string) => Promise<void>;
+  handleRejectConfirm: (description: string) => Promise<void>;
+  handleAddApprover: (email: string, tatHours: number, level: number) => Promise<void>;
+  handleAddSpectator: (email: string) => void;
+  handleSkipApprover: (reason: string) => void;
+  downloadDocument: (documentId: string) => Promise<void>;
+  documentPolicy: any;
+}
+
+export function RequestDetailModals({
+  showApproveModal,
+  showRejectModal,
+  showAddApproverModal,
+  showAddSpectatorModal,
+  showSkipApproverModal,
+  showActionStatusModal,
+  previewDocument,
+  documentError,
+  request,
+  skipApproverData,
+  actionStatus,
+  existingParticipants,
+  currentLevels,
+  setShowApproveModal,
+  setShowRejectModal,
+  setShowAddApproverModal,
+  setShowAddSpectatorModal,
+  setShowSkipApproverModal,
+  setShowActionStatusModal,
+  setPreviewDocument,
+  setDocumentError,
+  setSkipApproverData,
+  setActionStatus,
+  handleApproveConfirm,
+  handleRejectConfirm,
+  handleAddApprover,
+  handleAddSpectator,
+  handleSkipApprover,
+  downloadDocument,
+  documentPolicy,
+}: RequestDetailModalsProps) {
+  return (
+    <>
+      {/* Approval Modal */}
+      <ApprovalModal
+        open={showApproveModal}
+        onClose={() => setShowApproveModal(false)}
+        onConfirm={handleApproveConfirm}
+        requestIdDisplay={request.id}
+        requestTitle={request.title}
+      />
+
+      {/* Rejection Modal */}
+      <RejectionModal
+        open={showRejectModal}
+        onClose={() => setShowRejectModal(false)}
+        onConfirm={handleRejectConfirm}
+        requestIdDisplay={request.id}
+        requestTitle={request.title}
+      />
+
+      {/* Add Approver Modal */}
+      <AddApproverModal
+        open={showAddApproverModal}
+        onClose={() => setShowAddApproverModal(false)}
+        onConfirm={handleAddApprover}
+        requestIdDisplay={request.id}
+        requestTitle={request.title}
+        existingParticipants={existingParticipants}
+        currentLevels={currentLevels}
+      />
+
+      {/* Add Spectator Modal */}
+      <AddSpectatorModal
+        open={showAddSpectatorModal}
+        onClose={() => setShowAddSpectatorModal(false)}
+        onConfirm={handleAddSpectator}
+        requestIdDisplay={request.id}
+        requestTitle={request.title}
+        existingParticipants={existingParticipants}
+      />
+
+      {/* Skip Approver Modal */}
+      <SkipApproverModal
+        open={showSkipApproverModal}
+        onClose={() => {
+          setShowSkipApproverModal(false);
+          setSkipApproverData(null);
+        }}
+        onConfirm={handleSkipApprover}
+        approverName={skipApproverData?.approverName}
+        levelNumber={skipApproverData?.levelNumber}
+        requestIdDisplay={request.id}
+        requestTitle={request.title}
+      />
+
+      {/* File Preview Modal */}
+      {previewDocument && (
+        <FilePreview
+          fileName={previewDocument.fileName}
+          fileType={previewDocument.fileType}
+          fileUrl={getDocumentPreviewUrl(previewDocument.documentId)}
+          fileSize={previewDocument.fileSize}
+          attachmentId={previewDocument.documentId}
+          onDownload={downloadDocument}
+          open={!!previewDocument}
+          onClose={() => setPreviewDocument(null)}
+        />
+      )}
+
+      {/* Action Status Modal */}
+      {actionStatus && (
+        <ActionStatusModal
+          open={showActionStatusModal}
+          onClose={() => {
+            setShowActionStatusModal(false);
+            setActionStatus(null);
+          }}
+          success={actionStatus.success}
+          title={actionStatus.title}
+          message={actionStatus.message}
+        />
+      )}
+
+      {/* Document Validation Error Modal */}
+      <Dialog open={documentError.show} onOpenChange={(open) => setDocumentError((prev: any) => ({ ...prev, show: open }))}>
+        <DialogContent className="sm:max-w-lg">
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2">
+              <AlertCircle className="w-5 h-5 text-red-600" />
+              Document Upload Policy Violation
+            </DialogTitle>
+            <DialogDescription asChild>
+              <div className="space-y-3">
+                <p className="text-gray-700">The following file(s) could not be uploaded due to policy violations:</p>
+                <div className="space-y-2 max-h-60 overflow-y-auto">
+                  {documentError.errors.map((error, index) => (
+                    <div key={index} className="bg-red-50 border border-red-200 rounded-lg p-3">
+                      <p className="font-medium text-red-900 text-sm">{error.fileName}</p>
+                      <p className="text-xs text-red-700 mt-1">{error.reason}</p>
+                    </div>
+                  ))}
+                </div>
+                <div className="bg-blue-50 border border-blue-200 rounded-lg p-3">
+                  <p className="text-sm text-blue-800 font-semibold mb-1">Document Policy:</p>
+                  <ul className="text-xs text-blue-700 space-y-1 list-disc list-inside">
+                    <li>Maximum file size: {documentPolicy.maxFileSizeMB}MB</li>
+                    <li>Allowed file types: {documentPolicy.allowedFileTypes.join(', ')}</li>
+                  </ul>
+                </div>
+              </div>
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button onClick={() => setDocumentError({ show: false, errors: [] })} className="w-full sm:w-auto">
+              OK
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}
+
diff --git a/src/pages/RequestDetail/components/tabs/ActivityTab.tsx b/src/pages/RequestDetail/components/tabs/ActivityTab.tsx
new file mode 100644
index 0000000..81b3fbb
--- /dev/null
+++ b/src/pages/RequestDetail/components/tabs/ActivityTab.tsx
@@ -0,0 +1,61 @@
+/**
+ * Activity Tab Component
+ */
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Activity } from 'lucide-react';
+import { formatDateTime } from '@/utils/dateFormatter';
+import { getActionTypeIcon } from '@/utils/requestDetailHelpers';
+
+interface ActivityTabProps {
+  request: any;
+}
+
+export function ActivityTab({ request }: ActivityTabProps) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2 text-sm sm:text-base">
+          <Activity className="w-4 h-4 sm:w-5 sm:h-5 text-orange-600" />
+          Activity Timeline
+        </CardTitle>
+        <CardDescription className="text-xs sm:text-sm">Complete audit trail of all request activities</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-4 sm:space-y-6">
+          {request.auditTrail && request.auditTrail.length > 0 ? (
+            request.auditTrail.map((entry: any, index: number) => (
+              <div key={index} className="flex items-start gap-4" data-testid={`activity-item-${index}`}>
+                <div className="flex-shrink-0">
+                  <div className="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center">
+                    {getActionTypeIcon(entry.type)}
+                  </div>
+                </div>
+
+                <div className="flex-1 min-w-0">
+                  <div className="bg-white rounded-lg border border-gray-200 p-4 shadow-sm">
+                    <div className="flex items-center justify-between mb-2">
+                      <h4 className="font-semibold text-gray-900">{entry.action}</h4>
+                      <span className="text-xs text-gray-500 whitespace-nowrap ml-4">{formatDateTime(entry.timestamp)}</span>
+                    </div>
+
+                    <div className="text-sm text-gray-600 leading-relaxed">
+                      <p className="whitespace-pre-line break-words">{entry.details}</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ))
+          ) : (
+            <div className="text-center py-12" data-testid="no-activity">
+              <Activity className="w-12 h-12 text-gray-400 mx-auto mb-4" />
+              <p className="text-sm text-gray-500">No activity recorded yet</p>
+              <p className="text-xs text-gray-400 mt-2">Actions and updates will appear here</p>
+            </div>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
diff --git a/src/pages/RequestDetail/components/tabs/DocumentsTab.tsx b/src/pages/RequestDetail/components/tabs/DocumentsTab.tsx
new file mode 100644
index 0000000..f322f2b
--- /dev/null
+++ b/src/pages/RequestDetail/components/tabs/DocumentsTab.tsx
@@ -0,0 +1,124 @@
+/**
+ * Documents Tab Component
+ */
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { FileText, MessageSquare, Upload } from 'lucide-react';
+import { DocumentCard } from '@/components/workflow/DocumentUpload';
+
+interface DocumentsTabProps {
+  request: any;
+  workNoteAttachments: any[];
+  uploadingDocument: boolean;
+  documentPolicy: any;
+  triggerFileInput: () => void;
+  setPreviewDocument: (doc: any) => void;
+  downloadDocument: (documentId: string) => Promise<void>;
+}
+
+export function DocumentsTab({
+  request,
+  workNoteAttachments,
+  uploadingDocument,
+  documentPolicy,
+  triggerFileInput,
+  setPreviewDocument,
+  downloadDocument,
+}: DocumentsTabProps) {
+  return (
+    <div className="space-y-4 sm:space-y-6">
+      {/* Request Documents */}
+      <Card>
+        <CardHeader>
+          <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 sm:gap-4">
+            <div>
+              <CardTitle className="flex items-center gap-2 text-sm sm:text-base">
+                <FileText className="w-4 h-4 sm:w-5 sm:h-5 text-blue-600" />
+                Request Documents
+              </CardTitle>
+              <CardDescription className="text-xs sm:text-sm mt-1">
+                Documents attached while creating the request
+              </CardDescription>
+            </div>
+            <div className="flex flex-col items-end gap-1">
+              <Button
+                size="sm"
+                onClick={triggerFileInput}
+                disabled={uploadingDocument || request.status === 'closed'}
+                className="gap-1 sm:gap-2 h-8 sm:h-9 text-xs sm:text-sm shrink-0"
+                data-testid="upload-document-btn"
+              >
+                <Upload className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
+                {uploadingDocument ? 'Uploading...' : request.status === 'closed' ? 'Closed' : 'Upload'}
+                <span className="hidden sm:inline">{request.status === 'closed' ? '' : 'Document'}</span>
+              </Button>
+              <p className="text-xs text-gray-500 whitespace-nowrap">Max {documentPolicy.maxFileSizeMB}MB</p>
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent>
+          {request.documents && request.documents.length > 0 ? (
+            <div className="space-y-3">
+              {request.documents.map((doc: any, index: number) => (
+                <DocumentCard
+                  key={index}
+                  document={doc}
+                  onPreview={(previewDoc) => setPreviewDocument(previewDoc)}
+                  onDownload={downloadDocument}
+                  testId="request-document"
+                />
+              ))}
+            </div>
+          ) : (
+            <p className="text-sm text-gray-500 text-center py-8" data-testid="no-documents">
+              No documents uploaded yet
+            </p>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Work Note Attachments */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2 text-sm sm:text-base">
+            <MessageSquare className="w-4 h-4 sm:w-5 sm:h-5 text-purple-600" />
+            Work Note Attachments
+          </CardTitle>
+          <CardDescription className="text-xs sm:text-sm">Files shared in work notes discussions</CardDescription>
+        </CardHeader>
+        <CardContent>
+          {workNoteAttachments && workNoteAttachments.length > 0 ? (
+            <div className="space-y-3">
+              {workNoteAttachments.map((file: any, index: number) => (
+                <DocumentCard
+                  key={file.attachmentId || index}
+                  document={{
+                    documentId: file.attachmentId || '',
+                    name: file.name,
+                    fileType: file.type || '',
+                    size: file.size ? `${(file.size / 1024).toFixed(1)} KB` : 'Unknown size',
+                    sizeBytes: file.size,
+                    uploadedBy: file.uploadedBy,
+                    uploadedAt: file.uploadedAt,
+                  }}
+                  onPreview={(previewDoc) => setPreviewDocument(previewDoc)}
+                  onDownload={async (attachmentId) => {
+                    const { downloadWorkNoteAttachment } = require('@/services/workflowApi');
+                    await downloadWorkNoteAttachment(attachmentId);
+                  }}
+                  testId="worknote-attachment"
+                />
+              ))}
+            </div>
+          ) : (
+            <p className="text-sm text-gray-500 text-center py-8" data-testid="no-attachments">
+              No files shared in work notes yet
+            </p>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
diff --git a/src/pages/RequestDetail/components/tabs/OverviewTab.tsx b/src/pages/RequestDetail/components/tabs/OverviewTab.tsx
new file mode 100644
index 0000000..6c10006
--- /dev/null
+++ b/src/pages/RequestDetail/components/tabs/OverviewTab.tsx
@@ -0,0 +1,313 @@
+/**
+ * Overview Tab Component
+ */
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Textarea } from '@/components/ui/textarea';
+import { Avatar, AvatarFallback } from '@/components/ui/avatar';
+import { User, FileText, Mail, Phone, CheckCircle, RefreshCw, Loader2 } from 'lucide-react';
+import { formatDateTime, formatDateShort } from '@/utils/dateFormatter';
+
+interface OverviewTabProps {
+  request: any;
+  isInitiator: boolean;
+  needsClosure: boolean;
+  conclusionRemark: string;
+  setConclusionRemark: (value: string) => void;
+  conclusionLoading: boolean;
+  conclusionSubmitting: boolean;
+  aiGenerated: boolean;
+  handleGenerateConclusion: () => void;
+  handleFinalizeConclusion: () => void;
+}
+
+export function OverviewTab({
+  request,
+  isInitiator,
+  needsClosure,
+  conclusionRemark,
+  setConclusionRemark,
+  conclusionLoading,
+  conclusionSubmitting,
+  aiGenerated,
+  handleGenerateConclusion,
+  handleFinalizeConclusion,
+}: OverviewTabProps) {
+  return (
+    <div className="space-y-4 sm:space-y-6" data-testid="overview-tab-content">
+      {/* Request Initiator Card */}
+      <Card data-testid="initiator-card">
+        <CardHeader className="pb-3 sm:pb-4">
+          <CardTitle className="flex items-center gap-2 text-sm sm:text-base">
+            <User className="w-4 h-4 sm:w-5 sm:h-5 text-blue-600" />
+            Request Initiator
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="flex items-start gap-3 sm:gap-4">
+            <Avatar className="h-10 w-10 sm:h-12 sm:w-12 ring-2 ring-white shadow-sm flex-shrink-0">
+              <AvatarFallback className="bg-gray-700 text-white font-semibold text-sm">
+                {request.initiator?.avatar || 'U'}
+              </AvatarFallback>
+            </Avatar>
+            <div className="flex-1 min-w-0">
+              <h3 className="font-semibold text-gray-900 text-sm sm:text-base truncate">
+                {request.initiator?.name || 'N/A'}
+              </h3>
+              <p className="text-xs sm:text-sm text-gray-600 truncate">{request.initiator?.role || 'N/A'}</p>
+              <p className="text-xs sm:text-sm text-gray-500 truncate">{request.initiator?.department || 'N/A'}</p>
+
+              <div className="mt-2 sm:mt-3 space-y-1.5 sm:space-y-2">
+                <div className="flex items-center gap-2 text-xs sm:text-sm text-gray-600 min-w-0">
+                  <Mail className="w-3.5 h-3.5 sm:w-4 sm:h-4 flex-shrink-0" />
+                  <span className="truncate">{request.initiator?.email || 'N/A'}</span>
+                </div>
+                <div className="flex items-center gap-2 text-xs sm:text-sm text-gray-600">
+                  <Phone className="w-3.5 h-3.5 sm:w-4 sm:h-4 flex-shrink-0" />
+                  <span>{request.initiator?.phone || 'N/A'}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Request Details Card */}
+      <Card data-testid="request-details-card">
+        <CardHeader className="pb-3 sm:pb-4">
+          <CardTitle className="flex items-center gap-2 text-sm sm:text-base">
+            <FileText className="w-4 h-4 sm:w-5 sm:h-5 text-blue-600" />
+            Request Details
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-3 sm:space-y-4">
+          <div>
+            <label className="text-xs sm:text-sm font-medium text-gray-700 block mb-2">Description</label>
+            <div className="bg-gray-50 rounded-lg p-3 sm:p-4 border border-gray-300">
+              <p className="text-xs sm:text-sm text-gray-700 whitespace-pre-line leading-relaxed break-words">
+                {request.description}
+              </p>
+            </div>
+          </div>
+
+          {/* Additional Details: Category, Subcategory */}
+          {(request.category || request.subcategory) && (
+            <div className="grid grid-cols-2 gap-4 pt-4 border-t border-gray-300">
+              {request.category && (
+                <div>
+                  <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">Category</label>
+                  <p className="text-sm text-gray-900 font-medium mt-1">{request.category}</p>
+                </div>
+              )}
+              {request.subcategory && (
+                <div>
+                  <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">Subcategory</label>
+                  <p className="text-sm text-gray-900 font-medium mt-1">{request.subcategory}</p>
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* Amount */}
+          {request.amount && (
+            <div className="pt-4 border-t border-gray-300">
+              <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">Amount</label>
+              <p className="text-lg font-bold text-gray-900 mt-1">{request.amount}</p>
+            </div>
+          )}
+
+          {/* Timestamps */}
+          <div className="grid grid-cols-2 gap-4 pt-4 border-t border-gray-300">
+            <div>
+              <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">Created</label>
+              <p className="text-sm text-gray-900 font-medium mt-1">{formatDateTime(request.createdAt)}</p>
+            </div>
+            <div>
+              <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">Last Updated</label>
+              <p className="text-sm text-gray-900 font-medium mt-1">{formatDateTime(request.updatedAt)}</p>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Claim Management Details */}
+      {request.claimDetails && (
+        <Card>
+          <CardHeader className="pb-4">
+            <CardTitle className="flex items-center gap-2 text-base">
+              <FileText className="w-5 h-5 text-purple-600" />
+              Claim Management Details
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">Activity Name</label>
+                <p className="text-sm text-gray-900 font-medium mt-1">{request.claimDetails.activityName || 'N/A'}</p>
+              </div>
+              <div>
+                <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">Activity Type</label>
+                <p className="text-sm text-gray-900 font-medium mt-1">{request.claimDetails.activityType || 'N/A'}</p>
+              </div>
+              <div>
+                <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">Location</label>
+                <p className="text-sm text-gray-900 font-medium mt-1">{request.claimDetails.location || 'N/A'}</p>
+              </div>
+              <div>
+                <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">Activity Date</label>
+                <p className="text-sm text-gray-900 font-medium mt-1">
+                  {request.claimDetails.activityDate ? formatDateShort(request.claimDetails.activityDate) : 'N/A'}
+                </p>
+              </div>
+              <div>
+                <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">Dealer Code</label>
+                <p className="text-sm text-gray-900 font-medium mt-1">{request.claimDetails.dealerCode || 'N/A'}</p>
+              </div>
+              <div>
+                <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">Dealer Name</label>
+                <p className="text-sm text-gray-900 font-medium mt-1">{request.claimDetails.dealerName || 'N/A'}</p>
+              </div>
+            </div>
+
+            {request.claimDetails.requestDescription && (
+              <div className="pt-4 border-t border-gray-300">
+                <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">Request Description</label>
+                <p className="text-sm text-gray-700 mt-2 bg-gray-50 p-3 rounded-lg whitespace-pre-line">
+                  {request.claimDetails.requestDescription}
+                </p>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Read-Only Conclusion Remark */}
+      {request.status === 'closed' && request.conclusionRemark && (
+        <Card>
+          <CardHeader className="bg-gradient-to-r from-gray-50 to-slate-50 border-b border-gray-200">
+            <CardTitle className="flex items-center gap-2 text-base">
+              <CheckCircle className="w-5 h-5 text-gray-600" />
+              Conclusion Remark
+            </CardTitle>
+            <CardDescription className="mt-1 text-xs sm:text-sm">Final summary of this closed request</CardDescription>
+          </CardHeader>
+          <CardContent className="pt-4">
+            <div className="bg-gray-50 border border-gray-200 rounded-lg p-4">
+              <p className="text-sm text-gray-700 whitespace-pre-line leading-relaxed">{request.conclusionRemark}</p>
+            </div>
+
+            {request.closureDate && (
+              <div className="mt-3 flex items-center justify-between text-xs text-gray-500 border-t border-gray-200 pt-3">
+                <span>Request closed on {formatDateTime(request.closureDate)}</span>
+                <span>By {request.initiator?.name || 'Initiator'}</span>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Conclusion Remark Section */}
+      {needsClosure && (
+        <Card data-testid="conclusion-remark-card">
+          <CardHeader className="bg-gradient-to-r from-green-50 to-emerald-50 border-b border-green-200">
+            <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
+              <div>
+                <CardTitle className="flex items-center gap-2 text-base sm:text-lg">
+                  <CheckCircle className="w-5 h-5 text-green-600" />
+                  Conclusion Remark - Final Step
+                </CardTitle>
+                <CardDescription className="mt-1 text-xs sm:text-sm">
+                  All approvals are complete. Please review and finalize the conclusion to close this request.
+                </CardDescription>
+              </div>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={handleGenerateConclusion}
+                disabled={conclusionLoading}
+                className="gap-2 shrink-0"
+                data-testid="generate-ai-conclusion-button"
+              >
+                <RefreshCw className={`w-3.5 h-3.5 ${conclusionLoading ? 'animate-spin' : ''}`} />
+                {aiGenerated ? 'Regenerate' : 'Generate with AI'}
+              </Button>
+            </div>
+          </CardHeader>
+          <CardContent className="pt-4">
+            {conclusionLoading ? (
+              <div className="flex items-center justify-center py-8" data-testid="conclusion-loading">
+                <div className="text-center">
+                  <Loader2 className="w-8 h-8 text-blue-600 animate-spin mx-auto mb-2" />
+                  <p className="text-sm text-gray-600">Preparing conclusion remark...</p>
+                </div>
+              </div>
+            ) : (
+              <div className="space-y-4">
+                <div>
+                  <div className="flex items-center justify-between mb-2">
+                    <label className="text-sm font-medium text-gray-700">Conclusion Remark</label>
+                    {aiGenerated && (
+                      <span className="text-xs text-blue-600" data-testid="ai-generated-label">
+                        ✓ System-generated suggestion (editable)
+                      </span>
+                    )}
+                  </div>
+
+                  <Textarea
+                    value={conclusionRemark}
+                    onChange={(e) => setConclusionRemark(e.target.value)}
+                    placeholder="Enter a professional conclusion remark summarizing the request outcome, key decisions, and approvals..."
+                    className="text-sm resize-none"
+                    style={{ height: '160px' }}
+                    maxLength={2000}
+                    data-testid="conclusion-remark-textarea"
+                  />
+
+                  <div className="flex items-center justify-between mt-2">
+                    <p className="text-xs text-gray-500">This will be the final summary for this request</p>
+                    <p className="text-xs text-gray-500" data-testid="character-count">
+                      {conclusionRemark.length} / 2000 characters
+                    </p>
+                  </div>
+                </div>
+
+                <div className="bg-blue-50 border border-blue-200 rounded-lg p-3">
+                  <p className="text-xs sm:text-sm font-semibold text-blue-900 mb-1.5">Finalizing this request will:</p>
+                  <ul className="text-xs sm:text-sm text-blue-800 space-y-0.5 pl-4">
+                    <li className="list-disc">Change request status to "CLOSED"</li>
+                    <li className="list-disc">Notify all participants of closure</li>
+                    <li className="list-disc">Move request to Closed Requests</li>
+                    <li className="list-disc">Save conclusion remark permanently</li>
+                  </ul>
+                </div>
+
+                <div className="flex gap-3 justify-end pt-3 border-t">
+                  <Button
+                    onClick={handleFinalizeConclusion}
+                    disabled={conclusionSubmitting || !conclusionRemark.trim()}
+                    className="bg-green-600 hover:bg-green-700 text-white"
+                    data-testid="finalize-close-button"
+                  >
+                    {conclusionSubmitting ? (
+                      <>
+                        <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                        Finalizing...
+                      </>
+                    ) : (
+                      <>
+                        <CheckCircle className="w-4 h-4 mr-2" />
+                        Finalize & Close Request
+                      </>
+                    )}
+                  </Button>
+                </div>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  );
+}
+
diff --git a/src/pages/RequestDetail/components/tabs/WorkNotesTab.tsx b/src/pages/RequestDetail/components/tabs/WorkNotesTab.tsx
new file mode 100644
index 0000000..3efc5ec
--- /dev/null
+++ b/src/pages/RequestDetail/components/tabs/WorkNotesTab.tsx
@@ -0,0 +1,41 @@
+/**
+ * Work Notes Tab Component
+ */
+
+import { WorkNoteChat } from '@/components/workNote/WorkNoteChat/WorkNoteChat';
+
+interface WorkNotesTabProps {
+  requestId: string;
+  requestTitle: string;
+  mergedMessages: any[];
+  setWorkNoteAttachments: (attachments: any[]) => void;
+  isInitiator: boolean;
+  currentLevels: any[];
+  onAddApprover: (email: string, tatHours: number, level: number) => Promise<void>;
+}
+
+export function WorkNotesTab({
+  requestId,
+  requestTitle,
+  mergedMessages,
+  setWorkNoteAttachments,
+  isInitiator,
+  currentLevels,
+  onAddApprover,
+}: WorkNotesTabProps) {
+  return (
+    <div className="h-[calc(100vh-300px)] min-h-[600px]">
+      <WorkNoteChat
+        requestId={requestId}
+        requestTitle={requestTitle}
+        skipSocketJoin={true}
+        messages={mergedMessages}
+        onAttachmentsExtracted={setWorkNoteAttachments}
+        isInitiator={isInitiator}
+        currentLevels={currentLevels}
+        onAddApprover={onAddApprover}
+      />
+    </div>
+  );
+}
+
diff --git a/src/pages/RequestDetail/components/tabs/WorkflowTab.tsx b/src/pages/RequestDetail/components/tabs/WorkflowTab.tsx
new file mode 100644
index 0000000..7d158e9
--- /dev/null
+++ b/src/pages/RequestDetail/components/tabs/WorkflowTab.tsx
@@ -0,0 +1,75 @@
+/**
+ * Workflow Tab Component
+ */
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { TrendingUp } from 'lucide-react';
+import { ApprovalStepCard } from '@/components/workflow/ApprovalWorkflow';
+
+interface WorkflowTabProps {
+  request: any;
+  user: any;
+  isInitiator: boolean;
+  onSkipApprover: (data: any) => void;
+  onRefresh: () => void;
+}
+
+export function WorkflowTab({ request, user, isInitiator, onSkipApprover, onRefresh }: WorkflowTabProps) {
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 sm:gap-4">
+          <div>
+            <CardTitle className="flex items-center gap-2 text-sm sm:text-base">
+              <TrendingUp className="w-4 h-4 sm:w-5 sm:h-5 text-blue-600" />
+              Approval Workflow
+            </CardTitle>
+            <CardDescription className="mt-1 sm:mt-2 text-xs sm:text-sm">
+              Track the approval progress through each step
+            </CardDescription>
+          </div>
+          {request.totalSteps && (() => {
+            const completedCount = request.approvalFlow?.filter((s: any) => s.status === 'approved').length || 0;
+            return (
+              <Badge variant="outline" className="font-medium text-xs sm:text-sm shrink-0">
+                Step {request.currentStep} of {request.totalSteps} - {completedCount} completed
+              </Badge>
+            );
+          })()}
+        </div>
+      </CardHeader>
+      <CardContent>
+        {request.approvalFlow && request.approvalFlow.length > 0 ? (
+          <div className="space-y-4 sm:space-y-6">
+            {request.approvalFlow.map((step: any, index: number) => {
+              const approval = request.approvals?.find((a: any) => a.levelId === step.levelId);
+              const currentUserEmail = (user as any)?.email?.toLowerCase();
+              const approverEmail = step.approverEmail?.toLowerCase();
+              const isCurrentUser = currentUserEmail && approverEmail && currentUserEmail === approverEmail;
+
+              return (
+                <ApprovalStepCard
+                  key={index}
+                  step={step}
+                  index={index}
+                  approval={approval}
+                  isCurrentUser={isCurrentUser}
+                  isInitiator={isInitiator}
+                  onSkipApprover={onSkipApprover}
+                  onRefresh={onRefresh}
+                  testId="workflow-step"
+                />
+              );
+            })}
+          </div>
+        ) : (
+          <p className="text-sm text-gray-500 text-center py-8" data-testid="no-workflow-steps">
+            No workflow steps defined
+          </p>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
diff --git a/src/pages/RequestDetail/types/requestDetail.types.ts b/src/pages/RequestDetail/types/requestDetail.types.ts
new file mode 100644
index 0000000..954345a
--- /dev/null
+++ b/src/pages/RequestDetail/types/requestDetail.types.ts
@@ -0,0 +1,27 @@
+/**
+ * Request Detail TypeScript interfaces
+ */
+
+export interface RequestDetailProps {
+  requestId: string;
+  onBack?: () => void;
+  dynamicRequests?: any[];
+}
+
+export interface RequestDetailHeaderProps {
+  request: any;
+  refreshing: boolean;
+  onBack: () => void;
+  onRefresh: () => void;
+}
+
+export interface TabContentProps {
+  request: any;
+  user: any;
+  isInitiator: boolean;
+  isSpectator: boolean;
+  currentApprovalLevel: any;
+  onRefresh: () => void;
+  [key: string]: any; // For additional props passed to specific tabs
+}
+
diff --git a/src/pages/Requests/Requests.tsx b/src/pages/Requests/Requests.tsx
index 4c1c133..c087d2e 100644
--- a/src/pages/Requests/Requests.tsx
+++ b/src/pages/Requests/Requests.tsx
@@ -1,5 +1,38 @@
+/**
+ * Requests Page - Refactored Version
+ * 
+ * This is a refactored version that uses modular components, hooks, and utilities.
+ * The main file orchestrates all the modules while keeping the complex filter UI inline.
+ */
+
 import { useEffect, useState, useCallback, useMemo, useRef } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { useAuth, hasManagementAccess } from '@/contexts/AuthContext';
+import { Pagination } from '@/components/common/Pagination';
+import type { DateRange } from '@/services/dashboard.service';
+import dashboardService from '@/services/dashboard.service';
+import userApi from '@/services/userApi';
+
+// Components
+import { RequestsHeader } from './components/RequestsHeader';
+import { RequestsStats } from './components/RequestsStats';
+import { RequestsList } from './components/RequestsList';
+
+// Hooks
+import { useRequestsFilters } from './hooks/useRequestsFilters';
+import { useUserSearch } from './hooks/useUserSearch';
+
+// Utils
+import { transformRequests } from './utils/requestTransformers';
+import { calculateStatsFromFilteredData } from './utils/requestCalculations';
+import { exportRequestsToCSV } from './utils/csvExports';
+
+// Services
+import { fetchRequestsData, fetchAllRequestsForExport } from './services/requestsService';
+
+// Types
+import type { RequestsProps, BackendStats } from './types/requests.types';
+
+// Filter UI components (to be extracted later)
 import { Card, CardContent } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
 import { Badge } from '@/components/ui/badge';
@@ -8,188 +41,50 @@ import { Button } from '@/components/ui/button';
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 import { Label } from '@/components/ui/label';
 import { Separator } from '@/components/ui/separator';
-import { X } from 'lucide-react';
-import { 
-  FileText, 
-  Search, 
-  Clock, 
-  CheckCircle, 
-  XCircle,
-  User,
-  ArrowRight,
-  TrendingUp,
-  Edit,
-  Flame,
-  Target,
-  AlertCircle,
-  Filter,
-  Calendar as CalendarIcon,
-  RefreshCw,
-  Archive,
-  Download
-} from 'lucide-react';
-import { motion } from 'framer-motion';
+import { X, Search, Filter, RefreshCw, Calendar as CalendarIcon } from 'lucide-react';
 import { format } from 'date-fns';
-import dayjs from 'dayjs';
-import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
-import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
-
-dayjs.extend(isSameOrAfter);
-dayjs.extend(isSameOrBefore);
-import workflowApi from '@/services/workflowApi';
-import { PageHeader } from '@/components/common/PageHeader';
-import { StatsCard } from '@/components/dashboard/StatsCard';
-import { Pagination } from '@/components/common/Pagination';
-import type { DateRange } from '@/services/dashboard.service';
-import dashboardService from '@/services/dashboard.service';
-import { useAuth, hasManagementAccess } from '@/contexts/AuthContext';
-import userApi from '@/services/userApi';
-
-interface RequestsProps {
-  onViewRequest: (requestId: string, requestTitle?: string, status?: string) => void;
-}
-
-const getPriorityConfig = (priority: string) => {
-  switch (priority) {
-    case 'express':
-      return {
-        color: 'bg-red-100 text-red-800 border-red-200',
-        icon: Flame,
-        iconColor: 'text-red-600'
-      };
-    case 'standard':
-      return {
-        color: 'bg-blue-100 text-blue-800 border-blue-200',
-        icon: Target,
-        iconColor: 'text-blue-600'
-      };
-    default:
-      return {
-        color: 'bg-gray-100 text-gray-800 border-gray-200',
-        icon: Target,
-        iconColor: 'text-gray-600'
-      };
-  }
-};
-
-const getStatusConfig = (status: string) => {
-  switch (status) {
-    case 'approved':
-      return {
-        color: 'bg-green-100 text-green-800 border-green-200',
-        icon: CheckCircle,
-        iconColor: 'text-green-600'
-      };
-    case 'rejected':
-      return {
-        color: 'bg-red-100 text-red-800 border-red-200',
-        icon: XCircle,
-        iconColor: 'text-red-600'
-      };
-    case 'pending':
-      return {
-        color: 'bg-yellow-100 text-yellow-800 border-yellow-200',
-        icon: Clock,
-        iconColor: 'text-yellow-600'
-      };
-    case 'closed':
-      return {
-        color: 'bg-gray-100 text-gray-800 border-gray-200',
-        icon: CheckCircle,
-        iconColor: 'text-gray-600'
-      };
-    case 'draft':
-      return {
-        color: 'bg-gray-100 text-gray-800 border-gray-200',
-        icon: Edit,
-        iconColor: 'text-gray-600'
-      };
-    default:
-      return {
-        color: 'bg-gray-100 text-gray-800 border-gray-200',
-        icon: AlertCircle,
-        iconColor: 'text-gray-600'
-      };
-  }
-};
 
 export function Requests({ onViewRequest }: RequestsProps) {
   const { user } = useAuth();
-  const [searchParams, setSearchParams] = useSearchParams();
-  
-  // Check if user has management access (ADMIN or MANAGEMENT role)
-  const isOrgLevel = useMemo(() => {
-    const hasAccess = hasManagementAccess(user);
-    return hasAccess;
-  }, [user]);
-  
-  // Initialize filters from URL params
-  const [searchTerm, setSearchTerm] = useState(searchParams.get('search') || '');
-  const [statusFilter, setStatusFilter] = useState(searchParams.get('status') || 'all');
-  const [priorityFilter, setPriorityFilter] = useState(searchParams.get('priority') || 'all');
-  const [slaComplianceFilter, setSlaComplianceFilter] = useState(searchParams.get('slaCompliance') || 'all');
-  const [departmentFilter, setDepartmentFilter] = useState(searchParams.get('department') || 'all');
-  const [initiatorFilter, setInitiatorFilter] = useState(searchParams.get('initiator') || 'all');
-  const [approverFilter, setApproverFilter] = useState(searchParams.get('approver') || 'all');
-  const [approverFilterType, setApproverFilterType] = useState<'current' | 'any'>(searchParams.get('approverType') === 'any' ? 'any' : 'current');
-  const [dateRange, setDateRange] = useState<DateRange>((searchParams.get('dateRange') as DateRange) || 'month');
-  const [customStartDate, setCustomStartDate] = useState<Date | undefined>(
-    searchParams.get('startDate') ? new Date(searchParams.get('startDate')!) : undefined
-  );
-  const [customEndDate, setCustomEndDate] = useState<Date | undefined>(
-    searchParams.get('endDate') ? new Date(searchParams.get('endDate')!) : undefined
-  );
-  const [showCustomDatePicker, setShowCustomDatePicker] = useState(false);
-  
+  const isOrgLevel = useMemo(() => hasManagementAccess(user), [user]);
+
+  // Filters hook
+  const filters = useRequestsFilters();
+
+  // State
   const [apiRequests, setApiRequests] = useState<any[]>([]);
   const [loading, setLoading] = useState(false);
   const [exporting, setExporting] = useState(false);
-  
-  // Store all filtered data (before pagination) for stats calculation
   const [allFilteredRequests, setAllFilteredRequests] = useState<any[]>([]);
-  
-  // Backend stats for organization-level view
-  const [backendStats, setBackendStats] = useState<{
-    total: number;
-    pending: number;
-    approved: number;
-    rejected: number;
-    draft: number;
-    closed: number;
-  } | null>(null);
+  const [backendStats, setBackendStats] = useState<BackendStats | null>(null);
   const [loadingStats, setLoadingStats] = useState(false);
-  
-  // Departments metadata for filtering
   const [departments, setDepartments] = useState<string[]>([]);
   const [loadingDepartments, setLoadingDepartments] = useState(false);
-  
-  // Users metadata for filtering (initiators and approvers) - search from internal DB only
   const [allUsers, setAllUsers] = useState<Array<{ userId: string; email: string; displayName?: string }>>([]);
-  const [initiatorSearchQuery, setInitiatorSearchQuery] = useState('');
-  const [initiatorSearchResults, setInitiatorSearchResults] = useState<Array<{ userId: string; email: string; displayName?: string }>>([]);
-  const [showInitiatorResults, setShowInitiatorResults] = useState(false);
-  const [selectedInitiator, setSelectedInitiator] = useState<{ userId: string; email: string; displayName?: string } | null>(null);
-  
-  const [approverSearchQuery, setApproverSearchQuery] = useState('');
-  const [approverSearchResults, setApproverSearchResults] = useState<Array<{ userId: string; email: string; displayName?: string }>>([]);
-  const [showApproverResults, setShowApproverResults] = useState(false);
-  const [selectedApprover, setSelectedApprover] = useState<{ userId: string; email: string; displayName?: string } | null>(null);
-  
-  const initiatorSearchTimer = useRef<NodeJS.Timeout | null>(null);
-  const approverSearchTimer = useRef<NodeJS.Timeout | null>(null);
-  const initiatorInputRef = useRef<HTMLInputElement>(null);
-  const approverInputRef = useRef<HTMLInputElement>(null);
-  
-  // Pagination states
+
+  // Pagination
   const [currentPage, setCurrentPage] = useState(1);
   const [totalPages, setTotalPages] = useState(1);
   const [totalRecords, setTotalRecords] = useState(0);
   const [itemsPerPage] = useState(10);
 
-  // Fetch backend stats for organization-level requests
+  // User search hooks
+  const initiatorSearch = useUserSearch({
+    allUsers,
+    filterValue: filters.initiatorFilter,
+    onFilterChange: filters.setInitiatorFilter
+  });
+
+  const approverSearch = useUserSearch({
+    allUsers,
+    filterValue: filters.approverFilter,
+    onFilterChange: filters.setApproverFilter
+  });
+
+  // Fetch backend stats
   const fetchBackendStats = useCallback(async (statsDateRange?: DateRange, statsStartDate?: Date, statsEndDate?: Date) => {
-    if (!isOrgLevel) return; // Only fetch for organization-level
-    
+    if (!isOrgLevel) return;
+
     try {
       setLoadingStats(true);
       const stats = await dashboardService.getRequestStats(
@@ -197,40 +92,39 @@ export function Requests({ onViewRequest }: RequestsProps) {
         statsStartDate ? statsStartDate.toISOString() : undefined,
         statsEndDate ? statsEndDate.toISOString() : undefined
       );
-      
+
       setBackendStats({
         total: stats.totalRequests || 0,
-        pending: stats.openRequests || 0, // openRequests includes PENDING and IN_PROGRESS
+        pending: stats.openRequests || 0,
         approved: stats.approvedRequests || 0,
         rejected: stats.rejectedRequests || 0,
         draft: stats.draftRequests || 0,
-        closed: 0 // Will be calculated from all fetched data
+        closed: 0
       });
     } catch (error) {
-      // Don't set backendStats to null on error, keep previous stats
+      // Keep previous stats on error
     } finally {
       setLoadingStats(false);
     }
   }, [isOrgLevel]);
 
-  // Fetch departments metadata from backend
+  // Fetch departments
   const fetchDepartments = useCallback(async () => {
     try {
       setLoadingDepartments(true);
       const depts = await dashboardService.getDepartments();
       setDepartments(depts);
     } catch (error) {
-      // Don't show error, just leave departments empty
+      // Leave departments empty on error
     } finally {
       setLoadingDepartments(false);
     }
   }, []);
 
-  // Fetch users metadata from backend for initiator and approver filtering (internal DB only)
+  // Fetch users
   const fetchUsers = useCallback(async () => {
     try {
       const usersData = await userApi.getAllUsers();
-      // Map to format: { userId, email, displayName }
       const usersList = usersData.map((user: any) => ({
         userId: user.userId,
         email: user.email,
@@ -239,1492 +133,170 @@ export function Requests({ onViewRequest }: RequestsProps) {
       setAllUsers(usersList);
     } catch (error) {
       console.error('Failed to fetch users:', error);
-      // Don't show error, just leave users empty
     }
   }, []);
-  
-  // Search initiators from internal DB
-  const handleInitiatorSearch = useCallback((query: string) => {
-    setInitiatorSearchQuery(query);
-    
-    // Clear existing timer
-    if (initiatorSearchTimer.current) {
-      clearTimeout(initiatorSearchTimer.current);
-    }
-    
-    if (!query || query.trim().length < 2) {
-      setInitiatorSearchResults([]);
-      setShowInitiatorResults(false);
-      return;
-    }
-    
-    // Debounce search
-    initiatorSearchTimer.current = setTimeout(() => {
-      const searchLower = query.toLowerCase().trim();
-      const filtered = allUsers.filter((user) => {
-        const email = (user.email || '').toLowerCase();
-        const displayName = (user.displayName || '').toLowerCase();
-        return email.includes(searchLower) || displayName.includes(searchLower);
-      });
-      setInitiatorSearchResults(filtered.slice(0, 10)); // Limit to 10 results
-      setShowInitiatorResults(filtered.length > 0);
-    }, 300);
-  }, [allUsers]);
-  
-  // Search approvers from internal DB
-  const handleApproverSearch = useCallback((query: string) => {
-    setApproverSearchQuery(query);
-    
-    // Clear existing timer
-    if (approverSearchTimer.current) {
-      clearTimeout(approverSearchTimer.current);
-    }
-    
-    if (!query || query.trim().length < 2) {
-      setApproverSearchResults([]);
-      setShowApproverResults(false);
-      return;
-    }
-    
-    // Debounce search
-    approverSearchTimer.current = setTimeout(() => {
-      const searchLower = query.toLowerCase().trim();
-      const filtered = allUsers.filter((user) => {
-        const email = (user.email || '').toLowerCase();
-        const displayName = (user.displayName || '').toLowerCase();
-        return email.includes(searchLower) || displayName.includes(searchLower);
-      });
-      setApproverSearchResults(filtered.slice(0, 10)); // Limit to 10 results
-      setShowApproverResults(filtered.length > 0);
-    }, 300);
-  }, [allUsers]);
-  
-  // Select initiator from search results
-  const handleSelectInitiator = useCallback((user: { userId: string; email: string; displayName?: string }) => {
-    setSelectedInitiator(user);
-    setInitiatorFilter(user.userId);
-    setInitiatorSearchQuery(user.displayName || user.email);
-    setShowInitiatorResults(false);
-    setInitiatorSearchResults([]);
-  }, []);
-  
-  // Select approver from search results
-  const handleSelectApprover = useCallback((user: { userId: string; email: string; displayName?: string }) => {
-    setSelectedApprover(user);
-    setApproverFilter(user.userId);
-    setApproverSearchQuery(user.displayName || user.email);
-    setShowApproverResults(false);
-    setApproverSearchResults([]);
-  }, []);
-  
-  // Clear initiator filter
-  const handleClearInitiator = useCallback(() => {
-    setSelectedInitiator(null);
-    setInitiatorFilter('all');
-    setInitiatorSearchQuery('');
-    setShowInitiatorResults(false);
-    setInitiatorSearchResults([]);
-  }, []);
-  
-  // Clear approver filter
-  const handleClearApprover = useCallback(() => {
-    setSelectedApprover(null);
-    setApproverFilter('all');
-    setApproverSearchQuery('');
-    setShowApproverResults(false);
-    setApproverSearchResults([]);
-  }, []);
-  
-  // Initialize selected users from URL params
-  useEffect(() => {
-    if (initiatorFilter !== 'all' && allUsers.length > 0) {
-      const user = allUsers.find(u => u.userId === initiatorFilter);
-      if (user) {
-        setSelectedInitiator(user);
-        setInitiatorSearchQuery(user.displayName || user.email);
-      }
-    }
-  }, [initiatorFilter, allUsers]);
-  
-  useEffect(() => {
-    if (approverFilter !== 'all' && allUsers.length > 0) {
-      const user = allUsers.find(u => u.userId === approverFilter);
-      if (user) {
-        setSelectedApprover(user);
-        setApproverSearchQuery(user.displayName || user.email);
-      }
-    }
-  }, [approverFilter, allUsers]);
-  
-  // Cleanup timers
-  useEffect(() => {
-    return () => {
-      if (initiatorSearchTimer.current) {
-        clearTimeout(initiatorSearchTimer.current);
-      }
-      if (approverSearchTimer.current) {
-        clearTimeout(approverSearchTimer.current);
-      }
-    };
-  }, []);
 
-  // Fetch requests with filters - organization level for admins/managers, user level for regular users
-  const fetchRequests = useCallback(async (page: number = 1, filters?: { 
-    search?: string; 
-    status?: string; 
-    priority?: string;
-    slaCompliance?: string;
-    department?: string;
-    initiator?: string;
-    approver?: string;
-    approverType?: 'current' | 'any';
-    dateRange?: DateRange;
-    startDate?: Date;
-    endDate?: Date;
-  }) => {
+  // 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;
+    fetchBackendStatsRef.current = fetchBackendStats;
+  }, [filters, fetchBackendStats]);
+
+  // Fetch requests
+  const fetchRequests = useCallback(async (page: number = 1) => {
     try {
       if (page === 1) {
         setLoading(true);
         setApiRequests([]);
-        setAllFilteredRequests([]); // Clear filtered data when starting new fetch
+        setAllFilteredRequests([]);
       }
-      
-      // Use organization-level endpoint for admins/managers, user-level for regular users
-      // Double-check isOrgLevel here to ensure it's current
-      const currentIsOrgLevel = hasManagementAccess(user);
-      let result;
-      if (currentIsOrgLevel) {
-        // Organization-level: Get all workflows (note: backend doesn't support filters yet for this endpoint)
-        // For now, we'll fetch all and filter client-side, but ideally backend should support filters
-        // IMPORTANT: For pending requests, we need to fetch ALL pages since Dashboard shows ALL pending regardless of date
-        // For other statuses, pagination works normally
-        
-        // For organization-level requests, ALWAYS fetch all pages:
-        // Since backend /workflows endpoint doesn't support filters, we must fetch all and filter client-side
-        // This ensures filters work on ALL organization-level data, not just the first page
-        // This matches Dashboard behavior which shows organization-wide data
-        let workflowsData: any[] = [];
-        
-        // ALWAYS fetch all pages for organization-level requests (since we need all data to filter properly)
-        const allPages: any[] = [];
-        let currentPageNum = 1;
-        let hasMore = true;
-        const maxPages = 50; // Safety limit to prevent infinite loops
-        
-        while (hasMore && currentPageNum <= maxPages) {
-          const pageResult = await workflowApi.listWorkflows({ 
-            page: currentPageNum, 
-            limit: 100 // Larger page size for efficiency
-          });
-          
-          let pageData: any[] = [];
-          if (Array.isArray(pageResult?.data)) {
-            pageData = pageResult.data;
-          } else if (Array.isArray(pageResult)) {
-            pageData = pageResult;
-          }
-          
-          if (pageData.length > 0) {
-            allPages.push(...pageData);
-            currentPageNum++;
-            
-            // Check if there are more pages
-            if (pageResult?.pagination) {
-              hasMore = currentPageNum <= pageResult.pagination.totalPages;
-            } else {
-              hasMore = pageData.length === 100; // Assume more pages if we got a full page
-            }
-          } else {
-            hasMore = false;
-          }
-        }
-        
-        workflowsData = allPages;
-        
-        // Calculate closed count from all fetched data (backend stats doesn't include closed)
-        const closedCount = workflowsData.filter((req: any) => {
+
+      const filterOptions = filtersRef.current.getFilters();
+      const result = await fetchRequestsData({
+        page,
+        itemsPerPage,
+        filters: filterOptions,
+        isOrgLevel
+      });
+
+      setApiRequests(result.data);
+      setAllFilteredRequests(result.filteredData);
+
+      // Update pagination
+      setCurrentPage(result.pagination.page);
+      setTotalPages(result.pagination.totalPages);
+      setTotalRecords(result.pagination.total);
+
+      // Fetch backend stats for org-level
+      if (isOrgLevel) {
+        const closedCount = result.allData.filter((req: any) => {
           const reqStatus = (req.status || '').toString().toUpperCase();
           return reqStatus === 'CLOSED';
         }).length;
-        
-        // Fetch backend stats for accurate counts (will update closed count after)
-        fetchBackendStats(filters?.dateRange, filters?.startDate, filters?.endDate).then(() => {
-          // After fetching backend stats, update closed count from all fetched data
+
+        fetchBackendStatsRef.current(filterOptions.dateRange, filterOptions.startDate, filterOptions.endDate).then(() => {
           setBackendStats(prev => prev ? { ...prev, closed: closedCount } : null);
-        }).catch(() => {
-          // Error fetching backend stats - closed count will be calculated from filtered data
         });
-        
-        // Client-side filtering for org-level (until backend supports filters)
-        let filteredData = workflowsData;
-        
-        if (filters?.search) {
-          const searchLower = filters.search.toLowerCase();
-          filteredData = filteredData.filter((req: any) => 
-            req.title?.toLowerCase().includes(searchLower) ||
-            req.description?.toLowerCase().includes(searchLower) ||
-            req.requestNumber?.toLowerCase().includes(searchLower) ||
-            req.request_number?.toLowerCase().includes(searchLower)
-          );
-        }
-        
-        if (filters?.status && filters.status !== 'all') {
-          // Handle status filtering - "pending" includes both PENDING and IN_PROGRESS
-          if (filters.status.toLowerCase() === 'pending') {
-            // Dashboard counts "openRequests" as both PENDING and IN_PROGRESS
-            filteredData = filteredData.filter((req: any) => {
-              const reqStatus = (req.status || '').toString().toUpperCase();
-              return reqStatus === 'PENDING' || reqStatus === 'IN_PROGRESS';
-            });
-          } else {
-            // For other statuses, do exact match (handling both uppercase DB and lowercase UI formats)
-            const statusUpper = filters.status.toUpperCase().replace('-', '_');
-            filteredData = filteredData.filter((req: any) => {
-              const reqStatus = (req.status || '').toString().toUpperCase();
-              // Map UI status names to DB status names
-              if (statusUpper === 'IN_PROGRESS' || statusUpper === 'IN-PROGRESS') {
-                return reqStatus === 'IN_PROGRESS';
-              }
-              // Handle status mapping: UI uses lowercase with hyphens, DB uses uppercase with underscores
-              // Example: "closed" -> "CLOSED", "approved" -> "APPROVED"
-              return reqStatus === statusUpper;
-            });
-          }
-        }
-        
-        if (filters?.priority && filters.priority !== 'all') {
-          filteredData = filteredData.filter((req: any) => 
-            (req.priority || '').toString().toLowerCase() === filters.priority?.toLowerCase()
-          );
-        }
-        
-        // Apply department filtering
-        if (filters?.department && filters.department !== 'all') {
-          filteredData = filteredData.filter((req: any) => {
-            const reqDepartment = req.department || req.initiator?.department || '';
-            return reqDepartment === filters.department;
-          });
-        }
-        
-        // Apply initiator filtering
-        if (filters?.initiator && filters.initiator !== 'all') {
-          filteredData = filteredData.filter((req: any) => {
-            // Check multiple possible locations for initiator ID
-            const initiatorId = req.initiatorId || 
-                               req.initiator_id || 
-                               req.initiator?.userId || 
-                               req.initiator?.user_id ||
-                               (req.initiator && typeof req.initiator === 'object' && 'userId' in req.initiator ? req.initiator.userId : null);
-            return initiatorId === filters.initiator;
-          });
-        }
-        
-        // Apply approver filtering (current or any)
-        if (filters?.approver && filters.approver !== 'all') {
-          const approverType = filters.approverType || 'current';
-          
-          if (approverType === 'current') {
-            // Filter by current approver only
-            filteredData = filteredData.filter((req: any) => {
-              // Check multiple possible locations for current approver
-              // Priority: currentApprover.userId > approvals array (pending/in-progress) > direct approverId fields
-              const approverId = req.currentApprover?.userId || 
-                                req.currentApprover?.user_id ||
-                                req.approvals?.find((a: any) => {
-                                  const status = (a.status || '').toString().toUpperCase();
-                                  return status === 'IN_PROGRESS' || status === 'PENDING';
-                                })?.approverId ||
-                                req.approvals?.find((a: any) => {
-                                  const status = (a.status || '').toString().toUpperCase();
-                                  return status === 'IN_PROGRESS' || status === 'PENDING';
-                                })?.approver_id ||
-                                req.currentApproverId ||
-                                req.current_approver_id;
-              return approverId === filters.approver;
-            });
-          } else {
-            // Filter by any approver (current or past)
-            filteredData = filteredData.filter((req: any) => {
-              // Check if the user is an approver at any level (current or past)
-              const allApproverIds: string[] = [];
-              
-              // Add current approver
-              if (req.currentApprover?.userId) allApproverIds.push(req.currentApprover.userId);
-              if (req.currentApprover?.user_id) allApproverIds.push(req.currentApprover.user_id);
-              
-              // Add all approvers from approvals array
-              if (Array.isArray(req.approvals)) {
-                req.approvals.forEach((a: any) => {
-                  if (a.approverId) allApproverIds.push(a.approverId);
-                  if (a.approver_id) allApproverIds.push(a.approver_id);
-                });
-              }
-              
-              // Check if the filter approver ID is in the list
-              return allApproverIds.includes(filters.approver || '');
-            });
-          }
-        }
-        
-        // Apply SLA compliance filtering
-        if (filters?.slaCompliance && filters.slaCompliance !== 'all') {
-          filteredData = filteredData.filter((req: any) => {
-            const slaCompliance = filters.slaCompliance || '';
-            // Special handling for "Compliant" filter - show completed requests that did NOT breach TAT
-            if (slaCompliance.toLowerCase() === 'compliant') {
-              // Compliant = completed requests (APPROVED, REJECTED, CLOSED) that are NOT breached
-              const reqStatus = (req.status || '').toString().toUpperCase();
-              const isCompleted = reqStatus === 'APPROVED' || reqStatus === 'REJECTED' || reqStatus === 'CLOSED';
-              
-              if (!isCompleted) {
-                // Only show completed requests for "compliant" filter
-                return false;
-              }
-              
-              // Check SLA status from multiple possible locations
-              const slaStatus = req.currentLevelSLA?.status || 
-                               req.currentApprover?.sla?.status ||
-                               req.sla?.status ||
-                               req.summary?.sla?.status;
-              
-              // Compliant = NOT breached (status is not 'breached')
-              // If no SLA data, assume compliant (completed within TAT if no breach data)
-              if (!slaStatus) {
-                return true; // No SLA data but completed - assume compliant
-              }
-              
-              // Compliant means status is NOT 'breached'
-              return slaStatus !== 'breached' && slaStatus.toLowerCase() !== 'breached';
-            }
-            
-            // Check SLA status from multiple possible locations
-            // Priority: currentLevelSLA > currentApprover.sla > sla > summary.sla
-            const slaStatus = req.currentLevelSLA?.status || 
-                             req.currentApprover?.sla?.status ||
-                             req.sla?.status ||
-                             req.summary?.sla?.status;
-            
-            if (!slaStatus) {
-              // If no SLA data, exclude from filtered results unless filtering for "on_track" (default)
-              return slaCompliance === 'on-track' || slaCompliance === 'on_track';
-            }
-            
-            // Map filter values to SLA status values
-            const statusMap: Record<string, string> = {
-              'on-track': 'on_track',
-              'on_track': 'on_track',
-              'approaching': 'approaching',
-              'critical': 'critical',
-              'breached': 'breached'
-            };
-            
-            const filterStatus = statusMap[slaCompliance.toLowerCase()] || slaCompliance.toLowerCase();
-            const matches = slaStatus === filterStatus || slaStatus.toLowerCase() === filterStatus;
-            
-            return matches;
-          });
-          
-        }
-        
-        // Apply date range filtering
-        if (filters?.dateRange) {
-          let dateStart: Date | null = null;
-          let dateEnd: Date | null = null;
-          
-          if (filters.dateRange === 'custom' && filters.startDate && filters.endDate) {
-            dateStart = dayjs(filters.startDate).startOf('day').toDate();
-            dateEnd = dayjs(filters.endDate).endOf('day').toDate();
-          } else {
-            const now = dayjs();
-            switch (filters.dateRange) {
-              case 'today':
-                dateStart = now.startOf('day').toDate();
-                dateEnd = now.endOf('day').toDate();
-                break;
-              case 'week':
-                dateStart = now.startOf('week').toDate();
-                dateEnd = now.endOf('week').toDate();
-                break;
-              case 'month':
-                dateStart = now.startOf('month').toDate();
-                dateEnd = now.endOf('month').toDate();
-                break;
-              default:
-                // No date filtering for default
-                break;
-            }
-          }
-          
-          if (dateStart && dateEnd) {
-            filteredData = filteredData.filter((req: any) => {
-              // Use submittedAt (from submissionDate) as primary field, matching Dashboard logic
-              // Dashboard uses submission_date for date filtering
-              const submissionDate = req.submittedAt || req.submission_date || req.submitted_at;
-              
-              if (!submissionDate) {
-                // If no submission date, fall back to createdAt for filtering
-                const createdDate = req.createdAt || req.created_at || req.created_date;
-                if (!createdDate) return false;
-                const reqDate = dayjs(createdDate).startOf('day').toDate();
-                // Compare dates only (ignore time) for accurate filtering
-                const dateStartOnly = dayjs(dateStart).startOf('day').toDate();
-                const dateEndOnly = dayjs(dateEnd).endOf('day').toDate();
-                return reqDate >= dateStartOnly && reqDate <= dateEndOnly;
-              }
-              
-              // Parse submission date and compare only dates (ignore time)
-              const reqDate = dayjs(submissionDate).startOf('day').toDate();
-              const dateStartOnly = dayjs(dateStart).startOf('day').toDate();
-              const dateEndOnly = dayjs(dateEnd).endOf('day').toDate();
-              
-              const isInRange = reqDate >= dateStartOnly && reqDate <= dateEndOnly;
-              
-              // Apply date filter based on submission_date (matching Dashboard behavior)
-              return isInRange;
-            });
-          }
-        }
-        
-        // Store filtered data (before pagination) for stats calculation
-        setAllFilteredRequests(filteredData);
-        
-        // Apply pagination to filtered results
-        const startIndex = (page - 1) * itemsPerPage;
-        const endIndex = startIndex + itemsPerPage;
-        const paginatedData = filteredData.slice(startIndex, endIndex);
-        
-        result = {
-          data: paginatedData,
-          pagination: {
-            page,
-            limit: itemsPerPage,
-            total: filteredData.length,
-            totalPages: Math.ceil(filteredData.length / itemsPerPage) || 1
-          }
-        };
-      } else {
-        // User-level: Get user's workflows with backend filtering
-        // Note: Backend doesn't support date filtering, so we'll fetch more and filter client-side
-        let userWorkflowsData: any[] = [];
-        
-        // If date range is specified, fetch all pages to filter properly
-        const needsAllDataForDateFilter = filters?.dateRange && filters.dateRange !== 'month';
-        
-        if (needsAllDataForDateFilter || filters?.dateRange === 'custom') {
-          // Fetch multiple pages for date filtering
-          const allPages: any[] = [];
-          let currentPageNum = 1;
-          let hasMore = true;
-          const maxPages = 50;
-          
-          while (hasMore && currentPageNum <= maxPages) {
-            const pageResult = await workflowApi.listMyWorkflows({ 
-              page: currentPageNum, 
-              limit: 100,
-              search: filters?.search,
-              status: filters?.status !== 'all' ? filters?.status : undefined,
-              priority: filters?.priority !== 'all' ? filters?.priority : undefined
-            });
-            
-            const pageData = Array.isArray((pageResult as any)?.data) 
-              ? (pageResult as any).data 
-              : [];
-            
-            if (pageData.length > 0) {
-              allPages.push(...pageData);
-              currentPageNum++;
-              
-              if (pageResult?.pagination) {
-                hasMore = currentPageNum <= pageResult.pagination.totalPages;
-              } else {
-                hasMore = pageData.length === 100;
-              }
-            } else {
-              hasMore = false;
-            }
-          }
-          
-          userWorkflowsData = allPages;
-        } else {
-          // Normal pagination
-          const userResult = await workflowApi.listMyWorkflows({ 
-            page, 
-            limit: itemsPerPage,
-            search: filters?.search,
-            status: filters?.status !== 'all' ? filters?.status : undefined,
-            priority: filters?.priority !== 'all' ? filters?.priority : undefined
-          });
-          
-          userWorkflowsData = Array.isArray((userResult as any)?.data) 
-            ? (userResult as any).data 
-            : [];
-        }
-        
-        // Apply client-side filtering for user-level requests
-        let filteredUserData = userWorkflowsData;
-        
-        // Apply department filtering for user-level requests
-        if (filters?.department && filters.department !== 'all') {
-          filteredUserData = filteredUserData.filter((req: any) => {
-            const reqDepartment = req.department || req.initiator?.department || '';
-            return reqDepartment === filters.department;
-          });
-        }
-        
-        // Apply initiator filtering for user-level requests
-        if (filters?.initiator && filters.initiator !== 'all') {
-          filteredUserData = filteredUserData.filter((req: any) => {
-            // Check multiple possible locations for initiator ID
-            const initiatorId = req.initiatorId || 
-                               req.initiator_id || 
-                               req.initiator?.userId || 
-                               req.initiator?.user_id ||
-                               (req.initiator && typeof req.initiator === 'object' && 'userId' in req.initiator ? req.initiator.userId : null);
-            return initiatorId === filters.initiator;
-          });
-        }
-        
-        // Apply approver filtering for user-level requests (current or any)
-        if (filters?.approver && filters.approver !== 'all') {
-          const approverType = filters.approverType || 'current';
-          
-          if (approverType === 'current') {
-            // Filter by current approver only
-            filteredUserData = filteredUserData.filter((req: any) => {
-              // Check multiple possible locations for current approver
-              // Priority: currentApprover.userId > approvals array (pending/in-progress) > direct approverId fields
-              const approverId = req.currentApprover?.userId || 
-                                req.currentApprover?.user_id ||
-                                req.approvals?.find((a: any) => {
-                                  const status = (a.status || '').toString().toUpperCase();
-                                  return status === 'IN_PROGRESS' || status === 'PENDING';
-                                })?.approverId ||
-                                req.approvals?.find((a: any) => {
-                                  const status = (a.status || '').toString().toUpperCase();
-                                  return status === 'IN_PROGRESS' || status === 'PENDING';
-                                })?.approver_id ||
-                                req.currentApproverId ||
-                                req.current_approver_id;
-              return approverId === filters.approver;
-            });
-          } else {
-            // Filter by any approver (current or past)
-            filteredUserData = filteredUserData.filter((req: any) => {
-              // Check if the user is an approver at any level (current or past)
-              const allApproverIds: string[] = [];
-              
-              // Add current approver
-              if (req.currentApprover?.userId) allApproverIds.push(req.currentApprover.userId);
-              if (req.currentApprover?.user_id) allApproverIds.push(req.currentApprover.user_id);
-              
-              // Add all approvers from approvals array
-              if (Array.isArray(req.approvals)) {
-                req.approvals.forEach((a: any) => {
-                  if (a.approverId) allApproverIds.push(a.approverId);
-                  if (a.approver_id) allApproverIds.push(a.approver_id);
-                });
-              }
-              
-              // Check if the filter approver ID is in the list
-              return allApproverIds.includes(filters.approver || '');
-            });
-          }
-        }
-        
-        // Apply SLA compliance filtering for user-level requests
-        if (filters?.slaCompliance && filters.slaCompliance !== 'all') {
-          filteredUserData = filteredUserData.filter((req: any) => {
-            const slaCompliance = filters.slaCompliance || '';
-            // Special handling for "Compliant" filter - show completed requests that did NOT breach TAT
-            if (slaCompliance.toLowerCase() === 'compliant') {
-              // Compliant = completed requests (APPROVED, REJECTED, CLOSED) that are NOT breached
-              const reqStatus = (req.status || '').toString().toUpperCase();
-              const isCompleted = reqStatus === 'APPROVED' || reqStatus === 'REJECTED' || reqStatus === 'CLOSED';
-              
-              if (!isCompleted) {
-                // Only show completed requests for "compliant" filter
-                return false;
-              }
-              
-              // Check SLA status from multiple possible locations
-              const slaStatus = req.currentLevelSLA?.status || 
-                               req.currentApprover?.sla?.status ||
-                               req.sla?.status ||
-                               req.summary?.sla?.status;
-              
-              // Compliant = NOT breached (status is not 'breached')
-              // If no SLA data, assume compliant (completed within TAT if no breach data)
-              if (!slaStatus) {
-                return true; // No SLA data but completed - assume compliant
-              }
-              
-              // Compliant means status is NOT 'breached'
-              return slaStatus !== 'breached' && slaStatus.toLowerCase() !== 'breached';
-            }
-            
-            // Check SLA status from multiple possible locations
-            const slaStatus = req.currentLevelSLA?.status || 
-                             req.currentApprover?.sla?.status ||
-                             req.sla?.status ||
-                             req.summary?.sla?.status;
-            
-            if (!slaStatus) {
-              return slaCompliance === 'on_track';
-            }
-            
-            const statusMap: Record<string, string> = {
-              'on-track': 'on_track',
-              'on_track': 'on_track',
-              'approaching': 'approaching',
-              'critical': 'critical',
-              'breached': 'breached'
-            };
-            
-            const filterStatus = statusMap[slaCompliance.toLowerCase()] || slaCompliance.toLowerCase();
-            return slaStatus === filterStatus || slaStatus.toLowerCase() === filterStatus;
-          });
-        }
-        
-        // Apply date filtering for user-level requests
-        if (filters?.dateRange) {
-          let dateStart: Date | null = null;
-          let dateEnd: Date | null = null;
-          
-          if (filters.dateRange === 'custom' && filters.startDate && filters.endDate) {
-            dateStart = dayjs(filters.startDate).startOf('day').toDate();
-            dateEnd = dayjs(filters.endDate).endOf('day').toDate();
-          } else {
-            const now = dayjs();
-            switch (filters.dateRange) {
-              case 'today':
-                dateStart = now.startOf('day').toDate();
-                dateEnd = now.endOf('day').toDate();
-                break;
-              case 'week':
-                dateStart = now.startOf('week').toDate();
-                dateEnd = now.endOf('week').toDate();
-                break;
-              case 'month':
-                dateStart = now.startOf('month').toDate();
-                dateEnd = now.endOf('month').toDate();
-                break;
-              default:
-                break;
-            }
-          }
-          
-          if (dateStart && dateEnd) {
-            // Normalize date range to start/end of day for comparison
-            const rangeStart = dayjs(dateStart).startOf('day');
-            const rangeEnd = dayjs(dateEnd).endOf('day');
-            
-            filteredUserData = filteredUserData.filter((req: any) => {
-              // Use submittedAt (from submissionDate) as primary field, matching Dashboard logic
-              const submissionDate = req.submittedAt || req.submission_date || req.submitted_at;
-              
-              if (!submissionDate) {
-                // If no submission date, fall back to createdAt for filtering
-                const createdDate = req.createdAt || req.created_at || req.created_date;
-                if (!createdDate) return false;
-                // Compare dates using dayjs for accurate timezone handling
-                const reqDate = dayjs(createdDate);
-                return reqDate.isSameOrAfter(rangeStart, 'day') && reqDate.isSameOrBefore(rangeEnd, 'day');
-              }
-              
-              // Parse submission date and compare using dayjs (handles timezones correctly)
-              const reqDate = dayjs(submissionDate);
-              const isInRange = reqDate.isSameOrAfter(rangeStart, 'day') && reqDate.isSameOrBefore(rangeEnd, 'day');
-              
-              // Apply date filter based on submission_date (matching Dashboard behavior)
-              return isInRange;
-            });
-          }
-        }
-        
-        // Store filtered data (before pagination) for stats calculation
-        setAllFilteredRequests(filteredUserData);
-        
-        // Apply pagination to filtered results
-        const startIndex = (page - 1) * itemsPerPage;
-        const endIndex = startIndex + itemsPerPage;
-        const paginatedUserData = filteredUserData.slice(startIndex, endIndex);
-        
-        result = {
-          data: paginatedUserData,
-          pagination: {
-            page,
-            limit: itemsPerPage,
-            total: filteredUserData.length,
-            totalPages: Math.ceil(filteredUserData.length / itemsPerPage) || 1
-          }
-        };
-      }
-      
-      const items = Array.isArray((result as any)?.data) 
-        ? (result as any).data 
-        : [];
-      
-      setApiRequests(items);
-      
-      // Set pagination data
-      const pagination = (result as any)?.pagination;
-      if (pagination) {
-        setCurrentPage(pagination.page || 1);
-        setTotalPages(pagination.totalPages || 1);
-        setTotalRecords(pagination.total || 0);
       }
     } catch (error) {
       setApiRequests([]);
     } finally {
       setLoading(false);
     }
-  }, [itemsPerPage, isOrgLevel, user, fetchBackendStats]);
+  }, [itemsPerPage, isOrgLevel]);
 
-  // Fetch departments and users on mount
-  useEffect(() => {
-    fetchDepartments();
-    fetchUsers();
-  }, [fetchDepartments, fetchUsers]);
-
-  // Update URL params when filters change
-  useEffect(() => {
-    const params = new URLSearchParams();
-    if (searchTerm) params.set('search', searchTerm);
-    if (statusFilter !== 'all') params.set('status', statusFilter);
-    if (priorityFilter !== 'all') params.set('priority', priorityFilter);
-    if (slaComplianceFilter !== 'all') params.set('slaCompliance', slaComplianceFilter);
-    if (departmentFilter !== 'all') params.set('department', departmentFilter);
-    if (initiatorFilter !== 'all') params.set('initiator', initiatorFilter);
-    if (approverFilter !== 'all') {
-      params.set('approver', approverFilter);
-      params.set('approverType', approverFilterType);
-    }
-    if (dateRange) params.set('dateRange', dateRange);
-    if (customStartDate) params.set('startDate', customStartDate.toISOString());
-    if (customEndDate) params.set('endDate', customEndDate.toISOString());
-    
-    setSearchParams(params, { replace: true });
-  }, [searchTerm, statusFilter, priorityFilter, slaComplianceFilter, departmentFilter, initiatorFilter, approverFilter, approverFilterType, dateRange, customStartDate, customEndDate, setSearchParams]);
-
-  // Fetch backend stats when date range changes (for organization-level)
-  useEffect(() => {
-    if (isOrgLevel) {
-      fetchBackendStats(dateRange, customStartDate, customEndDate);
-    }
-  }, [isOrgLevel, dateRange, customStartDate, customEndDate, fetchBackendStats]);
-
-  // Initial fetch on mount with URL params
-  useEffect(() => {
-    fetchRequests(1, {
-      search: searchTerm || undefined,
-      status: statusFilter !== 'all' ? statusFilter : undefined,
-      priority: priorityFilter !== 'all' ? priorityFilter : undefined,
-      slaCompliance: slaComplianceFilter !== 'all' ? slaComplianceFilter : undefined,
-      department: departmentFilter !== 'all' ? departmentFilter : undefined,
-      initiator: initiatorFilter !== 'all' ? initiatorFilter : undefined,
-      approver: approverFilter !== 'all' ? approverFilter : undefined,
-      approverType: approverFilter !== 'all' ? approverFilterType : undefined,
-      dateRange,
-      startDate: customStartDate,
-      endDate: customEndDate
-    });
-  }, [fetchRequests]);
-
-  // Fetch when filters change (with debouncing for search)
-  useEffect(() => {
-    const timeoutId = setTimeout(() => {
-      setCurrentPage(1);
-      fetchRequests(1, {
-        search: searchTerm || undefined,
-        status: statusFilter !== 'all' ? statusFilter : undefined,
-        priority: priorityFilter !== 'all' ? priorityFilter : undefined,
-        slaCompliance: slaComplianceFilter !== 'all' ? slaComplianceFilter : undefined,
-        department: departmentFilter !== 'all' ? departmentFilter : undefined,
-        initiator: initiatorFilter !== 'all' ? initiatorFilter : undefined,
-        approver: approverFilter !== 'all' ? approverFilter : undefined,
-        approverType: approverFilter !== 'all' ? approverFilterType : undefined,
-        dateRange,
-        startDate: customStartDate,
-        endDate: customEndDate
-      });
-    }, searchTerm ? 500 : 0);
-    
-    return () => clearTimeout(timeoutId);
-  }, [searchTerm, statusFilter, priorityFilter, slaComplianceFilter, departmentFilter, initiatorFilter, approverFilter, approverFilterType, dateRange, customStartDate, customEndDate, fetchRequests]);
-
-  const handlePageChange = (newPage: number) => {
-    if (newPage >= 1 && newPage <= totalPages) {
-      setCurrentPage(newPage);
-      fetchRequests(newPage, {
-        search: searchTerm || undefined,
-        status: statusFilter !== 'all' ? statusFilter : undefined,
-        priority: priorityFilter !== 'all' ? priorityFilter : undefined,
-        slaCompliance: slaComplianceFilter !== 'all' ? slaComplianceFilter : undefined,
-        department: departmentFilter !== 'all' ? departmentFilter : undefined,
-        initiator: initiatorFilter !== 'all' ? initiatorFilter : undefined,
-        approver: approverFilter !== 'all' ? approverFilter : undefined,
-        dateRange,
-        startDate: customStartDate,
-        endDate: customEndDate
-      });
-    }
-  };
-
-  // Helper function to format date for CSV
-  const formatDateForCSV = (date: Date | string | undefined): string => {
-    if (!date) return 'N/A';
-    try {
-      const dateObj = typeof date === 'string' ? new Date(date) : date;
-      return format(dateObj, 'yyyy-MM-dd HH:mm:ss');
-    } catch {
-      return 'N/A';
-    }
-  };
-
-  // Export all filtered data to CSV
-  const handleExportToCSV = async () => {
+  // Export to CSV
+  const handleExportToCSV = useCallback(async () => {
     try {
       setExporting(true);
-      
-      // Build filters object (same as used in fetchRequests)
-      const filters = {
-        search: searchTerm || undefined,
-        status: statusFilter !== 'all' ? statusFilter : undefined,
-        priority: priorityFilter !== 'all' ? priorityFilter : undefined,
-        slaCompliance: slaComplianceFilter !== 'all' ? slaComplianceFilter : undefined,
-        department: departmentFilter !== 'all' ? departmentFilter : undefined,
-        initiator: initiatorFilter !== 'all' ? initiatorFilter : undefined,
-        approver: approverFilter !== 'all' ? approverFilter : undefined,
-        approverType: approverFilterType,
-        dateRange,
-        startDate: customStartDate,
-        endDate: customEndDate
-      };
-
-      let allData: any[] = [];
-
-      if (isOrgLevel) {
-        // For organization-level: fetch all pages
-        const allPages: any[] = [];
-        let currentPageNum = 1;
-        let hasMore = true;
-        const maxPages = 100; // Safety limit
-
-        while (hasMore && currentPageNum <= maxPages) {
-          const pageResult = await workflowApi.listWorkflows({ 
-            page: currentPageNum, 
-            limit: 100
-          });
-          
-          let pageData: any[] = [];
-          if (Array.isArray(pageResult?.data)) {
-            pageData = pageResult.data;
-          } else if (Array.isArray(pageResult)) {
-            pageData = pageResult;
-          }
-          
-          if (pageData.length > 0) {
-            allPages.push(...pageData);
-            currentPageNum++;
-            
-            if (pageResult?.pagination) {
-              hasMore = currentPageNum <= pageResult.pagination.totalPages;
-            } else {
-              hasMore = pageData.length === 100;
-            }
-          } else {
-            hasMore = false;
-          }
-        }
-
-        allData = allPages;
-      } else {
-        // For user-level: fetch all pages
-        const allPages: any[] = [];
-        let currentPageNum = 1;
-        let hasMore = true;
-        const maxPages = 100; // Safety limit
-
-        while (hasMore && currentPageNum <= maxPages) {
-          const pageResult = await workflowApi.listMyWorkflows({ 
-            page: currentPageNum, 
-            limit: 100
-          });
-          
-          let pageData: any[] = [];
-          if (Array.isArray(pageResult?.data)) {
-            pageData = pageResult.data;
-          } else if (Array.isArray(pageResult)) {
-            pageData = pageResult;
-          }
-          
-          if (pageData.length > 0) {
-            allPages.push(...pageData);
-            currentPageNum++;
-            
-            if (pageResult?.pagination) {
-              hasMore = currentPageNum <= pageResult.pagination.totalPages;
-            } else {
-              hasMore = pageData.length === 100;
-            }
-          } else {
-            hasMore = false;
-          }
-        }
-
-        allData = allPages;
-      }
-
-      // Apply the same filtering logic as fetchRequests
-      let filteredData = allData;
-
-      // Search filter
-      if (filters.search) {
-        const searchLower = filters.search.toLowerCase();
-        filteredData = filteredData.filter((req: any) => 
-          req.title?.toLowerCase().includes(searchLower) ||
-          req.description?.toLowerCase().includes(searchLower) ||
-          req.requestNumber?.toLowerCase().includes(searchLower) ||
-          req.request_number?.toLowerCase().includes(searchLower)
-        );
-      }
-
-      // Status filter
-      if (filters.status && filters.status !== 'all') {
-        filteredData = filteredData.filter((req: any) => {
-          const reqStatus = (req.status || '').toString().toUpperCase();
-          const filterStatus = filters.status?.toUpperCase();
-          return reqStatus === filterStatus || reqStatus === filterStatus?.replace('-', '_');
-        });
-      }
-
-      // Priority filter
-      if (filters.priority && filters.priority !== 'all') {
-        filteredData = filteredData.filter((req: any) => {
-          const reqPriority = (req.priority || '').toString().toLowerCase();
-          return reqPriority === filters.priority?.toLowerCase();
-        });
-      }
-
-      // Department filter
-      if (filters.department && filters.department !== 'all') {
-        filteredData = filteredData.filter((req: any) => {
-          const reqDepartment = req.department || req.initiator?.department || '';
-          return reqDepartment === filters.department;
-        });
-      }
-
-      // Initiator filter
-      if (filters.initiator && filters.initiator !== 'all') {
-        filteredData = filteredData.filter((req: any) => {
-          const initiatorId = req.initiatorId || 
-                             req.initiator_id || 
-                             req.initiator?.userId || 
-                             req.initiator?.user_id ||
-                             (req.initiator && typeof req.initiator === 'object' && 'userId' in req.initiator ? req.initiator.userId : null);
-          return initiatorId === filters.initiator;
-        });
-      }
-
-      // Approver filter
-      if (filters.approver && filters.approver !== 'all') {
-        const approverType = filters.approverType || 'current';
-        
-        if (approverType === 'current') {
-          filteredData = filteredData.filter((req: any) => {
-            const approverId = req.currentApprover?.userId || 
-                              req.currentApprover?.user_id ||
-                              req.approvals?.find((a: any) => {
-                                const status = (a.status || '').toString().toUpperCase();
-                                return status === 'IN_PROGRESS' || status === 'PENDING';
-                              })?.approverId ||
-                              req.approvals?.find((a: any) => {
-                                const status = (a.status || '').toString().toUpperCase();
-                                return status === 'IN_PROGRESS' || status === 'PENDING';
-                              })?.approver_id ||
-                              req.currentApproverId ||
-                              req.current_approver_id;
-            return approverId === filters.approver;
-          });
-        } else {
-          filteredData = filteredData.filter((req: any) => {
-            const allApproverIds: string[] = [];
-            if (req.currentApprover?.userId) allApproverIds.push(req.currentApprover.userId);
-            if (req.currentApprover?.user_id) allApproverIds.push(req.currentApprover.user_id);
-            if (Array.isArray(req.approvals)) {
-              req.approvals.forEach((a: any) => {
-                if (a.approverId) allApproverIds.push(a.approverId);
-                if (a.approver_id) allApproverIds.push(a.approver_id);
-              });
-            }
-            return allApproverIds.includes(filters.approver || '');
-          });
-        }
-      }
-
-      // SLA Compliance filter
-      if (filters.slaCompliance && filters.slaCompliance !== 'all') {
-        filteredData = filteredData.filter((req: any) => {
-          const slaCompliance = filters.slaCompliance || '';
-          if (slaCompliance.toLowerCase() === 'compliant') {
-            const reqStatus = (req.status || '').toString().toUpperCase();
-            const isCompleted = reqStatus === 'APPROVED' || reqStatus === 'REJECTED' || reqStatus === 'CLOSED';
-            if (!isCompleted) return false;
-            const slaStatus = req.currentLevelSLA?.status || 
-                             req.currentApprover?.sla?.status ||
-                             req.sla?.status ||
-                             req.summary?.sla?.status;
-            if (!slaStatus) return true;
-            return slaStatus !== 'breached' && slaStatus.toLowerCase() !== 'breached';
-          } else {
-            const slaStatus = req.currentLevelSLA?.status || 
-                             req.currentApprover?.sla?.status ||
-                             req.sla?.status ||
-                             req.summary?.sla?.status;
-            const filterStatus = slaCompliance.toLowerCase();
-            return slaStatus === filterStatus || slaStatus?.toLowerCase() === filterStatus;
-          }
-        });
-      }
-
-      // Date range filter
-      if (filters.dateRange && filters.dateRange !== 'month') {
-        let rangeStart: dayjs.Dayjs;
-        let rangeEnd: dayjs.Dayjs = dayjs();
-
-        if (filters.dateRange === 'custom' && filters.startDate && filters.endDate) {
-          rangeStart = dayjs(filters.startDate);
-          rangeEnd = dayjs(filters.endDate);
-        } else {
-          switch (filters.dateRange) {
-            case 'today':
-              rangeStart = dayjs().startOf('day');
-              rangeEnd = dayjs().endOf('day');
-              break;
-            case 'week':
-              rangeStart = dayjs().startOf('week');
-              rangeEnd = dayjs().endOf('week');
-              break;
-            case 'quarter':
-              // Calculate quarter manually
-              const currentMonth = dayjs().month();
-              const quarterStartMonth = Math.floor(currentMonth / 3) * 3;
-              rangeStart = dayjs().month(quarterStartMonth).startOf('month');
-              rangeEnd = dayjs().month(quarterStartMonth + 2).endOf('month');
-              break;
-            case 'year':
-              rangeStart = dayjs().startOf('year');
-              rangeEnd = dayjs().endOf('year');
-              break;
-            case 'last30days':
-              rangeStart = dayjs().subtract(30, 'days');
-              rangeEnd = dayjs();
-              break;
-            default:
-              rangeStart = dayjs().subtract(30, 'days');
-          }
-        }
-
-        filteredData = filteredData.filter((req: any) => {
-          const reqDate = dayjs(req.submittedAt || req.createdAt || req.submitted_at || req.created_at);
-          if (!reqDate.isValid()) return false;
-          return reqDate.isSameOrAfter(rangeStart, 'day') && reqDate.isSameOrBefore(rangeEnd, 'day');
-        });
-      }
-
-      // Convert to CSV format
-      const csvRows = [
-        ['Request Number', 'Title', 'Status', 'Priority', 'Initiator', 'Department', 'Current Approver', 'Approval Level', 'Submitted Date', 'Description'].join(',')
-      ];
-
-      filteredData.forEach((req: any) => {
-        const status = (req.status || '').toString().toLowerCase().replace('_', '-');
-        const priority = (req.priority || '').toString().toLowerCase();
-        const initiatorName = req.initiator?.displayName || req.initiator?.email || req.initiatorName || 'N/A';
-        const department = req.department || req.initiator?.department || 'N/A';
-        const currentApprover = req.currentApprover?.displayName || req.currentApprover?.email || req.currentApproverName || 'N/A';
-        const approverLevel = req.currentApproverLevel || req.approvalLevel || req.currentLevel || 'N/A';
-        const submittedDate = formatDateForCSV(req.submittedAt || req.createdAt || req.submitted_at || req.created_at);
-        const description = (req.description || '').replace(/"/g, '""').replace(/\n/g, ' ').replace(/\r/g, '');
-
-        const row = [
-          req.requestNumber || req.request_number || '',
-          `"${(req.title || '').replace(/"/g, '""')}"`,
-          status,
-          priority,
-          `"${initiatorName.replace(/"/g, '""')}"`,
-          `"${department.replace(/"/g, '""')}"`,
-          `"${currentApprover.replace(/"/g, '""')}"`,
-          approverLevel,
-          submittedDate,
-          `"${description}"`
-        ];
-        csvRows.push(row.join(','));
-      });
-
-      const csvContent = csvRows.join('\n');
-      const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
-      const link = document.createElement('a');
-      const url = URL.createObjectURL(blob);
-      link.setAttribute('href', url);
-      link.setAttribute('download', `requests-export-${new Date().toISOString().split('T')[0]}.csv`);
-      link.style.visibility = 'hidden';
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link);
-      URL.revokeObjectURL(url);
+      const allData = await fetchAllRequestsForExport(isOrgLevel);
+      await exportRequestsToCSV(allData, filters.getFilters());
     } catch (error: any) {
       console.error('Failed to export requests:', error);
       alert('Failed to export requests. Please try again.');
     } finally {
       setExporting(false);
     }
-  };
+  }, [isOrgLevel, filters]);
 
+  // Initial fetch
+  useEffect(() => {
+    fetchDepartments();
+    fetchUsers();
+  }, [fetchDepartments, fetchUsers]);
 
-  const handleDateRangeChange = (value: string) => {
-    const newRange = value as DateRange;
-    setDateRange(newRange);
-    if (newRange !== 'custom') {
-      setCustomStartDate(undefined);
-      setCustomEndDate(undefined);
-      setShowCustomDatePicker(false);
-    } else {
-      setShowCustomDatePicker(true);
+  // Fetch backend stats when date range changes
+  useEffect(() => {
+    if (isOrgLevel) {
+      fetchBackendStatsRef.current(filters.dateRange, filters.customStartDate, filters.customEndDate);
     }
-  };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOrgLevel, filters.dateRange, filters.customStartDate, filters.customEndDate]);
 
-  const handleApplyCustomDate = () => {
-    if (customStartDate && customEndDate) {
-      if (customStartDate > customEndDate) {
-        const temp = customStartDate;
-        setCustomStartDate(customEndDate);
-        setCustomEndDate(temp);
-      }
-      setShowCustomDatePicker(false);
+  // Fetch requests on mount and when filters change
+  useEffect(() => {
+    const timeoutId = setTimeout(() => {
+      setCurrentPage(1);
+      fetchRequests(1);
+    }, filters.searchTerm ? 500 : 0);
+
+    return () => clearTimeout(timeoutId);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    filters.searchTerm,
+    filters.statusFilter,
+    filters.priorityFilter,
+    filters.slaComplianceFilter,
+    filters.departmentFilter,
+    filters.initiatorFilter,
+    filters.approverFilter,
+    filters.approverFilterType,
+    filters.dateRange,
+    filters.customStartDate,
+    filters.customEndDate
+    // fetchRequests excluded to prevent infinite loops
+  ]);
+
+  // Page change handler
+  const handlePageChange = useCallback((newPage: number) => {
+    if (newPage >= 1 && newPage <= totalPages) {
+      setCurrentPage(newPage);
+      fetchRequests(newPage);
     }
-  };
+  }, [totalPages, fetchRequests]);
 
-  const handleClearFilters = () => {
-    setSearchTerm('');
-    setStatusFilter('all');
-    setPriorityFilter('all');
-    setSlaComplianceFilter('all');
-    setDepartmentFilter('all');
-    setInitiatorFilter('all');
-    setApproverFilter('all');
-    setApproverFilterType('current');
-    setSelectedInitiator(null);
-    setSelectedApprover(null);
-    setInitiatorSearchQuery('');
-    setApproverSearchQuery('');
-    setDateRange('month');
-    setCustomStartDate(undefined);
-    setCustomEndDate(undefined);
-    setShowCustomDatePicker(false);
-  };
+  // Transform requests
+  const convertedRequests = useMemo(() => transformRequests(apiRequests), [apiRequests]);
 
-  // Convert API requests to the format expected by this component
-  const convertedRequests = Array.isArray(apiRequests) ? apiRequests.map((req: any) => {
-    const createdAt = req.submittedAt || req.submitted_at || req.createdAt || req.created_at;
-    const priority = (req.priority || '').toString().toLowerCase();
-    const status = (req.status || '').toString().toUpperCase();
-    
-    // Extract current approver - handle multiple field name variations
-    let currentApprover = '—';
-    let approverLevel = '—';
-    
-    // Try to get current approver from various possible locations
-    const currentApproverObj = req.currentApprover || req.current_approver || req.currentApproverData;
-    if (currentApproverObj) {
-      // Handle object format: { name, email, approverName, approverEmail, etc. }
-      currentApprover = currentApproverObj.name || 
-                       currentApproverObj.approverName || 
-                       currentApproverObj.displayName ||
-                       currentApproverObj.email || 
-                       currentApproverObj.approverEmail || 
-                       '—';
-    } else if (req.approvals && Array.isArray(req.approvals) && req.approvals.length > 0) {
-      // For completed requests, show the last approver (final approver)
-      // For active requests, find the current pending/in-progress approver
-      const activeApproval = req.approvals.find((a: any) => {
-        const aStatus = (a.status || '').toString().toUpperCase();
-        return aStatus === 'PENDING' || aStatus === 'IN_PROGRESS';
-      });
-      
-      if (activeApproval) {
-        // Active request - show current approver
-        currentApprover = activeApproval.approverName || 
-                         activeApproval.approver?.name ||
-                         activeApproval.approver?.displayName ||
-                         activeApproval.approverEmail || 
-                         activeApproval.approver?.email || 
-                         '—';
-      } else {
-        // Completed request - show final approver (last one in the array, or highest level)
-        const sortedApprovals = [...req.approvals].sort((a: any, b: any) => {
-          const aLevel = a.levelNumber || a.level_number || 0;
-          const bLevel = b.levelNumber || b.level_number || 0;
-          return bLevel - aLevel; // Sort descending to get highest level
-        });
-        const finalApproval = sortedApprovals[0];
-        if (finalApproval) {
-          currentApprover = finalApproval.approverName || 
-                           finalApproval.approver?.name ||
-                           finalApproval.approver?.displayName ||
-                           finalApproval.approverEmail || 
-                           finalApproval.approver?.email || 
-                           '—';
-        }
-      }
-    }
-    
-    // Extract approval level information - handle multiple field name variations
-    const currentLevel = req.currentLevel || req.current_level || req.currentLevelNumber || req.current_level_number;
-    const totalLevels = req.totalLevels || req.total_levels || req.totalLevelsCount || req.total_levels_count;
-    
-    if (currentLevel && totalLevels) {
-      approverLevel = `${currentLevel} of ${totalLevels}`;
-    } else if (req.approvals && Array.isArray(req.approvals) && req.approvals.length > 0) {
-      // Fallback: calculate from approvals array
-      const activeApproval = req.approvals.find((a: any) => {
-        const aStatus = (a.status || '').toString().toUpperCase();
-        return aStatus === 'PENDING' || aStatus === 'IN_PROGRESS';
-      });
-      
-      if (activeApproval) {
-        const levelNum = activeApproval.levelNumber || activeApproval.level_number || 0;
-        const total = totalLevels || req.approvals.length;
-        approverLevel = `${levelNum} of ${total}`;
-      } else if (totalLevels) {
-        // Completed request - show final level
-        approverLevel = `${totalLevels} of ${totalLevels}`;
-      }
-    } else if (req.currentStep && req.totalSteps) {
-      // Alternative field names
-      approverLevel = `${req.currentStep} of ${req.totalSteps}`;
-    }
-    
-    return {
-      id: req.requestNumber || req.request_number || req.requestId || req.id || req.request_id,
-      requestId: req.requestId || req.id || req.request_id,
-      displayId: req.requestNumber || req.request_number || req.id,
-      title: req.title,
-      description: req.description,
-      status: status.toLowerCase().replace('_','-'),
-      priority: priority,
-      department: req.department || req.initiator?.department,
-      submittedDate: req.submittedAt || (req.createdAt ? new Date(req.createdAt).toISOString().split('T')[0] : undefined),
-      createdAt: createdAt,
-      currentApprover: currentApprover,
-      approverLevel: approverLevel,
-      templateType: req.templateType,
-      templateName: req.templateName
-    };
-  }) : [];
-
-  // Stats calculation - calculate from all filtered data (before pagination) to reflect current filters
+  // Calculate stats
   const stats = useMemo(() => {
-    // Check if we have active filters (excluding default date range)
-    const hasActiveFilters = searchTerm || statusFilter !== 'all' || priorityFilter !== 'all' || slaComplianceFilter !== 'all' || dateRange !== 'month' || customStartDate || customEndDate;
-    
-    // Use allFilteredRequests (all filtered data before pagination) for accurate stats
-    // If no filtered data available yet, fall back to convertedRequests or backend stats
-    if (allFilteredRequests.length > 0) {
-      // Calculate stats from all filtered data (raw API format)
-      const total = allFilteredRequests.length;
-      const pending = allFilteredRequests.filter((r: any) => {
-        const status = (r.status || '').toString().toUpperCase();
-        return status === 'PENDING' || status === 'IN_PROGRESS';
-      }).length;
-      const approved = allFilteredRequests.filter((r: any) => {
-        const status = (r.status || '').toString().toUpperCase();
-        return status === 'APPROVED';
-      }).length;
-      const rejected = allFilteredRequests.filter((r: any) => {
-        const status = (r.status || '').toString().toUpperCase();
-        return status === 'REJECTED';
-      }).length;
-      const draft = allFilteredRequests.filter((r: any) => {
-        const status = (r.status || '').toString().toUpperCase();
-        return status === 'DRAFT';
-      }).length;
-      const closed = allFilteredRequests.filter((r: any) => {
-        const status = (r.status || '').toString().toUpperCase();
-        return status === 'CLOSED';
-      }).length;
-      
-      return {
-        total,
-        pending,
-        approved,
-        rejected,
-        draft,
-        closed
-      };
-    } else if (isOrgLevel && !hasActiveFilters && backendStats) {
-      // No filters and backend stats available - use backend stats for better performance
-      return {
-        total: backendStats.total,
-        pending: backendStats.pending,
-        approved: backendStats.approved,
-        rejected: backendStats.rejected,
-        draft: backendStats.draft,
-        closed: backendStats.closed
-      };
-    } else {
-      // Fallback: calculate from convertedRequests (paginated data - less accurate)
-      return {
-        total: totalRecords || convertedRequests.length,
-        pending: convertedRequests.filter(r => r.status === 'pending' || r.status === 'in-progress').length,
-        approved: convertedRequests.filter(r => r.status === 'approved').length,
-        rejected: convertedRequests.filter(r => r.status === 'rejected').length,
-        draft: convertedRequests.filter(r => r.status === 'draft').length,
-        closed: convertedRequests.filter(r => r.status === 'closed').length
-      };
-    }
-  }, [allFilteredRequests, isOrgLevel, backendStats, totalRecords, convertedRequests, searchTerm, statusFilter, priorityFilter, slaComplianceFilter, departmentFilter, dateRange, customStartDate, customEndDate]);
+    return calculateStatsFromFilteredData(
+      allFilteredRequests,
+      isOrgLevel,
+      backendStats,
+      filters.hasActiveFilters,
+      totalRecords,
+      convertedRequests
+    );
+  }, [allFilteredRequests, isOrgLevel, backendStats, filters.hasActiveFilters, totalRecords, convertedRequests]);
 
-  const hasActiveFilters = searchTerm || statusFilter !== 'all' || priorityFilter !== 'all' || slaComplianceFilter !== 'all' || departmentFilter !== 'all' || initiatorFilter !== 'all' || approverFilter !== 'all' || dateRange !== 'month' || customStartDate || customEndDate;
+  const totalRequests = isOrgLevel && backendStats ? backendStats.total : (totalRecords || convertedRequests.length);
 
   return (
     <div className="space-y-4 sm:space-y-6 max-w-7xl mx-auto" data-testid="requests-page">
-      {/* Page Header with Export Button */}
-      <div className="flex items-start justify-between gap-4">
-        <PageHeader
-          icon={FileText}
-          title={isOrgLevel ? "All Requests (Organization)" : "My Requests"}
-          description={isOrgLevel 
-            ? "View and filter all organization-wide workflow requests with advanced filtering options"
-            : "View and filter your workflow requests with advanced filtering options"}
-          badge={{
-            value: `${isOrgLevel && backendStats ? backendStats.total : (totalRecords || convertedRequests.length)} total`,
-            label: 'requests',
-            loading: loading || loadingStats
-          }}
-          testId="requests-header"
-        />
-        <Button
-          onClick={handleExportToCSV}
-          disabled={exporting || loading}
-          className="bg-re-green hover:bg-re-green/90 text-white shrink-0"
-          size="sm"
-        >
-          {exporting ? (
-            <>
-              <RefreshCw className="w-4 h-4 mr-2 animate-spin" />
-              Exporting...
-            </>
-          ) : (
-            <>
-              <Download className="w-4 h-4 mr-2" />
-              Export
-            </>
-          )}
-        </Button>
-      </div>
+      {/* Header */}
+      <RequestsHeader
+        isOrgLevel={isOrgLevel}
+        totalRequests={totalRequests}
+        loading={loading}
+        loadingStats={loadingStats}
+        exporting={exporting}
+        onExport={handleExportToCSV}
+      />
 
-      {/* Stats Overview */}
-      <div className="grid grid-cols-2 md:grid-cols-6 gap-3 sm:gap-4" data-testid="requests-stats">
-        <StatsCard
-          label="Total"
-          value={stats.total}
-          icon={FileText}
-          iconColor="text-blue-600"
-          gradient="bg-gradient-to-br from-blue-50 to-blue-100 border-blue-200"
-          textColor="text-blue-700"
-          valueColor="text-blue-900"
-          testId="stat-total"
-        />
-        
-        <StatsCard
-          label="Pending"
-          value={stats.pending}
-          icon={Clock}
-          iconColor="text-orange-600"
-          gradient="bg-gradient-to-br from-orange-50 to-orange-100 border-orange-200"
-          textColor="text-orange-700"
-          valueColor="text-orange-900"
-          testId="stat-pending"
-        />
-        
-        <StatsCard
-          label="Approved"
-          value={stats.approved}
-          icon={CheckCircle}
-          iconColor="text-green-600"
-          gradient="bg-gradient-to-br from-green-50 to-green-100 border-green-200"
-          textColor="text-green-700"
-          valueColor="text-green-900"
-          testId="stat-approved"
-        />
-        
-        <StatsCard
-          label="Rejected"
-          value={stats.rejected}
-          icon={XCircle}
-          iconColor="text-red-600"
-          gradient="bg-gradient-to-br from-red-50 to-red-100 border-red-200"
-          textColor="text-red-700"
-          valueColor="text-red-900"
-          testId="stat-rejected"
-        />
-        
-        <StatsCard
-          label="Closed"
-          value={stats.closed}
-          icon={Archive}
-          iconColor="text-purple-600"
-          gradient="bg-gradient-to-br from-purple-50 to-purple-100 border-purple-200"
-          textColor="text-purple-700"
-          valueColor="text-purple-900"
-          testId="stat-closed"
-        />
-        
-        <StatsCard
-          label="Draft"
-          value={stats.draft}
-          icon={Edit}
-          iconColor="text-gray-600"
-          gradient="bg-gradient-to-br from-gray-50 to-gray-100 border-gray-200"
-          textColor="text-gray-700"
-          valueColor="text-gray-900"
-          testId="stat-draft"
-        />
-      </div>
+      {/* Stats */}
+      <RequestsStats stats={stats} />
 
-      {/* Advanced Filters */}
+      {/* Filters - TODO: Extract to separate component */}
       <Card className="border-gray-200 shadow-md" data-testid="requests-filters">
         <CardContent className="p-4 sm:p-6">
           <div className="flex flex-col gap-4">
-            {/* Filter Header */}
             <div className="flex items-center justify-between">
               <div className="flex items-center gap-2">
                 <Filter className="w-5 h-5 text-muted-foreground" />
                 <h3 className="font-semibold text-gray-900">Advanced Filters</h3>
-                {hasActiveFilters && (
+                {filters.hasActiveFilters && (
                   <Badge variant="outline" className="bg-blue-50 text-blue-700 border-blue-200">
-                    {Object.values({
-                      search: searchTerm,
-                      status: statusFilter !== 'all',
-                      priority: priorityFilter !== 'all',
-                      slaCompliance: slaComplianceFilter !== 'all',
-                      department: departmentFilter !== 'all',
-                      initiator: initiatorFilter !== 'all',
-                      approver: approverFilter !== 'all',
-                      approverType: approverFilter !== 'all' && approverFilterType !== 'current',
-                      dateRange: dateRange !== 'month' || customStartDate || customEndDate
-                    }).filter(Boolean).length} active
+                    Active
                   </Badge>
                 )}
               </div>
-              {hasActiveFilters && (
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={handleClearFilters}
-                  className="gap-2"
-                >
+              {filters.hasActiveFilters && (
+                <Button variant="ghost" size="sm" onClick={filters.clearFilters} className="gap-2">
                   <RefreshCw className="w-4 h-4" />
                   Clear All
                 </Button>
@@ -1733,26 +305,21 @@ export function Requests({ onViewRequest }: RequestsProps) {
 
             <Separator />
 
-            {/* Primary Filters Row */}
+            {/* Primary Filters */}
             <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-3 sm:gap-4">
-              {/* Search */}
               <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
-                  placeholder="Search requests by title, description, or ID..."
-                  value={searchTerm}
-                  onChange={(e) => setSearchTerm(e.target.value)}
-                  className="pl-10 h-10 bg-white border-gray-300 hover:border-gray-400 focus:border-blue-400 focus:ring-1 focus:ring-blue-200"
+                  placeholder="Search requests..."
+                  value={filters.searchTerm}
+                  onChange={(e) => filters.setSearchTerm(e.target.value)}
+                  className="pl-10 h-10"
                   data-testid="search-input"
                 />
               </div>
-              
-              {/* Status Filter */}
-              <Select value={statusFilter} onValueChange={setStatusFilter}>
-                <SelectTrigger 
-                  className="h-10 bg-white border-gray-300 hover:border-gray-400 focus:border-blue-400 focus:ring-1 focus:ring-blue-200"
-                  data-testid="status-filter"
-                >
+
+              <Select value={filters.statusFilter} onValueChange={filters.setStatusFilter}>
+                <SelectTrigger className="h-10" data-testid="status-filter">
                   <SelectValue placeholder="All Status" />
                 </SelectTrigger>
                 <SelectContent>
@@ -1765,12 +332,8 @@ export function Requests({ onViewRequest }: RequestsProps) {
                 </SelectContent>
               </Select>
 
-              {/* Priority Filter */}
-              <Select value={priorityFilter} onValueChange={setPriorityFilter}>
-                <SelectTrigger 
-                  className="h-10 bg-white border-gray-300 hover:border-gray-400 focus:border-blue-400 focus:ring-1 focus:ring-blue-200"
-                  data-testid="priority-filter"
-                >
+              <Select value={filters.priorityFilter} onValueChange={filters.setPriorityFilter}>
+                <SelectTrigger className="h-10" data-testid="priority-filter">
                   <SelectValue placeholder="All Priority" />
                 </SelectTrigger>
                 <SelectContent>
@@ -1780,13 +343,13 @@ export function Requests({ onViewRequest }: RequestsProps) {
                 </SelectContent>
               </Select>
 
-              {/* Department Filter */}
-              <Select value={departmentFilter} onValueChange={setDepartmentFilter} disabled={loadingDepartments || departments.length === 0}>
-                <SelectTrigger 
-                  className="h-10 bg-white border-gray-300 hover:border-gray-400 focus:border-blue-400 focus:ring-1 focus:ring-blue-200"
-                  data-testid="department-filter"
-                >
-                  <SelectValue placeholder={loadingDepartments ? "Loading..." : departments.length === 0 ? "No Departments" : "All Departments"} />
+              <Select
+                value={filters.departmentFilter}
+                onValueChange={filters.setDepartmentFilter}
+                disabled={loadingDepartments || departments.length === 0}
+              >
+                <SelectTrigger className="h-10" data-testid="department-filter">
+                  <SelectValue placeholder={loadingDepartments ? "Loading..." : "All Departments"} />
                 </SelectTrigger>
                 <SelectContent>
                   <SelectItem value="all">All Departments</SelectItem>
@@ -1796,12 +359,8 @@ export function Requests({ onViewRequest }: RequestsProps) {
                 </SelectContent>
               </Select>
 
-              {/* SLA Compliance Filter */}
-              <Select value={slaComplianceFilter} onValueChange={setSlaComplianceFilter}>
-                <SelectTrigger 
-                  className="h-10 bg-white border-gray-300 hover:border-gray-400 focus:border-blue-400 focus:ring-1 focus:ring-blue-200"
-                  data-testid="sla-compliance-filter"
-                >
+              <Select value={filters.slaComplianceFilter} onValueChange={filters.setSlaComplianceFilter}>
+                <SelectTrigger className="h-10" data-testid="sla-compliance-filter">
                   <SelectValue placeholder="All SLA Status" />
                 </SelectTrigger>
                 <SelectContent>
@@ -1814,54 +373,45 @@ export function Requests({ onViewRequest }: RequestsProps) {
                 </SelectContent>
               </Select>
             </div>
-            
-            {/* Secondary Filters Row - Initiator and Approver */}
+
+            {/* User Filters - Initiator and Approver */}
             <div className="grid grid-cols-1 md:grid-cols-2 gap-3 sm:gap-4">
-              {/* Initiator Filter - Search Input */}
+              {/* Initiator Filter */}
               <div className="flex flex-col">
                 <Label className="text-sm font-medium text-gray-700 mb-2">Initiator</Label>
                 <div className="relative">
-                  {selectedInitiator ? (
+                  {initiatorSearch.selectedUser ? (
                     <div className="flex items-center gap-2 h-10 px-3 bg-white border border-gray-300 rounded-md">
                       <span className="flex-1 text-sm text-gray-900 truncate">
-                        {selectedInitiator.displayName || selectedInitiator.email}
+                        {initiatorSearch.selectedUser.displayName || initiatorSearch.selectedUser.email}
                       </span>
-                      <Button
-                        variant="ghost"
-                        size="sm"
-                        className="h-6 w-6 p-0 hover:bg-gray-100"
-                        onClick={handleClearInitiator}
-                      >
+                      <Button variant="ghost" size="sm" className="h-6 w-6 p-0" onClick={initiatorSearch.handleClear}>
                         <X className="h-3 w-3" />
                       </Button>
                     </div>
                   ) : (
                     <>
                       <Input
-                        ref={initiatorInputRef}
-                        placeholder="Search initiator by name or email..."
-                        value={initiatorSearchQuery}
-                        onChange={(e) => handleInitiatorSearch(e.target.value)}
+                        placeholder="Search initiator..."
+                        value={initiatorSearch.searchQuery}
+                        onChange={(e) => initiatorSearch.handleSearch(e.target.value)}
                         onFocus={() => {
-                          if (initiatorSearchResults.length > 0) {
-                            setShowInitiatorResults(true);
+                          if (initiatorSearch.searchResults.length > 0) {
+                            initiatorSearch.setShowResults(true);
                           }
                         }}
-                        onBlur={() => {
-                          // Delay to allow click on results
-                          setTimeout(() => setShowInitiatorResults(false), 200);
-                        }}
-                        className="h-10 bg-white border-gray-300 hover:border-gray-400 focus:border-blue-400 focus:ring-1 focus:ring-blue-200"
+                        onBlur={() => setTimeout(() => initiatorSearch.setShowResults(false), 200)}
+                        className="h-10"
                         data-testid="initiator-search-input"
                       />
-                      {showInitiatorResults && initiatorSearchResults.length > 0 && (
+                      {initiatorSearch.showResults && initiatorSearch.searchResults.length > 0 && (
                         <div className="absolute z-50 w-full mt-1 bg-white border border-gray-300 rounded-md shadow-lg max-h-60 overflow-y-auto">
-                          {initiatorSearchResults.map((user) => (
+                          {initiatorSearch.searchResults.map((user) => (
                             <button
                               key={user.userId}
                               type="button"
-                              onClick={() => handleSelectInitiator(user)}
-                              className="w-full px-4 py-2 text-left hover:bg-gray-50 focus:bg-gray-50 focus:outline-none"
+                              onClick={() => initiatorSearch.handleSelect(user)}
+                              className="w-full px-4 py-2 text-left hover:bg-gray-50"
                             >
                               <div className="flex flex-col">
                                 <span className="text-sm font-medium text-gray-900">
@@ -1879,15 +429,15 @@ export function Requests({ onViewRequest }: RequestsProps) {
                   )}
                 </div>
               </div>
-              
-              {/* Approver Filter - Search Input with Type Selector */}
+
+              {/* Approver Filter */}
               <div className="flex flex-col">
                 <div className="flex items-center justify-between mb-2">
                   <Label className="text-sm font-medium text-gray-700">Approver</Label>
-                  {approverFilter !== 'all' && (
-                    <Select 
-                      value={approverFilterType} 
-                      onValueChange={(value: 'current' | 'any') => setApproverFilterType(value)}
+                  {filters.approverFilter !== 'all' && (
+                    <Select
+                      value={filters.approverFilterType}
+                      onValueChange={(value: 'current' | 'any') => filters.setApproverFilterType(value)}
                     >
                       <SelectTrigger className="h-7 w-32 text-xs">
                         <SelectValue />
@@ -1900,47 +450,38 @@ export function Requests({ onViewRequest }: RequestsProps) {
                   )}
                 </div>
                 <div className="relative">
-                  {selectedApprover ? (
+                  {approverSearch.selectedUser ? (
                     <div className="flex items-center gap-2 h-10 px-3 bg-white border border-gray-300 rounded-md">
                       <span className="flex-1 text-sm text-gray-900 truncate">
-                        {selectedApprover.displayName || selectedApprover.email}
+                        {approverSearch.selectedUser.displayName || approverSearch.selectedUser.email}
                       </span>
-                      <Button
-                        variant="ghost"
-                        size="sm"
-                        className="h-6 w-6 p-0 hover:bg-gray-100"
-                        onClick={handleClearApprover}
-                      >
+                      <Button variant="ghost" size="sm" className="h-6 w-6 p-0" onClick={approverSearch.handleClear}>
                         <X className="h-3 w-3" />
                       </Button>
                     </div>
                   ) : (
                     <>
                       <Input
-                        ref={approverInputRef}
-                        placeholder="Search approver by name or email..."
-                        value={approverSearchQuery}
-                        onChange={(e) => handleApproverSearch(e.target.value)}
+                        placeholder="Search approver..."
+                        value={approverSearch.searchQuery}
+                        onChange={(e) => approverSearch.handleSearch(e.target.value)}
                         onFocus={() => {
-                          if (approverSearchResults.length > 0) {
-                            setShowApproverResults(true);
+                          if (approverSearch.searchResults.length > 0) {
+                            approverSearch.setShowResults(true);
                           }
                         }}
-                        onBlur={() => {
-                          // Delay to allow click on results
-                          setTimeout(() => setShowApproverResults(false), 200);
-                        }}
-                        className="h-10 bg-white border-gray-300 hover:border-gray-400 focus:border-blue-400 focus:ring-1 focus:ring-blue-200"
+                        onBlur={() => setTimeout(() => approverSearch.setShowResults(false), 200)}
+                        className="h-10"
                         data-testid="approver-search-input"
                       />
-                      {showApproverResults && approverSearchResults.length > 0 && (
+                      {approverSearch.showResults && approverSearch.searchResults.length > 0 && (
                         <div className="absolute z-50 w-full mt-1 bg-white border border-gray-300 rounded-md shadow-lg max-h-60 overflow-y-auto">
-                          {approverSearchResults.map((user) => (
+                          {approverSearch.searchResults.map((user) => (
                             <button
                               key={user.userId}
                               type="button"
-                              onClick={() => handleSelectApprover(user)}
-                              className="w-full px-4 py-2 text-left hover:bg-gray-50 focus:bg-gray-50 focus:outline-none"
+                              onClick={() => approverSearch.handleSelect(user)}
+                              className="w-full px-4 py-2 text-left hover:bg-gray-50"
                             >
                               <div className="flex flex-col">
                                 <span className="text-sm font-medium text-gray-900">
@@ -1957,20 +498,13 @@ export function Requests({ onViewRequest }: RequestsProps) {
                     </>
                   )}
                 </div>
-                {approverFilter !== 'all' && (
-                  <p className="text-xs text-gray-500 mt-1.5">
-                    {approverFilterType === 'current' 
-                      ? 'Showing requests where this user is currently assigned as approver'
-                      : 'Showing requests where this user is/was an approver at any level'}
-                  </p>
-                )}
               </div>
             </div>
 
             {/* Date Range Filter */}
             <div className="flex items-center gap-3 flex-wrap">
               <CalendarIcon className="w-4 h-4 text-muted-foreground" />
-              <Select value={dateRange} onValueChange={handleDateRangeChange}>
+              <Select value={filters.dateRange} onValueChange={filters.handleDateRangeChange}>
                 <SelectTrigger className="w-[160px] h-10">
                   <SelectValue placeholder="Date Range" />
                 </SelectTrigger>
@@ -1981,36 +515,35 @@ export function Requests({ onViewRequest }: RequestsProps) {
                   <SelectItem value="custom">Custom Range</SelectItem>
                 </SelectContent>
               </Select>
-              
-              {/* Custom Date Range Picker */}
-              {dateRange === 'custom' && (
-                <Popover open={showCustomDatePicker} onOpenChange={setShowCustomDatePicker}>
+
+              {filters.dateRange === 'custom' && (
+                <Popover open={filters.showCustomDatePicker} onOpenChange={filters.setShowCustomDatePicker}>
                   <PopoverTrigger asChild>
                     <Button variant="outline" size="sm" className="gap-2">
                       <CalendarIcon className="w-4 h-4" />
-                      {customStartDate && customEndDate 
-                        ? `${format(customStartDate, 'MMM d, yyyy')} - ${format(customEndDate, 'MMM d, yyyy')}`
+                      {filters.customStartDate && filters.customEndDate
+                        ? `${format(filters.customStartDate, 'MMM d, yyyy')} - ${format(filters.customEndDate, 'MMM d, yyyy')}`
                         : 'Select dates'}
                     </Button>
                   </PopoverTrigger>
-                  <PopoverContent className="w-auto p-4" align="start" sideOffset={8}>
+                  <PopoverContent className="w-auto p-4" align="start">
                     <div className="space-y-4">
                       <div className="space-y-3">
                         <div className="space-y-2">
-                          <Label htmlFor="start-date" className="text-sm font-medium">Start Date</Label>
+                          <Label htmlFor="start-date">Start Date</Label>
                           <Input
                             id="start-date"
                             type="date"
-                            value={customStartDate ? format(customStartDate, 'yyyy-MM-dd') : ''}
+                            value={filters.customStartDate ? format(filters.customStartDate, 'yyyy-MM-dd') : ''}
                             onChange={(e) => {
                               const date = e.target.value ? new Date(e.target.value) : undefined;
                               if (date) {
-                                setCustomStartDate(date);
-                                if (customEndDate && date > customEndDate) {
-                                  setCustomEndDate(date);
+                                filters.setCustomStartDate(date);
+                                if (filters.customEndDate && date > filters.customEndDate) {
+                                  filters.setCustomEndDate(date);
                                 }
                               } else {
-                                setCustomStartDate(undefined);
+                                filters.setCustomStartDate(undefined);
                               }
                             }}
                             max={format(new Date(), 'yyyy-MM-dd')}
@@ -2018,45 +551,45 @@ export function Requests({ onViewRequest }: RequestsProps) {
                           />
                         </div>
                         <div className="space-y-2">
-                          <Label htmlFor="end-date" className="text-sm font-medium">End Date</Label>
+                          <Label htmlFor="end-date">End Date</Label>
                           <Input
                             id="end-date"
                             type="date"
-                            value={customEndDate ? format(customEndDate, 'yyyy-MM-dd') : ''}
+                            value={filters.customEndDate ? format(filters.customEndDate, 'yyyy-MM-dd') : ''}
                             onChange={(e) => {
                               const date = e.target.value ? new Date(e.target.value) : undefined;
                               if (date) {
-                                setCustomEndDate(date);
-                                if (customStartDate && date < customStartDate) {
-                                  setCustomStartDate(date);
+                                filters.setCustomEndDate(date);
+                                if (filters.customStartDate && date < filters.customStartDate) {
+                                  filters.setCustomStartDate(date);
                                 }
                               } else {
-                                setCustomEndDate(undefined);
+                                filters.setCustomEndDate(undefined);
                               }
                             }}
-                            min={customStartDate ? format(customStartDate, 'yyyy-MM-dd') : undefined}
+                            min={filters.customStartDate ? format(filters.customStartDate, 'yyyy-MM-dd') : undefined}
                             max={format(new Date(), 'yyyy-MM-dd')}
                             className="w-full"
                           />
                         </div>
                       </div>
                       <div className="flex gap-2 pt-2 border-t">
-                        <Button 
-                          size="sm" 
-                          onClick={handleApplyCustomDate}
-                          disabled={!customStartDate || !customEndDate}
+                        <Button
+                          size="sm"
+                          onClick={filters.handleApplyCustomDate}
+                          disabled={!filters.customStartDate || !filters.customEndDate}
                           className="flex-1 bg-re-green hover:bg-re-green/90"
                         >
                           Apply
                         </Button>
-                        <Button 
-                          size="sm" 
+                        <Button
+                          size="sm"
                           variant="outline"
                           onClick={() => {
-                            setShowCustomDatePicker(false);
-                            setCustomStartDate(undefined);
-                            setCustomEndDate(undefined);
-                            setDateRange('month');
+                            filters.setShowCustomDatePicker(false);
+                            filters.setCustomStartDate(undefined);
+                            filters.setCustomEndDate(undefined);
+                            filters.setDateRange('month');
                           }}
                         >
                           Cancel
@@ -2072,128 +605,12 @@ export function Requests({ onViewRequest }: RequestsProps) {
       </Card>
 
       {/* Requests List */}
-      <div className="space-y-4" data-testid="requests-list">
-        {loading ? (
-          <Card data-testid="loading-state">
-            <CardContent className="p-6 text-sm text-gray-600">Loading requests…</CardContent>
-          </Card>
-        ) : convertedRequests.length === 0 ? (
-          <Card data-testid="empty-state">
-            <CardContent className="p-12 text-center">
-              <FileText className="w-12 h-12 text-gray-400 mx-auto mb-4" />
-              <h3 className="text-lg font-medium text-gray-900 mb-2">No requests found</h3>
-              <p className="text-gray-600">
-                {hasActiveFilters
-                  ? 'Try adjusting your search or filters'
-                  : 'No requests match the current criteria'}
-              </p>
-            </CardContent>
-          </Card>
-        ) : (
-          convertedRequests.map((request, index) => (
-            <motion.div
-              key={request.id}
-              initial={{ opacity: 0, y: 20 }}
-              animate={{ opacity: 1, y: 0 }}
-              transition={{ delay: index * 0.1 }}
-            >
-              <Card 
-                className="group hover:shadow-lg transition-all duration-300 cursor-pointer border border-gray-200 shadow-sm hover:shadow-md"
-                onClick={() => onViewRequest(request.id, request.title, request.status)}
-                data-testid={`request-card-${request.id}`}
-              >
-                <CardContent className="p-3 sm:p-6">
-                  <div className="space-y-3 sm:space-y-4">
-                    {/* Header with Title and Status Badges */}
-                    <div className="flex items-start justify-between gap-2">
-                      <div className="flex-1 min-w-0">
-                        <h4 
-                          className="text-base sm:text-lg font-semibold text-gray-900 mb-2 group-hover:text-blue-600 transition-colors line-clamp-2"
-                          data-testid="request-title"
-                        >
-                          {request.title}
-                        </h4>
-                        <div className="flex flex-wrap items-center gap-1.5 sm:gap-2 mb-2">
-                          <Badge 
-                            variant="outline" 
-                            className={`${getStatusConfig(request.status).color} border font-medium text-xs shrink-0`}
-                            data-testid="status-badge"
-                          >
-                            {(() => {
-                              const IconComponent = getStatusConfig(request.status).icon;
-                              return <IconComponent className="w-3 h-3 mr-1" />;
-                            })()}
-                            <span className="capitalize">{request.status}</span>
-                          </Badge>
-                          <Badge 
-                            variant="outline" 
-                            className={`${getPriorityConfig(request.priority).color} border font-medium text-xs capitalize shrink-0`}
-                            data-testid="priority-badge"
-                          >
-                            {(() => {
-                              const IconComponent = getPriorityConfig(request.priority).icon;
-                              return <IconComponent className="w-3 h-3 mr-1" />;
-                            })()}
-                            {request.priority}
-                          </Badge>
-                          {request.department && (
-                            <Badge 
-                              variant="secondary" 
-                              className="bg-purple-100 text-purple-700 text-xs shrink-0"
-                              data-testid="department-badge"
-                            >
-                              {request.department}
-                            </Badge>
-                          )}
-                        </div>
-                        <p 
-                          className="text-xs sm:text-sm text-gray-600 mb-2 sm:mb-3 line-clamp-2"
-                          data-testid="request-description"
-                        >
-                          {request.description}
-                        </p>
-                        <div className="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-4 text-xs sm:text-sm text-gray-500">
-                          <span className="truncate" data-testid="request-id-display">
-                            <span className="font-medium">ID:</span> {(request as any).displayId || request.id}
-                          </span>
-                          <span className="truncate" data-testid="submitted-date">
-                            <span className="font-medium">Submitted:</span> {request.submittedDate ? new Date(request.submittedDate).toLocaleDateString() : 'N/A'}
-                          </span>
-                        </div>
-                      </div>
-                      <ArrowRight className="w-4 h-4 sm:w-5 sm:h-5 text-gray-400 group-hover:text-blue-600 transition-colors flex-shrink-0 mt-1" />
-                    </div>
-
-                    {/* Current Approver and Level Info */}
-                    <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 sm:gap-4 pt-3 border-t border-gray-100">
-                      <div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4">
-                        <div className="flex items-center gap-2 min-w-0">
-                          <User className="w-3.5 h-3.5 sm:w-4 sm:h-4 text-gray-400 flex-shrink-0" />
-                          <span className="text-xs sm:text-sm truncate" data-testid="current-approver">
-                            <span className="text-gray-500">Current Approver:</span> <span className="text-gray-900 font-medium">{request.currentApprover}</span>
-                          </span>
-                        </div>
-                        <div className="flex items-center gap-2">
-                          <TrendingUp className="w-3.5 h-3.5 sm:w-4 sm:h-4 text-gray-400 flex-shrink-0" />
-                          <span className="text-xs sm:text-sm" data-testid="approval-level">
-                            <span className="text-gray-500">Approval Level:</span> <span className="text-gray-900 font-medium">{request.approverLevel}</span>
-                          </span>
-                        </div>
-                      </div>
-                      <div className="flex items-center gap-1.5 text-xs text-gray-500">
-                        <Clock className="w-3.5 h-3.5 flex-shrink-0" />
-                        <span data-testid="submitted-timestamp">
-                          Submitted: {request.submittedDate ? new Date(request.submittedDate).toLocaleDateString() : 'N/A'}
-                        </span>
-                      </div>
-                    </div>
-                  </div>
-                </CardContent>
-              </Card>
-            </motion.div>
-          ))
-        )}
-      </div>
+      <RequestsList
+        requests={convertedRequests}
+        loading={loading}
+        hasActiveFilters={filters.hasActiveFilters}
+        onViewRequest={onViewRequest}
+      />
 
       {/* Pagination */}
       <Pagination
diff --git a/src/pages/Requests/components/RequestCard.tsx b/src/pages/Requests/components/RequestCard.tsx
new file mode 100644
index 0000000..3544090
--- /dev/null
+++ b/src/pages/Requests/components/RequestCard.tsx
@@ -0,0 +1,120 @@
+/**
+ * Individual Request Card Component
+ */
+
+import { motion } from 'framer-motion';
+import { Badge } from '@/components/ui/badge';
+import { Card, CardContent } from '@/components/ui/card';
+import { User, ArrowRight, TrendingUp, Clock } from 'lucide-react';
+import { getPriorityConfig, getStatusConfig } from '../utils/configMappers';
+import type { ConvertedRequest } from '../types/requests.types';
+
+interface RequestCardProps {
+  request: ConvertedRequest;
+  index: number;
+  onViewRequest: (requestId: string, requestTitle?: string, status?: string) => void;
+}
+
+export function RequestCard({ request, index, onViewRequest }: RequestCardProps) {
+  const statusConfig = getStatusConfig(request.status);
+  const priorityConfig = getPriorityConfig(request.priority);
+  const StatusIcon = statusConfig.icon;
+  const PriorityIcon = priorityConfig.icon;
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ delay: index * 0.1 }}
+    >
+      <Card
+        className="group hover:shadow-lg transition-all duration-300 cursor-pointer border border-gray-200 shadow-sm hover:shadow-md"
+        onClick={() => onViewRequest(request.id, request.title, request.status)}
+        data-testid={`request-card-${request.id}`}
+      >
+        <CardContent className="p-3 sm:p-6">
+          <div className="space-y-3 sm:space-y-4">
+            {/* Header with Title and Status Badges */}
+            <div className="flex items-start justify-between gap-2">
+              <div className="flex-1 min-w-0">
+                <h4
+                  className="text-base sm:text-lg font-semibold text-gray-900 mb-2 group-hover:text-blue-600 transition-colors line-clamp-2"
+                  data-testid="request-title"
+                >
+                  {request.title}
+                </h4>
+                <div className="flex flex-wrap items-center gap-1.5 sm:gap-2 mb-2">
+                  <Badge
+                    variant="outline"
+                    className={`${statusConfig.color} border font-medium text-xs shrink-0`}
+                    data-testid="status-badge"
+                  >
+                    <StatusIcon className="w-3 h-3 mr-1" />
+                    <span className="capitalize">{request.status}</span>
+                  </Badge>
+                  <Badge
+                    variant="outline"
+                    className={`${priorityConfig.color} border font-medium text-xs capitalize shrink-0`}
+                    data-testid="priority-badge"
+                  >
+                    <PriorityIcon className="w-3 h-3 mr-1" />
+                    {request.priority}
+                  </Badge>
+                  {request.department && (
+                    <Badge
+                      variant="secondary"
+                      className="bg-purple-100 text-purple-700 text-xs shrink-0"
+                      data-testid="department-badge"
+                    >
+                      {request.department}
+                    </Badge>
+                  )}
+                </div>
+                <p
+                  className="text-xs sm:text-sm text-gray-600 mb-2 sm:mb-3 line-clamp-2"
+                  data-testid="request-description"
+                >
+                  {request.description}
+                </p>
+                <div className="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-4 text-xs sm:text-sm text-gray-500">
+                  <span className="truncate" data-testid="request-id-display">
+                    <span className="font-medium">ID:</span> {request.displayId || request.id}
+                  </span>
+                  <span className="truncate" data-testid="submitted-date">
+                    <span className="font-medium">Submitted:</span> {request.submittedDate ? new Date(request.submittedDate).toLocaleDateString() : 'N/A'}
+                  </span>
+                </div>
+              </div>
+              <ArrowRight className="w-4 h-4 sm:w-5 sm:h-5 text-gray-400 group-hover:text-blue-600 transition-colors flex-shrink-0 mt-1" />
+            </div>
+
+            {/* Current Approver and Level Info */}
+            <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 sm:gap-4 pt-3 border-t border-gray-100">
+              <div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4">
+                <div className="flex items-center gap-2 min-w-0">
+                  <User className="w-3.5 h-3.5 sm:w-4 sm:h-4 text-gray-400 flex-shrink-0" />
+                  <span className="text-xs sm:text-sm truncate" data-testid="current-approver">
+                    <span className="text-gray-500">Current Approver:</span> <span className="text-gray-900 font-medium">{request.currentApprover}</span>
+                  </span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <TrendingUp className="w-3.5 h-3.5 sm:w-4 sm:h-4 text-gray-400 flex-shrink-0" />
+                  <span className="text-xs sm:text-sm" data-testid="approval-level">
+                    <span className="text-gray-500">Approval Level:</span> <span className="text-gray-900 font-medium">{request.approverLevel}</span>
+                  </span>
+                </div>
+              </div>
+              <div className="flex items-center gap-1.5 text-xs text-gray-500">
+                <Clock className="w-3.5 h-3.5 flex-shrink-0" />
+                <span data-testid="submitted-timestamp">
+                  Submitted: {request.submittedDate ? new Date(request.submittedDate).toLocaleDateString() : 'N/A'}
+                </span>
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </motion.div>
+  );
+}
+
diff --git a/src/pages/Requests/components/RequestsHeader.tsx b/src/pages/Requests/components/RequestsHeader.tsx
new file mode 100644
index 0000000..1ff0648
--- /dev/null
+++ b/src/pages/Requests/components/RequestsHeader.tsx
@@ -0,0 +1,63 @@
+/**
+ * Requests Page Header Component
+ */
+
+import { FileText, Download, RefreshCw } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { PageHeader } from '@/components/common/PageHeader';
+
+interface RequestsHeaderProps {
+  isOrgLevel: boolean;
+  totalRequests: number;
+  loading: boolean;
+  loadingStats: boolean;
+  exporting: boolean;
+  onExport: () => void;
+}
+
+export function RequestsHeader({
+  isOrgLevel,
+  totalRequests,
+  loading,
+  loadingStats,
+  exporting,
+  onExport
+}: RequestsHeaderProps) {
+  return (
+    <div className="flex items-start justify-between gap-4" data-testid="requests-header-container">
+      <PageHeader
+        icon={FileText}
+        title={isOrgLevel ? "All Requests (Organization)" : "My Requests"}
+        description={isOrgLevel
+          ? "View and filter all organization-wide workflow requests with advanced filtering options"
+          : "View and filter your workflow requests with advanced filtering options"}
+        badge={{
+          value: `${totalRequests} total`,
+          label: 'requests',
+          loading: loading || loadingStats
+        }}
+        testId="requests-header"
+      />
+      <Button
+        onClick={onExport}
+        disabled={exporting || loading}
+        className="bg-re-green hover:bg-re-green/90 text-white shrink-0"
+        size="sm"
+        data-testid="export-button"
+      >
+        {exporting ? (
+          <>
+            <RefreshCw className="w-4 h-4 mr-2 animate-spin" />
+            Exporting...
+          </>
+        ) : (
+          <>
+            <Download className="w-4 h-4 mr-2" />
+            Export
+          </>
+        )}
+      </Button>
+    </div>
+  );
+}
+
diff --git a/src/pages/Requests/components/RequestsList.tsx b/src/pages/Requests/components/RequestsList.tsx
new file mode 100644
index 0000000..2cf4e58
--- /dev/null
+++ b/src/pages/Requests/components/RequestsList.tsx
@@ -0,0 +1,60 @@
+/**
+ * Requests List Component with Loading and Empty States
+ */
+
+import { Card, CardContent } from '@/components/ui/card';
+import { FileText } from 'lucide-react';
+import { RequestCard } from './RequestCard';
+import type { ConvertedRequest } from '../types/requests.types';
+
+interface RequestsListProps {
+  requests: ConvertedRequest[];
+  loading: boolean;
+  hasActiveFilters: boolean;
+  onViewRequest: (requestId: string, requestTitle?: string, status?: string) => void;
+}
+
+export function RequestsList({
+  requests,
+  loading,
+  hasActiveFilters,
+  onViewRequest
+}: RequestsListProps) {
+  if (loading) {
+    return (
+      <Card data-testid="loading-state">
+        <CardContent className="p-6 text-sm text-gray-600">Loading requests…</CardContent>
+      </Card>
+    );
+  }
+
+  if (requests.length === 0) {
+    return (
+      <Card data-testid="empty-state">
+        <CardContent className="p-12 text-center">
+          <FileText className="w-12 h-12 text-gray-400 mx-auto mb-4" />
+          <h3 className="text-lg font-medium text-gray-900 mb-2">No requests found</h3>
+          <p className="text-gray-600">
+            {hasActiveFilters
+              ? 'Try adjusting your search or filters'
+              : 'No requests match the current criteria'}
+          </p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <div className="space-y-4" data-testid="requests-list">
+      {requests.map((request, index) => (
+        <RequestCard
+          key={request.id}
+          request={request}
+          index={index}
+          onViewRequest={onViewRequest}
+        />
+      ))}
+    </div>
+  );
+}
+
diff --git a/src/pages/Requests/components/RequestsStats.tsx b/src/pages/Requests/components/RequestsStats.tsx
new file mode 100644
index 0000000..60d3024
--- /dev/null
+++ b/src/pages/Requests/components/RequestsStats.tsx
@@ -0,0 +1,84 @@
+/**
+ * Requests Stats Overview Component
+ */
+
+import { FileText, Clock, CheckCircle, XCircle, Archive, Edit } from 'lucide-react';
+import { StatsCard } from '@/components/dashboard/StatsCard';
+import type { RequestStats } from '../types/requests.types';
+
+interface RequestsStatsProps {
+  stats: RequestStats;
+}
+
+export function RequestsStats({ stats }: RequestsStatsProps) {
+  return (
+    <div className="grid grid-cols-2 md:grid-cols-6 gap-3 sm:gap-4" data-testid="requests-stats">
+      <StatsCard
+        label="Total"
+        value={stats.total}
+        icon={FileText}
+        iconColor="text-blue-600"
+        gradient="bg-gradient-to-br from-blue-50 to-blue-100 border-blue-200"
+        textColor="text-blue-700"
+        valueColor="text-blue-900"
+        testId="stat-total"
+      />
+
+      <StatsCard
+        label="Pending"
+        value={stats.pending}
+        icon={Clock}
+        iconColor="text-orange-600"
+        gradient="bg-gradient-to-br from-orange-50 to-orange-100 border-orange-200"
+        textColor="text-orange-700"
+        valueColor="text-orange-900"
+        testId="stat-pending"
+      />
+
+      <StatsCard
+        label="Approved"
+        value={stats.approved}
+        icon={CheckCircle}
+        iconColor="text-green-600"
+        gradient="bg-gradient-to-br from-green-50 to-green-100 border-green-200"
+        textColor="text-green-700"
+        valueColor="text-green-900"
+        testId="stat-approved"
+      />
+
+      <StatsCard
+        label="Rejected"
+        value={stats.rejected}
+        icon={XCircle}
+        iconColor="text-red-600"
+        gradient="bg-gradient-to-br from-red-50 to-red-100 border-red-200"
+        textColor="text-red-700"
+        valueColor="text-red-900"
+        testId="stat-rejected"
+      />
+
+      <StatsCard
+        label="Closed"
+        value={stats.closed}
+        icon={Archive}
+        iconColor="text-purple-600"
+        gradient="bg-gradient-to-br from-purple-50 to-purple-100 border-purple-200"
+        textColor="text-purple-700"
+        valueColor="text-purple-900"
+        testId="stat-closed"
+      />
+
+      <StatsCard
+        label="Draft"
+        value={stats.draft}
+        icon={Edit}
+        iconColor="text-gray-600"
+        gradient="bg-gradient-to-br from-gray-50 to-gray-100 border-gray-200"
+        textColor="text-gray-700"
+        valueColor="text-gray-900"
+        testId="stat-draft"
+      />
+    </div>
+  );
+}
+
diff --git a/src/pages/Requests/hooks/useRequestsFilters.ts b/src/pages/Requests/hooks/useRequestsFilters.ts
new file mode 100644
index 0000000..28b3d8e
--- /dev/null
+++ b/src/pages/Requests/hooks/useRequestsFilters.ts
@@ -0,0 +1,181 @@
+/**
+ * Hook for managing Requests filters
+ */
+
+import { useState, useEffect, useCallback } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import type { DateRange } from '@/services/dashboard.service';
+import type { RequestFilters } from '../types/requests.types';
+
+export function useRequestsFilters() {
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const [searchTerm, setSearchTerm] = useState(searchParams.get('search') || '');
+  const [statusFilter, setStatusFilter] = useState(searchParams.get('status') || 'all');
+  const [priorityFilter, setPriorityFilter] = useState(searchParams.get('priority') || 'all');
+  const [slaComplianceFilter, setSlaComplianceFilter] = useState(searchParams.get('slaCompliance') || 'all');
+  const [departmentFilter, setDepartmentFilter] = useState(searchParams.get('department') || 'all');
+  const [initiatorFilter, setInitiatorFilter] = useState(searchParams.get('initiator') || 'all');
+  const [approverFilter, setApproverFilter] = useState(searchParams.get('approver') || 'all');
+  const [approverFilterType, setApproverFilterType] = useState<'current' | 'any'>(
+    searchParams.get('approverType') === 'any' ? 'any' : 'current'
+  );
+  const [dateRange, setDateRange] = useState<DateRange>((searchParams.get('dateRange') as DateRange) || 'month');
+  const [customStartDate, setCustomStartDate] = useState<Date | undefined>(
+    searchParams.get('startDate') ? new Date(searchParams.get('startDate')!) : undefined
+  );
+  const [customEndDate, setCustomEndDate] = useState<Date | undefined>(
+    searchParams.get('endDate') ? new Date(searchParams.get('endDate')!) : undefined
+  );
+  const [showCustomDatePicker, setShowCustomDatePicker] = useState(false);
+
+  // Update URL params when filters change
+  useEffect(() => {
+    const params = new URLSearchParams();
+    if (searchTerm) params.set('search', searchTerm);
+    if (statusFilter !== 'all') params.set('status', statusFilter);
+    if (priorityFilter !== 'all') params.set('priority', priorityFilter);
+    if (slaComplianceFilter !== 'all') params.set('slaCompliance', slaComplianceFilter);
+    if (departmentFilter !== 'all') params.set('department', departmentFilter);
+    if (initiatorFilter !== 'all') {
+      params.set('initiator', initiatorFilter);
+    }
+    if (approverFilter !== 'all') {
+      params.set('approver', approverFilter);
+      params.set('approverType', approverFilterType);
+    }
+    if (dateRange) params.set('dateRange', dateRange);
+    if (customStartDate) params.set('startDate', customStartDate.toISOString());
+    if (customEndDate) params.set('endDate', customEndDate.toISOString());
+
+    setSearchParams(params, { replace: true });
+  }, [
+    searchTerm,
+    statusFilter,
+    priorityFilter,
+    slaComplianceFilter,
+    departmentFilter,
+    initiatorFilter,
+    approverFilter,
+    approverFilterType,
+    dateRange,
+    customStartDate,
+    customEndDate,
+    setSearchParams
+  ]);
+
+  const getFilters = useCallback((): RequestFilters => {
+    return {
+      search: searchTerm || undefined,
+      status: statusFilter !== 'all' ? statusFilter : undefined,
+      priority: priorityFilter !== 'all' ? priorityFilter : undefined,
+      slaCompliance: slaComplianceFilter !== 'all' ? slaComplianceFilter : undefined,
+      department: departmentFilter !== 'all' ? departmentFilter : undefined,
+      initiator: initiatorFilter !== 'all' ? initiatorFilter : undefined,
+      approver: approverFilter !== 'all' ? approverFilter : undefined,
+      approverType: approverFilter !== 'all' ? approverFilterType : undefined,
+      dateRange,
+      startDate: customStartDate,
+      endDate: customEndDate
+    };
+  }, [
+    searchTerm,
+    statusFilter,
+    priorityFilter,
+    slaComplianceFilter,
+    departmentFilter,
+    initiatorFilter,
+    approverFilter,
+    approverFilterType,
+    dateRange,
+    customStartDate,
+    customEndDate
+  ]);
+
+  const clearFilters = useCallback(() => {
+    setSearchTerm('');
+    setStatusFilter('all');
+    setPriorityFilter('all');
+    setSlaComplianceFilter('all');
+    setDepartmentFilter('all');
+    setInitiatorFilter('all');
+    setApproverFilter('all');
+    setApproverFilterType('current');
+    setDateRange('month');
+    setCustomStartDate(undefined);
+    setCustomEndDate(undefined);
+    setShowCustomDatePicker(false);
+  }, []);
+
+  const handleDateRangeChange = useCallback((value: string) => {
+    const newRange = value as DateRange;
+    setDateRange(newRange);
+    if (newRange !== 'custom') {
+      setCustomStartDate(undefined);
+      setCustomEndDate(undefined);
+      setShowCustomDatePicker(false);
+    } else {
+      setShowCustomDatePicker(true);
+    }
+  }, []);
+
+  const handleApplyCustomDate = useCallback(() => {
+    if (customStartDate && customEndDate) {
+      if (customStartDate > customEndDate) {
+        const temp = customStartDate;
+        setCustomStartDate(customEndDate);
+        setCustomEndDate(temp);
+      }
+      setShowCustomDatePicker(false);
+    }
+  }, [customStartDate, customEndDate]);
+
+  const hasActiveFilters: boolean = !!(
+    searchTerm ||
+    statusFilter !== 'all' ||
+    priorityFilter !== 'all' ||
+    slaComplianceFilter !== 'all' ||
+    departmentFilter !== 'all' ||
+    initiatorFilter !== 'all' ||
+    approverFilter !== 'all' ||
+    dateRange !== 'month' ||
+    customStartDate ||
+    customEndDate
+  );
+
+  return {
+    // State
+    searchTerm,
+    statusFilter,
+    priorityFilter,
+    slaComplianceFilter,
+    departmentFilter,
+    initiatorFilter,
+    approverFilter,
+    approverFilterType,
+    dateRange,
+    customStartDate,
+    customEndDate,
+    showCustomDatePicker,
+    hasActiveFilters,
+    // Setters
+    setSearchTerm,
+    setStatusFilter,
+    setPriorityFilter,
+    setSlaComplianceFilter,
+    setDepartmentFilter,
+    setInitiatorFilter,
+    setApproverFilter,
+    setApproverFilterType,
+    setDateRange,
+    setCustomStartDate,
+    setCustomEndDate,
+    setShowCustomDatePicker,
+    // Helpers
+    getFilters,
+    clearFilters,
+    handleDateRangeChange,
+    handleApplyCustomDate
+  };
+}
+
diff --git a/src/pages/Requests/hooks/useUserSearch.ts b/src/pages/Requests/hooks/useUserSearch.ts
new file mode 100644
index 0000000..78a66d4
--- /dev/null
+++ b/src/pages/Requests/hooks/useUserSearch.ts
@@ -0,0 +1,93 @@
+/**
+ * Hook for user search functionality (initiator/approver)
+ */
+
+import { useState, useCallback, useRef, useEffect } from 'react';
+import type { User } from '../types/requests.types';
+
+interface UseUserSearchOptions {
+  allUsers: User[];
+  filterValue: string;
+  onFilterChange: (userId: string) => void;
+}
+
+export function useUserSearch({ allUsers, filterValue, onFilterChange }: UseUserSearchOptions) {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [searchResults, setSearchResults] = useState<User[]>([]);
+  const [showResults, setShowResults] = useState(false);
+  const [selectedUser, setSelectedUser] = useState<User | null>(null);
+  const searchTimer = useRef<NodeJS.Timeout | null>(null);
+
+  // Initialize selected user from filter value
+  useEffect(() => {
+    if (filterValue !== 'all' && allUsers.length > 0) {
+      const user = allUsers.find(u => u.userId === filterValue);
+      if (user) {
+        setSelectedUser(user);
+        setSearchQuery(user.displayName || user.email);
+      }
+    }
+  }, [filterValue, allUsers]);
+
+  // Cleanup timer
+  useEffect(() => {
+    return () => {
+      if (searchTimer.current) {
+        clearTimeout(searchTimer.current);
+      }
+    };
+  }, []);
+
+  const handleSearch = useCallback((query: string) => {
+    setSearchQuery(query);
+
+    if (searchTimer.current) {
+      clearTimeout(searchTimer.current);
+    }
+
+    if (!query || query.trim().length < 2) {
+      setSearchResults([]);
+      setShowResults(false);
+      return;
+    }
+
+    searchTimer.current = setTimeout(() => {
+      const searchLower = query.toLowerCase().trim();
+      const filtered = allUsers.filter((user) => {
+        const email = (user.email || '').toLowerCase();
+        const displayName = (user.displayName || '').toLowerCase();
+        return email.includes(searchLower) || displayName.includes(searchLower);
+      });
+      setSearchResults(filtered.slice(0, 10));
+      setShowResults(filtered.length > 0);
+    }, 300);
+  }, [allUsers]);
+
+  const handleSelect = useCallback((user: User) => {
+    setSelectedUser(user);
+    onFilterChange(user.userId);
+    setSearchQuery(user.displayName || user.email);
+    setShowResults(false);
+    setSearchResults([]);
+  }, [onFilterChange]);
+
+  const handleClear = useCallback(() => {
+    setSelectedUser(null);
+    onFilterChange('all');
+    setSearchQuery('');
+    setShowResults(false);
+    setSearchResults([]);
+  }, [onFilterChange]);
+
+  return {
+    searchQuery,
+    searchResults,
+    showResults,
+    selectedUser,
+    handleSearch,
+    handleSelect,
+    handleClear,
+    setShowResults
+  };
+}
+
diff --git a/src/pages/Requests/services/requestsService.ts b/src/pages/Requests/services/requestsService.ts
new file mode 100644
index 0000000..c394919
--- /dev/null
+++ b/src/pages/Requests/services/requestsService.ts
@@ -0,0 +1,187 @@
+/**
+ * Service for fetching and managing requests data
+ */
+
+import workflowApi from '@/services/workflowApi';
+import { applyFilters } from '../utils/requestFilters';
+import type { RequestFilters } from '../types/requests.types';
+
+interface FetchRequestsOptions {
+  page: number;
+  itemsPerPage: number;
+  filters?: RequestFilters;
+  isOrgLevel: boolean;
+}
+
+export async function fetchRequestsData({
+  page,
+  itemsPerPage,
+  filters,
+  isOrgLevel
+}: FetchRequestsOptions) {
+  if (isOrgLevel) {
+    // Organization-level: fetch all pages and filter client-side
+    const allPages: any[] = [];
+    let currentPageNum = 1;
+    let hasMore = true;
+    const maxPages = 50;
+
+    while (hasMore && currentPageNum <= maxPages) {
+      const pageResult = await workflowApi.listWorkflows({
+        page: currentPageNum,
+        limit: 100
+      });
+
+      let pageData: any[] = [];
+      if (Array.isArray(pageResult?.data)) {
+        pageData = pageResult.data;
+      } else if (Array.isArray(pageResult)) {
+        pageData = pageResult;
+      }
+
+      if (pageData.length > 0) {
+        allPages.push(...pageData);
+        currentPageNum++;
+
+        if (pageResult?.pagination) {
+          hasMore = currentPageNum <= pageResult.pagination.totalPages;
+        } else {
+          hasMore = pageData.length === 100;
+        }
+      } else {
+        hasMore = false;
+      }
+    }
+
+    // Apply filters
+    const filteredData = filters ? applyFilters(allPages, filters) : allPages;
+
+    // Apply pagination
+    const startIndex = (page - 1) * itemsPerPage;
+    const endIndex = startIndex + itemsPerPage;
+    const paginatedData = filteredData.slice(startIndex, endIndex);
+
+    return {
+      data: paginatedData,
+      allData: allPages,
+      filteredData,
+      pagination: {
+        page,
+        limit: itemsPerPage,
+        total: filteredData.length,
+        totalPages: Math.ceil(filteredData.length / itemsPerPage) || 1
+      }
+    };
+  } else {
+    // User-level: use backend filtering where possible
+    const needsAllDataForDateFilter = filters?.dateRange && filters.dateRange !== 'month';
+
+    let userWorkflowsData: any[] = [];
+
+    if (needsAllDataForDateFilter || filters?.dateRange === 'custom') {
+      // Fetch all pages for date filtering
+      const allPages: any[] = [];
+      let currentPageNum = 1;
+      let hasMore = true;
+      const maxPages = 50;
+
+      while (hasMore && currentPageNum <= maxPages) {
+        const pageResult = await workflowApi.listMyWorkflows({
+          page: currentPageNum,
+          limit: 100,
+          search: filters?.search,
+          status: filters?.status !== 'all' ? filters?.status : undefined,
+          priority: filters?.priority !== 'all' ? filters?.priority : undefined
+        });
+
+        const pageData = Array.isArray((pageResult as any)?.data)
+          ? (pageResult as any).data
+          : [];
+
+        if (pageData.length > 0) {
+          allPages.push(...pageData);
+          currentPageNum++;
+
+          if (pageResult?.pagination) {
+            hasMore = currentPageNum <= pageResult.pagination.totalPages;
+          } else {
+            hasMore = pageData.length === 100;
+          }
+        } else {
+          hasMore = false;
+        }
+      }
+
+      userWorkflowsData = allPages;
+    } else {
+      // Normal pagination
+      const userResult = await workflowApi.listMyWorkflows({
+        page,
+        limit: itemsPerPage,
+        search: filters?.search,
+        status: filters?.status !== 'all' ? filters?.status : undefined,
+        priority: filters?.priority !== 'all' ? filters?.priority : undefined
+      });
+
+      userWorkflowsData = Array.isArray((userResult as any)?.data)
+        ? (userResult as any).data
+        : [];
+    }
+
+    // Apply client-side filtering for user-level requests
+    let filteredUserData = filters ? applyFilters(userWorkflowsData, filters) : userWorkflowsData;
+
+    // Apply pagination
+    const startIndex = (page - 1) * itemsPerPage;
+    const endIndex = startIndex + itemsPerPage;
+    const paginatedUserData = filteredUserData.slice(startIndex, endIndex);
+
+    return {
+      data: paginatedUserData,
+      allData: userWorkflowsData,
+      filteredData: filteredUserData,
+      pagination: {
+        page,
+        limit: itemsPerPage,
+        total: filteredUserData.length,
+        totalPages: Math.ceil(filteredUserData.length / itemsPerPage) || 1
+      }
+    };
+  }
+}
+
+export async function fetchAllRequestsForExport(isOrgLevel: boolean): Promise<any[]> {
+  const allPages: any[] = [];
+  let currentPageNum = 1;
+  let hasMore = true;
+  const maxPages = 100;
+
+  while (hasMore && currentPageNum <= maxPages) {
+    const pageResult = isOrgLevel
+      ? await workflowApi.listWorkflows({ page: currentPageNum, limit: 100 })
+      : await workflowApi.listMyWorkflows({ page: currentPageNum, limit: 100 });
+
+    let pageData: any[] = [];
+    if (Array.isArray(pageResult?.data)) {
+      pageData = pageResult.data;
+    } else if (Array.isArray(pageResult)) {
+      pageData = pageResult;
+    }
+
+    if (pageData.length > 0) {
+      allPages.push(...pageData);
+      currentPageNum++;
+
+      if (pageResult?.pagination) {
+        hasMore = currentPageNum <= pageResult.pagination.totalPages;
+      } else {
+        hasMore = pageData.length === 100;
+      }
+    } else {
+      hasMore = false;
+    }
+  }
+
+  return allPages;
+}
+
diff --git a/src/pages/Requests/types/requests.types.ts b/src/pages/Requests/types/requests.types.ts
new file mode 100644
index 0000000..e6ffa11
--- /dev/null
+++ b/src/pages/Requests/types/requests.types.ts
@@ -0,0 +1,65 @@
+/**
+ * Type definitions for Requests page
+ */
+
+import type { DateRange } from '@/services/dashboard.service';
+
+export interface RequestsProps {
+  onViewRequest: (requestId: string, requestTitle?: string, status?: string) => void;
+}
+
+export interface RequestFilters {
+  search?: string;
+  status?: string;
+  priority?: string;
+  slaCompliance?: string;
+  department?: string;
+  initiator?: string;
+  approver?: string;
+  approverType?: 'current' | 'any';
+  dateRange?: DateRange;
+  startDate?: Date;
+  endDate?: Date;
+}
+
+export interface RequestStats {
+  total: number;
+  pending: number;
+  approved: number;
+  rejected: number;
+  draft: number;
+  closed: number;
+}
+
+export interface BackendStats {
+  total: number;
+  pending: number;
+  approved: number;
+  rejected: number;
+  draft: number;
+  closed: number;
+}
+
+export interface User {
+  userId: string;
+  email: string;
+  displayName?: string;
+}
+
+export interface ConvertedRequest {
+  id: string;
+  requestId: string;
+  displayId: string;
+  title: string;
+  description: string;
+  status: string;
+  priority: string;
+  department?: string;
+  submittedDate?: string;
+  createdAt: string | Date | undefined;
+  currentApprover: string;
+  approverLevel: string;
+  templateType?: string;
+  templateName?: string;
+}
+
diff --git a/src/pages/Requests/utils/configMappers.ts b/src/pages/Requests/utils/configMappers.ts
new file mode 100644
index 0000000..17e0f84
--- /dev/null
+++ b/src/pages/Requests/utils/configMappers.ts
@@ -0,0 +1,70 @@
+/**
+ * Configuration mappers for priority and status badges
+ */
+
+import { Flame, Target, CheckCircle, XCircle, Clock, Edit, AlertCircle } from 'lucide-react';
+
+export const getPriorityConfig = (priority: string) => {
+  switch (priority) {
+    case 'express':
+      return {
+        color: 'bg-red-100 text-red-800 border-red-200',
+        icon: Flame,
+        iconColor: 'text-red-600'
+      };
+    case 'standard':
+      return {
+        color: 'bg-blue-100 text-blue-800 border-blue-200',
+        icon: Target,
+        iconColor: 'text-blue-600'
+      };
+    default:
+      return {
+        color: 'bg-gray-100 text-gray-800 border-gray-200',
+        icon: Target,
+        iconColor: 'text-gray-600'
+      };
+  }
+};
+
+export const getStatusConfig = (status: string) => {
+  switch (status) {
+    case 'approved':
+      return {
+        color: 'bg-green-100 text-green-800 border-green-200',
+        icon: CheckCircle,
+        iconColor: 'text-green-600'
+      };
+    case 'rejected':
+      return {
+        color: 'bg-red-100 text-red-800 border-red-200',
+        icon: XCircle,
+        iconColor: 'text-red-600'
+      };
+    case 'pending':
+      return {
+        color: 'bg-yellow-100 text-yellow-800 border-yellow-200',
+        icon: Clock,
+        iconColor: 'text-yellow-600'
+      };
+    case 'closed':
+      return {
+        color: 'bg-gray-100 text-gray-800 border-gray-200',
+        icon: CheckCircle,
+        iconColor: 'text-gray-600'
+      };
+    case 'draft':
+      return {
+        color: 'bg-gray-100 text-gray-800 border-gray-200',
+        icon: Edit,
+        iconColor: 'text-gray-600'
+      };
+    default:
+      return {
+        color: 'bg-gray-100 text-gray-800 border-gray-200',
+        icon: AlertCircle,
+        iconColor: 'text-gray-600'
+      };
+  }
+};
+
diff --git a/src/pages/Requests/utils/csvExports.ts b/src/pages/Requests/utils/csvExports.ts
new file mode 100644
index 0000000..0d471c7
--- /dev/null
+++ b/src/pages/Requests/utils/csvExports.ts
@@ -0,0 +1,74 @@
+/**
+ * CSV export utilities for requests
+ */
+
+import { format } from 'date-fns';
+import dayjs from 'dayjs';
+import isSameOrAfter from 'dayjs/plugin/isSameOrBefore';
+import isSameOrBefore from 'dayjs/plugin/isSameOrAfter';
+import type { RequestFilters } from '../types/requests.types';
+import { applyFilters } from './requestFilters';
+
+dayjs.extend(isSameOrAfter);
+dayjs.extend(isSameOrBefore);
+
+export function formatDateForCSV(date: Date | string | undefined): string {
+  if (!date) return 'N/A';
+  try {
+    const dateObj = typeof date === 'string' ? new Date(date) : date;
+    return format(dateObj, 'yyyy-MM-dd HH:mm:ss');
+  } catch {
+    return 'N/A';
+  }
+}
+
+export async function exportRequestsToCSV(
+  allData: any[],
+  filters: RequestFilters
+): Promise<void> {
+  // Apply the same filtering logic
+  const filteredData = applyFilters(allData, filters);
+
+  // Convert to CSV format
+  const csvRows = [
+    ['Request Number', 'Title', 'Status', 'Priority', 'Initiator', 'Department', 'Current Approver', 'Approval Level', 'Submitted Date', 'Description'].join(',')
+  ];
+
+  filteredData.forEach((req: any) => {
+    const status = (req.status || '').toString().toLowerCase().replace('_', '-');
+    const priority = (req.priority || '').toString().toLowerCase();
+    const initiatorName = req.initiator?.displayName || req.initiator?.email || req.initiatorName || 'N/A';
+    const department = req.department || req.initiator?.department || 'N/A';
+    const currentApprover = req.currentApprover?.displayName || req.currentApprover?.email || req.currentApproverName || 'N/A';
+    const approverLevel = req.currentApproverLevel || req.approvalLevel || req.currentLevel || 'N/A';
+    const submittedDate = formatDateForCSV(req.submittedAt || req.createdAt || req.submitted_at || req.created_at);
+    const description = (req.description || '').replace(/"/g, '""').replace(/\n/g, ' ').replace(/\r/g, '');
+
+    const row = [
+      req.requestNumber || req.request_number || '',
+      `"${(req.title || '').replace(/"/g, '""')}"`,
+      status,
+      priority,
+      `"${initiatorName.replace(/"/g, '""')}"`,
+      `"${department.replace(/"/g, '""')}"`,
+      `"${currentApprover.replace(/"/g, '""')}"`,
+      approverLevel,
+      submittedDate,
+      `"${description}"`
+    ];
+    csvRows.push(row.join(','));
+  });
+
+  const csvContent = csvRows.join('\n');
+  const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
+  const link = document.createElement('a');
+  const url = URL.createObjectURL(blob);
+  link.setAttribute('href', url);
+  link.setAttribute('download', `requests-export-${new Date().toISOString().split('T')[0]}.csv`);
+  link.style.visibility = 'hidden';
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+  URL.revokeObjectURL(url);
+}
+
diff --git a/src/pages/Requests/utils/requestCalculations.ts b/src/pages/Requests/utils/requestCalculations.ts
new file mode 100644
index 0000000..04f3b83
--- /dev/null
+++ b/src/pages/Requests/utils/requestCalculations.ts
@@ -0,0 +1,72 @@
+/**
+ * Calculation utilities for request stats
+ */
+
+import type { RequestStats, BackendStats } from '../types/requests.types';
+
+export function calculateStatsFromFilteredData(
+  allFilteredRequests: any[],
+  isOrgLevel: boolean,
+  backendStats: BackendStats | null,
+  hasActiveFilters: boolean,
+  totalRecords: number,
+  convertedRequests: any[]
+): RequestStats {
+  // Check if we have active filters (excluding default date range)
+  const hasFilters = hasActiveFilters;
+
+  // Use allFilteredRequests (all filtered data before pagination) for accurate stats
+  if (allFilteredRequests.length > 0) {
+    const total = allFilteredRequests.length;
+    const pending = allFilteredRequests.filter((r: any) => {
+      const status = (r.status || '').toString().toUpperCase();
+      return status === 'PENDING' || status === 'IN_PROGRESS';
+    }).length;
+    const approved = allFilteredRequests.filter((r: any) => {
+      const status = (r.status || '').toString().toUpperCase();
+      return status === 'APPROVED';
+    }).length;
+    const rejected = allFilteredRequests.filter((r: any) => {
+      const status = (r.status || '').toString().toUpperCase();
+      return status === 'REJECTED';
+    }).length;
+    const draft = allFilteredRequests.filter((r: any) => {
+      const status = (r.status || '').toString().toUpperCase();
+      return status === 'DRAFT';
+    }).length;
+    const closed = allFilteredRequests.filter((r: any) => {
+      const status = (r.status || '').toString().toUpperCase();
+      return status === 'CLOSED';
+    }).length;
+
+    return {
+      total,
+      pending,
+      approved,
+      rejected,
+      draft,
+      closed
+    };
+  } else if (isOrgLevel && !hasFilters && backendStats) {
+    // No filters and backend stats available - use backend stats for better performance
+    return {
+      total: backendStats.total,
+      pending: backendStats.pending,
+      approved: backendStats.approved,
+      rejected: backendStats.rejected,
+      draft: backendStats.draft,
+      closed: backendStats.closed
+    };
+  } else {
+    // Fallback: calculate from convertedRequests (paginated data - less accurate)
+    return {
+      total: totalRecords || convertedRequests.length,
+      pending: convertedRequests.filter(r => r.status === 'pending' || r.status === 'in-progress').length,
+      approved: convertedRequests.filter(r => r.status === 'approved').length,
+      rejected: convertedRequests.filter(r => r.status === 'rejected').length,
+      draft: convertedRequests.filter(r => r.status === 'draft').length,
+      closed: convertedRequests.filter(r => r.status === 'closed').length
+    };
+  }
+}
+
diff --git a/src/pages/Requests/utils/requestFilters.ts b/src/pages/Requests/utils/requestFilters.ts
new file mode 100644
index 0000000..01aec9d
--- /dev/null
+++ b/src/pages/Requests/utils/requestFilters.ts
@@ -0,0 +1,196 @@
+/**
+ * Filtering utilities for requests
+ */
+
+import dayjs from 'dayjs';
+import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
+import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
+import type { RequestFilters } from '../types/requests.types';
+
+dayjs.extend(isSameOrAfter);
+dayjs.extend(isSameOrBefore);
+
+export function applyFilters(data: any[], filters: RequestFilters): any[] {
+  let filteredData = [...data];
+
+  // Search filter
+  if (filters.search) {
+    const searchLower = filters.search.toLowerCase();
+    filteredData = filteredData.filter((req: any) =>
+      req.title?.toLowerCase().includes(searchLower) ||
+      req.description?.toLowerCase().includes(searchLower) ||
+      req.requestNumber?.toLowerCase().includes(searchLower) ||
+      req.request_number?.toLowerCase().includes(searchLower)
+    );
+  }
+
+  // Status filter
+  if (filters.status && filters.status !== 'all') {
+    if (filters.status.toLowerCase() === 'pending') {
+      filteredData = filteredData.filter((req: any) => {
+        const reqStatus = (req.status || '').toString().toUpperCase();
+        return reqStatus === 'PENDING' || reqStatus === 'IN_PROGRESS';
+      });
+    } else {
+      const statusUpper = filters.status.toUpperCase().replace('-', '_');
+      filteredData = filteredData.filter((req: any) => {
+        const reqStatus = (req.status || '').toString().toUpperCase();
+        if (statusUpper === 'IN_PROGRESS' || statusUpper === 'IN-PROGRESS') {
+          return reqStatus === 'IN_PROGRESS';
+        }
+        return reqStatus === statusUpper;
+      });
+    }
+  }
+
+  // Priority filter
+  if (filters.priority && filters.priority !== 'all') {
+    filteredData = filteredData.filter((req: any) =>
+      (req.priority || '').toString().toLowerCase() === filters.priority?.toLowerCase()
+    );
+  }
+
+  // Department filter
+  if (filters.department && filters.department !== 'all') {
+    filteredData = filteredData.filter((req: any) => {
+      const reqDepartment = req.department || req.initiator?.department || '';
+      return reqDepartment === filters.department;
+    });
+  }
+
+  // Initiator filter
+  if (filters.initiator && filters.initiator !== 'all') {
+    filteredData = filteredData.filter((req: any) => {
+      const initiatorId = req.initiatorId ||
+        req.initiator_id ||
+        req.initiator?.userId ||
+        req.initiator?.user_id ||
+        (req.initiator && typeof req.initiator === 'object' && 'userId' in req.initiator ? req.initiator.userId : null);
+      return initiatorId === filters.initiator;
+    });
+  }
+
+  // Approver filter
+  if (filters.approver && filters.approver !== 'all') {
+    const approverType = filters.approverType || 'current';
+
+    if (approverType === 'current') {
+      filteredData = filteredData.filter((req: any) => {
+        const approverId = req.currentApprover?.userId ||
+          req.currentApprover?.user_id ||
+          req.approvals?.find((a: any) => {
+            const status = (a.status || '').toString().toUpperCase();
+            return status === 'IN_PROGRESS' || status === 'PENDING';
+          })?.approverId ||
+          req.approvals?.find((a: any) => {
+            const status = (a.status || '').toString().toUpperCase();
+            return status === 'IN_PROGRESS' || status === 'PENDING';
+          })?.approver_id ||
+          req.currentApproverId ||
+          req.current_approver_id;
+        return approverId === filters.approver;
+      });
+    } else {
+      filteredData = filteredData.filter((req: any) => {
+        const allApproverIds: string[] = [];
+        if (req.currentApprover?.userId) allApproverIds.push(req.currentApprover.userId);
+        if (req.currentApprover?.user_id) allApproverIds.push(req.currentApprover.user_id);
+        if (Array.isArray(req.approvals)) {
+          req.approvals.forEach((a: any) => {
+            if (a.approverId) allApproverIds.push(a.approverId);
+            if (a.approver_id) allApproverIds.push(a.approver_id);
+          });
+        }
+        return allApproverIds.includes(filters.approver || '');
+      });
+    }
+  }
+
+  // SLA compliance filter
+  if (filters.slaCompliance && filters.slaCompliance !== 'all') {
+    filteredData = filteredData.filter((req: any) => {
+      const slaCompliance = filters.slaCompliance || '';
+      if (slaCompliance.toLowerCase() === 'compliant') {
+        const reqStatus = (req.status || '').toString().toUpperCase();
+        const isCompleted = reqStatus === 'APPROVED' || reqStatus === 'REJECTED' || reqStatus === 'CLOSED';
+        if (!isCompleted) return false;
+        const slaStatus = req.currentLevelSLA?.status ||
+          req.currentApprover?.sla?.status ||
+          req.sla?.status ||
+          req.summary?.sla?.status;
+        if (!slaStatus) return true;
+        return slaStatus !== 'breached' && slaStatus.toLowerCase() !== 'breached';
+      }
+
+      const slaStatus = req.currentLevelSLA?.status ||
+        req.currentApprover?.sla?.status ||
+        req.sla?.status ||
+        req.summary?.sla?.status;
+
+      if (!slaStatus) {
+        return slaCompliance === 'on-track' || slaCompliance === 'on_track';
+      }
+
+      const statusMap: Record<string, string> = {
+        'on-track': 'on_track',
+        'on_track': 'on_track',
+        'approaching': 'approaching',
+        'critical': 'critical',
+        'breached': 'breached'
+      };
+
+      const filterStatus = statusMap[slaCompliance.toLowerCase()] || slaCompliance.toLowerCase();
+      return slaStatus === filterStatus || slaStatus.toLowerCase() === filterStatus;
+    });
+  }
+
+  // Date range filter
+  if (filters.dateRange) {
+    let dateStart: Date | null = null;
+    let dateEnd: Date | null = null;
+
+    if (filters.dateRange === 'custom' && filters.startDate && filters.endDate) {
+      dateStart = dayjs(filters.startDate).startOf('day').toDate();
+      dateEnd = dayjs(filters.endDate).endOf('day').toDate();
+    } else {
+      const now = dayjs();
+      switch (filters.dateRange) {
+        case 'today':
+          dateStart = now.startOf('day').toDate();
+          dateEnd = now.endOf('day').toDate();
+          break;
+        case 'week':
+          dateStart = now.startOf('week').toDate();
+          dateEnd = now.endOf('week').toDate();
+          break;
+        case 'month':
+          dateStart = now.startOf('month').toDate();
+          dateEnd = now.endOf('month').toDate();
+          break;
+        default:
+          break;
+      }
+    }
+
+    if (dateStart && dateEnd) {
+      filteredData = filteredData.filter((req: any) => {
+        const submissionDate = req.submittedAt || req.submission_date || req.submitted_at;
+        if (!submissionDate) {
+          const createdDate = req.createdAt || req.created_at || req.created_date;
+          if (!createdDate) return false;
+          const reqDate = dayjs(createdDate).startOf('day').toDate();
+          const dateStartOnly = dayjs(dateStart).startOf('day').toDate();
+          const dateEndOnly = dayjs(dateEnd).endOf('day').toDate();
+          return reqDate >= dateStartOnly && reqDate <= dateEndOnly;
+        }
+        const reqDate = dayjs(submissionDate).startOf('day').toDate();
+        const dateStartOnly = dayjs(dateStart).startOf('day').toDate();
+        const dateEndOnly = dayjs(dateEnd).endOf('day').toDate();
+        return reqDate >= dateStartOnly && reqDate <= dateEndOnly;
+      });
+    }
+  }
+
+  return filteredData;
+}
+
diff --git a/src/pages/Requests/utils/requestTransformers.ts b/src/pages/Requests/utils/requestTransformers.ts
new file mode 100644
index 0000000..808a957
--- /dev/null
+++ b/src/pages/Requests/utils/requestTransformers.ts
@@ -0,0 +1,108 @@
+/**
+ * Transformers for converting API request data to display format
+ */
+
+import type { ConvertedRequest } from '../types/requests.types';
+
+export function transformRequest(req: any): ConvertedRequest {
+  const createdAt = req.submittedAt || req.submitted_at || req.createdAt || req.created_at;
+  const priority = (req.priority || '').toString().toLowerCase();
+  const status = (req.status || '').toString().toUpperCase();
+  
+  // Extract current approver - handle multiple field name variations
+  let currentApprover = '—';
+  let approverLevel = '—';
+  
+  // Try to get current approver from various possible locations
+  const currentApproverObj = req.currentApprover || req.current_approver || req.currentApproverData;
+  if (currentApproverObj) {
+    // Handle object format: { name, email, approverName, approverEmail, etc. }
+    currentApprover = currentApproverObj.name || 
+                     currentApproverObj.approverName || 
+                     currentApproverObj.displayName ||
+                     currentApproverObj.email || 
+                     currentApproverObj.approverEmail || 
+                     '—';
+  } else if (req.approvals && Array.isArray(req.approvals) && req.approvals.length > 0) {
+    // For completed requests, show the last approver (final approver)
+    // For active requests, find the current pending/in-progress approver
+    const activeApproval = req.approvals.find((a: any) => {
+      const aStatus = (a.status || '').toString().toUpperCase();
+      return aStatus === 'PENDING' || aStatus === 'IN_PROGRESS';
+    });
+    
+    if (activeApproval) {
+      // Active request - show current approver
+      currentApprover = activeApproval.approverName || 
+                       activeApproval.approver?.name ||
+                       activeApproval.approver?.displayName ||
+                       activeApproval.approverEmail || 
+                       activeApproval.approver?.email || 
+                       '—';
+    } else {
+      // Completed request - show final approver (last one in the array, or highest level)
+      const sortedApprovals = [...req.approvals].sort((a: any, b: any) => {
+        const aLevel = a.levelNumber || a.level_number || 0;
+        const bLevel = b.levelNumber || b.level_number || 0;
+        return bLevel - aLevel; // Sort descending to get highest level
+      });
+      const finalApproval = sortedApprovals[0];
+      if (finalApproval) {
+        currentApprover = finalApproval.approverName || 
+                         finalApproval.approver?.name ||
+                         finalApproval.approver?.displayName ||
+                         finalApproval.approverEmail || 
+                         finalApproval.approver?.email || 
+                         '—';
+      }
+    }
+  }
+  
+  // Extract approval level information - handle multiple field name variations
+  const currentLevel = req.currentLevel || req.current_level || req.currentLevelNumber || req.current_level_number;
+  const totalLevels = req.totalLevels || req.total_levels || req.totalLevelsCount || req.total_levels_count;
+  
+  if (currentLevel && totalLevels) {
+    approverLevel = `${currentLevel} of ${totalLevels}`;
+  } else if (req.approvals && Array.isArray(req.approvals) && req.approvals.length > 0) {
+    // Fallback: calculate from approvals array
+    const activeApproval = req.approvals.find((a: any) => {
+      const aStatus = (a.status || '').toString().toUpperCase();
+      return aStatus === 'PENDING' || aStatus === 'IN_PROGRESS';
+    });
+    
+    if (activeApproval) {
+      const levelNum = activeApproval.levelNumber || activeApproval.level_number || 0;
+      const total = totalLevels || req.approvals.length;
+      approverLevel = `${levelNum} of ${total}`;
+    } else if (totalLevels) {
+      // Completed request - show final level
+      approverLevel = `${totalLevels} of ${totalLevels}`;
+    }
+  } else if (req.currentStep && req.totalSteps) {
+    // Alternative field names
+    approverLevel = `${req.currentStep} of ${req.totalSteps}`;
+  }
+  
+  return {
+    id: req.requestNumber || req.request_number || req.requestId || req.id || req.request_id,
+    requestId: req.requestId || req.id || req.request_id,
+    displayId: req.requestNumber || req.request_number || req.id,
+    title: req.title,
+    description: req.description,
+    status: status.toLowerCase().replace('_','-'),
+    priority: priority,
+    department: req.department || req.initiator?.department,
+    submittedDate: req.submittedAt || (req.createdAt ? new Date(req.createdAt).toISOString().split('T')[0] : undefined),
+    createdAt: createdAt,
+    currentApprover: currentApprover,
+    approverLevel: approverLevel,
+    templateType: req.templateType,
+    templateName: req.templateName
+  };
+}
+
+export function transformRequests(requests: any[]): ConvertedRequest[] {
+  return Array.isArray(requests) ? requests.map(transformRequest) : [];
+}
+