@djb25/digit-ui-module-ekyc 1.0.41 → 1.0.42

package/dist/index.modern.js

@@ -1,7 +1,7 @@
-import React, { useRef, useEffect, useMemo, useState, createContext, isValidElement, cloneElement, createElement, useContext, useCallback, useReducer, Fragment } from 'react';
+import React, { useRef, useEffect, useMemo, useState, createContext, useContext, isValidElement, cloneElement, createElement, useCallback, useReducer, Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useHistory, Link, useLocation, useParams, useRouteMatch, Switch, Route, Redirect } from 'react-router-dom';
-import { PersonIcon, EmployeeModuleCard, Loader, Card, InboxLinks, Table, HomeIcon, TextInput, Header, SubmitBar, DetailsCard, FilterForm, FilterFormField, Dropdown, Label, CustomTooltip, CardLabelError, InboxComposer, EditIcon, DeleteIcon, CardHeader, CardText, LabelFieldPair, CardLabel, ActionBar, Modal, Toast, RadioButtons, CardSubHeader, StatusTable, Row, GenericFileIcon, CheckBox, Menu, LinkButton, UploadFile, FormComposer, VerticalTimeline, Close, AppContainer, ModuleHeader, ArrowLeft, PrivateRoute, LayoutWrapper, CitizenHomeCard, DocumentIcon, BackButton } from '@djb25/digit-ui-react-components';
+import { PersonIcon, EmployeeModuleCard, Loader, Card, InboxLinks, Table, HomeIcon, TextInput, Header, SubmitBar, DetailsCard, FilterForm, FilterFormField, Dropdown, Label, CustomTooltip, CardLabelError, SearchField, RadioButtons, InboxComposer, EditIcon, DeleteIcon, CardHeader, CardText, LabelFieldPair, CardLabel, ActionBar, Modal, Toast, CardSubHeader, StatusTable, Row, GenericFileIcon, CheckBox, Menu, LinkButton, UploadFile, FormComposer, VerticalTimeline, Close, AppContainer, ModuleHeader, ArrowLeft, PrivateRoute, LayoutWrapper, CitizenHomeCard, DocumentIcon, BackButton } from '@djb25/digit-ui-react-components';
 import * as Chartjs from 'chart.js/auto';
 import Chartjs__default, { Chart } from 'chart.js/auto';
 import { FaUsers, FaCheckCircle, FaClock, FaExclamationTriangle, FaUserTie, FaChartLine, FaSearch, FaArrowRight, FaMapMarkedAlt } from 'react-icons/fa';
@@ -329,7 +329,7 @@ const DesktopInbox = _ref => {
     Cell: _ref4 => {
       var _row$original4;
       let row = _ref4.row;
-      const status = ((_row$original4 = row.original) === null || _row$original4 === void 0 ? void 0 : _row$original4.status) || "DEFAULT";
+      const status = (((_row$original4 = row.original) === null || _row$original4 === void 0 ? void 0 : _row$original4.status) || "DEFAULT").toUpperCase();
       return /*#__PURE__*/React.createElement("span", {
         className: "ekyc-status-tag " + status
       }, t("" + status));
@@ -2442,7 +2442,7 @@ const useInboxTableConfig = _ref => {
     Cell: _ref4 => {
       var _row$original4;
       let row = _ref4.row;
-      const status = ((_row$original4 = row.original) === null || _row$original4 === void 0 ? void 0 : _row$original4.status) || "DEFAULT";
+      const status = (((_row$original4 = row.original) === null || _row$original4 === void 0 ? void 0 : _row$original4.status) || "DEFAULT").toUpperCase();
       return /*#__PURE__*/React.createElement("span", {
         className: "ekyc-status-tag " + status
       }, t("" + status));
@@ -2816,6 +2816,92 @@ const SearchFormFieldsComponents = _ref => {
   }), (errors === null || errors === void 0 ? void 0 : errors.kNumber) && /*#__PURE__*/React.createElement(CardLabelError, null, errors.kNumber.message)));
 };
 
