finance-shared 0.0.10 → 0.0.12

package/dist/finance-shared-library.es.js

@@ -2,7 +2,7 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { Dialog as Dialog$1, DialogTitle, DialogContent as DialogContent$1, DialogContentText, DialogActions as DialogActions$1, Button as Button$1, IconButton as IconButton$1, Typography as Typography$1, Box as Box$1, Tooltip, Zoom, TextField as TextField$1, Paper as Paper$1, Grid as Grid$1, styled as styled$3, CircularProgress as CircularProgress$1, Autocomplete as Autocomplete$1, Badge, Checkbox as Checkbox$1, Chip as Chip$1, Divider, RadioGroup, FormControlLabel, Radio, Popover as Popover$1 } from "@mui/material";
+import { Dialog as Dialog$1, DialogTitle, DialogContent as DialogContent$1, DialogContentText, DialogActions as DialogActions$1, Button as Button$1, Typography as Typography$1, IconButton as IconButton$1, Box as Box$1, Tooltip, Zoom, TextField as TextField$1, Paper as Paper$1, Grid as Grid$1, styled as styled$3, CircularProgress as CircularProgress$1, Autocomplete as Autocomplete$1, Badge, Checkbox as Checkbox$1, Chip as Chip$1, Divider, RadioGroup, FormControlLabel, Radio, Popover as Popover$1 } from "@mui/material";
 import * as React from "react";
 import React__default, { createContext, useContext, useCallback, useState, useRef, useEffect, isValidElement, cloneElement, Children, memo, createElement, useMemo } from "react";
 import { unstable_createGetCssVar, createSpacing as createSpacing$1, useTheme as useTheme$3, GlobalStyles as GlobalStyles$1, unstable_memoTheme, css, keyframes, styled as styled$2, createBox, darken as darken$1, unstable_resolveBreakpointValues, handleBreakpoints as handleBreakpoints$1, alpha as alpha$1 } from "@mui/system";
