amp-workflow-ui 0.1.1 → 0.1.3

package/dist/index.js

@@ -84,7 +84,12 @@ var ActionMenu = ({
   ] });
 };
 var Statusselector_default = ActionMenu;
-function SendBackDialog({ openModal, closeModal, header, workflowLogId }) {
+function SendBackDialog({
+  openModal,
+  closeModal,
+  header,
+  workflowLogId
+}) {
   const { userInfo, api } = useWorkflowContext();
   const [comment, setComment] = React7.useState("");
   const [selectedFile, setSelectedFile] = React7.useState(null);
@@ -102,7 +107,9 @@ function SendBackDialog({ openModal, closeModal, header, workflowLogId }) {
     const formData = new FormData();
     formData.append("file", file);
     try {
-      const response = await api.post("/workflow/upload-document", formData, {
+      const response = await api.post({
+        url: "/workflow/upload-document",
+        data: formData,
         headers: { "Content-Type": "multipart/form-data" }
       });
       setFileName(response.data.file);
@@ -138,10 +145,14 @@ function SendBackDialog({ openModal, closeModal, header, workflowLogId }) {
     if (!validateFields()) return;
     setLoading(true);
     try {
-      const res = await api.post(`/workflow/send-back/${workflowLogId}`, {
-        comment,
-        file: selectedFile,
-        created_by: (_a = userInfo == null ? void 0 : userInfo.userInfo) == null ? void 0 : _a.id
+      const res = await api.post({
+        url: `/workflow/send-back/${workflowLogId}`,
+        data: {
+          comment,
+          file: selectedFile,
+          created_by: (_a = userInfo == null ? void 0 : userInfo.userInfo) == null ? void 0 : _a.id
+        },
+        serviceURL: "api"
       });
       if ((res == null ? void 0 : res.status) === 200) toast__default.default.success("Successfully sent back!");
       if ((_b = res == null ? void 0 : res.error) == null ? void 0 : _b.message) {
@@ -154,50 +165,107 @@ function SendBackDialog({ openModal, closeModal, header, workflowLogId }) {
       setLoading(false);
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(Dialog__default.default, { open: openModal, onClose: closeModal, "aria-labelledby": "responsive-dialog-title", sx: { "& .MuiPaper-root.MuiDialog-paper": { width: "550px" } }, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(material.DialogTitle, { id: "responsive-dialog-title", children: header }),
-      /* @__PURE__ */ jsxRuntime.jsx(material.IconButton, { disableFocusRipple: true, disableRipple: true, onClick: closeModal, children: /* @__PURE__ */ jsxRuntime.jsx(HighlightOffIcon__default.default, { style: { color: "#666666" } }) })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(DialogContent__default.default, { children: /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { mb: 5 }, children: /* @__PURE__ */ jsxRuntime.jsxs(material.Grid, { container: true, spacing: 5, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(material.Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsxRuntime.jsx(
-        material.TextField,
-        {
-          fullWidth: true,
-          label: "Comment",
-          value: comment,
-          placeholder: "Comment Here",
-          onChange: (e) => setComment(e.target.value),
-          required: true,
-          error: !!error.comment,
-          helperText: error.comment
-        }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsxs(material.Grid, { item: true, xs: 12, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          material.TextField,
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Dialog__default.default,
+    {
+      open: openModal,
+      onClose: closeModal,
+      "aria-labelledby": "responsive-dialog-title",
+      sx: { "& .MuiPaper-root.MuiDialog-paper": { width: "550px" } },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          material.Box,
           {
-            type: "text",
-            fullWidth: true,
-            label: "Attachment",
-            placeholder: "Attachment",
-            InputProps: {
-              endAdornment: /* @__PURE__ */ jsxRuntime.jsx(material.InputAdornment, { position: "end", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "icon-export-1" }) })
+            sx: {
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center"
             },
-            onClick: handleAttachment,
-            value: fileName,
-            error: !!error.file,
-            helperText: error.file
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(material.DialogTitle, { id: "responsive-dialog-title", children: header }),
+              /* @__PURE__ */ jsxRuntime.jsx(material.IconButton, { disableFocusRipple: true, disableRipple: true, onClick: closeModal, children: /* @__PURE__ */ jsxRuntime.jsx(HighlightOffIcon__default.default, { style: { color: "#666666" } }) })
+            ]
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("input", { type: "file", ref: fileInputRef, style: { display: "none" }, onChange: handleFileChange })
-      ] })
-    ] }) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(material.DialogActions, { children: /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", justifyContent: "flex-end", alignItems: "center" }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(material.Button, { onClick: closeModal, size: "large", variant: "outlined", color: "primary", sx: { mr: 2 }, children: "Close" }),
-      /* @__PURE__ */ jsxRuntime.jsx(material.Button, { onClick: onSubmit, size: "large", variant: "contained", color: "primary", disabled: loading || fileLoading, children: loading ? /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: 24, color: "inherit" }) : "Submit" })
-    ] }) })
-  ] });
+        /* @__PURE__ */ jsxRuntime.jsx(DialogContent__default.default, { children: /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { mb: 5 }, children: /* @__PURE__ */ jsxRuntime.jsxs(material.Grid, { container: true, spacing: 5, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(material.Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsxRuntime.jsx(
+            material.TextField,
+            {
+              fullWidth: true,
+              label: "Comment",
+              value: comment,
+              placeholder: "Comment Here",
+              onChange: (e) => setComment(e.target.value),
+              required: true,
+              error: !!error.comment,
+              helperText: error.comment
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(material.Grid, { item: true, xs: 12, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              material.TextField,
+              {
+                type: "text",
+                fullWidth: true,
+                label: "Attachment",
+                placeholder: "Attachment",
+                InputProps: {
+                  endAdornment: /* @__PURE__ */ jsxRuntime.jsx(material.InputAdornment, { position: "end", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "icon-export-1" }) })
+                },
+                onClick: handleAttachment,
+                value: fileName,
+                error: !!error.file,
+                helperText: error.file
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                type: "file",
+                ref: fileInputRef,
+                style: { display: "none" },
+                onChange: handleFileChange
+              }
+            )
+          ] })
+        ] }) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(material.DialogActions, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+          material.Box,
+          {
+            sx: {
+              display: "flex",
+              justifyContent: "flex-end",
+              alignItems: "center"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                material.Button,
+                {
+                  onClick: closeModal,
+                  size: "large",
+                  variant: "outlined",
+                  color: "primary",
+                  sx: { mr: 2 },
+                  children: "Close"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                material.Button,
+                {
+                  onClick: onSubmit,
+                  size: "large",
+                  variant: "contained",
+                  color: "primary",
+                  disabled: loading || fileLoading,
+                  children: loading ? /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: 24, color: "inherit" }) : "Submit"
+                }
+              )
+            ]
+          }
+        ) })
+      ]
+    }
+  );
 }
 var SendBackDialog_default = SendBackDialog;
 function ApproveDialog({ openModal, closeModal, header, workflowLogId, statusId }) {
@@ -368,16 +436,297 @@ function OnHoldDialog({ openModal, closeModal, header, workflowLogId, statusId }
   ] });
 }
 var OnHoldDialog_default = OnHoldDialog;
