amp-workflow-ui 0.1.2 → 0.1.3

package/dist/index.mjs

@@ -6,7 +6,7 @@ import { 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, Typography, IconButton, useTheme as useTheme$1, Tooltip, Card, CardContent, Divider, CircularProgress, Box as Box$1, TextField, InputAdornment, Button, Menu, MenuItem, Grid, DialogTitle, DialogActions, FormControl, InputLabel, Select } from '@mui/material';
+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 HighlightOffIcon from '@mui/icons-material/HighlightOff';
 import { Box } from '@mui/system';
 import moment from 'moment';
@@ -70,7 +70,12 @@ var ActionMenu = ({
   ] });
 };
 var Statusselector_default = ActionMenu;
-function SendBackDialog({ openModal, closeModal, header, workflowLogId }) {
+function SendBackDialog({
+  openModal,
+  closeModal,
+  header,
+  workflowLogId
+}) {
   const { userInfo, api } = useWorkflowContext();
   const [comment, setComment] = useState("");
   const [selectedFile, setSelectedFile] = useState(null);
@@ -88,7 +93,9 @@ function SendBackDialog({ openModal, closeModal, header, workflowLogId }) {
     const formData = new FormData();
     formData.append("file", file);
     try {
-      const response = await api.post("/workflow/upload-document", formData, {
+      const response = await api.post({
+        url: "/workflow/upload-document",
+        data: formData,
         headers: { "Content-Type": "multipart/form-data" }
       });
       setFileName(response.data.file);
@@ -124,10 +131,14 @@ function SendBackDialog({ openModal, closeModal, header, workflowLogId }) {
     if (!validateFields()) return;
     setLoading(true);
     try {
-      const res = await api.post(`/workflow/send-back/${workflowLogId}`, {
-        comment,
-        file: selectedFile,
-        created_by: (_a = userInfo == null ? void 0 : userInfo.userInfo) == null ? void 0 : _a.id
+      const res = await api.post({
+        url: `/workflow/send-back/${workflowLogId}`,
+        data: {
+          comment,
+          file: selectedFile,
+          created_by: (_a = userInfo == null ? void 0 : userInfo.userInfo) == null ? void 0 : _a.id
+        },
+        serviceURL: "api"
       });
       if ((res == null ? void 0 : res.status) === 200) toast.success("Successfully sent back!");
       if ((_b = res == null ? void 0 : res.error) == null ? void 0 : _b.message) {
@@ -140,50 +151,107 @@ function SendBackDialog({ openModal, closeModal, header, workflowLogId }) {
       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__ */ jsxs(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__ */ jsxs(Grid, { item: true, xs: 12, children: [
-        /* @__PURE__ */ jsx(
-          TextField,
+  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,
           {
-            type: "text",
-            fullWidth: true,
-            label: "Attachment",
-            placeholder: "Attachment",
-            InputProps: {
-              endAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx("span", { className: "icon-export-1" }) })
+            sx: {
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center"
             },
-            onClick: handleAttachment,
-            value: fileName,
-            error: !!error.file,
-            helperText: error.file
+            children: [
+              /* @__PURE__ */ 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("input", { 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(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,
+            {
+              fullWidth: true,
+              label: "Comment",
+              value: comment,
+              placeholder: "Comment Here",
+              onChange: (e) => setComment(e.target.value),
+              required: true,
+              error: !!error.comment,
+              helperText: error.comment
+            }
+          ) }),
+          /* @__PURE__ */ jsxs(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
+              }
+            )
+          ] })
+        ] }) }) }),
+        /* @__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"
+                }
+              )
+            ]
+          }
+        ) })
+      ]
+    }
+  );
 }
 var SendBackDialog_default = SendBackDialog;
 function ApproveDialog({ openModal, closeModal, header, workflowLogId, statusId }) {
@@ -354,31 +422,6 @@ function OnHoldDialog({ openModal, closeModal, header, workflowLogId, statusId }
   ] });
 }
 var OnHoldDialog_default = OnHoldDialog;
-var Bull = ({
-  count,
-  isDisabled
-}) => {
-  const theme = useTheme$1();
-  const color = isDisabled ? theme.palette.success.main : theme.palette.primary.main;
-  return /* @__PURE__ */ jsx(
-    Box$1,
-    {
-      sx: {
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        width: 32,
-        height: 32,
-        borderRadius: "50%",
-        border: `2px solid ${color}`,
-        color,
-        fontWeight: 600,
-        fontSize: 14
-      },
-      children: count
-    }
-  );
-};
 var getStatus = (status, theme) => {
   const s = status == null ? void 0 : status.toLowerCase();
   const colors = {
@@ -396,7 +439,7 @@ var getStatus = (status, theme) => {
   };
   return colors[s] || colors.pending;
 };
-function CustomTimelineWithStatus({ events }) {
+function ConnectedTimeline({ events }) {
   const { api } = useWorkflowContext();
   const theme = useTheme$1();
   const [isMobile, setIsMobile] = useState(false);
@@ -412,126 +455,210 @@ function CustomTimelineWithStatus({ events }) {
       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 += 4) rows.push(events.slice(i, i + 4));
-  return /* @__PURE__ */ jsx(Box$1, { sx: { p: 2 }, children: rows.map((row, rowIndex) => /* @__PURE__ */ jsx(
-    Box$1,
-    {
-      sx: {
-        display: "flex",
-        flexDirection: isMobile ? "column" : rowIndex % 2 === 0 ? "row" : "row-reverse",
-        gap: isMobile ? 3 : 6,
-        alignItems: "center",
-        mb: 6
-      },
-      children: row.map((event, index) => {
-        var _a;
-        const status = getStatus((_a = event.status) == null ? void 0 : _a.title, theme);
-        const isDisabled = event.cardType === "disableCard";
-        return /* @__PURE__ */ jsx(Grid, { item: true, xs: isMobile ? 12 : 3, children: /* @__PURE__ */ jsx(
-          Card,
-          {
-            variant: "outlined",
-            sx: {
-              width: "100%",
-              borderRadius: 3,
-              p: 2,
-              borderColor: isDisabled ? theme.palette.success.main : theme.palette.divider,
-              backgroundColor: isDisabled ? theme.palette.action.hover : theme.palette.background.paper,
-              textAlign: "center",
-              boxShadow: 2,
-              "&:hover": { boxShadow: 5 }
-            },
-            children: /* @__PURE__ */ 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
+  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,
+      {
+        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(
+            Box$1,
+            {
+              sx: {
+                position: "relative",
+                display: "flex",
+                justifyContent: "center",
+                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,
+                  {
+                    sx: {
+                      position: "absolute",
+                      bottom: "-48px",
+                      left: reversed ? "0%" : "100%",
+                      width: "2px",
+                      height: "48px",
+                      background: theme.palette.primary.main,
+                      zIndex: 0
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Card,
+                  {
+                    sx: {
+                      width: "230px",
+                      minHeight: "180px",
+                      borderRadius: "16px",
+                      border: `1px solid ${isDisabled ? theme.palette.success.light : theme.palette.divider}`,
+                      backgroundColor: isDisabled ? theme.palette.action.hover : theme.palette.background.paper,
+                      textAlign: "center",
+                      boxShadow: "0px 4px 10px rgba(0,0,0,0.05)",
+                      transition: "all 0.25s ease-in-out",
+                      "&:hover": {
+                        boxShadow: "0px 6px 14px rgba(0,0,0,0.1)",
+                        transform: "translateY(-2px)"
                       }
-                    ),
-                    event.status && /* @__PURE__ */ jsx(
-                      Chip,
-                      {
-                        label: event.status.title,
-                        sx: {
-                          backgroundColor: status.bg,
-                          color: status.text,
-                          fontSize: 12,
-                          height: 26,
+                    },
+                    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,
-                          borderRadius: "16px"
+                          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(Bull, { count: event.count, isDisabled }),
-              /* @__PURE__ */ jsx(
-                Typography,
-                {
-                  variant: "subtitle1",
-                  fontWeight: 600,
-                  color: isDisabled ? theme.palette.text.secondary : theme.palette.text.primary,
-                  sx: { mt: 2, mb: 0.5 },
-                  children: event.title
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                Typography,
-                {
-                  variant: "body2",
-                  color: theme.palette.text.secondary,
-                  sx: { mb: 1 },
-                  children: event.subTitle
-                }
-              ),
-              event.attachment && /* @__PURE__ */ jsx(Tooltip, { title: "View attachment", children: /* @__PURE__ */ jsx(
-                Typography,
-                {
-                  variant: "body2",
-                  sx: {
-                    color: theme.palette.primary.main,
-                    cursor: "pointer",
-                    fontWeight: 500,
-                    textDecoration: "underline",
-                    "&:hover": {
-                      color: theme.palette.primary.dark
-                    }
-                  },
-                  onClick: () => handleAttachmentClick(event.attachment),
-                  children: "Attachment"
-                }
-              ) }),
-              /* @__PURE__ */ jsx(
-                Typography,
-                {
-                  variant: "caption",
-                  display: "block",
-                  color: theme.palette.text.disabled,
-                  sx: { mt: 2 },
-                  children: event.time
-                }
-              )
-            ] })
-          }
-        ) }, index);
-      })
-    },
-    rowIndex
-  )) });
+                      ) }),
+                      /* @__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,
+                        {
+                          variant: "body2",
+                          sx: {
+                            color: theme.palette.primary.main,
+                            cursor: "pointer",
+                            textDecoration: "underline",
+                            fontWeight: 500,
+                            "&:hover": {
+                              color: theme.palette.primary.dark
+                            }
+                          },
+                          onClick: () => handleAttachmentClick(event.attachment),
+                          children: "Attachment"
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsx(
+                        Typography,
+                        {
+                          variant: "caption",
+                          display: "block",
+                          color: theme.palette.text.disabled,
+                          sx: { mt: 1 },
+                          children: event.time
+                        }
+                      )
+                    ] })
+                  }
+                )
+              ]
+            },
+            index
+          );
+        })
+      },
+      rowIndex
+    );
+  }) });
 }
 var useDebounce = (value, delay) => {
   const [debouncedValue, setDebouncedValue] = useState(value);
@@ -577,15 +704,15 @@ var SearchBox = ({
 };
 var SearchBox_default = SearchBox;
 var StyledChipProps = styled(Chip)(({ theme }) => {
-  var _a, _b, _c, _d, _e, _f, _g;
+  var _a, _b, _c;
   return {
     "&.MuiChip-colorPrimary": {
       border: `1px solid ${theme.palette.primary.dark}`,
       borderRadius: "8px",
       height: "36px",
       padding: "6px 4px",
-      background: `${(_b = (_a = theme.palette.customColors) == null ? void 0 : _a.customChipBackgroundColor) != null ? _b : "rgba(25,118,210,0.1)"}`,
-      color: `${(_d = (_c = theme.palette.customColors) == null ? void 0 : _c.customChipColor) != null ? _d : theme.palette.primary.dark}`,
+      background: `${"rgba(25,118,210,0.1)"}`,
+      color: `${theme.palette.primary.dark}`,
       width: "170px",
       overflow: "hidden",
       whiteSpace: "nowrap",
@@ -597,7 +724,7 @@ var StyledChipProps = styled(Chip)(({ theme }) => {
       height: "36px",
       padding: "6px 4px",
       background: "none !important",
-      color: `${(_g = (_f = (_e = theme.palette) == null ? void 0 : _e.customColors) == null ? void 0 : _f.mainText) != null ? _g : theme.palette.text.primary} `,
+      color: `${(_c = (_b = (_a = theme.palette) == null ? void 0 : _a.customColors) == null ? void 0 : _b.mainText) != null ? _c : theme.palette.text.primary} `,
       width: "170px",
       overflow: "hidden",
       whiteSpace: "nowrap",
@@ -605,15 +732,6 @@ var StyledChipProps = styled(Chip)(({ theme }) => {
     }
   };
 });
-styled(Typography)(({ theme }) => ({
-  overflow: "hidden",
-  textOverflow: "ellipsis",
-  whiteSpace: "nowrap",
-  width: "200px",
-  [theme.breakpoints.down("sm")]: {
-    width: "80px"
-  }
-}));
 function ApprovalWorkflow({
   selectedWorkflowsList = [],
   userInfo
@@ -630,12 +748,14 @@ function ApprovalWorkflow({
   const [rejectTarget, setRejectTarget] = React7.useState(null);
   const [onHoldTarget, setOnHoldTarget] = React7.useState(null);
   const [expandedDetails, setExpandedDetails] = useState([]);
-  const [statusCount, setStatusCount] = useState({});
   const [urlConfig, setUrlConfig] = useState({});
   const [allRequestArray, setAllRequestArray] = useState([]);
   const [pendingRequestArray, setPendingRequestArray] = useState([]);
   const [selectedRequestArray, setSelectedRequestArray] = useState([]);
   const [isLoading, setIsLoading] = useState(false);
+  const [visibleAll, setVisibleAll] = useState(10);
+  const [visiblePending, setVisiblePending] = useState(10);
+  const [visibleSelected, setVisibleSelected] = useState(10);
   const [searchText, setSearchText] = useState("");
   const handleClearSearch = useCallback(() => {
     setSearchText("");
@@ -671,6 +791,35 @@ function ApprovalWorkflow({
       return name.includes(q) || desc.includes(q);
     });
   }, [pendingRequestArray, debouncedSearchTerm]);
+  const observer = React7.useRef(null);
+  const lastCardRef = useCallback(
+    (node) => {
+      if (isLoading) return;
+      if (observer.current) observer.current.disconnect();
+      observer.current = new IntersectionObserver((entries) => {
+        if (entries[0].isIntersecting) {
+          if (selectedApprovalOtions === "All Requests") {
+            setVisibleAll((prev) => prev + 10);
+          } else if (selectedApprovalOtions === "Action Required") {
+            setVisiblePending((prev) => prev + 10);
+          } else if (selectedApprovalOtions === "selected") {
+            setVisibleSelected((prev) => prev + 10);
+          }
+        }
+      });
+      if (node) observer.current.observe(node);
+    },
+    [isLoading, selectedApprovalOtions]
+  );
+  const visibleAllRequests = filteredAllRequestArray.slice(0, visibleAll);
+  const visiblePendingRequests = filteredPendingRequestArray.slice(
+    0,
+    visiblePending
+  );
+  const visibleSelectedRequests = filteredSelectedRequestArray.slice(
+    0,
+    visibleSelected
+  );
   const handleSendBack = (workflowLogId) => {
     setSendDialog(workflowLogId);
   };
@@ -744,12 +893,12 @@ function ApprovalWorkflow({
     {
       label: "Action Required",
       icon: /* @__PURE__ */ jsx("span", { className: "icon-document-forward" }),
-      count: (statusCount == null ? void 0 : statusCount.pending_activities_count) || ""
+      count: pendingRequestArray.length || ""
     },
     {
       label: "All Requests",
       icon: /* @__PURE__ */ jsx("span", { className: "icon-document-copy" }),
-      count: (statusCount == null ? void 0 : statusCount.total_activities_count) || ""
+      count: allRequestArray.length || ""
     }
   ];
   const fetchExpandedActivityLogs = (workflowLogId) => {
@@ -789,20 +938,9 @@ function ApprovalWorkflow({
       data: { workflowIds: selectedWorkflowsList }
     }).then((res) => setSelectedRequestArray(res == null ? void 0 : res.data)).finally(() => setIsLoading(false));
   };
-  const fetchStatusCount = () => {
-    var _a2;
-    api.get({
-      url: `/workflow/status-count/${(_a2 = userInfo == null ? void 0 : userInfo.userInfo) == null ? void 0 : _a2.id}`,
-      serviceURL: "api"
-    }).then((res) => {
-      var _a3;
-      setStatusCount((_a3 = res == null ? void 0 : res.data) == null ? void 0 : _a3[0]);
-    });
-  };
   useEffect(() => {
     if (!sendDialog && !approveTarget && !onHoldTarget && !rejectTarget) {
       fetchAllActivites();
-      fetchStatusCount();
       fetchPendingActivities();
       setExpandedDetails([]);
       setExpandedId(null);
@@ -843,28 +981,6 @@ function ApprovalWorkflow({
     return "#";
   };
   if (isLoading && loadingComponent) return /* @__PURE__ */ jsx(Fragment, { children: loadingComponent });
-  ({
-    approved: {
-      color: theme.palette.success.light,
-      labelColor: theme.palette.success.main
-    },
-    rejected: {
-      color: theme.palette.success.light,
-      labelColor: theme.palette.success.main
-    },
-    onhold: {
-      color: theme.palette.success.light,
-      labelColor: theme.palette.success.main
-    },
-    sendback: {
-      color: theme.palette.success.light,
-      labelColor: theme.palette.success.main
-    },
-    pending: {
-      color: theme.palette.success.light,
-      labelColor: theme.palette.success.main
-    }
-  });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       Box,
@@ -934,7 +1050,7 @@ function ApprovalWorkflow({
                 px: 2,
                 pb: 3
               },
-              children: filteredSelectedRequestArray == null ? void 0 : filteredSelectedRequestArray.map((info, index) => {
+              children: visibleSelectedRequests == null ? void 0 : visibleSelectedRequests.map((info, index) => {
                 var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h, _i, _j, _k, _l, _m, _n, _o;
                 const currentLevel = info == null ? void 0 : info.levels.find(
                   (level_) => level_.id === (info == null ? void 0 : info.current_level)
@@ -957,6 +1073,7 @@ function ApprovalWorkflow({
                 return /* @__PURE__ */ jsxs(
                   Card,
                   {
+                    ref: index === visibleSelectedRequests.length - 1 ? lastCardRef : null,
                     sx: {
                       mb: 3,
                       borderRadius: "14px",
@@ -1176,7 +1293,7 @@ function ApprovalWorkflow({
                           children: /* @__PURE__ */ jsx(CircularProgress, { size: 36, color: "primary" })
                         }
                       ) : /* @__PURE__ */ jsx(
-                        CustomTimelineWithStatus,
+                        ConnectedTimeline,
                         {
                           events: expandedDetails == null ? void 0 : expandedDetails.map((item) => {
                             var _a3, _b3, _c3, _d3;
@@ -1211,7 +1328,7 @@ function ApprovalWorkflow({
                 px: 2,
                 pb: 3
               },
-              children: filteredAllRequestArray == null ? void 0 : filteredAllRequestArray.map((info, index) => {
+              children: visibleAllRequests == null ? void 0 : visibleAllRequests.map((info, index) => {
                 var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h, _i, _j, _k, _l, _m, _n, _o;
                 const currentLevel = info == null ? void 0 : info.levels.find(
                   (level_) => level_.id === (info == null ? void 0 : info.current_level)
@@ -1234,6 +1351,7 @@ function ApprovalWorkflow({
                 return /* @__PURE__ */ jsxs(
                   Card,
                   {
+                    ref: index === visibleAllRequests.length - 1 ? lastCardRef : null,
                     sx: {
                       mb: 3,
                       borderRadius: "14px",
@@ -1460,7 +1578,7 @@ function ApprovalWorkflow({
                           children: /* @__PURE__ */ jsx(CircularProgress, { size: 36, color: "primary" })
                         }
                       ) : /* @__PURE__ */ jsx(
-                        CustomTimelineWithStatus,
+                        ConnectedTimeline,
                         {
                           events: expandedDetails == null ? void 0 : expandedDetails.map((item) => {
                             var _a3, _b3, _c3, _d3;
@@ -1495,7 +1613,7 @@ function ApprovalWorkflow({
                 px: 2,
                 pb: 3
               },
-              children: filteredPendingRequestArray == null ? void 0 : filteredPendingRequestArray.map((info, index) => {
+              children: visiblePendingRequests == null ? void 0 : visiblePendingRequests.map((info, index) => {
                 var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h, _i, _j, _k, _l;
                 const currentLevel = (_a2 = info == null ? void 0 : info.levels) == null ? void 0 : _a2.find(
                   (level_) => level_.id === (info == null ? void 0 : info.current_level)
@@ -1518,6 +1636,7 @@ function ApprovalWorkflow({
                 return /* @__PURE__ */ jsxs(
                   Card,
                   {
+                    ref: index === visiblePendingRequests.length - 1 ? lastCardRef : null,
                     sx: {
                       mb: 3,
                       borderRadius: "14px",
@@ -1691,7 +1810,7 @@ function ApprovalWorkflow({
                           children: /* @__PURE__ */ jsx(CircularProgress, { size: 36, color: "primary" })
                         }
                       ) : /* @__PURE__ */ jsx(
-                        CustomTimelineWithStatus,
+                        ConnectedTimeline,
                         {
                           events: expandedDetails == null ? void 0 : expandedDetails.map((item) => {
                             var _a3, _b3, _c3, _d3;