@djb25/digit-ui-module-ekyc 1.0.4 → 1.0.5

package/package.json

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

package/src/components/DesktopInbox.js

@@ -44,11 +44,11 @@ const DesktopInbox = ({ tableConfig, filterComponent, ...props }) => {
         accessor: "citizenName",
         Cell: ({ row }) => <span>{row.original?.citizenName || "NA"}</span>,
       },
-      {
-        Header: t("EKYC_MOBILE_NO"),
-        accessor: "mobileNumber",
-        Cell: ({ row }) => <span>{row.original?.mobileNumber || "NA"}</span>,
-      },
+      // {
+      //   Header: t("EKYC_MOBILE_NO"),
+      //   accessor: "mobileNumber",
+      //   Cell: ({ row }) => <span>{row.original?.mobileNumber || "NA"}</span>,
+      // },
       {
         Header: t("EKYC_STATUS"),
         accessor: "status",

package/src/components/SearchConsumer.js

@@ -88,7 +88,8 @@ const SearchConsumer = ({ onSearch, searchParams, FilterComponent, children, ...
                   />
                 </div>
               </div>
-
+            </div>
+            <div style={{ display: "flex", justifyContent: "flex-end", marginTop: "20px" }}>
               <div style={{ display: "flex", gap: "12px", alignItems: "center" }}>
                 <button
                   type="button"
@@ -105,10 +106,18 @@ const SearchConsumer = ({ onSearch, searchParams, FilterComponent, children, ...
                 >
                   {t("ES_COMMON_CLEAR")}
                 </button>
+
                 <SubmitBar
                   label={t("ES_COMMON_SEARCH")}
                   onSubmit={onSubmit}
-                  style={{ margin: 0, borderRadius: "8px", height: "44px", padding: "0 32px", marginTop: "-55px" }}
+                  style={{
+                    margin: 0,
+                    borderRadius: "8px",
+                    height: "44px",
+                    padding: "0 32px",
+                    // ❌ remove this (it breaks alignment)
+                    // marginTop: "-55px"
+                  }}
                 />
               </div>
             </div>

package/src/pages/employee/AadhaarVerification.js

@@ -129,8 +129,8 @@ const RadioToggleRow = ({ label, selected, onSelect, t, options }) => (
       selectedOption={selected}
       onSelect={onSelect}
       t={t}
-      innerStyles={{ display: "flex", gap: "20px" }}
-      style={{ marginBottom: 0 }}
+      innerStyles={{ display: "flex", gap: "20px", alignItems: "center" }}
+      style={{ display: "flex", gap: "20px", marginBottom: 0 }}
     />
   </div>
 );
@@ -257,7 +257,7 @@ const AadhaarVerification = () => {
       display: "grid",
       gridTemplateColumns: "1fr 1fr",
       gap: "14px",
-      marginBottom: "4px",
+      marginBottom: "20px",
     },
     optionalTag: {
       display: "inline-block",
@@ -364,7 +364,7 @@ const AadhaarVerification = () => {
                   if (val.length <= 12 && /^\d*$/.test(val)) setAadhaarLastFour(val);
                 }}
                 placeholder={t("EKYC_ENTER_LAST_4_DIGIT") || "Enter 12 digits"}
-                maxLength={4}
+                maxLength={12}
                 disabled={isAadhaarVerified}
                 inputStyle={isAadhaarVerified ? styles.verifiedInput : {}}
               />
@@ -428,12 +428,14 @@ const AadhaarVerification = () => {
             selected={nameCorrect}
             onSelect={setNameCorrect}
             options={yesNoOptions}
+            sty
             t={t}
           />
           <LabelFieldPair>
             <div className="field">
               <IconInput
                 icon={<UserIcon size={15} color={nameCorrect.code === "YES" ? "#64748b" : "#94a3b8"} />}
+                style={{ marginBottom: "12px" }}
                 value={userName}
                 onChange={(e) => setUserName(e.target.value)}
                 placeholder={t("EKYC_ENTER_NAME_PLACEHOLDER") || "Enter full name"}
@@ -454,6 +456,7 @@ const AadhaarVerification = () => {
             <div className="field">
               <IconInput
                 icon={<PhoneIcon size={15} color={mobileChange.code === "YES" ? "#64748b" : "#94a3b8"} />}
+                style={{ marginBottom: "12px" }}
                 value={mobileNumber}
                 onChange={(e) => setMobileNumber(e.target.value)}
                 placeholder="+91 XXXXX XXXXX"

package/src/pages/employee/AddressDetails.js

@@ -1,4 +1,4 @@
-import React, { useState, useRef, Fragment } from "react";
+import React, { useState, useRef, Fragment, useEffect } from "react";
 import {
   Card,
   LabelFieldPair,
@@ -14,6 +14,8 @@ import {
   HomeIcon,
   ConnectingCheckPoints,
   CheckPoint,
+  Dropdown,
+  Loader,
 } from "@djb25/digit-ui-react-components";
 import { useTranslation } from "react-i18next";
 import { useHistory, useLocation } from "react-router-dom";
@@ -164,6 +166,71 @@ const AddressDetails = ({ isSection = false, onComplete, parentState }) => {
   const [isLocationFetching, setIsLocationFetching] = useState(false);
   const fileInputRef = useRef(null);
 
+  const tenantId = Digit.ULBService.getCurrentTenantId();
+  const { data: mdmsData, isLoading: isMdmsLoading } = Digit.Hooks.useCommonMDMS(
+    tenantId,
+    "egov-location",
+    ["TenantBoundary"]
+  );
+
+  const mdmsRes = mdmsData?.MdmsRes || mdmsData;
+  const adminHierarchy = mdmsRes?.["egov-location"]?.TenantBoundary?.find(h => h.hierarchyType.code === "ADMIN") 
+    || mdmsRes?.["egov-location"]?.TenantBoundary?.[0];
+  
+  const rootBoundary = adminHierarchy?.boundary;
+  
+  const getAssemblies = (boundaries) => {
+    if (!boundaries) return [];
+    let assemblies = [];
+    const targetLabel = "assembly constituency";
+    for (const boundary of boundaries) {
+      const label = (boundary.label || boundary.name || "").toLowerCase().replace(/_/g, " ");
+      if (label === targetLabel || label === "assemblyconstituency") {
+        assemblies.push({ code: boundary.code, name: boundary.name, children: boundary.children });
+      }
+      if (boundary.children?.length) {
+        assemblies.push(...getAssemblies(boundary.children));
+      }
+    }
+    return assemblies;
+  };
+
+  const getBlocks = (children) => {
+    if (!children) return [];
+    let blocks = [];
+    const targetLabel = "block";
+    for (const child of children) {
+      const label = (child.label || child.name || "").toLowerCase().replace(/_/g, " ");
+      if (label === targetLabel) {
+        blocks.push({ code: child.code, name: child.name });
+      }
+      if (child.children?.length) {
+        blocks.push(...getBlocks(child.children));
+      }
+    }
+    return blocks;
+  };
+
+  const assemblies = getAssemblies(Array.isArray(rootBoundary) ? rootBoundary : rootBoundary ? [rootBoundary] : []);
+
+  const [assembly, setAssembly] = useState(addrDetails.assembly ? { name: addrDetails.assembly } : null);
+  const [ward, setWard] = useState(addrDetails.ward ? { name: addrDetails.ward } : null);
+
+  useEffect(() => {
+    if (mdmsRes && addrDetails.assembly && !assembly?.code) {
+      const foundAssembly = assemblies.find((a) => a.name === addrDetails.assembly || a.code === addrDetails.assembly);
+      if (foundAssembly) setAssembly(foundAssembly);
+    }
+  }, [mdmsRes, assemblies]);
+
+  const blocks = assembly ? getBlocks(assembly.children) : [];
+
+  useEffect(() => {
+    if (assembly && ward && !blocks.find((b) => b.name === ward.name)) {
+      setWard(null);
+    }
+  }, [assembly]);
+
   const addressOptions = [
     { code: "AADHAAR", name: "EKYC_AADHAAR_ADDRESS" },
     { code: "OLD", name: "EKYC_OLD_ADDRESS" },
@@ -175,7 +242,17 @@ const AddressDetails = ({ isSection = false, onComplete, parentState }) => {
   ];
 
   const handleCompleteVerification = () => {
-    const payload = { addressType, fullAddress, flatNo, building, landmark, pincode, doorPhoto };
+    const payload = { 
+      addressType, 
+      fullAddress, 
+      flatNo, 
+      building, 
+      landmark, 
+      pincode, 
+      doorPhoto,
+      assembly: assembly?.name,
+      ward: ward?.name
+    };
     if (onComplete) {
       onComplete(payload);
     } else {
@@ -418,24 +495,35 @@ const AddressDetails = ({ isSection = false, onComplete, parentState }) => {
         label={t("EKYC_ADMINISTRATIVE_DIVISION") || "Administrative Division"}
       />
 
-      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "14px", marginBottom: "24px" }}>
-        <AdminCard
-          bgColor="#E1F5EE"
-          iconBg="#9FE1CB"
-          icon={<FlagIcon size={18} />}
-          labelColor="#0F6E56"
-          label={t("EKYC_ASSEMBLY") || "Assembly"}
-          value={addrDetails.assembly || "AC-12 Chandni Chowk"}
-        />
-        <AdminCard
-          bgColor="#E6F1FB"
-          iconBg="#B5D4F4"
-          icon={<IdCardIcon size={18} />}
-          labelColor="#185FA5"
-          label={t("EKYC_WARD") || "Ward"}
-          value={addrDetails.ward || "WARD-45 Civil Lines"}
-        />
-      </div>
+      {isMdmsLoading ? <Loader /> : (
+        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "14px", marginBottom: "24px" }}>
+          <div>
+            <div style={{ fontSize: "11px", fontWeight: "600", color: "#667085", textTransform: "uppercase", letterSpacing: "0.04em", marginBottom: "6px" }}>
+              {t("EKYC_ASSEMBLY") || "Assembly Constituency"}
+            </div>
+            <Dropdown
+              option={assemblies}
+              optionKey="name"
+              selected={assembly}
+              select={(val) => { setAssembly(val); setWard(null); }}
+              t={t}
+            />
+          </div>
+          <div>
+            <div style={{ fontSize: "11px", fontWeight: "600", color: "#667085", textTransform: "uppercase", letterSpacing: "0.04em", marginBottom: "6px" }}>
+              {t("EKYC_WARD") || "Block"}
+            </div>
+            <Dropdown
+              option={blocks}
+              optionKey="name"
+              selected={ward}
+              select={setWard}
+              disabled={!assembly}
+              t={t}
+            />
+          </div>
+        </div>
+      )}
 
       <hr style={{ margin: "24px 0", border: 0, borderTop: "1px solid #EAECF0" }} />
 

package/src/pages/employee/Inbox.js

@@ -4,13 +4,7 @@ import DesktopInbox from "../../components/DesktopInbox";
 import MobileInbox from "../../components/MobileInbox";
 import Filter from "../../components/Filter";
 
-const MOCK_DATA_ITEMS = [
-    { applicationNumber: "EKYC-2024-001", citizenName: "Rahul Sharma", mobileNumber: "9876543210", status: "COMPLETED" },
-    { applicationNumber: "EKYC-2024-002", citizenName: "Anjali Devi", mobileNumber: "9123456789", status: "PENDING" },
-    { applicationNumber: "EKYC-2024-003", citizenName: "Amit Kumar", mobileNumber: "8888888888", status: "REJECTED" },
-    { applicationNumber: "EKYC-2024-004", citizenName: "Priya Singh", mobileNumber: "7777777777", status: "COMPLETED" },
-    { applicationNumber: "EKYC-2024-005", citizenName: "Suresh Gupta", mobileNumber: "6666666666", status: "PENDING" },
-];
+// Mock data removed in favor of API integration
 
 const Inbox = ({
     parentRoute,
@@ -33,28 +27,40 @@ const Inbox = ({
     // Maintain the full search objects for the Search component
     const [searchParams, setSearchParams] = useState(initialStates.searchParams || { status: defaultStatusOption });
 
-    // 2. Local Filtering Logic for Static Data
-    const filteredStaticData = useMemo(() => {
-        return MOCK_DATA_ITEMS.filter((item) => {
-            let match = true;
-            // Extract the string value from the status object if it exists
-            const currentStatus = searchParams.status?.value !== undefined ? searchParams.status.value : searchParams.status;
-
-            if (currentStatus && item.status !== currentStatus) {
-                match = false;
-            }
-            return match;
-        });
-    }, [searchParams]);
-
-    const staticCountData = useMemo(() => {
+    // 2. API Data Fetching
+    const { isLoading, data: dashboardData, isFetching } = Digit.Hooks.ekyc.useEkycSurveyorDashboard(
+        {}, 
+        { 
+            tenantId, 
+            offset: pageOffset, 
+            limit: pageSize,
+            status: searchParams.status?.value || ""
+        },
+        {
+            enabled: !!tenantId,
+        }
+    );
+
+    const filteredData = useMemo(() => {
+        const items = dashboardData?.dashboardInfo?.consumerList || [];
+        return items.map(item => ({
+            ...item,
+            applicationNumber: item.kno || item.applicationNumber,
+            citizenName: item.consumerName || item.citizenName,
+        }));
+    }, [dashboardData]);
+
+    const countData = useMemo(() => {
+        const info = dashboardData?.dashboardInfo || {};
         return {
-            total: MOCK_DATA_ITEMS.length,
-            completed: MOCK_DATA_ITEMS.filter(i => i.status === "COMPLETED").length,
-            pending: MOCK_DATA_ITEMS.filter(i => i.status === "PENDING").length,
-            rejected: MOCK_DATA_ITEMS.filter(i => i.status === "REJECTED").length
+            total: info.total || 0,
+            completed: info.completed || 0,
+            pending: info.pending || 0,
+            rejected: info.rejected || 0
         };
-    }, []);
+    }, [dashboardData]);
+
+    const totalRecords = dashboardData?.dashboardInfo?.totalRecords || dashboardData?.totalCount || 0;
 
     // 3. Handlers
     const handleSearch = useCallback((filterParam) => {
@@ -98,19 +104,19 @@ const Inbox = ({
             <div className="inbox-main-container">
                 {Digit.Utils.browser.isMobile() ? (
                     <MobileInbox
-                        data={{ items: filteredStaticData, totalCount: filteredStaticData.length }}
-                        isLoading={false}
+                        data={{ items: filteredData, totalCount: totalRecords }}
+                        isLoading={isLoading || isFetching}
                         onSearch={handleSearch}
                         searchFields={searchFields}
                         searchParams={searchParams}
                         parentRoute={parentRoute}
-                        countData={staticCountData}
+                        countData={countData}
                     />
                 ) : (
                     <DesktopInbox
                         businessService={businessService}
-                        data={{ items: filteredStaticData, totalCount: filteredStaticData.length }}
-                        isLoading={false}
+                        data={{ items: filteredData, totalCount: totalRecords }}
+                        isLoading={isLoading || isFetching}
                         searchFields={searchFields}
                         onSearch={handleSearch}
                         onSort={handleSort}
@@ -122,8 +128,8 @@ const Inbox = ({
                         parentRoute={parentRoute}
                         searchParams={searchParams}
                         sortParams={sortParams}
-                        totalRecords={filteredStaticData.length}
-                        countData={staticCountData}
+                        totalRecords={totalRecords}
+                        countData={countData}
                         filterComponent="EKYC_INBOX_FILTER"
                     />
                 )}