+var getStatus = (status, theme) => {
+  const s = status == null ? void 0 : status.toLowerCase();
+  const colors = {
+    approved: {
+      bg: theme.palette.success.light,
+      text: theme.palette.success.main
+    },
+    rejected: { bg: theme.palette.error.light, text: theme.palette.error.main },
+    onhold: {
+      bg: theme.palette.warning.light,
+      text: theme.palette.warning.main
+    },
+    inprogress: { bg: theme.palette.info.light, text: theme.palette.info.main },
+    pending: { bg: theme.palette.grey[200], text: theme.palette.text.primary }
+  };
+  return colors[s] || colors.pending;
+};
+function ConnectedTimeline({ events }) {
+  const { api } = useWorkflowContext();
+  const theme = material.useTheme();
+  const [isMobile, setIsMobile] = React7.useState(false);
+  React7.useEffect(() => {
+    const checkScreen = () => setIsMobile(window.innerWidth < 768);
+    checkScreen();
+    window.addEventListener("resize", checkScreen);
+    return () => window.removeEventListener("resize", checkScreen);
+  }, []);
+  const handleAttachmentClick = (attachment) => {
+    api.get({
+      url: `/workflow/uploaded-document-url/${attachment.split("/").reverse()[0]}`,
+      serviceURL: "api"
+    }).then((res) => window.open(res.data, "_blank"));
+  };
+  const columns = 4;
+  const rows = [];
+  for (let i = 0; i < (events == null ? void 0 : events.length); i += columns)
+    rows.push(events.slice(i, i + columns));
+  return /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { py: 4, position: "relative" }, children: rows.map((row, rowIndex) => {
+    const reversed = rowIndex % 2 === 1;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      material.Box,
+      {
+        sx: {
+          display: "flex",
+          flexDirection: reversed ? "row-reverse" : "row",
+          justifyContent: "left",
+          alignItems: "center",
+          gap: 6,
+          position: "relative",
+          mb: 8,
+          flexWrap: isMobile ? "wrap" : "nowrap"
+        },
+        children: row.map((event, index) => {
+          var _a;
+          const globalIndex = rowIndex * columns + index;
+          const status = getStatus((_a = event.status) == null ? void 0 : _a.title, theme);
+          const isDisabled = event.cardType === "disableCard";
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            material.Box,
+            {
+              sx: {
+                position: "relative",
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center"
+              },
+              children: [
+                !isMobile && index < row.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(
+                  material.Box,
+                  {
+                    sx: {
+                      position: "absolute",
+                      top: "50%",
+                      [reversed ? "right" : "left"]: "100%",
+                      width: "60px",
+                      height: "2px",
+                      background: theme.palette.primary.main,
+                      zIndex: 0
+                    }
+                  }
+                ),
+                !isMobile && globalIndex === (rowIndex + 1) * columns - 1 && globalIndex < events.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(
+                  material.Box,
+                  {
+                    sx: {
+                      position: "absolute",
+                      bottom: "-48px",
+                      left: reversed ? "0%" : "100%",
+                      width: "2px",
+                      height: "48px",
+                      background: theme.palette.primary.main,
+                      zIndex: 0
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  material.Card,
+                  {
+                    sx: {
+                      width: "230px",
+                      minHeight: "180px",
+                      borderRadius: "16px",
+                      border: `1px solid ${isDisabled ? theme.palette.success.light : theme.palette.divider}`,
+                      backgroundColor: isDisabled ? theme.palette.action.hover : theme.palette.background.paper,
+                      textAlign: "center",
+                      boxShadow: "0px 4px 10px rgba(0,0,0,0.05)",
+                      transition: "all 0.25s ease-in-out",
+                      "&:hover": {
+                        boxShadow: "0px 6px 14px rgba(0,0,0,0.1)",
+                        transform: "translateY(-2px)"
+                      }
+                    },
+                    children: /* @__PURE__ */ jsxRuntime.jsxs(material.CardContent, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs(
+                        material.Box,
+                        {
+                          sx: {
+                            display: "flex",
+                            justifyContent: "space-between",
+                            alignItems: "center",
+                            mb: 1
+                          },
+                          children: [
+                            /* @__PURE__ */ jsxRuntime.jsx(
+                              material.Typography,
+                              {
+                                variant: "body2",
+                                color: theme.palette.text.secondary,
+                                children: event.date
+                              }
+                            ),
+                            event.status && /* @__PURE__ */ jsxRuntime.jsx(
+                              material.Chip,
+                              {
+                                label: event.status.title,
+                                sx: {
+                                  backgroundColor: status.bg,
+                                  color: status.text,
+                                  fontSize: 12,
+                                  height: 24,
+                                  fontWeight: 600,
+                                  borderRadius: "16px"
+                                }
+                              }
+                            )
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        material.Box,
+                        {
+                          sx: {
+                            width: 36,
+                            height: 36,
+                            borderRadius: "50%",
+                            border: `2px solid ${theme.palette.primary.main}`,
+                            display: "flex",
+                            justifyContent: "center",
+                            alignItems: "center",
+                            color: theme.palette.primary.main,
+                            fontWeight: 600,
+                            fontSize: 14,
+                            mx: "auto",
+                            mb: 1.5
+                          },
+                          children: event.count
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: event.title, children: /* @__PURE__ */ jsxRuntime.jsx(
+                        material.Typography,
+                        {
+                          variant: "subtitle1",
+                          fontWeight: 600,
+                          color: isDisabled ? theme.palette.text.secondary : theme.palette.text.primary,
+                          sx: {
+                            overflow: "hidden",
+                            textOverflow: "ellipsis",
+                            whiteSpace: "nowrap",
+                            mb: 0.5
+                          },
+                          children: event.title
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        material.Typography,
+                        {
+                          variant: "body2",
+                          color: theme.palette.text.secondary,
+                          sx: {
+                            minHeight: "20px",
+                            mb: 0.8,
+                            textOverflow: "ellipsis",
+                            whiteSpace: "nowrap",
+                            overflow: "hidden"
+                          },
+                          children: event.subTitle || "No Comments"
+                        }
+                      ),
+                      event.attachment && /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "View attachment", children: /* @__PURE__ */ jsxRuntime.jsx(
+                        material.Typography,
+                        {
+                          variant: "body2",
+                          sx: {
+                            color: theme.palette.primary.main,
+                            cursor: "pointer",
+                            textDecoration: "underline",
+                            fontWeight: 500,
+                            "&:hover": {
+                              color: theme.palette.primary.dark
+                            }
+                          },
+                          onClick: () => handleAttachmentClick(event.attachment),
+                          children: "Attachment"
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        material.Typography,
+                        {
+                          variant: "caption",
+                          display: "block",
+                          color: theme.palette.text.disabled,
+                          sx: { mt: 1 },
+                          children: event.time
+                        }
+                      )
+                    ] })
+                  }
+                )
+              ]
+            },
+            index
+          );
+        })
+      },
+      rowIndex
+    );
+  }) });
+}
+var useDebounce = (value, delay) => {
+  const [debouncedValue, setDebouncedValue] = React7.useState(value);
+  React7.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__ */ jsxRuntime.jsx(material.Box, { sx: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+    material.TextField,
+    {
+      variant: "outlined",
+      value: searchText,
+      onChange: handleInputChange,
+      placeholder: placeHolderTitle,
+      autoComplete: "off",
+      className: "custom-search",
+      InputProps: {
+        startAdornment: /* @__PURE__ */ jsxRuntime.jsx(material.InputAdornment, { position: "start", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "icon-search-normal-1" }) }),
+        endAdornment: searchText ? /* @__PURE__ */ jsxRuntime.jsx(material.InputAdornment, { position: "end", children: /* @__PURE__ */ jsxRuntime.jsx(
+          material.IconButton,
+          {
+            disableFocusRipple: true,
+            disableRipple: true,
+            disableTouchRipple: true,
+            onClick: handleClearSearch,
+            children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "icon-close-circle" })
+          }
+        ) }) : null
+      }
+    }
+  ) });
+};
+var SearchBox_default = SearchBox;
 var StyledChipProps = material.styled(material.Chip)(({ theme }) => {
-  var _a, _b, _c, _d, _e, _f, _g;
+  var _a, _b, _c;
   return {
     "&.MuiChip-colorPrimary": {
       border: `1px solid ${theme.palette.primary.dark}`,
       borderRadius: "8px",
       height: "36px",
       padding: "6px 4px",
-      background: `${(_b = (_a = theme.palette.customColors) == null ? void 0 : _a.customChipBackgroundColor) != null ? _b : "rgba(25,118,210,0.1)"}`,
-      color: `${(_d = (_c = theme.palette.customColors) == null ? void 0 : _c.customChipColor) != null ? _d : theme.palette.primary.dark}`,
+      background: `${"rgba(25,118,210,0.1)"}`,
+      color: `${theme.palette.primary.dark}`,
       width: "170px",
       overflow: "hidden",
       whiteSpace: "nowrap",
@@ -389,7 +738,7 @@ var StyledChipProps = material.styled(material.Chip)(({ theme }) => {
       height: "36px",
       padding: "6px 4px",
       background: "none !important",
-      color: `${(_g = (_f = (_e = theme.palette) == null ? void 0 : _e.customColors) == null ? void 0 : _f.mainText) != null ? _g : theme.palette.text.primary} `,
+      color: `${(_c = (_b = (_a = theme.palette) == null ? void 0 : _a.customColors) == null ? void 0 : _b.mainText) != null ? _c : theme.palette.text.primary} `,
       width: "170px",
       overflow: "hidden",
       whiteSpace: "nowrap",
@@ -397,19 +746,11 @@ var StyledChipProps = material.styled(material.Chip)(({ theme }) => {
     }
   };
 });
-var TruncatedTypography = material.styled(material.Typography)(({ theme }) => ({
-  overflow: "hidden",
-  textOverflow: "ellipsis",
-  whiteSpace: "nowrap",
-  width: "200px",
-  [theme.breakpoints.down("sm")]: {
-    width: "80px"
-  }
-}));
 function ApprovalWorkflow({
   selectedWorkflowsList = [],
   userInfo
 }) {
+  var _a, _b, _c, _d, _e, _f, _g;
   const theme = material.useTheme();
   const { api, urlBuilder, loadingComponent } = useWorkflowContext();
   const [selectedApprovalOtions, setSelectedApprovalOtions] = React7.useState(
@@ -421,12 +762,90 @@ function ApprovalWorkflow({
   const [rejectTarget, setRejectTarget] = React7__default.default.useState(null);
   const [onHoldTarget, setOnHoldTarget] = React7__default.default.useState(null);
   const [expandedDetails, setExpandedDetails] = React7.useState([]);
-  const [statusCount, setStatusCount] = React7.useState({});
   const [urlConfig, setUrlConfig] = React7.useState({});
   const [allRequestArray, setAllRequestArray] = React7.useState([]);
   const [pendingRequestArray, setPendingRequestArray] = React7.useState([]);
   const [selectedRequestArray, setSelectedRequestArray] = React7.useState([]);
   const [isLoading, setIsLoading] = React7.useState(false);
+  const [visibleAll, setVisibleAll] = React7.useState(10);
+  const [visiblePending, setVisiblePending] = React7.useState(10);
+  const [visibleSelected, setVisibleSelected] = React7.useState(10);
+  const [searchText, setSearchText] = React7.useState("");
+  const handleClearSearch = React7.useCallback(() => {
+    setSearchText("");
+  }, []);
+  const handleSearchChange = React7.useCallback((value) => {
+    setSearchText(value);
+  }, []);
+  const debouncedSearchTerm = useDebounce_default(searchText, 500);
+  const filteredSelectedRequestArray = React7__default.default.useMemo(() => {
+    if (!debouncedSearchTerm) return selectedRequestArray;
+    const q = debouncedSearchTerm.toLowerCase();
+    return 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__default.default.useMemo(() => {
+    if (!debouncedSearchTerm) return allRequestArray;
+    const q = debouncedSearchTerm.toLowerCase();
+    return 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__default.default.useMemo(() => {
+    if (!debouncedSearchTerm) return pendingRequestArray;
+    const q = debouncedSearchTerm.toLowerCase();
+    return 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__default.default.useRef(null);
+  const lastCardRef = React7.useCallback(
+    (node) => {
+      if (isLoading) 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);
+          }
+        }
+      });
+      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
+  );
+  const handleSendBack = (workflowLogId) => {
+    setSendDialog(workflowLogId);
+  };
+  const handleApprove = (workflowLogId) => {
+    setApproveTarget(workflowLogId);
+  };
+  const handleReject = (workflowLogId) => {
+    setRejectTarget(workflowLogId);
+  };
+  const handleOnHold = (workflowLogId) => {
+    setOnHoldTarget(workflowLogId);
+  };
   const handleProfileToggle = (option) => {
     setSelectedApprovalOtions(option);
     if (option === "Action Required") fetchPendingActivities();
@@ -437,75 +856,105 @@ function ApprovalWorkflow({
     setExpandedId((prevId) => prevId === id ? null : id);
     fetchExpandedActivityLogs(id);
   };
-  const getStatus = (status) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o;
-    switch (status) {
+  const getStatus2 = (status) => {
+    switch (status.toLowerCase()) {
       case "approved":
         return {
           title: "Approved",
           color: theme.palette.success.light,
-          labelColor: theme.palette.success.main
+          // e.g. light green background
+          labelColor: theme.palette.grey[100]
+          // e.g. light grey text
         };
       case "rejected":
         return {
           title: "Rejected",
-          color: (_c = (_b = (_a = theme.palette) == null ? void 0 : _a.customColors) == null ? void 0 : _b.chipWarningContainer) != null ? _c : theme.palette.error.light,
-          labelColor: theme.palette.error.main
+          color: theme.palette.error.light,
+          // light red background
+          labelColor: theme.palette.text.primary
+          // normal text color
         };
       case "onhold":
+      case "on_hold":
         return {
           title: "On Hold",
-          color: (_f = (_e = (_d = theme.palette) == null ? void 0 : _d.customColors) == null ? void 0 : _e.chipPendingContainer) != null ? _f : theme.palette.warning.light,
-          labelColor: (_i = (_h = (_g = theme.palette) == null ? void 0 : _g.customColors) == null ? void 0 : _h.chipPendingText) != null ? _i : theme.palette.warning.main
+          color: theme.palette.warning.light,
+          // soft amber background
+          labelColor: theme.palette.warning.main
+          // strong amber text
+        };
+      case "inprogress":
+      case "in_progress":
+        return {
+          title: "In Progress",
+          color: theme.palette.info.light,
+          // light blue background
+          labelColor: theme.palette.info.main
+          // blue text
         };
       case "pending":
       default:
         return {
           title: "Pending",
-          color: (_l = (_k = (_j = theme.palette) == null ? void 0 : _j.customColors) == null ? void 0 : _k.approvalPrimaryChipBG) != null ? _l : theme.palette.info.light,
-          labelColor: (_o = (_n = (_m = theme.palette) == null ? void 0 : _m.customColors) == null ? void 0 : _n.approvalPrimaryChipText) != null ? _o : theme.palette.info.main
+          color: theme.palette.grey[200],
+          // light grey background
+          labelColor: theme.palette.text.primary
+          // normal text color
         };
     }
   };
   const approvalChipLabel = [
-    { label: "Action Required", icon: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "icon-document-forward" }), count: (statusCount == null ? void 0 : statusCount.pending_activities_count) || "" },
-    { label: "All Requests", icon: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "icon-document-copy" }), count: (statusCount == null ? void 0 : statusCount.total_activities_count) || "" }
+    {
+      label: "Action Required",
+      icon: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "icon-document-forward" }),
+      count: pendingRequestArray.length || ""
+    },
+    {
+      label: "All Requests",
+      icon: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "icon-document-copy" }),
+      count: allRequestArray.length || ""
+    }
   ];
   const fetchExpandedActivityLogs = (workflowLogId) => {
     setExpandedDetails([]);
-    api.get({ url: `/workflow/workflow-activity-logs/${workflowLogId}`, serviceURL: "api" }).then((res) => setExpandedDetails(res == null ? void 0 : res.data));
+    api.get({
+      url: `/workflow/workflow-activity-logs/${workflowLogId}`,
+      serviceURL: "api"
+    }).then((res) => setExpandedDetails(res == null ? void 0 : res.data));
   };
   const fetchPendingActivities = () => {
-    var _a;
+    var _a2;
     setIsLoading(true);
-    api.get({ url: `/workflow/activity-workflow/${(_a = userInfo == null ? void 0 : userInfo.userInfo) == null ? void 0 : _a.id}?paginate=false&type=pending`, serviceURL: "api" }).then((res) => {
-      var _a2;
-      return setPendingRequestArray((_a2 = res == null ? void 0 : res.data) == null ? void 0 : _a2.activities);
+    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 _a;
+    var _a2;
     setIsLoading(true);
-    api.get({ url: `/workflow/activity-workflow/${(_a = userInfo == null ? void 0 : userInfo.userInfo) == null ? void 0 : _a.id}?paginate=false`, serviceURL: "api" }).then((res) => {
-      var _a2;
-      return setAllRequestArray((_a2 = res == null ? void 0 : res.data) == null ? void 0 : _a2.activities);
+    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));
-  };
-  const fetchStatusCount = () => {
-    var _a;
-    api.get({ url: `/workflow/status-count/${(_a = userInfo == null ? void 0 : userInfo.userInfo) == null ? void 0 : _a.id}`, serviceURL: "api" }).then((res) => {
-      var _a2;
-      setStatusCount((_a2 = res == null ? void 0 : res.data) == null ? void 0 : _a2[0]);
-    });
+    api.post({
+      url: `/workflow/bulk-details`,
+      serviceURL: "api",
+      data: { workflowIds: selectedWorkflowsList }
+    }).then((res) => setSelectedRequestArray(res == null ? void 0 : res.data)).finally(() => setIsLoading(false));
   };
   React7.useEffect(() => {
     if (!sendDialog && !approveTarget && !onHoldTarget && !rejectTarget) {
       fetchAllActivites();
-      fetchStatusCount();
       fetchPendingActivities();
       setExpandedDetails([]);
       setExpandedId(null);
@@ -528,11 +977,18 @@ function ApprovalWorkflow({
   }, [selectedWorkflowsList]);
   const buildRedirectionUrl = (info) => {
     if (info == null ? void 0 : info.redirection_link) return info.redirection_link;
-    if (urlBuilder) return urlBuilder(info == null ? void 0 : info.module_name, info == null ? void 0 : info.module_id, urlConfig, info == null ? void 0 : info.reference_id);
+    if (urlBuilder)
+      return urlBuilder(
+        info == null ? void 0 : info.module_name,
+        info == null ? void 0 : info.module_id,
+        urlConfig,
+        info == null ? void 0 : info.reference_id
+      );
     const ref = urlConfig == null ? void 0 : urlConfig[info == null ? void 0 : info.module_name];
     if ((ref == null ? void 0 : ref.base_url) && (ref == null ? void 0 : ref.sub_url)) {
       const qs = new URLSearchParams();
-      if (info == null ? void 0 : info.reference_id) qs.set("reference_id", String(info == null ? void 0 : info.reference_id));
+      if (info == null ? void 0 : info.reference_id)
+        qs.set("reference_id", String(info == null ? void 0 : info.reference_id));
       if (info == null ? void 0 : info.module_name) qs.set("module_name", String(info == null ? void 0 : info.module_name));
       return `${ref.base_url}${ref.sub_url}${qs.toString() ? `?${qs.toString()}` : ""}`;
     }
@@ -540,516 +996,902 @@ function ApprovalWorkflow({
   };
   if (isLoading && loadingComponent) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: loadingComponent });
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(system.Box, { sx: { display: "flex", justifyContent: "center", flexWrap: "nowrap" }, children: /* @__PURE__ */ jsxRuntime.jsxs(system.Box, { sx: { width: "100%", height: "100%" }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(system.Box, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: /* @__PURE__ */ jsxRuntime.jsxs(system.Box, { sx: { mt: 2, mb: 2 }, children: [
-        (selectedWorkflowsList == null ? void 0 : selectedWorkflowsList.length) ? /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Selected Workflows", children: /* @__PURE__ */ jsxRuntime.jsx(
-          StyledChipProps,
-          {
-            label: "Selected",
-            icon: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "icon-eye" }),
-            color: (selectedApprovalOtions == null ? void 0 : selectedApprovalOtions.includes("selected")) ? "primary" : "default",
-            variant: "filled",
-            sx: { mr: 4, mb: 4, "& .MuiChip-icon": { fontSize: "18px !important" } },
-            onClick: () => handleProfileToggle("selected")
-          }
-        ) }) : "",
-        approvalChipLabel.map(({ label, icon, count }, index) => /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: `${count} ${label}`, children: /* @__PURE__ */ jsxRuntime.jsx(
-          StyledChipProps,
-          {
-            label: `${count} ${label}`,
-            icon,
-            color: (selectedApprovalOtions == null ? void 0 : selectedApprovalOtions.includes(label)) ? "primary" : "default",
-            variant: "filled",
-            sx: { mr: 4, mb: 4, "& .MuiChip-icon": { fontSize: "18px !important" } },
-            onClick: () => handleProfileToggle(label)
-          }
-        ) }, index))
-      ] }) }),
-      selectedApprovalOtions === "selected" && /* @__PURE__ */ jsxRuntime.jsx(system.Box, { className: "fixedModal", sx: { overflowY: "auto", height: "calc(100vh - 180px)" }, children: selectedRequestArray && selectedRequestArray.map((info, index) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H;
-        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 : [];
-        const statusByNum = (statusList || []).reduce((acc, s) => {
-          if ((s == null ? void 0 : s.status) != null) acc[s.status] = s;
-          return acc;
-        }, {});
-        const redir = buildRedirectionUrl(info);
-        return /* @__PURE__ */ jsxRuntime.jsxs(React7__default.default.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            material.Card,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      system.Box,
+      {
+        sx: { display: "flex", justifyContent: "center", flexWrap: "nowrap" },
+        children: /* @__PURE__ */ jsxRuntime.jsxs(system.Box, { sx: { width: "100%", height: "100%" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            system.Box,
             {
               sx: {
-                mb: 8,
-                "&.MuiCard-root.MuiPaper-elevation": {
-                  boxShadow: "2px 2px 10px 0px #4C4E6426",
-                  padding: "20px",
-                  borderRadius: "10px"
-                }
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center"
               },
-              children: /* @__PURE__ */ jsxRuntime.jsxs(material.CardContent, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
-                /* @__PURE__ */ jsxRuntime.jsxs(system.Box, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: info.activityInstruction, children: /* @__PURE__ */ jsxRuntime.jsx(TruncatedTypography, { variant: "h6", color: "text.primary", sx: { textTransform: "capitalize", lineHeight: "22px" }, children: info.activity_name }) }),
-                  /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: info.description_data, children: /* @__PURE__ */ jsxRuntime.jsx(
-                    TruncatedTypography,
-                    {
-                      variant: "body2",
-                      color: "customColors.mainText",
-                      sx: { mt: "13px", textTransform: "capitalize", lineHeight: "15.4px" },
-                      children: info.description_data
-                    }
-                  ) })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs(system.Box, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Links", children: /* @__PURE__ */ jsxRuntime.jsx(
-                    TruncatedTypography,
-                    {
-                      variant: "caption",
-                      color: "customColors.text3",
-                      sx: { textTransform: "capitalize", lineHeight: "13.2px" },
-                      children: "Links"
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: redir, children: /* @__PURE__ */ jsxRuntime.jsx("a", { href: redir, style: { cursor: "pointer", textDecoration: "none" }, target: "_blank", rel: "noreferrer", children: /* @__PURE__ */ jsxRuntime.jsx(
-                    TruncatedTypography,
-                    {
-                      variant: "subtitle2",
-                      color: "primary.dark",
-                      sx: { mt: "13px", lineHeight: "15.4px" },
-                      children: redir
-                    }
-                  ) }) })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs(system.Box, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Attachments", children: /* @__PURE__ */ jsxRuntime.jsx(
-                    TruncatedTypography,
-                    {
-                      variant: "caption",
-                      color: "customColors.text3",
-                      sx: { textTransform: "capitalize", lineHeight: "13.2px" },
-                      children: "Attachments"
-                    }
-                  ) }),
-                  ((_a = info == null ? void 0 : info.attachment_links) == null ? void 0 : _a.length) ? info == null ? void 0 : info.attachment_links.map((link, idx) => /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: `Attachment ${idx + 1}`, children: /* @__PURE__ */ jsxRuntime.jsx("a", { href: link, style: { cursor: "pointer", textDecoration: "none" }, target: "_blank", rel: "noreferrer", children: /* @__PURE__ */ jsxRuntime.jsx(
-                    TruncatedTypography,
-                    {
-                      variant: "subtitle2",
-                      color: "primary.dark",
-                      sx: { mt: "13px", textTransform: "capitalize", lineHeight: "15.4px" },
-                      children: link || "N/A"
-                    }
-                  ) }) }, idx)) : /* @__PURE__ */ jsxRuntime.jsx(system.Box, { sx: { display: "flex", mt: 2, justifyContent: "center", alignItems: "center", lineHeight: "15.4px" }, children: "N/A" })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs(system.Box, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Date and Time", children: /* @__PURE__ */ jsxRuntime.jsx(
-                    TruncatedTypography,
-                    {
-                      variant: "caption",
-                      color: "customColors.text3",
-                      sx: { textTransform: "capitalize", lineHeight: "13.2px" },
-                      children: "TAT"
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: info.dateTime, children: /* @__PURE__ */ jsxRuntime.jsx(
-                    TruncatedTypography,
-                    {
-                      variant: "subtitle2",
-                      color: "customColors.mainText",
-                      sx: { mt: "13px", textTransform: "capitalize", lineHeight: "15.4px" },
-                      children: ((_c = (_b = info == null ? void 0 : info.levels) == null ? void 0 : _b.find((lvl) => lvl.id === (info == null ? void 0 : info.current_level))) == null ? void 0 : _c.tat_expiry) ? moment__default.default((_e = (_d = info == null ? void 0 : info.levels) == null ? void 0 : _d.find((lvl) => lvl.id === (info == null ? void 0 : info.current_level))) == null ? void 0 : _e.tat_expiry).utcOffset("UTC+05:30").format("DD/MM/YYYY HH:MM A") : "N/A"
-                    }
-                  ) })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs(system.Box, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Current active level of Workflow", children: /* @__PURE__ */ jsxRuntime.jsx(
-                    TruncatedTypography,
-                    {
-                      variant: "caption",
-                      color: "customColors.text3",
-                      sx: { textTransform: "capitalize", lineHeight: "13.2px" },
-                      children: "Current Level"
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsxRuntime.jsx(system.Box, { sx: { display: "flex", mt: 2, justifyContent: "center", alignItems: "center" }, children: (info == null ? void 0 : info.isLevelZero) ? "L0" : "L" + (((_g = (_f = info == null ? void 0 : info.levels) == null ? void 0 : _f.findIndex((lvl) => lvl.id === (info == null ? void 0 : info.current_level))) != null ? _g : -1) + 1 || "") })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs(system.Box, { sx: { mt: 2, display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    material.Chip,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(system.Box, { sx: { mt: 2, mb: 2 }, children: [
+                  (selectedWorkflowsList == null ? void 0 : selectedWorkflowsList.length) ? /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Selected Workflows", children: /* @__PURE__ */ jsxRuntime.jsx(
+                    StyledChipProps,
                     {
+                      label: "Selected",
+                      icon: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "icon-eye" }),
+                      color: (selectedApprovalOtions == null ? void 0 : selectedApprovalOtions.includes("selected")) ? "primary" : "default",
                       variant: "filled",
                       sx: {
-                        backgroundColor: `${(_n = getStatus(
-                          ((_j = (_i = (_h = info == null ? void 0 : info.levels) == null ? void 0 : _h.find((lvl) => lvl.id === (info == null ? void 0 : info.current_level))) == null ? void 0 : _i.selected_status) == null ? void 0 : _j.status_id) === 1 ? "approved" : ((_m = (_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.selected_status) == null ? void 0 : _m.status_id) === 3 ? "rejected" : "pending"
-                        )) == null ? void 0 : _n.color} !important`,
-                        color: `${(_u = getStatus(
-                          ((_q = (_p = (_o = info == null ? void 0 : info.levels) == null ? void 0 : _o.find((lvl) => lvl.id === (info == null ? void 0 : info.current_level))) == null ? void 0 : _p.selected_status) == null ? void 0 : _q.status_id) === 1 ? "approved" : ((_t = (_s = (_r = info == null ? void 0 : info.levels) == null ? void 0 : _r.find((lvl) => lvl.id === (info == null ? void 0 : info.current_level))) == null ? void 0 : _s.selected_status) == null ? void 0 : _t.status_id) === 3 ? "rejected" : "pending"
-                        )) == null ? void 0 : _u.labelColor} !important`,
-                        height: "40px",
-                        padding: "8px",
-                        borderRadius: "100px !important",
-                        border: "0px !important",
-                        "& .MuiChip-label": {
-                          fontSize: "14px",
-                          lineHeight: "15.4px",
-                          fontWeight: "500",
-                          textTransform: "capitalize"
-                        }
+                        mr: 4,
+                        mb: 4,
+                        "& .MuiChip-icon": { fontSize: "18px !important" }
                       },
-                      label: `${((_x = (_w = (_v = info == null ? void 0 : info.levels) == null ? void 0 : _v.find((lvl) => lvl.id === (info == null ? void 0 : info.current_level))) == null ? void 0 : _w.selected_status) == null ? void 0 : _x.status_id) === 2 || (info == null ? void 0 : info.isLevelZero) || !((_z = (_y = info == null ? void 0 : info.levels) == null ? void 0 : _y.find((lvl) => lvl.id === (info == null ? void 0 : info.current_level))) == null ? void 0 : _z.selected_status) ? "pending" : (_C = (_B = (_A = info == null ? void 0 : info.levels) == null ? void 0 : _A.find((lvl) => lvl.id === (info == null ? void 0 : info.current_level))) == null ? void 0 : _B.selected_status) == null ? void 0 : _C.name}`
+                      onClick: () => handleProfileToggle("selected")
                     }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(material.Divider, { orientation: "vertical", sx: { ml: 5, borderColor: (_E = (_D = theme.palette) == null ? void 0 : _D.customColors) == null ? void 0 : _E.text4, height: "50px" } }),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    material.IconButton,
+                  ) }) : "",
+                  approvalChipLabel.map(({ label, icon, count }, index) => /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: `${count} ${label}`, children: /* @__PURE__ */ jsxRuntime.jsx(
+                    StyledChipProps,
                     {
-                      disableFocusRipple: true,
-                      disableRipple: true,
-                      color: "primary",
+                      label: `${count} ${label}`,
+                      icon,
+                      color: (selectedApprovalOtions == null ? void 0 : selectedApprovalOtions.includes(label)) ? "primary" : "default",
+                      variant: "filled",
                       sx: {
-                        ml: 5,
-                        background: (_H = (_G = (_F = theme.palette) == null ? void 0 : _F.customColors) == null ? void 0 : _G.primaryLightest) != null ? _H : "rgba(25,118,210,0.08)",
-                        boxShadow: "2px 2px 10px 0px #4C4E6426",
-                        "& span": { color: theme.palette.primary.dark }
+                        mr: 4,
+                        mb: 4,
+                        "& .MuiChip-icon": { fontSize: "18px !important" }
                       },
-                      onClick: () => handleExpandClick(info._id),
-                      children: expandedId === info._id ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "icon-arrow-down-1" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "icon-arrow-right-3" })
+                      onClick: () => handleProfileToggle(label)
                     }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(system.Box, { sx: { ml: 5 }, children: /* @__PURE__ */ jsxRuntime.jsx(
-                    Statusselector_default,
-                    {
-                      onSendBack: () => setSendDialog(info._id),
-                      onApprove: () => {
-                        var _a2, _b2;
-                        const sid = String((_b2 = (_a2 = statusByNum == null ? void 0 : statusByNum[1]) == null ? void 0 : _a2.id) != null ? _b2 : "");
-                        setApproveTarget({ id: info._id, statusId: sid });
-                      },
-                      onReject: () => {
-                        var _a2, _b2;
-                        const sid = String((_b2 = (_a2 = statusByNum == null ? void 0 : statusByNum[3]) == null ? void 0 : _a2.id) != null ? _b2 : "");
-                        setRejectTarget({ id: info._id, statusId: sid });
-                      },
-                      onHold: () => {
-                        var _a2, _b2;
-                        const sid = String((_b2 = (_a2 = statusByNum == null ? void 0 : statusByNum[2]) == null ? void 0 : _a2.id) != null ? _b2 : "");
-                        setOnHoldTarget({ id: info._id, statusId: sid });
-                      },
-                      statusList
-                    }
-                  ) })
-                ] })
-              ] })
+                  ) }, index))
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(system.Box, { sx: { flexGrow: 1, maxWidth: 250, ml: "auto" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+                  SearchBox_default,
+                  {
+                    placeHolderTitle: "Search",
+                    searchText,
+                    handleClearSearch,
+                    handleInputChange: (e) => handleSearchChange(e.target.value)
+                  }
+                ) })
+              ]
             }
           ),
