@djb25/digit-ui-module-ekyc 1.0.30 → 1.0.32

package/src/components/SearchConsumer.js

@@ -1,142 +0,0 @@
-import React, { useState } from "react";
-import { TextInput, Card, HomeIcon } from "@djb25/digit-ui-react-components";
-import { useTranslation } from "react-i18next";
-
-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="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>
-
-        {/* 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>
-
-              {/* 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>
-
-                {/* 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>
-              </form>
-            </div>
-
-            {/* 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>
-          </div>
-
-          {/* Children (ConnectionDetailsView or placeholder) */}
-          {children}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default SearchConsumer;

package/src/components/SearchFormFieldsComponent.js

@@ -1,67 +0,0 @@
-import React from "react";
-import { Controller } from "react-hook-form";
-import { CardLabelError, TextInput, CustomTooltip, Label } from "@djb25/digit-ui-react-components";
-import { useTranslation } from "react-i18next";
-
-const SearchFormFieldsComponents = ({ searchFormState, controlSearchForm, searchType }) => {
-  const { t } = useTranslation();
-  const { errors } = searchFormState;
-
-  if (searchType === "mobile") {
-    return (
-      <React.Fragment>
-        {/* MOBILE NUMBER */}
-        <span className="mobile-input">
-          <Label className="flex-roww flex-gap-2">
-            {t("ES_COMMON_MOBILE_NUM") || "Mobile Number"}
-            <CustomTooltip message={t("EKYC_MOBILE_NUMBER_MESSAGE")} />
-          </Label>
-
-          <Controller
-            name="mobileNumber"
-            control={controlSearchForm}
-            defaultValue=""
-            rules={{
-              pattern: {
-                value: /^[6-9]\d{9}$/,
-                message: t("ERR_INVALID_MOBILE_NUMBER"),
-              },
-            }}
-            render={({ onChange, value }) => <TextInput value={value || ""} onChange={(e) => onChange(e.target.value)} />}
-          />
-
-          {errors?.mobileNumber && <CardLabelError>{errors.mobileNumber.message}</CardLabelError>}
-        </span>
-      </React.Fragment>
-    );
-  }
-
-  return (
-    <React.Fragment>
-      {/* K NUMBER (KNO) */}
-      <span className="mobile-input">
-        <Label className="flex-roww flex-gap-2">
-          {t("EKYC_K.NUMBER") || "K Number"}
-          <CustomTooltip message={t("EKYC_K.NUMBER_MESSAGE")} />
-        </Label>
-
-        <Controller
-          name="kNumber"
-          control={controlSearchForm}
-          defaultValue=""
-          rules={{
-            pattern: {
-              value: /^[0-9]{10}$/,
-              message: t("ERR_INVALID_KNO"),
-            },
-          }}
-          render={({ onChange, value }) => <TextInput value={value || ""} onChange={(e) => onChange(e.target.value)} />}
-        />
-
-        {errors?.kNumber && <CardLabelError>{errors.kNumber.message}</CardLabelError>}
-      </span>
-    </React.Fragment>
-  );
-};
-
-export default SearchFormFieldsComponents;

package/src/components/SelectEkycZones.js

