amp-workflow-ui 0.1.15 → 0.1.17

package/dist/index.mjs

@@ -1,15 +1,17 @@
 import React7, { createContext, useState, useEffect, useCallback, useContext, useRef } from 'react';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import Button7 from '@mui/material/Button';
-import Dialog from '@mui/material/Dialog';
+import Dialog$1 from '@mui/material/Dialog';
 import { styled, useTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
-import DialogActions5 from '@mui/material/DialogActions';
+import DialogActions6 from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
-import { Card, styled as styled$1, Chip, IconButton, useTheme as useTheme$1, Tooltip, CardContent, Typography, Divider, CircularProgress, Box as Box$1, TextField, InputAdornment, Button, Menu, MenuItem, DialogTitle, Grid, DialogActions, Snackbar, Alert, FormControl, InputLabel, Select } from '@mui/material';
+import { Dialog, Box, TextField, styled as styled$1, Chip, DialogTitle, IconButton, useTheme as useTheme$1, Tooltip, CircularProgress, Typography, DialogContent as DialogContent$1, InputAdornment, Button, Grid, DialogActions, Snackbar, Alert, FormControl, InputLabel, Select, MenuItem } from '@mui/material';
 import HighlightOffIcon from '@mui/icons-material/HighlightOff';
-import { Box } from '@mui/system';
+import { FilterAlt, CheckCircleOutlineOutlined } from '@mui/icons-material';
 import moment from 'moment';
+import { Box as Box$1 } from '@mui/system';
+import CloseIcon from '@mui/icons-material/Close';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 
 // src/context.tsx
 var WorkflowContext = createContext(null);
@@ -26,59 +28,578 @@ function useWorkflowContext() {
   }
   return ctx;
 }
