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

package/src/components/EKYCCard.js

@@ -3,31 +3,43 @@ import React from "react";
 import { useTranslation } from "react-i18next";
 
 const EKYCCard = () => {
-    const { t } = useTranslation();
+  const { t } = useTranslation();
 
-    const propsForModuleCard = {
-        Icon: <PersonIcon />,
-        moduleName: t("ACTION_TEST_EKYC"),
-        kpis: [
-            {
-                count: "-",
-                label: t("TOTAL_EKYC"),
-                link: `/digit-ui/employee/ekyc/dashboard`
-            }
-        ],
-        links: [
-            {
-                label: t("EKYC_DASHBOARD"),
-                link: `/digit-ui/employee/ekyc/dashboard`
-            },
-            {
-                label: t("EKYC_CREATE_KYC"),
-                link: `/digit-ui/employee/ekyc/create-kyc`
-            },
-        ]
-    }
+  const propsForModuleCard = {
+    Icon: <PersonIcon />,
+    moduleName: t("ACTION_TEST_EKYC"),
+    kpis: [
+      {
+        count: "-",
+        label: t("TOTAL_EKYC"),
+        link: `/digit-ui/employee/ekyc/dashboard`,
+      },
+    ],
+    links: [
+      {
+        label: t("EKYC_DASHBOARD"),
+        link: `/digit-ui/employee/ekyc/dashboard`,
+      },
+      {
+        label: t("EKYC_INBOX"),
+        link: `/digit-ui/employee/ekyc/inbox`,
+      },
+      // {
+      //     label: t("EKYC_CREATE_KYC"),
+      //     link: `/digit-ui/employee/ekyc/create-kyc`
+      // },
+      // {
+      //     label: t("EKYC_UPDATE_KYC"),
+      //     link: `/digit-ui/employee/ekyc/update-kyc`
+      // },
+      {
+        label: t("EKYC_MAPPING"),
+        link: `/digit-ui/employee/ekyc/mapping`,
+      },
+    ],
+  };
 
-    return <EmployeeModuleCard {...propsForModuleCard} />
+  return <EmployeeModuleCard {...propsForModuleCard} />;
 };
 
 export default EKYCCard;

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/SearchConsumer.js

@@ -1,7 +1,6 @@
-import React, { useState, Fragment } from "react";
-import { TextInput, Card, SubmitBar, Header, HomeIcon } from "@djb25/digit-ui-react-components";
+import React, { useState } from "react";
+import { TextInput, Card, HomeIcon } from "@djb25/digit-ui-react-components";
 import { useTranslation } from "react-i18next";
