@djb25/digit-ui-module-ekyc 1.0.11 → 1.0.13

package/src/components/analytics/components/WorkflowTimeline.js

@@ -0,0 +1,55 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+/**
+ * Timeline component for workflow stage monitoring.
+ */
+const WorkflowTimeline = ({ stages }) => {
+  const { t } = useTranslation();
+
+  if (!stages || stages.length === 0) return null;
+
+  return (
+    <div className="workflow-timeline-card glass-card" style={{ padding: "28px" }}>
+      <h3 style={{ fontSize: "18px", fontWeight: "800", color: "#111827", marginBottom: "28px", letterSpacing: "-0.025em" }}>{t("EKYC_WORKFLOW_BOTTLENECK_ANALYSIS")}</h3>
+      
+      <div className="timeline-container" style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+        {stages.map((stage, idx) => (
+          <div key={idx} style={{ display: "flex", gap: "16px", alignItems: "flex-start" }}>
+            <div style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
+              <div style={{ 
+                width: "12px", 
+                height: "12px", 
+                borderRadius: "50%", 
+                background: stage.avgDurationHours > 20 ? "#EF4444" : "#10B981",
+                marginTop: "4px"
+              }} />
+              {idx !== stages.length - 1 && <div style={{ width: "2px", height: "40px", background: "#E5E7EB" }} />}
+            </div>
+            
+            <div style={{ flex: 1 }}>
+              <div style={{ display: "flex", justifyContent: "space-between", marginBottom: "4px" }}>
+                <span style={{ fontSize: "14px", fontWeight: "600", color: "#374151" }}>{t(stage.stageName)}</span>
+                <span style={{ fontSize: "12px", fontWeight: "700", color: stage.avgDurationHours > 20 ? "#EF4444" : "#10B981" }}>
+                  {stage.avgDurationHours}h {t("EKYC_AVG")}
+                </span>
+              </div>
+              <div style={{ width: "100%", height: "6px", background: "#F3F4F6", borderRadius: "3px", overflow: "hidden" }}>
+                <div style={{ 
+                  width: `${Math.min(100, (stage.count / 1000) * 100)}%`, 
+                  height: "100%", 
+                  background: stage.avgDurationHours > 20 ? "#EF444480" : "#10B98180" 
+                }} />
+              </div>
+              <div style={{ fontSize: "12px", color: "#6B7280", marginTop: "4px" }}>
+                {stage.count} {t("EKYC_APPLICATIONS_IN_STAGE")}
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default WorkflowTimeline;

package/src/components/analytics/styles/Dashboard.css

@@ -0,0 +1,54 @@
+/* Premium Dashboard Design System */
+
+:root {
+  --glass-bg: rgba(255, 255, 255, 0.7);
+  --glass-border: rgba(255, 255, 255, 0.3);
+  --glass-blur: blur(12px);
+
+  --primary-gradient: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
+  --success-gradient: linear-gradient(135deg, #10b981 0%, #34d399 100%);
+  --warning-gradient: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
+  --danger-gradient: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
+
+  --card-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.02);
+  --card-hover-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+}
+
+.glass-card {
+  background: var(--glass-bg);
+  backdrop-filter: var(--glass-blur);
+  -webkit-backdrop-filter: var(--glass-blur);
+  border: 1px solid var(--glass-border);
+  border-radius: 20px;
+  box-shadow: var(--card-shadow);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.glass-card:hover {
+  transform: translateY(-5px);
+  box-shadow: var(--card-hover-shadow);
+  border-color: rgba(255, 255, 255, 0.5);
+}
+
+.gradient-text {
+  background: var(--primary-gradient);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  font-weight: 800;
+}
+
+@keyframes fadeInScale {
+  from {
+    opacity: 0;
+    transform: scale(0.95) translateY(10px);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+.animate-fade-in {
+  animation: fadeInScale 0.6s ease-out forwards;
+}

package/src/components/analytics/utils/exportUtils.js

@@ -0,0 +1,64 @@
+/**
+ * @file exportUtils.js
+ * @description Provides utilities to export dashboard table analytics to CSV/Excel formats and invoke native printing layouts.
+ */
+
+export const ExportUtils = {
+  /**
+   * Generates and triggers download of a client-side CSV file from array records
+   */
+  exportToCsv: (data, filename = "dashboard_export.csv", columns = []) => {
+    if (!data || !data.length) return;
+
+    // Determine column keys if not provided explicitly
+    const keys = columns.length ? columns.map(c => c.id) : Object.keys(data[0]);
+    const headers = columns.length ? columns.map(c => c.label) : keys;
+
+    const csvRows = [];
+    // Header row
+    csvRows.push(headers.map(h => `"${String(h).replace(/"/g, '""')}"`).join(","));
+
+    // Data rows
+    data.forEach(row => {
+      const values = keys.map(k => {
+        const val = row[k] !== undefined && row[k] !== null ? row[k] : "";
+        return `"${String(val).replace(/"/g, '""')}"`;
+      });
+      csvRows.push(values.join(","));
+    });
+
+    const csvString = csvRows.join("\n");
+    const blob = new Blob([csvString], { type: "text/csv;charset=utf-8;" });
+    
+    // Trigger download anchor
+    const link = document.createElement("a");
+    if (link.download !== undefined) {
+      const url = URL.createObjectURL(blob);
+      link.setAttribute("href", url);
+      link.setAttribute("download", filename);
+      link.style.visibility = "hidden";
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    }
+  },
+
+  /**
+   * Triggers an Excel formatted download simulation
+   */
+  exportToExcel: (data, filename = "dashboard_report.xlsx", columns = []) => {
+    // Uses standard CSV export format mapped to an excel extension compatible layer
+    ExportUtils.exportToCsv(data, filename.replace(".xlsx", ".csv"), columns);
+  },
+
+  /**
+   * Optimizes current interface display rules and opens native browser print dialogue
+   */
+  printDashboard: () => {
+    if (typeof window !== "undefined") {
+      window.print();
+    }
+  }
+};
+
+export default ExportUtils;

package/src/components/analytics/utils/filterSerializer.js

@@ -0,0 +1,50 @@
+/**
+ * @file filterSerializer.js
+ * @description Translates dashboard state criteria into encoded URL search parameters and deserializes query params back to state objects.
+ */
+
+export const FilterSerializer = {
+  /**
+   * Serializes a plain filter state object into a URL query parameter string
+   */
+  serialize: (filters) => {
+    if (!filters || typeof filters !== "object") return "";
+    const params = new URLSearchParams();
+    
+    Object.entries(filters).forEach(([key, value]) => {
+      if (value !== undefined && value !== null && value !== "" && value !== "ALL") {
+        params.append(key, String(value));
+      }
+    });
+
+    const queryString = params.toString();
+    return queryString ? `?${queryString}` : "";
+  },
+
+  /**
+   * Deserializes current window search string parameters back into a flat state object
+   */
+  deserialize: (searchString, defaultFilters = {}) => {
+    if (!searchString) return { ...defaultFilters };
+    const params = new URLSearchParams(searchString);
+    const filters = { ...defaultFilters };
+
+    params.forEach((value, key) => {
+      filters[key] = value;
+    });
+
+    return filters;
+  },
+
+  /**
+   * Updates browser history state smoothly without triggering full reload navigations
+   */
+  persistToUrl: (filters) => {
+    if (typeof window === "undefined") return;
+    const serialized = FilterSerializer.serialize(filters);
+    const newUrl = `${window.location.pathname}${serialized}`;
+    window.history.replaceState({ path: newUrl }, "", newUrl);
+  }
+};
+
+export default FilterSerializer;

package/src/config/config.js

@@ -1,4 +1,4 @@
-import AadhaarVerification from "../pages/employee/AadhaarVerification";
+import AadhaarVerification from "../components/AadhaarVerification";
 
 export const ekycConfig = [
   {

package/src/pages/citizen/index.js

@@ -1,16 +1,15 @@
-import { AppContainer, PrivateRoute, ModuleHeader, ArrowLeft, HomeIcon } from "@djb25/digit-ui-react-components";
 import React from "react";
+import { PrivateRoute, ModuleHeader, ArrowLeft, HomeIcon, LayoutWrapper } from "@djb25/digit-ui-react-components";
 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";
+import AadhaarVerification from "../../components/AadhaarVerification";
+import PropertyInfo from "../../components/PropertyInfo";
+import MeterDetails from "../../components/MeterDetails";
+import Review from "../../components/Review";
 import Home from "./Home";
 import Dashboard from "../../components/Dashboard";
 import Inbox from "./Inbox";
+import AddressDetails from "../../components/AddressDetails";
 
 const CitizenApp = () => {
   const { t } = useTranslation();
@@ -33,8 +32,8 @@ const CitizenApp = () => {
   const breadcrumbs = [{ icon: HomeIcon, path: "/digit-ui/citizen" }, { label: t(getBreadcrumbLabel()) }];
 
   return (
-    <AppContainer>
-      <div className="ground-container employee-app-container form-container">
+    <React.Fragment>
+      <div className="ground-container form-container">
         <ModuleHeader
           leftContent={
             <React.Fragment>
@@ -47,22 +46,79 @@ const CitizenApp = () => {
         />
 
         <Switch>
-          <PrivateRoute exact path={`${path}`} component={() => <Home />} />
-          <PrivateRoute path={`${path}/dashboard`} component={() => <Dashboard />} />
-          <PrivateRoute path={`${path}/inbox`} component={() => <Inbox />} />
+          <PrivateRoute
+            exact
+            path={`${path}`}
+            component={() => (
+              <LayoutWrapper layoutClass="normal">
+                <Home />
+              </LayoutWrapper>
+            )}
+          />
+          <PrivateRoute
+            path={`${path}/dashboard`}
+            component={() => (
+              <LayoutWrapper layoutClass="normal">
+                <Dashboard />
+              </LayoutWrapper>
+            )}
+          />
+          <PrivateRoute
+            path={`${path}/inbox`}
+            component={() => (
+              <LayoutWrapper layoutClass="normal">
+                <Inbox />
+              </LayoutWrapper>
+            )}
+          />
 
-          <PrivateRoute path={`${path}/aadhaar-verification`} component={() => <AadhaarVerification />} />
+          <PrivateRoute
+            path={`${path}/aadhaar-verification`}
+            component={() => (
+              <LayoutWrapper layoutClass="normal">
+                <AadhaarVerification />
+              </LayoutWrapper>
+            )}
+          />
 
-          <PrivateRoute path={`${path}/address-details`} component={() => <AddressDetails />} />
+          <PrivateRoute
+            path={`${path}/address-details`}
+            component={() => (
+              <LayoutWrapper layoutClass="normal">
+                <AddressDetails />
+              </LayoutWrapper>
+            )}
+          />
 
-          <PrivateRoute path={`${path}/property-info`} component={() => <PropertyInfo />} />
+          <PrivateRoute
+            path={`${path}/property-info`}
+            component={() => (
+              <LayoutWrapper layoutClass="normal">
+                <PropertyInfo />
+              </LayoutWrapper>
+            )}
+          />
 
-          <PrivateRoute path={`${path}/meter-details`} component={() => <MeterDetails />} />
+          <PrivateRoute
+            path={`${path}/meter-details`}
+            component={() => (
+              <LayoutWrapper layoutClass="normal">
+                <MeterDetails />
+              </LayoutWrapper>
+            )}
+          />
 
-          <PrivateRoute path={`${path}/review`} component={() => <Review />} />
+          <PrivateRoute
+            path={`${path}/review`}
+            component={() => (
+              <LayoutWrapper layoutClass="normal">
+                <Review />
+              </LayoutWrapper>
+            )}
+          />
         </Switch>
       </div>
-    </AppContainer>
+    </React.Fragment>
   );
 };