@djb25/digit-ui-module-ekyc 1.0.8 → 1.0.10

package/src/components/Filter.js

@@ -1,60 +1,55 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import { Dropdown, FilterForm, FilterFormField } from "@djb25/digit-ui-react-components";
 import { useTranslation } from "react-i18next";
 
 const Filter = ({ searchParams, onFilterChange, defaultSearchParams, statusMap, moduleCode, ...props }) => {
-    const { t } = useTranslation();
-
-    const [_searchParams, setSearchParams] = useState(() => ({ ...searchParams }));
-
-    const localParamChange = (filterParam) => {
-        let keys_to_delete = filterParam.delete;
-        let _new = { ..._searchParams, ...filterParam };
-        if (keys_to_delete) keys_to_delete.forEach((key) => delete _new[key]);
-        delete filterParam.delete;
-        setSearchParams({ ..._new });
-    };
-
-    const applyLocalFilters = () => {
-        onFilterChange(_searchParams);
-    };
-
-    const clearAll = () => {
-        setSearchParams({ ...defaultSearchParams });
-        onFilterChange({ ...defaultSearchParams });
-    };
-
-    const onStatusChange = (value) => {
-        const newParams = { ..._searchParams, status: value };
-        setSearchParams(newParams);
-        onFilterChange(newParams);
-    };
-
-    return (
-        <FilterForm
-            onSubmit={applyLocalFilters}
-            handleSubmit={(fn) => (e) => { e && e.preventDefault(); fn(); }}
-            onResetFilterForm={clearAll}
-            id="ekyc-filter-form"
-            onMobileExclusiveFilterPopupFormClose={props.onClose}
-        >
-            <FilterFormField>
-                <div className="filter-label" style={{ fontWeight: "normal" }}>
-                    {t("EKYC_STATUS")}:
-                </div>
-                <Dropdown
-                    option={[
-                        { label: t("EKYC_STATUS_ALL"), value: "" },
-                        { label: t("EKYC_STATUS_ACTIVE"), value: "ACTIVE" },
-                        { label: t("EKYC_STATUS_PENDING"), value: "PENDING START" },
-                    ]}
-                    optionKey="label"
-                    select={onStatusChange}
-                    selected={_searchParams?.status || { label: t("EKYC_STATUS_ALL"), value: "" }}
-                />
-            </FilterFormField>
-        </FilterForm>
-    );
+  const { t } = useTranslation();
+
+  const [_searchParams, setSearchParams] = useState(() => ({ ...searchParams }));
+
+  const applyLocalFilters = () => {
+    onFilterChange(_searchParams);
+  };
+
+  const clearAll = () => {
+    setSearchParams({ ...defaultSearchParams });
+    onFilterChange({ ...defaultSearchParams });
+  };
+
+  const onStatusChange = (value) => {
+    const newParams = { ..._searchParams, status: value };
+    setSearchParams(newParams);
+    onFilterChange(newParams);
+  };
+
+  return (
+    <FilterForm
+      onSubmit={applyLocalFilters}
+      handleSubmit={(fn) => (e) => {
+        e && e.preventDefault();
+        fn();
+      }}
+      onResetFilterForm={clearAll}
+      id="ekyc-filter-form"
+      onMobileExclusiveFilterPopupFormClose={props.onClose}
+    >
+      <FilterFormField>
+        <div className="filter-label" style={{ fontWeight: "normal" }}>
+          {t("EKYC_STATUS")}:
+        </div>
+        <Dropdown
+          option={[
+            { label: t("EKYC_STATUS_ALL"), value: "" },
+            { label: t("EKYC_STATUS_ACTIVE"), value: "ACTIVE" },
+            { label: t("EKYC_STATUS_PENDING"), value: "PENDING START" },
+          ]}
+          optionKey="label"
+          select={onStatusChange}
+          selected={_searchParams?.status || { label: t("EKYC_STATUS_ALL"), value: "" }}
+        />
+      </FilterFormField>
+    </FilterForm>
+  );
 };
 
 export default Filter;