@@ -1,71 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { CardLabel, LabelFieldPair, MultiSelectDropdown, Loader } from "@djb25/digit-ui-react-components";
-
-const SelectEkycZones = ({ config, onSelect, t, formData, isMultiSelect = true, placeHolder }) => {
-  const tenantId = Digit.ULBService.getCurrentTenantId();
-
-  const [zones, setZones] = useState([]);
-
-  const [selectedZones, setSelectedZones] = useState(Array.isArray(formData?.zoneIds) ? formData.zoneIds : []);
-
-  const { data: boundaryData, isLoading } = Digit.Hooks.useCommonMDMS(tenantId, "egov-location", ["TenantBoundary"]);
-
-  useEffect(() => {
-    const tenantBoundary = boundaryData?.["egov-location"]?.TenantBoundary?.[0] || boundaryData?.MdmsRes?.["egov-location"]?.TenantBoundary?.[0];
-
-    const boundaries = tenantBoundary?.boundary || tenantBoundary?.children || [];
-
-    if (Array.isArray(boundaries?.children) && boundaries?.children.length > 0) {
-      const allZones = boundaries.children.flatMap((assembly) =>
-        (assembly?.children || []).map((zone) => ({
-          code: zone.code,
-          name: zone.name,
-        }))
-      );
-
-      const zonesList = [...new Map(allZones.map((zone) => [zone.code, zone])).values()];
-
-      setZones(zonesList);
-    }
-  }, [boundaryData]);
-
-  const handleSelect = (value) => {
-    if (isMultiSelect) {
-      const extractedValue = Array.isArray(value) ? value.map((v) => (Array.isArray(v) ? v[1] : v)).filter(Boolean) : [];
-
-      setSelectedZones(extractedValue);
-      onSelect(config.key, extractedValue);
-    } else {
-      const selectedZone = Array.isArray(value) ? (Array.isArray(value[0]) ? value[0][1] : value[0]) : value;
-
-      setSelectedZones(selectedZone ? [selectedZone] : []);
-
-      onSelect(config.key, selectedZone?.code || "");
-    }
-  };
-
-  if (isLoading) return <Loader />;
-
-  return (
-    <LabelFieldPair>
-      <CardLabel>{t(config.label) + (config.isMandatory ? " *" : "")}</CardLabel>
-
-      <div className="field" style={{ position: "relative", zIndex: 10 }}>
-        <MultiSelectDropdown
-          options={zones}
-          selected={selectedZones}
-          onSelect={handleSelect}
-          optionsKey="name"
-          t={t}
-          multiple={isMultiSelect}
-          ServerStyle={{ backgroundColor: "#fff" }}
-          isMultiSelect={isMultiSelect}
-          placeHolder={placeHolder}
-          showSelectedLabels={true}
-        />
-      </div>
-    </LabelFieldPair>
-  );
-};
-
-export default SelectEkycZones;

package/src/components/StatusCards.js

