amp-workflow-ui 0.1.1 → 0.1.2

package/dist/index.js

@@ -368,6 +368,228 @@ function OnHoldDialog({ openModal, closeModal, header, workflowLogId, statusId }
   ] });
 }
 var OnHoldDialog_default = OnHoldDialog;
+var Bull = ({
+  count,
+  isDisabled
+}) => {
+  const theme = material.useTheme();
+  const color = isDisabled ? theme.palette.success.main : theme.palette.primary.main;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    material.Box,
+    {
+      sx: {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        width: 32,
+        height: 32,
+        borderRadius: "50%",
+        border: `2px solid ${color}`,
+        color,
+        fontWeight: 600,
+        fontSize: 14
+      },
+      children: count
+    }
+  );
+};
+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 CustomTimelineWithStatus({ 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 rows = [];
+  for (let i = 0; i < (events == null ? void 0 : events.length); i += 4) rows.push(events.slice(i, i + 4));
+  return /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { p: 2 }, children: rows.map((row, rowIndex) => /* @__PURE__ */ jsxRuntime.jsx(
+    material.Box,
+    {
+      sx: {
+        display: "flex",
+        flexDirection: isMobile ? "column" : rowIndex % 2 === 0 ? "row" : "row-reverse",
+        gap: isMobile ? 3 : 6,
+        alignItems: "center",
+        mb: 6
+      },
+      children: row.map((event, index) => {
+        var _a;
+        const status = getStatus((_a = event.status) == null ? void 0 : _a.title, theme);
+        const isDisabled = event.cardType === "disableCard";
+        return /* @__PURE__ */ jsxRuntime.jsx(material.Grid, { item: true, xs: isMobile ? 12 : 3, children: /* @__PURE__ */ jsxRuntime.jsx(
+          material.Card,
+          {
+            variant: "outlined",
+            sx: {
+              width: "100%",
+              borderRadius: 3,
+              p: 2,
+              borderColor: isDisabled ? theme.palette.success.main : theme.palette.divider,
+              backgroundColor: isDisabled ? theme.palette.action.hover : theme.palette.background.paper,
+              textAlign: "center",
+              boxShadow: 2,
+              "&:hover": { boxShadow: 5 }
+            },
+            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: 26,
+                          fontWeight: 600,
+                          borderRadius: "16px"
+                        }
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(Bull, { count: event.count, isDisabled }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                material.Typography,
+                {
+                  variant: "subtitle1",
+                  fontWeight: 600,
+                  color: isDisabled ? theme.palette.text.secondary : theme.palette.text.primary,
+                  sx: { mt: 2, mb: 0.5 },
+                  children: event.title
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                material.Typography,
+                {
+                  variant: "body2",
+                  color: theme.palette.text.secondary,
+                  sx: { mb: 1 },
+                  children: event.subTitle
+                }
+              ),
+              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",
+                    fontWeight: 500,
+                    textDecoration: "underline",
+                    "&: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: 2 },
+                  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;
   return {
@@ -397,7 +619,7 @@ var StyledChipProps = material.styled(material.Chip)(({ theme }) => {
     }
   };
 });
-var TruncatedTypography = material.styled(material.Typography)(({ theme }) => ({
+material.styled(material.Typography)(({ theme }) => ({
   overflow: "hidden",
   textOverflow: "ellipsis",
   whiteSpace: "nowrap",
@@ -410,6 +632,7 @@ 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(
@@ -427,6 +650,53 @@ function ApprovalWorkflow({
   const [pendingRequestArray, setPendingRequestArray] = React7.useState([]);
   const [selectedRequestArray, setSelectedRequestArray] = React7.useState([]);
   const [isLoading, setIsLoading] = React7.useState(false);
+  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 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,69 +707,110 @@ 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: (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) || ""
+    }
   ];
   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));
+    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]);
+    var _a2;
+    api.get({
+      url: `/workflow/status-count/${(_a2 = userInfo == null ? void 0 : userInfo.userInfo) == null ? void 0 : _a2.id}`,
+      serviceURL: "api"
+    }).then((res) => {
+      var _a3;
+      setStatusCount((_a3 = res == null ? void 0 : res.data) == null ? void 0 : _a3[0]);
     });
   };
   React7.useEffect(() => {
@@ -528,528 +839,940 @@ 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()}` : ""}`;
     }
     return "#";
   };
   if (isLoading && loadingComponent) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: loadingComponent });
+  ({
+    approved: {
+      color: theme.palette.success.light,
+      labelColor: theme.palette.success.main
+    },
+    rejected: {
+      color: theme.palette.success.light,
+      labelColor: theme.palette.success.main
+    },
+    onhold: {
+      color: theme.palette.success.light,
+      labelColor: theme.palette.success.main
+    },
+    sendback: {
+      color: theme.palette.success.light,
+      labelColor: theme.palette.success.main
+    },
+    pending: {
+      color: theme.palette.success.light,
+      labelColor: theme.palette.success.main
+    }
+  });
   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: filteredSelectedRequestArray == null ? void 0 : filteredSelectedRequestArray.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,
+                  {
+                    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(
+                        CustomTimelineWithStatus,
+                        {
+                          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: filteredAllRequestArray == null ? void 0 : filteredAllRequestArray.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,
+                  {
+                    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(
+                        CustomTimelineWithStatus,
+                        {
+                          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: filteredPendingRequestArray == null ? void 0 : filteredPendingRequestArray.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,
+                  {
+                    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(
+                        CustomTimelineWithStatus,
+                        {
+                          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({