@djb25/digit-ui-module-ekyc 1.0.9 → 1.0.11

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@djb25/digit-ui-module-ekyc",
-    "version": "1.0.9",
+    "version": "1.0.11",
     "description": "Digit UI Module for Ekyc",
     "main": "dist/index.js",
     "module": "dist/index.modern.js",

package/src/Module.js

@@ -3,7 +3,7 @@ import { useTranslation } from "react-i18next";
 import { useRouteMatch } from "react-router-dom";
 import { CitizenHomeCard, DocumentIcon } from "@djb25/digit-ui-react-components";
 import EKYCCard from "./components/EKYCCard";
-import Inbox from "./pages/employee/Dashboard";
+import Inbox from "./components/Dashboard";
 import DesktopInbox from "./components/DesktopInbox";
 import MobileInbox from "./components/MobileInbox";
 import Filter from "./components/Filter";
@@ -13,16 +13,11 @@ import AadhaarVerification from "./pages/employee/AadhaarVerification";
 import AddressDetails from "./pages/employee/AddressDetails";
 import PropertyInfo from "./pages/employee/PropertyInfo";
 import MeterDetails from "./pages/employee/MeterDetails";
-export const EkycModule = ({ stateCode, userType, tenants }) => {
+export const EkycModule = ({ userType, tenants }) => {
   const { path, url } = useRouteMatch();
-  const moduleCode = "EKYC";
-  const language = Digit.StoreData.getCurrentLanguage();
-  const { isLoading, data: store } = Digit.Services.useStore({ stateCode, moduleCode, language });
+
   Digit.SessionStorage.set("EKYC_TENANTS", tenants);
 
-  if (isLoading) {
-    return null;
-  }
   if (userType === "employee") {
     return <EmployeeApp path={path} url={url} userType={userType} tenants={tenants} />;
   } else return <CitizenApp />;

package/src/{pages/employee → components}/Dashboard.js

@@ -1,10 +1,10 @@
 import React, { useMemo } from "react";
-import StatusCards from "../../components/StatusCards";
+import StatusCards from "./StatusCards";
 import { Card, Loader } from "@djb25/digit-ui-react-components";
 
 // Mock data removed in favor of API integration
 
-const Dashboard = ({ parentRoute, businessService = "EKYC", initialStates = {}, filterComponent, isInbox }) => {
+const Dashboard = () => {
   const tenantId = Digit.ULBService.getCurrentTenantId();
 
   // 2. API Data Fetching
@@ -34,7 +34,7 @@ const Dashboard = ({ parentRoute, businessService = "EKYC", initialStates = {},
   return isLoading ? (
     <Loader />
   ) : (
-    <Card>
+    <Card className="min-width-full">
       <StatusCards countData={countData} />
     </Card>
   );

package/src/components/SearchFormFieldsComponent.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { Controller } from "react-hook-form";
-import { CardLabelError, TextInput, Tooltip, Label } from "@djb25/digit-ui-react-components";
+import { CardLabelError, TextInput, CustomTooltip, Label } from "@djb25/digit-ui-react-components";
 import { useTranslation } from "react-i18next";
 
 const SearchFormFieldsComponents = ({ searchFormState, controlSearchForm }) => {
@@ -13,7 +13,7 @@ const SearchFormFieldsComponents = ({ searchFormState, controlSearchForm }) => {
       <span className="mobile-input">
         <Label className="flex-roww flex-gap-2">
           {t("EKYC_K_NUMBER") || "K Number"}
-          <Tooltip message={t("EKYC_K_NUMBER_MESSAGE")} />
+          <CustomTooltip message={t("EKYC_K_NUMBER_MESSAGE")} />
         </Label>
 
         <Controller
@@ -36,7 +36,7 @@ const SearchFormFieldsComponents = ({ searchFormState, controlSearchForm }) => {
       {/* <span className="mobile-input">
         <Label className="flex-roww flex-gap-2">
           {t("EKYC_K_NAME") || "K Name"}
-          <Tooltip message={t("EKYC_K_NAME_MESSAGE")} />
+          <CustomTooltip message={t("EKYC_K_NAME_MESSAGE")} />
         </Label>
 
         <Controller

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;

package/src/pages/citizen/index.js

@@ -8,83 +8,62 @@ import AddressDetails from "../employee/AddressDetails";
 import PropertyInfo from "../employee/PropertyInfo";
 import MeterDetails from "../employee/MeterDetails";
 import Review from "../employee/Review";
+import Home from "./Home";
+import Dashboard from "../../components/Dashboard";
+import Inbox from "./Inbox";
 
 const CitizenApp = () => {
-    const { t } = useTranslation();
-    const location = useLocation();
-    const { path } = useRouteMatch();
+  const { t } = useTranslation();
+  const location = useLocation();
+  const { path } = useRouteMatch();
 
-    sessionStorage.removeItem("revalidateddone");
+  sessionStorage.removeItem("revalidateddone");
 
-    const getBreadcrumbLabel = () => {
-        const pathname = location.pathname;
-        if (pathname.includes("/create-kyc")) return "EKYC_CREATE_KYC";
-        if (pathname.includes("/aadhaar-verification")) return "EKYC_AADHAAR_VERIFICATION";
-        if (pathname.includes("/address-details")) return "EKYC_ADDRESS_DETAILS";
-        if (pathname.includes("/property-info")) return "EKYC_PROPERTY_INFO";
-        if (pathname.includes("/meter-details")) return "EKYC_METER_DETAILS";
-        if (pathname.includes("/review")) return "EKYC_REVIEW";
-        return "EKYC_HOME";
-    };
+  const getBreadcrumbLabel = () => {
+    const pathname = location.pathname;
+    if (pathname.includes("/create-kyc")) return "EKYC_CREATE_KYC";
+    if (pathname.includes("/aadhaar-verification")) return "EKYC_AADHAAR_VERIFICATION";
+    if (pathname.includes("/address-details")) return "EKYC_ADDRESS_DETAILS";
+    if (pathname.includes("/property-info")) return "EKYC_PROPERTY_INFO";
+    if (pathname.includes("/meter-details")) return "EKYC_METER_DETAILS";
+    if (pathname.includes("/review")) return "EKYC_REVIEW";
+    return "EKYC_HOME";
+  };
 
-    const breadcrumbs = [
-        { icon: HomeIcon, path: "/digit-ui/citizen" },
-        { label: t(getBreadcrumbLabel()) }
-    ];
+  const breadcrumbs = [{ icon: HomeIcon, path: "/digit-ui/citizen" }, { label: t(getBreadcrumbLabel()) }];
 
-    return (
-        <AppContainer>
-            <div className="ground-container employee-app-container form-container">
-                <ModuleHeader
-                    leftContent={
-                        <React.Fragment>
-                            <ArrowLeft className="icon" />
-                            {t("CS_COMMON_BACK")}
-                        </React.Fragment>
-                    }
-                    onLeftClick={() => window.history.back()}
-                    breadcrumbs={breadcrumbs}
-                />
+  return (
+    <AppContainer>
+      <div className="ground-container employee-app-container form-container">
+        <ModuleHeader
+          leftContent={
+            <React.Fragment>
+              <ArrowLeft className="icon" />
+              {t("CS_COMMON_BACK")}
+            </React.Fragment>
+          }
+          onLeftClick={() => window.history.back()}
+          breadcrumbs={breadcrumbs}
+        />
 
-                <Switch>
-                    <PrivateRoute
-                        path={`${path}/create-kyc`}
-                        component={() => <Create />}
-                    />
+        <Switch>
+          <PrivateRoute exact path={`${path}`} component={() => <Home />} />
+          <PrivateRoute path={`${path}/dashboard`} component={() => <Dashboard />} />
+          <PrivateRoute path={`${path}/inbox`} component={() => <Inbox />} />
 
-                    <PrivateRoute
-                        path={`${path}/aadhaar-verification`}
-                        component={() => <AadhaarVerification />}
-                    />
+          <PrivateRoute path={`${path}/aadhaar-verification`} component={() => <AadhaarVerification />} />
 
-                    <PrivateRoute
-                        path={`${path}/address-details`}
-                        component={() => <AddressDetails />}
-                    />
+          <PrivateRoute path={`${path}/address-details`} component={() => <AddressDetails />} />
 
-                    <PrivateRoute
-                        path={`${path}/property-info`}
-                        component={() => <PropertyInfo />}
-                    />
+          <PrivateRoute path={`${path}/property-info`} component={() => <PropertyInfo />} />
 
-                    <PrivateRoute
-                        path={`${path}/meter-details`}
-                        component={() => <MeterDetails />}
-                    />
+          <PrivateRoute path={`${path}/meter-details`} component={() => <MeterDetails />} />
 
-                    <PrivateRoute
-                        path={`${path}/review`}
-                        component={() => <Review />}
-                    />
-
-                    <PrivateRoute
-                        path={`${path}/`}
-                        component={() => <Create />}
-                    />
-                </Switch>
-            </div>
-        </AppContainer>
-    );
+          <PrivateRoute path={`${path}/review`} component={() => <Review />} />
+        </Switch>
+      </div>
+    </AppContainer>
+  );
 };
 
 export default CitizenApp;

package/src/pages/employee/index.js

@@ -2,7 +2,7 @@ import { AppContainer, PrivateRoute, ModuleHeader, ArrowLeft, HomeIcon } from "@
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { Switch, useLocation } from "react-router-dom";
-import Dashboard from "./Dashboard";
+import Dashboard from "../../components/Dashboard";
 import Inbox from "./Inbox";
 import Mapping from "./Mapping";
 import Create from "./Create";