@@ -2509,6 +2509,7 @@ const locale$3 = {
   REMARKS: "Remarks",
   REMOVE_FILE: "Remove File",
   NO_REMARKS_ADDED: "No remarks added",
+  NO_REMARK: "No Remark",
   SUPPORT_FILE: "Supported files",
   CREATED_BY: "Added By",
   DELETE: "Delete",
@@ -2540,7 +2541,12 @@ const locale$3 = {
   REFERRAL_DETAIL_REMARKS: "Referral Detail Remarks",
   RELATIVE_DETAIL_REMARKS: "Relative Detail Remarks",
   NEXT_OF_KIN_DETAIL_REMARKS: "Next Of Kin Detail Remarks",
-  DOCUMENTS_REMARKS: "Documents Remarks"
+  DOCUMENTS_REMARKS: "Documents Remarks",
+  LOAN_AMOUNT: "Loan Amount",
+  INTEREST_RATE: "Interest Rate",
+  FEES_DEDUCTION: "Fees Deduction",
+  REPAYMENT_AMOUNT: "Repayment Amount",
+  CASH_IN_HAND: "Cash In Hand"
 };
 const locale$2 = {
   CHANGE_DETECT_TITLE: "Adakah anda pasti mahu membuang perubahan?",
@@ -2564,6 +2570,7 @@ const locale$2 = {
   ASSIGN_TO: "Tugaskan Kepada",
   REMARKS: "Kenyataan",
   NO_REMARKS_ADDED: "Tiada komen ditambah",
+  NO_REMARK: "Tiada Catatan",
   SUPPORT_FILE: "Fail yang disokong",
   CREATED_BY: "Ditambah Oleh",
   DELETE: "Padam",
@@ -2595,7 +2602,12 @@ const locale$2 = {
   REFERRAL_DETAIL_REMARKS: "Catatan Perincian Rujukan",
   RELATIVE_DETAIL_REMARKS: "Catatan Perincian Relatif",
   NEXT_OF_KIN_DETAIL_REMARKS: "Ucapan Perincian Keluarga Seterusnya",
-  DOCUMENTS_REMARKS: "Documents Remarks"
+  DOCUMENTS_REMARKS: "Documents Remarks",
+  LOAN_AMOUNT: "Jumlah Pinjaman",
+  INTEREST_RATE: "Kadar Faedah",
+  FEES_DEDUCTION: "Potongan Yuran",
+  REPAYMENT_AMOUNT: "Amaun Bayaran Balik",
+  CASH_IN_HAND: "Wang tunai di tangan"
 };
 instance.addResourceBundle("en", "Dialog", locale$3);
 instance.addResourceBundle("ms", "Dialog", locale$2);
@@ -2606,7 +2618,8 @@ const ConfirmDialog = ({
   cancelText,
   okText,
   handleClose,
-  handleConfirm
+  handleConfirm,
+  capitalize: capitalize2 = false
 }) => {
   const { t: t2 } = useTranslation("Dialog");
   return /* @__PURE__ */ jsxs(
@@ -2620,8 +2633,8 @@ const ConfirmDialog = ({
         /* @__PURE__ */ jsx(DialogTitle, { id: "alert-dialog-title", children: title }),
         description && /* @__PURE__ */ jsx(DialogContent$1, { children: /* @__PURE__ */ jsx(DialogContentText, { id: "alert-dialog-description", children: description }) }),
         /* @__PURE__ */ jsxs(DialogActions$1, { children: [
-          /* @__PURE__ */ jsx(Button$1, { onClick: handleClose, children: cancelText || t2("CANCEL") }),
-          /* @__PURE__ */ jsx(Button$1, { onClick: handleConfirm, color: "primary", autoFocus: true, children: okText || t2("OK") })
+          /* @__PURE__ */ jsx(Button$1, { onClick: handleClose, className: capitalize2 ? "capitalize" : "lowercase", children: cancelText || t2("CANCEL") }),
+          /* @__PURE__ */ jsx(Button$1, { onClick: handleConfirm, autoFocus: true, className: capitalize2 ? "capitalize" : "lowercase", children: okText || t2("OK") })
         ] })
       ]
     }
@@ -8285,9 +8298,10 @@ function CustomDialog({
   onClose,
   content,
   size,
+  maxWidth: maxWidth2,
   hideCloseIcon = false
 }) {
-  const dialogSize = size || "md";
+  const dialogSize = maxWidth2 !== void 0 ? maxWidth2 : size || "md";
   const handleClose = (_event, reason) => {
     if (hideCloseIcon && reason && reason === "backdropClick") return;
     onClose();
@@ -8302,6 +8316,7 @@ function CustomDialog({
       children: [
         /* @__PURE__ */ jsxs(DialogTitle, { children: [
           content.title,
+          content.description && /* @__PURE__ */ jsx(Typography$1, { variant: "body2", color: "text.secondary", className: "mb-5 text-14 font-400 italic", children: content.description }),
           !hideCloseIcon && /* @__PURE__ */ jsx(
             IconButton$1,
             {
@@ -8630,7 +8645,8 @@ function InfoDialog({
   color: color2 = "inherit",
   isLoading = false,
   t: t2,
-  discardText = "Cancel"
+  discardText = "Cancel",
+  buttonDataTestId
 }) {
   const handleClose = (_2, reason) => {
     if (reason && reason === "backdropClick") return;
@@ -8650,7 +8666,15 @@ function InfoDialog({
       }
     ) }),
     /* @__PURE__ */ jsxs(DialogActions$1, { className: "flex flex-col gap-10 pointer-events-auto", children: [
-      /* @__PURE__ */ jsx(CustomButton, { onClick: onButtonClick, className: "capitalize", children: isLoading ? /* @__PURE__ */ jsx(CircularProgress, { size: 24, className: "button-progress" }) : buttonText }),
+      /* @__PURE__ */ jsx(
+        CustomButton,
+        {
+          onClick: onButtonClick,
+          className: "capitalize",
+          ...buttonDataTestId && { "data-test-id": buttonDataTestId },
+          children: isLoading ? /* @__PURE__ */ jsx(CircularProgress, { size: 24, className: "button-progress" }) : buttonText
+        }
+      ),
       /* @__PURE__ */ jsx(
         Typography$1,
         {
@@ -20164,7 +20188,7 @@ function setLocalStorageItem(key, value) {
 function removeLocalStorageItem(key) {
   localStorage.removeItem(key);
 }
-function formatAmount({ num, showCurrency = true }) {
+function formatAmount(num, showCurrency = true) {
   if (num === null || num === void 0 || typeof num !== "number" && isNaN(Number(num))) {
     return showCurrency ? "RM 00.00" : "00.00";
   }
@@ -20183,9 +20207,9 @@ const getSectionTitle = (sectionName) => {
     UserIncomeDetail: "INCOME_DETAIL_REMARKS",
     UserAdditionalInformation: "ADDITONAL_INFORMATION_REMARKS",
     UserExistingFinance: "EXISTING_FINANCE_DETAIL_REMARKS",
-    UserReferral: "REFERRAL_DETAIL_REMARKS",
-    UserRelative: "RELATIVE_DETAIL_REMARKS",
-    UserNextOfKin: "NEXT_OF_KIN_DETAIL_REMARKS",
+    UserReferralDetail: "REFERRAL_DETAIL_REMARKS",
+    UserRelativeDetail: "RELATIVE_DETAIL_REMARKS",
+    UserNextofkin: "NEXT_OF_KIN_DETAIL_REMARKS",
     UserDocuments: "DOCUMENTS_REMARKS"
   };
   return sectionTitleMap[sectionName] || "";
@@ -21704,6 +21728,9 @@ function FuseMessage() {
   );
 }
 const FuseMessage$1 = memo(FuseMessage);
+const MessageOutlinedIcon = createSvgIcon(/* @__PURE__ */ jsx("path", {
+  d: "M4 4h16v12H5.17L4 17.17zm0-2c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm2 10h12v2H6zm0-3h12v2H6zm0-3h12v2H6z"
+}), "MessageOutlined");
 const PendingActionsIcon = createSvgIcon(/* @__PURE__ */ jsx("path", {
   d: "M17 12c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5m1.65 7.35L16.5 17.2V14h1v2.79l1.85 1.85zM18 3h-3.18C14.4 1.84 13.3 1 12 1s-2.4.84-2.82 2H6c-1.1 0-2 .9-2 2v15c0 1.1.9 2 2 2h6.11c-.59-.57-1.07-1.25-1.42-2H6V5h2v3h8V5h2v5.08c.71.1 1.38.31 2 .6V5c0-1.1-.9-2-2-2m-6 2c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1"
 }), "PendingActions");
@@ -21932,6 +21959,7 @@ const CustomAutocomplete = React.memo(
     getListboxProps = {},
     ref,
     disableClearable = false,
+    optionTestId,
     ...props
   }) => {
     const { t: t2 } = useTranslation("Autocomplete");
@@ -21963,8 +21991,19 @@ const CustomAutocomplete = React.memo(
     }, []);
     const renderOption = React.useCallback((props2, option) => {
       const { key, ...otherProps } = props2;
-      return /* @__PURE__ */ createElement("li", { ...otherProps, key: typeof option === "object" ? option.id : option }, typeof option === "object" ? option.label : option);
-    }, []);
+      const optionLabel = typeof option === "object" ? option.label : option;
+      const testIdPrefix = optionTestId || "autocomplete-option";
+      const testIdSafeLabel = optionLabel ? String(optionLabel).trim().replace(/\s+/g, "-") : "";
+      return /* @__PURE__ */ createElement(
+        "li",
+        {
+          ...otherProps,
+          key: typeof option === "object" ? option.id : option,
+          "data-test-id": `${testIdPrefix}-${testIdSafeLabel}`
+        },
+        optionLabel
+      );
+    }, [optionTestId]);
     const listboxProps = React.useMemo(() => ({
       onScroll: getListboxProps == null ? void 0 : getListboxProps.onScroll,
       style: {
@@ -27534,6 +27573,7 @@ function useDebounce(callback, delay) {
 const SearchableAutocomplete = memo(
   ({
     dataTestId = "",
+    optionTestId = "autocomplete-option",
     label,
     value,
     variant = "filled",
@@ -27662,6 +27702,7 @@ const SearchableAutocomplete = memo(
       CustomAutocomplete,
       {
         "data-test-id": dataTestId,
+        optionTestId,
         ref,
         label,
         variant,
@@ -27693,6 +27734,7 @@ const MemberAutoComplete = ({
   isTooltipShow = true,
   variant = "filled",
   dataTestId = "",
+  optionTestId = "autocomplete-option",
   tenantId,
   initialSearchTerm = ""
 }) => {
@@ -27736,6 +27778,7 @@ const MemberAutoComplete = ({
     SearchableAutocomplete,
     {
       dataTestId,
+      optionTestId,
       label,
       variant,
       value,
@@ -27757,9 +27800,13 @@ const defaultValues$1 = {
   assignedToUserId: ""
 };
 function RemarksDialog({
+  variant = "simple",
   sectionName,
+  sectionTitle: propSectionTitle,
   financeApplicationId,
   tenantId,
+  remarksList: propRemarksList,
+  onRemarkUpdate,
   permissions = {},
   isApplicationRejected = false,
   ReassignStaffFormComponent,
@@ -27775,7 +27822,7 @@ function RemarksDialog({
   } = permissions;
   const { t: t2 } = useTranslation("Dialog");
   const dispatch = useDispatch();
-  const sectionTitle = getSectionTitle(sectionName);
+  const sectionTitle = propSectionTitle || getSectionTitle(sectionName);
   const [open, setOpen] = useState(false);
   const [hasOpened, setHasOpened] = useState(false);
   const [localPendingCount, setLocalPendingCount] = useState(null);
@@ -27784,14 +27831,16 @@ function RemarksDialog({
     remarkId: null,
     remarkDetails: null
   });
-  const remarksList = useSelector(getRemarkListData);
+  const reduxRemarksList = useSelector(getRemarkListData);
   const isFormLoading = useSelector(getIsAddRemarkFormLoading);
+  const remarksList = variant === "simple" ? propRemarksList || [] : reduxRemarksList;
   const pendingRemarksCount = remarksList.filter(
-    (remark) => !remark.hasActionTaken && remark.sectionName === sectionName
+    (remark) => {
+      const isActionTaken = variant === "simple" ? remark.hasActionTakenByCustomer : remark.hasActionTaken;
+      return !isActionTaken && (variant === "simple" || remark.sectionName === sectionName);
+    }
   ).length;
-  const isSectionDataLoaded = !!remarksList.find(
-    (remark) => remark.sectionName === sectionName
-  );
+  const isSectionDataLoaded = variant === "simple" ? true : !!reduxRemarksList.find((remark) => remark.sectionName === sectionName);
   useEffect(() => {
     if (isSectionDataLoaded) {
       setLocalPendingCount(pendingRemarksCount);
@@ -27828,17 +27877,27 @@ function RemarksDialog({
     name: "remarkType"
   });
   useEffect(() => {
-    if (open && financeApplicationId) {
+    if (variant === "full" && open && financeApplicationId) {
       dispatch(getRemarkListByFinanceApplicationId({
         financeApplicationId,
         SectionName: sectionName
       }));
     }
-  }, [open, financeApplicationId, sectionName, dispatch]);
+  }, [variant, open, financeApplicationId, sectionName, dispatch]);
   const handleToggleRemark = (index) => {
     const remark = remarksList[index];
-    const updatedRemark = { ...remark, hasActionTaken: !remark.hasActionTaken };
-    dispatch(updateRemark(updatedRemark));
+    if (variant === "simple") {
+      const updatedRemark = {
+        ...remark,
+        hasActionTakenByCustomer: !remark.hasActionTakenByCustomer
+      };
+      if (onRemarkUpdate) {
+        onRemarkUpdate(updatedRemark);
+      }
+    } else {
+      const updatedRemark = { ...remark, hasActionTaken: !remark.hasActionTaken };
+      dispatch(updateRemark(updatedRemark));
+    }
   };
   const handleOpen = () => {
     setOpen(true);
@@ -27890,19 +27949,25 @@ function RemarksDialog({
     }
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Badge, { badgeContent: displayCount, color: "error", children: /* @__PURE__ */ jsx(
-      Button$1,
-      {
-        "data-test-id": dataTestId,
-        className: "rounded",
-        variant: "contained",
-        size: "small",
-        startIcon: /* @__PURE__ */ jsx(PendingActionsIcon, {}),
-        onClick: handleOpen,
-        sx: remarksButtonStyle,
-        children: t2("REMARKS")
-      }
-    ) }),
+    variant === "simple" ? (
+      // Simple variant: Icon button trigger
+      remarksList.length > 0 && /* @__PURE__ */ jsx(IconButton$1, { onClick: handleOpen, className: "m-0 p-3", children: /* @__PURE__ */ jsx(Badge, { badgeContent: remarksList.length, color: "error", className: "text-white", children: /* @__PURE__ */ jsx(MessageOutlinedIcon, { color: "warning" }) }) })
+    ) : (
+      // Full variant: Button trigger
+      /* @__PURE__ */ jsx(Badge, { badgeContent: displayCount, color: "error", children: /* @__PURE__ */ jsx(
+        Button$1,
+        {
+          "data-test-id": dataTestId,
+          className: "rounded",
+          variant: "contained",
+          size: "small",
+          startIcon: /* @__PURE__ */ jsx(PendingActionsIcon, {}),
+          onClick: handleOpen,
+          sx: remarksButtonStyle,
+          children: t2("REMARKS")
+        }
+      ) })
+    ),
     /* @__PURE__ */ jsxs(
       Dialog$1,
       {
@@ -27932,99 +27997,103 @@ function RemarksDialog({
             )
           ] }),
           /* @__PURE__ */ jsxs(DialogContent$1, { children: [
-            canViewRemarks && ((remarksList == null ? void 0 : remarksList.length) === 0 ? /* @__PURE__ */ jsx(Typography$1, { variant: "body1", align: "center", className: "mb-8", children: t2("NO_REMARKS_ADDED") }) : remarksList == null ? void 0 : remarksList.map((remark, index) => /* @__PURE__ */ jsxs("div", { className: "mb-8", children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+            canViewRemarks && ((remarksList == null ? void 0 : remarksList.length) === 0 ? /* @__PURE__ */ jsx(Typography$1, { variant: "body1", align: "center", className: "mb-8", children: variant === "simple" ? t2("NO_REMARK") : t2("NO_REMARKS_ADDED") }) : remarksList == null ? void 0 : remarksList.map((remark, index) => {
+              const isChecked = variant === "simple" ? remark.hasActionTakenByCustomer : remark.hasActionTaken;
+              return /* @__PURE__ */ jsxs("div", { className: "mb-8", children: [
                 /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
-                  canToggleAction && /* @__PURE__ */ jsx(
-                    Tooltip,
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+                    canToggleAction && /* @__PURE__ */ jsx(
+                      Tooltip,
+                      {
+                        title: isApplicationRejected ? t2("REJECTED_TOOLTIP") : "",
+                        children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+                          Checkbox$1,
+                          {
+                            checked: isChecked,
+                            onChange: () => handleToggleRemark(index),
+                            disabled: isApplicationRejected
+                          }
+                        ) })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsx(Typography$1, { variant: "body1", children: isChecked ? /* @__PURE__ */ jsx("s", { children: remark.remark }) : remark.remark }) })
+                  ] }),
+                  variant === "full" && /* @__PURE__ */ jsx("div", { className: "ml-10", children: /* @__PURE__ */ jsx(
+                    Chip$1,
                     {
-                      title: isApplicationRejected ? t2("REJECTED_TOOLTIP") : "",
-                      children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-                        Checkbox$1,
-                        {
-                          checked: remark.hasActionTaken,
-                          onChange: () => handleToggleRemark(index),
-                          disabled: isApplicationRejected
-                        }
-                      ) })
+                      sx: {
+                        backgroundColor: (remark == null ? void 0 : remark.remarkType) === "Internal" ? themesConfig.internalChipBg || "#90EE90" : themesConfig.externalChipBg || "#87CEEB"
+                      },
+                      size: "small",
+                      label: remark.remarkType
                     }
-                  ),
-                  /* @__PURE__ */ jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsx(Typography$1, { variant: "body1", children: remark.remark }) })
+                  ) })
                 ] }),
-                /* @__PURE__ */ jsx("div", { className: "ml-10", children: /* @__PURE__ */ jsx(
-                  Chip$1,
+                variant === "full" && /* @__PURE__ */ jsxs(
+                  "div",
                   {
-                    sx: {
-                      backgroundColor: (remark == null ? void 0 : remark.remarkType) === "Internal" ? themesConfig.internalChipBg || "#90EE90" : themesConfig.externalChipBg || "#87CEEB"
-                    },
-                    size: "small",
-                    label: remark.remarkType
-                  }
-                ) })
-              ] }),
-              /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  className: `flex items-center justify-between ${!canToggleAction ? "ml-40" : ""} mb-10`,
-                  children: [
-                    (remark == null ? void 0 : remark.createdBy) && /* @__PURE__ */ jsxs(
-                      Typography$1,
-                      {
-                        variant: "body2",
-                        className: "italic text-sm text-grey-700",
-                        children: [
-                          t2("CREATED_BY"),
-                          " : ",
-                          remark == null ? void 0 : remark.createdBy
-                        ]
-                      }
-                    ),
-                    (remark == null ? void 0 : remark.assignedToUserName) && /* @__PURE__ */ jsxs(
-                      Typography$1,
-                      {
-                        variant: "body2",
-                        className: "italic text-sm text-grey-700",
-                        children: [
-                          t2("ASSIGN_TO"),
-                          " : ",
-                          remark.assignedToUserName,
-                          ReassignStaffFormComponent && /* @__PURE__ */ jsx(
-                            IconButton$1,
-                            {
-                              onClick: (event) => handleReassignStaffMember(event, remark),
-                              size: "small",
-                              children: /* @__PURE__ */ jsx(EditIcon, { fontSize: "small" })
-                            }
-                          )
-                        ]
-                      }
-                    ),
-                    ReassignStaffFormComponent && (popoverState == null ? void 0 : popoverState.remarkDetails) && /* @__PURE__ */ jsx(
-                      ReassignStaffFormComponent,
-                      {
-                        open: popoverState.remarkId === remark.id,
-                        anchorEl: popoverState.anchorEl,
-                        onClose: handleCloseReassignStaffMemberPopover,
-                        remarkDetails: popoverState.remarkDetails,
-                        onReassign: (remarkId, newUserId) => {
-                          dispatch(reassignStaffMember(remarkId, newUserId, remarksList));
+                    className: `flex items-center justify-between ${!canToggleAction ? "ml-40" : ""} mb-10`,
+                    children: [
+                      (remark == null ? void 0 : remark.createdBy) && /* @__PURE__ */ jsxs(
+                        Typography$1,
+                        {
+                          variant: "body2",
+                          className: "italic text-sm text-grey-700",
+                          children: [
+                            t2("CREATED_BY"),
+                            " : ",
+                            remark == null ? void 0 : remark.createdBy
+                          ]
                         }
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      Typography$1,
-                      {
-                        variant: "body2",
-                        className: "italic ml-2 text-sm text-grey-700",
-                        children: remark.created
-                      }
-                    )
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsx(Divider, {})
-            ] }, remark.id))),
-            canCreateRemark && !isApplicationRejected && /* @__PURE__ */ jsxs(Paper$1, { elevation: 3, className: "p-20 mt-20", children: [
+                      ),
+                      (remark == null ? void 0 : remark.assignedToUserName) && /* @__PURE__ */ jsxs(
+                        Typography$1,
+                        {
+                          variant: "body2",
+                          className: "italic text-sm text-grey-700",
+                          children: [
+                            t2("ASSIGN_TO"),
+                            " : ",
+                            remark.assignedToUserName,
+                            ReassignStaffFormComponent && /* @__PURE__ */ jsx(
+                              IconButton$1,
+                              {
+                                onClick: (event) => handleReassignStaffMember(event, remark),
+                                size: "small",
+                                children: /* @__PURE__ */ jsx(EditIcon, { fontSize: "small" })
+                              }
+                            )
+                          ]
+                        }
+                      ),
+                      ReassignStaffFormComponent && (popoverState == null ? void 0 : popoverState.remarkDetails) && /* @__PURE__ */ jsx(
+                        ReassignStaffFormComponent,
+                        {
+                          open: popoverState.remarkId === remark.id,
+                          anchorEl: popoverState.anchorEl,
+                          onClose: handleCloseReassignStaffMemberPopover,
+                          remarkDetails: popoverState.remarkDetails,
+                          onReassign: (remarkId, newUserId) => {
+                            dispatch(reassignStaffMember(remarkId, newUserId, remarksList));
+                          }
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        Typography$1,
+                        {
+                          variant: "body2",
+                          className: "italic ml-2 text-sm text-grey-700",
+                          children: remark.created
+                        }
+                      )
+                    ]
+                  }
+                ),
+                variant === "simple" && remark.created && /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(Typography$1, { variant: "body2", className: "ml-auto", children: remark.created }) }),
+                /* @__PURE__ */ jsx(Divider, {})
+              ] }, remark.id);
+            })),
+            variant === "full" && canCreateRemark && !isApplicationRejected && /* @__PURE__ */ jsxs(Paper$1, { elevation: 3, className: "p-20 mt-20", children: [
               /* @__PURE__ */ jsx(Typography$1, { variant: "h5", gutterBottom: true, children: t2("ADD_REMARK") }),
               /* @__PURE__ */ jsx("form", { onSubmit: handleSubmit(onSubmit), children: /* @__PURE__ */ jsxs(Grid$1, { container: true, justifyContent: "space-between", spacing: 2, children: [
                 /* @__PURE__ */ jsxs(Grid$1, { item: true, xs: 12, md: 6, children: [
@@ -28227,12 +28296,14 @@ const CommonStatusChangeDialog = ({
   );
 };
 function shouldShowButton(loginUserDetail, loginUserRoles2, applicationDetailsData) {
-  var _a, _b, _c, _d;
+  var _a, _b, _c, _d, _e, _f;
   const isAdmin = ((_a = loginUserDetail == null ? void 0 : loginUserDetail.data) == null ? void 0 : _a.slug) === loginUserRoles2.Admin;
   const isLawyer = ((_b = loginUserDetail == null ? void 0 : loginUserDetail.data) == null ? void 0 : _b.slug) === loginUserRoles2.Lawyer;
-  const isAdminNotSigned = !((_c = applicationDetailsData == null ? void 0 : applicationDetailsData.digitalSignatureDetails) == null ? void 0 : _c.isAdminSinged);
-  const isLawyerNotSigned = !((_d = applicationDetailsData == null ? void 0 : applicationDetailsData.digitalSignatureDetails) == null ? void 0 : _d.isLawyerSinged);
-  return isAdmin && isAdminNotSigned || isLawyer && isLawyerNotSigned;
+  const isUser = ((_c = loginUserDetail == null ? void 0 : loginUserDetail.data) == null ? void 0 : _c.slug) === loginUserRoles2.User;
+  const isAdminNotSigned = !((_d = applicationDetailsData == null ? void 0 : applicationDetailsData.digitalSignatureDetails) == null ? void 0 : _d.isAdminSinged);
+  const isLawyerNotSigned = !((_e = applicationDetailsData == null ? void 0 : applicationDetailsData.digitalSignatureDetails) == null ? void 0 : _e.isLawyerSinged);
+  const isCustomerNotSigned = !((_f = applicationDetailsData == null ? void 0 : applicationDetailsData.digitalSignatureDetails) == null ? void 0 : _f.isCustomerSinged);
+  return isAdmin && isAdminNotSigned || isLawyer && isLawyerNotSigned || isUser && isCustomerNotSigned;
 }
 const PDFPreviewForTheSignature = ({
   filePath,
@@ -28244,43 +28315,91 @@ const PDFPreviewForTheSignature = ({
   applicationDetailsData,
   loginUserDetail,
   loginUserRoles: loginUserRoles2,
-  ColoredSubmitButton
+  ColoredSubmitButton,
+  financeCalculation,
+  t: t2 = (key) => key
 }) => {
   const showButton = shouldShowButton(
     loginUserDetail,
     loginUserRoles2,
     applicationDetailsData
   );
-  return /* @__PURE__ */ jsx(Dialog$1, { open, onClose, maxWidth: "lg", fullWidth: true, children: /* @__PURE__ */ jsxs(DialogContent$1, { className: "p-0 h-[80vh]", children: [
+  return /* @__PURE__ */ jsx(Dialog$1, { open, onClose, maxWidth: "lg", fullWidth: true, children: /* @__PURE__ */ jsxs(DialogContent$1, { className: "p-0", children: [
     /* @__PURE__ */ jsx(
       "embed",
       {
         src: filePath,
         type: "application/pdf",
         width: "100%",
-        height: "100%"
+        style: { height: "80vh" }
       }
     ),
-    showButton && /* @__PURE__ */ jsx("div", { className: "sticky bottom-0 bg-white w-full border-t-1 border-solid border-grey-500 px-10 py-10 text-end", children: /* @__PURE__ */ jsx(
-      ColoredSubmitButton,
-      {
-        variant: "contained",
-        disabled: isButtonLoading,
-        onClick: onConfirm,
-        isLoading: isButtonLoading,
-        className: "rounded-6",
-        text: bottomButtonLabel
-      }
-    ) })
+    showButton && /* @__PURE__ */ jsxs("div", { className: "sticky bottom-0 bg-white w-full border-t-1 border-solid border-grey-500 px-10 py-10 text-end", children: [
+      financeCalculation && /* @__PURE__ */ jsxs(Grid$1, { container: true, spacing: 2, children: [
+        /* @__PURE__ */ jsx(Grid$1, { item: true, xs: 12, sm: 12, md: 4, className: "flex justify-start", children: /* @__PURE__ */ jsxs(Typography$1, { variant: "body1", children: [
+          /* @__PURE__ */ jsxs("strong", { children: [
+            t2("LOAN_AMOUNT"),
+            ": "
+          ] }),
+          formatAmount(financeCalculation == null ? void 0 : financeCalculation.loanAmount)
+        ] }) }),
+        /* @__PURE__ */ jsx(Grid$1, { item: true, xs: 12, sm: 12, md: 4, className: "flex justify-start", children: /* @__PURE__ */ jsxs(Typography$1, { variant: "body1", children: [
+          /* @__PURE__ */ jsxs("strong", { children: [
+            t2("INTEREST_RATE"),
+            ": "
+          ] }),
+          formatAmount(financeCalculation == null ? void 0 : financeCalculation.interestFees)
+        ] }) }),
+        /* @__PURE__ */ jsx(Grid$1, { item: true, xs: 12, sm: 12, md: 4, className: "flex justify-start", children: /* @__PURE__ */ jsxs(Typography$1, { variant: "body1", children: [
+          /* @__PURE__ */ jsxs("strong", { children: [
+            t2("FEES_DEDUCTION"),
+            ": "
+          ] }),
+          formatAmount(financeCalculation == null ? void 0 : financeCalculation.feesDeduction)
+        ] }) }),
+        /* @__PURE__ */ jsx(Grid$1, { item: true, xs: 12, sm: 12, md: 4, className: "flex justify-start", children: /* @__PURE__ */ jsxs(Typography$1, { variant: "body1", children: [
+          /* @__PURE__ */ jsxs("strong", { children: [
+            t2("REPAYMENT_AMOUNT"),
+            ": "
+          ] }),
+          formatAmount(financeCalculation == null ? void 0 : financeCalculation.repaymentAmount)
+        ] }) }),
+        /* @__PURE__ */ jsx(Grid$1, { item: true, xs: 12, sm: 12, md: 4, className: "flex justify-start", children: /* @__PURE__ */ jsxs(Typography$1, { variant: "body1", children: [
+          /* @__PURE__ */ jsxs("strong", { children: [
+            t2("CASH_IN_HAND"),
+            ": "
+          ] }),
+          formatAmount(financeCalculation == null ? void 0 : financeCalculation.cashInHand)
+        ] }) })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "flex justify-end mt-10", children: /* @__PURE__ */ jsx(
+        ColoredSubmitButton,
+        {
+          variant: "contained",
+          disabled: isButtonLoading,
+          onClick: onConfirm,
+          isLoading: isButtonLoading,
+          className: "rounded-6",
+          text: bottomButtonLabel
+        }
+      ) })
+    ] })
   ] }) });
 };
-const CustomCheckbox = ({ label, onChange, ...props }) => {
-  const [checked, setChecked] = React__default.useState(false);
-  const handleChange = (isChecked) => {
-    setChecked(isChecked);
-    if (onChange) {
-      onChange(isChecked);
+const CustomCheckbox = ({
+  label,
+  onChange,
+  checked: controlledChecked,
+  ...props
+}) => {
+  const [internalChecked, setInternalChecked] = React__default.useState(false);
+  const isControlled = controlledChecked !== void 0;
+  const isChecked = isControlled ? controlledChecked : internalChecked;
+  const handleChange = (newChecked) => {
+    if (!isControlled) {
+      setInternalChecked(newChecked);
     }
+    onChange == null ? void 0 : onChange(newChecked);
   };
   return /* @__PURE__ */ jsx(Fragment, { children: label ? /* @__PURE__ */ jsx(
     FormControlLabel,
@@ -28288,7 +28407,7 @@ const CustomCheckbox = ({ label, onChange, ...props }) => {
       control: /* @__PURE__ */ jsx(
         Checkbox$1,
         {
-          checked,
+          checked: isChecked,
           onChange: (event) => handleChange(event.target.checked),
           ...props
         }
@@ -28298,30 +28417,40 @@ const CustomCheckbox = ({ label, onChange, ...props }) => {
   ) : /* @__PURE__ */ jsx(
     Checkbox$1,
     {
-      checked,
+      checked: isChecked,
       onChange: (event) => handleChange(event.target.checked),
       ...props
     }
   ) });
 };
+instance.addResourceBundle("en", "Dialog", locale$3);
+instance.addResourceBundle("ms", "Dialog", locale$2);
 function DocumentSigningDialog({
   financeDetail,
   loginUserDetail,
   digitalSignatureRole,
-  ColoredSubmitButton
+  ColoredSubmitButton,
+  financeCalculation
 }) {
   const { t: t2 } = useTranslation("Dialog");
   const open = useSelector(getIsDocumentSignatureDialogOpen);
   const documentSignJPDF = useSelector(getDocumentSignJPDF);
   const isProcessSignatureLoading = useSelector(getIsProcessSignatureLoading);
+  const activeFinanceDetail = useSelector(getActiveFinanceDetail);
   const dispatch = useDispatch();
   const onClose = () => {
     dispatch(setIsDocumentSignatureDialogOpen(false));
   };
   const handleButtonClick = () => {
+    let signatureRole = digitalSignatureRole.User;
+    if (loginUserDetail.data.slug === loginUserRoles.Admin) {
+      signatureRole = digitalSignatureRole.Admin;
+    } else if (loginUserDetail.data.slug === loginUserRoles.Lawyer) {
+      signatureRole = digitalSignatureRole.Lawyer;
+    }
     const request_data = {
       FinanceApplicationId: financeDetail.id,
-      SignatureRole: loginUserDetail.data.slug === loginUserRoles.Admin ? digitalSignatureRole.Admin : digitalSignatureRole.Lawyer
+      SignatureRole: signatureRole
     };
     dispatch(DigitalProcessSignature(request_data));
   };
@@ -28428,10 +28557,12 @@ function DocumentSigningDialog({
           onClose: () => handlePDFPreviewClose(),
           bottomButtonLabel: t2("SIGN_DOCUMENT"),
           onConfirm: handleButtonClick,
-          applicationDetailsData: financeDetail,
+          applicationDetailsData: activeFinanceDetail || financeDetail,
           loginUserDetail,
           loginUserRoles,
-          ColoredSubmitButton
+          ColoredSubmitButton,
+          financeCalculation,
+          t: t2
         }
       )
     ] })
@@ -57287,31 +57418,69 @@ const CustomDatePicker = ({
   minDate,
   disabled = false,
   required = false,
-  locale: locale$12 = locale
+  locale: locale$12 = locale,
+  dataTestId,
+  iconColor,
+  open,
+  anchorEl,
+  onClose,
+  hideTextField = false,
+  applyCustomStyling = false,
+  style: style2
 }) => {
-  return /* @__PURE__ */ jsx(LocalizationProvider, { dateAdapter: AdapterDateFns, adapterLocale: locale$12, children: /* @__PURE__ */ jsx(
-    DatePicker,
-    {
-      value,
-      onChange,
-      maxDate,
-      minDate,
-      disabled,
-      className: "w-full",
-      slotProps: {
-        actionBar: {
-          actions: ["clear", "cancel"]
+  const conditionalStyling = applyCustomStyling && style2 ? {
+    ...style2,
+    "& .MuiFilledInput-root": {
+      backgroundColor: "#ffffff"
+    }
+  } : style2 || {};
+  const datePickerProps = {
+    value,
+    onChange,
+    maxDate,
+    minDate,
+    disabled,
+    className: "w-full",
+    sx: {
+      "& .MuiSvgIcon-root": {
+        color: iconColor
+      }
+    },
+    slotProps: {
+      actionBar: {
+        actions: ["clear", "cancel"]
+      },
+      textField: hideTextField ? { sx: { display: "none" } } : {
+        label,
+        variant,
+        error: !!error,
+        helperText: error || "",
+        required,
+        inputProps: {
+          "data-test-id": dataTestId
         },
-        textField: {
-          label,
-          variant,
-          error: !!error,
-          helperText: error || "",
-          required
-        }
+        sx: conditionalStyling
       }
     }
-  ) });
+  };
+  if (hideTextField) {
+    datePickerProps.open = open;
+    datePickerProps.onClose = onClose;
+    datePickerProps.slotProps.popper = {
+      anchorEl,
+      placement: "top-start"
+    };
+  }
+  return /* @__PURE__ */ jsx(
+    Tooltip,
+    {
+      title: label,
+      arrow: true,
+      TransitionComponent: Zoom,
+      placement: "top-start",
+      children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(LocalizationProvider, { dateAdapter: AdapterDateFns, adapterLocale: locale$12, children: /* @__PURE__ */ jsx(DatePicker, { ...datePickerProps }) }) })
+    }
+  );
 };
 const defaultConfig = {
   apiUrl: "",
@@ -57357,6 +57526,7 @@ export {
   CommonTextField,
   ConfirmDialog,
   CustomAutocomplete,
+  CustomCheckbox,
   CustomDatePicker,
   CustomDialog,
   CustomPopover,
@@ -57375,6 +57545,7 @@ export {
   PdfDialog,
   PreviewMedia,
   RemarksDialog,
+  SaveButton,
   SearchableAutocomplete,
   TenantAutocomplete,
   addSectionWiseRemark,