+const useInboxMobileCardsData = _ref => {
+  var _Digit$SessionStorage, _Digit$SessionStorage2, _Digit$SessionStorage3;
+  let table = _ref.table,
+    tenantId = _ref.tenantId;
+  const _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  const history = useHistory();
+  const _useState = useState(""),
+    selectedKno = _useState[0],
+    setSelectedKno = _useState[1];
+  const _Digit$Hooks$ekyc$use = Digit.Hooks.ekyc.useEkycAPI("review", tenantId),
+    reviewData = _Digit$Hooks$ekyc$use.data,
+    getReview = _Digit$Hooks$ekyc$use.getReview;
+  const userType = ((_Digit$SessionStorage = Digit.SessionStorage.get("User")) === null || _Digit$SessionStorage === void 0 ? void 0 : (_Digit$SessionStorage2 = _Digit$SessionStorage.info) === null || _Digit$SessionStorage2 === void 0 ? void 0 : (_Digit$SessionStorage3 = _Digit$SessionStorage2.type) === null || _Digit$SessionStorage3 === void 0 ? void 0 : _Digit$SessionStorage3.toLowerCase()) || "citizen";
+  React.useEffect(() => {
+    if (reviewData) {
+      history.push("/digit-ui/" + userType + "/ekyc/review/" + selectedKno, {
+        aadhaarData: reviewData === null || reviewData === void 0 ? void 0 : reviewData.aadhaarData,
+        reviewData
+      });
+    }
+  }, [reviewData]);
+  const handleReview = kno => {
+    setSelectedKno(kno);
+    getReview({
+      kno
+    });
+  };
+  const dataForMobileInboxCards = table === null || table === void 0 ? void 0 : table.map(item => {
+    const kno = item.kno || item.applicationNumber || "NA";
+    const status = (item.status || "DEFAULT").toUpperCase();
+    const ekycStatus = (item.ekycStatus || item.ekycstatus || "NA").toUpperCase();
+    return {
+      [t("EKYC_APPLICATION_NO")]: /*#__PURE__*/React.createElement("span", {
+        className: "link",
+        onClick: () => handleReview(kno)
+      }, kno),
+      [t("EKYC_CITIZEN_NAME")]: item.citizenName || "NA",
+      [t("EKYC_STATUS")]: /*#__PURE__*/React.createElement("span", {
+        className: "ekyc-status-tag " + status
+      }, t("" + status)),
+      [t("SUBMITTED_AT")]: item.submittedAt ? Digit.DateUtils.ConvertEpochToDate(item.submittedAt) : "-",
+      [t("ASSIGNED_AT")]: item.assignedAt ? Digit.DateUtils.ConvertEpochToDate(item.assignedAt) : "-",
+      [t("EKYC_EKYC_STATUS")]: /*#__PURE__*/React.createElement("span", {
+        className: "ekyc-status-tag " + ekycStatus
+      }, t("" + ekycStatus))
+    };
+  });
+  const MobileSortFormValues = () => {
+    const sortOrderOptions = [{
+      code: "DESC",
+      i18nKey: "ES_INBOX_DATE_LATEST_FIRST"
+    }, {
+      code: "ASC",
+      i18nKey: "ES_INBOX_DATE_LATEST_LAST"
+    }];
+    const _useFormContext = useFormContext(),
+      controlSortForm = _useFormContext.control;
+    return /*#__PURE__*/React.createElement(SearchField, null, /*#__PURE__*/React.createElement(Controller, {
+      name: "sortOrder",
+      control: controlSortForm,
+      render: _ref2 => {
+        let onChange = _ref2.onChange,
+          value = _ref2.value;
+        return /*#__PURE__*/React.createElement(RadioButtons, {
+          onSelect: e => {
+            onChange(e.code);
+          },
+          selectedOption: sortOrderOptions.filter(option => option.code === value)[0],
+          optionsKey: "i18nKey",
+          name: "sortOrder",
+          options: sortOrderOptions
+        });
+      }
+    }));
+  };
+  return {
+    data: dataForMobileInboxCards,
+    isTwoDynamicPrefix: true,
+    getRedirectionLink: () => {},
+    handleClickEnabled: false,
+    serviceRequestIdKey: "applicationNo",
+    MobileSortFormValues
+  };
+};
+
 const Inbox = _ref => {
   var _formState$tableForm3, _formState$tableForm4, _formState$searchForm3, _formState$searchForm4;
   let parentRoute = _ref.parentRoute;
@@ -3039,13 +3125,39 @@ const Inbox = _ref => {
       width: "70%"
     }
   }));