-import StatusCards from "./StatusCards";
 
 const SearchConsumer = ({ onSearch, searchParams, FilterComponent, children, ...props }) => {
   const { t } = useTranslation();
@@ -23,110 +22,121 @@ const SearchConsumer = ({ onSearch, searchParams, FilterComponent, children, ...
   };
 
   return (
-    <div className="inbox-container">
-      <div className="filters-container">
-        {/* Sidebar Title Card */}
-        <Card
-          className="sidebar-title-card"
-          style={{ display: "flex", alignItems: "center", padding: "16px", marginBottom: "16px", borderRadius: "4px" }}
-        >
-          <div className="icon-container" style={{ color: "#3A8DCC", marginRight: "12px" }}>
-            <HomeIcon style={{ width: "24px", height: "24px" }} />
-          </div>
-          <div style={{ fontWeight: "700", fontSize: "18px", color: "#0B0C0C" }}>{t("ACTION_CREATE_EKYC")}</div>
-        </Card>
-
-        <div>
-          {FilterComponent && (
-            <FilterComponent
-              defaultSearchParams={props.defaultSearchParams}
-              onFilterChange={props.onSearch}
-              searchParams={searchParams}
-              type="desktop"
-              moduleCode="EKYC"
-            />
-          )}
+    <div className="ekyc-employee-container">
+      <div className="search-consumer-wrapper">
+        <div className="header-wrapper">
+          {/* Sidebar Title Card — flush top, full width */}
+          <Card className="sidebar-title-card">
+            <div className="icon-container">
+              <HomeIcon />
+            </div>
+            <div className="title-text">
+              {t("EKYC_SEARCH_CONSUMER_HEADER")}
+            </div>
+          </Card>
         </div>
-      </div>
 
-      <div style={{ flex: 1, marginLeft: "16px" }}>
-        {/* <Card className="ekyc-metrics-card" style={{ marginBottom: "16px", padding: "16px" }}>
-                    <StatusCards countData={props.countData} />
-                </Card> */}
-
-        <Card
-          className="ekyc-search-card"
-          style={{ padding: "24px", marginBottom: "24px", borderRadius: "12px", boxShadow: "0 4px 12px rgba(0,0,0,0.05)" }}
-        >
-          <Header style={{ fontSize: "24px", marginBottom: "20px", fontWeight: "700", color: "#0B0C0C" }}>{t("EKYC_SEARCH_CONSUMER_HEADER")}</Header>
-          <form onSubmit={onSubmit}>
-            <div style={{ display: "flex", gap: "24px", alignItems: "flex-end", flexWrap: "wrap" }}>
-              <div style={{ flex: "1", minWidth: "250px" }}>
-                <div className="filter-label" style={{ fontWeight: "600", marginBottom: "8px", fontSize: "14px", color: "#505A5F" }}>
-                  {t("EKYC_K_NUMBER")}
-                </div>
-                <div style={{ position: "relative" }}>
-                  <TextInput
-                    value={_searchParams?.kNumber}
-                    onChange={(e) => onChange("kNumber", e.target.value)}
-                    placeholder={t("EKYC_K_NUMBER_PLACEHOLDER")}
-                    style={{ borderRadius: "8px", paddingLeft: "12px", height: "44px" }}
-                  />
+        {/* Main Content */}
+        <div className="main-content-wrapper">
+          {/* Top Row: Search Card + Stats Cards */}
+          <div className="search-stats-row">
+            {/* Identity Lookup Card */}
+            <div className="identity-lookup-card">
+              {/* Card Title */}
+              <div className="lookup-card-title">
+                <div className="lookup-icon-bg">
+                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#3A7BD5" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                    <circle cx="11" cy="11" r="8" />
+                    <line x1="21" y1="21" x2="16.65" y2="16.65" />
+                  </svg>
                 </div>
+                <span className="lookup-title-text">
+                  {t("EKYC_IDENTITY_LOOKUP") || "Identity Lookup"}
+                </span>
               </div>
 
-              <div style={{ flex: "1", minWidth: "250px" }}>
-                <div className="filter-label" style={{ fontWeight: "600", marginBottom: "8px", fontSize: "14px", color: "#505A5F" }}>
-                  {t("EKYC_K_NAME")}
+              {/* Inputs Row */}
+              <form onSubmit={onSubmit}>
+                <div className="inputs-row">
+                  <div className="input-group">
+                    <label>
+                      {t("EKYC_K_NUMBER") || "K Number"}
+                      <span className="info-badge">i</span>
+                    </label>
+                    <TextInput
+                      value={_searchParams?.kNumber}
+                      onChange={(e) => onChange("kNumber", e.target.value)}
+                      placeholder={t("EKYC_K_NUMBER_PLACEHOLDER") || "e.g. 8234910234"}
+                    />
+                  </div>
+
+                  <div className="input-group">
+                    <label>
+                      {t("EKYC_K_NAME") || "K Name"}
+                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#3A7BD5" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                        <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
+                        <circle cx="12" cy="7" r="4" />
+                      </svg>
+                    </label>
+                    <TextInput
+                      value={_searchParams?.kName}
+                      onChange={(e) => onChange("kName", e.target.value)}
+                      placeholder={t("EKYC_K_NAME_PLACEHOLDER") || "Consumer name search"}
+                    />
+                  </div>
                 </div>
-                <div style={{ position: "relative" }}>
-                  <TextInput
-                    value={_searchParams?.kName}
-                    onChange={(e) => onChange("kName", e.target.value)}
-                    placeholder={t("EKYC_K_NAME_PLACEHOLDER")}
-                    style={{ borderRadius: "8px", paddingLeft: "12px", height: "44px" }}
-                  />
+
+                {/* Actions Row */}
+                <div className="actions-row">
+                  <button type="button" onClick={onClear} className="clear-btn">
+                    {t("ES_COMMON_CLEAR") || "Clear"}
+                  </button>
+                  <button type="submit" className="search-btn">
+                    {t("ES_COMMON_SEARCH") || "Execute Search"}
+                  </button>
                 </div>
-              </div>
+              </form>
             </div>
-            <div style={{ display: "flex", justifyContent: "flex-end", marginTop: "20px" }}>
-              <div style={{ display: "flex", gap: "12px", alignItems: "center" }}>
-                <button
-                  type="button"
-                  onClick={onClear}
-                  style={{
-                    background: "none",
-                    border: "none",
-                    color: "#0076f3ff",
-                    fontWeight: "600",
-                    cursor: "pointer",
-                    fontSize: "14px",
-                    padding: "10px",
-                  }}
-                >
-                  {t("ES_COMMON_CLEAR")}
-                </button>
 
-                <SubmitBar
-                  label={t("ES_COMMON_SEARCH")}
-                  onSubmit={onSubmit}
-                  style={{
-                    margin: 0,
-                    borderRadius: "8px",
-                    height: "44px",
-                    padding: "0 32px",
-                    // ❌ remove this (it breaks alignment)
-                    // marginTop: "-55px"
-                  }}
-                />
+            {/* Right Stats Column */}
+            <div className="stats-column">
+              {/* Today's Audits Card */}
+              <div className="audits-card">
+                <div className="audits-label">{t("EKYC_TODAYS_AUDITS") || "Today's Audits"}</div>
+                <div className="audits-count">{props.countData?.todaysAudits || 24}</div>
+                <div className="audits-change">
+                  <span>↗</span>
+                  {props.countData?.auditChange || "12% increase from yesterday"}
+                </div>
+                <div className="audits-watermark">M</div>
+              </div>
+
+              {/* Queue Status Card */}
+              <div className="queue-card">
+                <div className="queue-label">{t("EKYC_QUEUE_STATUS") || "Queue Status"}</div>
+                <div className="queue-content">
+                  <div className="queue-status-text">
+                    {props.countData?.pendingCount || 3} Pending
+                  </div>
+                  <div className="avatar-group">
+                    {[0, 1].map((i) => (
+                      <div key={i} className="avatar-item">
+                        {String.fromCharCode(65 + i)}
+                      </div>
+                    ))}
+                    <div className="avatar-more">+1</div>
+                  </div>
+                </div>
               </div>
             </div>
-          </form>
-        </Card>
-        {children}
+          </div>
+
+          {/* Children (ConnectionDetailsView or placeholder) */}
+          {children}
+        </div>
       </div>
     </div>
   );
 };
 
-export default SearchConsumer;
+export default SearchConsumer;

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;