@djb25/digit-ui-module-wt 1.0.17 → 1.0.19

package/dist/index.modern.js

@@ -1,7 +1,7 @@
 import { TickMark, ArrowDown, MobileNumber, CardLabelError, TextInput, Dropdown, DatePicker, SubmitBar, Card, Table, Loader, Toast, AppContainer, ModuleHeader, ArrowLeft, PrivateRoute, HomeIcon, KeyNote, Modal, CardHeader, CardText, FormStep, CardLabel, RadioButtons, UploadFile, TextArea, CheckBox, CardSubHeader, StatusTable, Row, GenericFileIcon, LinkButton, EditIcon, Banner, CHBIcon, EmployeeModuleCard, CloseSvg, Label, LinkLabel, ActionBar, DetailsCard, SearchAction, FilterAction, PopUp, ShippingTruck, CustomNameDropdown, MultiSelectDropdown, LabelFieldPair, AddIcon, Menu, Header, TelePhone, DisplayPhotos, CardSectionHeader, CheckPoint, ConnectingCheckPoints, MultiLink, Localities, RemoveableTag, FormComposer, PDFSvg, MultiUploadWrapper, Close as Close$g, BreakLine, InfoBannerIcon, ViewsIcon, ButtonSelector, LocationIcon, CitizenHomeCard, PTIcon, ApplicantDetails, AddressDetails } from '@djb25/digit-ui-react-components';
 import React, { useState, useMemo, useCallback, useEffect, Fragment, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useLocation, useHistory, useRouteMatch, Switch, Route, Redirect, Link, useParams } from 'react-router-dom';
+import { useLocation, useRouteMatch, useHistory, Switch, Route, Redirect, Link, useParams } from 'react-router-dom';
 import { useQueryClient } from 'react-query';
 import { useForm, Controller } from 'react-hook-form';
 import { io } from 'socket.io-client';