+  const onMobileSortOrderData = data => {
+    const sortOrder = data.sortOrder;
+    dispatch({
+      action: "mutateTableForm",
+      data: _extends({}, formState.tableForm, {
+        sortOrder
+      })
+    });
+  };
+  const onSortFormReset = setSortFormValue => {
+    setSortFormValue("sortOrder", "DESC");
+    dispatch({
+      action: "mutateTableForm",
+      data: tableOrderFormDefaultValues
+    });
+  };
+  const propsForMobileSortForm = {
+    onMobileSortOrderData,
+    sortFormDefaultValues: formState === null || formState === void 0 ? void 0 : formState.tableForm,
+    onSortFormReset
+  };
+  const propsForInboxMobileCards = useInboxMobileCardsData({
+    table: filteredData,
+    tenantId
+  });
   const isInboxLoading = isListLoading || isSearchLoading;
   return /*#__PURE__*/React.createElement("div", {
     className: "app-container"
   }, /*#__PURE__*/React.createElement(InboxComposer, _extends({
     isInboxLoading
-  }, propsForSearchForm, {
+  }, propsForSearchForm, propsForMobileSortForm, {
     propsForInboxTable,
+    propsForInboxMobileCards,
     formState,
     countData: listData
   })));
@@ -5536,6 +5648,70 @@ const SupervisorInboxTableConfig = _ref => {
   };
 };
 
+const useSupervisorInboxMobileCardsData = _ref => {
+  var _Digit$SessionStorage, _Digit$SessionStorage2, _Digit$SessionStorage3;
+  let table = _ref.table;
+  const _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  const history = useHistory();
+  const userType = ((_Digit$SessionStorage = Digit.SessionStorage.get("User")) === null || _Digit$SessionStorage === void 0 ? void 0 : (_Digit$SessionStorage2 = _Digit$SessionStorage.info) === null || _Digit$SessionStorage2 === void 0 ? void 0 : (_Digit$SessionStorage3 = _Digit$SessionStorage2.type) === null || _Digit$SessionStorage3 === void 0 ? void 0 : _Digit$SessionStorage3.toLowerCase()) || "citizen";
+  const handleReview = id => {
+    history.push("/digit-ui/" + userType + "/ekyc/assign/surveyor-details/" + id);
+  };
+  const dataForMobileInboxCards = table === null || table === void 0 ? void 0 : table.map(item => {
+    var _item$owner;
+    const id = item.id;
+    const status = item.status || "DEFAULT";
+    return {
+      [t("SURVEYOR_NAME")]: /*#__PURE__*/React.createElement("span", {
+        className: "link",
+        onClick: () => handleReview(id)
+      }, item.surveyorName || item.name || "NA"),
+      [t("MOBILE_NUMBER")]: item.mobileNo || ((_item$owner = item.owner) === null || _item$owner === void 0 ? void 0 : _item$owner.mobileNumber) || "NA",
+      [t("STATUS")]: /*#__PURE__*/React.createElement("span", {
+        className: "ekyc-status-tag " + status
+      }, t(status)),
+      [t("SERVICE_TYPE")]: item.serviceType || "NA"
+    };
+  });
+  const MobileSortFormValues = () => {
+    const sortOrderOptions = [{
+      code: "DESC",
+      i18nKey: "ES_INBOX_DATE_LATEST_FIRST"
+    }, {
+      code: "ASC",
+      i18nKey: "ES_INBOX_DATE_LATEST_LAST"
+    }];
+    const _useFormContext = useFormContext(),
+      controlSortForm = _useFormContext.control;
+    return /*#__PURE__*/React.createElement(SearchField, null, /*#__PURE__*/React.createElement(Controller, {
+      name: "sortOrder",
+      control: controlSortForm,
+      render: _ref2 => {
+        let onChange = _ref2.onChange,
+          value = _ref2.value;
+        return /*#__PURE__*/React.createElement(RadioButtons, {
+          onSelect: e => {
+            onChange(e.code);
+          },
+          selectedOption: sortOrderOptions.filter(option => option.code === value)[0],
+          optionsKey: "i18nKey",
+          name: "sortOrder",
+          options: sortOrderOptions
+        });
+      }
+    }));
+  };
+  return {
+    data: dataForMobileInboxCards,
+    isTwoDynamicPrefix: true,
+    getRedirectionLink: () => {},
+    handleClickEnabled: false,
+    serviceRequestIdKey: "id",
+    MobileSortFormValues
+  };
+};
+
 const AssignEkyc = () => {
   var _formState$tableForm, _formState$tableForm2, _formState$tableForm3, _formState$tableForm4, _formState$searchForm, _dashboardData$dashbo;
   let tenantId = Digit.ULBService.getCurrentTenantId();
@@ -5693,12 +5869,37 @@ const AssignEkyc = () => {
     }
   }));
   const isInboxLoading = isLoading;
