amp-workflow-ui 0.1.2 → 0.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.js +362 -243
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +363 -244
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -84,7 +84,12 @@ var ActionMenu = ({
84
84
  ] });
85
85
  };
86
86
  var Statusselector_default = ActionMenu;
87
- function SendBackDialog({ openModal, closeModal, header, workflowLogId }) {
87
+ function SendBackDialog({
88
+ openModal,
89
+ closeModal,
90
+ header,
91
+ workflowLogId
92
+ }) {
88
93
  const { userInfo, api } = useWorkflowContext();
89
94
  const [comment, setComment] = React7.useState("");
90
95
  const [selectedFile, setSelectedFile] = React7.useState(null);
@@ -102,7 +107,9 @@ function SendBackDialog({ openModal, closeModal, header, workflowLogId }) {
102
107
  const formData = new FormData();
103
108
  formData.append("file", file);
104
109
  try {
105
- const response = await api.post("/workflow/upload-document", formData, {
110
+ const response = await api.post({
111
+ url: "/workflow/upload-document",
112
+ data: formData,
106
113
  headers: { "Content-Type": "multipart/form-data" }
107
114
  });
108
115
  setFileName(response.data.file);
@@ -138,10 +145,14 @@ function SendBackDialog({ openModal, closeModal, header, workflowLogId }) {
138
145
  if (!validateFields()) return;
139
146
  setLoading(true);
140
147
  try {
141
- const res = await api.post(`/workflow/send-back/${workflowLogId}`, {
142
- comment,
143
- file: selectedFile,
144
- created_by: (_a = userInfo == null ? void 0 : userInfo.userInfo) == null ? void 0 : _a.id
148
+ const res = await api.post({
149
+ url: `/workflow/send-back/${workflowLogId}`,
150
+ data: {
151
+ comment,
152
+ file: selectedFile,
153
+ created_by: (_a = userInfo == null ? void 0 : userInfo.userInfo) == null ? void 0 : _a.id
154
+ },
155
+ serviceURL: "api"
145
156
  });
146
157
  if ((res == null ? void 0 : res.status) === 200) toast__default.default.success("Successfully sent back!");
147
158
  if ((_b = res == null ? void 0 : res.error) == null ? void 0 : _b.message) {
@@ -154,50 +165,107 @@ function SendBackDialog({ openModal, closeModal, header, workflowLogId }) {
154
165
  setLoading(false);
155
166
  }
156
167
  };
157
- return /* @__PURE__ */ jsxRuntime.jsxs(Dialog__default.default, { open: openModal, onClose: closeModal, "aria-labelledby": "responsive-dialog-title", sx: { "& .MuiPaper-root.MuiDialog-paper": { width: "550px" } }, children: [
158
- /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
159
- /* @__PURE__ */ jsxRuntime.jsx(material.DialogTitle, { id: "responsive-dialog-title", children: header }),
160
- /* @__PURE__ */ jsxRuntime.jsx(material.IconButton, { disableFocusRipple: true, disableRipple: true, onClick: closeModal, children: /* @__PURE__ */ jsxRuntime.jsx(HighlightOffIcon__default.default, { style: { color: "#666666" } }) })
161
- ] }),
162
- /* @__PURE__ */ jsxRuntime.jsx(DialogContent__default.default, { children: /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { mb: 5 }, children: /* @__PURE__ */ jsxRuntime.jsxs(material.Grid, { container: true, spacing: 5, children: [
163
- /* @__PURE__ */ jsxRuntime.jsx(material.Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsxRuntime.jsx(
164
- material.TextField,
165
- {
166
- fullWidth: true,
167
- label: "Comment",
168
- value: comment,
169
- placeholder: "Comment Here",
170
- onChange: (e) => setComment(e.target.value),
171
- required: true,
172
- error: !!error.comment,
173
- helperText: error.comment
174
- }
175
- ) }),
176
- /* @__PURE__ */ jsxRuntime.jsxs(material.Grid, { item: true, xs: 12, children: [
177
- /* @__PURE__ */ jsxRuntime.jsx(
178
- material.TextField,
168
+ return /* @__PURE__ */ jsxRuntime.jsxs(
169
+ Dialog__default.default,
170
+ {
171
+ open: openModal,
172
+ onClose: closeModal,
173
+ "aria-labelledby": "responsive-dialog-title",
174
+ sx: { "& .MuiPaper-root.MuiDialog-paper": { width: "550px" } },
175
+ children: [
176
+ /* @__PURE__ */ jsxRuntime.jsxs(
177
+ material.Box,
179
178
  {
180
- type: "text",
181
- fullWidth: true,
182
- label: "Attachment",
183
- placeholder: "Attachment",
184
- InputProps: {
185
- endAdornment: /* @__PURE__ */ jsxRuntime.jsx(material.InputAdornment, { position: "end", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "icon-export-1" }) })
179
+ sx: {
180
+ display: "flex",
181
+ justifyContent: "space-between",
182
+ alignItems: "center"
186
183
  },
187
- onClick: handleAttachment,
188
- value: fileName,
189
- error: !!error.file,
190
- helperText: error.file
184
+ children: [
185
+ /* @__PURE__ */ jsxRuntime.jsx(material.DialogTitle, { id: "responsive-dialog-title", children: header }),
186
+ /* @__PURE__ */ jsxRuntime.jsx(material.IconButton, { disableFocusRipple: true, disableRipple: true, onClick: closeModal, children: /* @__PURE__ */ jsxRuntime.jsx(HighlightOffIcon__default.default, { style: { color: "#666666" } }) })
187
+ ]
191
188
  }
192
189
  ),
193
- /* @__PURE__ */ jsxRuntime.jsx("input", { type: "file", ref: fileInputRef, style: { display: "none" }, onChange: handleFileChange })
194
- ] })
195
- ] }) }) }),
196
- /* @__PURE__ */ jsxRuntime.jsx(material.DialogActions, { children: /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", justifyContent: "flex-end", alignItems: "center" }, children: [
197
- /* @__PURE__ */ jsxRuntime.jsx(material.Button, { onClick: closeModal, size: "large", variant: "outlined", color: "primary", sx: { mr: 2 }, children: "Close" }),
198
- /* @__PURE__ */ jsxRuntime.jsx(material.Button, { onClick: onSubmit, size: "large", variant: "contained", color: "primary", disabled: loading || fileLoading, children: loading ? /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: 24, color: "inherit" }) : "Submit" })
199
- ] }) })
200
- ] });
190
+ /* @__PURE__ */ jsxRuntime.jsx(DialogContent__default.default, { children: /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { mb: 5 }, children: /* @__PURE__ */ jsxRuntime.jsxs(material.Grid, { container: true, spacing: 5, children: [
191
+ /* @__PURE__ */ jsxRuntime.jsx(material.Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsxRuntime.jsx(
192
+ material.TextField,
193
+ {
194
+ fullWidth: true,
195
+ label: "Comment",
196
+ value: comment,
197
+ placeholder: "Comment Here",
198
+ onChange: (e) => setComment(e.target.value),
199
+ required: true,
200
+ error: !!error.comment,
201
+ helperText: error.comment
202
+ }
203
+ ) }),
204
+ /* @__PURE__ */ jsxRuntime.jsxs(material.Grid, { item: true, xs: 12, children: [
205
+ /* @__PURE__ */ jsxRuntime.jsx(
206
+ material.TextField,
207
+ {
208
+ type: "text",
209
+ fullWidth: true,
210
+ label: "Attachment",
211
+ placeholder: "Attachment",
212
+ InputProps: {
213
+ endAdornment: /* @__PURE__ */ jsxRuntime.jsx(material.InputAdornment, { position: "end", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "icon-export-1" }) })
214
+ },
215
+ onClick: handleAttachment,
216
+ value: fileName,
217
+ error: !!error.file,
218
+ helperText: error.file
219
+ }
220
+ ),
221
+ /* @__PURE__ */ jsxRuntime.jsx(
222
+ "input",
223
+ {
224
+ type: "file",
225
+ ref: fileInputRef,
226
+ style: { display: "none" },
227
+ onChange: handleFileChange
228
+ }
229
+ )
230
+ ] })
231
+ ] }) }) }),
232
+ /* @__PURE__ */ jsxRuntime.jsx(material.DialogActions, { children: /* @__PURE__ */ jsxRuntime.jsxs(
233
+ material.Box,
234
+ {
235
+ sx: {
236
+ display: "flex",
237
+ justifyContent: "flex-end",
238
+ alignItems: "center"
239
+ },
240
+ children: [
241
+ /* @__PURE__ */ jsxRuntime.jsx(
242
+ material.Button,
243
+ {
244
+ onClick: closeModal,
245
+ size: "large",
246
+ variant: "outlined",
247
+ color: "primary",
248
+ sx: { mr: 2 },
249
+ children: "Close"
250
+ }
251
+ ),
252
+ /* @__PURE__ */ jsxRuntime.jsx(
253
+ material.Button,
254
+ {
255
+ onClick: onSubmit,
256
+ size: "large",
257
+ variant: "contained",
258
+ color: "primary",
259
+ disabled: loading || fileLoading,
260
+ children: loading ? /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: 24, color: "inherit" }) : "Submit"
261
+ }
262
+ )
263
+ ]
264
+ }
265
+ ) })
266
+ ]
267
+ }
268
+ );
201
269
  }