package/src/components/SearchFormFieldsComponent.js

@@ -0,0 +1,55 @@
+import React from "react";
+import { Controller } from "react-hook-form";
+import { CardLabelError, TextInput, Tooltip, Label } from "@djb25/digit-ui-react-components";
+import { useTranslation } from "react-i18next";
+
+const SearchFormFieldsComponents = ({ searchFormState, controlSearchForm }) => {
+  const { t } = useTranslation();
+  const { errors } = searchFormState;
+
+  return (
+    <React.Fragment>
+      {/* K NUMBER */}
+      <span className="mobile-input">
+        <Label className="flex-roww flex-gap-2">
+          {t("EKYC_K_NUMBER") || "K Number"}
+          <Tooltip message={t("EKYC_K_NUMBER_MESSAGE")} />
+        </Label>
+
+        <Controller
+          name="kNumber"
+          control={controlSearchForm}
+          defaultValue=""
+          rules={{
+            pattern: {
+              value: /^[a-zA-Z0-9-_/]*$/,
+              message: t("ERR_INVALID_APPLICATION_NO"),
+            },
+          }}
+          render={({ onChange, value }) => <TextInput value={value || ""} onChange={(e) => onChange(e.target.value)} />}
+        />
+
+        {errors?.kNumber && <CardLabelError>{errors.kNumber.message}</CardLabelError>}
+      </span>
+
+      {/* K NAME */}
+      {/* <span className="mobile-input">
+        <Label className="flex-roww flex-gap-2">
+          {t("EKYC_K_NAME") || "K Name"}
+          <Tooltip message={t("EKYC_K_NAME_MESSAGE")} />
+        </Label>
+
+        <Controller
+          name="kName"
+          control={controlSearchForm}
+          defaultValue=""
+          render={({ onChange, value }) => <TextInput value={value || ""} onChange={(e) => onChange(e.target.value)} />}
+        />
+
+        {errors?.kName && <CardLabelError>{errors.kName.message}</CardLabelError>}
+      </span> */}
+    </React.Fragment>
+  );
+};
+
+export default SearchFormFieldsComponents;

package/src/components/StatusCards.js