+  const onMobileSortOrderData = data => {
+    const sortOrder = data.sortOrder;
+    dispatch({
+      action: "mutateTableForm",
+      data: _extends({}, formState.tableForm, {
+        sortOrder
+      })
+    });
+  };
+  const onSortFormReset = setSortFormValue => {
+    setSortFormValue("sortOrder", "DESC");
+    dispatch({
+      action: "mutateTableForm",
+      data: tableOrderFormDefaultValues
+    });
+  };
+  const propsForMobileSortForm = {
+    onMobileSortOrderData,
+    sortFormDefaultValues: formState === null || formState === void 0 ? void 0 : formState.tableForm,
+    onSortFormReset
+  };
+  const propsForInboxMobileCards = useSupervisorInboxMobileCardsData({
+    table: filteredData
+  });
   return /*#__PURE__*/React.createElement("div", {
     className: "app-container"
   }, /*#__PURE__*/React.createElement(InboxComposer, _extends({
     isInboxLoading
-  }, propsForSearchForm, {
+  }, propsForSearchForm, propsForMobileSortForm, {
     propsForInboxTable,
+    propsForInboxMobileCards,
     formState,
     countData: dashboardData === null || dashboardData === void 0 ? void 0 : dashboardData.dashboardInfo,
     isCardLoading: isDataSearchLoading
@@ -5866,14 +6067,7 @@ const AdminDashboard = () => {
   }, mobileNumber))), /*#__PURE__*/React.createElement("button", {
     className: "download-excel-btn",
     disabled: ekycDownloadLoading,
-    onClick: handleDownloadEkycData,
-    style: {
-      margin: 0,
-      padding: "8px 16px",
-      height: "auto",
-      minHeight: "36px",
-      width: "auto"
-    }
+    onClick: handleDownloadEkycData
   }, /*#__PURE__*/React.createElement("svg", {
     width: "16",
     height: "16",
@@ -5882,10 +6076,7 @@ const AdminDashboard = () => {
     stroke: "currentColor",
     strokeWidth: "2.5",
     strokeLinecap: "round",
-    strokeLinejoin: "round",
-    style: {
-      marginRight: "8px"
-    }
+    strokeLinejoin: "round"
   }, /*#__PURE__*/React.createElement("path", {
     d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"
   }), /*#__PURE__*/React.createElement("polyline", {
@@ -5896,189 +6087,56 @@ const AdminDashboard = () => {
     x2: "12",
     y2: "3"
   })), ekycDownloadLoading ? t("DOWNLOADING") || "Downloading..." : t("DOWNLOAD_EXCEL") || "Download Excel")), /*#__PURE__*/React.createElement("div", {
-    style: {
-      marginTop: "32px"
-    }
+    className: "admin-performance-section"
   }, /*#__PURE__*/React.createElement("h3", {
-    style: {
-      fontSize: "20px",
-      fontWeight: "700",
-      color: "#101828",
-      marginBottom: "20px"
-    }
+    className: "section-title"
   }, t("EKYC_VENDORS_PERFORMANCE") || "eKYC Vendors Performance"), isVendorSearchLoading || isProgressLoading ? /*#__PURE__*/React.createElement(Loader, null) : /*#__PURE__*/React.createElement("div", {
-    style: {
-      display: "grid",
-      gridTemplateColumns: "repeat(3, 1fr)",
-      gap: "24px",
-      width: "100%"
-    }
+    className: "vendors-grid"
   }, vendorsList.length === 0 ? /*#__PURE__*/React.createElement("div", {
-    style: {
-      gridColumn: "span 3",
-      textAlign: "center",
-      padding: "40px",
-      color: "#64748B",
-      fontSize: "16px"
-    }
+    className: "no-vendors"
   }, t("NO_VENDORS_FOUND") || "No vendors found.") : vendorsList.map(vendor => /*#__PURE__*/React.createElement("div", {
     key: vendor.id,
-    onClick: () => history.push("/digit-ui/employee/ekyc/vendors/" + vendor.id),
-    style: {
-      background: "#ffffff",
-      border: "1px solid #E2E8F0",
-      borderRadius: "16px",
-      padding: "24px",
-      boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03)",
-      cursor: "pointer",
-      transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
-      display: "flex",
-      flexDirection: "column",
-      justifyContent: "space-between",
-      gap: "16px"
-    },
-    onMouseEnter: e => {
-      e.currentTarget.style.transform = "translateY(-4px)";
-      e.currentTarget.style.boxShadow = "0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04)";
-      e.currentTarget.style.borderColor = "#CBD5E1";
-    },
-    onMouseLeave: e => {
-      e.currentTarget.style.transform = "translateY(0)";
-      e.currentTarget.style.boxShadow = "0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03)";
-      e.currentTarget.style.borderColor = "#E2E8F0";
-    }
+    className: "vendor-perf-card",
+    onClick: () => history.push("/digit-ui/employee/ekyc/vendors/" + vendor.id)
   }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      display: "flex",
-      justifyContent: "space-between",
-      alignItems: "flex-start"
-    }
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h4", {
-    style: {
-      fontSize: "18px",
-      fontWeight: "700",
-      color: "#0B2559",
-      margin: 0
-    }
-  }, vendor.name), /*#__PURE__*/React.createElement("p", {
-    style: {
-      fontSize: "12px",
-      color: "#64748B",
-      marginTop: "2px",
-      marginBottom: 0
-    }
-  }, t("MOBILE") || "Mobile", ": ", vendor.mobileNumber)), /*#__PURE__*/React.createElement("span", {
-    style: {
-      background: "#E0F2FE",
-      color: "#0369A1",
-      padding: "6px 12px",
-      borderRadius: "999px",
-      fontSize: "13px",
-      fontWeight: "700"
-    }
+    className: "card-header"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "vendor-info"
+  }, /*#__PURE__*/React.createElement("h4", null, vendor.name), /*#__PURE__*/React.createElement("p", null, t("MOBILE") || "Mobile", ": ", vendor.mobileNumber)), /*#__PURE__*/React.createElement("span", {
+    className: "progress-badge"
   }, vendor.progress, "%")), /*#__PURE__*/React.createElement("div", {
-    style: {
-      width: "100%",
-      height: "8px",
-      background: "#F1F5F9",
-      borderRadius: "999px",
-      overflow: "hidden"
-    }
+    className: "progress-bar-container"
   }, /*#__PURE__*/React.createElement("div", {
+    className: "progress-bar-fill",
     style: {
-      width: vendor.progress + "%",
-      height: "100%",
-      background: "linear-gradient(90deg, #3B82F6 0%, #10B981 100%)",
-      borderRadius: "999px"
+      width: vendor.progress + "%"
     }
   })), /*#__PURE__*/React.createElement("div", {
-    style: {
-      display: "grid",
-      gridTemplateColumns: "repeat(3, 1fr)",
-      gap: "12px"
-    }
+    className: "stats-grid"
   }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      background: "#F8FAFC",
-      padding: "12px 8px",
-      borderRadius: "10px",
-      textAlign: "center"
-    }
+    className: "stat-item"
   }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      fontSize: "16px",