-var ActionMenu = ({
-  onSendBack,
-  onApprove,
-  onReject,
-  onHold,
-  level,
-  statusList
+
+// #style-inject:#style-inject
+function styleInject(css, { insertAt } = {}) {
+  if (!css || typeof document === "undefined") return;
+  const head = document.head || document.getElementsByTagName("head")[0];
+  const style = document.createElement("style");
+  style.type = "text/css";
+  if (insertAt === "top") {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+// src/ui/style.css
+styleInject('.hide-scrollbar {\n  overflow: auto !important;\n  -ms-overflow-style: none !important;\n  scrollbar-width: none !important;\n}\n.hide-scrollbar::-webkit-scrollbar {\n  display: none !important;\n}\n.approval-card {\n  position: relative;\n  background-color: #f5f5f5;\n  border-radius: 8px;\n  width: 1069px;\n  min-height: 250px;\n  height: auto;\n  padding: 24px;\n  font-family:\n    "Graphik Web",\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    sans-serif;\n  margin-bottom: 10px;\n  display: flex;\n  flex-direction: column;\n}\n.card-title {\n  color: #3f41d1;\n  font-size: 18px;\n  font-weight: 600;\n  text-decoration: underline;\n  text-transform: capitalize;\n  margin-top: -7px;\n  margin-bottom: 24px;\n}\n.vertical-divider {\n  position: absolute;\n  left: 884px;\n  top: 24px;\n  width: 1px;\n  height: 128px;\n  background-color: #d9d9d9;\n}\n.timer-container {\n  position: absolute;\n  left: 916px;\n  top: 24px;\n  width: 121px;\n  height: 121px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.timer-svg {\n  position: absolute;\n  width: 121px;\n  height: 121px;\n}\n.timer-content {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 4px;\n  z-index: 1;\n}\n.timer-time {\n  color: #3a9f4b;\n  font-size: 14px;\n  font-weight: 600;\n  line-height: 16px;\n  letter-spacing: 0.5px;\n}\n.timer-time-expired {\n  color: #e6393e;\n}\n.timer-label {\n  color: #666;\n  font-size: 12px;\n  line-height: 16px;\n}\n.details-section {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  padding-right: 185px;\n  margin-bottom: 32px;\n  min-height: 80px;\n}\n.details-row {\n  display: flex;\n  gap: 64px;\n}\n.details-column {\n  display: flex;\n  flex-direction: column;\n}\n.detail-item {\n  color: #666;\n  font-size: 14px;\n  line-height: 21px;\n  text-transform: capitalize;\n  margin: 0;\n}\n.detail-label {\n  font-weight: 500;\n}\n.view-more-container {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-top: 8px;\n}\n.view-more-button {\n  background-color: #f5f5f5;\n  border: 1px solid #e697ab;\n  border-radius: 8px;\n  padding: 4px 12px;\n  color: #3e3e3e;\n  font-size: 14px;\n  font-weight: 500;\n  text-transform: capitalize;\n  cursor: pointer;\n  line-height: 21px;\n}\n.expand-icon {\n  color: #666;\n  font-size: 18px;\n  transform: rotate(270deg);\n}\n.actions-container {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  margin-bottom: 18px;\n}\n.progress-bar {\n  background-color: white;\n  border: 1px solid #3f41d1;\n  border-radius: 12px;\n  padding: 4px 14px 4px 5px;\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  height: 40px;\n}\n.bus-icon {\n  width: 35px;\n  height: 29px;\n}\n.progress-steps {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n}\n.step-icon {\n  width: 17px;\n  height: 17px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.step-completed {\n  background-color: #eaebfa;\n}\n.step-approved {\n  background-color: #3a9f4b;\n}\n.step-inactive {\n  background-color: #f6f6f6;\n  border: 1px solid #a3a3a3;\n}\n.step-line {\n  width: 33px;\n  height: 1px;\n}\n.step-line-completed {\n  background-color: #3a9f4b;\n}\n.step-line-inactive {\n  background-color: #e3e3e3;\n}\n.step-chip-current {\n  background-color: #bef2bf !important;\n  color: #3e3e3e !important;\n  font-size: 14px !important;\n  font-weight: 500 !important;\n  height: 29px !important;\n  border-radius: 14.5px !important;\n  text-transform: capitalize;\n}\n.step-chip-next {\n  background-color: #eff4f2 !important;\n  color: #3e3e3e !important;\n  font-size: 14px !important;\n  font-weight: 500 !important;\n  height: 29px !important;\n  border-radius: 14.5px !important;\n  text-transform: capitalize;\n}\n.vertical-separator {\n  width: 1px;\n  height: 29px;\n  background-color: #e3e3e3;\n}\n.assignee-text {\n  color: #666;\n  font-size: 14px;\n  line-height: 21px;\n  text-transform: capitalize;\n}\n.assignee-label {\n  font-weight: 500;\n}\n.action-buttons {\n  display: flex;\n  gap: 14px;\n}\n.btn-reject,\n.btn-send-back {\n  border-color: #666 !important;\n  color: #666 !important;\n  border-radius: 100px !important;\n  text-transform: capitalize !important;\n  font-weight: 500 !important;\n  font-size: 14px !important;\n  height: 40px;\n  min-width: 106px;\n}\n.btn-approve {\n  background-color: #3f41d1 !important;\n  color: white !important;\n  border-radius: 100px !important;\n  text-transform: capitalize !important;\n  font-weight: 500 !important;\n  font-size: 14px !important;\n  height: 40px;\n}\n.btn-approve:hover {\n  background-color: #3436b0 !important;\n}\n.horizontal-divider {\n  width: 100%;\n  height: 1px;\n  background-color: #d9d9d9;\n  margin-bottom: 18px;\n}\n.timeline-container {\n  display: block;\n}\n.timeline-item {\n  width: 215px;\n  height: 157px;\n  position: relative;\n}\n.timeline-card {\n  position: absolute;\n  top: 16px;\n  width: 215px;\n  height: 141px;\n  background-color: white;\n  border-radius: 16px;\n  padding: 16px;\n  position: relative;\n}\n.timeline-card.active {\n  border: 1px solid #3f41d1;\n}\n.timeline-badge {\n  position: absolute !important;\n  top: -16px;\n  left: 8px;\n  width: 32px !important;\n  height: 32px !important;\n  border-radius: 50% !important;\n  font-size: 14px !important;\n  font-weight: 500 !important;\n  text-transform: capitalize !important;\n  border: 3px solid #f6f6f6;\n}\n.badge-l0 {\n  background-color: #eaebfa !important;\n  color: #3f41d1 !important;\n}\n.badge-l1-bg {\n  background-color: #fbcecf !important;\n  color: #3e3e3e !important;\n}\n.badge-l1-approved {\n  background-color: #3a9f4b !important;\n  color: white !important;\n}\n.badge-l1-rejected {\n  background-color: #e6393e !important;\n  color: white !important;\n}\n.badge-l1-sendback {\n  background-color: #dcecf9 !important;\n  color: #237ecd !important;\n}\n.badge-l2-active {\n  background-color: #f4f0ef !important;\n  color: #3e3e3e !important;\n  border: 1px solid #3f41d1 !important;\n}\n.timeline-badge-wrapper {\n  position: absolute;\n  top: -16px;\n  left: 8px;\n  width: 32px;\n  height: 32px;\n}\n.timeline-badge-wrapper .timeline-badge {\n  position: absolute !important;\n  top: 0;\n  left: 0;\n}\n.timeline-badge-wrapper-active {\n  position: absolute;\n  top: -20px;\n  left: 4px;\n  width: 38px;\n  height: 38px;\n}\n.timeline-badge-wrapper-active .timeline-badge {\n  position: absolute !important;\n  top: 3px;\n  left: 3px;\n}\n.timeline-type {\n  color: #666;\n  font-size: 12px;\n  line-height: 13px;\n  text-transform: capitalize;\n  margin-top: 12px;\n  margin-bottom: 8px;\n}\n.timeline-type.approved {\n  color: #3a9f4b;\n  font-weight: 600;\n}\n.timeline-type.rejected {\n  color: #e6393e;\n  font-weight: 600;\n}\n.timeline-type.sendback {\n  color: #237ecd;\n  font-weight: 600;\n}\n.timeline-name {\n  color: #3e3e3e;\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 21px;\n  margin-bottom: 8px;\n  text-transform: capitalize;\n}\n.timeline-message {\n  color: #666;\n  font-size: 12px;\n  line-height: 13px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  margin-bottom: 24px;\n}\n.attachments {\n  color: #0612fb;\n  font-size: 12px;\n  line-height: 13px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  margin-bottom: 24px;\n  cursor: pointer;\n}\n.timeline-date {\n  position: absolute;\n  bottom: 16px;\n  right: 16px;\n  color: #666;\n  font-size: 12px;\n  line-height: 14px;\n  text-align: right;\n  text-transform: capitalize;\n}\n.timeline-connector {\n  width: 45px;\n  height: 157px;\n  flex-shrink: 0;\n}\n.timeline-connector svg {\n  width: 100%;\n  height: 100%;\n}\n@media (max-width: 1200px) {\n  .approval-card {\n    width: 100%;\n    height: auto;\n    min-height: 437px;\n  }\n}\n.flag {\n  position: absolute;\n  top: 0;\n  right: 0;\n  padding: 3px 4px;\n  border: 2px solid #b28900;\n  border-radius: 5px;\n  color: #b28900;\n  font-size: 12px;\n}\n');
+
+// src/common-component/index.css
+styleInject('.workflow-btn {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  padding: 10px 24px;\n  gap: 8px;\n  height: 40px;\n  border-radius: 100px;\n  border: none;\n  cursor: pointer;\n  font-family: "Graphik Web", sans-serif;\n  font-style: normal;\n  font-weight: 500;\n  font-size: 14px;\n  line-height: 14px;\n  text-align: center;\n  text-transform: capitalize;\n  background: transparent;\n  outline: none;\n}\n.workflow-btn.variant-reject,\n.workflow-btn.variant-send-back {\n  background: #FFFFFF;\n  border: 1px solid #666666;\n  color: #666666;\n}\n.workflow-btn.variant-approve {\n  background: #3F41D1;\n  color: #FFFFFF;\n}\n.workflow-btn.variant-status-approved {\n  background: #3A9F4B;\n  color: #CDF3E2;\n}\n.workflow-btn.variant-status-sent-back {\n  background: #237ECD;\n  color: #DCECF9;\n}\n.workflow-btn.variant-status-rejected {\n  background: #FAD7D8;\n  color: #E6393E;\n}\n');
+var variantClassMap = {
+  reject: "variant-reject",
+  "send-back": "variant-send-back",
+  approve: "variant-approve",
+  approved: "variant-status-approved",
+  "status-sent-back": "variant-status-sent-back",
+  pending: "variant-status-sent-back",
+  rejected: "variant-status-rejected"
+};
+var WorkflowButton = ({
+  variant,
+  label,
+  className = "",
+  children,
+  ...props
 }) => {
-  const [anchorEl, setAnchorEl] = useState(null);
-  const open = Boolean(anchorEl);
-  const handleActionClick = (event) => {
-    setAnchorEl(event.currentTarget);
+  const variantClass = variantClassMap[variant];
+  return /* @__PURE__ */ jsx("button", { className: `workflow-btn ${variantClass} ${className}`, ...props, children: label || children });
+};
+var WorkflowButton_default = WorkflowButton;
+var CONNECTOR = {
+  horizontal: {
+    lengthExtra: 0},
+  vertical: {
+    thickness: 3}
+};
+var CARD_WIDTH = 215;
+var CARD_HEIGHT = 157;
+var GAP = 45;
+var ROW_GAP = 45;
+function WorkFlowTimeline({ events }) {
+  const { api } = useWorkflowContext();
+  const computeColumn = (index) => {
+    const row = Math.floor(index / 4);
+    const pos = index % 4;
+    return row % 2 === 0 ? pos : 3 - pos;
   };
-  const handleClose = () => setAnchorEl(null);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Button, { variant: "contained", color: "primary", onClick: handleActionClick, children: "Apply Action" }),
-    /* @__PURE__ */ jsxs(
-      Menu,
-      {
-        anchorEl,
-        open,
-        onClose: handleClose,
-        MenuListProps: { "aria-labelledby": "basic-button" },
-        children: [
-          !level && /* @__PURE__ */ jsx(
-            MenuItem,
+  const hasNextCard = (i) => i + 1 < events.length;
+  const getHorizontalY = (rowIndex) => {
+    const centerY = 86.5;
+    return centerY;
+  };
+  const isVerticalNeeded = (index) => (index + 1) % 4 === 0 && hasNextCard(index);
+  const handleAttachmentClick = (attachment) => {
+    api.get({
+      url: `/workflow/uploaded-document-url/${attachment.split("/").reverse()[0]}`,
+      serviceURL: "api"
+    }).then((res) => {
+      window.open(res.data, "_blank");
+    });
+  };
+  return /* @__PURE__ */ jsx(Box, { sx: { width: "100%", overflowX: "auto", p: 1 }, children: /* @__PURE__ */ jsx(
+    Box,
+    {
+      sx: {
+        position: "relative",
+        display: "grid",
+        gridTemplateColumns: `repeat(4, ${CARD_WIDTH}px)`,
+        columnGap: `${GAP}px`,
+        rowGap: `${ROW_GAP}px`,
+        width: "max-content"
+      },
+      children: events == null ? void 0 : events.map((item, index) => {
+        const row = Math.floor(index / 4);
+        const col = computeColumn(index);
+        const isLastInRow = index % 4 === 3;
+        return /* @__PURE__ */ jsxs(
+          Box,
+          {
+            sx: {
+              gridColumn: col + 1,
+              gridRow: row + 1,
+              position: "relative",
+              width: `${CARD_WIDTH}px`,
+              height: `${CARD_HEIGHT}px`
+            },
+            children: [
+              !isLastInRow && hasNextCard(index) && /* @__PURE__ */ jsx(
+                Box,
+                {
+                  sx: {
+                    position: "absolute",
+                    top: getHorizontalY(),
+                    // If row is Even (LTR), connector goes to RIGHT.
+                    // If row is Odd (RTL), connector goes to LEFT.
+                    left: row % 2 === 0 ? "100%" : "auto",
+                    right: row % 2 !== 0 ? "100%" : "auto",
+                    width: GAP + CONNECTOR.horizontal.lengthExtra,
+                    zIndex: 0,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    transform: row % 2 !== 0 ? "scaleX(-1)" : "none"
+                    // Flip for RTL if needed, though line is symmetric
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    "svg",
+                    {
+                      width: "65",
+                      height: "3",
+                      viewBox: "0 0 65 3",
+                      fill: "none",
+                      style: { width: "100%" },
+                      children: /* @__PURE__ */ jsx(
+                        "line",
+                        {
+                          x1: "0",
+                          y1: "1.5",
+                          x2: "65",
+                          y2: "1.5",
+                          stroke: "#3F41D1",
+                          strokeWidth: "1",
+                          strokeDasharray: "6 6",
+                          strokeLinecap: "round"
+                        }
+                      )
+                    }
+                  )
+                }
+              ),
+              isVerticalNeeded(index) && /* @__PURE__ */ jsx(
+                Box,
+                {
+                  sx: {
+                    position: "absolute",
+                    top: "100%",
+                    // Start at bottom of item
+                    left: "50%",
+                    transform: "translateX(-50%)",
+                    width: CONNECTOR.vertical.thickness,
+                    height: ROW_GAP,
+                    // Span the row gap
+                    zIndex: 0,
+                    display: "flex",
+                    justifyContent: "center"
+                  },
+                  children: /* @__PURE__ */ jsx("svg", { width: "3", height: 70, viewBox: `0 0 3 70`, fill: "none", children: /* @__PURE__ */ jsx(
+                    "line",
+                    {
+                      x1: "1.5",
+                      y1: "0",
+                      x2: "1.5",
+                      y2: 70,
+                      stroke: "#3F41D1",
+                      strokeWidth: "1",
+                      strokeDasharray: "6 6",
+                      strokeLinecap: "round"
+                    }
+                  ) })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Box,
+                {
+                  className: "timeline-item",
+                  sx: { width: "100%", height: "100%" },
+                  children: /* @__PURE__ */ jsxs(
+                    Box,
+                    {
+                      className: `timeline-card ${events.length - 1 === index ? "active" : ""}`,
+                      children: [
+                        /* @__PURE__ */ jsx(Chip, { label: "", className: "timeline-badge badge-l0" }),
+                        /* @__PURE__ */ jsx(
+                          Chip,
+                          {
+                            label: item == null ? void 0 : item.count,
+                            className: `timeline-badge badge-l1-${(item == null ? void 0 : item.type) == "approve" ? "approved" : (item == null ? void 0 : item.type) == "reject" ? "rejected" : (item == null ? void 0 : item.type) == "send_back" ? "sendback" : ""}`,
+                            sx: {
+                              "& .MuiChip-label": {
+                                padding: "0px"
+                              }
+                            }
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          Typography,
+                          {
+                            className: `timeline-type ${(item == null ? void 0 : item.type) == "approve" ? "approved" : (item == null ? void 0 : item.type) == "reject" ? "rejected" : (item == null ? void 0 : item.type) == "send_back" ? "sendback" : ""}`,
+                            children: item == null ? void 0 : item.status
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(Typography, { className: "timeline-name", children: item == null ? void 0 : item.name }),
+                        /* @__PURE__ */ jsx(Typography, { className: "timeline-message", children: item == null ? void 0 : item.subTitle }),
+                        (item == null ? void 0 : item.attachment) && /* @__PURE__ */ jsx(
+                          Typography,
+                          {
+                            className: "attachments",
+                            onClick: () => handleAttachmentClick(item == null ? void 0 : item.attachment),
+                            children: "Attachments"
+                          }
+                        ),
+                        /* @__PURE__ */ jsxs(Typography, { className: "timeline-date", children: [
+                          item == null ? void 0 : item.date,
+                          " ",
+                          item == null ? void 0 : item.time
+                        ] })
+                      ]
+                    }
+                  )
+                }
+              )
+            ]
+          },
+          index
+        );
+      })
+    }
+  ) });
+}
+function WorkflowRequestCard({
+  requestDetails,
+  index,
+  isLast,
+  lastCardRef,
+  expandedId,
+  handleExpandClick,
+  handleOpenViewMore,
+  handleApprove,
+  handleReject,
+  handleSendBack,
+  handleOnHold,
+  expandedDetails,
+  userInfo,
+  helpers
+}) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
+  const { timeLeftDHm, getStatus, buildRedirectionUrl } = helpers;
+  const allCurrentAssignees = (_a = requestDetails == null ? void 0 : requestDetails.levels) == null ? void 0 : _a.map(
+    (level) => {
+      var _a2;
+      return (_a2 = level == null ? void 0 : level.assign_to_name) == null ? void 0 : _a2[0];
+    }
+  );
+  const allCurrentEscalatedAssignees = (_b = requestDetails == null ? void 0 : requestDetails.levels) == null ? void 0 : _b.map(
+    (level) => {
+      var _a2;
+      return timeLeftDHm(level == null ? void 0 : level.tat_expiry) === "0d: 0h: 0m" ? (_a2 = level == null ? void 0 : level.escalate_assign_to_name) == null ? void 0 : _a2[0] : "";
+    }
+  );
+  const allAssignees = [
+    .../* @__PURE__ */ new Set([...allCurrentAssignees, ...allCurrentEscalatedAssignees])
+  ].filter((item) => item);
+  console.log("\u{1F680} ~ WorkflowRequestCard ~ allAssignees:", allAssignees);
+  const currentLevel = (_c = requestDetails == null ? void 0 : requestDetails.levels) == null ? void 0 : _c.find(
+    (level_) => level_.id === (requestDetails == null ? void 0 : requestDetails.current_level)
+  );
+  const currentlyAssignedUserArray = (currentLevel == null ? void 0 : currentLevel.assign_to_name) || [];
+  const currentlyEscaltedUserArray = (currentLevel == null ? void 0 : currentLevel.escalate_assign_to_name) || [];
+  const currentlyAssignedUser = (currentLevel == null ? void 0 : currentLevel.assign_to_name) ? currentLevel == null ? void 0 : currentLevel.assign_to_name[0] : "NA";
+  const currentlyEscalatedUser = (currentLevel == null ? void 0 : currentLevel.escalate_assign_to_name) ? currentLevel == null ? void 0 : currentLevel.escalate_assign_to_name[0] : "NA";
+  console.log(
+    "\u{1F680} ~ WorkflowRequestCard ~ currentlyEscalatedUser:",
+    currentLevel == null ? void 0 : currentLevel.escalate_assign_to_name
+  );
+  const extraCurrentlyAssignedUserCount = currentlyAssignedUserArray.length - 1;
+  const extraCurrentlyEscalatedUserCount = currentlyEscaltedUserArray.length - 1;
+  const statusList = currentLevel ? currentLevel.status_list : [];
+  const filterRejectForLevelZero = (statusList2, info) => {
+    if (!(info == null ? void 0 : info.isLevelZero)) return statusList2;
+    return statusList2 == null ? void 0 : statusList2.filter((item) => item.status !== 3);
+  };
+  const redirectionUrl = buildRedirectionUrl(requestDetails);
+  const currentStatus = ((_f = (_e = (_d = requestDetails == null ? void 0 : requestDetails.levels) == null ? void 0 : _d.find(
+    (lvl) => lvl.id === (requestDetails == null ? void 0 : requestDetails.current_level)
+  )) == null ? void 0 : _e.selected_status) == null ? void 0 : _f.status_id) === 1 ? "approved" : ((_i = (_h = (_g = requestDetails == null ? void 0 : requestDetails.levels) == null ? void 0 : _g.find(
+    (lvl) => lvl.id === (requestDetails == null ? void 0 : requestDetails.current_level)
+  )) == null ? void 0 : _h.selected_status) == null ? void 0 : _i.status_id) === 3 ? "rejected" : "pending";
+  getStatus(currentStatus);
+  const descriptionDetails = (_j = requestDetails == null ? void 0 : requestDetails.template_variables) == null ? void 0 : _j.description_variables;
+  const formatKey = (key) => key.replace(/_/g, " ").replace(/\b\w/g, (char) => char.toUpperCase());
+  const displayEntries = descriptionDetails ? Object.entries(descriptionDetails).filter(
+    ([, value]) => typeof value === "string" || typeof value === "number"
+  ) : [];
+  const userLevel = (requestDetails == null ? void 0 : requestDetails.isLevelZero) ? "L0" : "L" + (((_l = (_k = requestDetails == null ? void 0 : requestDetails.levels) == null ? void 0 : _k.findIndex(
+    (lvl) => lvl.id === (requestDetails == null ? void 0 : requestDetails.current_level)
+  )) != null ? _l : -1) + 1 || "");
+  const tatExpired = timeLeftDHm(currentLevel == null ? void 0 : currentLevel.tat_expiry) === "0d: 0h: 0m";
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      className: "approval-card",
+      ref: isLast ? lastCardRef : null,
+      children: [
+        (requestDetails == null ? void 0 : requestDetails.is_parallel) && /* @__PURE__ */ jsx("span", { className: "flag", children: "Parallel Workflow" }),
+        /* @__PURE__ */ jsx(Typography, { className: "card-title", children: /* @__PURE__ */ jsx("a", { href: redirectionUrl, target: "_blank", rel: "noreferrer", children: requestDetails.activity_name }) }),
+        /* @__PURE__ */ jsx("div", { className: "vertical-divider" }),
+        /* @__PURE__ */ jsx(Box, { className: "timer-container", children: /* @__PURE__ */ jsxs(Box, { className: "timer-content", children: [
+          /* @__PURE__ */ jsx(
+            Typography,
             {
-              onClick: () => {
-                onSendBack();
-                handleClose();
-              },
-              children: "Send Back"
+              className: `${timeLeftDHm(currentLevel == null ? void 0 : currentLevel.tat_expiry) === "0d: 0h: 0m" ? "timer-time-expired" : "timer-time"}`,
+              children: (currentLevel == null ? void 0 : currentLevel.tat_expiry) ? timeLeftDHm(currentLevel.tat_expiry) : "N/A"
             }
           ),
-          statusList.map((list) => /* @__PURE__ */ jsx(
-            MenuItem,
+          /* @__PURE__ */ jsx(Typography, { className: "timer-label", children: "Time Left" })
+        ] }) }),
+        /* @__PURE__ */ jsxs(Box, { className: "details-section", children: [
+          /* @__PURE__ */ jsxs(Box, { className: "details-row", children: [
+            /* @__PURE__ */ jsx(Box, { className: "details-column", children: displayEntries.slice(0, 3).map((entry, i) => /* @__PURE__ */ jsxs(Typography, { className: "detail-item", children: [
+              /* @__PURE__ */ jsxs("span", { style: { fontWeight: "bold" }, className: "detail-label", children: [
+                formatKey(entry[0]),
+                ":"
+              ] }),
+              " ",
+              entry[1]
+            ] }, i)) }),
+            /* @__PURE__ */ jsx(Box, { className: "details-column", children: displayEntries.slice(3, 6).map((entry, i) => /* @__PURE__ */ jsxs(Typography, { className: "detail-item", children: [
+              /* @__PURE__ */ jsxs("span", { style: { fontWeight: "bold" }, className: "detail-label", children: [
+                formatKey(entry[0]),
+                ":"
+              ] }),
+              " ",
+              entry[1]
+            ] }, i)) })
+          ] }),
+          /* @__PURE__ */ jsx(Box, { className: "view-more-container", children: displayEntries.length > 0 && /* @__PURE__ */ jsx(
+            "button",
             {
-              onClick: () => {
-                if (list.status === 1) onApprove();
-                else if (list.status === 2) onHold();
-                else if (list.status === 3) onReject();
-                handleClose();
-              },
-              children: list.name
-            },
-            list.id
-          ))
-        ]
-      }
-    )
-  ] });
-};
-var Statusselector_default = ActionMenu;
+              className: "view-more-button",
+              onClick: () => handleOpenViewMore(displayEntries),
+              children: "View More"
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxs(Box, { className: "actions-container", children: [
+          /* @__PURE__ */ jsxs(Box, { className: "progress-bar", children: [
+            /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                color: "primary",
+                onClick: () => handleExpandClick(requestDetails._id),
+                children: expandedId === requestDetails._id ? /* @__PURE__ */ jsx("span", { className: "icon-arrow-down-1" }) : /* @__PURE__ */ jsx("span", { className: "icon-arrow-right-3" })
+              }
+            ),
+            /* @__PURE__ */ jsxs(Box, { className: "progress-steps", children: [
+              userLevel == "L0" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(Chip, { label: "L0", className: "step-chip-current" }),
+                /* @__PURE__ */ jsx("div", { className: "step-line step-line-inactive" })
+              ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(Box, { className: "step-icon step-completed", children: /* @__PURE__ */ jsx(
+                  CheckCircleOutlineOutlined,
+                  {
+                    sx: { fontSize: 14, color: "#3F41D1" }
+                  }
+                ) }),
+                /* @__PURE__ */ jsx("div", { className: "step-line step-line-inactive" })
+              ] }),
+              (_m = requestDetails == null ? void 0 : requestDetails.levels) == null ? void 0 : _m.map((_, idx) => {
+                const level = idx + 1;
+                return /* @__PURE__ */ jsx(React7.Fragment, { children: userLevel == "L" + level ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(Chip, { label: "L" + level, className: "step-chip-current" }),
+                  (requestDetails == null ? void 0 : requestDetails.levels.length) !== level && /* @__PURE__ */ jsx("div", { className: "step-line step-line-inactive" })
+                ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                  level > +userLevel.split("")[1] ? (
+                    // <Box className="step-icon step-inactive"></Box>
+                    /* @__PURE__ */ jsx(Chip, { label: "L" + level, className: "step-chip-next" })
+                  ) : /* @__PURE__ */ jsx(Box, { className: "step-icon step-completed", children: /* @__PURE__ */ jsx(
+                    CheckCircleOutlineOutlined,
+                    {
+                      sx: { fontSize: 14, color: "#3F41D1" }
+                    }
+                  ) }),
+                  (requestDetails == null ? void 0 : requestDetails.levels.length) !== level && /* @__PURE__ */ jsx("div", { className: "step-line step-line-inactive" })
+                ] }) }, idx);
+              })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "vertical-separator" }),
+            (requestDetails == null ? void 0 : requestDetails.is_parallel) ? /* @__PURE__ */ jsx(Fragment, { children: allAssignees.length > 1 ? /* @__PURE__ */ jsx(
+              Tooltip,
+              {
+                title: /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    sx: {
+                      backgroundColor: "#fff",
+                      padding: "10px",
+                      borderRadius: "5px"
+                    },
+                    children: allAssignees.map((user, index2) => /* @__PURE__ */ jsx(
+                      Typography,
+                      {
+                        className: "assignee-text",
+                        variant: "body2",
+                        children: user
+                      },
+                      index2
+                    ))
+                  }
+                ),
+                arrow: true,
+                placement: "top",
+                componentsProps: {
+                  tooltip: {
+                    sx: {
+                      backgroundColor: "#fff",
+                      color: "#000",
+                      boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
+                      borderRadius: "6px",
+                      p: 1
+                    }
+                  },
+                  arrow: {
+                    sx: {
+                      color: "#fff"
+                    }
+                  }
+                },
+                children: /* @__PURE__ */ jsxs(
+                  Typography,
+                  {
+                    className: "assignee-text",
+                    sx: { cursor: "pointer" },
+                    children: [
+                      /* @__PURE__ */ jsx("span", { className: "assignee-label", children: "Current Assignee:" }),
+                      " ",
+                      allAssignees.length > 0 ? `${allAssignees[0]} +${allAssignees.length - 1}` : allAssignees[0]
+                    ]
+                  }
+                )
+              }
+            ) : /* @__PURE__ */ jsxs(
+              Typography,
+              {
+                className: "assignee-text",
+                sx: { cursor: "pointer" },
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "assignee-label", children: "Current Assignee:" }),
+                  " ",
+                  allAssignees[0]
+                ]
+              }
+            ) }) : extraCurrentlyAssignedUserCount > 0 || tatExpired && extraCurrentlyEscalatedUserCount > 0 ? /* @__PURE__ */ jsx(
+              Tooltip,
+              {
+                title: /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    sx: {
+                      backgroundColor: "#fff",
+                      padding: "10px",
+                      borderRadius: "5px"
+                    },
+                    children: (tatExpired ? currentlyEscaltedUserArray : currentlyAssignedUserArray).map((user, index2) => /* @__PURE__ */ jsx(
+                      Typography,
+                      {
+                        className: "assignee-text",
+                        variant: "body2",
+                        children: user
+                      },
+                      index2
+                    ))
+                  }
+                ),
+                arrow: true,
+                placement: "top",
+                children: /* @__PURE__ */ jsxs(Typography, { className: "assignee-text", sx: { cursor: "pointer" }, children: [
+                  /* @__PURE__ */ jsx("span", { className: "assignee-label", children: tatExpired ? "Escalated To:" : "Current Assignee:" }),
+                  " ",
+                  (tatExpired ? extraCurrentlyEscalatedUserCount : extraCurrentlyAssignedUserCount) > 0 ? `${tatExpired ? currentlyEscalatedUser : currentlyAssignedUser} +${tatExpired ? extraCurrentlyEscalatedUserCount : extraCurrentlyAssignedUserCount}` : tatExpired ? currentlyEscalatedUser : currentlyAssignedUser
+                ] })
+              }
+            ) : /* @__PURE__ */ jsxs(Typography, { className: "assignee-text", sx: { cursor: "pointer" }, children: [
+              /* @__PURE__ */ jsx("span", { className: "assignee-label", children: tatExpired ? "Escalated To:" : "Current Assignee:" }),
+              " ",
+              tatExpired ? currentlyEscalatedUser : currentlyAssignedUser
+            ] })
+          ] }),
+          (requestDetails == null ? void 0 : requestDetails.current_status) !== "completed" ? /* @__PURE__ */ jsxs(Box, { className: "action-buttons", children: [
+            filterRejectForLevelZero(statusList, requestDetails).find(
+              (list) => list.status == 3
+            ) && /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "outlined",
+                className: "btn-reject",
+                onClick: () => {
+                  var _a2;
+                  return handleReject(
+                    `${requestDetails == null ? void 0 : requestDetails._id}|${(_a2 = statusList.find((i) => i.status == 3)) == null ? void 0 : _a2.id}|${requestDetails == null ? void 0 : requestDetails.reasons}`
+                  );
+                },
+                children: "Reject"
+              }
+            ),
+            !(requestDetails == null ? void 0 : requestDetails.isLevelZero) && /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "outlined",
+                className: "btn-send-back",
+                onClick: () => handleSendBack(requestDetails._id),
+                children: "Send Back"
+              }
+            ),
+            filterRejectForLevelZero(statusList, requestDetails).find(
+              (list) => list.status == 1
+            ) && /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "contained",
+                className: "btn-approve",
+                onClick: () => {
+                  var _a2;
+                  return handleApprove(
+                    `${requestDetails == null ? void 0 : requestDetails._id}|${(_a2 = statusList.find((i) => i.status == 1)) == null ? void 0 : _a2.id}`
+                  );
+                },
+                children: "Approve"
+              }
+            )
+          ] }) : /* @__PURE__ */ jsx(
+            WorkflowButton_default,
+            {
+              variant: currentStatus === "approved" ? "approved" : currentStatus === "rejected" ? "rejected" : "pending",
+              className: "dialog-close-btn",
+              children: currentStatus.toLocaleLowerCase()
+            }
+          )
+        ] }),
+        expandedId === requestDetails._id && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { className: "horizontal-divider" }),
+          /* @__PURE__ */ jsx(
+            WorkFlowTimeline,
+            {
+              events: expandedDetails == null ? void 0 : expandedDetails.map((item) => {
+                var _a2, _b2, _c2, _d2;
+                return {
+                  date: moment(item == null ? void 0 : item.created_at).format("DD-MM-YYYY"),
+                  time: moment(item == null ? void 0 : item.created_at).format("HH:mm"),
+                  name: (item == null ? void 0 : item.type) === "create" ? (_a2 = item == null ? void 0 : item.created_by_user) == null ? void 0 : _a2.full_name : ((_b2 = item == null ? void 0 : item.created_by_user) == null ? void 0 : _b2.full_name) || "N/A",
+                  subTitle: ((_c2 = item == null ? void 0 : item.comment_reasons) == null ? void 0 : _c2.comment) || "No Comments",
+                  attachment: ((_d2 = item == null ? void 0 : item.comment_reasons) == null ? void 0 : _d2.file) || null,
+                  count: (item == null ? void 0 : item.current_level) == "L0" ? "L0" : item == null ? void 0 : item.current_level_count,
+                  status: (item == null ? void 0 : item.type) === "approve" ? "Approved by" : (item == null ? void 0 : item.type) === "reject" ? "Rejected by" : (item == null ? void 0 : item.type) === "send_back" ? "Send Back" : (item == null ? void 0 : item.type) === "onhold" ? "On Hold" : "Created by",
+                  type: item == null ? void 0 : item.type
+                };
+              })
+            }
+          )
+        ] })
+      ]
+    },
+    index
+  );
+}
 function SendBackDialog({
   openModal,
   closeModal,
@@ -194,7 +715,7 @@ function SendBackDialog({
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(
-      Dialog,
+      Dialog$1,
       {
         open: openModal,
         onClose: closeModal,
@@ -202,7 +723,7 @@ function SendBackDialog({
         sx: { "& .MuiPaper-root.MuiDialog-paper": { width: "550px" } },
         children: [
           /* @__PURE__ */ jsxs(
-            Box$1,
+            Box,
             {
               sx: {
                 display: "flex",
@@ -215,7 +736,7 @@ function SendBackDialog({
               ]
             }
           ),
-          /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsx(Box$1, { sx: { mb: 5 }, children: /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 5, children: [
+          /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsx(Box, { sx: { mb: 5 }, children: /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 5, children: [
             /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(
               TextField,
               {
@@ -265,7 +786,7 @@ function SendBackDialog({
             ] })
           ] }) }) }),
           /* @__PURE__ */ jsx(DialogActions, { children: /* @__PURE__ */ jsxs(
-            Box$1,
+            Box,
             {
               sx: {
                 display: "flex",
@@ -390,7 +911,7 @@ function ApproveDialog({
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(
-      Dialog,
+      Dialog$1,
       {
         open: openModal,
         onClose: closeModal,
@@ -398,7 +919,7 @@ function ApproveDialog({
         sx: { "& .MuiPaper-root.MuiDialog-paper": { width: "550px" } },
         children: [
           /* @__PURE__ */ jsxs(
-            Box$1,
+            Box,
             {
               sx: {
                 display: "flex",
@@ -411,7 +932,7 @@ function ApproveDialog({
               ]
             }
           ),
-          /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsx(Box$1, { sx: { mb: 5 }, children: /* @__PURE__ */ jsx(Grid, { container: true, spacing: 5, children: /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsx(Box, { sx: { mb: 5 }, children: /* @__PURE__ */ jsx(Grid, { container: true, spacing: 5, children: /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(
             TextField,
             {
               fullWidth: true,
@@ -425,7 +946,7 @@ function ApproveDialog({
             }
           ) }) }) }) }),
           /* @__PURE__ */ jsx(DialogActions, { children: /* @__PURE__ */ jsxs(
-            Box$1,
+            Box,
             {
               sx: {
                 display: "flex",
@@ -591,7 +1112,7 @@ function RejectDialog({
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(
-      Dialog,
+      Dialog$1,
       {
         open: openModal,
         onClose: closeModal,
@@ -599,7 +1120,7 @@ function RejectDialog({
         sx: { "& .MuiPaper-root.MuiDialog-paper": { width: "550px" } },
         children: [
           /* @__PURE__ */ jsxs(
-            Box$1,
+            Box,
             {
               sx: {
                 display: "flex",
@@ -612,7 +1133,7 @@ function RejectDialog({
               ]
             }
           ),
-          /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsx(Box$1, { sx: { mb: 5 }, children: /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 5, children: [
+          /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsx(Box, { sx: { mb: 5 }, children: /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 5, children: [
             /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsxs(FormControl, { fullWidth: true, required: true, error: !!error.reason, children: [
               /* @__PURE__ */ jsx(InputLabel, { required: true, id: "reject-reason-label", children: "Reject Reasons" }),
               /* @__PURE__ */ jsx(
@@ -644,7 +1165,7 @@ function RejectDialog({
             ) })
           ] }) }) }),
           /* @__PURE__ */ jsx(DialogActions, { children: /* @__PURE__ */ jsxs(
-            Box$1,
+            Box,
             {
               sx: {
                 display: "flex",
@@ -769,7 +1290,7 @@ function OnHoldDialog({
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(
-      Dialog,
+      Dialog$1,
       {
         open: openModal,
         onClose: closeModal,
@@ -777,7 +1298,7 @@ function OnHoldDialog({
         sx: { "& .MuiPaper-root.MuiDialog-paper": { width: "550px" } },
         children: [
           /* @__PURE__ */ jsxs(
-            Box$1,
+            Box,
             {
               sx: {
                 display: "flex",
@@ -790,7 +1311,7 @@ function OnHoldDialog({
               ]
             }
           ),
-          /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsx(Box$1, { sx: { mb: 5 }, children: /* @__PURE__ */ jsx(Grid, { container: true, spacing: 5, children: /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsx(Box, { sx: { mb: 5 }, children: /* @__PURE__ */ jsx(Grid, { container: true, spacing: 5, children: /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(
             TextField,
             {
               fullWidth: true,
@@ -804,7 +1325,7 @@ function OnHoldDialog({
             }
           ) }) }) }) }),
           /* @__PURE__ */ jsx(DialogActions, { children: /* @__PURE__ */ jsxs(
-            Box$1,
+            Box,
             {
               sx: {
                 display: "flex",
@@ -868,239 +1389,308 @@ function OnHoldDialog({
   ] });
 }
 var OnHoldDialog_default = OnHoldDialog;
-var CONNECTOR = {
-  horizontal: {
-    thickness: 3,
-    lengthExtra: 0,
-    offsetReverseExtra: 30,
-    color: "#2C35FF"
-  },
-  vertical: {
-    thickness: 3,
-    height: 60,
-    color: "#2C35FF"
-  }
+var useDebounce = (value, delay) => {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+  useEffect(() => {
+    const timeoutId = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+    return () => clearTimeout(timeoutId);
+  }, [value, delay]);
+  return debouncedValue;
 };
-var CARD_WIDTH = 200;
-var CARD_HEIGHT = 220;
-var GAP = 65;
-var ROW_GAP = 60;
-var CustomCard = styled(Card)(
-  ({ theme, cardType }) => ({
-    width: CARD_WIDTH,
-    height: CARD_HEIGHT,
-    borderRadius: 16,
-    backgroundColor: cardType === "subCard" ? "#FFF2D8 !important" : cardType === "disableCard" ? "#ECECEC !important" : "#F1F1FF !important",
-    border: cardType === "disableCard" ? "none" : `1px solid ${theme.palette.primary.dark}`,
-    overflow: "hidden",
-    position: "relative"
-  })
-);
-var Bull = ({ count, cardType }) => {
-  const theme = useTheme();
-  return /* @__PURE__ */ jsx(
-    Box$1,
+var useDebounce_default = useDebounce;
+var SearchBox = ({
+  placeHolderTitle,
+  searchText,
+  handleClearSearch,
+  handleInputChange
+}) => {
+  return /* @__PURE__ */ jsx(Box, { sx: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx(
+    TextField,
     {
+      size: "small",
+      variant: "outlined",
+      value: searchText,
+      onChange: handleInputChange,
+      placeholder: placeHolderTitle,
+      autoComplete: "off",
+      className: "custom-search",
       sx: {
-        width: 40,
-        height: 40,
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        borderRadius: "50%",
-        background: "#fff",
-        border: cardType === "disableCard" ? `2px solid ${theme.palette.grey[400]}` : `2px solid ${theme.palette.primary.dark}`,
-        color: cardType === "disableCard" ? theme.palette.grey[700] : theme.palette.primary.dark,
-        fontWeight: 600,
-        fontSize: 16
+        "& .MuiOutlinedInput-root": {
+          height: "38px",
+          borderRadius: "20px"
+        }
       },
-      children: count
+      InputProps: {
+        startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx("span", { className: "icon-search-normal-1" }) }),
+        endAdornment: searchText ? /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            disableFocusRipple: true,
+            disableRipple: true,
+            disableTouchRipple: true,
+            onClick: handleClearSearch,
+            children: /* @__PURE__ */ jsx("span", { className: "icon-close-circle" })
+          }
+        ) }) : null
+      }
     }
-  );
+  ) });
 };
-function CustomTimelineWithStatus({ events }) {
-  useTheme();
-  const rows = [];
-  for (let i = 0; i < events.length; i += 4) rows.push(events.slice(i, i + 4));
-  const computeColumn = (index) => {
-    const row = Math.floor(index / 4);
-    const pos = index % 4;
-    return row % 2 === 0 ? pos : 3 - pos;
+var SearchBox_default = SearchBox;
+var StyledDialog = styled(Dialog)(({ theme }) => ({
+  "& .MuiDialog-paper": {
+    borderRadius: "16px",
+    boxShadow: "0px 2px 16px 0px rgba(0,0,0,0.16)",
+    padding: "24px",
+    maxWidth: "640px",
+    width: "100%"
+  }
+}));
+var FilterSection = styled(Box)({
+  border: "1px solid rgba(146,144,144,0.3)",
+  borderRadius: "12px",
+  padding: "18px",
+  display: "flex",
+  flexDirection: "column",
+  gap: "22px"
+});
+var StyledTextField = styled(TextField)({
+  "& .MuiOutlinedInput-root": {
+    borderRadius: "4px",
+    "& fieldset": {
+      borderColor: "#a3a3a3"
+    }
+  },
+  "& .MuiInputLabel-root": {
+    fontSize: "12px",
+    color: "#666",
+    fontFamily: '"Graphik Web:Regular", sans-serif'
+  },
+  "& .MuiSelect-select": {
+    fontSize: "16px",
+    color: "#666",
+    fontFamily: '"Graphik Web:Regular", sans-serif',
+    textTransform: "capitalize"
+  },
+  "& .MuiSelect-icon": {
+    color: "#666"
+  }
+});
+function FilterModal({
+  open,
+  onClose,
+  initialFilters,
+  onApply
+}) {
+  const { api } = useWorkflowContext();
+  const [approvalType, setApprovalType] = useState(
+    (initialFilters == null ? void 0 : initialFilters.approvalType) || ""
+  );
+  const [approvalStatus, setApprovalStatus] = useState(
+    (initialFilters == null ? void 0 : initialFilters.approvalStatus) || ""
+  );
+  const [sortBy, setSortBy] = useState((initialFilters == null ? void 0 : initialFilters.sortBy) || "");
+  const [approvalTypeOptions, setApprovalTypeOptions] = useState([]);
+  useEffect(() => {
+    api.get({ url: "/workflow/activities?page=1&size=1000", serviceURL: "api" }).then((res) => {
+      var _a;
+      console.log("\u{1F680} ~ FilterModal ~ res:", res);
+      setApprovalTypeOptions(((_a = res == null ? void 0 : res.data) == null ? void 0 : _a.data) || []);
+    }).catch((err) => {
+      console.error("Failed to fetch approval types:", err);
+    });
+  }, [api]);
+  useEffect(() => {
+    if (open) {
+      setApprovalType((initialFilters == null ? void 0 : initialFilters.approvalType) || "");
+      setApprovalStatus((initialFilters == null ? void 0 : initialFilters.approvalStatus) || "");
+      setSortBy((initialFilters == null ? void 0 : initialFilters.sortBy) || "");
+    }
+  }, [open, initialFilters]);
+  const handleClear = () => {
+    setApprovalType("");
+    setApprovalStatus("");
+    setSortBy("");
   };
-  const hasNextCard = (i) => i + 1 < events.length;
-  const getHorizontalY = (rowIndex) => {
-    const centerY = CARD_HEIGHT / 2 - CONNECTOR.horizontal.thickness / 2;
-    return rowIndex % 2 === 0 ? centerY : centerY + CONNECTOR.horizontal.offsetReverseExtra;
+  const handleApply = () => {
+    if (onApply) {
+      onApply({ approvalType, approvalStatus, sortBy });
+    }
+    onClose();
   };
-  const isVerticalNeeded = (index) => (index + 1) % 4 === 0 && hasNextCard(index);
-  return /* @__PURE__ */ jsx(Box$1, { sx: { width: "100%", overflowX: "auto", p: 1 }, children: /* @__PURE__ */ jsx(
-    Box$1,
-    {
-      sx: {
-        position: "relative",
-        display: "grid",
-        gridTemplateColumns: `repeat(4, ${CARD_WIDTH}px)`,
-        columnGap: `${GAP}px`,
-        rowGap: `${ROW_GAP}px`,
-        width: "max-content"
-      },
-      children: events.map((event, index) => {
-        const row = Math.floor(index / 4);
-        const col = computeColumn(index);
-        const isLast = index % 4 === 3;
-        return /* @__PURE__ */ jsxs(
-          Box$1,
-          {
-            sx: {
-              gridColumn: col + 1,
-              gridRow: row + 1,
-              position: "relative"
-            },
-            children: [
-              !isLast && hasNextCard(index) && /* @__PURE__ */ jsx(
-                Box$1,
-                {
-                  sx: {
-                    position: "absolute",
-                    top: getHorizontalY(row),
-                    left: row % 2 === 0 ? CARD_WIDTH : "auto",
-                    right: row % 2 !== 0 ? CARD_WIDTH : "auto",
-                    width: GAP + CONNECTOR.horizontal.lengthExtra,
-                    borderTop: `${CONNECTOR.horizontal.thickness}px dashed ${CONNECTOR.horizontal.color}`,
-                    zIndex: 10
-                  }
-                }
-              ),
-              isVerticalNeeded(index) && /* @__PURE__ */ jsx(
-                Box$1,
-                {
-                  sx: {
-                    position: "absolute",
-                    top: CARD_HEIGHT,
-                    left: CARD_WIDTH / 2 - CONNECTOR.vertical.thickness / 2,
-                    width: CONNECTOR.vertical.thickness,
-                    height: CONNECTOR.vertical.height,
-                    borderLeft: `${CONNECTOR.vertical.thickness}px dashed ${CONNECTOR.vertical.color}`,
-                    zIndex: 10
-                  }
+  return /* @__PURE__ */ jsx(StyledDialog, { open, onClose, children: /* @__PURE__ */ jsxs(Box, { children: [
+    /* @__PURE__ */ jsxs(
+      Box,
+      {
+        sx: {
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          mb: 3
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            Typography,
+            {
+              sx: {
+                fontSize: "20px",
+                color: "#666",
+                fontFamily: '"Graphik Web:Medium", sans-serif',
+                textTransform: "capitalize"
+              },
+              children: "Filter"
+            }
+          ),
+          /* @__PURE__ */ jsx(Box, { sx: { display: "flex", gap: "12px" }, children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              onClick: handleClear,
+              sx: {
+                color: "#666",
+                textTransform: "capitalize",
+                fontSize: "14px",
+                fontFamily: '"Graphik Web:Medium", sans-serif',
+                borderRadius: "100px",
+                height: "40px",
+                "&:hover": {
+                  backgroundColor: "rgba(0,0,0,0.04)"
                 }
-              ),
-              /* @__PURE__ */ jsx(CustomCard, { cardType: event.cardType, children: /* @__PURE__ */ jsxs(CardContent, { sx: { px: 2, pt: 2, pb: 1 }, children: [
-                /* @__PURE__ */ jsxs(
-                  Box$1,
-                  {
-                    sx: {
-                      mb: 1,
-                      display: "flex",
-                      justifyContent: "space-between",
-                      alignItems: "center",
-                      height: 28
-                    },
-                    children: [
-                      /* @__PURE__ */ jsx(Typography, { variant: "body2", children: event.date }),
-                      event.status && /* @__PURE__ */ jsx(
-                        Chip,
-                        {
-                          label: event.status.title,
-                          sx: {
-                            backgroundColor: `${event.status.color} !important`,
-                            color: `${event.status.labelColor} !important`,
-                            borderRadius: "40px",
-                            height: 28,
-                            fontWeight: 600,
-                            px: 1
-                          }
-                        }
-                      )
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsx(Bull, { count: event.count, cardType: event.cardType }),
-                /* @__PURE__ */ jsx(
-                  Typography,
-                  {
-                    variant: "subtitle2",
-                    sx: { mt: 2, fontWeight: 600 },
-                    children: event.title
-                  }
-                ),
-                /* @__PURE__ */ jsx(Typography, { sx: { mb: 1 }, variant: "body2", children: event.subTitle }),
-                event.attachment && /* @__PURE__ */ jsx(
-                  Typography,
-                  {
-                    sx: {
-                      cursor: "pointer",
-                      color: "#0B56CA",
-                      fontWeight: 600
-                    },
-                    children: "Attachment"
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  Typography,
-                  {
-                    variant: "body2",
-                    sx: {
-                      position: "absolute",
-                      bottom: 12,
-                      left: 14,
-                      color: "#777"
-                    },
-                    children: event.time
-                  }
-                )
-              ] }) })
-            ]
+              },
+              children: "Clear Filter"
+            }
+          ) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", gap: "24px" }, children: [
+      /* @__PURE__ */ jsx(FilterSection, { children: /* @__PURE__ */ jsx(
+        StyledTextField,
+        {
+          select: true,
+          label: "Approval Type",
+          value: approvalType,
+          onChange: (e) => setApprovalType(e.target.value),
+          fullWidth: true,
+          SelectProps: {
+            IconComponent: KeyboardArrowDownIcon
           },
-          index
-        );
-      })
-    }
-  ) });
+          children: approvalTypeOptions.length && (approvalTypeOptions == null ? void 0 : approvalTypeOptions.map((option) => /* @__PURE__ */ jsx(MenuItem, { value: option.id, children: option.activity_name }, option.id)))
+        }
+      ) }),
+      /* @__PURE__ */ jsx(FilterSection, { children: /* @__PURE__ */ jsxs(
+        StyledTextField,
+        {
+          select: true,
+          label: "Sort By",
+          value: sortBy,
+          onChange: (e) => setSortBy(e.target.value),
+          fullWidth: true,
+          SelectProps: {
+            IconComponent: KeyboardArrowDownIcon
+          },
+          children: [
+            /* @__PURE__ */ jsx(MenuItem, { value: "asc", children: "Ascending" }),
+            /* @__PURE__ */ jsx(MenuItem, { value: "desc", children: "Descending" })
+          ]
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      Box,
+      {
+        sx: {
+          display: "flex",
+          justifyContent: "flex-end",
+          gap: "10px",
+          mt: 3,
+          pt: "10px"
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              onClick: onClose,
+              variant: "outlined",
+              sx: {
+                color: "#666",
+                borderColor: "#666",
+                textTransform: "capitalize",
+                fontSize: "14px",
+                fontFamily: '"Graphik Web:Medium", sans-serif',
+                borderRadius: "100px",
+                height: "40px",
+                px: "24px",
+                "&:hover": {
+                  borderColor: "#666",
+                  backgroundColor: "rgba(0,0,0,0.04)"
+                }
+              },
+              children: "Cancel"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              onClick: handleApply,
+              variant: "contained",
+              sx: {
+                backgroundColor: "#3f41d1",
+                color: "white",
+                textTransform: "capitalize",
+                fontSize: "14px",
+                fontFamily: '"Graphik Web:Medium", sans-serif',
+                borderRadius: "100px",
+                height: "40px",
+                px: "24px",
+                "&:hover": {
+                  backgroundColor: "#2f31b1"
+                }
+              },
+              children: "Apply"
+            }
+          )
+        ]
+      }
+    )
+  ] }) });
 }
-var useDebounce = (value, delay) => {
-  const [debouncedValue, setDebouncedValue] = useState(value);
-  useEffect(() => {
-    const timeoutId = setTimeout(() => {
-      setDebouncedValue(value);
-    }, delay);
-    return () => clearTimeout(timeoutId);
-  }, [value, delay]);
-  return debouncedValue;
-};
-var useDebounce_default = useDebounce;
-var SearchBox = ({
-  placeHolderTitle,
-  searchText,
-  handleClearSearch,
-  handleInputChange
-}) => {
-  return /* @__PURE__ */ jsx(Box$1, { sx: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx(
-    TextField,
+function FilterButton({ onClick }) {
+  return /* @__PURE__ */ jsx(
+    Button,
     {
-      variant: "outlined",
-      value: searchText,
-      onChange: handleInputChange,
-      placeholder: placeHolderTitle,
-      autoComplete: "off",
-      className: "custom-search",
-      InputProps: {
-        startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx("span", { className: "icon-search-normal-1" }) }),
-        endAdornment: searchText ? /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(
-          IconButton,
-          {
-            disableFocusRipple: true,
-            disableRipple: true,
-            disableTouchRipple: true,
-            onClick: handleClearSearch,
-            children: /* @__PURE__ */ jsx("span", { className: "icon-close-circle" })
-          }
-        ) }) : null
-      }
+      onClick,
+      variant: "contained",
+      startIcon: /* @__PURE__ */ jsx(FilterAlt, { sx: { fontSize: "18px" } }),
+      sx: {
+        backgroundColor: "#f4f0ef !important",
+        color: "#666 !important",
+        fontFamily: "Poppins, sans-serif",
+        fontWeight: 500,
+        fontSize: "14px",
+        letterSpacing: "0.1px",
+        textTransform: "none",
+        borderRadius: "100px",
+        height: "40px",
+        paddingLeft: "16px",
+        paddingRight: "24px",
+        paddingTop: "10px",
+        paddingBottom: "10px",
+        gap: "8px",
+        boxShadow: "none",
+        "&:hover": {
+          backgroundColor: "#ebe7e6 !important",
+          boxShadow: "none"
+        },
+        "&:active": {
+          boxShadow: "none"
+        }
+      },
+      children: "Filter"
     }
-  ) });
-};
-var SearchBox_default = SearchBox;
+  );
+}
 var StyledChipProps = styled$1(Chip)(({ theme }) => {
   var _a, _b, _c;
   return {
@@ -1134,11 +1724,11 @@ function ApprovalWorkflow({
   selectedWorkflowsList = [],
   userInfo
 }) {
-  var _a, _b, _c, _d, _e, _f, _g;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t;
   useTheme$1();
   const { api, urlBuilder, loadingComponent, ENV_VARIABLES } = useWorkflowContext();
-  const [selectedApprovalOtions, setSelectedApprovalOtions] = useState(
-    selectedWorkflowsList.length ? "selected" : "Action Required"
+  const [selectedOption, setSelectedOption] = useState(
+    selectedWorkflowsList.length ? "selected" : "Assign To Me"
   );
   const [expandedId, setExpandedId] = useState(null);
   const [sendDialog, setSendDialog] = React7.useState(null);
@@ -1147,80 +1737,112 @@ function ApprovalWorkflow({
   const [onHoldTarget, setOnHoldTarget] = React7.useState(null);
   const [expandedDetails, setExpandedDetails] = useState([]);
   console.log("\u{1F680} ~ ApprovalWorkflow ~ expandedDetails:", expandedDetails);
+  const [descriptionView, setDescriptionView] = useState(null);
   const [urlConfig, setUrlConfig] = useState({});
-  const [allRequestArray, setAllRequestArray] = useState([]);
-  const [pendingRequestArray, setPendingRequestArray] = useState([]);
-  const [selectedRequestArray, setSelectedRequestArray] = useState([]);
-  const [isLoading, setIsLoading] = useState(false);
-  const [visibleAll, setVisibleAll] = useState(10);
-  const [visiblePending, setVisiblePending] = useState(10);
-  const [visibleSelected, setVisibleSelected] = useState(10);
+  const [viewMoreDetails, setViewMoreDetails] = useState(null);
+  const [isViewMoreOpen, setIsViewMoreOpen] = useState(false);
+  const [isFilterOpen, setIsFilterOpen] = useState(false);
+  const handleOpenViewMore = (details) => {
+    setViewMoreDetails(details);
+    setIsViewMoreOpen(true);
+  };
+  const handleCloseViewMore = () => {
+    setIsViewMoreOpen(false);
+    setViewMoreDetails(null);
+  };
+  const [tabs, setTabs] = useState({
+    "Assign To Me": {
+      data: [],
+      page: 1,
+      search: "",
+      hasMore: true,
+      loading: false,
+      initialized: false,
+      filters: null
+    },
+    "All Requests": {
+      data: [],
+      page: 1,
+      search: "",
+      hasMore: true,
+      loading: false,
+      initialized: false,
+      filters: null
+    },
+    Completed: {
+      data: [],
+      page: 1,
+      search: "",
+      hasMore: true,
+      loading: false,
+      initialized: false,
+      filters: null
+    },
+    selected: {
+      data: [],
+      page: 1,
+      search: "",
+      hasMore: true,
+      loading: false,
+      initialized: false,
+      filters: null
+    }
+  });
+  console.log("\u{1F680} ~ ApprovalWorkflow ~ tabs:", tabs);
   const [searchText, setSearchText] = useState("");
+  const debouncedSearchTerm = useDebounce_default(searchText, 500);
+  useEffect(() => {
+    var _a2;
+    setSearchText(((_a2 = tabs[selectedOption]) == null ? void 0 : _a2.search) || "");
+  }, [selectedOption]);
+  useEffect(() => {
+    var _a2, _b2;
+    if (debouncedSearchTerm !== tabs[selectedOption].search && ((_a2 = tabs[selectedOption]) == null ? void 0 : _a2.initialized)) {
+      setTabs((prev) => ({
+        ...prev,
+        [selectedOption]: {
+          ...prev[selectedOption],
+          search: debouncedSearchTerm,
+          page: 1,
+          hasMore: true,
+          data: []
+          // Clear data on new search
+        }
+      }));
+      fetchData(
+        selectedOption,
+        1,
+        debouncedSearchTerm,
+        (_b2 = tabs[selectedOption]) == null ? void 0 : _b2.filters
+      );
+    }
+  }, [debouncedSearchTerm]);
   const handleClearSearch = useCallback(() => {
     setSearchText("");
   }, []);
   const handleSearchChange = useCallback((value) => {
     setSearchText(value);
   }, []);
-  const debouncedSearchTerm = useDebounce_default(searchText, 500);
-  const filteredSelectedRequestArray = React7.useMemo(() => {
-    if (!debouncedSearchTerm) return selectedRequestArray;
-    const q = debouncedSearchTerm.toLowerCase();
-    return selectedRequestArray == null ? void 0 : selectedRequestArray.filter((item) => {
-      const name = ((item == null ? void 0 : item.activity_name) || "").toString().toLowerCase();
-      const desc = ((item == null ? void 0 : item.description_data) || "").toString().toLowerCase();
-      return name.includes(q) || desc.includes(q);
-    });
-  }, [selectedRequestArray, debouncedSearchTerm]);
-  const filteredAllRequestArray = React7.useMemo(() => {
-    if (!debouncedSearchTerm) return allRequestArray;
-    const q = debouncedSearchTerm.toLowerCase();
-    return allRequestArray == null ? void 0 : allRequestArray.filter((item) => {
-      const name = ((item == null ? void 0 : item.activity_name) || "").toString().toLowerCase();
-      const desc = ((item == null ? void 0 : item.description_data) || "").toString().toLowerCase();
-      return name.includes(q) || desc.includes(q);
-    });
-  }, [allRequestArray, debouncedSearchTerm]);
-  const filteredPendingRequestArray = React7.useMemo(() => {
-    if (!debouncedSearchTerm) return pendingRequestArray;
-    const q = debouncedSearchTerm.toLowerCase();
-    return pendingRequestArray == null ? void 0 : pendingRequestArray.filter((item) => {
-      const name = ((item == null ? void 0 : item.activity_name) || "").toString().toLowerCase();
-      const desc = ((item == null ? void 0 : item.description_data) || "").toString().toLowerCase();
-      return name.includes(q) || desc.includes(q);
-    });
-  }, [pendingRequestArray, debouncedSearchTerm]);
   const observer = React7.useRef(null);
   const lastCardRef = useCallback(
     (node) => {
-      if (isLoading) return;
+      const currentTab = tabs[selectedOption];
+      if ((currentTab == null ? void 0 : currentTab.loading) || !(currentTab == null ? void 0 : currentTab.hasMore)) return;
       if (observer.current) observer.current.disconnect();
       observer.current = new IntersectionObserver((entries) => {
         if (entries[0].isIntersecting) {
-          if (selectedApprovalOtions === "All Requests") {
-            setVisibleAll((prev) => prev + 10);
-          } else if (selectedApprovalOtions === "Action Required") {
-            setVisiblePending((prev) => prev + 10);
-          } else if (selectedApprovalOtions === "selected") {
-            setVisibleSelected((prev) => prev + 10);
-          }
+          setTabs((prev) => ({
+            ...prev,
+            [selectedOption]: {
+              ...prev[selectedOption],
+              page: prev[selectedOption].page + 1
+            }
+          }));
         }
       });
       if (node) observer.current.observe(node);
     },
-    [isLoading, selectedApprovalOtions]
-  );
-  const visibleAllRequests = (filteredAllRequestArray || []).slice(
-    0,
-    visibleAll
-  );
-  const visiblePendingRequests = (filteredPendingRequestArray || []).slice(
-    0,
-    visiblePending
-  );
-  const visibleSelectedRequests = (filteredSelectedRequestArray || []).slice(
-    0,
-    visibleSelected
+    [tabs, selectedOption]
   );
   const handleSendBack = (workflowLogId) => {
     setSendDialog(workflowLogId);
@@ -1234,11 +1856,108 @@ function ApprovalWorkflow({
   const handleOnHold = (workflowLogId) => {
     setOnHoldTarget(workflowLogId);
   };
+  const handleApplyFilter = (filters) => {
+    setTabs((prev) => ({
+      ...prev,
+      [selectedOption]: {
+        ...prev[selectedOption],
+        filters,
+        page: 1,
+        hasMore: true,
+        data: []
+      }
+    }));
+    setIsFilterOpen(false);
+    fetchData(selectedOption, 1, tabs[selectedOption].search, filters);
+  };
+  const fetchData = useCallback(
+    (tab, page, search, filtersOverride) => {
+      var _a2, _b2;
+      if (!((_a2 = userInfo == null ? void 0 : userInfo.userInfo) == null ? void 0 : _a2.id)) return;
+      const currentFilters = filtersOverride || ((_b2 = tabs[tab]) == null ? void 0 : _b2.filters);
+      console.log("\u{1F680} ~ ApprovalWorkflow ~ currentFilters:", currentFilters);
+      let filterQuery = "";
+      if (currentFilters) {
+        if (currentFilters.approvalType)
+          filterQuery += `&activityId=${encodeURIComponent(
+            currentFilters.approvalType
+          )}`;
+        if (currentFilters.approvalStatus)
+          filterQuery += `&approval_status=${encodeURIComponent(
+            currentFilters.approvalStatus
+          )}`;
+        if (currentFilters.sortBy)
+          filterQuery += `&tat=${encodeURIComponent(currentFilters.sortBy)}`;
+      }
+      let url = "";
+      const query = `paginate=${true}&page=${page}&size=10&search=${encodeURIComponent(
+        search
+      )}${filterQuery}`;
+      if (tab === "Assign To Me") {
+        url = `/workflow/activity-workflow/${userInfo.userInfo.id}?${query}&type=pending`;
+      } else if (tab === "All Requests") {
+        url = `/workflow/activity-workflow/${userInfo.userInfo.id}?${query}`;
+      } else if (tab === "Completed") {
+        url = `/workflow/activity-workflow/${userInfo.userInfo.id}?${query}&type=completed`;
+      } else if (tab === "selected") {
+        if (selectedWorkflowsList.length && !tabs["selected"].initialized) {
+          api.post({
+            url: `/workflow/bulk-details`,
+            serviceURL: "api",
+            data: { workflowIds: selectedWorkflowsList }
+          }).then((res) => {
+            setTabs((prev) => ({
+              ...prev,
+              selected: {
+                ...prev.selected,
+                data: (res == null ? void 0 : res.data) || [],
+                loading: false,
+                initialized: true,
+                hasMore: false
+                // No pagination for selected for now
+              }
+            }));
+          });
+        }
+        return;
+      }
+      if (!url) return;
+      setTabs((prev) => ({
+        ...prev,
+        [tab]: { ...prev[tab], loading: true }
+      }));
+      api.get({ url, serviceURL: "api" }).then((res) => {
+        var _a3;
+        const newItems = ((_a3 = res == null ? void 0 : res.data) == null ? void 0 : _a3.activities) || [];
+        setTabs((prev) => {
+          var _a4;
+          return {
+            ...prev,
+            [tab]: {
+              ...prev[tab],
+              data: page === 1 ? newItems : [...prev[tab].data, ...newItems],
+              count: (_a4 = res == null ? void 0 : res.data) == null ? void 0 : _a4.totalCount,
+              loading: false,
+              hasMore: newItems.length === 10,
+              initialized: true
+            }
+          };
+        });
+      }).catch(() => {
+        setTabs((prev) => ({
+          ...prev,
+          [tab]: { ...prev[tab], loading: false }
+        }));
+      });
+    },
+    [api, userInfo, selectedWorkflowsList, tabs]
+  );
   const handleProfileToggle = (option) => {
-    setSelectedApprovalOtions(option);
-    if (option === "Action Required") fetchPendingActivities();
-    if (option === "All Requests") fetchAllActivites();
-    if (option === "selected") fetchSelectedActivites();
+    var _a2, _b2;
+    setSelectedOption(option);
+    if (!((_a2 = tabs[option]) == null ? void 0 : _a2.initialized)) {
+      fetchData(option, 1, ((_b2 = tabs[option]) == null ? void 0 : _b2.search) || "");
+    }
   };
   const handleExpandClick = (id) => {
     setExpandedId((prevId) => prevId === id ? null : id);
@@ -1286,14 +2005,19 @@ function ApprovalWorkflow({
   };
   const approvalChipLabel = [
     {
-      label: "Action Required",
+      label: "Assign To Me",
       icon: /* @__PURE__ */ jsx("span", { className: "icon-document-forward" }),
-      count: pendingRequestArray ? pendingRequestArray.length : 0
+      count: ((_a = tabs["Assign To Me"]) == null ? void 0 : _a.count) || 0
     },
     {
       label: "All Requests",
       icon: /* @__PURE__ */ jsx("span", { className: "icon-document-copy" }),
-      count: allRequestArray ? allRequestArray.length : 0
+      count: ((_b = tabs["All Requests"]) == null ? void 0 : _b.count) || 0
+    },
+    {
+      label: "Completed",
+      icon: /* @__PURE__ */ jsx("span", { className: "icon-tick-circle" }),
+      count: ((_c = tabs["Completed"]) == null ? void 0 : _c.count) || 0
     }
   ];
   const fetchExpandedActivityLogs = (workflowLogId) => {
@@ -1303,62 +2027,28 @@ function ApprovalWorkflow({
       serviceURL: "api"
     }).then((res) => setExpandedDetails(res == null ? void 0 : res.data));
   };
-  const fetchPendingActivities = () => {
-    var _a2;
-    setIsLoading(true);
-    api.get({
-      url: `/workflow/activity-workflow/${(_a2 = userInfo == null ? void 0 : userInfo.userInfo) == null ? void 0 : _a2.id}?paginate=false&type=pending`,
-      serviceURL: "api"
-    }).then((res) => {
-      var _a3;
-      return setPendingRequestArray((_a3 = res == null ? void 0 : res.data) == null ? void 0 : _a3.activities);
-    }).finally(() => setIsLoading(false));
-  };
-  const fetchAllActivites = () => {
-    var _a2;
-    setIsLoading(true);
-    api.get({
-      url: `/workflow/activity-workflow/${(_a2 = userInfo == null ? void 0 : userInfo.userInfo) == null ? void 0 : _a2.id}?paginate=false`,
-      serviceURL: "api"
-    }).then((res) => {
-      var _a3;
-      return setAllRequestArray((_a3 = res == null ? void 0 : res.data) == null ? void 0 : _a3.activities);
-    }).finally(() => setIsLoading(false));
-  };
-  const fetchSelectedActivites = () => {
-    setIsLoading(true);
-    api.post({
-      url: `/workflow/bulk-details`,
-      serviceURL: "api",
-      data: { workflowIds: selectedWorkflowsList }
-    }).then((res) => setSelectedRequestArray(res == null ? void 0 : res.data)).finally(() => setIsLoading(false));
-  };
   useEffect(() => {
-    if (!sendDialog && !approveTarget && !onHoldTarget && !rejectTarget) {
-      fetchAllActivites();
-      fetchPendingActivities();
-      setExpandedDetails([]);
-      setExpandedId(null);
+    var _a2;
+    if ((_a2 = userInfo == null ? void 0 : userInfo.userInfo) == null ? void 0 : _a2.id) {
+      const tabsToFetch = ["Assign To Me", "All Requests", "Completed"];
+      tabsToFetch.forEach((tab) => {
+        var _a3;
+        if (!((_a3 = tabs[tab]) == null ? void 0 : _a3.initialized)) {
+          fetchData(tab, 1, "");
+        }
+      });
     }
-  }, [sendDialog, approveTarget, onHoldTarget, rejectTarget, userInfo]);
+  }, [userInfo]);
   useEffect(() => {
-    api.get({ url: `/workflow/url-config`, serviceURL: "api" }).then((res) => {
-      const data = (res == null ? void 0 : res.data) || [];
-      const map = data.reduce((acc, { module_name, ...details }) => {
-        acc[module_name] = details;
-        return acc;
-      }, {});
-      setUrlConfig(map);
-    });
-  }, []);
-  useEffect(() => {
-    if (selectedWorkflowsList.length && !selectedRequestArray.length) {
-      fetchSelectedActivites();
+    const tabState = tabs[selectedOption];
+    if ((tabState == null ? void 0 : tabState.page) > 1) {
+      fetchData(selectedOption, tabState.page, tabState.search);
     }
-  }, [selectedWorkflowsList]);
+  }, [(_d = tabs[selectedOption]) == null ? void 0 : _d.page]);
   useEffect(() => {
-    if (Object.keys(urlConfig).length > 0 && userInfo) {
-      fetchPendingActivities();
+    var _a2;
+    if (Object.keys(urlConfig).length > 0 && userInfo && !tabs["Assign To Me"].initialized) {
+      fetchData("Assign To Me", 1, ((_a2 = tabs["Assign To Me"]) == null ? void 0 : _a2.search) || "");
     }
   }, [urlConfig, userInfo]);
   const buildRedirectionUrl = (info) => {
@@ -1385,60 +2075,56 @@ function ApprovalWorkflow({
     }
     return "#";
   };
-  const StatusObj = {
-    approved: {
-      title: "Approved",
-      color: "#e6f7e9",
-      labelColor: "#389e49"
-    },
-    rejected: {
-      title: "Rejected",
-      color: "#fff1f0",
-      labelColor: "#f5222d"
-    },
-    onhold: {
-      title: "On Hold",
-      color: "#fff7e6",
-      labelColor: "#faad14"
-    },
-    sendback: {
-      title: "Send Back",
-      color: "#e6f7ff",
-      labelColor: "#1890ff"
-    }};
-  if (isLoading && loadingComponent) return /* @__PURE__ */ jsx(Fragment, { children: loadingComponent });
+  function timeLeftDHm(targetISO) {
+    const diff = new Date(targetISO).getTime() - Date.now();
+    if (diff <= 0) return "0d: 0h: 0m";
+    const totalMinutes = Math.floor(diff / 6e4);
+    const d = Math.floor(totalMinutes / 1440);
+    const h = Math.floor(totalMinutes % 1440 / 60);
+    const m = totalMinutes % 60;
+    return `${d}d: ${h}h: ${m}m`;
+  }
+  if (((_e = tabs[selectedOption]) == null ? void 0 : _e.loading) && ((_f = tabs[selectedOption]) == null ? void 0 : _f.page) === 1 && loadingComponent)
+    return /* @__PURE__ */ jsx(Fragment, { children: loadingComponent });
   console.info("LIBRARY RUNNING...");
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
-      Box,
+      Box$1,
       {
         sx: {
           display: "flex",
           justifyContent: "center",
           flexWrap: "nowrap",
+          // width:"1100px",height:"90%",
           overflow: "hidden !important"
         },
         children: /* @__PURE__ */ jsxs(
-          Box,
+          Box$1,
           {
-            sx: { width: "100%", height: "100%", overflow: "hidden !important" },
+            sx: {
+              width: "1141px",
+              maxWidth: "1141px",
+              minWidth: "1141px",
+              height: "100%",
+              overflow: "hidden !important"
+            },
             children: [
               /* @__PURE__ */ jsxs(
-                Box,
+                Box$1,
                 {
                   sx: {
                     display: "flex",
                     justifyContent: "space-between",
-                    alignItems: "center"
+                    alignItems: "flex-start"
                   },
                   children: [
-                    /* @__PURE__ */ jsxs(Box, { sx: { mt: 2, mb: 2 }, children: [
+                    /* @__PURE__ */ jsxs(Box$1, { children: [
                       (selectedWorkflowsList == null ? void 0 : selectedWorkflowsList.length) ? /* @__PURE__ */ jsx(Tooltip, { title: "Selected Workflows", children: /* @__PURE__ */ jsx(
                         StyledChipProps,
                         {
                           label: "Selected",
                           icon: /* @__PURE__ */ jsx("span", { className: "icon-eye" }),
-                          color: (selectedApprovalOtions == null ? void 0 : selectedApprovalOtions.includes("selected")) ? "primary" : "default",
+                          color: (selectedOption == null ? void 0 : selectedOption.includes("selected")) ? "primary" : "default",
                           variant: "filled",
                           sx: {
                             mr: 4,
@@ -1453,7 +2139,7 @@ function ApprovalWorkflow({
                         {
                           label: `${count} ${label}`,
                           icon,
-                          color: (selectedApprovalOtions == null ? void 0 : selectedApprovalOtions.includes(label)) ? "primary" : "default",
+                          color: (selectedOption == null ? void 0 : selectedOption.includes(label)) ? "primary" : "default",
                           variant: "filled",
                           sx: {
                             mr: 4,
@@ -1464,344 +2150,34 @@ function ApprovalWorkflow({
                         }
                       ) }, index))
                     ] }),
-                    /* @__PURE__ */ jsx(Box, { sx: { flexGrow: 1, maxWidth: 250, ml: "auto" }, children: /* @__PURE__ */ jsx(
-                      SearchBox_default,
-                      {
-                        placeHolderTitle: "Search",
-                        searchText,
-                        handleClearSearch,
-                        handleInputChange: (e) => handleSearchChange(e.target.value)
-                      }
-                    ) })
-                  ]
-                }
-              ),
-              selectedApprovalOtions === "selected" && /* @__PURE__ */ jsx(
-                Box,
-                {
-                  className: "fixedModal hide-scrollbar",
-                  sx: {
-                    overflowY: "auto",
-                    height: "calc(100vh - 180px)",
-                    px: 2,
-                    pb: 3
-                  },
-                  children: visibleSelectedRequests.length > 0 ? visibleSelectedRequests == null ? void 0 : visibleSelectedRequests.map((info, index) => {
-                    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
-                    const currentLevel = info == null ? void 0 : info.levels.find(
-                      (level_) => level_.id === (info == null ? void 0 : info.current_level)
-                    );
-                    const statusList = currentLevel ? currentLevel.status_list : [];
-                    (statusList || []).reduce(
-                      (acc, s) => {
-                        if ((s == null ? void 0 : s.status) != null) acc[s.status] = s;
-                        return acc;
-                      },
-                      {}
-                    );
-                    const filterRejectForLevelZero = (statusList2, info2) => {
-                      if (!(info2 == null ? void 0 : info2.isLevelZero)) return statusList2;
-                      return statusList2 == null ? void 0 : statusList2.filter((item) => item.status !== 3);
-                    };
-                    const redir = buildRedirectionUrl(info);
-                    const currentStatus = ((_c2 = (_b2 = (_a2 = info == null ? void 0 : info.levels) == null ? void 0 : _a2.find(
-                      (lvl) => lvl.id === (info == null ? void 0 : info.current_level)
-                    )) == null ? void 0 : _b2.selected_status) == null ? void 0 : _c2.status_id) === 1 ? "approved" : ((_f2 = (_e2 = (_d2 = info == null ? void 0 : info.levels) == null ? void 0 : _d2.find(
-                      (lvl) => lvl.id === (info == null ? void 0 : info.current_level)
-                    )) == null ? void 0 : _e2.selected_status) == null ? void 0 : _f2.status_id) === 3 ? "rejected" : "pending";
-                    const statusData = getStatus(currentStatus);
-                    return /* @__PURE__ */ jsxs(
-                      Card,
-                      {
-                        ref: index === visibleSelectedRequests.length - 1 ? lastCardRef : null,
-                        sx: {
-                          mb: 3,
-                          borderRadius: "14px",
-                          boxShadow: "0px 2px 10px rgba(76, 78, 100, 0.1)",
-                          px: 3,
-                          py: 2,
-                          background: "white !important"
-                        },
-                        children: [
-                          /* @__PURE__ */ jsxs(
-                            CardContent,
-                            {
-                              sx: {
-                                display: "flex",
-                                justifyContent: "space-between",
-                                alignItems: "center",
-                                flexWrap: { xs: "wrap", md: "nowrap" },
-                                gap: 2
-                              },
-                              children: [
-                                /* @__PURE__ */ jsxs(Box, { sx: { flexBasis: "22%", minWidth: 220 }, children: [
-                                  /* @__PURE__ */ jsx(Tooltip, { title: info.activityInstruction, children: /* @__PURE__ */ jsx(
-                                    Typography,
-                                    {
-                                      variant: "h6",
-                                      fontWeight: 600,
-                                      noWrap: true,
-                                      color: "text.primary",
-                                      children: info.activity_name
-                                    }
-                                  ) }),
-                                  /* @__PURE__ */ jsx(Tooltip, { title: info.description_data, children: /* @__PURE__ */ jsx(
-                                    Typography,
-                                    {
-                                      variant: "body2",
-                                      color: "text.secondary",
-                                      noWrap: true,
-                                      sx: { mt: 0.5 },
-                                      children: info.description_data
-                                    }
-                                  ) })
-                                ] }),
-                                /* @__PURE__ */ jsxs(Box, { sx: { flexBasis: "20%", minWidth: 180 }, children: [
-                                  /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: "Links" }),
-                                  /* @__PURE__ */ jsx(Tooltip, { title: redir, children: /* @__PURE__ */ jsx(
-                                    "a",
-                                    {
-                                      href: redir,
-                                      target: "_blank",
-                                      rel: "noreferrer",
-                                      style: {
-                                        cursor: "pointer",
-                                        textDecoration: "none"
-                                      },
-                                      children: /* @__PURE__ */ jsx(
-                                        Typography,
-                                        {
-                                          variant: "subtitle2",
-                                          color: "primary.dark",
-                                          sx: {
-                                            mt: 0.8,
-                                            lineHeight: "15.4px",
-                                            overflow: "hidden",
-                                            textOverflow: "ellipsis",
-                                            whiteSpace: "nowrap"
-                                          },
-                                          children: redir
-                                        }
-                                      )
-                                    }
-                                  ) })
-                                ] }),
-                                /* @__PURE__ */ jsxs(Box, { sx: { flexBasis: "12%", minWidth: 120 }, children: [
-                                  /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: "Attachments" }),
-                                  /* @__PURE__ */ jsx(
-                                    Typography,
-                                    {
-                                      variant: "body2",
-                                      noWrap: true,
-                                      sx: {
-                                        mt: 0.8,
-                                        color: ((_g2 = info == null ? void 0 : info.attachment_links) == null ? void 0 : _g2.length) ? "primary.dark" : "text.disabled"
-                                      },
-                                      children: ((_h = info == null ? void 0 : info.attachment_links) == null ? void 0 : _h.length) ? `${info.attachment_links.length} file(s)` : "N/A"
-                                    }
-                                  )
-                                ] }),
-                                /* @__PURE__ */ jsxs(Box, { sx: { flexBasis: "14%", minWidth: 130 }, children: [
-                                  /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: "TAT" }),
-                                  /* @__PURE__ */ jsx(
-                                    Typography,
-                                    {
-                                      variant: "body2",
-                                      sx: {
-                                        mt: 0.8,
-                                        fontWeight: 500,
-                                        color: "text.primary"
-                                      },
-                                      children: (currentLevel == null ? void 0 : currentLevel.tat_expiry) ? moment(currentLevel.tat_expiry).utcOffset("UTC+05:30").format("DD/MM/YYYY hh:mm A") : "N/A"
-                                    }
-                                  )
-                                ] }),
-                                /* @__PURE__ */ jsxs(
-                                  Box,
-                                  {
-                                    sx: {
-                                      flexBasis: "8%",
-                                      minWidth: 80,
-                                      textAlign: "center"
-                                    },
-                                    children: [
-                                      /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: "Current Level" }),
-                                      /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { mt: 0.8 }, children: (info == null ? void 0 : info.isLevelZero) ? "L0" : "L" + (((_j = (_i = info == null ? void 0 : info.levels) == null ? void 0 : _i.findIndex(
-                                        (lvl) => lvl.id === (info == null ? void 0 : info.current_level)
-                                      )) != null ? _j : -1) + 1 || "") })
-                                    ]
-                                  }
-                                ),
-                                /* @__PURE__ */ jsxs(
-                                  Box,
-                                  {
-                                    sx: {
-                                      flexBasis: "18%",
-                                      minWidth: 200,
-                                      display: "flex",
-                                      alignItems: "center",
-                                      justifyContent: "flex-end",
-                                      gap: 1.5
-                                    },
-                                    children: [
-                                      (info == null ? void 0 : info.current_status) !== "completed" && ((_l = (_k = info == null ? void 0 : info.levels) == null ? void 0 : _k.find(
-                                        (lvl) => lvl.id === (info == null ? void 0 : info.current_level)
-                                      )) == null ? void 0 : _l.order) <= ((_n = (_m = info == null ? void 0 : info.levels) == null ? void 0 : _m.find(
-                                        (lvl) => {
-                                          var _a3;
-                                          return Number(lvl.assign_to[0]) === ((_a3 = userInfo == null ? void 0 : userInfo.userInfo) == null ? void 0 : _a3.id);
-                                        }
-                                      )) == null ? void 0 : _n.order) ? /* @__PURE__ */ jsx(
-                                        Statusselector_default,
-                                        {
-                                          onSendBack: () => handleSendBack(info == null ? void 0 : info._id),
-                                          onApprove: () => {
-                                            var _a3;
-                                            return handleApprove(
-                                              `${info == null ? void 0 : info._id}|${(_a3 = statusList.find((i) => i.status == 1)) == null ? void 0 : _a3.id}`
-                                            );
-                                          },
-                                          onReject: () => {
-                                            var _a3;
-                                            return handleReject(
-                                              `${info == null ? void 0 : info._id}|${(_a3 = statusList.find((i) => i.status == 3)) == null ? void 0 : _a3.id}|${info == null ? void 0 : info.reasons}`
-                                            );
-                                          },
-                                          onHold: () => {
-                                            var _a3;
-                                            return handleOnHold(
-                                              `${info == null ? void 0 : info._id}|${(_a3 = statusList.find((i) => i.status == 2)) == null ? void 0 : _a3.id}`
-                                            );
-                                          },
-                                          level: info == null ? void 0 : info.isLevelZero,
-                                          statusList: filterRejectForLevelZero(
-                                            statusList,
-                                            info
-                                          )
-                                        }
-                                      ) : /* @__PURE__ */ jsx(
-                                        Chip,
-                                        {
-                                          variant: "filled",
-                                          sx: {
-                                            backgroundColor: `${getStatus(currentStatus).color} !important`,
-                                            color: `${getStatus(currentStatus).labelColor} !important`,
-                                            height: "40px",
-                                            px: 2,
-                                            borderRadius: "100px !important",
-                                            "& .MuiChip-label": {
-                                              fontSize: "14px",
-                                              lineHeight: "15.4px",
-                                              fontWeight: "500",
-                                              textTransform: "capitalize"
-                                            }
-                                          },
-                                          label: statusData.title
-                                        }
-                                      ),
-                                      /* @__PURE__ */ jsx(
-                                        Divider,
-                                        {
-                                          orientation: "vertical",
-                                          flexItem: true,
-                                          sx: {
-                                            borderColor: "#E0E0E0",
-                                            height: "40px"
-                                          }
-                                        }
-                                      ),
-                                      /* @__PURE__ */ jsx(
-                                        IconButton,
-                                        {
-                                          disableFocusRipple: true,
-                                          disableRipple: true,
-                                          color: "primary",
-                                          sx: {
-                                            background: "rgba(25,118,210,0.08)",
-                                            boxShadow: "2px 2px 10px 0px #4C4E6426",
-                                            "& span": { color: "primary.dark" }
-                                          },
-                                          onClick: () => handleExpandClick(info._id),
-                                          children: expandedId === info._id ? /* @__PURE__ */ jsx("span", { className: "icon-arrow-down-1" }) : /* @__PURE__ */ jsx("span", { className: "icon-arrow-right-3" })
-                                        }
-                                      )
-                                    ]
-                                  }
-                                )
-                              ]
-                            }
-                          ),
-                          expandedId === info._id && /* @__PURE__ */ jsx(Box, { sx: { mt: 2, ml: 2 }, children: !(expandedDetails == null ? void 0 : expandedDetails.length) ? /* @__PURE__ */ jsx(
-                            Box,
+                    /* @__PURE__ */ jsxs("div", { style: { display: "flex" }, children: [
+                      /* @__PURE__ */ jsx(
+                        Box$1,
+                        {
+                          sx: {
+                            flexGrow: 1,
+                            maxWidth: 295,
+                            ml: "auto",
+                            mr: "10px"
+                          },
+                          children: /* @__PURE__ */ jsx(
+                            SearchBox_default,
                             {
-                              sx: {
-                                height: 150,
-                                display: "flex",
-                                justifyContent: "center",
-                                alignItems: "center"
-                              },
-                              children: /* @__PURE__ */ jsx(CircularProgress, { size: 36, color: "primary" })
+                              placeHolderTitle: "Search",
+                              searchText,
+                              handleClearSearch,
+                              handleInputChange: (e) => handleSearchChange(e.target.value)
                             }
-                          ) : /* @__PURE__ */ jsxs("div", { children: [
-                            /* @__PURE__ */ jsx(
-                              CustomTimelineWithStatus,
-                              {
-                                events: expandedDetails == null ? void 0 : expandedDetails.map((item) => {
-                                  var _a3, _b3, _c3, _d3;
-                                  return {
-                                    date: moment(item == null ? void 0 : item.created_at).format(
-                                      "DD-MM-YYYY"
-                                    ),
-                                    time: moment(item == null ? void 0 : item.created_at).format(
-                                      "HH:mm"
-                                    ),
-                                    title: (item == null ? void 0 : item.type) === "create" ? `Raised by - ${(_a3 = item == null ? void 0 : item.created_by_user) == null ? void 0 : _a3.full_name}` : ((_b3 = item == null ? void 0 : item.created_by_user) == null ? void 0 : _b3.full_name) || "N/A",
-                                    subTitle: ((_c3 = item == null ? void 0 : item.comment_reasons) == null ? void 0 : _c3.comment) || "No Comments",
-                                    attachment: ((_d3 = item == null ? void 0 : item.comment_reasons) == null ? void 0 : _d3.file) || null,
-                                    count: (item == null ? void 0 : item.current_level) == "L0" ? "L0" : item == null ? void 0 : item.current_level_count,
-                                    cardType: "card",
-                                    status: (item == null ? void 0 : item.type) === "approve" ? StatusObj.approved : (item == null ? void 0 : item.type) === "reject" ? StatusObj.rejected : (item == null ? void 0 : item.type) === "send_back" ? StatusObj.sendback : (item == null ? void 0 : item.type) === "onhold" ? StatusObj.onhold : null
-                                  };
-                                })
-                              }
-                            ),
-                            /* @__PURE__ */ jsxs("div", { children: [
-                              /* @__PURE__ */ jsx(Typography, { variant: "caption", children: /* @__PURE__ */ jsxs("span", { style: { fontWeight: "bold" }, children: [
-                                "Currently Assigned to:",
-                                " "
-                              ] }) }),
-                              /* @__PURE__ */ jsx(
-                                Tooltip,
-                                {
-                                  title: (info == null ? void 0 : info.isLevelZero) ? (_p = (_o = expandedDetails == null ? void 0 : expandedDetails[0]) == null ? void 0 : _o.created_by_user) == null ? void 0 : _p.official_email_id : (_r = (_q = expandedDetails == null ? void 0 : expandedDetails[0]) == null ? void 0 : _q.assigned_user) == null ? void 0 : _r.official_email_id,
-                                  children: /* @__PURE__ */ jsx(Typography, { variant: "caption", children: (info == null ? void 0 : info.isLevelZero) ? `${expandedDetails == null ? void 0 : expandedDetails[0].created_by_user.full_name}   (${((_t = (_s = expandedDetails == null ? void 0 : expandedDetails[0]) == null ? void 0 : _s.created_by_user) == null ? void 0 : _t.group_employee_code) || "N/A"})` : `${(_v = (_u = expandedDetails == null ? void 0 : expandedDetails[0]) == null ? void 0 : _u.assigned_user) == null ? void 0 : _v.full_name}   (${((_x = (_w = expandedDetails == null ? void 0 : expandedDetails[0]) == null ? void 0 : _w.assigned_user) == null ? void 0 : _x.group_employee_code) || "N/A"})` })
-                                }
-                              )
-                            ] })
-                          ] }) })
-                        ]
-                      },
-                      index
-                    );
-                  }) : /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      style: {
-                        height: "100%",
-                        width: "100%",
-                        color: "gray",
-                        fontSize: "20px",
-                        display: "flex",
-                        justifyContent: "center",
-                        alignItems: "center"
-                      },
-                      children: "NO RECORD FOUND"
-                    }
-                  )
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(FilterButton, { onClick: () => setIsFilterOpen((prev) => !prev) })
+                    ] })
+                  ]
                 }
               ),
-              selectedApprovalOtions === "All Requests" && /* @__PURE__ */ jsx(
-                Box,
+              /* @__PURE__ */ jsxs(
+                Box$1,
                 {
                   className: "fixedModal hide-scrollbar",
                   sx: {
@@ -1810,627 +2186,60 @@ function ApprovalWorkflow({
                     px: 2,
                     pb: 3
                   },
-                  children: visibleAllRequests.length > 0 ? visibleAllRequests == null ? void 0 : visibleAllRequests.map((info, index) => {
-                    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
-                    if (!(info == null ? void 0 : info.isLevelZero)) {
-                      console.log("\u{1F680} ~ ApprovalWorkflow ~ Zero:", info);
-                    }
-                    const currentLevel = info == null ? void 0 : info.levels.find(
-                      (level_) => level_.id === (info == null ? void 0 : info.current_level)
-                    );
-                    const statusList = currentLevel ? currentLevel.status_list : [];
-                    (statusList || []).reduce(
-                      (acc, s) => {
-                        if ((s == null ? void 0 : s.status) != null) acc[s.status] = s;
-                        return acc;
-                      },
-                      {}
-                    );
-                    const filterRejectForLevelZero = (statusList2, info2) => {
-                      if (!(info2 == null ? void 0 : info2.isLevelZero)) return statusList2;
-                      return statusList2 == null ? void 0 : statusList2.filter((item) => item.status !== 3);
-                    };
-                    const redir = buildRedirectionUrl(info);
-                    const currentStatus = ((_c2 = (_b2 = (_a2 = info == null ? void 0 : info.levels) == null ? void 0 : _a2.find(
-                      (lvl) => lvl.id === (info == null ? void 0 : info.current_level)
-                    )) == null ? void 0 : _b2.selected_status) == null ? void 0 : _c2.status_id) === 1 ? "approved" : ((_f2 = (_e2 = (_d2 = info == null ? void 0 : info.levels) == null ? void 0 : _d2.find(
-                      (lvl) => lvl.id === (info == null ? void 0 : info.current_level)
-                    )) == null ? void 0 : _e2.selected_status) == null ? void 0 : _f2.status_id) === 3 ? "rejected" : "pending";
-                    const statusData = getStatus(currentStatus);
-                    return /* @__PURE__ */ jsxs(
-                      Card,
+                  children: [
+                    ((_g = tabs[selectedOption]) == null ? void 0 : _g.loading) && ((_h = tabs[selectedOption]) == null ? void 0 : _h.page) === 1 ? /* @__PURE__ */ jsx(
+                      Box$1,
                       {
-                        ref: index === visibleAllRequests.length - 1 ? lastCardRef : null,
                         sx: {
-                          mb: 3,
-                          borderRadius: "14px",
-                          boxShadow: "0px 2px 10px rgba(76, 78, 100, 0.1)",
-                          px: 3,
-                          py: 2,
-                          background: "white !important"
+                          display: "flex",
+                          justifyContent: "center",
+                          alignItems: "center",
+                          height: "100%",
+                          p: 4,
+                          width: "1100px"
                         },
-                        children: [
-                          /* @__PURE__ */ jsxs(
-                            CardContent,
-                            {
-                              sx: {
-                                display: "flex",
-                                justifyContent: "space-between",
-                                alignItems: "center",
-                                flexWrap: { xs: "wrap", md: "nowrap" },
-                                gap: 2
-                              },
-                              children: [
-                                /* @__PURE__ */ jsxs(Box, { sx: { flexBasis: "20%", minWidth: 220 }, children: [
-                                  /* @__PURE__ */ jsx(Tooltip, { title: info.activityInstruction, children: /* @__PURE__ */ jsx(
-                                    Typography,
-                                    {
-                                      variant: "h6",
-                                      fontWeight: 600,
-                                      noWrap: true,
-                                      color: "text.primary",
-                                      children: info.activity_name
-                                    }
-                                  ) }),
-                                  /* @__PURE__ */ jsx(Tooltip, { title: info.description_data, children: /* @__PURE__ */ jsx(
-                                    Typography,
-                                    {
-                                      variant: "body2",
-                                      noWrap: true,
-                                      sx: { mt: 0.5, color: "text.secondary" },
-                                      children: info.description_data
-                                    }
-                                  ) })
-                                ] }),
-                                /* @__PURE__ */ jsxs(Box, { sx: { flexBasis: "18%", minWidth: 180 }, children: [
-                                  /* @__PURE__ */ jsx(
-                                    Typography,
-                                    {
-                                      variant: "caption",
-                                      color: "text.secondary",
-                                      sx: { display: "block" },
-                                      children: "Links"
-                                    }
-                                  ),
-                                  /* @__PURE__ */ jsx(Tooltip, { title: redir, children: /* @__PURE__ */ jsx(
-                                    "a",
-                                    {
-                                      href: redir,
-                                      target: "_blank",
-                                      rel: "noreferrer",
-                                      style: {
-                                        cursor: "pointer",
-                                        textDecoration: "none"
-                                      },
-                                      children: /* @__PURE__ */ jsx(
-                                        Typography,
-                                        {
-                                          variant: "subtitle2",
-                                          color: "primary.dark",
-                                          sx: {
-                                            mt: 0.8,
-                                            lineHeight: "15.4px",
-                                            overflow: "hidden",
-                                            textOverflow: "ellipsis",
-                                            whiteSpace: "nowrap"
-                                          },
-                                          children: redir
-                                        }
-                                      )
-                                    }
-                                  ) })
-                                ] }),
-                                /* @__PURE__ */ jsxs(Box, { sx: { flexBasis: "12%", minWidth: 120 }, children: [
-                                  /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: "Attachments" }),
-                                  /* @__PURE__ */ jsx(
-                                    Typography,
-                                    {
-                                      variant: "body2",
-                                      noWrap: true,
-                                      sx: {
-                                        mt: 0.8,
-                                        color: ((_g2 = info == null ? void 0 : info.attachment_links) == null ? void 0 : _g2.length) ? "primary.dark" : "text.disabled"
-                                      },
-                                      children: ((_h = info == null ? void 0 : info.attachment_links) == null ? void 0 : _h.length) ? `${info.attachment_links.length} file(s)` : "N/A"
-                                    }
-                                  )
-                                ] }),
-                                /* @__PURE__ */ jsxs(Box, { sx: { flexBasis: "14%", minWidth: 130 }, children: [
-                                  /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: "TAT" }),
-                                  /* @__PURE__ */ jsx(
-                                    Typography,
-                                    {
-                                      variant: "body2",
-                                      sx: {
-                                        mt: 0.8,
-                                        fontWeight: 500,
-                                        color: "text.primary"
-                                      },
-                                      children: (currentLevel == null ? void 0 : currentLevel.tat_expiry) ? moment(currentLevel.tat_expiry).utcOffset("UTC+05:30").format("DD/MM/YYYY hh:mm A") : "N/A"
-                                    }
-                                  )
-                                ] }),
-                                /* @__PURE__ */ jsxs(
-                                  Box,
-                                  {
-                                    sx: {
-                                      flexBasis: "8%",
-                                      minWidth: 80,
-                                      textAlign: "center"
-                                    },
-                                    children: [
-                                      /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: "Current Level" }),
-                                      /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { mt: 0.8 }, children: (info == null ? void 0 : info.isLevelZero) ? "L0" : "L" + (((_j = (_i = info == null ? void 0 : info.levels) == null ? void 0 : _i.findIndex(
-                                        (lvl) => lvl.id === (info == null ? void 0 : info.current_level)
-                                      )) != null ? _j : -1) + 1 || "") })
-                                    ]
-                                  }
-                                ),
-                                /* @__PURE__ */ jsxs(
-                                  Box,
-                                  {
-                                    sx: {
-                                      flexBasis: "18%",
-                                      minWidth: 200,
-                                      display: "flex",
-                                      alignItems: "center",
-                                      justifyContent: "flex-end",
-                                      gap: 1.5
-                                    },
-                                    children: [
-                                      (info == null ? void 0 : info.current_status) !== "completed" && ((_l = (_k = info == null ? void 0 : info.levels) == null ? void 0 : _k.find(
-                                        (lvl) => lvl.id === (info == null ? void 0 : info.current_level)
-                                      )) == null ? void 0 : _l.order) <= ((_n = (_m = info == null ? void 0 : info.levels) == null ? void 0 : _m.find(
-                                        (lvl) => {
-                                          var _a3;
-                                          return Number(lvl.assign_to[0]) === ((_a3 = userInfo == null ? void 0 : userInfo.userInfo) == null ? void 0 : _a3.id);
-                                        }
-                                      )) == null ? void 0 : _n.order) ? /* @__PURE__ */ jsx(
-                                        Statusselector_default,
-                                        {
-                                          onSendBack: () => handleSendBack(info == null ? void 0 : info._id),
-                                          onApprove: () => {
-                                            var _a3;
-                                            return handleApprove(
-                                              `${info == null ? void 0 : info._id}|${(_a3 = statusList.find((i) => i.status == 1)) == null ? void 0 : _a3.id}`
-                                            );
-                                          },
-                                          onReject: () => {
-                                            var _a3;
-                                            return handleReject(
-                                              `${info == null ? void 0 : info._id}|${(_a3 = statusList.find((i) => i.status == 3)) == null ? void 0 : _a3.id}|${info == null ? void 0 : info.reasons}`
-                                            );
-                                          },
-                                          onHold: () => {
-                                            var _a3;
-                                            return handleOnHold(
-                                              `${info == null ? void 0 : info._id}|${(_a3 = statusList.find((i) => i.status == 2)) == null ? void 0 : _a3.id}`
-                                            );
-                                          },
-                                          level: info == null ? void 0 : info.isLevelZero,
-                                          statusList: filterRejectForLevelZero(
-                                            statusList,
-                                            info
-                                          )
-                                        }
-                                      ) : /* @__PURE__ */ jsx(
-                                        Chip,
-                                        {
-                                          variant: "filled",
-                                          sx: {
-                                            backgroundColor: `${getStatus(currentStatus).color} !important`,
-                                            color: `${getStatus(currentStatus).labelColor} !important`,
-                                            height: "40px",
-                                            px: 2,
-                                            borderRadius: "100px !important",
-                                            "& .MuiChip-label": {
-                                              fontSize: "14px",
-                                              lineHeight: "15.4px",
-                                              fontWeight: "500",
-                                              textTransform: "capitalize"
-                                            }
-                                          },
-                                          label: statusData.title
-                                        }
-                                      ),
-                                      /* @__PURE__ */ jsx(
-                                        Divider,
-                                        {
-                                          orientation: "vertical",
-                                          flexItem: true,
-                                          sx: {
-                                            borderColor: "#E0E0E0",
-                                            height: "40px"
-                                          }
-                                        }
-                                      ),
-                                      /* @__PURE__ */ jsx(
-                                        IconButton,
-                                        {
-                                          disableFocusRipple: true,
-                                          disableRipple: true,
-                                          color: "primary",
-                                          sx: {
-                                            background: "rgba(25,118,210,0.08)",
-                                            boxShadow: "2px 2px 10px 0px #4C4E6426",
-                                            "& span": { color: "primary.dark" }
-                                          },
-                                          onClick: () => handleExpandClick(info._id),
-                                          children: expandedId === info._id ? /* @__PURE__ */ jsx("span", { className: "icon-arrow-down-1" }) : /* @__PURE__ */ jsx("span", { className: "icon-arrow-right-3" })
-                                        }
-                                      )
-                                    ]
-                                  }
-                                )
-                              ]
-                            }
-                          ),
-                          expandedId === info._id && /* @__PURE__ */ jsx(Box, { sx: { mt: 2, ml: 2 }, children: !(expandedDetails == null ? void 0 : expandedDetails.length) ? /* @__PURE__ */ jsx(
-                            Box,
-                            {
-                              sx: {
-                                height: 150,
-                                display: "flex",
-                                justifyContent: "center",
-                                alignItems: "center"
-                              },
-                              children: /* @__PURE__ */ jsx(CircularProgress, { size: 36, color: "primary" })
-                            }
-                          ) : /* @__PURE__ */ jsxs("div", { children: [
-                            /* @__PURE__ */ jsx(
-                              CustomTimelineWithStatus,
-                              {
-                                events: expandedDetails == null ? void 0 : expandedDetails.map((item) => {
-                                  var _a3, _b3, _c3, _d3;
-                                  return {
-                                    date: moment(item == null ? void 0 : item.created_at).format(
-                                      "DD-MM-YYYY"
-                                    ),
-                                    time: moment(item == null ? void 0 : item.created_at).format(
-                                      "HH:mm"
-                                    ),
-                                    title: (item == null ? void 0 : item.type) === "create" ? `Raised by - ${(_a3 = item == null ? void 0 : item.created_by_user) == null ? void 0 : _a3.full_name}` : ((_b3 = item == null ? void 0 : item.created_by_user) == null ? void 0 : _b3.full_name) || "N/A",
-                                    subTitle: ((_c3 = item == null ? void 0 : item.comment_reasons) == null ? void 0 : _c3.comment) || "No Comments",
-                                    attachment: ((_d3 = item == null ? void 0 : item.comment_reasons) == null ? void 0 : _d3.file) || null,
-                                    count: (item == null ? void 0 : item.current_level) == "L0" ? "L0" : item == null ? void 0 : item.current_level_count,
-                                    cardType: "card",
-                                    status: (item == null ? void 0 : item.type) === "approve" ? StatusObj.approved : (item == null ? void 0 : item.type) === "reject" ? StatusObj.rejected : (item == null ? void 0 : item.type) === "send_back" ? StatusObj.sendback : (item == null ? void 0 : item.type) === "onhold" ? StatusObj.onhold : null
-                                  };
-                                })
-                              }
-                            ),
-                            /* @__PURE__ */ jsxs("div", { children: [
-                              /* @__PURE__ */ jsx(Typography, { variant: "caption", children: /* @__PURE__ */ jsxs("span", { style: { fontWeight: "bold" }, children: [
-                                "Currently Assigned to:",
-                                " "
-                              ] }) }),
-                              /* @__PURE__ */ jsx(
-                                Tooltip,
-                                {
-                                  title: (info == null ? void 0 : info.isLevelZero) ? (_p = (_o = expandedDetails == null ? void 0 : expandedDetails[0]) == null ? void 0 : _o.created_by_user) == null ? void 0 : _p.official_email_id : (_r = (_q = expandedDetails == null ? void 0 : expandedDetails[0]) == null ? void 0 : _q.assigned_user) == null ? void 0 : _r.official_email_id,
-                                  children: /* @__PURE__ */ jsx(Typography, { variant: "caption", children: (info == null ? void 0 : info.isLevelZero) ? `${expandedDetails == null ? void 0 : expandedDetails[0].created_by_user.full_name}   (${((_t = (_s = expandedDetails == null ? void 0 : expandedDetails[0]) == null ? void 0 : _s.created_by_user) == null ? void 0 : _t.group_employee_code) || "N/A"})` : `${(_v = (_u = expandedDetails == null ? void 0 : expandedDetails[0]) == null ? void 0 : _u.assigned_user) == null ? void 0 : _v.full_name}   (${((_x = (_w = expandedDetails == null ? void 0 : expandedDetails[0]) == null ? void 0 : _w.assigned_user) == null ? void 0 : _x.group_employee_code) || "N/A"})` })
-                                }
-                              )
-                            ] })
-                          ] }) })
-                        ]
+                        children: /* @__PURE__ */ jsx(CircularProgress, {})
+                      }
+                    ) : ((_j = (_i = tabs[selectedOption]) == null ? void 0 : _i.data) == null ? void 0 : _j.length) > 0 ? tabs[selectedOption].data.map((info, index) => /* @__PURE__ */ jsx(
+                      WorkflowRequestCard,
+                      {
+                        requestDetails: info,
+                        index,
+                        isLast: index === tabs[selectedOption].data.length - 1,
+                        lastCardRef,
+                        expandedId,
+                        handleExpandClick,
+                        handleOpenViewMore,
+                        handleApprove,
+                        handleReject,
+                        handleSendBack,
+                        handleOnHold,
+                        expandedDetails,
+                        userInfo,
+                        helpers: {
+                          timeLeftDHm,
+                          getStatus,
+                          buildRedirectionUrl
+                        }
                       },
                       index
-                    );
-                  }) : /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      style: {
-                        height: "100%",
-                        width: "100%",
-                        color: "gray",
-                        fontSize: "20px",
-                        display: "flex",
-                        justifyContent: "center",
-                        alignItems: "center"
-                      },
-                      children: "NO RECORD FOUND"
-                    }
-                  )
-                }
-              ),
-              selectedApprovalOtions === "Action Required" && /* @__PURE__ */ jsx(
-                Box,
-                {
-                  className: "fixedModal hide-scrollbar",
-                  sx: {
-                    overflowY: "auto",
-                    height: "calc(100vh - 180px)",
-                    px: 2,
-                    pb: 3
-                  },
-                  children: visiblePendingRequests.length > 0 ? visiblePendingRequests == null ? void 0 : visiblePendingRequests.map((info, index) => {
-                    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u;
-                    const currentLevel = (_a2 = info == null ? void 0 : info.levels) == null ? void 0 : _a2.find(
-                      (level_) => level_.id === (info == null ? void 0 : info.current_level)
-                    );
-                    const statusList = currentLevel ? currentLevel.status_list : [];
-                    const filterRejectForLevelZero = (statusList2, info2) => {
-                      if (!(info2 == null ? void 0 : info2.isLevelZero)) return statusList2;
-                      return statusList2 == null ? void 0 : statusList2.filter((item) => item.status !== 3);
-                    };
-                    const redir = buildRedirectionUrl(info);
-                    const currentStatus = ((_d2 = (_c2 = (_b2 = info == null ? void 0 : info.levels) == null ? void 0 : _b2.find(
-                      (lvl) => lvl.id === (info == null ? void 0 : info.current_level)
-                    )) == null ? void 0 : _c2.selected_status) == null ? void 0 : _d2.status_id) === 1 ? "approved" : ((_g2 = (_f2 = (_e2 = info == null ? void 0 : info.levels) == null ? void 0 : _e2.find(
-                      (lvl) => lvl.id === (info == null ? void 0 : info.current_level)
-                    )) == null ? void 0 : _f2.selected_status) == null ? void 0 : _g2.status_id) === 3 ? "rejected" : "pending";
-                    const statusData = getStatus(currentStatus);
-                    return /* @__PURE__ */ jsxs(
-                      Card,
+                    )) : /* @__PURE__ */ jsx(
+                      "div",
                       {
-                        ref: index === visiblePendingRequests.length - 1 ? lastCardRef : null,
-                        sx: {
-                          mb: 3,
-                          borderRadius: "14px",
-                          boxShadow: "0px 2px 10px rgba(76, 78, 100, 0.1)",
-                          px: 3,
-                          py: 2,
-                          background: "white !important"
+                        style: {
+                          height: "100%",
+                          width: "1100px",
+                          color: "gray",
+                          fontSize: "20px",
+                          display: "flex",
+                          justifyContent: "center",
+                          alignItems: "center"
                         },
-                        children: [
-                          /* @__PURE__ */ jsxs(
-                            CardContent,
-                            {
-                              sx: {
-                                display: "flex",
-                                justifyContent: "space-between",
-                                alignItems: "center",
-                                flexWrap: { xs: "wrap", md: "nowrap" },
-                                gap: 2
-                              },
-                              children: [
-                                /* @__PURE__ */ jsxs(Box, { sx: { flexBasis: "20%", minWidth: 220 }, children: [
-                                  /* @__PURE__ */ jsx(Tooltip, { title: info.activityInstruction, children: /* @__PURE__ */ jsx(Typography, { variant: "h6", fontWeight: 600, noWrap: true, children: info.activity_name }) }),
-                                  /* @__PURE__ */ jsx(Tooltip, { title: info.description_data, children: /* @__PURE__ */ jsx(
-                                    Typography,
-                                    {
-                                      variant: "body2",
-                                      color: "text.secondary",
-                                      noWrap: true,
-                                      sx: { mt: 0.5 },
-                                      children: info.description_data
-                                    }
-                                  ) })
-                                ] }),
-                                /* @__PURE__ */ jsxs(Box, { sx: { flexBasis: "18%", minWidth: 180 }, children: [
-                                  /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: "Links" }),
-                                  /* @__PURE__ */ jsx(Tooltip, { title: redir, children: /* @__PURE__ */ jsx(
-                                    "a",
-                                    {
-                                      href: redir,
-                                      target: "_blank",
-                                      rel: "noreferrer",
-                                      style: {
-                                        cursor: "pointer",
-                                        textDecoration: "none"
-                                      },
-                                      children: /* @__PURE__ */ jsx(
-                                        Typography,
-                                        {
-                                          variant: "subtitle2",
-                                          color: "primary.dark",
-                                          sx: {
-                                            mt: 0.8,
-                                            lineHeight: "15.4px",
-                                            overflow: "hidden",
-                                            textOverflow: "ellipsis",
-                                            whiteSpace: "nowrap"
-                                          },
-                                          children: redir
-                                        }
-                                      )
-                                    }
-                                  ) })
-                                ] }),
-                                /* @__PURE__ */ jsxs(Box, { sx: { flexBasis: "12%", minWidth: 120 }, children: [
-                                  /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: "Attachments" }),
-                                  /* @__PURE__ */ jsx(
-                                    Typography,
-                                    {
-                                      variant: "body2",
-                                      noWrap: true,
-                                      sx: {
-                                        mt: 0.8,
-                                        color: ((_h = info == null ? void 0 : info.attachment_links) == null ? void 0 : _h.length) ? "primary.dark" : "text.disabled"
-                                      },
-                                      children: ((_i = info == null ? void 0 : info.attachment_links) == null ? void 0 : _i.length) ? `${info.attachment_links.length} file(s)` : "N/A"
-                                    }
-                                  )
-                                ] }),
-                                /* @__PURE__ */ jsxs(Box, { sx: { flexBasis: "14%", minWidth: 130 }, children: [
-                                  /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: "TAT" }),
-                                  /* @__PURE__ */ jsx(
-                                    Typography,
-                                    {
-                                      variant: "body2",
-                                      sx: {
-                                        mt: 0.8,
-                                        fontWeight: 500,
-                                        color: "text.primary"
-                                      },
-                                      children: (currentLevel == null ? void 0 : currentLevel.tat_expiry) ? moment(currentLevel.tat_expiry).utcOffset("UTC+05:30").format("DD/MM/YYYY hh:mm A") : "N/A"
-                                    }
-                                  )
-                                ] }),
-                                /* @__PURE__ */ jsxs(
-                                  Box,
-                                  {
-                                    sx: {
-                                      flexBasis: "8%",
-                                      minWidth: 80,
-                                      textAlign: "center"
-                                    },
-                                    children: [
-                                      /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: "Current Level" }),
-                                      /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { mt: 0.8 }, children: (info == null ? void 0 : info.isLevelZero) ? "L0" : "L" + (((_k = (_j = info == null ? void 0 : info.levels) == null ? void 0 : _j.findIndex(
-                                        (lvl) => lvl.id === (info == null ? void 0 : info.current_level)
-                                      )) != null ? _k : -1) + 1 || "") })
-                                    ]
-                                  }
-                                ),
-                                /* @__PURE__ */ jsxs(
-                                  Box,
-                                  {
-                                    sx: {
-                                      flexBasis: "18%",
-                                      minWidth: 200,
-                                      display: "flex",
-                                      alignItems: "center",
-                                      justifyContent: "flex-end",
-                                      gap: 1.5
-                                    },
-                                    children: [
-                                      (info == null ? void 0 : info.current_status) !== "completed" ? /* @__PURE__ */ jsx(
-                                        Statusselector_default,
-                                        {
-                                          onSendBack: () => handleSendBack(info == null ? void 0 : info._id),
-                                          onApprove: () => {
-                                            var _a3;
-                                            return handleApprove(
-                                              `${info == null ? void 0 : info._id}|${(_a3 = statusList.find((i) => i.status == 1)) == null ? void 0 : _a3.id}`
-                                            );
-                                          },
-                                          onReject: () => {
-                                            var _a3;
-                                            return handleReject(
-                                              `${info == null ? void 0 : info._id}|${(_a3 = statusList.find((i) => i.status == 3)) == null ? void 0 : _a3.id}|${info == null ? void 0 : info.reasons}`
-                                            );
-                                          },
-                                          onHold: () => {
-                                            var _a3;
-                                            return handleOnHold(
-                                              `${info == null ? void 0 : info._id}|${(_a3 = statusList.find((i) => i.status == 2)) == null ? void 0 : _a3.id}`
-                                            );
-                                          },
-                                          level: info == null ? void 0 : info.isLevelZero,
-                                          statusList: filterRejectForLevelZero(
-                                            statusList,
-                                            info
-                                          )
-                                        }
-                                      ) : /* @__PURE__ */ jsx(
-                                        Chip,
-                                        {
-                                          variant: "filled",
-                                          sx: {
-                                            backgroundColor: statusData.color,
-                                            color: statusData.labelColor,
-                                            height: "40px",
-                                            px: 2,
-                                            borderRadius: "100px !important",
-                                            "& .MuiChip-label": {
-                                              fontSize: "14px",
-                                              lineHeight: "15.4px",
-                                              fontWeight: "500",
-                                              textTransform: "capitalize"
-                                            }
-                                          },
-                                          label: statusData.title
-                                        }
-                                      ),
-                                      /* @__PURE__ */ jsx(
-                                        Divider,
-                                        {
-                                          orientation: "vertical",
-                                          flexItem: true,
-                                          sx: {
-                                            borderColor: "#E0E0E0",
-                                            height: "40px"
-                                          }
-                                        }
-                                      ),
-                                      /* @__PURE__ */ jsx(
-                                        IconButton,
-                                        {
-                                          color: "primary",
-                                          sx: {
-                                            background: "rgba(25,118,210,0.08)",
-                                            boxShadow: "2px 2px 10px 0px #4C4E6426",
-                                            "& span": { color: "primary.dark" }
-                                          },
-                                          onClick: () => handleExpandClick(info._id),
-                                          children: expandedId === info._id ? /* @__PURE__ */ jsx("span", { className: "icon-arrow-down-1" }) : /* @__PURE__ */ jsx("span", { className: "icon-arrow-right-3" })
-                                        }
-                                      )
-                                    ]
-                                  }
-                                )
-                              ]
-                            }
-                          ),
-                          expandedId === info._id && /* @__PURE__ */ jsx(Box, { sx: { mt: 2, ml: 2 }, children: !(expandedDetails == null ? void 0 : expandedDetails.length) ? /* @__PURE__ */ jsx(
-                            Box,
-                            {
-                              sx: {
-                                height: 150,
-                                display: "flex",
-                                justifyContent: "center",
-                                alignItems: "center"
-                              },
-                              children: /* @__PURE__ */ jsx(CircularProgress, { size: 36, color: "primary" })
-                            }
-                          ) : /* @__PURE__ */ jsxs("div", { children: [
-                            /* @__PURE__ */ jsx(
-                              CustomTimelineWithStatus,
-                              {
-                                events: expandedDetails == null ? void 0 : expandedDetails.map((item) => {
-                                  var _a3, _b3, _c3, _d3;
-                                  return {
-                                    date: moment(item == null ? void 0 : item.created_at).format(
-                                      "DD-MM-YYYY"
-                                    ),
-                                    time: moment(item == null ? void 0 : item.created_at).format(
-                                      "HH:mm"
-                                    ),
-                                    title: (item == null ? void 0 : item.type) === "create" ? `Raised by - ${(_a3 = item == null ? void 0 : item.created_by_user) == null ? void 0 : _a3.full_name}` : ((_b3 = item == null ? void 0 : item.created_by_user) == null ? void 0 : _b3.full_name) || "N/A",
-                                    subTitle: ((_c3 = item == null ? void 0 : item.comment_reasons) == null ? void 0 : _c3.comment) || "No Comments",
-                                    attachment: ((_d3 = item == null ? void 0 : item.comment_reasons) == null ? void 0 : _d3.file) || null,
-                                    count: (item == null ? void 0 : item.current_level) == "L0" ? "L0" : item == null ? void 0 : item.current_level_count,
-                                    cardType: "card",
-                                    status: (item == null ? void 0 : item.type) === "approve" ? StatusObj.approved : (item == null ? void 0 : item.type) === "reject" ? StatusObj.rejected : (item == null ? void 0 : item.type) === "send_back" ? StatusObj.sendback : (item == null ? void 0 : item.type) === "onhold" ? StatusObj.onhold : null
-                                  };
-                                })
-                              }
-                            ),
-                            /* @__PURE__ */ jsxs("div", { children: [
-                              /* @__PURE__ */ jsx(Typography, { variant: "caption", children: /* @__PURE__ */ jsxs("span", { style: { fontWeight: "bold" }, children: [
-                                "Currently Assigned to:",
-                                " "
-                              ] }) }),
-                              /* @__PURE__ */ jsx(
-                                Tooltip,
-                                {
-                                  title: (info == null ? void 0 : info.isLevelZero) ? (_m = (_l = expandedDetails == null ? void 0 : expandedDetails[0]) == null ? void 0 : _l.created_by_user) == null ? void 0 : _m.official_email_id : (_o = (_n = expandedDetails == null ? void 0 : expandedDetails[0]) == null ? void 0 : _n.assigned_user) == null ? void 0 : _o.official_email_id,
-                                  children: /* @__PURE__ */ jsx(Typography, { variant: "caption", children: (info == null ? void 0 : info.isLevelZero) ? `${expandedDetails == null ? void 0 : expandedDetails[0].created_by_user.full_name}   (${((_q = (_p = expandedDetails == null ? void 0 : expandedDetails[0]) == null ? void 0 : _p.created_by_user) == null ? void 0 : _q.group_employee_code) || "N/A"})` : `${(_s = (_r = expandedDetails == null ? void 0 : expandedDetails[0]) == null ? void 0 : _r.assigned_user) == null ? void 0 : _s.full_name}   (${((_u = (_t = expandedDetails == null ? void 0 : expandedDetails[0]) == null ? void 0 : _t.assigned_user) == null ? void 0 : _u.group_employee_code) || "N/A"})` })
-                                }
-                              )
-                            ] })
-                          ] }) })
-                        ]
-                      },
-                      index
-                    );
-                  }) : /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      style: {
-                        height: "100%",
-                        width: "100%",
-                        color: "gray",
-                        fontSize: "20px",
-                        display: "flex",
-                        justifyContent: "center",
-                        alignItems: "center"
-                      },
-                      children: "NO RECORD FOUND"
-                    }
-                  )
+                        children: "NO RECORD FOUND"
+                      }
+                    ),
+                    ((_k = tabs[selectedOption]) == null ? void 0 : _k.loading) && ((_l = tabs[selectedOption]) == null ? void 0 : _l.page) > 1 && /* @__PURE__ */ jsx(Box$1, { sx: { display: "flex", justifyContent: "center", p: 2 }, children: /* @__PURE__ */ jsx(CircularProgress, { size: 24 }) })
+                  ]
                 }
               )
             ]
@@ -2453,8 +2262,8 @@ function ApprovalWorkflow({
         openModal: !!approveTarget,
         closeModal: () => setApproveTarget(null),
         header: "Approve",
-        workflowLogId: (_a = approveTarget == null ? void 0 : approveTarget.split("|")) == null ? void 0 : _a[0],
-        statusId: (_b = approveTarget == null ? void 0 : approveTarget.split("|")) == null ? void 0 : _b[1]
+        workflowLogId: (_m = approveTarget == null ? void 0 : approveTarget.split("|")) == null ? void 0 : _m[0],
+        statusId: (_n = approveTarget == null ? void 0 : approveTarget.split("|")) == null ? void 0 : _n[1]
       }
     ),
     /* @__PURE__ */ jsx(
@@ -2463,9 +2272,9 @@ function ApprovalWorkflow({
         openModal: !!rejectTarget,
         closeModal: () => setRejectTarget(null),
         header: "Reject",
-        workflowLogId: (_c = rejectTarget == null ? void 0 : rejectTarget.split("|")) == null ? void 0 : _c[0],
-        statusId: (_d = rejectTarget == null ? void 0 : rejectTarget.split("|")) == null ? void 0 : _d[1],
-        rejection_reason_master: (_e = rejectTarget == null ? void 0 : rejectTarget.split("|")) == null ? void 0 : _e[2]
+        workflowLogId: (_o = rejectTarget == null ? void 0 : rejectTarget.split("|")) == null ? void 0 : _o[0],
+        statusId: (_p = rejectTarget == null ? void 0 : rejectTarget.split("|")) == null ? void 0 : _p[1],
+        rejection_reason_master: (_q = rejectTarget == null ? void 0 : rejectTarget.split("|")) == null ? void 0 : _q[2]
       }
     ),
     /* @__PURE__ */ jsx(
@@ -2474,8 +2283,79 @@ function ApprovalWorkflow({
         openModal: !!onHoldTarget,
         closeModal: () => setOnHoldTarget(null),
         header: "On Hold",
-        workflowLogId: (_f = onHoldTarget == null ? void 0 : onHoldTarget.split("|")) == null ? void 0 : _f[0],
-        statusId: (_g = onHoldTarget == null ? void 0 : onHoldTarget.split("|")) == null ? void 0 : _g[1]
+        workflowLogId: (_r = onHoldTarget == null ? void 0 : onHoldTarget.split("|")) == null ? void 0 : _r[0],
+        statusId: (_s = onHoldTarget == null ? void 0 : onHoldTarget.split("|")) == null ? void 0 : _s[1]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Dialog,
+      {
+        open: isViewMoreOpen,
+        onClose: handleCloseViewMore,
+        maxWidth: "sm",
+        fullWidth: true,
+        PaperProps: {
+          sx: {
+            borderRadius: "16px",
+            padding: "10px",
+            position: "relative"
+            // For absolute close button
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsxs(
+            DialogTitle,
+            {
+              sx: {
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
+                paddingBottom: "10px"
+              },
+              children: [
+                /* @__PURE__ */ jsx(Typography, { variant: "h6", sx: { fontWeight: 600 }, children: "Description Details" }),
+                /* @__PURE__ */ jsx(
+                  IconButton,
+                  {
+                    onClick: handleCloseViewMore,
+                    sx: {
+                      position: "absolute",
+                      right: 8,
+                      top: 8,
+                      color: (theme2) => theme2.palette.grey[500]
+                    },
+                    children: /* @__PURE__ */ jsx(CloseIcon, {})
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(DialogContent$1, { dividers: true, sx: { borderTop: "none" }, children: /* @__PURE__ */ jsx(Box$1, { sx: { display: "flex", flexDirection: "column", gap: 2 }, children: viewMoreDetails == null ? void 0 : viewMoreDetails.map((data, idx) => /* @__PURE__ */ jsxs(
+            Typography,
+            {
+              className: "detail-item",
+              sx: { fontSize: "14px" },
+              children: [
+                /* @__PURE__ */ jsxs("span", { style: { fontWeight: "bold", color: "#666" }, children: [
+                  data[0].replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase()),
+                  ":"
+                ] }),
+                " ",
+                /* @__PURE__ */ jsx("span", { style: { color: "#000" }, children: data[1] })
+              ]
+            },
+            idx
+          )) }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      FilterModal,
+      {
+        open: isFilterOpen,
+        onClose: () => setIsFilterOpen(false),
+        initialFilters: (_t = tabs[selectedOption]) == null ? void 0 : _t.filters,
+        onApply: handleApplyFilter
       }
     )
   ] });
@@ -2503,15 +2383,31 @@ function DialogOpener({
     return () => window.removeEventListener("resize", updateScreenWidth);
   }, []);
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
-    Dialog,
+    Dialog$1,
     {
-      fullScreen: true,
+      fullScreen: false,
       open: openDialog,
       onClose: () => handleClose && handleClose(),
       "aria-labelledby": "responsive-dialog-title",
-      sx: { zIndex: 1234 },
+      maxWidth: "lg",
+      sx: {
+        "& .MuiDialog-container": {
+          justifyContent: "flex-end",
+          alignItems: "flex-start"
+        },
+        "& .MuiDialog-paper": {
+          position: "fixed",
+          right: 0,
+          top: 0,
+          height: "100vh",
+          maxHeight: "100vh",
+          margin: 0,
+          borderRadius: 0
+        }
+      },
       children: [
-        /* @__PURE__ */ jsxs(DialogContent, { children: [
+        /* @__PURE__ */ jsxs(DialogTitle, { children: [
+          "Workflow",
           /* @__PURE__ */ jsx(
             IconButton,
             {
@@ -2521,26 +2417,32 @@ function DialogOpener({
               sx: { float: "right" },
               children: /* @__PURE__ */ jsx(HighlightOffIcon, { style: { color: "#666666" } })
             }
-          ),
-          /* @__PURE__ */ jsx(
-            ApprovalWorkflow,
-            {
-              userInfo: userInfoData,
-              selectedWorkflowsList
-            }
           )
         ] }),
-        /* @__PURE__ */ jsx(DialogActions5, { children: /* @__PURE__ */ jsx(
-          Button7,
+        /* @__PURE__ */ jsx(
+          DialogContent,
           {
-            variant: "contained",
-            color: "primary",
             sx: {
-              display: "flex",
-              justifyContent: "flex-end",
-              alignItems: "center"
+              overflow: "hidden",
+              width: "100%",
+              height: "100%",
+              padding: "0 20px"
             },
+            children: /* @__PURE__ */ jsx(
+              ApprovalWorkflow,
+              {
+                userInfo: userInfoData,
+                selectedWorkflowsList
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(DialogActions6, { children: /* @__PURE__ */ jsx(
+          WorkflowButton_default,
+          {
+            variant: "approve",
             onClick: handleClose,
+            className: "dialog-close-btn",
             children: "Close"
           }
         ) })