202
270
  var SendBackDialog_default = SendBackDialog;
203
271
  function ApproveDialog({ openModal, closeModal, header, workflowLogId, statusId }) {
@@ -368,31 +436,6 @@ function OnHoldDialog({ openModal, closeModal, header, workflowLogId, statusId }
368
436
  ] });
369
437
  }
370
438
  var OnHoldDialog_default = OnHoldDialog;
371
- var Bull = ({
372
- count,
373
- isDisabled
374
- }) => {
375
- const theme = material.useTheme();
376
- const color = isDisabled ? theme.palette.success.main : theme.palette.primary.main;
377
- return /* @__PURE__ */ jsxRuntime.jsx(
378
- material.Box,
379
- {
380
- sx: {
381
- display: "flex",
382
- justifyContent: "center",
383
- alignItems: "center",
384
- width: 32,
385
- height: 32,
386
- borderRadius: "50%",
387
- border: `2px solid ${color}`,
388
- color,
389
- fontWeight: 600,
390
- fontSize: 14
391
- },
392
- children: count
393
- }
394
- );
395
- };
396
439
  var getStatus = (status, theme) => {
397
440
  const s = status == null ? void 0 : status.toLowerCase();
398
441
  const colors = {
@@ -410,7 +453,7 @@ var getStatus = (status, theme) => {
410
453
  };
411
454
  return colors[s] || colors.pending;
412
455
  };
413
- function CustomTimelineWithStatus({ events }) {
456
+ function ConnectedTimeline({ events }) {
414
457
  const { api } = useWorkflowContext();
415
458
  const theme = material.useTheme();
416
459
  const [isMobile, setIsMobile] = React7.useState(false);
@@ -426,126 +469,210 @@ function CustomTimelineWithStatus({ events }) {
426
469
  serviceURL: "api"
427
470
  }).then((res) => window.open(res.data, "_blank"));
428
471
  };
472
+ const columns = 4;
429
473
  const rows = [];
430
- for (let i = 0; i < (events == null ? void 0 : events.length); i += 4) rows.push(events.slice(i, i + 4));
431
- return /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { p: 2 }, children: rows.map((row, rowIndex) => /* @__PURE__ */ jsxRuntime.jsx(
432
- material.Box,
433
- {
434
- sx: {
435
- display: "flex",
436
- flexDirection: isMobile ? "column" : rowIndex % 2 === 0 ? "row" : "row-reverse",
437
- gap: isMobile ? 3 : 6,
438
- alignItems: "center",
439
- mb: 6
440
- },
441
- children: row.map((event, index) => {
442
- var _a;
443
- const status = getStatus((_a = event.status) == null ? void 0 : _a.title, theme);
444
- const isDisabled = event.cardType === "disableCard";
445
- return /* @__PURE__ */ jsxRuntime.jsx(material.Grid, { item: true, xs: isMobile ? 12 : 3, children: /* @__PURE__ */ jsxRuntime.jsx(
446
- material.Card,
447
- {
448
- variant: "outlined",
449
- sx: {
450
- width: "100%",
451
- borderRadius: 3,
452
- p: 2,
453
- borderColor: isDisabled ? theme.palette.success.main : theme.palette.divider,
454
- backgroundColor: isDisabled ? theme.palette.action.hover : theme.palette.background.paper,
455
- textAlign: "center",
456
- boxShadow: 2,
457
- "&:hover": { boxShadow: 5 }
458
- },
459
- children: /* @__PURE__ */ jsxRuntime.jsxs(material.CardContent, { children: [
460
- /* @__PURE__ */ jsxRuntime.jsxs(
461
- material.Box,
462
- {
463
- sx: {
464
- display: "flex",
465
- justifyContent: "space-between",
466
- alignItems: "center",
467
- mb: 1
468
- },
469
- children: [
470
- /* @__PURE__ */ jsxRuntime.jsx(
471
- material.Typography,
472
- {
473
- variant: "body2",
474
- color: theme.palette.text.secondary,
475
- children: event.date
474
+ for (let i = 0; i < (events == null ? void 0 : events.length); i += columns)
475
+ rows.push(events.slice(i, i + columns));
476
+ return /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { py: 4, position: "relative" }, children: rows.map((row, rowIndex) => {
477
+ const reversed = rowIndex % 2 === 1;
478
+ return /* @__PURE__ */ jsxRuntime.jsx(
479
+ material.Box,
480
+ {
481
+ sx: {
482
+ display: "flex",
483
+ flexDirection: reversed ? "row-reverse" : "row",
484
+ justifyContent: "left",
485
+ alignItems: "center",
486
+ gap: 6,
487
+ position: "relative",
488
+ mb: 8,
489
+ flexWrap: isMobile ? "wrap" : "nowrap"
490
+ },
491
+ children: row.map((event, index) => {
492
+ var _a;
493
+ const globalIndex = rowIndex * columns + index;
494
+ const status = getStatus((_a = event.status) == null ? void 0 : _a.title, theme);
495
+ const isDisabled = event.cardType === "disableCard";
496
+ return /* @__PURE__ */ jsxRuntime.jsxs(
497
+ material.Box,
498
+ {
499
+ sx: {
500
+ position: "relative",
501
+ display: "flex",
502
+ justifyContent: "center",
503
+ alignItems: "center"
504
+ },
505
+ children: [
506
+ !isMobile && index < row.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(
507
+ material.Box,
508
+ {
509
+ sx: {
510
+ position: "absolute",
511
+ top: "50%",
512
+ [reversed ? "right" : "left"]: "100%",
513
+ width: "60px",
514
+ height: "2px",
515
+ background: theme.palette.primary.main,
516
+ zIndex: 0
517
+ }
518
+ }
519
+ ),
520
+ !isMobile && globalIndex === (rowIndex + 1) * columns - 1 && globalIndex < events.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(
521
+ material.Box,
522
+ {
523
+ sx: {
524
+ position: "absolute",
525
+ bottom: "-48px",
526
+ left: reversed ? "0%" : "100%",
527
+ width: "2px",
528
+ height: "48px",
529
+ background: theme.palette.primary.main,
530
+ zIndex: 0
531
+ }
532
+ }
533
+ ),
534
+ /* @__PURE__ */ jsxRuntime.jsx(
535
+ material.Card,
536
+ {
537
+ sx: {
538
+ width: "230px",
539
+ minHeight: "180px",
540
+ borderRadius: "16px",
541
+ border: `1px solid ${isDisabled ? theme.palette.success.light : theme.palette.divider}`,
542
+ backgroundColor: isDisabled ? theme.palette.action.hover : theme.palette.background.paper,
543
+ textAlign: "center",
544
+ boxShadow: "0px 4px 10px rgba(0,0,0,0.05)",
545
+ transition: "all 0.25s ease-in-out",
546
+ "&:hover": {
547
+ boxShadow: "0px 6px 14px rgba(0,0,0,0.1)",
548
+ transform: "translateY(-2px)"
476
549
  }
477
- ),
478
- event.status && /* @__PURE__ */ jsxRuntime.jsx(
479
- material.Chip,
480
- {
481
- label: event.status.title,
482
- sx: {
483
- backgroundColor: status.bg,
484
- color: status.text,
485
- fontSize: 12,
486
- height: 26,
550
+ },
551
+ children: /* @__PURE__ */ jsxRuntime.jsxs(material.CardContent, { children: [
552
+ /* @__PURE__ */ jsxRuntime.jsxs(
553
+ material.Box,
554
+ {
555
+ sx: {
556
+ display: "flex",
557
+ justifyContent: "space-between",
558
+ alignItems: "center",
559
+ mb: 1
560
+ },
561
+ children: [
562
+ /* @__PURE__ */ jsxRuntime.jsx(
563
+ material.Typography,
564
+ {
565
+ variant: "body2",
566
+ color: theme.palette.text.secondary,
567
+ children: event.date
568
+ }
569
+ ),
570
+ event.status && /* @__PURE__ */ jsxRuntime.jsx(
571
+ material.Chip,
572
+ {
573
+ label: event.status.title,
574
+ sx: {
575
+ backgroundColor: status.bg,
576
+ color: status.text,
577
+ fontSize: 12,
578
+ height: 24,
579
+ fontWeight: 600,
580
+ borderRadius: "16px"
581
+ }
582
+ }
583
+ )
584
+ ]
585
+ }
586
+ ),
587
+ /* @__PURE__ */ jsxRuntime.jsx(
588
+ material.Box,
589
+ {
590
+ sx: {
591
+ width: 36,
592
+ height: 36,
593
+ borderRadius: "50%",
594
+ border: `2px solid ${theme.palette.primary.main}`,
595
+ display: "flex",
596
+ justifyContent: "center",
597
+ alignItems: "center",
598
+ color: theme.palette.primary.main,
599
+ fontWeight: 600,
600
+ fontSize: 14,
601
+ mx: "auto",
602
+ mb: 1.5
603
+ },
604
+ children: event.count
605
+ }
606
+ ),
607
+ /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: event.title, children: /* @__PURE__ */ jsxRuntime.jsx(
608
+ material.Typography,
609
+ {
610
+ variant: "subtitle1",
487
611
  fontWeight: 600,
488
- borderRadius: "16px"
612
+ color: isDisabled ? theme.palette.text.secondary : theme.palette.text.primary,
613
+ sx: {
614
+ overflow: "hidden",
615
+ textOverflow: "ellipsis",
616
+ whiteSpace: "nowrap",
617
+ mb: 0.5
618
+ },
619
+ children: event.title
489
620
  }
490
- }
491
- )
492
- ]
493
- }
494
- ),
495
- /* @__PURE__ */ jsxRuntime.jsx(Bull, { count: event.count, isDisabled }),
496
- /* @__PURE__ */ jsxRuntime.jsx(
497
- material.Typography,
498
- {
499
- variant: "subtitle1",
500
- fontWeight: 600,
501
- color: isDisabled ? theme.palette.text.secondary : theme.palette.text.primary,
502
- sx: { mt: 2, mb: 0.5 },
503
- children: event.title
504
- }
505
- ),
506
- /* @__PURE__ */ jsxRuntime.jsx(
507
- material.Typography,
508
- {
509
- variant: "body2",
510
- color: theme.palette.text.secondary,
511
- sx: { mb: 1 },
512
- children: event.subTitle
513
- }
514
- ),
515
- event.attachment && /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "View attachment", children: /* @__PURE__ */ jsxRuntime.jsx(
516
- material.Typography,
517
- {
518
- variant: "body2",
519
- sx: {
520
- color: theme.palette.primary.main,
521
- cursor: "pointer",
522
- fontWeight: 500,
523
- textDecoration: "underline",
524
- "&:hover": {
525
- color: theme.palette.primary.dark
526
- }
527
- },
528
- onClick: () => handleAttachmentClick(event.attachment),
529
- children: "Attachment"
530
- }
531
- ) }),
532
- /* @__PURE__ */ jsxRuntime.jsx(
533
- material.Typography,
534
- {
535
- variant: "caption",
536
- display: "block",
537
- color: theme.palette.text.disabled,
538
- sx: { mt: 2 },
539
- children: event.time
540
- }
541
- )
542
- ] })
543
- }
544
- ) }, index);
545
- })
546
- },
547
- rowIndex
548
- )) });
621
+ ) }),
622
+ /* @__PURE__ */ jsxRuntime.jsx(
623
+ material.Typography,
624
+ {
625
+ variant: "body2",
626
+ color: theme.palette.text.secondary,
627
+ sx: {
628
+ minHeight: "20px",
629
+ mb: 0.8,
630
+ textOverflow: "ellipsis",
631
+ whiteSpace: "nowrap",
632
+ overflow: "hidden"
633
+ },
634
+ children: event.subTitle || "No Comments"
635
+ }
636
+ ),
637
+ event.attachment && /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "View attachment", children: /* @__PURE__ */ jsxRuntime.jsx(
638
+ material.Typography,
639
+ {
640
+ variant: "body2",
641
+ sx: {
642
+ color: theme.palette.primary.main,
643
+ cursor: "pointer",
644
+ textDecoration: "underline",
645
+ fontWeight: 500,
646
+ "&:hover": {
647
+ color: theme.palette.primary.dark
648
+ }
649
+ },
650
+ onClick: () => handleAttachmentClick(event.attachment),
651
+ children: "Attachment"
652
+ }
653
+ ) }),
654
+ /* @__PURE__ */ jsxRuntime.jsx(
655
+ material.Typography,
656
+ {
657
+ variant: "caption",
658
+ display: "block",
659
+ color: theme.palette.text.disabled,
660
+ sx: { mt: 1 },
661
+ children: event.time
662
+ }
663
+ )
664
+ ] })
665
+ }
666
+ )
667
+ ]
668
+ },
669
+ index
670
+ );
671
+ })
672
+ },
673
+ rowIndex
674
+ );
675
+ }) });
549
676
  }