-          expandedId === info._id && /* @__PURE__ */ jsxRuntime.jsx(material.Grid, { container: true, xs: 12, spacing: 5, children: /* @__PURE__ */ jsxRuntime.jsx(material.Grid, { item: true, xs: 12, sx: { transform: "translateX(3.9%)" }, children: !(expandedDetails == null ? void 0 : expandedDetails.length) ? /* @__PURE__ */ jsxRuntime.jsx(system.Box, { sx: { height: "200px", display: "flex", justifyContent: "center", alignItems: "center" }, children: /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: 40, sx: { color: theme.palette.primary.dark } }) }) : /* @__PURE__ */ jsxRuntime.jsx(system.Box, { sx: { pl: 2 }, children: expandedDetails == null ? void 0 : expandedDetails.map((item, idx) => {
-            var _a2;
-            return /* @__PURE__ */ jsxRuntime.jsxs(system.Box, { sx: { mb: 2 }, children: [
-              /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "caption", sx: { mr: 2 }, children: moment__default.default(item == null ? void 0 : item.created_at).format("DD-MM-YYYY HH:mm") }),
-              /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { variant: "body2", component: "span", children: [
-                item == null ? void 0 : item.type,
-                " - ",
-                ((_a2 = item == null ? void 0 : item.comment_reasons) == null ? void 0 : _a2.comment) || "No Comments"
-              ] })
-            ] }, idx);
-          }) }) }) })
-        ] }, index);
-      }) }),
-      selectedApprovalOtions === "All Requests" && /* @__PURE__ */ jsxRuntime.jsx(system.Box, { className: "fixedModal", sx: { overflowY: "auto", height: "calc(100vh - 180px)" }, children: allRequestArray && allRequestArray.map((info, index) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B;
-        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 : [];
-        const statusByNum = (statusList || []).reduce((acc, s) => {
-          if ((s == null ? void 0 : s.status) != null) acc[s.status] = s;
-          return acc;
-        }, {});
-        const redir = buildRedirectionUrl(info);
-        return /* @__PURE__ */ jsxRuntime.jsxs(React7__default.default.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            material.Card,
+          selectedApprovalOtions === "selected" && /* @__PURE__ */ jsxRuntime.jsx(
+            system.Box,
             {
+              className: "fixedModal",
               sx: {
-                mb: 8,
-                "&.MuiCard-root.MuiPaper-elevation": {
-                  boxShadow: "2px 2px 10px 0px #4C4E6426",
-                  padding: "20px",
-                  borderRadius: "10px"
-                }
+                overflowY: "auto",
+                height: "calc(100vh - 180px)",
+                px: 2,
+                pb: 3
               },
-              children: /* @__PURE__ */ jsxRuntime.jsxs(material.CardContent, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
-                /* @__PURE__ */ jsxRuntime.jsxs(system.Box, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: info.activityInstruction, children: /* @__PURE__ */ jsxRuntime.jsx(TruncatedTypography, { variant: "h6", color: "text.primary", sx: { textTransform: "capitalize", lineHeight: "22px" }, children: info.activity_name }) }),
-                  /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: info.description_data, children: /* @__PURE__ */ jsxRuntime.jsx(
-                    TruncatedTypography,
-                    {
-                      variant: "body2",
-                      color: "customColors.mainText",
-                      sx: { mt: "13px", textTransform: "capitalize", lineHeight: "15.4px" },
-                      children: info.description_data
-                    }
-                  ) })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs(system.Box, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Links", children: /* @__PURE__ */ jsxRuntime.jsx(
-                    TruncatedTypography,
-                    {
-                      variant: "caption",
-                      color: "customColors.text3",
-                      sx: { textTransform: "capitalize", lineHeight: "13.2px" },
-                      children: "Links"
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: redir, children: /* @__PURE__ */ jsxRuntime.jsx("a", { href: redir, style: { cursor: "pointer", textDecoration: "none" }, target: "_blank", rel: "noreferrer", children: /* @__PURE__ */ jsxRuntime.jsx(
-                    TruncatedTypography,
-                    {
-                      variant: "subtitle2",
-                      color: "primary.dark",
-                      sx: { mt: "13px", lineHeight: "15.4px" },
-                      children: redir
-                    }
-                  ) }) })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs(system.Box, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Attachments", children: /* @__PURE__ */ jsxRuntime.jsx(
-                    TruncatedTypography,
-                    {
-                      variant: "caption",
-                      color: "customColors.text3",
-                      sx: { textTransform: "capitalize", lineHeight: "13.2px" },
-                      children: "Attachments"
-                    }
-                  ) }),
-                  ((_a = info == null ? void 0 : info.attachment_links) == null ? void 0 : _a.length) ? info == null ? void 0 : info.attachment_links.map((link, idx) => /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: `Attachment ${idx + 1}`, children: /* @__PURE__ */ jsxRuntime.jsx("a", { href: link, style: { cursor: "pointer", textDecoration: "none" }, target: "_blank", rel: "noreferrer", children: /* @__PURE__ */ jsxRuntime.jsx(
-                    TruncatedTypography,
-                    {
-                      variant: "subtitle2",
-                      color: "primary.dark",
-                      sx: { mt: "13px", textTransform: "capitalize", lineHeight: "15.4px" },
-                      children: link || "N/A"
-                    }
-                  ) }) }, idx)) : /* @__PURE__ */ jsxRuntime.jsx(system.Box, { sx: { display: "flex", mt: 2, justifyContent: "center", alignItems: "center", lineHeight: "15.4px" }, children: "N/A" })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs(system.Box, { sx: { mt: 2, display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    material.Chip,
-                    {
-                      variant: "filled",
-                      sx: {
-                        backgroundColor: `${(_h = getStatus(
-                          ((_d = (_c = (_b = info == null ? void 0 : info.levels) == null ? void 0 : _b.find((lvl) => lvl.id === (info == null ? void 0 : info.current_level))) == null ? void 0 : _c.selected_status) == null ? void 0 : _d.status_id) === 1 ? "approved" : ((_g = (_f = (_e = info == null ? void 0 : info.levels) == null ? void 0 : _e.find((lvl) => lvl.id === (info == null ? void 0 : info.current_level))) == null ? void 0 : _f.selected_status) == null ? void 0 : _g.status_id) === 3 ? "rejected" : "pending"
-                        )) == null ? void 0 : _h.color} !important`,
-                        color: `${(_o = getStatus(
-                          ((_k = (_j = (_i = info == null ? void 0 : info.levels) == null ? void 0 : _i.find((lvl) => lvl.id === (info == null ? void 0 : info.current_level))) == null ? void 0 : _j.selected_status) == null ? void 0 : _k.status_id) === 1 ? "approved" : ((_n = (_m = (_l = info == null ? void 0 : info.levels) == null ? void 0 : _l.find((lvl) => lvl.id === (info == null ? void 0 : info.current_level))) == null ? void 0 : _m.selected_status) == null ? void 0 : _n.status_id) === 3 ? "rejected" : "pending"
-                        )) == null ? void 0 : _o.labelColor} !important`,
-                        height: "40px",
-                        padding: "8px",
-                        borderRadius: "100px !important",
-                        border: "0px !important",
-                        "& .MuiChip-label": {
-                          fontSize: "14px",
-                          lineHeight: "15.4px",
-                          fontWeight: "500",
-                          textTransform: "capitalize"
+              children: visibleSelectedRequests == null ? void 0 : visibleSelectedRequests.map((info, index) => {
+                var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h, _i, _j, _k, _l, _m, _n, _o;
+                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 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 = getStatus2(currentStatus);
+                return /* @__PURE__ */ jsxRuntime.jsxs(
+                  material.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
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs(
+                        material.CardContent,
+                        {
+                          sx: {
+                            display: "flex",
+                            justifyContent: "space-between",
+                            alignItems: "center",
+                            flexWrap: { xs: "wrap", md: "nowrap" },
+                            gap: 2
+                          },
+                          children: [
+                            /* @__PURE__ */ jsxRuntime.jsxs(system.Box, { sx: { flexBasis: "22%", minWidth: 220 }, children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: info.activityInstruction, children: /* @__PURE__ */ jsxRuntime.jsx(
+                                material.Typography,
+                                {
+                                  variant: "h6",
+                                  fontWeight: 600,
+                                  noWrap: true,
+                                  color: "text.primary",
+                                  children: info.activity_name
+                                }
+                              ) }),
+                              /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: info.description_data, children: /* @__PURE__ */ jsxRuntime.jsx(
+                                material.Typography,
+                                {
+                                  variant: "body2",
+                                  color: "text.secondary",
+                                  noWrap: true,
+                                  sx: { mt: 0.5 },
+                                  children: info.description_data
+                                }
+                              ) })
+                            ] }),
+                            /* @__PURE__ */ jsxRuntime.jsxs(system.Box, { sx: { flexBasis: "20%", minWidth: 180 }, children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "caption", color: "text.secondary", children: "Links" }),
+                              /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: redir, children: /* @__PURE__ */ jsxRuntime.jsx(
+                                material.Typography,
+                                {
+                                  component: "a",
+                                  href: redir,
+                                  target: "_blank",
+                                  rel: "noreferrer",
+                                  sx: {
+                                    display: "block",
+                                    color: "primary.dark",
+                                    fontWeight: 500,
+                                    textDecoration: "none",
+                                    overflow: "hidden",
+                                    textOverflow: "ellipsis",
+                                    whiteSpace: "nowrap",
+                                    mt: 0.8
+                                  },
+                                  children: redir
+                                }
+                              ) })
+                            ] }),
+                            /* @__PURE__ */ jsxRuntime.jsxs(system.Box, { sx: { flexBasis: "12%", minWidth: 120 }, children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "caption", color: "text.secondary", children: "Attachments" }),
+                              /* @__PURE__ */ jsxRuntime.jsx(
+                                material.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__ */ jsxRuntime.jsxs(system.Box, { sx: { flexBasis: "14%", minWidth: 130 }, children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "caption", color: "text.secondary", children: "TAT" }),
+                              /* @__PURE__ */ jsxRuntime.jsx(
+                                material.Typography,
+                                {
+                                  variant: "body2",
+                                  sx: {
+                                    mt: 0.8,
+                                    fontWeight: 500,
+                                    color: "text.primary"
+                                  },
+                                  children: (currentLevel == null ? void 0 : currentLevel.tat_expiry) ? moment__default.default(currentLevel.tat_expiry).utcOffset("UTC+05:30").format("DD/MM/YYYY hh:mm A") : "N/A"
+                                }
+                              )
+                            ] }),
+                            /* @__PURE__ */ jsxRuntime.jsxs(
+                              system.Box,
+                              {
+                                sx: {
+                                  flexBasis: "8%",
+                                  minWidth: 80,
+                                  textAlign: "center"
+                                },
+                                children: [
+                                  /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "caption", color: "text.secondary", children: "Current Level" }),
+                                  /* @__PURE__ */ jsxRuntime.jsx(material.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__ */ jsxRuntime.jsxs(
+                              system.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__ */ jsxRuntime.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}`
+                                        );
+                                      },
+                                      statusList: (info == null ? void 0 : info.isLevelZero) && (info == null ? void 0 : info.created_by) === ((_o = userInfo == null ? void 0 : userInfo.userInfo) == null ? void 0 : _o.id) ? statusList == null ? void 0 : statusList.filter(
+                                        (app) => app.status == 1
+                                      ) : statusList
+                                    }
+                                  ) : /* @__PURE__ */ jsxRuntime.jsx(
+                                    material.Chip,
+                                    {
+                                      variant: "filled",
+                                      sx: {
+                                        backgroundColor: getStatus2(currentStatus).color,
+                                        color: getStatus2(currentStatus).labelColor,
+                                        height: "40px",
+                                        px: 2,
+                                        borderRadius: "100px !important",
+                                        "& .MuiChip-label": {
+                                          fontSize: "14px",
+                                          lineHeight: "15.4px",
+                                          fontWeight: "500",
+                                          textTransform: "capitalize"
+                                        }
+                                      },
+                                      label: statusData.title
+                                    }
+                                  ),
+                                  /* @__PURE__ */ jsxRuntime.jsx(
+                                    material.Divider,
+                                    {
+                                      orientation: "vertical",
+                                      flexItem: true,
+                                      sx: {
+                                        borderColor: "#E0E0E0",
+                                        height: "40px"
+                                      }
+                                    }
+                                  ),
+                                  /* @__PURE__ */ jsxRuntime.jsx(
+                                    material.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__ */ jsxRuntime.jsx("span", { className: "icon-arrow-down-1" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "icon-arrow-right-3" })
+                                    }
+                                  )
+                                ]
+                              }
+                            )
+                          ]
                         }
-                      },
-                      label: `${((_r = (_q = (_p = info == null ? void 0 : info.levels) == null ? void 0 : _p.find((lvl) => lvl.id === (info == null ? void 0 : info.current_level))) == null ? void 0 : _q.selected_status) == null ? void 0 : _r.status_id) === 2 || (info == null ? void 0 : info.isLevelZero) || !((_t = (_s = info == null ? void 0 : info.levels) == null ? void 0 : _s.find((lvl) => lvl.id === (info == null ? void 0 : info.current_level))) == null ? void 0 : _t.selected_status) ? "pending" : (_w = (_v = (_u = info == null ? void 0 : info.levels) == null ? void 0 : _u.find((lvl) => lvl.id === (info == null ? void 0 : info.current_level))) == null ? void 0 : _v.selected_status) == null ? void 0 : _w.name}`
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(material.Divider, { orientation: "vertical", sx: { ml: 5, borderColor: (_y = (_x = theme.palette) == null ? void 0 : _x.customColors) == null ? void 0 : _y.text4, height: "50px" } }),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    material.IconButton,
-                    {
-                      disableFocusRipple: true,
-                      disableRipple: true,
-                      color: "primary",
-                      sx: {
-                        ml: 5,
-                        background: (_B = (_A = (_z = theme.palette) == null ? void 0 : _z.customColors) == null ? void 0 : _A.primaryLightest) != null ? _B : "rgba(25,118,210,0.08)",
-                        boxShadow: "2px 2px 10px 0px #4C4E6426",
-                        "& span": { color: theme.palette.primary.dark }
-                      },
-                      onClick: () => handleExpandClick(info._id),
-                      children: expandedId === info._id ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "icon-arrow-down-1" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "icon-arrow-right-3" })
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(system.Box, { sx: { ml: 5 }, children: /* @__PURE__ */ jsxRuntime.jsx(
-                    Statusselector_default,
-                    {
-                      onSendBack: () => setSendDialog(info._id),
-                      onApprove: () => {
-                        var _a2, _b2;
-                        const sid = String((_b2 = (_a2 = statusByNum == null ? void 0 : statusByNum[1]) == null ? void 0 : _a2.id) != null ? _b2 : "");
-                        setApproveTarget({ id: info._id, statusId: sid });
-                      },
-                      onReject: () => {
-                        var _a2, _b2;
-                        const sid = String((_b2 = (_a2 = statusByNum == null ? void 0 : statusByNum[3]) == null ? void 0 : _a2.id) != null ? _b2 : "");
-                        setRejectTarget({ id: info._id, statusId: sid });
-                      },
-                      onHold: () => {
-                        var _a2, _b2;
-                        const sid = String((_b2 = (_a2 = statusByNum == null ? void 0 : statusByNum[2]) == null ? void 0 : _a2.id) != null ? _b2 : "");
-                        setOnHoldTarget({ id: info._id, statusId: sid });
-                      },
-                      statusList
-                    }
-                  ) })
-                ] })
-              ] })
+                      ),
+                      expandedId === info._id && /* @__PURE__ */ jsxRuntime.jsx(system.Box, { sx: { mt: 2, ml: 2 }, children: !(expandedDetails == null ? void 0 : expandedDetails.length) ? /* @__PURE__ */ jsxRuntime.jsx(
+                        system.Box,
+                        {
+                          sx: {
+                            height: 150,
+                            display: "flex",
+                            justifyContent: "center",
+                            alignItems: "center"
+                          },
+                          children: /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: 36, color: "primary" })
+                        }
+                      ) : /* @__PURE__ */ jsxRuntime.jsx(
+                        ConnectedTimeline,
+                        {
+                          events: expandedDetails == null ? void 0 : expandedDetails.map((item) => {
+                            var _a3, _b3, _c3, _d3;
+                            return {
+                              date: moment__default.default(item == null ? void 0 : item.created_at).format(
+                                "DD-MM-YYYY"
+                              ),
+                              time: moment__default.default(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"
+                            };
+                          })
+                        }
+                      ) })
+                    ]
+                  },
+                  index
+                );
+              })
             }
           ),
-          expandedId === info._id && /* @__PURE__ */ jsxRuntime.jsx(material.Grid, { container: true, xs: 12, spacing: 5, children: /* @__PURE__ */ jsxRuntime.jsx(material.Grid, { item: true, xs: 12, sx: { transform: "translateX(3.9%)" }, children: !(expandedDetails == null ? void 0 : expandedDetails.length) ? /* @__PURE__ */ jsxRuntime.jsx(system.Box, { sx: { height: "200px", display: "flex", justifyContent: "center", alignItems: "center" }, children: /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: 40, sx: { color: theme.palette.primary.dark } }) }) : /* @__PURE__ */ jsxRuntime.jsx(system.Box, { sx: { pl: 2 }, children: expandedDetails == null ? void 0 : expandedDetails.map((item, idx) => {
-            var _a2;
-            return /* @__PURE__ */ jsxRuntime.jsxs(system.Box, { sx: { mb: 2 }, children: [
-              /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "caption", sx: { mr: 2 }, children: moment__default.default(item == null ? void 0 : item.created_at).format("DD-MM-YYYY HH:mm") }),
-              /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { variant: "body2", component: "span", children: [
-                item == null ? void 0 : item.type,
-                " - ",
-                ((_a2 = item == null ? void 0 : item.comment_reasons) == null ? void 0 : _a2.comment) || "No Comments"
-              ] })
-            ] }, idx);
-          }) }) }) })
-        ] }, index);
-      }) }),
-      selectedApprovalOtions === "Action Required" && /* @__PURE__ */ jsxRuntime.jsx(system.Box, { className: "fixedModal", sx: { overflowY: "auto", height: "calc(100vh - 180px)" }, children: pendingRequestArray && pendingRequestArray.map((info, index) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B;
-        const currentLevel = (_a = info == null ? void 0 : info.levels) == null ? void 0 : _a.find((level_) => level_.id === (info == null ? void 0 : info.current_level));
-        const statusList = currentLevel ? currentLevel.status_list : [];
-        const statusByNum = (statusList || []).reduce((acc, s) => {
-          if ((s == null ? void 0 : s.status) != null) acc[s.status] = s;
-          return acc;
-        }, {});
-        const redir = buildRedirectionUrl(info);
-        return /* @__PURE__ */ jsxRuntime.jsxs(React7__default.default.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            material.Card,
+          selectedApprovalOtions === "All Requests" && /* @__PURE__ */ jsxRuntime.jsx(
+            system.Box,
             {
+              className: "fixedModal",
               sx: {
-                mb: 8,
-                "&.MuiCard-root.MuiPaper-elevation": {
-                  boxShadow: "2px 2px 10px 0px #4C4E6426",
-                  padding: "20px",
-                  borderRadius: "10px"
-                }
+                overflowY: "auto",
+                height: "calc(100vh - 180px)",
+                px: 2,
+                pb: 3
               },
-              children: /* @__PURE__ */ jsxRuntime.jsxs(material.CardContent, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
-                /* @__PURE__ */ jsxRuntime.jsxs(system.Box, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: info.title, children: /* @__PURE__ */ jsxRuntime.jsx(TruncatedTypography, { variant: "h6", color: "text.primary", sx: { textTransform: "capitalize", lineHeight: "22px" }, children: info.activity_name }) }),
-                  /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: info.description_data, children: /* @__PURE__ */ jsxRuntime.jsx(
-                    TruncatedTypography,
-                    {
-                      variant: "body2",
-                      color: "customColors.mainText",
-                      sx: { mt: "13px", textTransform: "capitalize", lineHeight: "15.4px" },
-                      children: info.description_data
-                    }
-                  ) })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs(system.Box, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Links", children: /* @__PURE__ */ jsxRuntime.jsx(
-                    TruncatedTypography,
-                    {
-                      variant: "caption",
-                      color: "customColors.text3",
-                      sx: { textTransform: "capitalize", lineHeight: "13.2px" },
-                      children: "Links"
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: redir, children: /* @__PURE__ */ jsxRuntime.jsx("a", { href: redir, style: { cursor: "pointer", textDecoration: "none" }, target: "_blank", rel: "noreferrer", children: /* @__PURE__ */ jsxRuntime.jsx(
-                    TruncatedTypography,
-                    {
-                      variant: "subtitle2",
-                      color: "primary.dark",
-                      sx: { mt: "13px", lineHeight: "15.4px" },
-                      children: redir
-                    }
-                  ) }) })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs(system.Box, { sx: { mt: 2, display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    material.Chip,
-                    {
-                      variant: "filled",
-                      sx: {
-                        backgroundColor: `${(_h = getStatus(
-                          ((_d = (_c = (_b = info == null ? void 0 : info.levels) == null ? void 0 : _b.find((lvl) => lvl.id === (info == null ? void 0 : info.current_level))) == null ? void 0 : _c.selected_status) == null ? void 0 : _d.status_id) === 1 ? "approved" : ((_g = (_f = (_e = info == null ? void 0 : info.levels) == null ? void 0 : _e.find((lvl) => lvl.id === (info == null ? void 0 : info.current_level))) == null ? void 0 : _f.selected_status) == null ? void 0 : _g.status_id) === 3 ? "rejected" : "pending"
-                        )) == null ? void 0 : _h.color} !important`,
-                        color: `${(_o = getStatus(
-                          ((_k = (_j = (_i = info == null ? void 0 : info.levels) == null ? void 0 : _i.find((lvl) => lvl.id === (info == null ? void 0 : info.current_level))) == null ? void 0 : _j.selected_status) == null ? void 0 : _k.status_id) === 1 ? "approved" : ((_n = (_m = (_l = info == null ? void 0 : info.levels) == null ? void 0 : _l.find((lvl) => lvl.id === (info == null ? void 0 : info.current_level))) == null ? void 0 : _m.selected_status) == null ? void 0 : _n.status_id) === 3 ? "rejected" : "pending"
-                        )) == null ? void 0 : _o.labelColor} !important`,
-                        height: "40px",
-                        padding: "8px",
-                        borderRadius: "100px !important",
-                        border: "0px !important",
-                        "& .MuiChip-label": {
-                          fontSize: "14px",
-                          lineHeight: "15.4px",
-                          fontWeight: "500",
-                          textTransform: "capitalize"
+              children: visibleAllRequests == null ? void 0 : visibleAllRequests.map((info, index) => {
+                var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h, _i, _j, _k, _l, _m, _n, _o;
+                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 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 = getStatus2(currentStatus);
+                return /* @__PURE__ */ jsxRuntime.jsxs(
+                  material.Card,
+                  {
+                    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
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs(
+                        material.CardContent,
+                        {
+                          sx: {
+                            display: "flex",
+                            justifyContent: "space-between",
+                            alignItems: "center",
+                            flexWrap: { xs: "wrap", md: "nowrap" },
+                            gap: 2
+                          },
+                          children: [
+                            /* @__PURE__ */ jsxRuntime.jsxs(system.Box, { sx: { flexBasis: "20%", minWidth: 220 }, children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: info.activityInstruction, children: /* @__PURE__ */ jsxRuntime.jsx(
+                                material.Typography,
+                                {
+                                  variant: "h6",
+                                  fontWeight: 600,
+                                  noWrap: true,
+                                  color: "text.primary",
+                                  children: info.activity_name
+                                }
+                              ) }),
+                              /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: info.description_data, children: /* @__PURE__ */ jsxRuntime.jsx(
+                                material.Typography,
+                                {
+                                  variant: "body2",
+                                  noWrap: true,
+                                  sx: { mt: 0.5, color: "text.secondary" },
+                                  children: info.description_data
+                                }
+                              ) })
+                            ] }),
+                            /* @__PURE__ */ jsxRuntime.jsxs(system.Box, { sx: { flexBasis: "18%", minWidth: 180 }, children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(
+                                material.Typography,
+                                {
+                                  variant: "caption",
+                                  color: "text.secondary",
+                                  sx: { display: "block" },
+                                  children: "Links"
+                                }
+                              ),
+                              /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: redir, children: /* @__PURE__ */ jsxRuntime.jsx(
+                                material.Typography,
+                                {
+                                  component: "a",
+                                  href: redir,
+                                  target: "_blank",
+                                  rel: "noreferrer",
+                                  sx: {
+                                    display: "block",
+                                    color: "primary.dark",
+                                    fontWeight: 500,
+                                    textDecoration: "none",
+                                    overflow: "hidden",
+                                    textOverflow: "ellipsis",
+                                    whiteSpace: "nowrap",
+                                    mt: 0.8
+                                  },
+                                  children: redir
+                                }
+                              ) })
+                            ] }),
+                            /* @__PURE__ */ jsxRuntime.jsxs(system.Box, { sx: { flexBasis: "12%", minWidth: 120 }, children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "caption", color: "text.secondary", children: "Attachments" }),
+                              /* @__PURE__ */ jsxRuntime.jsx(
+                                material.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__ */ jsxRuntime.jsxs(system.Box, { sx: { flexBasis: "14%", minWidth: 130 }, children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "caption", color: "text.secondary", children: "TAT" }),
+                              /* @__PURE__ */ jsxRuntime.jsx(
+                                material.Typography,
+                                {
+                                  variant: "body2",
+                                  sx: {
+                                    mt: 0.8,
+                                    fontWeight: 500,
+                                    color: "text.primary"
+                                  },
+                                  children: (currentLevel == null ? void 0 : currentLevel.tat_expiry) ? moment__default.default(currentLevel.tat_expiry).utcOffset("UTC+05:30").format("DD/MM/YYYY hh:mm A") : "N/A"
+                                }
+                              )
+                            ] }),
+                            /* @__PURE__ */ jsxRuntime.jsxs(
+                              system.Box,
+                              {
+                                sx: {
+                                  flexBasis: "8%",
+                                  minWidth: 80,
+                                  textAlign: "center"
+                                },
+                                children: [
+                                  /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "caption", color: "text.secondary", children: "Current Level" }),
+                                  /* @__PURE__ */ jsxRuntime.jsx(material.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__ */ jsxRuntime.jsxs(
+                              system.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__ */ jsxRuntime.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}`
+                                        );
+                                      },
+                                      statusList: (info == null ? void 0 : info.isLevelZero) && (info == null ? void 0 : info.created_by) === ((_o = userInfo == null ? void 0 : userInfo.userInfo) == null ? void 0 : _o.id) ? statusList == null ? void 0 : statusList.filter(
+                                        (app) => app.status == 1
+                                      ) : statusList
+                                    }
+                                  ) : /* @__PURE__ */ jsxRuntime.jsx(
+                                    material.Chip,
+                                    {
+                                      variant: "filled",
+                                      sx: {
+                                        backgroundColor: getStatus2(currentStatus).color,
+                                        color: getStatus2(currentStatus).labelColor,
+                                        height: "40px",
+                                        px: 2,
+                                        borderRadius: "100px !important",
+                                        "& .MuiChip-label": {
+                                          fontSize: "14px",
+                                          lineHeight: "15.4px",
+                                          fontWeight: "500",
+                                          textTransform: "capitalize"
+                                        }
+                                      },
+                                      label: statusData.title
+                                    }
+                                  ),
+                                  /* @__PURE__ */ jsxRuntime.jsx(
+                                    material.Divider,
+                                    {
+                                      orientation: "vertical",
+                                      flexItem: true,
+                                      sx: {
+                                        borderColor: "#E0E0E0",
+                                        height: "40px"
+                                      }
+                                    }
+                                  ),
+                                  /* @__PURE__ */ jsxRuntime.jsx(
+                                    material.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__ */ jsxRuntime.jsx("span", { className: "icon-arrow-down-1" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "icon-arrow-right-3" })
+                                    }
+                                  )
+                                ]
+                              }
+                            )
+                          ]
                         }