@@ -1,148 +0,0 @@
-import React, { useEffect, useRef } from "react";
-import { useTranslation } from "react-i18next";
-import * as Chartjs from "chart.js/auto";
-
-const getChartConstructor = () => {
-  const C = Chartjs.Chart || Chartjs.default || Chartjs;
-  return C;
-};
-
-const StatusCards = ({ countData }) => {
-  const { t } = useTranslation();
-  const chartRef1 = useRef(null);
-  const chartInstance1 = useRef(null);
-
-  const total = countData?.total || 0;
-  const pending = countData?.pending || 0;
-  const active = countData?.completed || 0;
-  const completed = 0;
-
-  const actualCompleted = countData?.completed || 0;
-  const approved = actualCompleted;
-
-  const efficiency = total > 0 ? Math.round((actualCompleted / total) * 100) : 0;
-  const healthPct = total > 0 ? Math.round((approved / total) * 100) : 0;
-
-  const formatNumber = (num) => new Intl.NumberFormat("en-IN").format(num || 0);
-
-  useEffect(() => {
-    if (chartRef1.current) {
-      if (chartInstance1.current) chartInstance1.current.destroy();
-      const ctx1 = chartRef1.current.getContext("2d");
-      const ChartConstructor = getChartConstructor();
-      chartInstance1.current = new ChartConstructor(ctx1, {
-        type: "doughnut",
-        data: {
-          labels: [t("EKYC_ACTIVE"), t("EKYC_PENDING"), t("EKYC_COMPLETED")],
-          datasets: [
-            {
-              data: [active, pending, completed],
-              backgroundColor: ["#0c2a52", "#77B6EA", "#c8ddf5"],
-              borderColor: ["#ffffff", "#ffffff", "#ffffff"],
-              borderWidth: 2,
-              hoverOffset: 4,
-            },
-          ],
-        },
-        options: {
-          cutout: "75%",
-          plugins: { legend: { display: false } },
-          maintainAspectRatio: false,
-          responsive: true,
-        },
-      });
-    }
-
-    return () => {
-      if (chartInstance1.current) chartInstance1.current.destroy();
-    };
-  }, [pending, completed, active, t]);
-
-  const legendItems = [
-    { color: "#0c2a52", label: t("EKYC_ACTIVE"), value: active },
-    { color: "#77B6EA", label: t("EKYC_PENDING"), value: pending },
-    { color: "#c8ddf5", label: t("EKYC_COMPLETED"), value: completed },
-  ];
-
-  return (
-    <div className="ekyc-employee-container">
-      <div className="status-cards-wrapper">
-        {/* Header */}
-        <div className="status-cards-header">
-          <div>
-            <div className="eyebrow">
-              <span className="eyebrow-dot" />
-              {t("EKYC_INSTITUTIONAL_OVERVIEW") || "Institutional Performance Overview"}
-            </div>
-            <h1 className="status-cards-h1">{t("EKYC_DASHBOARD_TITLE") || "eKYC Verification Dashboard"}</h1>
-            <p className="status-cards-subtitle">
-              {t("EKYC_DASHBOARD_SUBTITLE") || "Real-time monitoring of consumer verification workflows across all administrative zones."}
-            </p>
-          </div>
-          <div className="total-applications-card">
-            <div className="total-label">{t("EKYC_TOTAL_APPLICATIONS") || "Total Applications Processed"}</div>
-            <div className="total-number">{formatNumber(total)}</div>
-            <div className="total-badge">↗ +12.4% {t("EKYC_FROM_LAST_QUARTER") || "from last quarter"}</div>
-          </div>
-        </div>
-
-        {/* Panels */}
-        <div className="status-panels-grid">
-          {/* Panel 1: Status Breakdown */}
-          <div className="status-panel">
-            <div className="panel-title">{t("EKYC_STATUS_BREAKDOWN") || "Status Breakdown"}</div>
-            <div className="panel-subtitle">{t("EKYC_VERIFICATION_LIFECYCLE") || "Verification lifecycle distribution"}</div>
-            <div className="breakdown-body">
-              <div className="status-legend">
-                {legendItems.map((item) => (
-                  <div key={item.label} className="legend-row">
-                    <span className="legend-label">
-                      <span className="indicator-dot" style={{ background: item.color }} />
-                      {item.label}
-                    </span>
-                    <span className="legend-value">{formatNumber(item.value)}</span>
-                  </div>
-                ))}
-              </div>
-              <div className="chart-wrapper">
-                <canvas ref={chartRef1} style={{ width: "100%", height: "100%" }} />
-                <div className="chart-center">
-                  <div className="chart-percentage">{efficiency}%</div>
-                  <div className="chart-label">{t("EKYC_COMPLETE") || "Complete"}</div>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          {/* Panel 2: Submission Health */}
-          <div className="status-panel">
-            <div className="panel-title">
-              {t("EKYC_SUBMISSION_HEALTH") || "Submission Health"}
-              <span className="optimal-badge">{t("EKYC_OPTIMAL") || "Optimal"}</span>
-            </div>
-            <div className="panel-subtitle">{t("EKYC_PLATFORM_EFFICIENCY") || "Platform operational efficiency"}</div>
-            <div className="health-metrics-row">
-              <div className="health-percentage">{healthPct}%</div>
-              <div className="health-trend">↗ +2.1%</div>
-            </div>
-            <div className="status-progress-bar">
-              <div className="progress-fill" style={{ width: `${healthPct}%` }} />
-            </div>
-            <div className="mini-metrics-grid">
-              <div className="metric-box">
-                <div className="metric-label">{t("EKYC_AVG_LATENCY") || "Avg Latency"}</div>
-                <div className="metric-value">1.2s</div>
-              </div>
-              <div className="metric-box">
-                <div className="metric-label">{t("EKYC_ERROR_RATE") || "Error Rate"}</div>
-                <div className="metric-value">0.04%</div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default StatusCards;