@@ -137,7 +137,6 @@ const VerticalTimeline = ({
     t
   } = useTranslation();
   const location = useLocation();
-  const history = useHistory();
   const currentRoute = location.pathname.split("/").pop();
   if (currentRoute === "info") return null;
   const steps = config.filter(item => item.timeLine && item.timeLine.length > 0).reduce((acc, item) => {
@@ -156,9 +155,9 @@ const VerticalTimeline = ({
     return acc;
   }, []).sort((a, b) => a.stepNumber - b.stepNumber);
   steps.push({
-    key: 'final-submit',
-    label: 'Review & Submit',
-    routes: ['check', 'wt-acknowledgement', 'mt-acknowledgement', 'tp-acknowledgement'],
+    key: "final-submit",
+    label: "Review & Submit",
+    routes: ["check", "wt-acknowledgement", "mt-acknowledgement", "tp-acknowledgement"],
     stepNumber: steps.length + 1
   });
   const currentStepIndex = steps.findIndex(step => step.routes.includes(currentRoute));
@@ -166,15 +165,17 @@ const VerticalTimeline = ({
   const handleStepClick = (route, index) => {};
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: "vertical-timeline-container"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "vertical-timeline-wrapper"
   }, steps.map((step, index) => {
     const isCompleted = index < activeStepIndex;
     const isActive = index === activeStepIndex;
     return /*#__PURE__*/React.createElement("div", {
       key: index,
-      className: `vertical-timeline-step ${isCompleted ? 'completed' : ''} ${isActive ? 'active' : ''}`,
+      className: `vertical-timeline-step ${isCompleted ? "completed" : ""} ${isActive ? "active" : ""}`,
       onClick: () => handleStepClick()
     }, /*#__PURE__*/React.createElement("div", {
-      className: `vertical-timeline-connector ${index < activeStepIndex ? 'completed' : ''}`
+      className: `vertical-timeline-connector ${index < activeStepIndex ? "completed" : ""}`
     }), /*#__PURE__*/React.createElement("div", {
       className: "vertical-timeline-pill"
     }, isCompleted ? /*#__PURE__*/React.createElement(TickMark, null) : step.stepNumber), /*#__PURE__*/React.createElement("div", {
@@ -182,7 +183,7 @@ const VerticalTimeline = ({
     }, /*#__PURE__*/React.createElement("div", {
       className: "vertical-timeline-label"
     }, t(step.label))));
-  })));
+  }))));
 };
 
 const WTCreate = () => {
@@ -352,26 +353,11 @@ const WTCreate = () => {
   const MTAcknowledgement = (_Digit3 = Digit) === null || _Digit3 === void 0 ? void 0 : (_Digit3$ComponentRegi = _Digit3.ComponentRegistryService) === null || _Digit3$ComponentRegi === void 0 ? void 0 : _Digit3$ComponentRegi.getComponent("MTAcknowledgement");
   const TPAcknowledgement = (_Digit4 = Digit) === null || _Digit4 === void 0 ? void 0 : (_Digit4$ComponentRegi = _Digit4.ComponentRegistryService) === null || _Digit4$ComponentRegi === void 0 ? void 0 : _Digit4$ComponentRegi.getComponent("TPAcknowledgement");
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    style: {
-      display: "flex",
-      width: "100%",
-      gap: "24px"
-    }
-  }, !pathname.includes("/info") && /*#__PURE__*/React.createElement("div", {
-    style: {
-      flex: "0 0 280px",
-      background: "#fff",
-      padding: "20px 0",
-      boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
-      borderRadius: "4px"
-    }
-  }, /*#__PURE__*/React.createElement(VerticalTimeline, {
+    className: "employee-form-section-wrapper"
+  }, !pathname.includes("/info") && /*#__PURE__*/React.createElement(VerticalTimeline, {
     config: config
-  })), /*#__PURE__*/React.createElement("div", {
-    style: {
-      flex: "1",
-      overflowY: "auto"
-    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "employee-form-section"
   }, /*#__PURE__*/React.createElement(Switch, null, config.map((routeObj, index) => {
     var _userDetails$user;
     const {
@@ -2547,31 +2533,16 @@ const SearchApplication = ({
     }, t("ES_COMMON_CLEAR_SEARCH"));
   };
   return /*#__PURE__*/React.createElement("form", {
-    onSubmit: handleSubmit(onSubmitInput)
-  }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: "search-container",
-    style: {
-      width: "auto",
-      marginBottom: "16px",
-      marginLeft: isInboxPage ? "" : "revert"
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "search-complaint-container",
-    style: {
-      width: "100%"
-    }
-  }, (type === "mobile" || mobileView) && /*#__PURE__*/React.createElement("div", {
+    onSubmit: handleSubmit(onSubmitInput),
+    className: "search-form-wrapper search-complaint-container"
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, (type === "mobile" || mobileView) && /*#__PURE__*/React.createElement("div", {
     className: "complaint-header"
   }, /*#__PURE__*/React.createElement("h2", null, t("ES_COMMON_SEARCH_BY")), /*#__PURE__*/React.createElement("span", {
     onClick: onClose
   }, /*#__PURE__*/React.createElement(CloseSvg, null))), /*#__PURE__*/React.createElement("div", {
-    className: "complaint-input-container for-pt " + (!isInboxPage ? "for-search" : ""),
-    style: {
-      width: "100%",
-      display: "grid"
-    }
+    className: "formcomposer-section-grid"
   }, searchFields === null || searchFields === void 0 ? void 0 : (_searchFields$filter = searchFields.filter(e => true)) === null || _searchFields$filter === void 0 ? void 0 : _searchFields$filter.map((input, index) => {
-    var _formState$dirtyField, _formState$errors, _formState$errors$inp;
+    var _formState$dirtyField, _formState$errors, _formState$errors$inp, _formState$errors2, _formState$errors2$in;
     return /*#__PURE__*/React.createElement("div", {
       key: input.name,
       className: "input-fields"
@@ -2600,7 +2571,7 @@ const SearchApplication = ({
       name: input.name,
       control: control,
       defaultValue: ""
-    })), formState !== null && formState !== void 0 && (_formState$dirtyField = formState.dirtyFields) !== null && _formState$dirtyField !== void 0 && _formState$dirtyField[input.name] ? /*#__PURE__*/React.createElement("span", {
+    })), formState !== null && formState !== void 0 && (_formState$dirtyField = formState.dirtyFields) !== null && _formState$dirtyField !== void 0 && _formState$dirtyField[input.name] && formState !== null && formState !== void 0 && (_formState$errors = formState.errors) !== null && _formState$errors !== void 0 && (_formState$errors$inp = _formState$errors[input.name]) !== null && _formState$errors$inp !== void 0 && _formState$errors$inp.message ? /*#__PURE__*/React.createElement("span", {
       style: {
         fontWeight: "700",
         color: "rgba(212, 53, 28)",
@@ -2609,27 +2580,20 @@ const SearchApplication = ({
         fontSize: "12px"
       },
       className: "inbox-search-form-error"
-    }, formState === null || formState === void 0 ? void 0 : (_formState$errors = formState.errors) === null || _formState$errors === void 0 ? void 0 : (_formState$errors$inp = _formState$errors[input.name]) === null || _formState$errors$inp === void 0 ? void 0 : _formState$errors$inp.message) : null);
-  }), isInboxPage && /*#__PURE__*/React.createElement("div", {
-    style: {
-      gridColumn: "2/3",
-      textAlign: "right",
-      paddingTop: "10px",
-      padding: "10px"
-    },
-    className: "input-fields"
-  }, /*#__PURE__*/React.createElement("div", null, clearAll())), type === "desktop" && !mobileView && /*#__PURE__*/React.createElement("div", {
-    style: {
-      maxWidth: "unset",
-      marginLeft: "unset"
-    },
-    className: "search-submit-wrapper"
-  }, /*#__PURE__*/React.createElement(SubmitBar, {
-    className: "submit-bar-search",
-    label: t("ES_COMMON_SEARCH"),
+    }, formState === null || formState === void 0 ? void 0 : (_formState$errors2 = formState.errors) === null || _formState$errors2 === void 0 ? void 0 : (_formState$errors2$in = _formState$errors2[input.name]) === null || _formState$errors2$in === void 0 ? void 0 : _formState$errors2$in.message) : null);
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "formcomposer-section-button"
+  }, isInboxPage ? /*#__PURE__*/React.createElement("div", {
+    className: "generic-button clear-search"
+  }, /*#__PURE__*/React.createElement("p", {
+    onClick: clearSearch
+  }, t("ES_COMMON_CLEAR_SEARCH"))) : /*#__PURE__*/React.createElement("div", null, clearAll()), type === "desktop" && !mobileView && /*#__PURE__*/React.createElement(SubmitBar, {
+    className: "generic-button",
     disabled: !!Object.keys(formState.errors).length || formValueEmpty(),
-    submit: true
-  }), !isInboxPage && /*#__PURE__*/React.createElement("div", null, clearAll()))))), (type === "mobile" || mobileView) && /*#__PURE__*/React.createElement(ActionBar, {
+    label: t("ES_COMMON_SEARCH"),
+    submit: true,
+    form: "search-form"
+  })), (type === "mobile" || mobileView) && /*#__PURE__*/React.createElement(ActionBar, {
     className: "clear-search-container"
   }, /*#__PURE__*/React.createElement("button", {
     className: "clear-search",
@@ -3559,6 +3523,7 @@ const AddTripModal = ({
 const FixedPointScheduleManagement = ({
   ...props
 }) => {
+  var _data$;
   const {
     t
   } = useTranslation();
@@ -3587,12 +3552,50 @@ const FixedPointScheduleManagement = ({
     value: "all"
   });
   const [editingRowIndex, setEditingRowIndex] = useState(null);
-  const [filters, setFilters] = useState({});
+  const [pageOffset, setPageOffset] = useState(0);
+  const [pageSize, setPageSize] = useState(10);
+  const [filters, setFilters] = useState({
+    limit: 10,
+    offset: 0
+  });
   const {
     isLoading,
     data: scheduleData,
     refetch: reSearch
   } = Digit.Hooks.wt.useFixedPointScheduleSearch(tenantId, filters);
+  const {
+    data: fixedPointData,
+    isLoading: isFpLoading
+  } = Digit.Hooks.wt.useFixedPointSearchAPI({
+    tenantId,
+    filters: {
+      offset: 0,
+      limit: 100
+    }
+  });
+  const {
+    data: allSchedulesData
+  } = Digit.Hooks.wt.useFixedPointScheduleSearch(tenantId, {
+    limit: 1000,
+    offset: 0
+  });
+  const fixedPoints = React.useMemo(() => {
+    const fromFpApi = (fixedPointData === null || fixedPointData === void 0 ? void 0 : fixedPointData.fixedPointTimeTableDetails) || (fixedPointData === null || fixedPointData === void 0 ? void 0 : fixedPointData.waterTankerBookingDetail) || (fixedPointData === null || fixedPointData === void 0 ? void 0 : fixedPointData.fixedPoints) || [];
+    const fromScheduleApi = (allSchedulesData === null || allSchedulesData === void 0 ? void 0 : allSchedulesData.fixedPointTimeTableDetails) || [];
+    const combinedData = [...fromFpApi, ...fromScheduleApi];
+    const points = combinedData.map(fp => {
+      var _fp$applicantDetail;
+      return {
+        label: fp.fixedPointCode || fp.name || ((_fp$applicantDetail = fp.applicantDetail) === null || _fp$applicantDetail === void 0 ? void 0 : _fp$applicantDetail.name) || fp.bookingId,
+        value: fp.fixedPointCode || fp.bookingId
+      };
+    }).filter(p => p.label && p.value);
+    const uniquePoints = points.filter((v, i, a) => a.findIndex(t => t.value === v.value) === i);
+    return [{
+      label: t("WT_ALL_FIXED_POINTS") !== "WT_ALL_FIXED_POINTS" ? t("WT_ALL_FIXED_POINTS") : "All Fixed Points",
+      value: "all"
+    }, ...uniquePoints];
+  }, [fixedPointData, allSchedulesData, t]);
   const {
     mutate: createSchedule
   } = Digit.Hooks.wt.useCreateFixedPointSchedule(tenantId);
@@ -3648,20 +3651,42 @@ const FixedPointScheduleManagement = ({
         returnToFpl: item.timeOfArrivingBackFplAfterDelivery,
         volume: item.volumeWaterTobeDelivery,
         vehicle: item.vehicleId,
-        active: item.isEnable ? "Y" : "N"
+        active: item.isEnable ? "Y" : "N",
+        totalCount: item.totalCount
       }));
       setData(mappedData);
     }
   }, [scheduleData]);
-  const handleSearch = (customFilters = null) => {
+  const fetchNextPage = () => {
+    setPageOffset(prevState => prevState + pageSize);
+  };
+  const fetchPrevPage = () => {
+    setPageOffset(prevState => prevState - pageSize);
+  };
+  const handlePageSizeChange = e => {
+    setPageSize(Number(e.target.value));
+  };
+  const handleSearch = (customFilters = null, offset = null) => {
     var _day$value;
-    setFilters(customFilters || {
+    const searchFilters = customFilters || {
       fixedPointCode: (fixedPoint === null || fixedPoint === void 0 ? void 0 : fixedPoint.value) === "all" ? "" : fixedPoint === null || fixedPoint === void 0 ? void 0 : fixedPoint.value,
       day: (day === null || day === void 0 ? void 0 : day.value) === "all" ? "" : day === null || day === void 0 ? void 0 : (_day$value = day.value) === null || _day$value === void 0 ? void 0 : _day$value.toUpperCase(),
       status: (status === null || status === void 0 ? void 0 : status.value) === "all" ? "" : status === null || status === void 0 ? void 0 : status.value,
       vehicleId: (vehicle === null || vehicle === void 0 ? void 0 : vehicle.value) === "all" ? "" : vehicle === null || vehicle === void 0 ? void 0 : vehicle.value
+    };
+    const newOffset = offset !== null ? offset : 0;
+    if (offset === null) setPageOffset(0);
+    setFilters({
+      ...searchFilters,
+      limit: pageSize,
+      offset: newOffset
     });
   };
+  React.useEffect(() => {
+    if (pageOffset !== 0) {
+      handleSearch(null, pageOffset);
+    }
+  }, [pageOffset, pageSize]);
   const columns = React.useMemo(() => [{
     Header: t("WT_SCHEDULE_ID"),
     accessor: "scheduleId"
@@ -3754,7 +3779,7 @@ const FixedPointScheduleManagement = ({
     }
   }, /*#__PURE__*/React.createElement("div", {
     className: "finance-mainlayout-col1"
-  }, /*#__PURE__*/React.createElement(CardLabel, null, t("WT_FIXED_POINT")), /*#__PURE__*/React.createElement(Dropdown, {
+  }, /*#__PURE__*/React.createElement(CardLabel, null, t("WT_EXPORT")), /*#__PURE__*/React.createElement(Dropdown, {
     option: [{
       label: t("WT_EXCEL_WEEKWISE"),
       value: "Weekwise"
@@ -3772,33 +3797,14 @@ const FixedPointScheduleManagement = ({
   })), /*#__PURE__*/React.createElement("div", {
     className: "finance-mainlayout-col1"
   }, /*#__PURE__*/React.createElement(CardLabel, null, t("WT_FIXED_POINT")), /*#__PURE__*/React.createElement(Dropdown, {
-    option: [{
-      label: "All Fixed Points",
-      value: "all"
-    }, {
-      label: "FP01",
-      value: "FP01"
-    }, {
-      label: "FP02",
-      value: "FP02"
-    }, {
-      label: "FP03",
-      value: "FP03"
-    }],
+    option: fixedPoints,
     optionKey: "label",
     selected: fixedPoint,
     t: t,
     select: val => {
-      var _day$value2;
       setFixedPoint(val);
-      handleSearch({
-        fixedPointCode: (val === null || val === void 0 ? void 0 : val.value) === "all" ? "" : val === null || val === void 0 ? void 0 : val.value,
-        day: (day === null || day === void 0 ? void 0 : day.value) === "all" ? "" : day === null || day === void 0 ? void 0 : (_day$value2 = day.value) === null || _day$value2 === void 0 ? void 0 : _day$value2.toUpperCase(),
-        status: (status === null || status === void 0 ? void 0 : status.value) === "all" ? "" : status === null || status === void 0 ? void 0 : status.value,
-        vehicleId: (vehicle === null || vehicle === void 0 ? void 0 : vehicle.value) === "all" ? "" : vehicle === null || vehicle === void 0 ? void 0 : vehicle.value
-      });
     },
-    placeholder: "All Fixed Points"
+    placeholder: t("WT_ALL_FIXED_POINTS")
   })), /*#__PURE__*/React.createElement("div", {
     className: "finance-mainlayout-col1"
   }, /*#__PURE__*/React.createElement(CardLabel, null, t("WT_DAY")), /*#__PURE__*/React.createElement(Dropdown, {
@@ -3859,44 +3865,21 @@ const FixedPointScheduleManagement = ({
     selected: status,
     t: t,
     select: val => {
-      var _day$value3;
+      var _day$value2;
       setStatus(val);
       handleSearch({
         fixedPointCode: (fixedPoint === null || fixedPoint === void 0 ? void 0 : fixedPoint.value) === "all" ? "" : fixedPoint === null || fixedPoint === void 0 ? void 0 : fixedPoint.value,
-        day: (day === null || day === void 0 ? void 0 : day.value) === "all" ? "" : day === null || day === void 0 ? void 0 : (_day$value3 = day.value) === null || _day$value3 === void 0 ? void 0 : _day$value3.toUpperCase(),
+        day: (day === null || day === void 0 ? void 0 : day.value) === "all" ? "" : day === null || day === void 0 ? void 0 : (_day$value2 = day.value) === null || _day$value2 === void 0 ? void 0 : _day$value2.toUpperCase(),
         status: (val === null || val === void 0 ? void 0 : val.value) === "all" ? "" : val === null || val === void 0 ? void 0 : val.value,
         vehicleId: (vehicle === null || vehicle === void 0 ? void 0 : vehicle.value) === "all" ? "" : vehicle === null || vehicle === void 0 ? void 0 : vehicle.value
       });
     },
     placeholder: "All Status"
-  }))), /*#__PURE__*/React.createElement("div", {
-    className: "finance-mainlayout",
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "finance-mainlayout-col1",
     style: {
-      marginBottom: "20px"
+      alignSelf: "flex-end"
     }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "finance-mainlayout-col1"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "finance-mainlayout-col1"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "finance-mainlayout-col1"
-  }, /*#__PURE__*/React.createElement(Dropdown, {
-    option: [{
-      label: t("WT_EXCEL_WEEKWISE"),
-      value: "Weekwise"
-    }, {
-      label: t("WT_EXCEL_MONTHWISE"),
-      value: "Monthwise"
-    }, {
-      label: t("WT_EXCEL_YEARWISE"),
-      value: "Yearwise"
-    }],
-    optionKey: "label",
-    placeholder: t("WT_EXPORT"),
-    t: t,
-    select: handleDownload
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "finance-mainlayout-col1"
   }, /*#__PURE__*/React.createElement(SubmitBar, {
     label: t("ES_COMMON_SEARCH"),
     onSubmit: () => handleSearch()
@@ -3947,15 +3930,15 @@ const FixedPointScheduleManagement = ({
       overflowX: "auto"
     },
     isLoading: isLoading,
-    onPageSizeChange: props.onPageSizeChange,
-    currentPage: props.currentPage,
-    onNextPage: props.onNextPage,
-    onPrevPage: props.onPrevPage,
-    pageSizeLimit: props.pageSizeLimit,
+    onPageSizeChange: handlePageSizeChange,
+    currentPage: Math.floor(pageOffset / pageSize),
+    onNextPage: fetchNextPage,
+    onPrevPage: fetchPrevPage,
+    pageSizeLimit: pageSize,
     onSort: props.onSort,
     disableSort: props.disableSort,
     sortParams: props.sortParams,
-    totalRecords: props.totalRecords
+    totalRecords: (scheduleData === null || scheduleData === void 0 ? void 0 : scheduleData.count) || (scheduleData === null || scheduleData === void 0 ? void 0 : scheduleData.totalCount) || (data === null || data === void 0 ? void 0 : (_data$ = data[0]) === null || _data$ === void 0 ? void 0 : _data$.totalCount)
   })), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("button", {
     onClick: () => {
       setEditingRowIndex(null);
@@ -4012,11 +3995,11 @@ const FixedPointScheduleManagement = ({
         const dayVal = typeof formDataDay === "string" ? formDataDay : formDataDay === null || formDataDay === void 0 ? void 0 : formDataDay.value;
         if (dayVal && dayVal !== "WT_SELECT_ALL") daysArr = [dayVal];
       }
-      const fixedPointTimeTableDetails = {
+      const fixedPointDetails = {
         tenantId,
         system_assigned_schedule_id: formData.scheduleId,
         fixed_point_code: formData.fixedPointCode,
-        days: daysArr.map(d => d.toUpperCase()),
+        day: daysArr.map(d => d.toUpperCase()),
         trip_no: formData.frequencyNo,
         arrival_time_to_fpl: formData.arrivalTimeFpl,
         departure_time_from_fpl: formData.departureTimeFpl,
@@ -4030,7 +4013,7 @@ const FixedPointScheduleManagement = ({
         vehicle_id: formData.vehicleId
       };
       const payload = {
-        fixedPointTimeTableDetails
+        fixedPointDetails
       };
       createSchedule(payload, {
         onError: (error, variables) => {
@@ -21828,7 +21811,9 @@ const WTCitizenCard = () => {
     links,
     onDetailsClick: handleDetailsClick
   };
-  return /*#__PURE__*/React.createElement(EmployeeModuleCard, propsForModuleCard);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "wt-citizen-card-premium"
+  }, /*#__PURE__*/React.createElement(EmployeeModuleCard, propsForModuleCard));
 };
 
 const MTCard = () => {