-                      },
-                      label: `${((_r = (_q = (_p = info == null ? void 0 : info.levels) == null ? void 0 : _p.find((lvl) => lvl.id === (info == null ? void 0 : info.current_level))) == null ? void 0 : _q.selected_status) == null ? void 0 : _r.status_id) === 2 || (info == null ? void 0 : info.isLevelZero) || !((_t = (_s = info == null ? void 0 : info.levels) == null ? void 0 : _s.find((lvl) => lvl.id === (info == null ? void 0 : info.current_level))) == null ? void 0 : _t.selected_status) ? "pending" : (_w = (_v = (_u = info == null ? void 0 : info.levels) == null ? void 0 : _u.find((lvl) => lvl.id === (info == null ? void 0 : info.current_level))) == null ? void 0 : _v.selected_status) == null ? void 0 : _w.name}`
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(material.Divider, { orientation: "vertical", sx: { ml: 5, borderColor: (_y = (_x = theme.palette) == null ? void 0 : _x.customColors) == null ? void 0 : _y.text4, height: "50px" } }),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    material.IconButton,
-                    {
-                      disableFocusRipple: true,
-                      disableRipple: true,
-                      color: "primary",
-                      sx: {
-                        ml: 5,
-                        background: (_B = (_A = (_z = theme.palette) == null ? void 0 : _z.customColors) == null ? void 0 : _A.primaryLightest) != null ? _B : "rgba(25,118,210,0.08)",
-                        boxShadow: "2px 2px 10px 0px #4C4E6426",
-                        "& span": { color: theme.palette.primary.dark }
-                      },
-                      onClick: () => handleExpandClick(info._id),
-                      children: expandedId === info._id ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "icon-arrow-down-1" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "icon-arrow-right-3" })
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(system.Box, { sx: { ml: 5 }, children: /* @__PURE__ */ jsxRuntime.jsx(
-                    Statusselector_default,
-                    {
-                      onSendBack: () => setSendDialog(info._id),
-                      onApprove: () => {
-                        var _a2, _b2;
-                        const sid = String((_b2 = (_a2 = statusByNum == null ? void 0 : statusByNum[1]) == null ? void 0 : _a2.id) != null ? _b2 : "");
-                        setApproveTarget({ id: info._id, statusId: sid });
-                      },
-                      onReject: () => {
-                        var _a2, _b2;
-                        const sid = String((_b2 = (_a2 = statusByNum == null ? void 0 : statusByNum[3]) == null ? void 0 : _a2.id) != null ? _b2 : "");
-                        setRejectTarget({ id: info._id, statusId: sid });
-                      },
-                      onHold: () => {
-                        var _a2, _b2;
-                        const sid = String((_b2 = (_a2 = statusByNum == null ? void 0 : statusByNum[2]) == null ? void 0 : _a2.id) != null ? _b2 : "");
-                        setOnHoldTarget({ id: info._id, statusId: sid });
-                      },
-                      statusList
-                    }
-                  ) })
-                ] })
-              ] })
+                      ),
+                      expandedId === info._id && /* @__PURE__ */ jsxRuntime.jsx(system.Box, { sx: { mt: 2, ml: 2 }, children: !(expandedDetails == null ? void 0 : expandedDetails.length) ? /* @__PURE__ */ jsxRuntime.jsx(
+                        system.Box,
+                        {
+                          sx: {
+                            height: 150,
+                            display: "flex",
+                            justifyContent: "center",
+                            alignItems: "center"
+                          },
+                          children: /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: 36, color: "primary" })
+                        }
+                      ) : /* @__PURE__ */ jsxRuntime.jsx(
+                        ConnectedTimeline,
+                        {
+                          events: expandedDetails == null ? void 0 : expandedDetails.map((item) => {
+                            var _a3, _b3, _c3, _d3;
+                            return {
+                              date: moment__default.default(item == null ? void 0 : item.created_at).format(
+                                "DD-MM-YYYY"
+                              ),
+                              time: moment__default.default(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"
+                            };
+                          })
+                        }
+                      ) })
+                    ]
+                  },
+                  index
+                );
+              })
             }
           ),
