amp-workflow-ui 0.1.5 → 0.1.7

package/dist/index.mjs

@@ -2,15 +2,14 @@ import React7, { createContext, useState, useEffect, useCallback, useContext, us
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import Button7 from '@mui/material/Button';
 import Dialog from '@mui/material/Dialog';
-import { useTheme } from '@mui/material/styles';
+import { styled, useTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import DialogActions5 from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
-import { styled, Chip, IconButton, useTheme as useTheme$1, Tooltip, Card, CardContent, Typography, Divider, CircularProgress, Box as Box$1, TextField, InputAdornment, Button, Menu, MenuItem, DialogTitle, Grid, DialogActions, FormControl, InputLabel, Select } from '@mui/material';
+import { Card, styled as styled$1, Chip, IconButton, useTheme as useTheme$1, Tooltip, CardContent, Typography, Divider, CircularProgress, Box as Box$1, TextField, InputAdornment, Button, Menu, MenuItem, DialogTitle, Grid, DialogActions, Snackbar, Alert, FormControl, InputLabel, Select } from '@mui/material';
 import HighlightOffIcon from '@mui/icons-material/HighlightOff';
 import { Box } from '@mui/system';
 import moment from 'moment';
-import toast from 'react-hot-toast';
 
 // src/context.tsx
 var WorkflowContext = createContext(null);
@@ -32,6 +31,7 @@ var ActionMenu = ({
   onApprove,
   onReject,
   onHold,
+  level,
   statusList
 }) => {
   const [anchorEl, setAnchorEl] = useState(null);
@@ -42,31 +42,40 @@ var ActionMenu = ({
   const handleClose = () => setAnchorEl(null);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Button, { variant: "contained", color: "primary", onClick: handleActionClick, children: "Apply Action" }),
-    /* @__PURE__ */ jsxs(Menu, { anchorEl, open, onClose: handleClose, MenuListProps: { "aria-labelledby": "basic-button" }, children: [
-      /* @__PURE__ */ jsx(
-        MenuItem,
-        {
-          onClick: () => {
-            onSendBack();
-            handleClose();
-          },
-          children: "Send Back"
-        }
-      ),
-      statusList.map((list) => /* @__PURE__ */ jsx(
-        MenuItem,
-        {
-          onClick: () => {
-            if (list.status === 1) onApprove();
-            else if (list.status === 2) onHold();
-            else if (list.status === 3) onReject();
-            handleClose();
-          },
-          children: list.name
-        },
-        list.id
-      ))
-    ] })
+    /* @__PURE__ */ jsxs(
+      Menu,
+      {
+        anchorEl,
+        open,
+        onClose: handleClose,
+        MenuListProps: { "aria-labelledby": "basic-button" },
+        children: [
+          !level && /* @__PURE__ */ jsx(
+            MenuItem,
+            {
+              onClick: () => {
+                onSendBack();
+                handleClose();
+              },
+              children: "Send Back"
+            }
+          ),
+          statusList.map((list) => /* @__PURE__ */ jsx(
+            MenuItem,
+            {
+              onClick: () => {
+                if (list.status === 1) onApprove();
+                else if (list.status === 2) onHold();
+                else if (list.status === 3) onReject();
+                handleClose();
+              },
+              children: list.name
+            },
+            list.id
+          ))
+        ]
+      }
+    )
   ] });
 };
 var Statusselector_default = ActionMenu;
@@ -84,6 +93,12 @@ function SendBackDialog({
   const [loading, setLoading] = useState(false);
   const [fileLoading, setFileLoading] = useState(false);
   const fileInputRef = useRef(null);
+  const [snackbar, setSnackbar] = useState({
+    open: false,
+    message: "",
+    severity: "success"
+  });
+  const handleCloseSnackbar = () => setSnackbar((prev) => ({ ...prev, open: false }));
   const handleAttachment = () => {
     var _a;
     return (_a = fileInputRef.current) == null ? void 0 : _a.click();
@@ -96,12 +111,22 @@ function SendBackDialog({
       const response = await api.post({
         url: "/workflow/upload-document",
         data: formData,
+        serviceURL: "api",
         headers: { "Content-Type": "multipart/form-data" }
       });
       setFileName(response.data.file);
       setSelectedFile(response.data.file);
+      setSnackbar({
+        open: true,
+        message: "File uploaded successfully!",
+        severity: "success"
+      });
     } catch (error2) {
-      toast.error("File upload failed");
+      setSnackbar({
+        open: true,
+        message: "File upload failed.",
+        severity: "error"
+      });
     } finally {
       setFileLoading(false);
     }
@@ -127,7 +152,7 @@ function SendBackDialog({
     return isValid;
   };
   const onSubmit = async () => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     if (!validateFields()) return;
     setLoading(true);
     try {
@@ -140,127 +165,186 @@ function SendBackDialog({
         },
         serviceURL: "api"
       });
-      if ((res == null ? void 0 : res.status) === 200) toast.success("Successfully sent back!");
-      if ((_b = res == null ? void 0 : res.error) == null ? void 0 : _b.message) {
-        toast.error((_c = res == null ? void 0 : res.error) == null ? void 0 : _c.message, { duration: 2e3 });
+      if ((res == null ? void 0 : res.status) === 200) {
+        setSnackbar({
+          open: true,
+          message: "Workflow sent back successfully!",
+          severity: "success"
+        });
+      } else {
+        setSnackbar({
+          open: true,
+          message: ((_b = res == null ? void 0 : res.error) == null ? void 0 : _b.message) || "Something went wrong. Try again.",
+          severity: "error"
+        });
       }
-      closeModal && closeModal();
-    } catch {
-      toast.error("Opps! something went wrong.");
+    } catch (e) {
+      setSnackbar({
+        open: true,
+        message: ((_d = (_c = e == null ? void 0 : e.response) == null ? void 0 : _c.data) == null ? void 0 : _d.message) || "Oops! Something went wrong.",
+        severity: "error"
+      });
     } finally {
+      setComment("");
+      setSelectedFile(null);
+      setFileName("");
       setLoading(false);
+      closeModal && closeModal();
     }
   };
-  return /* @__PURE__ */ jsxs(
-    Dialog,
-    {
-      open: openModal,
-      onClose: closeModal,
-      "aria-labelledby": "responsive-dialog-title",
-      sx: { "& .MuiPaper-root.MuiDialog-paper": { width: "550px" } },
-      children: [
-        /* @__PURE__ */ jsxs(
-          Box$1,
-          {
-            sx: {
-              display: "flex",
-              justifyContent: "space-between",
-              alignItems: "center"
-            },
-            children: [
-              /* @__PURE__ */ jsx(DialogTitle, { id: "responsive-dialog-title", children: header }),
-              /* @__PURE__ */ jsx(IconButton, { disableFocusRipple: true, disableRipple: true, onClick: closeModal, children: /* @__PURE__ */ jsx(HighlightOffIcon, { style: { color: "#666666" } }) })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsx(Box$1, { sx: { mb: 5 }, children: /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 5, children: [
-          /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(
-            TextField,
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      Dialog,
+      {
+        open: openModal,
+        onClose: closeModal,
+        "aria-labelledby": "responsive-dialog-title",
+        sx: { "& .MuiPaper-root.MuiDialog-paper": { width: "550px" } },
+        children: [
+          /* @__PURE__ */ jsxs(
+            Box$1,
             {
-              fullWidth: true,
-              label: "Comment",
-              value: comment,
-              placeholder: "Comment Here",
-              onChange: (e) => setComment(e.target.value),
-              required: true,
-              error: !!error.comment,
-              helperText: error.comment
+              sx: {
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center"
+              },
+              children: [
+                /* @__PURE__ */ jsx(DialogTitle, { id: "responsive-dialog-title", children: header }),
+                /* @__PURE__ */ jsx(IconButton, { disableFocusRipple: true, disableRipple: true, onClick: closeModal, children: /* @__PURE__ */ jsx(HighlightOffIcon, { style: { color: "#666666" } }) })
+              ]
             }
-          ) }),
-          /* @__PURE__ */ jsxs(Grid, { item: true, xs: 12, children: [
-            /* @__PURE__ */ jsx(
+          ),
+          /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsx(Box$1, { sx: { mb: 5 }, children: /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 5, children: [
+            /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(
               TextField,
               {
-                type: "text",
                 fullWidth: true,
-                label: "Attachment",
-                placeholder: "Attachment",
-                InputProps: {
-                  endAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx("span", { className: "icon-export-1" }) })
-                },
-                onClick: handleAttachment,
-                value: fileName,
-                error: !!error.file,
-                helperText: error.file
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: "file",
-                ref: fileInputRef,
-                style: { display: "none" },
-                onChange: handleFileChange
+                label: "Comment",
+                value: comment,
+                placeholder: "Comment Here",
+                onChange: (e) => setComment(e.target.value),
+                required: true,
+                error: !!error.comment,
+                helperText: error.comment
               }
-            )
-          ] })
-        ] }) }) }),
-        /* @__PURE__ */ jsx(DialogActions, { children: /* @__PURE__ */ jsxs(
-          Box$1,
-          {
-            sx: {
-              display: "flex",
-              justifyContent: "flex-end",
-              alignItems: "center"
-            },
-            children: [
+            ) }),
+            /* @__PURE__ */ jsxs(Grid, { item: true, xs: 12, children: [
               /* @__PURE__ */ jsx(
-                Button,
+                TextField,
                 {
-                  onClick: closeModal,
-                  size: "large",
-                  variant: "outlined",
-                  color: "primary",
-                  sx: { mr: 2 },
-                  children: "Close"
+                  type: "text",
+                  fullWidth: true,
+                  label: "Attachment",
+                  placeholder: "Attachment",
+                  InputProps: {
+                    endAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: fileLoading ? /* @__PURE__ */ jsx(CircularProgress, { size: 20, color: "inherit" }) : /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: "icon-export-1",
+                        style: { cursor: "pointer" },
+                        onClick: handleAttachment
+                      }
+                    ) })
+                  },
+                  onClick: handleAttachment,
+                  value: fileName,
+                  error: !!error.file,
+                  helperText: error.file
                 }
               ),
               /* @__PURE__ */ jsx(
-                Button,
+                "input",
                 {
-                  onClick: onSubmit,
-                  size: "large",
-                  variant: "contained",
-                  color: "primary",
-                  disabled: loading || fileLoading,
-                  children: loading ? /* @__PURE__ */ jsx(CircularProgress, { size: 24, color: "inherit" }) : "Submit"
+                  type: "file",
+                  ref: fileInputRef,
+                  style: { display: "none" },
+                  onChange: handleFileChange
                 }
               )
-            ]
+            ] })
+          ] }) }) }),
+          /* @__PURE__ */ jsx(DialogActions, { children: /* @__PURE__ */ jsxs(
+            Box$1,
+            {
+              sx: {
+                display: "flex",
+                justifyContent: "flex-end",
+                alignItems: "center"
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    onClick: closeModal,
+                    size: "large",
+                    variant: "outlined",
+                    color: "primary",
+                    sx: { mr: 2 },
+                    children: "Close"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    onClick: onSubmit,
+                    size: "large",
+                    variant: "contained",
+                    color: "primary",
+                    disabled: loading || fileLoading,
+                    children: loading ? /* @__PURE__ */ jsx(CircularProgress, { size: 24, color: "inherit" }) : "Submit"
+                  }
+                )
+              ]
+            }
+          ) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Snackbar,
+      {
+        open: snackbar.open,
+        autoHideDuration: 3e3,
+        onClose: handleCloseSnackbar,
+        anchorOrigin: { vertical: "top", horizontal: "right" },
+        children: /* @__PURE__ */ jsx(
+          Alert,
+          {
+            onClose: handleCloseSnackbar,
+            severity: snackbar.severity,
+            sx: {
+              width: "100%",
+              color: snackbar.severity === "error" ? "#fff" : "inherit",
+              bgcolor: snackbar.severity === "error" ? "#d32f2f" : void 0
+            },
+            children: snackbar.message
           }
-        ) })
-      ]
-    }
-  );
+        )
+      }
+    )
+  ] });
 }
 var SendBackDialog_default = SendBackDialog;