-      fontWeight: "700",
-      color: "#1E293B"
-    }
+    className: "value"
   }, vendor.supervisors), /*#__PURE__*/React.createElement("div", {
-    style: {
-      fontSize: "10px",
-      fontWeight: "600",
-      color: "#64748B",
-      textTransform: "uppercase",
-      marginTop: "4px"
-    }
+    className: "label"
   }, t("SUPERVISORS") || "Supervisors")), /*#__PURE__*/React.createElement("div", {
-    style: {
-      background: "#F8FAFC",
-      padding: "12px 8px",
-      borderRadius: "10px",
-      textAlign: "center"
-    }
+    className: "stat-item"
   }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      fontSize: "16px",
-      fontWeight: "700",
-      color: "#1E293B"
-    }
+    className: "value"
   }, vendor.surveyors), /*#__PURE__*/React.createElement("div", {
-    style: {
-      fontSize: "10px",
-      fontWeight: "600",
-      color: "#64748B",
-      textTransform: "uppercase",
-      marginTop: "4px"
-    }
+    className: "label"
   }, t("SURVEYORS") || "Surveyors")), /*#__PURE__*/React.createElement("div", {
-    style: {
-      background: "#F8FAFC",
-      padding: "12px 8px",
-      borderRadius: "10px",
-      textAlign: "center"
-    }
+    className: "stat-item"
   }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      fontSize: "16px",
-      fontWeight: "700",
-      color: "#10B981"
-    }
+    className: "value completed-val"
   }, vendor.completed), /*#__PURE__*/React.createElement("div", {
-    style: {
-      fontSize: "10px",
-      fontWeight: "600",
-      color: "#64748B",
-      textTransform: "uppercase",
-      marginTop: "4px"
-    }
+    className: "label"
   }, t("COMPLETED") || "Completed"))), /*#__PURE__*/React.createElement("div", {
-    style: {
-      display: "flex",
-      justifyContent: "space-between",
-      fontSize: "12px",
-      color: "#64748B",
-      borderTop: "1px solid #F1F5F9",
-      paddingTop: "12px"
-    }
+    className: "card-footer"
   }, /*#__PURE__*/React.createElement("span", null, t("PENDING") || "Pending", ": ", /*#__PURE__*/React.createElement("span", {
-    style: {
-      fontWeight: "700",
-      color: "#F59E0B"
-    }
+    className: "pending-count"
   }, vendor.pending)), /*#__PURE__*/React.createElement("span", null, t("REJECTED") || "Rejected", ": ", /*#__PURE__*/React.createElement("span", {
-    style: {
-      fontWeight: "700",
-      color: "#EF4444"
-    }
+    className: "rejected-count"
   }, vendor.rejected))))))));
 };
 
