amp-workflow-ui 0.1.27 → 0.1.29

package/dist/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var React7 = require('react');
+var React2 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var Dialog = require('@mui/material/Dialog');
 var useMediaQuery = require('@mui/material/useMediaQuery');
@@ -17,7 +17,7 @@ var KeyboardArrowDownIcon = require('@mui/icons-material/KeyboardArrowDown');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React7__default = /*#__PURE__*/_interopDefault(React7);
+var React2__default = /*#__PURE__*/_interopDefault(React2);
 var Dialog__default = /*#__PURE__*/_interopDefault(Dialog);
 var useMediaQuery__default = /*#__PURE__*/_interopDefault(useMediaQuery);
 var DialogActions6__default = /*#__PURE__*/_interopDefault(DialogActions6);
@@ -28,7 +28,7 @@ var CloseIcon__default = /*#__PURE__*/_interopDefault(CloseIcon);
 var KeyboardArrowDownIcon__default = /*#__PURE__*/_interopDefault(KeyboardArrowDownIcon);
 
 // src/context.tsx
-var WorkflowContext = React7.createContext(null);
+var WorkflowContext = React2.createContext(null);
 function WorkflowProvider({
   value,
   children
@@ -36,7 +36,7 @@ function WorkflowProvider({
   return /* @__PURE__ */ jsxRuntime.jsx(WorkflowContext.Provider, { value, children });
 }
 function useWorkflowContext() {
-  const ctx = React7.useContext(WorkflowContext);
+  const ctx = React2.useContext(WorkflowContext);
   if (!ctx) {
     throw new Error("useWorkflowContext must be used within WorkflowProvider");
   }
@@ -296,8 +296,7 @@ function WorkflowRequestCard({
   userInfo,
   helpers
 }) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w;
-  console.log("\u{1F680} ~ WorkflowRequestCard ~ requestDetails:", requestDetails);
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
   const { timeLeftDHm, getStatus, buildRedirectionUrl } = helpers;
   const userDetails = userInfo == null ? void 0 : userInfo.userInfo;
   const matchAssigneeUserLevel = ((_b = (_a = requestDetails == null ? void 0 : requestDetails.levels) == null ? void 0 : _a.find(
@@ -312,19 +311,25 @@ function WorkflowRequestCard({
       return ((_a2 = level_.escalate_assign_to) == null ? void 0 : _a2[0]) === (userDetails == null ? void 0 : userDetails.id);
     }
   )) == null ? void 0 : _d.id) === (requestDetails == null ? void 0 : requestDetails.current_level);
-  const matchUserInAnyLevel = (_e = requestDetails == null ? void 0 : requestDetails.levels) == null ? void 0 : _e.find(
+  const loggedInUserLevel = (_e = requestDetails == null ? void 0 : requestDetails.levels) == null ? void 0 : _e.findIndex(
     (level_) => {
       var _a2, _b2;
-      return ((_a2 = level_.escalate_assign_to) == null ? void 0 : _a2[0]) === (userDetails == null ? void 0 : userDetails.id) || ((_b2 = level_.assign_to) == null ? void 0 : _b2[0]) === (userDetails == null ? void 0 : userDetails.id);
+      return ((_a2 = level_.escalate_assign_to) == null ? void 0 : _a2[1]) === (requestDetails == null ? void 0 : requestDetails.current_level) || ((_b2 = level_.assign_to) == null ? void 0 : _b2[0]) === (requestDetails == null ? void 0 : requestDetails.current_level);
     }
   );
-  const allCurrentAssignees = (_f = requestDetails == null ? void 0 : requestDetails.levels) == null ? void 0 : _f.map(
+  const matchUserInAnyLevel = (_f = requestDetails == null ? void 0 : requestDetails.levels) == null ? void 0 : _f.find(
+    (level_, i) => {
+      var _a2, _b2;
+      return loggedInUserLevel >= i && ((_a2 = level_.escalate_assign_to) == null ? void 0 : _a2[1]) === (requestDetails == null ? void 0 : requestDetails.current_level) || ((_b2 = level_.assign_to) == null ? void 0 : _b2[0]) === (requestDetails == null ? void 0 : requestDetails.current_level);
+    }
+  );
+  const allCurrentAssignees = (_g = requestDetails == null ? void 0 : requestDetails.levels) == null ? void 0 : _g.map(
     (level) => {
       var _a2;
       return (_a2 = level == null ? void 0 : level.assign_to_name) == null ? void 0 : _a2[0];
     }
   );
-  const allCurrentEscalatedAssignees = (_g = requestDetails == null ? void 0 : requestDetails.levels) == null ? void 0 : _g.map(
+  const allCurrentEscalatedAssignees = (_h = requestDetails == null ? void 0 : requestDetails.levels) == null ? void 0 : _h.map(
     (level) => {
       var _a2;
       return timeLeftDHm(level == null ? void 0 : level.tat_expiry) === "0d: 0h: 0m" ? (_a2 = level == null ? void 0 : level.escalate_assign_to_name) == null ? void 0 : _a2[0] : "";
@@ -333,7 +338,7 @@ function WorkflowRequestCard({
   const allAssignees = [
     .../* @__PURE__ */ new Set([...allCurrentAssignees, ...allCurrentEscalatedAssignees])
   ].filter((item) => item);
-  const currentLevel = (_h = requestDetails == null ? void 0 : requestDetails.levels) == null ? void 0 : _h.find(
+  const currentLevel = (_i = requestDetails == null ? void 0 : requestDetails.levels) == null ? void 0 : _i.find(
     (level_) => level_.id === (requestDetails == null ? void 0 : requestDetails.current_level)
   );
   const currentlyAssignedUserArray = (currentLevel == null ? void 0 : currentLevel.assign_to_name) || [];
@@ -348,22 +353,20 @@ function WorkflowRequestCard({
     return statusList2 == null ? void 0 : statusList2.filter((item) => item.status !== 3);
   };
   const redirectionUrl = buildRedirectionUrl(requestDetails);
-  console.log("\u{1F680} ~ WorkflowRequestCard ~ redirectionUrl:", redirectionUrl);
-  const currentStatus = ((_k = (_j = (_i = requestDetails == null ? void 0 : requestDetails.levels) == null ? void 0 : _i.find(
+  const currentStatus = ((_l = (_k = (_j = requestDetails == null ? void 0 : requestDetails.levels) == null ? void 0 : _j.find(
     (lvl) => lvl.id === (requestDetails == null ? void 0 : requestDetails.current_level)
-  )) == null ? void 0 : _j.selected_status) == null ? void 0 : _k.status_id) === 1 ? "approved" : ((_n = (_m = (_l = requestDetails == null ? void 0 : requestDetails.levels) == null ? void 0 : _l.find(
+  )) == null ? void 0 : _k.selected_status) == null ? void 0 : _l.status_id) === 1 ? "approved" : ((_o = (_n = (_m = requestDetails == null ? void 0 : requestDetails.levels) == null ? void 0 : _m.find(
     (lvl) => lvl.id === (requestDetails == null ? void 0 : requestDetails.current_level)
-  )) == null ? void 0 : _m.selected_status) == null ? void 0 : _n.status_id) === 3 ? "rejected" : "pending";
+  )) == null ? void 0 : _n.selected_status) == null ? void 0 : _o.status_id) === 3 ? "rejected" : "pending";
   getStatus(currentStatus);
-  const descriptionDetails = (_o = requestDetails == null ? void 0 : requestDetails.template_variables) == null ? void 0 : _o.description_variables;
+  const descriptionDetails = (_p = requestDetails == null ? void 0 : requestDetails.template_variables) == null ? void 0 : _p.description_variables;
   const formatKey = (key) => key.replace(/_/g, " ").replace(/\b\w/g, (char) => char.toUpperCase());
   const displayEntries = descriptionDetails ? Object.entries(descriptionDetails).filter(
     ([, value]) => typeof value === "string" || typeof value === "number"
   ) : [];
-  const userLevel = (requestDetails == null ? void 0 : requestDetails.isLevelZero) ? "L0" : "L" + (((_q = (_p = requestDetails == null ? void 0 : requestDetails.levels) == null ? void 0 : _p.findIndex(
+  const userLevel = (requestDetails == null ? void 0 : requestDetails.isLevelZero) ? "L0" : "L" + (((_r = (_q = requestDetails == null ? void 0 : requestDetails.levels) == null ? void 0 : _q.findIndex(
     (lvl) => lvl.id === (requestDetails == null ? void 0 : requestDetails.current_level)
-  )) != null ? _q : -1) + 1 || "");
-  console.log("\u{1F680} ~ WorkflowRequestCard ~ userLevel:", userLevel);
+  )) != null ? _r : -1) + 1 || "");
   const tatExpired = timeLeftDHm(currentLevel == null ? void 0 : currentLevel.tat_expiry) === "0d: 0h: 0m";
   return /* @__PURE__ */ jsxRuntime.jsxs(
     material.Box,
@@ -435,9 +438,9 @@ function WorkflowRequestCard({
                 ) }),
                 /* @__PURE__ */ jsxRuntime.jsx("div", { className: "step-line step-line-inactive" })
               ] }),
-              (_r = requestDetails == null ? void 0 : requestDetails.levels) == null ? void 0 : _r.map((_, idx) => {
+              (_s = requestDetails == null ? void 0 : requestDetails.levels) == null ? void 0 : _s.map((_, idx) => {
                 const level = idx + 1;
-                return /* @__PURE__ */ jsxRuntime.jsx(React7__default.default.Fragment, { children: userLevel == "L" + level ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                return /* @__PURE__ */ jsxRuntime.jsx(React2__default.default.Fragment, { children: userLevel == "L" + level ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
                   /* @__PURE__ */ jsxRuntime.jsx(material.Chip, { label: "L" + level, className: "step-chip-current" }),
                   (requestDetails == null ? void 0 : requestDetails.levels.length) !== level && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "step-line step-line-inactive" })
                 ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -503,7 +506,7 @@ function WorkflowRequestCard({
                     children: [
                       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "assignee-label", children: "Current Assignee:" }),
                       " ",
-                      allAssignees.length > 0 ? `${(requestDetails == null ? void 0 : requestDetails.isLevelZero) ? (_s = requestDetails == null ? void 0 : requestDetails.created_by_user) == null ? void 0 : _s.full_name : allAssignees[0]} +${allAssignees.length - 1}` : (requestDetails == null ? void 0 : requestDetails.isLevelZero) ? (_t = requestDetails == null ? void 0 : requestDetails.created_by_user) == null ? void 0 : _t.full_name : allAssignees[0]
+                      allAssignees.length > 0 ? `${(requestDetails == null ? void 0 : requestDetails.isLevelZero) ? (_t = requestDetails == null ? void 0 : requestDetails.created_by_user) == null ? void 0 : _t.full_name : allAssignees[0]} +${allAssignees.length - 1}` : (requestDetails == null ? void 0 : requestDetails.isLevelZero) ? (_u = requestDetails == null ? void 0 : requestDetails.created_by_user) == null ? void 0 : _u.full_name : allAssignees[0]
                     ]
                   }
                 )
@@ -516,7 +519,7 @@ function WorkflowRequestCard({
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx("span", { className: "assignee-label", children: "Current Assignee:" }),
                   " ",
-                  (_u = requestDetails == null ? void 0 : requestDetails.created_by_user) == null ? void 0 : _u.full_name
+                  (_v = requestDetails == null ? void 0 : requestDetails.created_by_user) == null ? void 0 : _v.full_name
                 ]
               }
             ) }) : extraCurrentlyAssignedUserCount > 0 || tatExpired && extraCurrentlyEscalatedUserCount > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -546,13 +549,13 @@ function WorkflowRequestCard({
                 children: /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { className: "assignee-text", sx: { cursor: "pointer" }, children: [
                   /* @__PURE__ */ jsxRuntime.jsx("span", { className: "assignee-label", children: tatExpired ? "Escalated To:" : "Current Assignee:" }),
                   " ",
-                  ((requestDetails == null ? void 0 : requestDetails.isLevelZero) ? (_v = requestDetails == null ? void 0 : requestDetails.created_by_user) == null ? void 0 : _v.full_name : tatExpired ? extraCurrentlyEscalatedUserCount : extraCurrentlyAssignedUserCount) > 0 ? `${tatExpired ? currentlyEscalatedUser : currentlyAssignedUser} +${tatExpired ? extraCurrentlyEscalatedUserCount : extraCurrentlyAssignedUserCount}` : tatExpired ? currentlyEscalatedUser : currentlyAssignedUser
+                  ((requestDetails == null ? void 0 : requestDetails.isLevelZero) ? (_w = requestDetails == null ? void 0 : requestDetails.created_by_user) == null ? void 0 : _w.full_name : tatExpired ? extraCurrentlyEscalatedUserCount : extraCurrentlyAssignedUserCount) > 0 ? `${tatExpired ? currentlyEscalatedUser : currentlyAssignedUser} +${tatExpired ? extraCurrentlyEscalatedUserCount : extraCurrentlyAssignedUserCount}` : tatExpired ? currentlyEscalatedUser : currentlyAssignedUser
                 ] })
               }
             ) : /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { className: "assignee-text", sx: { cursor: "pointer" }, children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "assignee-label", children: tatExpired ? "Escalated To:" : "Current Assignee:" }),
               " ",
-              (requestDetails == null ? void 0 : requestDetails.isLevelZero) ? (_w = requestDetails == null ? void 0 : requestDetails.created_by_user) == null ? void 0 : _w.full_name : tatExpired ? currentlyEscalatedUser : currentlyAssignedUser
+              (requestDetails == null ? void 0 : requestDetails.isLevelZero) ? (_x = requestDetails == null ? void 0 : requestDetails.created_by_user) == null ? void 0 : _x.full_name : tatExpired ? currentlyEscalatedUser : currentlyAssignedUser
             ] })
           ] }),
           (requestDetails == null ? void 0 : requestDetails.current_status) == "pending" && (matchAssigneeUserLevel || matchEscalateUserLevel || matchUserInAnyLevel) && (userDetails == null ? void 0 : userDetails.id) != (requestDetails == null ? void 0 : requestDetails.created_by) && !(requestDetails == null ? void 0 : requestDetails.isLevelZero) ? /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { className: "action-buttons", children: [
@@ -653,14 +656,14 @@ function SendBackDialog({
   onSuccess
 }) {
   const { userInfo, api } = useWorkflowContext();
-  const [comment, setComment] = React7.useState("");
-  const [selectedFile, setSelectedFile] = React7.useState(null);
-  const [fileName, setFileName] = React7.useState("");
-  const [error, setError] = React7.useState({});
-  const [loading, setLoading] = React7.useState(false);
-  const [fileLoading, setFileLoading] = React7.useState(false);
-  const fileInputRef = React7.useRef(null);
-  const [snackbar, setSnackbar] = React7.useState({
+  const [comment, setComment] = React2.useState("");
+  const [selectedFile, setSelectedFile] = React2.useState(null);
+  const [fileName, setFileName] = React2.useState("");
+  const [error, setError] = React2.useState({});
+  const [loading, setLoading] = React2.useState(false);
+  const [fileLoading, setFileLoading] = React2.useState(false);
+  const fileInputRef = React2.useRef(null);
+  const [snackbar, setSnackbar] = React2.useState({
     open: false,
     message: "",
     severity: "success"
@@ -909,10 +912,10 @@ function ApproveDialog({
   const { userInfo, api } = useWorkflowContext();
   const theme = styles.useTheme();
   useMediaQuery__default.default(theme.breakpoints.down("lg"));
-  const [comment, setComment] = React7.useState("");
-  const [error, setError] = React7.useState({});
-  const [loading, setLoading] = React7.useState(false);
-  const [snackbar, setSnackbar] = React7.useState({
+  const [comment, setComment] = React2.useState("");
+  const [error, setError] = React2.useState({});
+  const [loading, setLoading] = React2.useState(false);
+  const [snackbar, setSnackbar] = React2.useState({
     open: false,
     message: "",
     severity: "success"
@@ -1089,18 +1092,18 @@ function RejectDialog({
       }
     );
   };
-  const [rejectReasons, setRejectReasons] = React7.useState("");
-  const [comment, setComment] = React7.useState("");
-  const [error, setError] = React7.useState({ reason: "", comment: "" });
-  const [statusApplicableList, setStatusApplicableList] = React7.useState([]);
-  const [loading, setLoading] = React7.useState(false);
-  const [snackbar, setSnackbar] = React7.useState({
+  const [rejectReasons, setRejectReasons] = React2.useState("");
+  const [comment, setComment] = React2.useState("");
+  const [error, setError] = React2.useState({ reason: "", comment: "" });
+  const [statusApplicableList, setStatusApplicableList] = React2.useState([]);
+  const [loading, setLoading] = React2.useState(false);
+  const [snackbar, setSnackbar] = React2.useState({
     open: false,
     message: "",
     severity: "success"
   });
   const handleCloseSnackbar = () => setSnackbar((prev) => ({ ...prev, open: false }));
-  React7.useEffect(() => {
+  React2.useEffect(() => {
     (async () => {
       var _a;
       try {
@@ -1306,10 +1309,10 @@ function OnHoldDialog({
   const { userInfo, api } = useWorkflowContext();
   const theme = styles.useTheme();
   useMediaQuery__default.default(theme.breakpoints.down("lg"));
-  const [comment, setComment] = React7.useState("");
-  const [error, setError] = React7.useState({ comment: "" });
-  const [loading, setLoading] = React7.useState(false);
-  const [snackbar, setSnackbar] = React7.useState({
+  const [comment, setComment] = React2.useState("");
+  const [error, setError] = React2.useState({ comment: "" });
+  const [loading, setLoading] = React2.useState(false);
+  const [snackbar, setSnackbar] = React2.useState({
     open: false,
     message: "",
     severity: "success"
@@ -1458,8 +1461,8 @@ function OnHoldDialog({
 }
 var OnHoldDialog_default = OnHoldDialog;
 var useDebounce = (value, delay) => {
-  const [debouncedValue, setDebouncedValue] = React7.useState(value);
-  React7.useEffect(() => {
+  const [debouncedValue, setDebouncedValue] = React2.useState(value);
+  React2.useEffect(() => {
     const timeoutId = setTimeout(() => {
       setDebouncedValue(value);
     }, delay);
@@ -1553,15 +1556,15 @@ function FilterModal({
   onApply
 }) {
   const { api } = useWorkflowContext();
-  const [approvalType, setApprovalType] = React7.useState(
+  const [approvalType, setApprovalType] = React2.useState(
     (initialFilters == null ? void 0 : initialFilters.approvalType) || ""
   );
-  const [approvalStatus, setApprovalStatus] = React7.useState(
+  const [approvalStatus, setApprovalStatus] = React2.useState(
     (initialFilters == null ? void 0 : initialFilters.approvalStatus) || ""
   );
-  const [sortBy, setSortBy] = React7.useState((initialFilters == null ? void 0 : initialFilters.sortBy) || "");
-  const [approvalTypeOptions, setApprovalTypeOptions] = React7.useState([]);
-  React7.useEffect(() => {
+  const [sortBy, setSortBy] = React2.useState((initialFilters == null ? void 0 : initialFilters.sortBy) || "");
+  const [approvalTypeOptions, setApprovalTypeOptions] = React2.useState([]);
+  React2.useEffect(() => {
     api.get({ url: "/workflow/activities?page=1&size=1000", serviceURL: "api" }).then((res) => {
       var _a;
       console.log("\u{1F680} ~ FilterModal ~ res:", res);
@@ -1570,7 +1573,7 @@ function FilterModal({
       console.error("Failed to fetch approval types:", err);
     });
   }, [api]);
-  React7.useEffect(() => {
+  React2.useEffect(() => {
     if (open) {
       setApprovalType((initialFilters == null ? void 0 : initialFilters.approvalType) || "");
       setApprovalStatus((initialFilters == null ? void 0 : initialFilters.approvalStatus) || "");
@@ -1795,22 +1798,23 @@ function ApprovalWorkflow({
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s;
   material.useTheme();
   const { api, urlBuilder, loadingComponent, ENV_VARIABLES } = useWorkflowContext();
-  const [selectedOption, setSelectedOption] = React7.useState(
+  const [selectedOption, setSelectedOption] = React2.useState(
     selectedWorkflowsList.length ? "selected" : "Assign To Me"
   );
   console.log("\u{1F680} ~ ApprovalWorkflow ~ selectedOption:", selectedOption);
-  const [expandedId, setExpandedId] = React7.useState(null);
-  const [sendDialog, setSendDialog] = React7__default.default.useState(null);
-  const [approveTarget, setApproveTarget] = React7__default.default.useState(null);
-  const [rejectTarget, setRejectTarget] = React7__default.default.useState(null);
-  const [onHoldTarget, setOnHoldTarget] = React7__default.default.useState(null);
-  const [expandedDetails, setExpandedDetails] = React7.useState([]);
+  const [expandedId, setExpandedId] = React2.useState(null);
+  const [sendDialog, setSendDialog] = React2.useState(null);
+  const [approveTarget, setApproveTarget] = React2.useState(null);
+  const [rejectTarget, setRejectTarget] = React2.useState(null);
+  const [onHoldTarget, setOnHoldTarget] = React2.useState(null);
+  const [expandedDetails, setExpandedDetails] = React2.useState([]);
   console.log("\u{1F680} ~ ApprovalWorkflow ~ expandedDetails:", expandedDetails);
-  const [descriptionView, setDescriptionView] = React7.useState(null);
-  const [urlConfig, setUrlConfig] = React7.useState({});
-  const [viewMoreDetails, setViewMoreDetails] = React7.useState(null);
-  const [isViewMoreOpen, setIsViewMoreOpen] = React7.useState(false);
-  const [isFilterOpen, setIsFilterOpen] = React7.useState(false);
+  const [descriptionView, setDescriptionView] = React2.useState(null);
+  const [urlConfig, setUrlConfig] = React2.useState({});
+  const [viewMoreDetails, setViewMoreDetails] = React2.useState(null);
+  const [isViewMoreOpen, setIsViewMoreOpen] = React2.useState(false);
+  const [isFilterOpen, setIsFilterOpen] = React2.useState(false);
+  console.log("\u{1F680} ~ PIPELINE TEST");
   const handleOpenViewMore = (details) => {
     setViewMoreDetails(details);
     setIsViewMoreOpen(true);
@@ -1819,7 +1823,7 @@ function ApprovalWorkflow({
     setIsViewMoreOpen(false);
     setViewMoreDetails(null);
   };
-  const [tabs, setTabs] = React7.useState({
+  const [tabs, setTabs] = React2.useState({
     "Assign To Me": {
       data: [],
       page: 1,
@@ -1858,13 +1862,13 @@ function ApprovalWorkflow({
     }
   });
   console.log("\u{1F680} ~ ApprovalWorkflow ~ tabs set:", tabs);
-  const [searchText, setSearchText] = React7.useState("");
+  const [searchText, setSearchText] = React2.useState("");
   const debouncedSearchTerm = useDebounce_default(searchText, 500);
-  React7.useEffect(() => {
+  React2.useEffect(() => {
     var _a2;
     setSearchText(((_a2 = tabs[selectedOption]) == null ? void 0 : _a2.search) || "");
   }, [selectedOption]);
-  React7.useEffect(() => {
+  React2.useEffect(() => {
     var _a2, _b2;
     if (debouncedSearchTerm !== tabs[selectedOption].search && ((_a2 = tabs[selectedOption]) == null ? void 0 : _a2.initialized)) {
       setTabs((prev) => ({
@@ -1886,14 +1890,14 @@ function ApprovalWorkflow({
       );
     }
   }, [debouncedSearchTerm]);
-  const handleClearSearch = React7.useCallback(() => {
+  const handleClearSearch = React2.useCallback(() => {
     setSearchText("");
   }, []);
-  const handleSearchChange = React7.useCallback((value) => {
+  const handleSearchChange = React2.useCallback((value) => {
     setSearchText(value);
   }, []);
-  const observer = React7__default.default.useRef(null);
-  const lastCardRef = React7.useCallback(
+  const observer = React2.useRef(null);
+  const lastCardRef = React2.useCallback(
     (node) => {
       const currentTab = tabs[selectedOption];
       if ((currentTab == null ? void 0 : currentTab.loading) || !(currentTab == null ? void 0 : currentTab.hasMore)) return;
@@ -1913,6 +1917,24 @@ function ApprovalWorkflow({
     },
     [tabs, selectedOption]
   );
+  const scrollRef = React2.useRef(null);
+  React2.useEffect(() => {
+    const handleKeyDown = (e) => {
+      var _a2, _b2, _c2, _d2;
+      if (((_a2 = document.activeElement) == null ? void 0 : _a2.tagName) === "INPUT" || ((_b2 = document.activeElement) == null ? void 0 : _b2.tagName) === "TEXTAREA") {
+        return;
+      }
+      if (e.key === "ArrowUp") {
+        e.preventDefault();
+        (_c2 = scrollRef.current) == null ? void 0 : _c2.scrollBy({ top: -100, behavior: "smooth" });
+      } else if (e.key === "ArrowDown") {
+        e.preventDefault();
+        (_d2 = scrollRef.current) == null ? void 0 : _d2.scrollBy({ top: 100, behavior: "smooth" });
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, []);
   const handleSendBack = (workflowLogId) => {
     setSendDialog(workflowLogId);
   };
@@ -1945,7 +1967,7 @@ function ApprovalWorkflow({
       return acc;
     }, {});
   };
-  React7.useEffect(() => {
+  React2.useEffect(() => {
     api.get({
       url: `/workflow/url-config`,
       serviceURL: "api"
@@ -1953,7 +1975,7 @@ function ApprovalWorkflow({
       setUrlConfig(formatDataUrlConfig(res == null ? void 0 : res.data));
     });
   }, []);
-  const fetchData = React7.useCallback(
+  const fetchData = React2.useCallback(
     (tab, page, search, filtersOverride) => {
       var _a2, _b2, _c2;
       console.log("[DEBUG-FETCH-DATA] \u{1F3AF} fetchData called with:", {
@@ -2183,7 +2205,7 @@ function ApprovalWorkflow({
       serviceURL: "api"
     }).then((res) => setExpandedDetails(res == null ? void 0 : res.data));
   };
-  React7.useEffect(() => {
+  React2.useEffect(() => {
     var _a2;
     console.log("[DEBUG-INIT] \u{1F680} Initial useEffect triggered");
     console.log("[DEBUG-INIT] userInfo:", userInfo);
@@ -2207,13 +2229,13 @@ function ApprovalWorkflow({
       console.log("[DEBUG-INIT] \u274C No userInfo.id, skipping initial fetch");
     }
   }, [userInfo]);
-  React7.useEffect(() => {
+  React2.useEffect(() => {
     const tabState = tabs[selectedOption];
     if ((tabState == null ? void 0 : tabState.page) > 1) {
       fetchData(selectedOption, tabState.page, tabState.search);
     }
   }, [(_d = tabs[selectedOption]) == null ? void 0 : _d.page]);
-  React7.useEffect(() => {
+  React2.useEffect(() => {
     var _a2;
     if (Object.keys(urlConfig).length > 0 && userInfo && tabs && tabs["Assign To Me"] && !tabs["Assign To Me"].initialized) {
       fetchData("Assign To Me", 1, ((_a2 = tabs["Assign To Me"]) == null ? void 0 : _a2.search) || "");
@@ -2391,6 +2413,7 @@ function ApprovalWorkflow({
               /* @__PURE__ */ jsxRuntime.jsxs(
                 system.Box,
                 {
+                  ref: scrollRef,
                   className: "fixedModal hide-scrollbar",
                   sx: {
                     overflowY: "auto",
@@ -2620,7 +2643,7 @@ function DialogOpener({
 }) {
   const theme = material.useTheme();
   useMediaQuery__default.default(theme.breakpoints.down("lg"));
-  const [screenWidth, setScreenWidth] = React7.useState(
+  const [screenWidth, setScreenWidth] = React2.useState(
     typeof window !== "undefined" ? window.innerWidth : 0
   );
   console.log("Dialog opener props", {
@@ -2629,7 +2652,7 @@ function DialogOpener({
     userInfoData,
     selectedWorkflowsList
   });
-  React7.useEffect(() => {
+  React2.useEffect(() => {
     const updateScreenWidth = () => setScreenWidth(window.innerWidth);
     window.addEventListener("resize", updateScreenWidth);
     return () => window.removeEventListener("resize", updateScreenWidth);
@@ -2734,7 +2757,7 @@ function ApprovalWorkflow2(props) {
     ENV_VARIABLES,
     ...rest
   } = props;
-  console.log("\u{1F680} ~ ApprovalWorkflow ~ props:", props);
+  console.log("\u{1F680} ~ PIPELINE TEST");
   return /* @__PURE__ */ jsxRuntime.jsx(
     WorkflowProvider,
     {