-          expandedId === info._id && /* @__PURE__ */ jsxRuntime.jsx(material.Grid, { container: true, xs: 12, spacing: 5, children: /* @__PURE__ */ jsxRuntime.jsx(material.Grid, { item: true, xs: 12, sx: { transform: "translateX(3.9%)" }, children: !(expandedDetails == null ? void 0 : expandedDetails.length) ? /* @__PURE__ */ jsxRuntime.jsx(system.Box, { sx: { height: "200px", display: "flex", justifyContent: "center", alignItems: "center" }, children: /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: 40, sx: { color: theme.palette.primary.dark } }) }) : /* @__PURE__ */ jsxRuntime.jsx(system.Box, { sx: { pl: 2 }, children: expandedDetails == null ? void 0 : expandedDetails.map((item, idx) => {
-            var _a2;
-            return /* @__PURE__ */ jsxRuntime.jsxs(system.Box, { sx: { mb: 2 }, children: [
-              /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "caption", sx: { mr: 2 }, children: moment__default.default(item == null ? void 0 : item.created_at).format("DD-MM-YYYY HH:mm") }),
-              /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { variant: "body2", component: "span", children: [
-                item == null ? void 0 : item.type,
-                " - ",
-                ((_a2 = item == null ? void 0 : item.comment_reasons) == null ? void 0 : _a2.comment) || "No Comments"
-              ] })
-            ] }, idx);
-          }) }) }) })
-        ] }, index);
-      }) })
-    ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(SendBackDialog_default, { openModal: !!sendDialog, closeModal: () => setSendDialog(null), header: "Send Back", workflowLogId: sendDialog || "" }),
-    /* @__PURE__ */ jsxRuntime.jsx(ApproveDialog_default, { openModal: !!approveTarget, closeModal: () => setApproveTarget(null), header: "Approve", workflowLogId: (approveTarget == null ? void 0 : approveTarget.id) || "", statusId: (approveTarget == null ? void 0 : approveTarget.statusId) || "" }),
-    /* @__PURE__ */ jsxRuntime.jsx(RejectDialog_default, { openModal: !!rejectTarget, closeModal: () => setRejectTarget(null), header: "Reject", workflowLogId: (rejectTarget == null ? void 0 : rejectTarget.id) || "", statusId: (rejectTarget == null ? void 0 : rejectTarget.statusId) || "", rejection_reason_master: "workflow_reject_reason" }),
-    /* @__PURE__ */ jsxRuntime.jsx(OnHoldDialog_default, { openModal: !!onHoldTarget, closeModal: () => setOnHoldTarget(null), header: "On Hold", workflowLogId: (onHoldTarget == null ? void 0 : onHoldTarget.id) || "", statusId: (onHoldTarget == null ? void 0 : onHoldTarget.statusId) || "" })
+          selectedApprovalOtions === "Action Required" && /* @__PURE__ */ jsxRuntime.jsx(
+            system.Box,
+            {
+              className: "fixedModal",
+              sx: {
+                overflowY: "auto",
+                height: "calc(100vh - 180px)",
+                px: 2,
+                pb: 3
+              },
+              children: visiblePendingRequests == null ? void 0 : visiblePendingRequests.map((info, index) => {
+                var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h, _i, _j, _k, _l;
+                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 : [];
+                (statusList || []).reduce(
+                  (acc, s) => {
+                    if ((s == null ? void 0 : s.status) != null) acc[s.status] = s;
+                    return acc;
+                  },
+                  {}
+                );
+                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 = getStatus2(currentStatus);
+                return /* @__PURE__ */ jsxRuntime.jsxs(
+                  material.Card,
+                  {
+                    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
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs(
+                        material.CardContent,
+                        {
+                          sx: {
+                            display: "flex",
+                            justifyContent: "space-between",
+                            alignItems: "center",
+                            flexWrap: { xs: "wrap", md: "nowrap" },
+                            gap: 2
+                          },
+                          children: [
+                            /* @__PURE__ */ jsxRuntime.jsxs(system.Box, { sx: { flexBasis: "22%", minWidth: 220 }, children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: info.activityInstruction, children: /* @__PURE__ */ jsxRuntime.jsx(
+                                material.Typography,
+                                {
+                                  variant: "h6",
+                                  fontWeight: 600,
+                                  noWrap: true,
+                                  color: "text.primary",
+                                  children: info.activity_name
+                                }
+                              ) }),
+                              /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: info.description_data, children: /* @__PURE__ */ jsxRuntime.jsx(
+                                material.Typography,
+                                {
+                                  variant: "body2",
+                                  color: "text.secondary",
+                                  noWrap: true,
+                                  sx: { mt: 0.5 },
+                                  children: info.description_data
+                                }
+                              ) })
+                            ] }),
+                            /* @__PURE__ */ jsxRuntime.jsxs(system.Box, { sx: { flexBasis: "20%", minWidth: 180 }, children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "caption", color: "text.secondary", children: "Links" }),
+                              /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: redir, children: /* @__PURE__ */ jsxRuntime.jsx(
+                                material.Typography,
+                                {
+                                  component: "a",
+                                  href: redir,
+                                  target: "_blank",
+                                  rel: "noreferrer",
+                                  sx: {
+                                    display: "block",
+                                    color: "primary.dark",
+                                    fontWeight: 500,
+                                    textDecoration: "none",
+                                    overflow: "hidden",
+                                    textOverflow: "ellipsis",
+                                    whiteSpace: "nowrap",
+                                    mt: 0.8
+                                  },
+                                  children: redir
+                                }
+                              ) })
+                            ] }),
+                            /* @__PURE__ */ jsxRuntime.jsxs(
+                              system.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" && ((_i = (_h = info == null ? void 0 : info.levels) == null ? void 0 : _h.find(
+                                    (lvl) => lvl.id === (info == null ? void 0 : info.current_level)
+                                  )) == null ? void 0 : _i.order) <= ((_k = (_j = info == null ? void 0 : info.levels) == null ? void 0 : _j.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 : _k.order) ? /* @__PURE__ */ jsxRuntime.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}`
+                                        );
+                                      },
+                                      statusList: (info == null ? void 0 : info.isLevelZero) && (info == null ? void 0 : info.created_by) === ((_l = userInfo == null ? void 0 : userInfo.userInfo) == null ? void 0 : _l.id) ? statusList == null ? void 0 : statusList.filter(
+                                        (app) => app.status == 1
+                                      ) : statusList
+                                    }
+                                  ) : /* @__PURE__ */ jsxRuntime.jsx(
+                                    material.Chip,
+                                    {
+                                      variant: "filled",
+                                      sx: {
+                                        backgroundColor: getStatus2(currentStatus).color,
+                                        color: getStatus2(currentStatus).labelColor,
+                                        height: "40px",
+                                        px: 2,
+                                        borderRadius: "100px !important",
+                                        "& .MuiChip-label": {
+                                          fontSize: "14px",
+                                          lineHeight: "15.4px",
+                                          fontWeight: "500",
+                                          textTransform: "capitalize"
+                                        }
+                                      },
+                                      label: statusData.title
+                                    }
+                                  ),
+                                  /* @__PURE__ */ jsxRuntime.jsx(
+                                    material.Divider,
+                                    {
+                                      orientation: "vertical",
+                                      flexItem: true,
+                                      sx: {
+                                        borderColor: "#E0E0E0",
+                                        height: "40px"
+                                      }
+                                    }
+                                  ),
+                                  /* @__PURE__ */ jsxRuntime.jsx(
+                                    material.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__ */ jsxRuntime.jsx("span", { className: "icon-arrow-down-1" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "icon-arrow-right-3" })
+                                    }
+                                  )
+                                ]
+                              }
+                            )
+                          ]
+                        }
+                      ),
+                      expandedId === info._id && /* @__PURE__ */ jsxRuntime.jsx(system.Box, { sx: { mt: 2, ml: 2 }, children: !(expandedDetails == null ? void 0 : expandedDetails.length) ? /* @__PURE__ */ jsxRuntime.jsx(
+                        system.Box,
+                        {
+                          sx: {
+                            height: 150,
+                            display: "flex",
+                            justifyContent: "center",
+                            alignItems: "center"
+                          },
+                          children: /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: 36, color: "primary" })
+                        }
+                      ) : /* @__PURE__ */ jsxRuntime.jsx(
+                        ConnectedTimeline,
+                        {
+                          events: expandedDetails == null ? void 0 : expandedDetails.map((item) => {
+                            var _a3, _b3, _c3, _d3;
+                            return {
+                              date: moment__default.default(item == null ? void 0 : item.created_at).format(
+                                "DD-MM-YYYY"
+                              ),
+                              time: moment__default.default(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"
+                            };
+                          })
+                        }
+                      ) })
+                    ]
+                  },
+                  index
+                );
+              })
+            }
+          )
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      SendBackDialog_default,
+      {
+        openModal: !!sendDialog,
+        closeModal: () => setSendDialog(null),
+        header: "Send Back",
+        workflowLogId: sendDialog || ""
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ApproveDialog_default,
+      {
+        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]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      RejectDialog_default,
+      {
+        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]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      OnHoldDialog_default,
+      {
+        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]
+      }
+    )
   ] });
 }
 function DialogOpener({