-function ApproveDialog({ openModal, closeModal, header, workflowLogId, statusId }) {
+function ApproveDialog({
+  openModal,
+  closeModal,
+  header,
+  workflowLogId,
+  statusId
+}) {
   const { userInfo, api } = useWorkflowContext();
   const theme = useTheme();
   useMediaQuery(theme.breakpoints.down("lg"));
   const [comment, setComment] = useState("");
   const [error, setError] = useState({});
   const [loading, setLoading] = useState(false);
+  const [snackbar, setSnackbar] = useState({
+    open: false,
+    message: "",
+    severity: "success"
+  });
+  const handleCloseSnackbar = () => setSnackbar((prev) => ({ ...prev, open: false }));
   const validateFields = () => {
     let isValid = true;
     const newError = {};
@@ -272,60 +356,185 @@ function ApproveDialog({ openModal, closeModal, header, workflowLogId, statusId
     return isValid;
   };
   const onSubmit = async () => {
-    var _a;
+    var _a, _b, _c;
     if (!validateFields()) return;
     setLoading(true);
     try {
-      await api.post(`/workflow/update-status/${workflowLogId}/${statusId}`, {
-        comment,
-        created_by: (_a = userInfo == null ? void 0 : userInfo.userInfo) == null ? void 0 : _a.id
+      await api.post({
+        url: `/workflow/update-status/${workflowLogId}/${statusId}`,
+        data: {
+          comment,
+          created_by: (_a = userInfo == null ? void 0 : userInfo.userInfo) == null ? void 0 : _a.id
+        },
+        serviceURL: "api"
+      });
+      setSnackbar({
+        open: true,
+        message: "Approved successfully!",
+        severity: "success"
+      });
+    } catch (e) {
+      setSnackbar({
+        open: true,
+        message: ((_c = (_b = e == null ? void 0 : e.response) == null ? void 0 : _b.data) == null ? void 0 : _c.message) || "Something unexpected occurred!",
+        severity: "error"
       });
-      toast.success("approved successfully!!!");
-      closeModal && closeModal();
-    } catch {
-      toast.error("something unexpected occured!!!");
     } finally {
+      setComment("");
       setLoading(false);
+      closeModal && closeModal();
     }
   };
-  return /* @__PURE__ */ jsxs(Dialog, { open: openModal, onClose: closeModal, "aria-labelledby": "responsive-dialog-title", sx: { "& .MuiPaper-root.MuiDialog-paper": { width: "550px" } }, children: [
-    /* @__PURE__ */ jsxs(Box$1, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
-      /* @__PURE__ */ jsx(DialogTitle, { id: "responsive-dialog-title", children: header }),
-      /* @__PURE__ */ jsx(IconButton, { disableFocusRipple: true, disableRipple: true, onClick: closeModal, children: /* @__PURE__ */ jsx(HighlightOffIcon, { style: { color: "#666666" } }) })
-    ] }),
-    /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsx(Box$1, { sx: { mb: 5 }, children: /* @__PURE__ */ jsx(Grid, { container: true, spacing: 5, children: /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(TextField, { fullWidth: true, label: "Comment", value: comment, placeholder: "Comment Here", onChange: (e) => setComment(e.target.value), required: true, error: !!error.comment, helperText: error.comment }) }) }) }) }),
-    /* @__PURE__ */ jsx(DialogActions, { children: /* @__PURE__ */ jsxs(Box$1, { sx: { display: "flex", justifyContent: "flex-end", alignItems: "center" }, children: [
-      /* @__PURE__ */ jsx(Button, { onClick: closeModal, size: "large", variant: "outlined", color: "primary", sx: { mr: 2 }, children: "Close" }),
-      /* @__PURE__ */ jsx(Button, { onClick: onSubmit, size: "large", variant: "contained", color: "primary", disabled: loading, children: loading ? /* @__PURE__ */ jsx(CircularProgress, { size: 24, color: "inherit" }) : "Submit" })
-    ] }) })
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      Dialog,
+      {
+        open: openModal,
+        onClose: closeModal,
+        "aria-labelledby": "responsive-dialog-title",
+        sx: { "& .MuiPaper-root.MuiDialog-paper": { width: "550px" } },
+        children: [
+          /* @__PURE__ */ jsxs(
+            Box$1,
+            {
+              sx: {
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center"
+              },
+              children: [
+                /* @__PURE__ */ jsx(DialogTitle, { id: "responsive-dialog-title", children: header }),
+                /* @__PURE__ */ jsx(IconButton, { disableFocusRipple: true, disableRipple: true, onClick: closeModal, children: /* @__PURE__ */ jsx(HighlightOffIcon, { style: { color: "#666666" } }) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsx(Box$1, { sx: { mb: 5 }, children: /* @__PURE__ */ jsx(Grid, { container: true, spacing: 5, children: /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(
+            TextField,
+            {
+              fullWidth: true,
+              label: "Comment",
+              value: comment,
+              placeholder: "Comment Here",
+              onChange: (e) => setComment(e.target.value),
+              required: true,
+              error: !!error.comment,
+              helperText: error.comment
+            }
+          ) }) }) }) }),
+          /* @__PURE__ */ jsx(DialogActions, { children: /* @__PURE__ */ jsxs(
+            Box$1,
+            {
+              sx: {
+                display: "flex",
+                justifyContent: "flex-end",
+                alignItems: "center"
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    onClick: closeModal,
+                    size: "large",
+                    variant: "outlined",
+                    color: "primary",
+                    sx: { mr: 2 },
+                    children: "Close"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    onClick: onSubmit,
+                    size: "large",
+                    variant: "contained",
+                    color: "primary",
+                    disabled: loading,
+                    children: loading ? /* @__PURE__ */ jsx(CircularProgress, { size: 24, color: "inherit" }) : "Submit"
+                  }
+                )
+              ]
+            }
+          ) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Snackbar,
+      {
+        open: snackbar.open,
+        autoHideDuration: 3e3,
+        onClose: handleCloseSnackbar,
+        anchorOrigin: { vertical: "top", horizontal: "right" },
+        children: /* @__PURE__ */ jsx(
+          Alert,
+          {
+            onClose: handleCloseSnackbar,
+            severity: snackbar.severity,
+            sx: {
+              width: "100%",
+              color: snackbar.severity === "error" ? "#fff" : "inherit",
+              bgcolor: snackbar.severity === "error" ? "#d32f2f" : void 0
+            },
+            children: snackbar.message
+          }
+        )
+      }
+    )
   ] });
 }
 var ApproveDialog_default = ApproveDialog;
-function RejectDialog({ openModal, closeModal, header, workflowLogId, statusId, rejection_reason_master }) {
+function RejectDialog({
+  openModal,
+  closeModal,
+  header,
+  workflowLogId,
+  statusId,
+  rejection_reason_master
+}) {
   const { userInfo, api } = useWorkflowContext();
   const theme = useTheme();
   useMediaQuery(theme.breakpoints.down("lg"));
   const DownArrow = () => {
     var _a;
-    return /* @__PURE__ */ jsx("span", { style: { color: ((_a = theme.palette.customColors) == null ? void 0 : _a.mainText) || "#333" }, className: "icon-arrow-down-1" });
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        style: { color: ((_a = theme.palette.customColors) == null ? void 0 : _a.mainText) || "#333" },
+        className: "icon-arrow-down-1"
+      }
+    );
   };
   const [rejectReasons, setRejectReasons] = useState("");
   const [comment, setComment] = useState("");
   const [error, setError] = useState({ reason: "", comment: "" });
   const [statusApplicableList, setStatusApplicableList] = useState([]);
   const [loading, setLoading] = useState(false);
+  const [snackbar, setSnackbar] = useState({
+    open: false,
+    message: "",
+    severity: "success"
+  });
+  const handleCloseSnackbar = () => setSnackbar((prev) => ({ ...prev, open: false }));
   useEffect(() => {
     (async () => {
       var _a;
       try {
         if (!statusApplicableList.length) {
-          const res = await api.get(`/workflow/applicableStatuses?type=${rejection_reason_master}`);
+          const res = await api.get({
+            url: `/workflow/applicableStatuses?type=${rejection_reason_master}`,
+            serviceURL: "api"
+          });
           setStatusApplicableList(((_a = res == null ? void 0 : res.data) == null ? void 0 : _a.data) || []);
         }
       } catch (e) {
+        setSnackbar({
+          open: true,
+          message: "Failed to load reject reasons.",
+          severity: "error"
+        });
       }
     })();
-  }, []);
+  }, [rejection_reason_master]);
   const validateFields = () => {
     let isValid = true;
     const errors = { reason: "", comment: "" };
@@ -341,48 +550,174 @@ function RejectDialog({ openModal, closeModal, header, workflowLogId, statusId,
     return isValid;
   };
   const onSubmit = async () => {
-    var _a;
+    var _a, _b, _c;
     if (!validateFields()) return;
     setLoading(true);
     try {
-      await api.post(`/workflow/update-status/${workflowLogId}/${statusId}`, {
-        reason: rejectReasons,
-        comment,
-        created_by: (_a = userInfo == null ? void 0 : userInfo.userInfo) == null ? void 0 : _a.id
+      await api.post({
+        url: `/workflow/update-status/${workflowLogId}/${statusId}`,
+        data: {
+          reason: rejectReasons,
+          comment,
+          created_by: (_a = userInfo == null ? void 0 : userInfo.userInfo) == null ? void 0 : _a.id
+        },
+        serviceURL: "api"
+      });
+      setSnackbar({
+        open: true,
+        message: "Rejected successfully!",
+        severity: "success"
       });
-      closeModal && closeModal();
     } catch (e) {
+      const message = ((_c = (_b = e == null ? void 0 : e.response) == null ? void 0 : _b.data) == null ? void 0 : _c.message) || "Something went wrong!";
+      console.error("\u274C Reject Error:", message);
+      setSnackbar({
+        open: true,
+        message,
+        severity: "error"
+      });
     } finally {
+      setComment("");
+      setRejectReasons("");
       setLoading(false);
+      closeModal && closeModal();
     }
   };
-  return /* @__PURE__ */ jsxs(Dialog, { open: openModal, onClose: closeModal, "aria-labelledby": "responsive-dialog-title", sx: { "& .MuiPaper-root.MuiDialog-paper": { width: "550px" } }, children: [
-    /* @__PURE__ */ jsxs(Box$1, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
-      /* @__PURE__ */ jsx(DialogTitle, { id: "responsive-dialog-title", children: header }),
-      /* @__PURE__ */ jsx(IconButton, { disableFocusRipple: true, disableRipple: true, onClick: closeModal, children: /* @__PURE__ */ jsx(HighlightOffIcon, { style: { color: "#666666" } }) })
-    ] }),
-    /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsx(Box$1, { sx: { mb: 5 }, children: /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 5, children: [
-      /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsxs(FormControl, { fullWidth: true, required: true, error: !!error.reason, children: [
-        /* @__PURE__ */ jsx(InputLabel, { required: true, id: "reject-reason-label", children: "Reject Reasons" }),
-        /* @__PURE__ */ jsx(Select, { IconComponent: DownArrow, label: "Reject Reasons", value: rejectReasons, id: "reject-reason", labelId: "reject-reason-label", onChange: (e) => setRejectReasons(e.target.value), children: statusApplicableList == null ? void 0 : statusApplicableList.map((reason_) => /* @__PURE__ */ jsx(MenuItem, { value: reason_ == null ? void 0 : reason_.id, children: reason_ == null ? void 0 : reason_.name }, reason_ == null ? void 0 : reason_.id)) }),
-        error.reason && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "error", children: error.reason })
-      ] }) }),
-      /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(TextField, { fullWidth: true, label: "Comment", value: comment, placeholder: "Comment Here", onChange: (e) => setComment(e.target.value), required: true, error: !!error.comment, helperText: error.comment }) })
-    ] }) }) }),
-    /* @__PURE__ */ jsx(DialogActions, { children: /* @__PURE__ */ jsxs(Box$1, { sx: { display: "flex", justifyContent: "flex-end", alignItems: "center" }, children: [
-      /* @__PURE__ */ jsx(Button, { onClick: closeModal, size: "large", variant: "outlined", color: "primary", sx: { mr: 2 }, children: "Close" }),
-      /* @__PURE__ */ jsx(Button, { onClick: onSubmit, size: "large", variant: "contained", color: "primary", disabled: loading, children: loading ? /* @__PURE__ */ jsx(CircularProgress, { size: 24, color: "inherit" }) : "Submit" })
-    ] }) })
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      Dialog,
+      {
+        open: openModal,
+        onClose: closeModal,
+        "aria-labelledby": "responsive-dialog-title",
+        sx: { "& .MuiPaper-root.MuiDialog-paper": { width: "550px" } },
+        children: [
+          /* @__PURE__ */ jsxs(
+            Box$1,
+            {
+              sx: {
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center"
+              },
+              children: [
+                /* @__PURE__ */ jsx(DialogTitle, { id: "responsive-dialog-title", children: header }),
+                /* @__PURE__ */ jsx(IconButton, { disableFocusRipple: true, disableRipple: true, onClick: closeModal, children: /* @__PURE__ */ jsx(HighlightOffIcon, { style: { color: "#666666" } }) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsx(Box$1, { sx: { mb: 5 }, children: /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 5, children: [
+            /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsxs(FormControl, { fullWidth: true, required: true, error: !!error.reason, children: [
+              /* @__PURE__ */ jsx(InputLabel, { required: true, id: "reject-reason-label", children: "Reject Reasons" }),
+              /* @__PURE__ */ jsx(
+                Select,
+                {
+                  IconComponent: DownArrow,
+                  label: "Reject Reasons",
+                  value: rejectReasons,
+                  id: "reject-reason",
+                  labelId: "reject-reason-label",
+                  onChange: (e) => setRejectReasons(e.target.value),
+                  children: statusApplicableList == null ? void 0 : statusApplicableList.map((reason_) => /* @__PURE__ */ jsx(MenuItem, { value: reason_ == null ? void 0 : reason_.id, children: reason_ == null ? void 0 : reason_.name }, reason_ == null ? void 0 : reason_.id))
+                }
+              ),
+              error.reason && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "error", children: error.reason })
+            ] }) }),
+            /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(
+              TextField,
+              {
+                fullWidth: true,
+                label: "Comment",
+                value: comment,
+                placeholder: "Comment Here",
+                onChange: (e) => setComment(e.target.value),
+                required: true,
+                error: !!error.comment,
+                helperText: error.comment
+              }
+            ) })
+          ] }) }) }),
+          /* @__PURE__ */ jsx(DialogActions, { children: /* @__PURE__ */ jsxs(
+            Box$1,
+            {
+              sx: {
+                display: "flex",
+                justifyContent: "flex-end",
+                alignItems: "center"
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    onClick: closeModal,
+                    size: "large",
+                    variant: "outlined",
+                    color: "primary",
+                    sx: { mr: 2 },
+                    children: "Close"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    onClick: onSubmit,
+                    size: "large",
+                    variant: "contained",
+                    color: "primary",
+                    disabled: loading,
+                    children: loading ? /* @__PURE__ */ jsx(CircularProgress, { size: 24, color: "inherit" }) : "Submit"
+                  }
+                )
+              ]
+            }
+          ) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Snackbar,
+      {
+        open: snackbar.open,
+        autoHideDuration: 3e3,
+        onClose: handleCloseSnackbar,
+        anchorOrigin: { vertical: "top", horizontal: "right" },
+        children: /* @__PURE__ */ jsx(
+          Alert,
+          {
+            onClose: handleCloseSnackbar,
+            severity: snackbar.severity,
+            sx: {
+              width: "100%",
+              color: snackbar.severity === "error" ? "#fff" : "inherit",
+              bgcolor: snackbar.severity === "error" ? "#d32f2f" : void 0
+            },
+            children: snackbar.message
+          }
+        )
+      }
+    )
   ] });
 }
 var RejectDialog_default = RejectDialog;