@@ -1,8 +1,11 @@
 import React, { useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
-import { Chart, registerables } from "chart.js";
+import * as Chartjs from "chart.js/auto";
 
-Chart.register(...registerables);
+const getChartConstructor = () => {
+  const C = Chartjs.Chart || Chartjs.default || Chartjs;
+  return C;
+};
 
 const StatusCards = ({ countData }) => {
   const { t } = useTranslation();
@@ -27,7 +30,8 @@ const StatusCards = ({ countData }) => {
     if (chartRef1.current) {
       if (chartInstance1.current) chartInstance1.current.destroy();
       const ctx1 = chartRef1.current.getContext("2d");
-      chartInstance1.current = new Chart(ctx1, {
+      const ChartConstructor = getChartConstructor();
+      chartInstance1.current = new ChartConstructor(ctx1, {
         type: "doughnut",
         data: {
           labels: [t("EKYC_ACTIVE"), t("EKYC_PENDING"), t("EKYC_COMPLETED")],

package/src/config/config.js

@@ -0,0 +1,69 @@
+import AadhaarVerification from "../pages/employee/AadhaarVerification";
+
+export const ekycConfig = [
+  {
+    body: [
+      {
+        route: "consumer-details",
+        component: AadhaarVerification,
+        key: "aadhaarVerification",
+        texts: {
+          header: "EKYC_CONSUMER_CONNECTION",
+          submitBarLabel: "COMMON_SAVE_NEXT",
+        },
+        timeLine: [
+          {
+            currentStep: 1,
+            actions: "EKYC_CONSUMER_CONNECTION",
+          },
+        ],
+      },
+      {
+        route: "address-details",
+        component: "AddressDetails",
+        key: "addressDetails",
+        doorImage: true,
+        texts: {
+          header: "EKYC_ADDRESS_DETAILS",
+          submitBarLabel: "COMMON_SAVE_NEXT",
+        },
+        timeLine: [
+          {
+            currentStep: 2,
+            actions: "EKYC_ADDRESS_DETAILS",
+          },
+        ],
+      },
+      {
+        route: "property-info",
+        component: "PropertyInfo",
+        key: "propertyDetails",
+        texts: {
+          header: "EKYC_PROPERTY_INFO",
+          submitBarLabel: "COMMON_SAVE_NEXT",
+        },
+        timeLine: [
+          {
+            currentStep: 3,
+            actions: "EKYC_PROPERTY_INFO",
+          },
+        ],
+      },
+      {
+        route: "meter-details",
+        component: "MeterDetails",
+        key: "meterDetails",
+        texts: {
+          header: "EKYC_METER_DETAILS",
+          submitBarLabel: "COMMON_SAVE_NEXT",
+        },
+        timeLine: [
+          {
+            currentStep: 4,
+            actions: "EKYC_METER_DETAILS",
+          },
+        ],
+      },
+    ],
+  },
+];

package/src/hook/useInboxTableConfig.js

@@ -0,0 +1,134 @@
+import React, { useState } from "react";
+import { useHistory } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+
+const useInboxTableConfig = ({
+  parentRoute,
+  onPageSizeChange,
+  formState,
+  totalCount,
+  table,
+  dispatch,
+  checkPathName,
+  onSortingByData,
+  tenantId,
+  inboxStyles = {},
+  tableStyle = {},
+}) => {
+  const { t } = useTranslation();
+  const history = useHistory();
+  const [selectedKno, setSelectedKno] = useState("");
+  const { data: reviewData, getReview } = Digit.Hooks.ekyc.useEkycAPI("review", tenantId);
+  const handleReview = (kno) => {
+    setSelectedKno(kno);
+    getReview({ kno });
+  };
+
+  const limit = formState?.tableForm?.limit || 10;
+  const offset = formState?.tableForm?.offset || 0;
+
+  React.useEffect(() => {
+    if (reviewData) {
+      history.push("/digit-ui/employee/ekyc/review", { kNumber: selectedKno, aadhaarData: reviewData?.aadhaarData, reviewData });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [reviewData]);
+
+  const tableColumnConfig = [
+    {
+      Header: t("EKYC_APPLICATION_NO"),
+      accessor: "applicationNumber",
+      disableSortBy: true,
+      Cell: ({ row }) => {
+        const kno = row.original?.kno || row.original?.applicationNumber || "NA";
+        return (
+          <span
+            className="ekyc-application-link"
+            style={{ color: "#add8f7", cursor: "pointer", fontWeight: "bold" }}
+            onClick={() => handleReview(kno)}
+          >
+            {kno}
+          </span>
+        );
+      },
+    },
+    {
+      Header: t("EKYC_CITIZEN_NAME"),
+      accessor: "citizenName",
+      Cell: ({ row }) => <span>{row.original?.citizenName || "NA"}</span>,
+    },
+    {
+      Header: t("EKYC_STATUS"),
+      accessor: "actionStatus",
+      Cell: ({ row }) => {
+        const status = row.original?.status || "DEFAULT";
+        return <span className={`ekyc-status-tag ${status}`}>{t(`${status}`)}</span>;
+      },
+    },
+    {
+      Header: t("EKYC_ACTION"),
+      accessor: "status",
+      Cell: ({ row }) => {
+        const kno = row.original?.kno || row.original?.applicationNumber || "NA";
+        return (
+          <span
+            className="ekyc-application-link"
+            style={{ color: "#add8f7", cursor: "pointer", fontWeight: "bold" }}
+            onClick={() => handleReview(kno)}
+          >
+            {t("EKYC_REVIEW")}
+          </span>
+        );
+      },
+    },
+  ];
+
+  return {
+    getCellProps: (cellInfo) => {
+      return {
+        style: {
+          padding: "8px",
+          fontSize: "12px",
+        },
+      };
+    },
+    disableSort: false,
+    autoSort: false,
+    manualPagination: true,
+    initSortId: "applicationDate",
+    onPageSizeChange: onPageSizeChange,
+    currentPage: Math.floor(offset / limit),
+    onNextPage: () =>
+      dispatch({
+        action: "mutateTableForm",
+        data: { ...formState.tableForm, offset: parseInt(formState.tableForm?.offset) + parseInt(formState.tableForm?.limit) },
+        checkPathName,
+      }),
+    onPrevPage: () =>
+      dispatch({
+        action: "mutateTableForm",
+        data: { ...formState.tableForm, offset: parseInt(formState.tableForm?.offset) - parseInt(formState.tableForm?.limit) },
+        checkPathName,
+      }),
+    pageSizeLimit: limit,
+    onSort: onSortingByData,
+    // sortParams: [{id: getValues("sortBy"), desc: getValues("sortOrder") === "DESC" ? true : false}],
+    totalRecords: totalCount,
+    onSearch: formState?.searchForm?.message,
+    onLastPage: () =>
+      dispatch({
+        action: "mutateTableForm",
+        data: { ...formState.tableForm, offset: Math.ceil(totalCount / 10) * 10 - parseInt(formState.tableForm?.limit) },
+        checkPathName,
+      }),
+    onFirstPage: () => dispatch({ action: "mutateTableForm", data: { ...formState.tableForm, offset: 0 }, checkPathName }),
+    // globalSearch: {searchForItemsInTable},
+    // searchQueryForTable,
+    data: table,
+    columns: tableColumnConfig,
+    inboxStyles: { ...inboxStyles },
+    tableStyle: { ...tableStyle },
+  };
+};
+
+export default useInboxTableConfig;

package/src/pages/citizen/Home.js

@@ -0,0 +1,41 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { ModuleLinksView } from "@djb25/digit-ui-react-components";
+const Home = () => {
+  const { t } = useTranslation();
+  const propsForModuleCard = {
+    moduleName: t("ACTION_TEST_EKYC"),
+    kpis: [
+      {
+        count: "-",
+        label: t("TOTAL_EKYC"),
+        link: `/digit-ui/citizen/ekyc/dashboard`,
+      },
+    ],
+    links: [
+      {
+        label: t("EKYC_DASHBOARD"),
+        link: `/digit-ui/citizen/ekyc/dashboard`,
+      },
+      {
+        label: t("EKYC_INBOX"),
+        link: `/digit-ui/citizen/ekyc/inbox`,
+      },
+      // {
+      //     label: t("EKYC_CREATE_KYC"),
+      //     link: `/digit-ui/citizen/ekyc/create-kyc`
+      // },
+      // {
+      //     label: t("EKYC_UPDATE_KYC"),
+      //     link: `/digit-ui/citizen/ekyc/update-kyc`
+      // },
+      {
+        label: t("EKYC_MAPPING"),
+        link: `/digit-ui/citizen/ekyc/mapping`,
+      },
+    ],
+  };
+  return <ModuleLinksView links={propsForModuleCard.links} />;
+};
+
+export default Home;

package/src/pages/citizen/Inbox.js

@@ -0,0 +1,255 @@
+import React, { useMemo, useCallback, useReducer } from "react";
+import { useLocation } from "react-router-dom";
+import { InboxComposer } from "@djb25/digit-ui-react-components";
+import useInboxTableConfig from "../../hook/useInboxTableConfig";
+import SearchFormFieldsComponents from "../../components/SearchFormFieldsComponent";
+
+// Mock data removed in favor of API integration
+
+const Inbox = ({ parentRoute }) => {
+  const tenantId = Digit.ULBService.getCurrentTenantId();
+  const location = useLocation();
+
+  const formInitValue = {
+    filterForm: {},
+    searchForm: {},
+    tableForm: {
+      limit: 10,
+      offset: 0,
+      sortBy: "createdTime",
+      sortOrder: "DESC",
+    },
+  };
+
+  const [formState, dispatch] = useReducer(formReducer, formInitValue);
+
+  const queryParams = useMemo(() => {
+    return {
+      tenantId,
+      offset: formState?.tableForm?.offset || 0,
+      limit: formState?.tableForm?.limit || 10,
+      search: formState?.searchForm || {},
+    };
+  }, [tenantId, formState?.tableForm?.offset, formState?.tableForm?.limit, formState?.searchForm]);
+
+  const { isLoading, data: dashboardData = {} } = Digit.Hooks.ekyc.useEkycSurveyorDashboard({}, queryParams, {
+    enabled: !!tenantId,
+    keepPreviousData: true,
+  });
+
+  const searchDetails = useMemo(
+    () => ({
+      kno: formState?.searchForm?.kNumber || "",
+      name: formState?.searchForm?.kName || "",
+    }),
+    [formState?.searchForm?.kNumber, formState?.searchForm?.kName]
+  );
+
+  const isSearchActive = !!(searchDetails.kno || searchDetails.name);
+
+  const { isLoading: isSearchLoading, data: searchData } = Digit.Hooks.ekyc.useSearchConnection(
+    {
+      tenantId,
+      details: searchDetails,
+    },
+    {
+      enabled: !!tenantId && !!searchDetails.kno, // 🔥 important
+      keepPreviousData: true,
+    }
+  );
+
+  const sourceData = useMemo(() => {
+    if (isSearchActive) {
+      if (!searchData) return [];
+      return [searchData];
+    }
+
+    return dashboardData?.dashboardInfo?.consumerList || [];
+  }, [isSearchActive, searchData, dashboardData]);
+
+  const filteredData = useMemo(() => {
+    return (sourceData || []).map((item) => {
+      // ✅ detect search response
+      const isSearchItem = !!item.connectionDetails;
+
+      if (isSearchItem) {
+        return {
+          applicationNo: item.propertyInfo?.kno || "",
+          connectionNo: item.propertyInfo?.kno || "",
+          owner: item.connectionDetails?.consumerName || "",
+          applicationNumber: item.propertyInfo?.kno || "",
+          citizenName: item.connectionDetails?.consumerName || "",
+          status: item.connectionDetails?.statusflag || "",
+          sla: 0,
+        };
+      }
+
+      // ✅ dashboard mapping
+      return {
+        ...item,
+        applicationNo: item.kno || item.applicationNumber || "",
+        connectionNo: item.connectionNo || "",
+        owner: item.consumerName || item.citizenName || "",
+        applicationNumber: item.kno || item.applicationNumber || "",
+        citizenName: item.consumerName || item.citizenName || "",
+        status: item.status || "",
+        sla: item.sla ?? 0,
+      };
+    });
+  }, [sourceData]);
+
+  const totalRecords = dashboardData?.dashboardInfo?.totalRecords || dashboardData?.totalCount || 0;
+
+  const checkPathName = location.pathname.includes("ekyc/inbox");
+  const PropsForInboxLinks = {
+    headerText: checkPathName ? "MODULE_WATER" : "MODULE_SW",
+  };
+
+  const SearchFormFields = useCallback(
+    ({ registerRef, searchFormState, controlSearchForm }) => (
+      <SearchFormFieldsComponents {...{ registerRef, searchFormState, controlSearchForm }} className="search" />
+    ),
+    []
+  );
+
+  const tableOrderFormDefaultValues = {
+    sortBy: "createdTime",
+    limit: window.Digit.Utils.browser.isMobile() ? 50 : 10,
+    offset: 0,
+    sortOrder: "DESC",
+  };
+
+  const onSearchFormSubmit = (data) => {
+    data.hasOwnProperty("") && delete data?.[""];
+    dispatch({ action: "mutateTableForm", data: { ...tableOrderFormDefaultValues }, checkPathName });
+    dispatch({ action: "mutateSearchForm", data, checkPathName });
+  };
+
+  const searchFormDefaultValues = {
+    mobileNumber: "",
+    applicationNumber: "",
+    consumerNo: "",
+  };
+
+  const onSearchFormReset = (setSearchFormValue) => {
+    setSearchFormValue("mobileNumber", null);
+    setSearchFormValue("applicationNumber", null);
+    setSearchFormValue("consumerNo", null);
+    dispatch({ action: "mutateSearchForm", data: searchFormDefaultValues });
+  };
+
+  const propsForSearchForm = {
+    SearchFormFields,
+    onSearchFormSubmit,
+    searchFormDefaultValues: formState?.searchForm,
+    resetSearchFormDefaultValues: searchFormDefaultValues,
+    onSearchFormReset,
+    className: "search-form-wns-inbox",
+  };
+
+  const FilterFormFields = useCallback(
+    ({ registerRef, controlFilterForm, setFilterFormValue, getFilterFormValue }) => <React.Fragment></React.Fragment>,
+    []
+  );
+
+  const propsForFilterForm = {
+    FilterFormFields,
+    onFilterFormSubmit: () => {},
+    filterFormDefaultValues: "",
+    resetFilterFormDefaultValues: "",
+    onFilterFormReset: () => {},
+  };
+
+  function formReducer(state, payload) {
+    const storageKey = payload.checkPathName ? "EKYC.INBOX" : "EKYC.SW.INBOX";
+
+    // ✅ safety for SLA
+    switch (payload.action) {
+      case "mutateSearchForm":
+        Digit.SessionStorage.set(storageKey, { ...state, searchForm: payload.data });
+        return { ...state, searchForm: payload.data };
+
+      case "mutateFilterForm":
+        Digit.SessionStorage.set(storageKey, { ...state, filterForm: payload.data });
+        return { ...state, filterForm: payload.data };
+
+      case "mutateTableForm":
+        Digit.SessionStorage.set(storageKey, { ...state, tableForm: payload.data });
+        return { ...state, tableForm: payload.data };
+
+      default:
+        return state; // ✅ IMPORTANT
+    }
+  }
+
+  const onPageSizeChange = (e) => {
+    const newLimit = Number(e.target.value);
+
+    dispatch({
+      action: "mutateTableForm",
+      data: {
+        ...formState.tableForm,
+        limit: newLimit,
+        offset: 0, // reset page
+      },
+      checkPathName,
+    });
+  };
+
+  const onSortingByData = (e) => {
+    if (e.length > 0) {
+      const [{ id, desc }] = e;
+      const sortOrder = desc ? "DESC" : "ASC";
+      const sortBy = id;
+
+      if (!(formState.tableForm.sortBy === sortBy && formState.tableForm.sortOrder === sortOrder)) {
+        dispatch({
+          action: "mutateTableForm",
+          data: {
+            ...formState.tableForm,
+            sortBy: id,
+            sortOrder: desc ? "DESC" : "ASC",
+          },
+          checkPathName,
+        });
+      }
+    }
+  };
+
+  const propsForInboxTable = useInboxTableConfig({
+    ...{
+      parentRoute,
+      onPageSizeChange,
+      formState,
+      totalCount: totalRecords,
+      table: filteredData,
+      dispatch,
+      onSortingByData,
+      tenantId,
+      checkPathName,
+      inboxStyles: { overflowX: "scroll", overflowY: "hidden" },
+      tableStyle: { width: "70%" },
+    },
+  });
+
+  const isInboxLoading = isLoading || isSearchLoading;
+
+  return (
+    <div className="app-container">
+      <InboxComposer
+        {...{
+          isInboxLoading,
+          PropsForInboxLinks,
+          ...propsForSearchForm,
+          ...propsForFilterForm,
+          // ...propsForMobileSortForm,
+          propsForInboxTable,
+          // propsForInboxMobileCards,
+          formState,
+        }}
+      />
+    </div>
+  );
+};
+
+export default Inbox;