@djb25/digit-ui-module-ekyc 1.0.6 → 1.0.8

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

@@ -1,26 +1,155 @@
-import React from "react";
-import { Card } from "@djb25/digit-ui-react-components";
+import React, { useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
+import { Chart, registerables } from "chart.js";
+
+Chart.register(...registerables);
 
 const StatusCards = ({ countData }) => {
-    const { t } = useTranslation();
+  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 rejected = countData?.rejected || 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);
 
-    return (
-        <div className="ekyc-status-container">
-            <div className="ekyc-status-card">
-                <div className="count">{countData?.total || 0}</div>
-                <div className="label">{t("EKYC_TOTAL")}</div>
+  useEffect(() => {
+    if (chartRef1.current) {
+      if (chartInstance1.current) chartInstance1.current.destroy();
+      const ctx1 = chartRef1.current.getContext("2d");
+      chartInstance1.current = new Chart(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="ekyc-status-card">
-                <div className="count pending">{countData?.pending || 0}</div>
-                <div className="label">{t("EKYC_PENDING")}</div>
+            <div className="status-progress-bar">
+              <div className="progress-fill" style={{ width: `${healthPct}%` }} />
             </div>
-            <div className="ekyc-status-card">
-                <div className="count completed">{countData?.completed || 0}</div>
-                <div className="label">{t("EKYC_COMPLETED")}</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;
+export default StatusCards;

package/src/pages/citizen/index.js

@@ -0,0 +1,90 @@
+import { AppContainer, PrivateRoute, ModuleHeader, ArrowLeft, HomeIcon } from "@djb25/digit-ui-react-components";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { Switch, useLocation, useRouteMatch } from "react-router-dom";
+import Create from "../employee/Create";
+import AadhaarVerification from "../employee/AadhaarVerification";
+import AddressDetails from "../employee/AddressDetails";
+import PropertyInfo from "../employee/PropertyInfo";
+import MeterDetails from "../employee/MeterDetails";
+import Review from "../employee/Review";
+
+const CitizenApp = () => {
+    const { t } = useTranslation();
+    const location = useLocation();
+    const { path } = useRouteMatch();
+
+    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 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}
+                />
+
+                <Switch>
+                    <PrivateRoute
+                        path={`${path}/create-kyc`}
+                        component={() => <Create />}
+                    />
+
+                    <PrivateRoute
+                        path={`${path}/aadhaar-verification`}
+                        component={() => <AadhaarVerification />}
+                    />
+
+                    <PrivateRoute
+                        path={`${path}/address-details`}
+                        component={() => <AddressDetails />}
+                    />
+
+                    <PrivateRoute
+                        path={`${path}/property-info`}
+                        component={() => <PropertyInfo />}
+                    />
+
+                    <PrivateRoute
+                        path={`${path}/meter-details`}
+                        component={() => <MeterDetails />}
+                    />
+                    
+                    <PrivateRoute
+                        path={`${path}/review`}
+                        component={() => <Review />}
+                    />
+
+                    <PrivateRoute
+                        path={`${path}/`}
+                        component={() => <Create />}
+                    />
+                </Switch>
+            </div>
+        </AppContainer>
+    );
+};
+
+export default CitizenApp;