-function OnHoldDialog({ openModal, closeModal, header, workflowLogId, statusId }) {
+function OnHoldDialog({
+  openModal,
+  closeModal,
+  header,
+  workflowLogId,
+  statusId
+}) {
   const { userInfo, api } = useWorkflowContext();
   const theme = useTheme();
   useMediaQuery(theme.breakpoints.down("lg"));
   const [comment, setComment] = useState("");
   const [error, setError] = useState({ comment: "" });
   const [loading, setLoading] = useState(false);
+  const [snackbar, setSnackbar] = useState({
+    open: false,
+    message: "",
+    severity: "success"
+  });
+  const handleCloseSnackbar = () => setSnackbar((prev) => ({ ...prev, open: false }));
   const validateFields = () => {
     let isValid = true;
     const errors = { comment: "" };
@@ -394,271 +729,322 @@ function OnHoldDialog({ openModal, closeModal, header, workflowLogId, statusId }
     return isValid;
   };
   const onSubmit = async () => {
-    var _a;
+    var _a, _b, _c;
     if (!validateFields()) return;
     setLoading(true);
     try {
-      await api.post(`/workflow/update-status/${workflowLogId}/${statusId}`, {
-        comment,
-        created_by: (_a = userInfo == null ? void 0 : userInfo.userInfo) == null ? void 0 : _a.id
+      await api.post({
+        url: `/workflow/update-status/${workflowLogId}/${statusId}`,
+        data: {
+          comment,
+          created_by: (_a = userInfo == null ? void 0 : userInfo.userInfo) == null ? void 0 : _a.id
+        },
+        serviceURL: "api"
+      });
+      setSnackbar({
+        open: true,
+        message: "Moved to On-Hold successfully!",
+        severity: "success"
+      });
+    } catch (e) {
+      setSnackbar({
+        open: true,
+        message: ((_c = (_b = e == null ? void 0 : e.response) == null ? void 0 : _b.data) == null ? void 0 : _c.message) || "Failed to submit the form",
+        severity: "error"
       });
-      closeModal && closeModal();
-    } catch {
-      toast.error("Failed to submit the form");
     } finally {
+      setComment("");
+      closeModal && closeModal();
       setLoading(false);
     }
   };
-  return /* @__PURE__ */ jsxs(Dialog, { open: openModal, onClose: closeModal, "aria-labelledby": "responsive-dialog-title", sx: { "& .MuiPaper-root.MuiDialog-paper": { width: "550px" } }, children: [
-    /* @__PURE__ */ jsxs(Box$1, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
-      /* @__PURE__ */ jsx(DialogTitle, { id: "responsive-dialog-title", children: header }),
-      /* @__PURE__ */ jsx(IconButton, { disableFocusRipple: true, disableRipple: true, onClick: closeModal, children: /* @__PURE__ */ jsx(HighlightOffIcon, { style: { color: "#666666" } }) })
-    ] }),
-    /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsx(Box$1, { sx: { mb: 5 }, children: /* @__PURE__ */ jsx(Grid, { container: true, spacing: 5, children: /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(TextField, { fullWidth: true, label: "Comment", value: comment, placeholder: "Comment Here", onChange: (e) => setComment(e.target.value), required: true, error: !!error.comment, helperText: error.comment }) }) }) }) }),
-    /* @__PURE__ */ jsx(DialogActions, { children: /* @__PURE__ */ jsxs(Box$1, { sx: { display: "flex", justifyContent: "flex-end", alignItems: "center" }, children: [
-      /* @__PURE__ */ jsx(Button, { onClick: closeModal, size: "large", variant: "outlined", color: "primary", sx: { mr: 2 }, children: "Close" }),
-      /* @__PURE__ */ jsx(Button, { onClick: onSubmit, size: "large", variant: "contained", color: "primary", disabled: loading, children: loading ? /* @__PURE__ */ jsx(CircularProgress, { size: 24, color: "inherit" }) : "Submit" })
-    ] }) })
-  ] });
-}
-var OnHoldDialog_default = OnHoldDialog;
-var getStatus = (status, theme) => {
-  const s = status == null ? void 0 : status.toLowerCase();
-  const colors = {
-    approved: {
-      bg: theme.palette.success.light,
-      text: theme.palette.success.main
-    },
-    rejected: { bg: theme.palette.error.light, text: theme.palette.error.main },
-    onhold: {
-      bg: theme.palette.warning.light,
-      text: theme.palette.warning.main
-    },
-    inprogress: { bg: theme.palette.info.light, text: theme.palette.info.main },
-    pending: { bg: theme.palette.grey[200], text: theme.palette.text.primary }
-  };
-  return colors[s] || colors.pending;
-};
-function ConnectedTimeline({ events }) {
-  const { api } = useWorkflowContext();
-  const theme = useTheme$1();
-  const [isMobile, setIsMobile] = useState(false);
-  useEffect(() => {
-    const checkScreen = () => setIsMobile(window.innerWidth < 768);
-    checkScreen();
-    window.addEventListener("resize", checkScreen);
-    return () => window.removeEventListener("resize", checkScreen);
-  }, []);
-  const handleAttachmentClick = (attachment) => {
-    api.get({
-      url: `/workflow/uploaded-document-url/${attachment.split("/").reverse()[0]}`,
-      serviceURL: "api"
-    }).then((res) => window.open(res.data, "_blank"));
-  };
-  const columns = 4;
-  const rows = [];
-  for (let i = 0; i < (events == null ? void 0 : events.length); i += columns)
-    rows.push(events.slice(i, i + columns));
-  return /* @__PURE__ */ jsx(Box$1, { sx: { py: 4, position: "relative" }, children: rows.map((row, rowIndex) => {
-    const reversed = rowIndex % 2 === 1;
-    return /* @__PURE__ */ jsx(
-      Box$1,
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      Dialog,
       {
-        sx: {
-          display: "flex",
-          flexDirection: reversed ? "row-reverse" : "row",
-          justifyContent: "left",
-          alignItems: "center",
-          gap: 6,
-          position: "relative",
-          mb: 8,
-          flexWrap: isMobile ? "wrap" : "nowrap"
-        },
-        children: row.map((event, index) => {
-          var _a;
-          const globalIndex = rowIndex * columns + index;
-          const status = getStatus((_a = event.status) == null ? void 0 : _a.title, theme);
-          const isDisabled = event.cardType === "disableCard";
-          return /* @__PURE__ */ jsxs(
+        open: openModal,
+        onClose: closeModal,
+        "aria-labelledby": "responsive-dialog-title",
+        sx: { "& .MuiPaper-root.MuiDialog-paper": { width: "550px" } },
+        children: [
+          /* @__PURE__ */ jsxs(
             Box$1,
             {
               sx: {
-                position: "relative",
                 display: "flex",
-                justifyContent: "center",
+                justifyContent: "space-between",
                 alignItems: "center"
               },
               children: [
-                !isMobile && index < row.length - 1 && /* @__PURE__ */ jsx(
-                  Box$1,
-                  {
-                    sx: {
-                      position: "absolute",
-                      top: "50%",
-                      [reversed ? "right" : "left"]: "100%",
-                      width: "60px",
-                      height: "2px",
-                      background: theme.palette.primary.main,
-                      zIndex: 0
-                    }
-                  }
-                ),
-                !isMobile && globalIndex === (rowIndex + 1) * columns - 1 && globalIndex < events.length - 1 && /* @__PURE__ */ jsx(
-                  Box$1,
+                /* @__PURE__ */ jsx(DialogTitle, { id: "responsive-dialog-title", children: header }),
+                /* @__PURE__ */ jsx(IconButton, { disableFocusRipple: true, disableRipple: true, onClick: closeModal, children: /* @__PURE__ */ jsx(HighlightOffIcon, { style: { color: "#666666" } }) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsx(Box$1, { sx: { mb: 5 }, children: /* @__PURE__ */ jsx(Grid, { container: true, spacing: 5, children: /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(
+            TextField,
+            {
+              fullWidth: true,
+              label: "Comment",
+              value: comment,
+              placeholder: "Comment Here",
+              onChange: (e) => setComment(e.target.value),
+              required: true,
+              error: !!error.comment,
+              helperText: error.comment
+            }
+          ) }) }) }) }),
+          /* @__PURE__ */ jsx(DialogActions, { children: /* @__PURE__ */ jsxs(
+            Box$1,
+            {
+              sx: {
+                display: "flex",
+                justifyContent: "flex-end",
+                alignItems: "center"
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  Button,
                   {
-                    sx: {
-                      position: "absolute",
-                      bottom: "-48px",
-                      left: reversed ? "0%" : "100%",
-                      width: "2px",
-                      height: "48px",
-                      background: theme.palette.primary.main,
-                      zIndex: 0
-                    }
+                    onClick: closeModal,
+                    size: "large",
+                    variant: "outlined",
+                    color: "primary",
+                    sx: { mr: 2 },
+                    children: "Close"
                   }
                 ),
                 /* @__PURE__ */ jsx(
-                  Card,
+                  Button,
                   {
-                    sx: {
-                      width: "230px",
-                      minHeight: "180px",
-                      borderRadius: "16px",
-                      border: `1px solid ${isDisabled ? theme.palette.success.light : theme.palette.divider}`,
-                      backgroundColor: isDisabled ? theme.palette.action.hover : theme.palette.background.paper,
-                      textAlign: "center",
-                      boxShadow: "0px 4px 10px rgba(0,0,0,0.05)",
-                      transition: "all 0.25s ease-in-out",
-                      "&:hover": {
-                        boxShadow: "0px 6px 14px rgba(0,0,0,0.1)",
-                        transform: "translateY(-2px)"
-                      }
-                    },
-                    children: /* @__PURE__ */ jsxs(CardContent, { children: [
-                      /* @__PURE__ */ jsxs(
-                        Box$1,
-                        {
-                          sx: {
-                            display: "flex",
-                            justifyContent: "space-between",
-                            alignItems: "center",
-                            mb: 1
-                          },
-                          children: [
-                            /* @__PURE__ */ jsx(
-                              Typography,
-                              {
-                                variant: "body2",
-                                color: theme.palette.text.secondary,
-                                children: event.date
-                              }
-                            ),
-                            event.status && /* @__PURE__ */ jsx(
-                              Chip,
-                              {
-                                label: event.status.title,
-                                sx: {
-                                  backgroundColor: status.bg,
-                                  color: status.text,
-                                  fontSize: 12,
-                                  height: 24,
-                                  fontWeight: 600,
-                                  borderRadius: "16px"
-                                }
-                              }
-                            )
-                          ]
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(
-                        Box$1,
-                        {
-                          sx: {
-                            width: 36,
-                            height: 36,
-                            borderRadius: "50%",
-                            border: `2px solid ${theme.palette.primary.main}`,
-                            display: "flex",
-                            justifyContent: "center",
-                            alignItems: "center",
-                            color: theme.palette.primary.main,
-                            fontWeight: 600,
-                            fontSize: 14,
-                            mx: "auto",
-                            mb: 1.5
-                          },
-                          children: event.count
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(Tooltip, { title: event.title, children: /* @__PURE__ */ jsx(
-                        Typography,
-                        {
-                          variant: "subtitle1",
-                          fontWeight: 600,
-                          color: isDisabled ? theme.palette.text.secondary : theme.palette.text.primary,
-                          sx: {
-                            overflow: "hidden",
-                            textOverflow: "ellipsis",
-                            whiteSpace: "nowrap",
-                            mb: 0.5
-                          },
-                          children: event.title
-                        }
-                      ) }),
-                      /* @__PURE__ */ jsx(
-                        Typography,
-                        {
-                          variant: "body2",
-                          color: theme.palette.text.secondary,
-                          sx: {
-                            minHeight: "20px",
-                            mb: 0.8,
-                            textOverflow: "ellipsis",
-                            whiteSpace: "nowrap",
-                            overflow: "hidden"
-                          },
-                          children: event.subTitle || "No Comments"
-                        }
-                      ),
-                      event.attachment && /* @__PURE__ */ jsx(Tooltip, { title: "View attachment", children: /* @__PURE__ */ jsx(
-                        Typography,
+                    onClick: onSubmit,
+                    size: "large",
+                    variant: "contained",
+                    color: "primary",
+                    disabled: loading,
+                    children: loading ? /* @__PURE__ */ jsx(CircularProgress, { size: 24, color: "inherit" }) : "Submit"
+                  }
+                )
+              ]
+            }
+          ) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Snackbar,
+      {
+        open: snackbar.open,
+        autoHideDuration: 3e3,
+        onClose: handleCloseSnackbar,
+        anchorOrigin: { vertical: "top", horizontal: "right" },
+        children: /* @__PURE__ */ jsx(
+          Alert,
+          {
+            onClose: handleCloseSnackbar,
+            severity: snackbar.severity,
+            sx: {
+              width: "100%",
+              color: snackbar.severity === "error" ? "#fff" : "inherit",
+              bgcolor: snackbar.severity === "error" ? "#d32f2f" : void 0
+            },
+            children: snackbar.message
+          }
+        )
+      }
+    )
+  ] });
+}
+var OnHoldDialog_default = OnHoldDialog;
+var CONNECTOR = {
+  horizontal: {
+    thickness: 3,
+    lengthExtra: 0,
+    offsetReverseExtra: 30,
+    color: "#2C35FF"
+  },
+  vertical: {
+    thickness: 3,
+    height: 60,
+    color: "#2C35FF"
+  }
+};
+var CARD_WIDTH = 200;
+var CARD_HEIGHT = 220;
+var GAP = 65;
+var ROW_GAP = 60;
+var CustomCard = styled(Card)(
+  ({ theme, cardType }) => ({
+    width: CARD_WIDTH,
+    height: CARD_HEIGHT,
+    borderRadius: 16,
+    backgroundColor: cardType === "subCard" ? "#FFF2D8" : cardType === "disableCard" ? "#ECECEC" : "#F1F1FF",
+    border: cardType === "disableCard" ? "none" : `1px solid ${theme.palette.primary.dark}`,
+    overflow: "hidden",
+    position: "relative"
+  })
+);
+var Bull = ({ count, cardType }) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    Box$1,
+    {
+      sx: {
+        width: 40,
+        height: 40,
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        borderRadius: "50%",
+        background: "#fff",
+        border: cardType === "disableCard" ? `2px solid ${theme.palette.grey[400]}` : `2px solid ${theme.palette.primary.dark}`,
+        color: cardType === "disableCard" ? theme.palette.grey[700] : theme.palette.primary.dark,
+        fontWeight: 600,
+        fontSize: 16
+      },
+      children: count
+    }
+  );
+};
+function CustomTimelineWithStatus({ events }) {
+  useTheme();
+  const rows = [];
+  for (let i = 0; i < events.length; i += 4) rows.push(events.slice(i, i + 4));
+  const computeColumn = (index) => {
+    const row = Math.floor(index / 4);
+    const pos = index % 4;
+    return row % 2 === 0 ? pos : 3 - pos;
+  };
+  const hasNextCard = (i) => i + 1 < events.length;
+  const getHorizontalY = (rowIndex) => {
+    const centerY = CARD_HEIGHT / 2 - CONNECTOR.horizontal.thickness / 2;
+    return rowIndex % 2 === 0 ? centerY : centerY + CONNECTOR.horizontal.offsetReverseExtra;
+  };
+  const isVerticalNeeded = (index) => (index + 1) % 4 === 0 && hasNextCard(index);
+  return /* @__PURE__ */ jsx(Box$1, { sx: { width: "100%", overflowX: "auto", p: 1 }, children: /* @__PURE__ */ jsx(
+    Box$1,
+    {
+      sx: {
+        position: "relative",
+        display: "grid",
+        gridTemplateColumns: `repeat(4, ${CARD_WIDTH}px)`,
+        columnGap: `${GAP}px`,
+        rowGap: `${ROW_GAP}px`,
+        width: "max-content"
+      },
+      children: events.map((event, index) => {
+        const row = Math.floor(index / 4);
+        const col = computeColumn(index);
+        const isLast = index % 4 === 3;
+        return /* @__PURE__ */ jsxs(
+          Box$1,
+          {
+            sx: {
+              gridColumn: col + 1,
+              gridRow: row + 1,
+              position: "relative"
+            },
+            children: [
+              !isLast && hasNextCard(index) && /* @__PURE__ */ jsx(
+                Box$1,
+                {
+                  sx: {
+                    position: "absolute",
+                    top: getHorizontalY(row),
+                    left: row % 2 === 0 ? CARD_WIDTH : "auto",
+                    right: row % 2 !== 0 ? CARD_WIDTH : "auto",
+                    width: GAP + CONNECTOR.horizontal.lengthExtra,
+                    borderTop: `${CONNECTOR.horizontal.thickness}px dashed ${CONNECTOR.horizontal.color}`,
+                    zIndex: 10
+                  }
+                }
+              ),
+              isVerticalNeeded(index) && /* @__PURE__ */ jsx(
+                Box$1,
+                {
+                  sx: {
+                    position: "absolute",
+                    top: CARD_HEIGHT,
+                    left: CARD_WIDTH / 2 - CONNECTOR.vertical.thickness / 2,
+                    width: CONNECTOR.vertical.thickness,
+                    height: CONNECTOR.vertical.height,
+                    borderLeft: `${CONNECTOR.vertical.thickness}px dashed ${CONNECTOR.vertical.color}`,
+                    zIndex: 10
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(CustomCard, { cardType: event.cardType, children: /* @__PURE__ */ jsxs(CardContent, { sx: { px: 2, pt: 2, pb: 1 }, children: [
+                /* @__PURE__ */ jsxs(
+                  Box$1,
+                  {
+                    sx: {
+                      mb: 1,
+                      display: "flex",
+                      justifyContent: "space-between",
+                      alignItems: "center",
+                      height: 28
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(Typography, { variant: "body2", children: event.date }),
+                      event.status && /* @__PURE__ */ jsx(
+                        Chip,
                         {
-                          variant: "body2",
+                          label: event.status.title,
                           sx: {
-                            color: theme.palette.primary.main,
-                            cursor: "pointer",
-                            textDecoration: "underline",
-                            fontWeight: 500,
-                            "&:hover": {
-                              color: theme.palette.primary.dark
-                            }
-                          },
-                          onClick: () => handleAttachmentClick(event.attachment),
-                          children: "Attachment"
-                        }
-                      ) }),
-                      /* @__PURE__ */ jsx(
-                        Typography,
-                        {
-                          variant: "caption",
-                          display: "block",
-                          color: theme.palette.text.disabled,
-                          sx: { mt: 1 },
-                          children: event.time
+                            backgroundColor: event.status.color,
+                            color: event.status.labelColor,
+                            borderRadius: "40px",
+                            height: 28,
+                            fontWeight: 600,
+                            px: 1
+                          }
                         }
                       )
-                    ] })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(Bull, { count: event.count, cardType: event.cardType }),
+                /* @__PURE__ */ jsx(
+                  Typography,
+                  {
+                    variant: "subtitle2",
+                    sx: { mt: 2, fontWeight: 600 },
+                    children: event.title
+                  }
+                ),
+                /* @__PURE__ */ jsx(Typography, { sx: { mb: 1 }, variant: "body2", children: event.subTitle }),
+                event.attachment && /* @__PURE__ */ jsx(
+                  Typography,
+                  {
+                    sx: {
+                      cursor: "pointer",
+                      color: "#0B56CA",
+                      fontWeight: 600
+                    },
+                    children: "Attachment"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Typography,
+                  {
+                    variant: "body2",
+                    sx: {
+                      position: "absolute",
+                      bottom: 12,
+                      left: 14,
+                      color: "#777"
+                    },
+                    children: event.time
                   }
                 )
-              ]
-            },
-            index
-          );
-        })
-      },
-      rowIndex
-    );
-  }) });
+              ] }) })
+            ]
+          },
+          index
+        );
+      })
+    }
+  ) });
 }
 var useDebounce = (value, delay) => {
   const [debouncedValue, setDebouncedValue] = useState(value);
@@ -703,7 +1089,7 @@ var SearchBox = ({
   ) });
 };
 var SearchBox_default = SearchBox;
-var StyledChipProps = styled(Chip)(({ theme }) => {
+var StyledChipProps = styled$1(Chip)(({ theme }) => {
   var _a, _b, _c;
   return {
     "&.MuiChip-colorPrimary": {
@@ -736,7 +1122,7 @@ function ApprovalWorkflow({
   selectedWorkflowsList = [],
   userInfo
 }) {
-  var _a, _b, _c, _d, _e, _f, _g;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s;
   const theme = useTheme$1();
   const { api, urlBuilder, loadingComponent, ENV_VARIABLES } = useWorkflowContext();
   const [selectedApprovalOtions, setSelectedApprovalOtions] = useState(
@@ -845,7 +1231,7 @@ function ApprovalWorkflow({
     setExpandedId((prevId) => prevId === id ? null : id);
     fetchExpandedActivityLogs(id);
   };
-  const getStatus2 = (status) => {
+  const getStatus = (status) => {
     switch (status.toLowerCase()) {
       case "approved":
         return {
@@ -992,7 +1378,34 @@ function ApprovalWorkflow({
     }
     return "#";
   };
+  const StatusObj = {
+    approved: {
+      title: "Approved",
+      color: theme.palette.success.light,
+      labelColor: theme.palette.success.main
+    },
+    rejected: {
+      title: "Rejected",
+      color: ((_a = theme.palette.customColors) == null ? void 0 : _a.chipWarningContainer) || theme.palette.error.light,
+      labelColor: theme.palette.error.main
+    },
+    onhold: {
+      title: "On Hold",
+      color: ((_c = (_b = theme.palette) == null ? void 0 : _b.customColors) == null ? void 0 : _c.chipPendingContainer) || theme.palette.warning.light,
+      labelColor: ((_e = (_d = theme.palette) == null ? void 0 : _d.customColors) == null ? void 0 : _e.chipPendingText) || theme.palette.warning.dark
+    },
+    sendback: {
+      title: "Send Back",
+      color: ((_g = (_f = theme.palette) == null ? void 0 : _f.customColors) == null ? void 0 : _g.approvalPrimaryChipBG) || theme.palette.info.light,
+      labelColor: ((_i = (_h = theme.palette) == null ? void 0 : _h.customColors) == null ? void 0 : _i.approvalPrimaryChipText) || theme.palette.info.dark
+    },
+    pending: {
+      color: ((_j = theme.palette.customColors) == null ? void 0 : _j.approvalPrimaryChipBG) || theme.palette.grey[300],
+      labelColor: ((_l = (_k = theme.palette) == null ? void 0 : _k.customColors) == null ? void 0 : _l.approvalPrimaryChipText) || theme.palette.text.primary
+    }
+  };
   if (isLoading && loadingComponent) return /* @__PURE__ */ jsx(Fragment, { children: loadingComponent });
+  console.log("TEST LIB");
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       Box,
@@ -1063,7 +1476,7 @@ function ApprovalWorkflow({
                 pb: 3
               },
               children: visibleSelectedRequests == null ? void 0 : visibleSelectedRequests.map((info, index) => {
-                var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h, _i, _j, _k, _l, _m, _n, _o;
+                var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2;
                 const currentLevel = info == null ? void 0 : info.levels.find(
                   (level_) => level_.id === (info == null ? void 0 : info.current_level)
                 );
@@ -1075,13 +1488,17 @@ function ApprovalWorkflow({
                   },
                   {}
                 );
+                const filterRejectForLevelZero = (statusList2, info2) => {
+                  if (!(info2 == null ? void 0 : info2.isLevelZero)) return statusList2;
+                  return statusList2.filter((item) => item.status !== 3);
+                };
                 const redir = buildRedirectionUrl(info);
                 const currentStatus = ((_c2 = (_b2 = (_a2 = info == null ? void 0 : info.levels) == null ? void 0 : _a2.find(
                   (lvl) => lvl.id === (info == null ? void 0 : info.current_level)
                 )) == null ? void 0 : _b2.selected_status) == null ? void 0 : _c2.status_id) === 1 ? "approved" : ((_f2 = (_e2 = (_d2 = info == null ? void 0 : info.levels) == null ? void 0 : _d2.find(
                   (lvl) => lvl.id === (info == null ? void 0 : info.current_level)
                 )) == null ? void 0 : _e2.selected_status) == null ? void 0 : _f2.status_id) === 3 ? "rejected" : "pending";
-                const statusData = getStatus2(currentStatus);
+                const statusData = getStatus(currentStatus);
                 return /* @__PURE__ */ jsxs(
                   Card,
                   {
@@ -1168,7 +1585,7 @@ function ApprovalWorkflow({
                                     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"
+                                  children: ((_h2 = info == null ? void 0 : info.attachment_links) == null ? void 0 : _h2.length) ? `${info.attachment_links.length} file(s)` : "N/A"
                                 }
                               )
                             ] }),
@@ -1197,9 +1614,9 @@ function ApprovalWorkflow({
                                 },
                                 children: [
                                   /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: "Current Level" }),
-                                  /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { mt: 0.8 }, children: (info == null ? void 0 : info.isLevelZero) ? "L0" : "L" + (((_j = (_i = info == null ? void 0 : info.levels) == null ? void 0 : _i.findIndex(
+                                  /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { mt: 0.8 }, children: (info == null ? void 0 : info.isLevelZero) ? "L0" : "L" + (((_j2 = (_i2 = info == null ? void 0 : info.levels) == null ? void 0 : _i2.findIndex(
                                     (lvl) => lvl.id === (info == null ? void 0 : info.current_level)
-                                  )) != null ? _j : -1) + 1 || "") })
+                                  )) != null ? _j2 : -1) + 1 || "") })
                                 ]
                               }
                             ),
@@ -1215,14 +1632,14 @@ function ApprovalWorkflow({
                                   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(
+                                  (info == null ? void 0 : info.current_status) !== "completed" && ((_l2 = (_k2 = info == null ? void 0 : info.levels) == null ? void 0 : _k2.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(
+                                  )) == null ? void 0 : _l2.order) <= ((_n2 = (_m2 = info == null ? void 0 : info.levels) == null ? void 0 : _m2.find(
                                     (lvl) => {
                                       var _a3;
                                       return Number(lvl.assign_to[0]) === ((_a3 = userInfo == null ? void 0 : userInfo.userInfo) == null ? void 0 : _a3.id);
                                     }
-                                  )) == null ? void 0 : _n.order) ? /* @__PURE__ */ jsx(
+                                  )) == null ? void 0 : _n2.order) ? /* @__PURE__ */ jsx(
                                     Statusselector_default,
                                     {
                                       onSendBack: () => handleSendBack(info == null ? void 0 : info._id),
@@ -1244,17 +1661,19 @@ function ApprovalWorkflow({
                                           `${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
+                                      level: info == null ? void 0 : info.isLevelZero,
+                                      statusList: filterRejectForLevelZero(
+                                        statusList,
+                                        info
+                                      )
                                     }
                                   ) : /* @__PURE__ */ jsx(
                                     Chip,
                                     {
                                       variant: "filled",
                                       sx: {
-                                        backgroundColor: getStatus2(currentStatus).color,
-                                        color: getStatus2(currentStatus).labelColor,
+                                        backgroundColor: getStatus(currentStatus).color,
+                                        color: getStatus(currentStatus).labelColor,
                                         height: "40px",
                                         px: 2,
                                         borderRadius: "100px !important",
@@ -1312,7 +1731,7 @@ function ApprovalWorkflow({
                           children: /* @__PURE__ */ jsx(CircularProgress, { size: 36, color: "primary" })
                         }
                       ) : /* @__PURE__ */ jsx(
-                        ConnectedTimeline,
+                        CustomTimelineWithStatus,
                         {
                           events: expandedDetails == null ? void 0 : expandedDetails.map((item) => {
                             var _a3, _b3, _c3, _d3;
@@ -1325,7 +1744,8 @@ function ApprovalWorkflow({
                               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"
+                              cardType: "card",
+                              status: (item == null ? void 0 : item.type) === "approve" ? StatusObj.approved : (item == null ? void 0 : item.type) === "reject" ? StatusObj.rejected : (item == null ? void 0 : item.type) === "send_back" ? StatusObj.sendback : (item == null ? void 0 : item.type) === "onhold" ? StatusObj.onhold : null
                             };
                           })
                         }
@@ -1348,7 +1768,7 @@ function ApprovalWorkflow({
                 pb: 3
               },
               children: visibleAllRequests == null ? void 0 : visibleAllRequests.map((info, index) => {
-                var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h, _i, _j, _k, _l, _m, _n, _o;
+                var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2;
                 const currentLevel = info == null ? void 0 : info.levels.find(
                   (level_) => level_.id === (info == null ? void 0 : info.current_level)
                 );
@@ -1360,13 +1780,17 @@ function ApprovalWorkflow({
                   },
                   {}
                 );
+                const filterRejectForLevelZero = (statusList2, info2) => {
+                  if (!(info2 == null ? void 0 : info2.isLevelZero)) return statusList2;
+                  return statusList2.filter((item) => item.status !== 3);
+                };
                 const redir = buildRedirectionUrl(info);
                 const currentStatus = ((_c2 = (_b2 = (_a2 = info == null ? void 0 : info.levels) == null ? void 0 : _a2.find(
                   (lvl) => lvl.id === (info == null ? void 0 : info.current_level)
                 )) == null ? void 0 : _b2.selected_status) == null ? void 0 : _c2.status_id) === 1 ? "approved" : ((_f2 = (_e2 = (_d2 = info == null ? void 0 : info.levels) == null ? void 0 : _d2.find(
                   (lvl) => lvl.id === (info == null ? void 0 : info.current_level)
                 )) == null ? void 0 : _e2.selected_status) == null ? void 0 : _f2.status_id) === 3 ? "rejected" : "pending";
-                const statusData = getStatus2(currentStatus);
+                const statusData = getStatus(currentStatus);
                 return /* @__PURE__ */ jsxs(
                   Card,
                   {
@@ -1460,7 +1884,7 @@ function ApprovalWorkflow({
                                     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"
+                                  children: ((_h2 = info == null ? void 0 : info.attachment_links) == null ? void 0 : _h2.length) ? `${info.attachment_links.length} file(s)` : "N/A"
                                 }
                               )
                             ] }),
@@ -1489,9 +1913,9 @@ function ApprovalWorkflow({
                                 },
                                 children: [
                                   /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: "Current Level" }),
-                                  /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { mt: 0.8 }, children: (info == null ? void 0 : info.isLevelZero) ? "L0" : "L" + (((_j = (_i = info == null ? void 0 : info.levels) == null ? void 0 : _i.findIndex(
+                                  /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { mt: 0.8 }, children: (info == null ? void 0 : info.isLevelZero) ? "L0" : "L" + (((_j2 = (_i2 = info == null ? void 0 : info.levels) == null ? void 0 : _i2.findIndex(
                                     (lvl) => lvl.id === (info == null ? void 0 : info.current_level)
-                                  )) != null ? _j : -1) + 1 || "") })
+                                  )) != null ? _j2 : -1) + 1 || "") })
                                 ]
                               }
                             ),
@@ -1507,14 +1931,14 @@ function ApprovalWorkflow({
                                   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(
+                                  (info == null ? void 0 : info.current_status) !== "completed" && ((_l2 = (_k2 = info == null ? void 0 : info.levels) == null ? void 0 : _k2.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(
+                                  )) == null ? void 0 : _l2.order) <= ((_n2 = (_m2 = info == null ? void 0 : info.levels) == null ? void 0 : _m2.find(
                                     (lvl) => {
                                       var _a3;
                                       return Number(lvl.assign_to[0]) === ((_a3 = userInfo == null ? void 0 : userInfo.userInfo) == null ? void 0 : _a3.id);
                                     }
-                                  )) == null ? void 0 : _n.order) ? /* @__PURE__ */ jsx(
+                                  )) == null ? void 0 : _n2.order) ? /* @__PURE__ */ jsx(
                                     Statusselector_default,
                                     {
                                       onSendBack: () => handleSendBack(info == null ? void 0 : info._id),
@@ -1536,17 +1960,19 @@ function ApprovalWorkflow({
                                           `${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
+                                      level: info == null ? void 0 : info.isLevelZero,
+                                      statusList: filterRejectForLevelZero(
+                                        statusList,
+                                        info
+                                      )
                                     }
                                   ) : /* @__PURE__ */ jsx(
                                     Chip,
                                     {
                                       variant: "filled",
                                       sx: {
-                                        backgroundColor: getStatus2(currentStatus).color,
-                                        color: getStatus2(currentStatus).labelColor,
+                                        backgroundColor: getStatus(currentStatus).color,
+                                        color: getStatus(currentStatus).labelColor,
                                         height: "40px",
                                         px: 2,
                                         borderRadius: "100px !important",
@@ -1604,7 +2030,7 @@ function ApprovalWorkflow({
                           children: /* @__PURE__ */ jsx(CircularProgress, { size: 36, color: "primary" })
                         }
                       ) : /* @__PURE__ */ jsx(
-                        ConnectedTimeline,
+                        CustomTimelineWithStatus,
                         {
                           events: expandedDetails == null ? void 0 : expandedDetails.map((item) => {
                             var _a3, _b3, _c3, _d3;
@@ -1617,7 +2043,8 @@ function ApprovalWorkflow({
                               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"
+                              cardType: "card",
+                              status: (item == null ? void 0 : item.type) === "approve" ? StatusObj.approved : (item == null ? void 0 : item.type) === "reject" ? StatusObj.rejected : (item == null ? void 0 : item.type) === "send_back" ? StatusObj.sendback : (item == null ? void 0 : item.type) === "onhold" ? StatusObj.onhold : null
                             };
                           })
                         }
@@ -1640,19 +2067,23 @@ function ApprovalWorkflow({
                 pb: 3
               },
               children: visiblePendingRequests == null ? void 0 : visiblePendingRequests.map((info, index) => {
-                var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h, _i, _j, _k;
+                var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2;
                 const currentLevel = (_a2 = info == null ? void 0 : info.levels) == null ? void 0 : _a2.find(
                   (level_) => level_.id === (info == null ? void 0 : info.current_level)
                 );
                 const statusList = currentLevel ? currentLevel.status_list : [];
+                const filterRejectForLevelZero = (statusList2, info2) => {
+                  if (!(info2 == null ? void 0 : info2.isLevelZero)) return statusList2;
+                  return statusList2.filter((item) => item.status !== 3);
+                };
                 const redir = buildRedirectionUrl(info);
                 const currentStatus = ((_d2 = (_c2 = (_b2 = info == null ? void 0 : info.levels) == null ? void 0 : _b2.find(
                   (lvl) => lvl.id === (info == null ? void 0 : info.current_level)
                 )) == null ? void 0 : _c2.selected_status) == null ? void 0 : _d2.status_id) === 1 ? "approved" : ((_g2 = (_f2 = (_e2 = info == null ? void 0 : info.levels) == null ? void 0 : _e2.find(
                   (lvl) => lvl.id === (info == null ? void 0 : info.current_level)
                 )) == null ? void 0 : _f2.selected_status) == null ? void 0 : _g2.status_id) === 3 ? "rejected" : "pending";
-                const statusData = getStatus2(currentStatus);
-                return /* @__PURE__ */ jsx(
+                const statusData = getStatus(currentStatus);
+                return /* @__PURE__ */ jsxs(
                   Card,
                   {
                     ref: index === visiblePendingRequests.length - 1 ? lastCardRef : null,
@@ -1663,192 +2094,229 @@ function ApprovalWorkflow({
                       px: 3,
                       py: 2
                     },
-                    children: /* @__PURE__ */ jsxs(
-                      CardContent,
-                      {
-                        sx: {
-                          display: "flex",
-                          justifyContent: "space-between",
-                          alignItems: "center",
-                          flexWrap: { xs: "wrap", md: "nowrap" },
-                          gap: 2
-                        },
-                        children: [
-                          /* @__PURE__ */ jsxs(Box, { sx: { flexBasis: "20%", minWidth: 220 }, children: [
-                            /* @__PURE__ */ jsx(Tooltip, { title: info.activityInstruction, children: /* @__PURE__ */ jsx(Typography, { variant: "h6", fontWeight: 600, noWrap: true, children: info.activity_name }) }),
-                            /* @__PURE__ */ jsx(Tooltip, { title: info.description_data, children: /* @__PURE__ */ jsx(
-                              Typography,
-                              {
-                                variant: "body2",
-                                color: "text.secondary",
-                                noWrap: true,
-                                sx: { mt: 0.5 },
-                                children: info.description_data
-                              }
-                            ) })
-                          ] }),
-                          /* @__PURE__ */ jsxs(Box, { sx: { flexBasis: "18%", minWidth: 180 }, children: [
-                            /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: "Links" }),
-                            /* @__PURE__ */ jsx(Tooltip, { title: redir, children: /* @__PURE__ */ jsx(
-                              "a",
-                              {
-                                href: redir,
-                                target: "_blank",
-                                rel: "noreferrer",
-                                style: {
-                                  cursor: "pointer",
-                                  textDecoration: "none"
-                                },
-                                children: /* @__PURE__ */ jsx(
-                                  Typography,
-                                  {
-                                    variant: "subtitle2",
-                                    color: "primary.dark",
-                                    sx: {
-                                      mt: 0.8,
-                                      lineHeight: "15.4px",
-                                      overflow: "hidden",
-                                      textOverflow: "ellipsis",
-                                      whiteSpace: "nowrap"
-                                    },
-                                    children: redir
-                                  }
-                                )
-                              }
-                            ) })
-                          ] }),
-                          /* @__PURE__ */ jsxs(Box, { sx: { flexBasis: "12%", minWidth: 120 }, children: [
-                            /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: "Attachments" }),
-                            /* @__PURE__ */ jsx(
-                              Typography,
+                    children: [
+                      /* @__PURE__ */ jsxs(
+                        CardContent,
+                        {
+                          sx: {
+                            display: "flex",
+                            justifyContent: "space-between",
+                            alignItems: "center",
+                            flexWrap: { xs: "wrap", md: "nowrap" },
+                            gap: 2
+                          },
+                          children: [
+                            /* @__PURE__ */ jsxs(Box, { sx: { flexBasis: "20%", minWidth: 220 }, children: [
+                              /* @__PURE__ */ jsx(Tooltip, { title: info.activityInstruction, children: /* @__PURE__ */ jsx(Typography, { variant: "h6", fontWeight: 600, noWrap: true, children: info.activity_name }) }),
+                              /* @__PURE__ */ jsx(Tooltip, { title: info.description_data, children: /* @__PURE__ */ jsx(
+                                Typography,
+                                {
+                                  variant: "body2",
+                                  color: "text.secondary",
+                                  noWrap: true,
+                                  sx: { mt: 0.5 },
+                                  children: info.description_data
+                                }
+                              ) })
+                            ] }),
+                            /* @__PURE__ */ jsxs(Box, { sx: { flexBasis: "18%", minWidth: 180 }, children: [
+                              /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: "Links" }),
+                              /* @__PURE__ */ jsx(Tooltip, { title: redir, children: /* @__PURE__ */ jsx(
+                                "a",
+                                {
+                                  href: redir,
+                                  target: "_blank",
+                                  rel: "noreferrer",
+                                  style: {
+                                    cursor: "pointer",
+                                    textDecoration: "none"
+                                  },
+                                  children: /* @__PURE__ */ jsx(
+                                    Typography,
+                                    {
+                                      variant: "subtitle2",
+                                      color: "primary.dark",
+                                      sx: {
+                                        mt: 0.8,
+                                        lineHeight: "15.4px",
+                                        overflow: "hidden",
+                                        textOverflow: "ellipsis",
+                                        whiteSpace: "nowrap"
+                                      },
+                                      children: redir
+                                    }
+                                  )
+                                }
+                              ) })
+                            ] }),
+                            /* @__PURE__ */ jsxs(Box, { sx: { flexBasis: "12%", minWidth: 120 }, children: [
+                              /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: "Attachments" }),
+                              /* @__PURE__ */ jsx(
+                                Typography,
+                                {
+                                  variant: "body2",
+                                  noWrap: true,
+                                  sx: {
+                                    mt: 0.8,
+                                    color: ((_h2 = info == null ? void 0 : info.attachment_links) == null ? void 0 : _h2.length) ? "primary.dark" : "text.disabled"
+                                  },
+                                  children: ((_i2 = info == null ? void 0 : info.attachment_links) == null ? void 0 : _i2.length) ? `${info.attachment_links.length} file(s)` : "N/A"
+                                }
+                              )
+                            ] }),
+                            /* @__PURE__ */ jsxs(Box, { sx: { flexBasis: "14%", minWidth: 130 }, children: [
+                              /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: "TAT" }),
+                              /* @__PURE__ */ jsx(
+                                Typography,
+                                {
+                                  variant: "body2",
+                                  sx: {
+                                    mt: 0.8,
+                                    fontWeight: 500,
+                                    color: "text.primary"
+                                  },
+                                  children: (currentLevel == null ? void 0 : currentLevel.tat_expiry) ? moment(currentLevel.tat_expiry).utcOffset("UTC+05:30").format("DD/MM/YYYY hh:mm A") : "N/A"
+                                }
+                              )
+                            ] }),
+                            /* @__PURE__ */ jsxs(
+                              Box,
                               {
-                                variant: "body2",
-                                noWrap: true,
                                 sx: {
-                                  mt: 0.8,
-                                  color: ((_h = info == null ? void 0 : info.attachment_links) == null ? void 0 : _h.length) ? "primary.dark" : "text.disabled"
+                                  flexBasis: "8%",
+                                  minWidth: 80,
+                                  textAlign: "center"
                                 },
-                                children: ((_i = info == null ? void 0 : info.attachment_links) == null ? void 0 : _i.length) ? `${info.attachment_links.length} file(s)` : "N/A"
+                                children: [
+                                  /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: "Current Level" }),
+                                  /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { mt: 0.8 }, children: (info == null ? void 0 : info.isLevelZero) ? "L0" : "L" + (((_k2 = (_j2 = info == null ? void 0 : info.levels) == null ? void 0 : _j2.findIndex(
+                                    (lvl) => lvl.id === (info == null ? void 0 : info.current_level)
+                                  )) != null ? _k2 : -1) + 1 || "") })
+                                ]
                               }
-                            )
-                          ] }),
-                          /* @__PURE__ */ jsxs(Box, { sx: { flexBasis: "14%", minWidth: 130 }, children: [
-                            /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: "TAT" }),
-                            /* @__PURE__ */ jsx(
-                              Typography,
+                            ),
+                            /* @__PURE__ */ jsxs(
+                              Box,
                               {
-                                variant: "body2",
                                 sx: {
-                                  mt: 0.8,
-                                  fontWeight: 500,
-                                  color: "text.primary"
+                                  flexBasis: "18%",
+                                  minWidth: 200,
+                                  display: "flex",
+                                  alignItems: "center",
+                                  justifyContent: "flex-end",
+                                  gap: 1.5
                                 },
-                                children: (currentLevel == null ? void 0 : currentLevel.tat_expiry) ? moment(currentLevel.tat_expiry).utcOffset("UTC+05:30").format("DD/MM/YYYY hh:mm A") : "N/A"
-                              }
-                            )
-                          ] }),
-                          /* @__PURE__ */ jsxs(
-                            Box,
-                            {
-                              sx: {
-                                flexBasis: "8%",
-                                minWidth: 80,
-                                textAlign: "center"
-                              },
-                              children: [
-                                /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: "Current Level" }),
-                                /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { mt: 0.8 }, children: (info == null ? void 0 : info.isLevelZero) ? "L0" : "L" + (((_k = (_j = info == null ? void 0 : info.levels) == null ? void 0 : _j.findIndex(
-                                  (lvl) => lvl.id === (info == null ? void 0 : info.current_level)
-                                )) != null ? _k : -1) + 1 || "") })
-                              ]
-                            }
-                          ),
-                          /* @__PURE__ */ jsxs(
-                            Box,
-                            {
-                              sx: {
-                                flexBasis: "18%",
-                                minWidth: 200,
-                                display: "flex",
-                                alignItems: "center",
-                                justifyContent: "flex-end",
-                                gap: 1.5
-                              },
-                              children: [
-                                (info == null ? void 0 : info.current_status) !== "completed" ? /* @__PURE__ */ jsx(
-                                  Statusselector_default,
-                                  {
-                                    onSendBack: () => handleSendBack(info == null ? void 0 : info._id),
-                                    onApprove: () => {
-                                      var _a3;
-                                      return handleApprove(
-                                        `${info == null ? void 0 : info._id}|${(_a3 = statusList.find((i) => i.status == 1)) == null ? void 0 : _a3.id}`
-                                      );
-                                    },
-                                    onReject: () => {
-                                      var _a3;
-                                      return handleReject(
-                                        `${info == null ? void 0 : info._id}|${(_a3 = statusList.find((i) => i.status == 3)) == null ? void 0 : _a3.id}|${info == null ? void 0 : info.reasons}`
-                                      );
-                                    },
-                                    onHold: () => {
-                                      var _a3;
-                                      return handleOnHold(
-                                        `${info == null ? void 0 : info._id}|${(_a3 = statusList.find((i) => i.status == 2)) == null ? void 0 : _a3.id}`
-                                      );
-                                    },
-                                    statusList
-                                  }
-                                ) : /* @__PURE__ */ jsx(
-                                  Chip,
-                                  {
-                                    variant: "filled",
-                                    sx: {
-                                      backgroundColor: statusData.color,
-                                      color: statusData.labelColor,
-                                      height: "40px",
-                                      px: 2,
-                                      borderRadius: "100px !important",
-                                      "& .MuiChip-label": {
-                                        fontSize: "14px",
-                                        lineHeight: "15.4px",
-                                        fontWeight: "500",
-                                        textTransform: "capitalize"
+                                children: [
+                                  (info == null ? void 0 : info.current_status) !== "completed" ? /* @__PURE__ */ jsx(
+                                    Statusselector_default,
+                                    {
+                                      onSendBack: () => handleSendBack(info == null ? void 0 : info._id),
+                                      onApprove: () => {
+                                        var _a3;
+                                        return handleApprove(
+                                          `${info == null ? void 0 : info._id}|${(_a3 = statusList.find((i) => i.status == 1)) == null ? void 0 : _a3.id}`
+                                        );
+                                      },
+                                      onReject: () => {
+                                        var _a3;
+                                        return handleReject(
+                                          `${info == null ? void 0 : info._id}|${(_a3 = statusList.find((i) => i.status == 3)) == null ? void 0 : _a3.id}|${info == null ? void 0 : info.reasons}`
+                                        );
+                                      },
+                                      onHold: () => {
+                                        var _a3;
+                                        return handleOnHold(
+                                          `${info == null ? void 0 : info._id}|${(_a3 = statusList.find((i) => i.status == 2)) == null ? void 0 : _a3.id}`
+                                        );
+                                      },
+                                      level: info == null ? void 0 : info.isLevelZero,
+                                      statusList: filterRejectForLevelZero(
+                                        statusList,
+                                        info
+                                      )
+                                    }
+                                  ) : /* @__PURE__ */ jsx(
+                                    Chip,
+                                    {
+                                      variant: "filled",
+                                      sx: {
+                                        backgroundColor: statusData.color,
+                                        color: statusData.labelColor,
+                                        height: "40px",
+                                        px: 2,
+                                        borderRadius: "100px !important",
+                                        "& .MuiChip-label": {
+                                          fontSize: "14px",
+                                          lineHeight: "15.4px",
+                                          fontWeight: "500",
+                                          textTransform: "capitalize"
+                                        }
+                                      },
+                                      label: statusData.title
+                                    }
+                                  ),
+                                  /* @__PURE__ */ jsx(
+                                    Divider,
+                                    {
+                                      orientation: "vertical",
+                                      flexItem: true,
+                                      sx: {
+                                        borderColor: "#E0E0E0",
+                                        height: "40px"
                                       }
-                                    },
-                                    label: statusData.title
-                                  }
-                                ),
-                                /* @__PURE__ */ jsx(
-                                  Divider,
-                                  {
-                                    orientation: "vertical",
-                                    flexItem: true,
-                                    sx: {
-                                      borderColor: "#E0E0E0",
-                                      height: "40px"
                                     }
-                                  }
-                                ),
-                                /* @__PURE__ */ jsx(
-                                  IconButton,
-                                  {
-                                    color: "primary",
-                                    sx: {
-                                      background: "rgba(25,118,210,0.08)",
-                                      boxShadow: "2px 2px 10px 0px #4C4E6426",
-                                      "& span": { color: "primary.dark" }
-                                    },
-                                    onClick: () => handleExpandClick(info._id),
-                                    children: expandedId === info._id ? /* @__PURE__ */ jsx("span", { className: "icon-arrow-down-1" }) : /* @__PURE__ */ jsx("span", { className: "icon-arrow-right-3" })
-                                  }
-                                )
-                              ]
-                            }
-                          )
-                        ]
-                      }
-                    )
+                                  ),
+                                  /* @__PURE__ */ jsx(
+                                    IconButton,
+                                    {
+                                      color: "primary",
+                                      sx: {
+                                        background: "rgba(25,118,210,0.08)",
+                                        boxShadow: "2px 2px 10px 0px #4C4E6426",
+                                        "& span": { color: "primary.dark" }
+                                      },
+                                      onClick: () => handleExpandClick(info._id),
+                                      children: expandedId === info._id ? /* @__PURE__ */ jsx("span", { className: "icon-arrow-down-1" }) : /* @__PURE__ */ jsx("span", { className: "icon-arrow-right-3" })
+                                    }
+                                  )
+                                ]
+                              }
+                            )
+                          ]
+                        }
+                      ),
+                      expandedId === info._id && /* @__PURE__ */ jsx(Box, { sx: { mt: 2, ml: 2 }, children: !(expandedDetails == null ? void 0 : expandedDetails.length) ? /* @__PURE__ */ jsx(
+                        Box,
+                        {
+                          sx: {
+                            height: 150,
+                            display: "flex",
+                            justifyContent: "center",
+                            alignItems: "center"
+                          },
+                          children: /* @__PURE__ */ jsx(CircularProgress, { size: 36, color: "primary" })
+                        }
+                      ) : /* @__PURE__ */ jsx(
+                        CustomTimelineWithStatus,
+                        {
+                          events: expandedDetails == null ? void 0 : expandedDetails.map((item) => {
+                            var _a3, _b3, _c3, _d3;
+                            return {
+                              date: moment(item == null ? void 0 : item.created_at).format(
+                                "DD-MM-YYYY"
+                              ),
+                              time: moment(item == null ? void 0 : item.created_at).format("HH:mm"),
+                              title: (item == null ? void 0 : item.type) === "create" ? `Raised by - ${(_a3 = item == null ? void 0 : item.created_by_user) == null ? void 0 : _a3.full_name}` : ((_b3 = item == null ? void 0 : item.created_by_user) == null ? void 0 : _b3.full_name) || "N/A",
+                              subTitle: ((_c3 = item == null ? void 0 : item.comment_reasons) == null ? void 0 : _c3.comment) || "No Comments",
+                              attachment: ((_d3 = item == null ? void 0 : item.comment_reasons) == null ? void 0 : _d3.file) || null,
+                              count: (item == null ? void 0 : item.current_level) == "L0" ? "L0" : item == null ? void 0 : item.current_level_count,
+                              cardType: "card",
+                              status: (item == null ? void 0 : item.type) === "approve" ? StatusObj.approved : (item == null ? void 0 : item.type) === "reject" ? StatusObj.rejected : (item == null ? void 0 : item.type) === "send_back" ? StatusObj.sendback : (item == null ? void 0 : item.type) === "onhold" ? StatusObj.onhold : null
+                            };
+                          })
+                        }
+                      ) })
+                    ]
                   },
                   index
                 );
@@ -1873,8 +2341,8 @@ function ApprovalWorkflow({
         openModal: !!approveTarget,
         closeModal: () => setApproveTarget(null),
         header: "Approve",
-        workflowLogId: (_a = approveTarget == null ? void 0 : approveTarget.split("|")) == null ? void 0 : _a[0],
-        statusId: (_b = approveTarget == null ? void 0 : approveTarget.split("|")) == null ? void 0 : _b[1]
+        workflowLogId: (_m = approveTarget == null ? void 0 : approveTarget.split("|")) == null ? void 0 : _m[0],
+        statusId: (_n = approveTarget == null ? void 0 : approveTarget.split("|")) == null ? void 0 : _n[1]
       }
     ),
     /* @__PURE__ */ jsx(
@@ -1883,9 +2351,9 @@ function ApprovalWorkflow({
         openModal: !!rejectTarget,
         closeModal: () => setRejectTarget(null),
         header: "Reject",
-        workflowLogId: (_c = rejectTarget == null ? void 0 : rejectTarget.split("|")) == null ? void 0 : _c[0],
-        statusId: (_d = rejectTarget == null ? void 0 : rejectTarget.split("|")) == null ? void 0 : _d[1],
-        rejection_reason_master: (_e = rejectTarget == null ? void 0 : rejectTarget.split("|")) == null ? void 0 : _e[2]
+        workflowLogId: (_o = rejectTarget == null ? void 0 : rejectTarget.split("|")) == null ? void 0 : _o[0],
+        statusId: (_p = rejectTarget == null ? void 0 : rejectTarget.split("|")) == null ? void 0 : _p[1],
+        rejection_reason_master: (_q = rejectTarget == null ? void 0 : rejectTarget.split("|")) == null ? void 0 : _q[2]
       }
     ),
     /* @__PURE__ */ jsx(
@@ -1894,8 +2362,8 @@ function ApprovalWorkflow({
         openModal: !!onHoldTarget,
         closeModal: () => setOnHoldTarget(null),
         header: "On Hold",
-        workflowLogId: (_f = onHoldTarget == null ? void 0 : onHoldTarget.split("|")) == null ? void 0 : _f[0],
-        statusId: (_g = onHoldTarget == null ? void 0 : onHoldTarget.split("|")) == null ? void 0 : _g[1]
+        workflowLogId: (_r = onHoldTarget == null ? void 0 : onHoldTarget.split("|")) == null ? void 0 : _r[0],
+        statusId: (_s = onHoldTarget == null ? void 0 : onHoldTarget.split("|")) == null ? void 0 : _s[1]
       }
     )
   ] });