@@ -6962,7 +7020,10 @@ const AssignEkycModal = _ref => {
     accessor: "ekycStatus",
     Cell: _ref5 => {
       let value = _ref5.value;
-      return value || "-";
+      const status = (value || "NA").toUpperCase();
+      return value ? /*#__PURE__*/React.createElement("span", {
+        className: "ekyc-status-tag " + status
+      }, t(status)) : "-";
     }
   }], [selectedKnos, tableData]);
   const handleSelect = kno => {
@@ -7197,7 +7258,10 @@ const SurveyorDetailsDashboard = () => {
     accessor: "ekycStatus",
     Cell: _ref => {
       let value = _ref.value;
-      return value || "-";
+      const status = (value || "NA").toUpperCase();
+      return value ? /*#__PURE__*/React.createElement("span", {
+        className: "ekyc-status-tag " + status
+      }, t(status)) : "-";
     }
   }, {
     Header: t("SUBMITTED_AT") || "Submitted At",
@@ -9392,13 +9456,39 @@ const Inbox$1 = _ref => {
       width: "70%"
     }
   }));
+  const onMobileSortOrderData = data => {
+    const sortOrder = data.sortOrder;
+    dispatch({
+      action: "mutateTableForm",
+      data: _extends({}, formState.tableForm, {
+        sortOrder
+      })
+    });
+  };
+  const onSortFormReset = setSortFormValue => {
+    setSortFormValue("sortOrder", "DESC");
+    dispatch({
+      action: "mutateTableForm",
+      data: tableOrderFormDefaultValues
+    });
+  };
+  const propsForMobileSortForm = {
+    onMobileSortOrderData,
+    sortFormDefaultValues: formState === null || formState === void 0 ? void 0 : formState.tableForm,
+    onSortFormReset
+  };
+  const propsForInboxMobileCards = useInboxMobileCardsData({
+    table: filteredData,
+    tenantId
+  });
   const isInboxLoading = isLoading || isSearchLoading;
   return /*#__PURE__*/React.createElement("div", {
     className: "app-container"
   }, /*#__PURE__*/React.createElement(InboxComposer, _extends({
     isInboxLoading
-  }, propsForSearchForm, {
+  }, propsForSearchForm, propsForMobileSortForm, {
     propsForInboxTable,
+    propsForInboxMobileCards,
     formState
   })));
 };