@djb25/digit-ui-module-ekyc 1.0.0 → 1.0.2

package/src/Module.js

@@ -1,28 +1,11 @@
 import React from "react";
-import { Route, Switch, useRouteMatch } from "react-router-dom";
+import { useRouteMatch } from "react-router-dom";
 import EKYCCard from "./components/EKYCCard";
-// import EkycDashboard from "./components/Dashboard";
 import Inbox from "./pages/employee/Inbox";
 import DesktopInbox from "./components/DesktopInbox";
-
-const EmployeeApp = ({ path, url, userType, tenants }) => {
-    return (
-        <Switch>
-            <Route path={`${path}/dashboard`}>
-                <Inbox />
-            </Route>
-            {/* <Route path={`${path}/inbox`}>
-                <Inbox />
-            </Route> */}
-            <Route path={`${path}/create-kyc`}>
-                <div>Create KYC Page Placeholder</div>
-            </Route>
-            <Route path={`${path}`}>
-                <Inbox />
-            </Route>
-        </Switch>
-    );
-};
+import MobileInbox from "./components/MobileInbox";
+import Filter from "./components/Filter";
+import EmployeeApp from "./pages/employee";
 
 export const EkycModule = ({ stateCode, userType, tenants }) => {
     const { path, url } = useRouteMatch();
@@ -41,10 +24,11 @@ export const EkycModule = ({ stateCode, userType, tenants }) => {
 
 const componentsToRegister = {
     EKYCModule: EkycModule,
-    EKYCCard: EKYCCard,
-    // EkycDashboard: EkycDashboard,
+    EKYCCard,
     EKYCInbox: Inbox,
     EKYCDesktopInbox: DesktopInbox,
+    EKYCMobileInbox: MobileInbox,
+    EKYC_INBOX_FILTER: (props) => <Filter {...props} />,
 };
 
 export const initEkycComponents = () => {

package/src/components/ConnectionDetailsView.js

@@ -0,0 +1,114 @@
+import React, { useState } from "react";
+import { Card, CardHeader, StatusTable, Row, ActionBar, Modal, RadioButtons, Loader, CardLabel, SubmitBar } from "@djb25/digit-ui-react-components";
+import { useTranslation } from "react-i18next";
+import { useHistory, useRouteMatch } from "react-router-dom";
+
+const ConnectionDetailsView = ({ kNumber, kName, connectionDetails, isLoading }) => {
+    const { t } = useTranslation();
+    const history = useHistory();
+    const { path } = useRouteMatch();
+
+    const [showModal, setShowModal] = useState(false);
+    const [selectedOption, setSelectedOption] = useState({ code: "SELF", name: "EKYC_SELF" });
+
+    const options = [
+        { code: "SELF", name: "EKYC_SELF" },
+        { code: "OTHER", name: "EKYC_OTHER" }
+    ];
+
+    const handleStartVerification = () => {
+        setShowModal(true);
+    };
+
+    const onModalConfirm = () => {
+        // Correctly handle redirection from create-kyc or dashboard
+        const parentPath = path.includes("/create-kyc") ? path.replace("/create-kyc", "") : path.replace("/k-details", "");
+        history.push(`${parentPath}/aadhaar-verification`, { kNumber, selectedOption, connectionDetails });
+        setShowModal(false);
+    };
+
+    const handleRaiseCorrection = () => {
+        console.log("Raise Correction clicked");
+    };
+
+    if (isLoading) {
+        return <Loader />;
+    }
+
+    if (!connectionDetails) {
+        return null;
+    }
+
+    return (
+        <React.Fragment>
+            <Card className="ekyc-create-card" style={{ padding: "24px" }}>
+                <CardHeader>{t("EKYC_K_NUMBER_DETAILS")}</CardHeader>
+                <StatusTable>
+                    <Row label={t("EKYC_K_NUMBER")} text={kNumber || t("CS_NA")} />
+                    <Row label={t("EKYC_K_NAME")} text={kName || t("CS_NA")} />
+                </StatusTable>
+
+                <CardHeader style={{ marginTop: "24px" }}>{t("EKYC_CONNECTION_DETAILS")}</CardHeader>
+                {connectionDetails?.connectionDetailsInfo ? (
+                    <StatusTable>
+                        <Row label={t("EKYC_CONSUMER_NAME")} text={connectionDetails.connectionDetailsInfo.consumerName || t("CS_NA")} />
+                        <Row label={t("EKYC_ADDRESS")} text={connectionDetails.connectionDetailsInfo.address || t("CS_NA")} />
+                        <Row label={t("EKYC_CONNECTION_TYPE")} text={connectionDetails.connectionDetailsInfo.connectionType || t("CS_NA")} />
+                        <Row label={t("EKYC_METER_NO")} text={connectionDetails.connectionDetailsInfo.meterNumber || t("CS_NA")} />
+                        <Row label={t("EKYC_PHONE_NO")} text={connectionDetails.connectionDetailsInfo.phoneNumber || t("CS_NA")} />
+                        <Row label={t("EKYC_EMAIL")} text={connectionDetails.connectionDetailsInfo.email || t("CS_NA")} />
+                        <Row label={t("EKYC_STATUS")} text={connectionDetails.connectionDetailsInfo.statusflag || t("CS_NA")} />
+                    </StatusTable>
+                ) : (
+                    <CardLabel>{t("EKYC_NO_CONNECTION_DETAILS_FOUND")}</CardLabel>
+                )}
+
+                <div style={{ display: "flex", justifyContent: "flex-end", marginTop: "16px" }}>
+                    <SubmitBar label={t("EKYC_START_VERIFICATION")} onSubmit={handleStartVerification} style={{ borderRadius: "12px", margin: 0 }} />
+                </div>
+                {/* <button
+                    className="submit-bar"
+                    style={{
+                        marginLeft: "10px",
+                        background: "#f47738",
+                        border: "none",
+                        color: "#fff",
+                        padding: "10px 24px",
+                        borderRadius: "12px",
+                        fontWeight: "600",
+                        cursor: "pointer",
+                        boxShadow: "0 2px 4px rgba(0,0,0,0.1)"
+                    }}
+                    onClick={handleRaiseCorrection}
+                >
+                    {t("EKYC_RAISE_CORRECTION")}
+                </button> */}
+            </Card>
+
+            {showModal && (
+                <Modal
+                    headerBarMain={t("EKYC_SELECT_VERIFICATION_TYPE")}
+                    headerBarEnd={<span onClick={() => setShowModal(false)} style={{ cursor: "pointer", padding: "8px" }}>X</span>}
+                    actionSaveLabel={t("ES_COMMON_CONFIRM")}
+                    actionSaveOnSubmit={onModalConfirm}
+                    actionCancelLabel={t("ES_COMMON_CANCEL")}
+                    actionCancelOnSubmit={() => setShowModal(false)}
+                    style={{ borderRadius: "12px" }}
+                >
+                    <div style={{ padding: "24px" }}>
+                        <RadioButtons
+                            options={options}
+                            optionsKey="name"
+                            selectedOption={selectedOption}
+                            onSelect={setSelectedOption}
+                            style={{ display: "flex", flexDirection: "column", gap: "12px", buttonStyle: { borderRadius: "5px" } }}
+                            t={t}
+                        />
+                    </div>
+                </Modal>
+            )}
+        </React.Fragment>
+    );
+};
+
+export default ConnectionDetailsView;

package/src/components/DesktopInbox.js

@@ -1,40 +1,33 @@
 import React, { useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import { Table, SubmitBar, Header, Card } from "@djb25/digit-ui-react-components";
+import { Table, SubmitBar, Header, Card, HomeIcon, PersonIcon } from "@djb25/digit-ui-react-components";
 import { Link } from "react-router-dom";
-import SearchApplication from "./Search";
 import StatusCards from "./StatusCards";
 
 const DesktopInbox = ({
-    data,
-    isLoading,
-    onSort,
-    onNextPage,
-    onPrevPage,
-    currentPage,
-    pageSizeLimit,
-    onPageSizeChange,
-    parentRoute,
-    searchParams,
-    sortParams,
-    totalRecords,
-    countData,
-    onSearch,
-    searchFields,
+    tableConfig,
+    filterComponent,
+    ...props
 }) => {
+    const {
+        data,
+        isLoading,
+        onSort,
+        onNextPage,
+        onPrevPage,
+        currentPage,
+        pageSizeLimit,
+        onPageSizeChange,
+        parentRoute,
+        searchParams,
+        sortParams,
+        totalRecords,
+        countData,
+        onSearch,
+        searchFields,
+    } = props;
     const { t } = useTranslation();
-
-    // Helper for Status Styles
-    const getStatusStyle = (status) => {
-        const styles = {
-            ALL: { bg: "#F4F4F4", text: "#505A5F" },
-            COMPLETED: { bg: "#E7F4E9", text: "#0B6623" },
-            PENDING: { bg: "#FFF5E6", text: "#945700" },
-            REJECTED: { bg: "#FBEAE9", text: "#AF1E11" },
-            DEFAULT: { bg: "#F4F4F4", text: "#505A5F" }
-        };
-        return styles[status] || styles.DEFAULT;
-    };
+    const [FilterComponent, setComp] = React.useState(() => Digit.ComponentRegistryService?.getComponent(filterComponent));
 
     const columns = useMemo(
         () => [
@@ -45,7 +38,7 @@ const DesktopInbox = ({
                     const applicationNumber = row.original?.applicationNumber || "NA";
                     return (
                         <Link to={`${parentRoute}/application-details/${applicationNumber}`}>
-                            <span className="link" style={{ color: "#F47738", fontWeight: "600" }}>
+                            <span className="ekyc-application-link">
                                 {applicationNumber}
                             </span>
                         </Link>
@@ -67,17 +60,8 @@ const DesktopInbox = ({
                 accessor: "status",
                 Cell: ({ row }) => {
                     const status = row.original?.status || "DEFAULT";
-                    const theme = getStatusStyle(status);
                     return (
-                        <span style={{
-                            padding: "6px 12px",
-                            borderRadius: "20px",
-                            fontSize: "12px",
-                            fontWeight: "600",
-                            backgroundColor: theme.bg,
-                            color: theme.text,
-                            textTransform: "uppercase"
-                        }}>
+                        <span className={`ekyc-status-tag ${status}`}>
                             {t(`EKYC_STATUS_${status}`)}
                         </span>
                     );
@@ -92,54 +76,70 @@ const DesktopInbox = ({
     }, [data]);
 
     return (
-        <div className="inbox-wrapper" style={{ padding: "24px", backgroundColor: "#f4f7f9", minWidth: "170vh" }}>
-            {/* Top Bar: Header + Action Button */}
-            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "24px" }}>
-                <Header style={{ margin: 0 }}>{t("EKYC_INBOX_HEADER")}</Header>
-                <Link to={`${parentRoute}/create-kyc`} style={{ textDecoration: "none" }}>
-                    <SubmitBar label={t("EKYC_CREATE_KYC")} />
-                </Link>
-            </div>
+        <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: "#F47738", marginRight: "12px" }}>
+                        <HomeIcon style={{ width: "24px", height: "24px" }} />
+                    </div>
+                    <div style={{ fontWeight: "700", fontSize: "18px", color: "#0B0C0C" }}>
+                        {t("ACTION_TEST_EKYC")}
+                    </div>
+                </Card>
 
-            {/* Metrics Section */}
-            <div style={{ marginBottom: "24px" }}>
-                <StatusCards countData={countData} />
+                <div>
+                    {FilterComponent && (
+                        <FilterComponent
+                            defaultSearchParams={props.defaultSearchParams}
+                            onFilterChange={props.onSearch}
+                            searchParams={searchParams}
+                            type="desktop"
+                            moduleCode="EKYC"
+                        />
+                    )}
+                </div>
             </div>
 
-            {/* Search Section */}
-            <Card style={{ marginBottom: "24px", padding: "20px" }}>
-                <SearchApplication
-                    onSearch={onSearch}
-                    searchFields={searchFields}
-                    searchParams={searchParams}
-                />
-            </Card>
+            <div style={{ flex: 1, marginLeft: "16px" }}>
+                {/* Header Section (retaining for context/actions) */}
+                {/* <div className="ekyc-header-container module-header" style={{ marginBottom: "16px", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+                    <Header className="title" style={{ margin: 0 }}>{t("EKYC_INBOX_HEADER")}</Header>
+                    <Link to={`${parentRoute}/create-kyc`}>
+                        <SubmitBar label={t("EKYC_CREATE_KYC")} style={{ borderRadius: "8px" }} />
+                    </Link>
+                </div> */}
 
-            {/* Table Section */}
-            <Card style={{ padding: "0px", overflow: "hidden" }}>
-                <Table
-                    t={t}
-                    data={tableData}
-                    columns={columns}
-                    isLoading={isLoading}
-                    onSort={onSort}
-                    sortParams={sortParams}
-                    totalRecords={totalRecords}
-                    onNextPage={onNextPage}
-                    onPrevPage={onPrevPage}
-                    currentPage={currentPage}
-                    pageSizeLimit={pageSizeLimit}
-                    onPageSizeChange={onPageSizeChange}
-                    getCellProps={(cellInfo) => {
-                        return {
-                            style: {
-                                padding: "20px 18px",
-                                fontSize: "16px",
-                            },
-                        };
-                    }}
-                />
-            </Card>
+                {/* Metrics Section (The Card) */}
+                <Card className="ekyc-metrics-card" style={{ marginBottom: "16px", padding: "16px" }}>
+                    <StatusCards countData={countData} />
+                </Card>
+
+                {/* Table Section */}
+                <div className="result" style={{ flex: 1 }}>
+                    <Card className="ekyc-table-card" style={{ padding: 0 }}>
+                        <Table
+                            t={t}
+                            data={tableData}
+                            columns={columns}
+                            isLoading={isLoading}
+                            onSort={onSort}
+                            sortParams={sortParams}
+                            totalRecords={totalRecords}
+                            onNextPage={onNextPage}
+                            onPrevPage={onPrevPage}
+                            currentPage={currentPage}
+                            pageSizeLimit={pageSizeLimit}
+                            onPageSizeChange={onPageSizeChange}
+                            getCellProps={(cellInfo) => {
+                                return {
+                                    className: "ekyc-table-cell"
+                                };
+                            }}
+                        />
+                    </Card>
+                </div>
+            </div>
         </div>
     );
 };

package/src/components/Filter.js

@@ -0,0 +1,59 @@
+import React, { useEffect, 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) => {
+        localParamChange({ status: value });
+    };
+
+    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_COMPLETED"), value: "COMPLETED" },
+                        { label: t("EKYC_STATUS_PENDING"), value: "PENDING" },
+                        { label: t("EKYC_STATUS_REJECTED"), value: "REJECTED" },
+                    ]}
+                    optionKey="label"
+                    select={onStatusChange}
+                    selected={_searchParams?.status || { label: t("EKYC_STATUS_ALL"), value: "" }}
+                />
+            </FilterFormField>
+        </FilterForm>
+    );
+};
+
+export default Filter;

package/src/components/MobileInbox.js

@@ -0,0 +1,73 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { Header, Card, SubmitBar, DetailsCard, Loader } from "@djb25/digit-ui-react-components";
+import { Link } from "react-router-dom";
+import SearchConsumer from "./SearchConsumer";
+import StatusCards from "./StatusCards";
+
+const MobileInbox = ({
+    data,
+    isLoading,
+    onSearch,
+    searchParams,
+    parentRoute,
+    countData,
+}) => {
+    const { t } = useTranslation();
+
+    const mobileData = data?.items?.map((item) => ({
+        [t("EKYC_APPLICATION_NO")]: item.applicationNumber,
+        [t("EKYC_CITIZEN_NAME")]: item.citizenName,
+        [t("EKYC_MOBILE_NO")]: item.mobileNumber,
+        [t("EKYC_STATUS")]: (
+            <span className={`ekyc-status-tag ${item.status}`}>
+                {t(`EKYC_STATUS_${item.status}`)}
+            </span>
+        ),
+    })) || [];
+
+    return (
+        <div className="inbox-wrapper">
+            <div className="ekyc-header-container module-header">
+                <Header className="title">{t("EKYC_INBOX_HEADER")}</Header>
+                <Link to={`${parentRoute}/create-kyc`}>
+                    <SubmitBar label={t("EKYC_CREATE_KYC")} />
+                </Link>
+            </div>
+
+            <div className="ekyc-metrics-section">
+                <StatusCards countData={countData} />
+            </div>
+
+            <SearchConsumer
+                onSearch={onSearch}
+                searchParams={searchParams}
+            />
+
+            <div className="mobile-data-container">
+                {isLoading ? (
+                    <Loader />
+                ) : mobileData?.length > 0 ? (
+                    <DetailsCard
+                        data={mobileData}
+                        t={t}
+                        serviceRequestIdKey={t("EKYC_APPLICATION_NO")}
+                        linkPrefix={`${parentRoute}/application-details/`}
+                    />
+                ) : (
+                    <Card>
+                        {t("ES_COMMON_NO_DATA")
+                            .split("\\n")
+                            .map((text, index) => (
+                                <p key={index} style={{ textAlign: "center" }}>
+                                    {text}
+                                </p>
+                            ))}
+                    </Card>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default MobileInbox;

package/src/components/SearchConsumer.js

@@ -0,0 +1,122 @@
+import React, { useState, Fragment } from "react";
+import { TextInput, Card, SubmitBar, Header, 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();
+    const [_searchParams, setSearchParams] = useState(() => ({ ...searchParams }));
+
+    const onChange = (key, value) => {
+        setSearchParams((prev) => ({ ...prev, [key]: value }));
+    };
+
+    const onSubmit = (e) => {
+        if (e && e.preventDefault) e.preventDefault();
+        onSearch(_searchParams);
+    };
+
+    const onClear = () => {
+        const cleared = { kNumber: "", kName: "" };
+        setSearchParams(cleared);
+        onSearch(cleared);
+    };
+
+    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: "#F47738", 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>
+            </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" }}
+                                    />
+                                </div>
+                            </div>
+
+                            <div style={{ flex: "1", minWidth: "250px" }}>
+                                <div className="filter-label" style={{ fontWeight: "600", marginBottom: "8px", fontSize: "14px", color: "#505A5F" }}>
+                                    {t("EKYC_K_NAME")}
+                                </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" }}
+                                    />
+                                </div>
+                            </div>
+
+                            <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", marginTop: "-55px" }}
+                                />
+                            </div>
+                        </div>
+                    </form>
+                </Card>
+                {children}
+            </div>
+        </div>
+    );
+};
+
+export default SearchConsumer;