550
677
  var useDebounce = (value, delay) => {
551
678
  const [debouncedValue, setDebouncedValue] = React7.useState(value);
@@ -591,15 +718,15 @@ var SearchBox = ({
591
718
  };
592
719
  var SearchBox_default = SearchBox;
593
720
  var StyledChipProps = material.styled(material.Chip)(({ theme }) => {
594
- var _a, _b, _c, _d, _e, _f, _g;
721
+ var _a, _b, _c;
595
722
  return {
596
723
  "&.MuiChip-colorPrimary": {
597
724
  border: `1px solid ${theme.palette.primary.dark}`,
598
725
  borderRadius: "8px",
599
726
  height: "36px",
600
727
  padding: "6px 4px",
601
- background: `${(_b = (_a = theme.palette.customColors) == null ? void 0 : _a.customChipBackgroundColor) != null ? _b : "rgba(25,118,210,0.1)"}`,
602
- color: `${(_d = (_c = theme.palette.customColors) == null ? void 0 : _c.customChipColor) != null ? _d : theme.palette.primary.dark}`,
728
+ background: `${"rgba(25,118,210,0.1)"}`,
729
+ color: `${theme.palette.primary.dark}`,
603
730
  width: "170px",
604
731
  overflow: "hidden",
605
732
  whiteSpace: "nowrap",
@@ -611,7 +738,7 @@ var StyledChipProps = material.styled(material.Chip)(({ theme }) => {
611
738
  height: "36px",
612
739
  padding: "6px 4px",
613
740
  background: "none !important",
614
- color: `${(_g = (_f = (_e = theme.palette) == null ? void 0 : _e.customColors) == null ? void 0 : _f.mainText) != null ? _g : theme.palette.text.primary} `,
741
+ color: `${(_c = (_b = (_a = theme.palette) == null ? void 0 : _a.customColors) == null ? void 0 : _b.mainText) != null ? _c : theme.palette.text.primary} `,
615
742
  width: "170px",
616
743
  overflow: "hidden",
617
744
  whiteSpace: "nowrap",
@@ -619,15 +746,6 @@ var StyledChipProps = material.styled(material.Chip)(({ theme }) => {
619
746
  }
620
747
  };
621
748
  });
622
- material.styled(material.Typography)(({ theme }) => ({
623
- overflow: "hidden",
624
- textOverflow: "ellipsis",
625
- whiteSpace: "nowrap",
626
- width: "200px",
627
- [theme.breakpoints.down("sm")]: {
628
- width: "80px"
629
- }
630
- }));
631
749
  function ApprovalWorkflow({
632
750
  selectedWorkflowsList = [],
633
751
  userInfo
@@ -644,12 +762,14 @@ function ApprovalWorkflow({
644
762
  const [rejectTarget, setRejectTarget] = React7__default.default.useState(null);
645
763
  const [onHoldTarget, setOnHoldTarget] = React7__default.default.useState(null);
646
764
  const [expandedDetails, setExpandedDetails] = React7.useState([]);
647
- const [statusCount, setStatusCount] = React7.useState({});
648
765
  const [urlConfig, setUrlConfig] = React7.useState({});
649
766
  const [allRequestArray, setAllRequestArray] = React7.useState([]);
650
767
  const [pendingRequestArray, setPendingRequestArray] = React7.useState([]);
651
768
  const [selectedRequestArray, setSelectedRequestArray] = React7.useState([]);
652
769
  const [isLoading, setIsLoading] = React7.useState(false);
770
+ const [visibleAll, setVisibleAll] = React7.useState(10);
771
+ const [visiblePending, setVisiblePending] = React7.useState(10);
772
+ const [visibleSelected, setVisibleSelected] = React7.useState(10);
653
773
  const [searchText, setSearchText] = React7.useState("");
654
774
  const handleClearSearch = React7.useCallback(() => {
655
775
  setSearchText("");
@@ -685,6 +805,35 @@ function ApprovalWorkflow({
685
805
  return name.includes(q) || desc.includes(q);
686
806
  });
687
807
  }, [pendingRequestArray, debouncedSearchTerm]);
808
+ const observer = React7__default.default.useRef(null);
809
+ const lastCardRef = React7.useCallback(
810
+ (node) => {
811
+ if (isLoading) return;
812
+ if (observer.current) observer.current.disconnect();
813
+ observer.current = new IntersectionObserver((entries) => {
814
+ if (entries[0].isIntersecting) {
815
+ if (selectedApprovalOtions === "All Requests") {
816
+ setVisibleAll((prev) => prev + 10);
817
+ } else if (selectedApprovalOtions === "Action Required") {
818
+ setVisiblePending((prev) => prev + 10);
819
+ } else if (selectedApprovalOtions === "selected") {
820
+ setVisibleSelected((prev) => prev + 10);
821
+ }
822
+ }
823
+ });
824
+ if (node) observer.current.observe(node);
825
+ },
826
+ [isLoading, selectedApprovalOtions]
827
+ );
828
+ const visibleAllRequests = filteredAllRequestArray.slice(0, visibleAll);
829
+ const visiblePendingRequests = filteredPendingRequestArray.slice(
830
+ 0,
831
+ visiblePending
832
+ );
833
+ const visibleSelectedRequests = filteredSelectedRequestArray.slice(
834
+ 0,
835
+ visibleSelected
836
+ );
688
837
  const handleSendBack = (workflowLogId) => {
689
838
  setSendDialog(workflowLogId);
690
839
  };
@@ -758,12 +907,12 @@ function ApprovalWorkflow({
758
907
  {
759
908
  label: "Action Required",
760
909
  icon: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "icon-document-forward" }),
761
- count: (statusCount == null ? void 0 : statusCount.pending_activities_count) || ""
910
+ count: pendingRequestArray.length || ""
762
911
  },
763
912
  {
764
913
  label: "All Requests",
765
914
  icon: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "icon-document-copy" }),
766
- count: (statusCount == null ? void 0 : statusCount.total_activities_count) || ""
915
+ count: allRequestArray.length || ""
767
916
  }
768
917
  ];
769
918
  const fetchExpandedActivityLogs = (workflowLogId) => {
@@ -803,20 +952,9 @@ function ApprovalWorkflow({
803
952
  data: { workflowIds: selectedWorkflowsList }
804
953
  }).then((res) => setSelectedRequestArray(res == null ? void 0 : res.data)).finally(() => setIsLoading(false));
805
954
  };
806
- const fetchStatusCount = () => {
807
- var _a2;
808
- api.get({
809
- url: `/workflow/status-count/${(_a2 = userInfo == null ? void 0 : userInfo.userInfo) == null ? void 0 : _a2.id}`,
810
- serviceURL: "api"
811
- }).then((res) => {
812
- var _a3;
813
- setStatusCount((_a3 = res == null ? void 0 : res.data) == null ? void 0 : _a3[0]);
814
- });
815
- };
816
955
  React7.useEffect(() => {
817
956
  if (!sendDialog && !approveTarget && !onHoldTarget && !rejectTarget) {
818
957
  fetchAllActivites();
819
- fetchStatusCount();
820
958
  fetchPendingActivities();
821
959
  setExpandedDetails([]);
822
960
  setExpandedId(null);
@@ -857,28 +995,6 @@ function ApprovalWorkflow({
857
995
  return "#";
858
996
  };
859
997
  if (isLoading && loadingComponent) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: loadingComponent });
860
- ({
861
- approved: {
862
- color: theme.palette.success.light,
863
- labelColor: theme.palette.success.main
864
- },
865
- rejected: {
866
- color: theme.palette.success.light,
867
- labelColor: theme.palette.success.main
868
- },
869
- onhold: {
870
- color: theme.palette.success.light,
871
- labelColor: theme.palette.success.main
872
- },
873
- sendback: {
874
- color: theme.palette.success.light,
875
- labelColor: theme.palette.success.main
876
- },
877
- pending: {
878
- color: theme.palette.success.light,
879
- labelColor: theme.palette.success.main
880
- }
881
- });
882
998
  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
883
999
  /* @__PURE__ */ jsxRuntime.jsx(
884
1000
  system.Box,
@@ -948,7 +1064,7 @@ function ApprovalWorkflow({
948
1064
  px: 2,
949
1065
  pb: 3
950
1066
  },
951
- children: filteredSelectedRequestArray == null ? void 0 : filteredSelectedRequestArray.map((info, index) => {
1067
+ children: visibleSelectedRequests == null ? void 0 : visibleSelectedRequests.map((info, index) => {
952
1068
  var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h, _i, _j, _k, _l, _m, _n, _o;
953
1069
  const currentLevel = info == null ? void 0 : info.levels.find(
954
1070
  (level_) => level_.id === (info == null ? void 0 : info.current_level)
@@ -971,6 +1087,7 @@ function ApprovalWorkflow({
971
1087
  return /* @__PURE__ */ jsxRuntime.jsxs(
972
1088
  material.Card,
973
1089
  {
1090
+ ref: index === visibleSelectedRequests.length - 1 ? lastCardRef : null,
974
1091
  sx: {
975
1092
  mb: 3,
976
1093
  borderRadius: "14px",
@@ -1190,7 +1307,7 @@ function ApprovalWorkflow({
1190
1307
  children: /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: 36, color: "primary" })
1191
1308
  }
1192
1309
  ) : /* @__PURE__ */ jsxRuntime.jsx(
1193
- CustomTimelineWithStatus,
1310
+ ConnectedTimeline,
1194
1311
  {
1195
1312
  events: expandedDetails == null ? void 0 : expandedDetails.map((item) => {
1196
1313
  var _a3, _b3, _c3, _d3;
@@ -1225,7 +1342,7 @@ function ApprovalWorkflow({
1225
1342
  px: 2,
1226
1343
  pb: 3
1227
1344
  },
1228
- children: filteredAllRequestArray == null ? void 0 : filteredAllRequestArray.map((info, index) => {
1345
+ children: visibleAllRequests == null ? void 0 : visibleAllRequests.map((info, index) => {
1229
1346
  var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h, _i, _j, _k, _l, _m, _n, _o;
1230
1347
  const currentLevel = info == null ? void 0 : info.levels.find(
1231
1348
  (level_) => level_.id === (info == null ? void 0 : info.current_level)
@@ -1248,6 +1365,7 @@ function ApprovalWorkflow({
1248
1365
  return /* @__PURE__ */ jsxRuntime.jsxs(
1249
1366
  material.Card,
1250
1367
  {
1368
+ ref: index === visibleAllRequests.length - 1 ? lastCardRef : null,
1251
1369
  sx: {
1252
1370
  mb: 3,
1253
1371
  borderRadius: "14px",
@@ -1474,7 +1592,7 @@ function ApprovalWorkflow({
1474
1592
  children: /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: 36, color: "primary" })
1475
1593
  }
1476
1594
  ) : /* @__PURE__ */ jsxRuntime.jsx(
1477
- CustomTimelineWithStatus,
1595
+ ConnectedTimeline,
1478
1596
  {
1479
1597
  events: expandedDetails == null ? void 0 : expandedDetails.map((item) => {
1480
1598
  var _a3, _b3, _c3, _d3;
@@ -1509,7 +1627,7 @@ function ApprovalWorkflow({
1509
1627
  px: 2,
1510
1628
  pb: 3
1511
1629
  },
1512
- children: filteredPendingRequestArray == null ? void 0 : filteredPendingRequestArray.map((info, index) => {
1630
+ children: visiblePendingRequests == null ? void 0 : visiblePendingRequests.map((info, index) => {
1513
1631
  var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h, _i, _j, _k, _l;
1514
1632
  const currentLevel = (_a2 = info == null ? void 0 : info.levels) == null ? void 0 : _a2.find(
1515
1633
  (level_) => level_.id === (info == null ? void 0 : info.current_level)
@@ -1532,6 +1650,7 @@ function ApprovalWorkflow({
1532
1650
  return /* @__PURE__ */ jsxRuntime.jsxs(
1533
1651
  material.Card,
1534
1652
  {
1653
+ ref: index === visiblePendingRequests.length - 1 ? lastCardRef : null,
1535
1654
  sx: {
1536
1655
  mb: 3,
1537
1656
  borderRadius: "14px",
@@ -1705,7 +1824,7 @@ function ApprovalWorkflow({
1705
1824
  children: /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: 36, color: "primary" })
1706
1825
  }
1707
1826
  ) : /* @__PURE__ */ jsxRuntime.jsx(
1708
- CustomTimelineWithStatus,
1827
+ ConnectedTimeline,
1709
1828
  {
1710
1829
  events: expandedDetails == null ? void 0 : expandedDetails.map((item) => {
1711
1830
  var _a3, _b3, _c3, _d3;