@djb25/digit-ui-module-ekyc 1.0.12 → 1.0.14

package/dist/index.modern.js

@@ -1,10 +1,11 @@
-import React, { useRef, useEffect, useMemo, useState, createContext, isValidElement, cloneElement, createElement, useContext, useCallback, useReducer, Fragment } from 'react';
+import React, { useRef, useEffect, useMemo, useState, createContext, isValidElement, cloneElement, createElement, useContext, useCallback, useReducer, Fragment as Fragment$1 } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useHistory, Link, useLocation, useRouteMatch, Switch, Route, Redirect } from 'react-router-dom';
 import { PersonIcon, EmployeeModuleCard, Loader, Card, InboxLinks, Table, HomeIcon, TextInput, Header, SubmitBar, DetailsCard, FilterForm, FilterFormField, Dropdown, Label, CustomTooltip, CardLabelError, InboxComposer, Toast, Modal, RadioButtons, CardHeader, CardSubHeader, StatusTable, Row, GenericFileIcon, CheckBox, ActionBar, LinkButton, EditIcon as EditIcon$1, FormStep, CardLabel, UploadFile, VerticalTimeline, AppContainer, ModuleHeader, ArrowLeft, PrivateRoute, LayoutWrapper, ModuleLinksView, CitizenHomeCard, DocumentIcon } from '@djb25/digit-ui-react-components';
 import * as Chartjs from 'chart.js/auto';
 import Chartjs__default, { Chart } from 'chart.js/auto';
 import 'react-dom';
+import { Chart as Chart$1, registerables } from 'chart.js';
 
 const EKYCCard = () => {
   const {
@@ -3748,7 +3749,7 @@ const AadhaarVerification = ({
   if (isLoading) {
     return /*#__PURE__*/React.createElement(Loader, null);
   }
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(FormStep, {
+  return /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement(FormStep, {
     onSelect: onStepSelect,
     config: config,
     isDisabled: !isValid()
@@ -3805,21 +3806,21 @@ const AadhaarVerification = ({
     label: "Yes, the informant is the consumer",
     checked: informantIsConsumer,
     onChange: e => setInformantIsConsumer(e.target.checked)
-  })), !informantIsConsumer && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabel, null, "Informant Name"), /*#__PURE__*/React.createElement(TextInput, {
+  })), !informantIsConsumer && /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabel, null, "Informant Name"), /*#__PURE__*/React.createElement(TextInput, {
     value: informantName,
     onChange: e => setInformantName(e.target.value)
   })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabel, null, "Informant Relation"), /*#__PURE__*/React.createElement(TextInput, {
     value: informantRelation,
     onChange: e => setInformantRelation(e.target.value)
-  }))), (occupantType === null || occupantType === void 0 ? void 0 : occupantType.name) === "Tenanted" && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabel, null, "Document Proof"), /*#__PURE__*/React.createElement(UploadFile, {
+  }))), (occupantType === null || occupantType === void 0 ? void 0 : occupantType.name) === "Tenanted" && /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabel, null, "Document Proof"), /*#__PURE__*/React.createElement(UploadFile, {
     onUpload: e => uploadFile(e, setDocumentProof, setDocumentId)
-  })), !documentId && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabel, null, "Owner Mobile *"), /*#__PURE__*/React.createElement(TextInput, {
+  })), !documentId && /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabel, null, "Owner Mobile *"), /*#__PURE__*/React.createElement(TextInput, {
     value: ownerMobile,
     onChange: e => setOwnerMobile(e.target.value)
   })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabel, null, "Tenant Verification"), /*#__PURE__*/React.createElement(TextInput, {
     value: tenantVerification,
     onChange: e => setTenantVerification(e.target.value)
-  })))), (consumerType === null || consumerType === void 0 ? void 0 : consumerType.name) === "Govt" && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabel, null, "Designation"), /*#__PURE__*/React.createElement(TextInput, {
+  })))), (consumerType === null || consumerType === void 0 ? void 0 : consumerType.name) === "Govt" && /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabel, null, "Designation"), /*#__PURE__*/React.createElement(TextInput, {
     value: designation,
     onChange: e => setDesignation(e.target.value)
   })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabel, null, "Department"), /*#__PURE__*/React.createElement(TextInput, {
@@ -3828,7 +3829,7 @@ const AadhaarVerification = ({
   })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabel, null, "Employee ID"), /*#__PURE__*/React.createElement(TextInput, {
     value: employeeId,
     onChange: e => setEmployeeId(e.target.value)
-  }))), (consumerType === null || consumerType === void 0 ? void 0 : consumerType.name) === "Company_Society_Org" && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabel, null, "Entity Name"), /*#__PURE__*/React.createElement(TextInput, {
+  }))), (consumerType === null || consumerType === void 0 ? void 0 : consumerType.name) === "Company_Society_Org" && /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabel, null, "Entity Name"), /*#__PURE__*/React.createElement(TextInput, {
     value: entityName,
     onChange: e => setEntityName(e.target.value)
   })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabel, null, "Contact Person"), /*#__PURE__*/React.createElement(TextInput, {
@@ -4022,6 +4023,7 @@ const EmployeeApp = ({
   } = useTranslation();
   const location = useLocation();
   sessionStorage.removeItem("revalidateddone");
+  const CeoDashboard = Digit.ComponentRegistryService.getComponent("CeoDashboard");
   const getBreadcrumbLabel = () => {
     const pathname = location.pathname;
     if (pathname.includes("/dashboard")) return "ES_COMMON_INBOX";
@@ -4095,6 +4097,11 @@ const EmployeeApp = ({
     component: () => /*#__PURE__*/React.createElement(LayoutWrapper, {
       layoutClass: "normal"
     }, /*#__PURE__*/React.createElement(Review, null))
+  }), /*#__PURE__*/React.createElement(PrivateRoute, {
+    path: `${path}/ceo-dashboard`,
+    component: () => /*#__PURE__*/React.createElement(LayoutWrapper, {
+      layoutClass: "normal"
+    }, /*#__PURE__*/React.createElement(CeoDashboard, null))
   }))))));
 };
 
@@ -4254,7 +4261,7 @@ const PropertyInfo = ({
   if (isLoading) {
     return /*#__PURE__*/React.createElement(Loader, null);
   }
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(FormStep, {
+  return /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement(FormStep, {
     t: t,
     onSelect: onStepSelect,
     config: config,
@@ -4573,7 +4580,7 @@ const MeterDetails = ({
   if (isLoading) {
     return /*#__PURE__*/React.createElement(Loader, null);
   }
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(FormStep, {
+  return /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement(FormStep, {
     onSelect: onStepSelect,
     config: config,
     isDisabled: !isValid()
@@ -4595,7 +4602,7 @@ const MeterDetails = ({
   })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabel, null, "MR Key"), /*#__PURE__*/React.createElement(TextInput, {
     value: mrKey,
     onChange: e => setMrKey(e.target.value)
-  })), !isFrozen && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabel, null, "Meter Number"), /*#__PURE__*/React.createElement(TextInput, {
+  })), !isFrozen && /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabel, null, "Meter Number"), /*#__PURE__*/React.createElement(TextInput, {
     value: meterNumber,
     onChange: e => setMeterNumber(e.target.value)
   })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabel, null, "Meter Maker"), /*#__PURE__*/React.createElement(TextInput, {
@@ -4605,7 +4612,7 @@ const MeterDetails = ({
     option: meterConditionOptions,
     selected: meterCondition,
     select: setMeterCondition
-  })), (meterStatus === null || meterStatus === void 0 ? void 0 : meterStatus.name) === "Metered" && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabel, null, "Meter Photo *"), /*#__PURE__*/React.createElement(UploadFile, {
+  })), (meterStatus === null || meterStatus === void 0 ? void 0 : meterStatus.name) === "Metered" && /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabel, null, "Meter Photo *"), /*#__PURE__*/React.createElement(UploadFile, {
     onUpload: uploadPhoto,
     message: meterPhotoId ? "Uploaded" : "No file"
   })), meterPhoto && /*#__PURE__*/React.createElement("div", {
@@ -5072,7 +5079,7 @@ const AddressDetails = ({
     onSelect(config.key, data);
   };
   if (isLoading) return /*#__PURE__*/React.createElement(Loader, null);
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(FormStep, {
+  return /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement(FormStep, {
     t: t,
     onSelect: onStepSelect,
     config: config,
@@ -5220,6 +5227,1453 @@ const CitizenApp = () => {
   }))));
 };
 
+const DashboardLayout = ({
+  header,
+  filters,
+  children,
+  onNotificationClick,
+  activeRole,
+  onRoleChange
+}) => {
+  const {
+    t
+  } = useTranslation();
+  const roles = ["CEO", "CLUSTER_MANAGER", "AGENCY_SUPERVISOR"];
+  return /*#__PURE__*/React.createElement("div", {
+    className: "enterprise-dashboard-layout",
+    style: {
+      background: "linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%)",
+      minHeight: "100vh"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "glass-card",
+    style: {
+      padding: "24px 32px",
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      borderRadius: "0",
+      borderTop: "none",
+      borderLeft: "none",
+      borderRight: "none"
+    }
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h1", {
+    style: {
+      fontSize: "28px",
+      fontWeight: "900",
+      color: "#1E293B",
+      letterSpacing: "-0.05em"
+    }
+  }, t(header)), /*#__PURE__*/React.createElement("p", {
+    style: {
+      fontSize: "14px",
+      color: "#64748B",
+      marginTop: "4px",
+      fontWeight: "500"
+    }
+  }, t("EKYC_DASHBOARD_SUBTITLE_ALT") || "Operational analytics & performance monitoring.")), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      alignItems: "center",
+      gap: "20px"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      background: "#F3F4F6",
+      padding: "4px",
+      borderRadius: "8px",
+      gap: "4px"
+    }
+  }, roles.map(role => /*#__PURE__*/React.createElement("button", {
+    key: role,
+    onClick: () => onRoleChange(role),
+    style: {
+      padding: "6px 12px",
+      borderRadius: "6px",
+      fontSize: "12px",
+      fontWeight: "700",
+      border: "none",
+      cursor: "pointer",
+      background: activeRole === role ? "var(--primary-gradient)" : "transparent",
+      color: activeRole === role ? "#FFFFFF" : "#64748B",
+      boxShadow: activeRole === role ? "0 4px 12px rgba(99, 102, 241, 0.3)" : "none",
+      transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)"
+    }
+  }, t(role)))), /*#__PURE__*/React.createElement("button", {
+    onClick: onNotificationClick,
+    style: {
+      position: "relative",
+      background: "#F3F4F6",
+      border: "none",
+      padding: "10px",
+      borderRadius: "50%",
+      cursor: "pointer"
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: "20px"
+    }
+  }, "\uD83D\uDD14"), /*#__PURE__*/React.createElement("span", {
+    style: {
+      position: "absolute",
+      top: "0",
+      right: "0",
+      width: "10px",
+      height: "10px",
+      background: "#EF4444",
+      borderRadius: "50%",
+      border: "2px solid #FFF"
+    }
+  })))), filters, /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: "24px",
+      maxWidth: "1600px",
+      margin: "0 auto"
+    }
+  }, children), /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: "40px 24px",
+      textAlign: "center",
+      color: "#9CA3AF",
+      fontSize: "12px"
+    }
+  }, t("EKYC_POWERED_BY_UPYOG"), " | ", new Date().getFullYear(), " \xA9 ", t("EKYC_GOVT_DJB")));
+};
+
+const FilterBar = ({
+  filters,
+  config,
+  onFilterChange,
+  onReset
+}) => {
+  const {
+    t
+  } = useTranslation();
+  return /*#__PURE__*/React.createElement("div", {
+    className: "dashboard-filter-bar glass-card",
+    style: {
+      position: "sticky",
+      top: "0",
+      zIndex: "100",
+      padding: "20px 28px",
+      display: "flex",
+      alignItems: "center",
+      gap: "24px",
+      flexWrap: "wrap",
+      borderRadius: "0 0 24px 24px",
+      marginTop: "-1px"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      alignItems: "center",
+      gap: "8px",
+      borderRight: "1px solid #E5E7EB",
+      paddingRight: "16px"
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: "14px",
+      fontWeight: "700",
+      color: "#374151"
+    }
+  }, t("EKYC_GLOBAL_FILTERS"))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      gap: "12px",
+      flex: 1,
+      flexWrap: "wrap"
+    }
+  }, config.map(filter => /*#__PURE__*/React.createElement("div", {
+    key: filter.id,
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "4px"
+    }
+  }, /*#__PURE__*/React.createElement("label", {
+    style: {
+      fontSize: "11px",
+      fontWeight: "600",
+      color: "#6B7280",
+      textTransform: "uppercase"
+    }
+  }, t(filter.label)), /*#__PURE__*/React.createElement("select", {
+    value: filters[filter.id] || filter.default,
+    onChange: e => onFilterChange(filter.id, e.target.value),
+    style: {
+      padding: "6px 12px",
+      borderRadius: "6px",
+      border: "1px solid #D1D5DB",
+      background: "#F9FAFB",
+      fontSize: "13px",
+      outline: "none",
+      minWidth: "140px"
+    }
+  }, filter.options.map(opt => /*#__PURE__*/React.createElement("option", {
+    key: opt,
+    value: opt
+  }, opt)))))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      gap: "12px"
+    }
+  }, /*#__PURE__*/React.createElement("button", {
+    onClick: onReset,
+    style: {
+      padding: "8px 16px",
+      borderRadius: "8px",
+      background: "transparent",
+      color: "#6B7280",
+      border: "1px solid #D1D5DB",
+      cursor: "pointer",
+      fontSize: "14px",
+      fontWeight: "600"
+    }
+  }, t("EKYC_RESET"))));
+};
+
+const SummaryCard = ({
+  label,
+  value,
+  color,
+  icon,
+  trend,
+  isCurrency,
+  suffix: _suffix = "",
+  onClick
+}) => {
+  const {
+    t
+  } = useTranslation();
+  const formatValue = val => {
+    if (isCurrency) {
+      return `₹${new Intl.NumberFormat('en-IN').format(val)}`;
+    }
+    return new Intl.NumberFormat('en-IN').format(val);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "summary-card glass-card",
+    onClick: onClick,
+    style: {
+      padding: "28px 24px",
+      cursor: onClick ? "pointer" : "default",
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "space-between",
+      height: "100%",
+      minHeight: "160px",
+      position: "relative",
+      overflow: "hidden"
+    },
+    onMouseOver: e => {
+      if (onClick) {
+        e.currentTarget.style.transform = "translateY(-8px) scale(1.02)";
+      }
+    },
+    onMouseOut: e => {
+      if (onClick) {
+        e.currentTarget.style.transform = "translateY(0) scale(1)";
+      }
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "flex-start"
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: "13px",
+      fontWeight: "700",
+      color: "#6B7280",
+      letterSpacing: "0.05em",
+      textTransform: "uppercase"
+    }
+  }, t(label)), /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: "10px",
+      borderRadius: "12px",
+      background: `linear-gradient(135deg, ${color}20 0%, ${color}40 100%)`,
+      color: color,
+      boxShadow: `0 4px 12px ${color}20`
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: "20px"
+    }
+  }, icon === "document" ? "📄" : icon === "check" ? "✅" : icon === "clock" ? "⏳" : icon === "rupee" ? "₹" : "📊"))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginTop: "12px"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: "28px",
+      fontWeight: "800",
+      color: "#111827"
+    }
+  }, formatValue(value), _suffix), trend && /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      alignItems: "center",
+      marginTop: "8px",
+      fontSize: "12px",
+      fontWeight: "600"
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: trend > 0 ? "#10B981" : "#EF4444"
+    }
+  }, trend > 0 ? "↗" : "↘", " ", Math.abs(trend), "%"), /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: "#9CA3AF",
+      marginLeft: "4px"
+    }
+  }, t("EKYC_FROM_PREV_MONTH")))));
+};
+
+Chart$1.register(...registerables);
+const TaskStatusChart = ({
+  data,
+  title
+}) => {
+  const {
+    t
+  } = useTranslation();
+  const chartRef = useRef(null);
+  const chartInstance = useRef(null);
+  useEffect(() => {
+    if (chartRef.current && data) {
+      if (chartInstance.current) chartInstance.current.destroy();
+      const ctx = chartRef.current.getContext("2d");
+      const gradientBlue = ctx.createLinearGradient(0, 0, 0, 400);
+      gradientBlue.addColorStop(0, '#3B82F6');
+      gradientBlue.addColorStop(1, '#2563EB');
+      const gradientAmber = ctx.createLinearGradient(0, 0, 0, 400);
+      gradientAmber.addColorStop(0, '#F59E0B');
+      gradientAmber.addColorStop(1, '#D97706');
+      const gradientIndigo = ctx.createLinearGradient(0, 0, 0, 400);
+      gradientIndigo.addColorStop(0, '#6366F1');
+      gradientIndigo.addColorStop(1, '#4F46E5');
+      const gradientEmerald = ctx.createLinearGradient(0, 0, 0, 400);
+      gradientEmerald.addColorStop(0, '#10B981');
+      gradientEmerald.addColorStop(1, '#059669');
+      const colors = [gradientBlue, gradientAmber, gradientIndigo, gradientEmerald, '#EC4899', '#EF4444'];
+      const labels = data.map(item => t(item.stageName));
+      const values = data.map(item => item.count);
+      const ChartConstructor = Chart$1.Chart || Chart$1;
+      chartInstance.current = new ChartConstructor(ctx, {
+        type: "doughnut",
+        data: {
+          labels,
+          datasets: [{
+            data: values,
+            backgroundColor: colors.slice(0, labels.length),
+            borderWidth: 2,
+            borderColor: "#ffffff",
+            hoverOffset: 10
+          }]
+        },
+        options: {
+          responsive: true,
+          maintainAspectRatio: false,
+          cutout: '70%',
+          plugins: {
+            legend: {
+              position: 'right',
+              labels: {
+                usePointStyle: true,
+                padding: 15,
+                font: {
+                  size: 12
+                }
+              }
+            },
+            tooltip: {
+              backgroundColor: '#1F2937',
+              padding: 10,
+              bodyFont: {
+                size: 13
+              }
+            }
+          }
+        }
+      });
+    }
+    return () => {
+      if (chartInstance.current) chartInstance.current.destroy();
+    };
+  }, [data, t]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "task-status-chart-container glass-card",
+    style: {
+      height: "320px",
+      width: "100%",
+      padding: "24px"
+    }
+  }, title && /*#__PURE__*/React.createElement("h3", {
+    className: "chart-title",
+    style: {
+      marginBottom: "24px",
+      fontSize: "18px",
+      fontWeight: "700",
+      color: "#111827"
+    }
+  }, t(title)), /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: "220px"
+    }
+  }, /*#__PURE__*/React.createElement("canvas", {
+    ref: chartRef
+  })));
+};
+
+const ClusterHeatmap = ({
+  data,
+  title,
+  onDrillDown
+}) => {
+  const {
+    t
+  } = useTranslation();
+  if (!data || data.length === 0) return null;
+  const getIntensityColor = score => {
+    if (score > 80) return "#EF4444";
+    if (score > 50) return "#F59E0B";
+    return "#10B981";
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "cluster-heatmap-container glass-card",
+    style: {
+      padding: "28px"
+    }
+  }, title && /*#__PURE__*/React.createElement("h3", {
+    className: "chart-title",
+    style: {
+      marginBottom: "28px",
+      fontSize: "18px",
+      fontWeight: "800",
+      color: "#111827",
+      letterSpacing: "-0.025em"
+    }
+  }, t(title)), /*#__PURE__*/React.createElement("div", {
+    className: "heatmap-grid",
+    style: {
+      display: "grid",
+      gridTemplateColumns: "repeat(auto-fill, minmax(240px, 1fr))",
+      gap: "20px"
+    }
+  }, data.map(cluster => /*#__PURE__*/React.createElement("div", {
+    key: cluster.clusterId,
+    className: "heatmap-card glass-card",
+    onClick: () => onDrillDown === null || onDrillDown === void 0 ? void 0 : onDrillDown(cluster),
+    style: {
+      padding: "20px",
+      background: "#FFFFFF",
+      border: `1px solid ${getIntensityColor(cluster.intensityScore)}40`,
+      cursor: "pointer",
+      position: "relative",
+      overflow: "hidden"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "intensity-bar",
+    style: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      height: "4px",
+      width: "100%",
+      background: getIntensityColor(cluster.intensityScore)
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "flex-start",
+      marginBottom: "12px"
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontWeight: "600",
+      fontSize: "14px",
+      color: "#374151"
+    }
+  }, cluster.clusterName), /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: "12px",
+      fontWeight: "700",
+      padding: "2px 8px",
+      borderRadius: "12px",
+      background: `${getIntensityColor(cluster.intensityScore)}20`,
+      color: getIntensityColor(cluster.intensityScore)
+    }
+  }, cluster.intensityScore, "%")), /*#__PURE__*/React.createElement("div", {
+    className: "cluster-stats",
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "8px"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      justifyContent: "space-between",
+      fontSize: "12px"
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: "#6B7280"
+    }
+  }, t("EKYC_PENDING_WORKLOAD")), /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontWeight: "600",
+      color: "#1F2937"
+    }
+  }, cluster.pendingWorkload)), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      justifyContent: "space-between",
+      fontSize: "12px"
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: "#6B7280"
+    }
+  }, t("EKYC_ACTIVE_AGENCIES")), /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontWeight: "600",
+      color: "#1F2937"
+    }
+  }, cluster.activeAgencies))), /*#__PURE__*/React.createElement("div", {
+    className: "mini-spark",
+    style: {
+      marginTop: "12px",
+      display: "flex",
+      gap: "2px",
+      alignItems: "flex-end",
+      height: "20px"
+    }
+  }, cluster.wards.map((ward, idx) => /*#__PURE__*/React.createElement("div", {
+    key: idx,
+    style: {
+      flex: 1,
+      height: `${Math.min(100, ward.pendingCount / cluster.pendingWorkload * 100)}%`,
+      background: getIntensityColor(cluster.intensityScore),
+      opacity: 0.6,
+      borderRadius: "1px"
+    }
+  })))))));
+};
+
+const ExportUtils = {
+  exportToCsv: (data, filename = "dashboard_export.csv", columns = []) => {
+    if (!data || !data.length) return;
+    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 = [];
+    csvRows.push(headers.map(h => `"${String(h).replace(/"/g, '""')}"`).join(","));
+    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;"
+    });
+    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);
+    }
+  },
+  exportToExcel: (data, filename = "dashboard_report.xlsx", columns = []) => {
+    ExportUtils.exportToCsv(data, filename.replace(".xlsx", ".csv"), columns);
+  },
+  printDashboard: () => {
+    if (typeof window !== "undefined") {
+      window.print();
+    }
+  }
+};
+
+const AnalyticsTable = ({
+  data,
+  columns,
+  title,
+  filename
+}) => {
+  const {
+    t
+  } = useTranslation();
+  const [searchTerm, setSearchTerm] = useState("");
+  const [sortConfig, setSortConfig] = useState({
+    key: null,
+    direction: 'asc'
+  });
+  const sortedData = useMemo(() => {
+    let items = [...(data || [])];
+    if (searchTerm) {
+      items = items.filter(item => Object.values(item).some(val => String(val).toLowerCase().includes(searchTerm.toLowerCase())));
+    }
+    if (sortConfig.key) {
+      items.sort((a, b) => {
+        if (a[sortConfig.key] < b[sortConfig.key]) {
+          return sortConfig.direction === 'asc' ? -1 : 1;
+        }
+        if (a[sortConfig.key] > b[sortConfig.key]) {
+          return sortConfig.direction === 'asc' ? 1 : -1;
+        }
+        return 0;
+      });
+    }
+    return items;
+  }, [data, searchTerm, sortConfig]);
+  const requestSort = key => {
+    let direction = 'asc';
+    if (sortConfig.key === key && sortConfig.direction === 'asc') {
+      direction = 'desc';
+    }
+    setSortConfig({
+      key,
+      direction
+    });
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "analytics-table-card glass-card",
+    style: {
+      padding: "0",
+      overflow: "hidden"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "table-header",
+    style: {
+      padding: "28px",
+      borderBottom: "1px solid rgba(229, 231, 235, 0.5)",
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      flexWrap: "wrap",
+      gap: "16px"
+    }
+  }, /*#__PURE__*/React.createElement("h3", {
+    style: {
+      fontSize: "18px",
+      fontWeight: "800",
+      color: "#111827",
+      letterSpacing: "-0.025em"
+    }
+  }, t(title)), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      gap: "12px",
+      alignItems: "center"
+    }
+  }, /*#__PURE__*/React.createElement("input", {
+    type: "text",
+    placeholder: t("EKYC_SEARCH_RECORDS"),
+    value: searchTerm,
+    onChange: e => setSearchTerm(e.target.value),
+    style: {
+      padding: "8px 16px",
+      borderRadius: "8px",
+      border: "1px solid #D1D5DB",
+      outline: "none",
+      fontSize: "14px"
+    }
+  }), /*#__PURE__*/React.createElement("button", {
+    onClick: () => ExportUtils.exportToCsv(sortedData, filename, columns),
+    style: {
+      padding: "10px 20px",
+      borderRadius: "12px",
+      background: "var(--primary-gradient)",
+      color: "#FFF",
+      border: "none",
+      cursor: "pointer",
+      fontWeight: "700",
+      fontSize: "14px",
+      boxShadow: "0 4px 6px rgba(99, 102, 241, 0.2)"
+    }
+  }, t("EKYC_EXPORT_CSV")))), /*#__PURE__*/React.createElement("div", {
+    className: "table-body",
+    style: {
+      overflowX: "auto"
+    }
+  }, /*#__PURE__*/React.createElement("table", {
+    style: {
+      width: "100%",
+      borderCollapse: "collapse",
+      textAlign: "left"
+    }
+  }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", {
+    style: {
+      background: "#F9FAFB"
+    }
+  }, columns.map(col => /*#__PURE__*/React.createElement("th", {
+    key: col.id,
+    onClick: () => requestSort(col.id),
+    style: {
+      padding: "16px 28px",
+      fontSize: "11px",
+      fontWeight: "700",
+      color: "#6B7280",
+      textTransform: "uppercase",
+      cursor: "pointer",
+      borderBottom: "1px solid rgba(229, 231, 235, 0.5)",
+      letterSpacing: "0.05em"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      alignItems: "center",
+      gap: "4px"
+    }
+  }, t(col.label), sortConfig.key === col.id && /*#__PURE__*/React.createElement("span", null, sortConfig.direction === 'asc' ? '↑' : '↓')))))), /*#__PURE__*/React.createElement("tbody", null, sortedData.map((row, idx) => /*#__PURE__*/React.createElement("tr", {
+    key: idx,
+    style: {
+      borderBottom: "1px solid #F3F4F6",
+      transition: "background 0.2s"
+    },
+    onMouseOver: e => e.currentTarget.style.background = "#F9FAFB",
+    onMouseOut: e => e.currentTarget.style.background = "transparent"
+  }, columns.map(col => /*#__PURE__*/React.createElement("td", {
+    key: col.id,
+    style: {
+      padding: "16px 28px",
+      fontSize: "14px",
+      color: "#4B5563",
+      fontWeight: col.id === "agencyName" ? "600" : "400"
+    }
+  }, col.isCurrency ? `₹${new Intl.NumberFormat('en-IN').format(row[col.id])}` : col.isPercentage ? `${row[col.id]}%` : row[col.id]))))))));
+};
+
+const SLAWidget = ({
+  slaPercentage,
+  avgTime,
+  breachedCount
+}) => {
+  const {
+    t
+  } = useTranslation();
+  const getStatusColor = pct => {
+    if (pct > 90) return "#10B981";
+    if (pct > 75) return "#F59E0B";
+    return "#EF4444";
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "sla-widget-card glass-card",
+    style: {
+      padding: "28px"
+    }
+  }, /*#__PURE__*/React.createElement("h3", {
+    style: {
+      fontSize: "18px",
+      fontWeight: "800",
+      color: "#111827",
+      marginBottom: "28px",
+      letterSpacing: "-0.025em"
+    }
+  }, t("EKYC_SLA_PERFORMANCE")), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      alignItems: "center",
+      gap: "24px",
+      marginBottom: "24px"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "relative",
+      width: "100px",
+      height: "100px",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    }
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: "100",
+    height: "100",
+    viewBox: "0 0 100 100"
+  }, /*#__PURE__*/React.createElement("circle", {
+    cx: "50",
+    cy: "50",
+    r: "40",
+    stroke: "#F3F4F6",
+    strokeWidth: "8",
+    fill: "none"
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: "50",
+    cy: "50",
+    r: "40",
+    stroke: getStatusColor(slaPercentage),
+    strokeWidth: "8",
+    fill: "none",
+    strokeDasharray: `${slaPercentage * 2.51} 251`,
+    transform: "rotate(-90 50 50)",
+    strokeLinecap: "round"
+  }), /*#__PURE__*/React.createElement("text", {
+    x: "50",
+    y: "55",
+    textAnchor: "middle",
+    fontSize: "18",
+    fontWeight: "700",
+    fill: "#111827"
+  }, slaPercentage, "%"))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: "14px",
+      color: "#6B7280"
+    }
+  }, t("EKYC_SLA_COMPLIANCE")), /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: "20px",
+      fontWeight: "700",
+      color: "#111827"
+    }
+  }, t("EKYC_OPTIMAL_PERFORMANCE")))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "grid",
+      gridTemplateColumns: "1fr 1fr",
+      gap: "16px",
+      borderTop: "1px solid #F3F4F6",
+      paddingTop: "20px"
+    }
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: "12px",
+      color: "#6B7280",
+      marginBottom: "4px"
+    }
+  }, t("EKYC_AVG_LATENCY")), /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: "18px",
+      fontWeight: "700",
+      color: "#111827"
+    }
+  }, avgTime, "h")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: "12px",
+      color: "#6B7280",
+      marginBottom: "4px"
+    }
+  }, t("EKYC_BREACH_COUNT")), /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: "18px",
+      fontWeight: "700",
+      color: "#EF4444"
+    }
+  }, breachedCount))));
+};
+
+const WorkflowTimeline = ({
+  stages
+}) => {
+  const {
+    t
+  } = useTranslation();
+  if (!stages || stages.length === 0) return null;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "workflow-timeline-card glass-card",
+    style: {
+      padding: "28px"
+    }
+  }, /*#__PURE__*/React.createElement("h3", {
+    style: {
+      fontSize: "18px",
+      fontWeight: "800",
+      color: "#111827",
+      marginBottom: "28px",
+      letterSpacing: "-0.025em"
+    }
+  }, t("EKYC_WORKFLOW_BOTTLENECK_ANALYSIS")), /*#__PURE__*/React.createElement("div", {
+    className: "timeline-container",
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "16px"
+    }
+  }, stages.map((stage, idx) => /*#__PURE__*/React.createElement("div", {
+    key: idx,
+    style: {
+      display: "flex",
+      gap: "16px",
+      alignItems: "flex-start"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: "12px",
+      height: "12px",
+      borderRadius: "50%",
+      background: stage.avgDurationHours > 20 ? "#EF4444" : "#10B981",
+      marginTop: "4px"
+    }
+  }), idx !== stages.length - 1 && /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: "2px",
+      height: "40px",
+      background: "#E5E7EB"
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      justifyContent: "space-between",
+      marginBottom: "4px"
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: "14px",
+      fontWeight: "600",
+      color: "#374151"
+    }
+  }, t(stage.stageName)), /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: "12px",
+      fontWeight: "700",
+      color: stage.avgDurationHours > 20 ? "#EF4444" : "#10B981"
+    }
+  }, stage.avgDurationHours, "h ", t("EKYC_AVG"))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: "100%",
+      height: "6px",
+      background: "#F3F4F6",
+      borderRadius: "3px",
+      overflow: "hidden"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: `${Math.min(100, stage.count / 1000 * 100)}%`,
+      height: "100%",
+      background: stage.avgDurationHours > 20 ? "#EF444480" : "#10B98180"
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: "12px",
+      color: "#6B7280",
+      marginTop: "4px"
+    }
+  }, stage.count, " ", t("EKYC_APPLICATIONS_IN_STAGE")))))));
+};
+
+const NotificationPanel = ({
+  notifications,
+  isOpen,
+  onClose
+}) => {
+  const {
+    t
+  } = useTranslation();
+  if (!isOpen) return null;
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+    onClick: onClose,
+    style: {
+      position: "fixed",
+      top: 0,
+      left: 0,
+      width: "100%",
+      height: "100%",
+      background: "rgba(0,0,0,0.3)",
+      zIndex: 999
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "notification-panel",
+    style: {
+      position: "fixed",
+      top: 0,
+      right: 0,
+      width: "350px",
+      height: "100%",
+      background: "#FFFFFF",
+      zIndex: 1000,
+      boxShadow: "-4px 0 15px rgba(0,0,0,0.1)",
+      display: "flex",
+      flexDirection: "column"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: "20px",
+      borderBottom: "1px solid #F3F4F6",
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center"
+    }
+  }, /*#__PURE__*/React.createElement("h3", {
+    style: {
+      fontSize: "18px",
+      fontWeight: "700",
+      color: "#111827"
+    }
+  }, t("EKYC_ALERTS_CENTER")), /*#__PURE__*/React.createElement("button", {
+    onClick: onClose,
+    style: {
+      background: "none",
+      border: "none",
+      fontSize: "24px",
+      cursor: "pointer",
+      color: "#9CA3AF"
+    }
+  }, "\xD7")), /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1,
+      overflowY: "auto",
+      padding: "16px"
+    }
+  }, notifications.length === 0 ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      textAlign: "center",
+      color: "#9CA3AF",
+      marginTop: "40px"
+    }
+  }, t("EKYC_NO_NEW_ALERTS")) : notifications.map((alert, idx) => /*#__PURE__*/React.createElement("div", {
+    key: idx,
+    style: {
+      padding: "16px",
+      borderRadius: "12px",
+      background: alert.priority === "HIGH" ? "#FEF2F2" : "#F9FAFB",
+      border: `1px solid ${alert.priority === "HIGH" ? "#FECACA" : "#E5E7EB"}`,
+      marginBottom: "12px"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      justifyContent: "space-between",
+      marginBottom: "4px"
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: "10px",
+      fontWeight: "800",
+      padding: "2px 6px",
+      borderRadius: "4px",
+      background: alert.priority === "HIGH" ? "#EF4444" : "#3B82F6",
+      color: "#FFFFFF"
+    }
+  }, alert.priority), /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: "11px",
+      color: "#9CA3AF"
+    }
+  }, alert.time)), /*#__PURE__*/React.createElement("h4", {
+    style: {
+      fontSize: "14px",
+      fontWeight: "600",
+      color: "#374151",
+      marginBottom: "4px"
+    }
+  }, t(alert.title)), /*#__PURE__*/React.createElement("p", {
+    style: {
+      fontSize: "13px",
+      color: "#6B7280"
+    }
+  }, t(alert.message))))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: "16px",
+      borderTop: "1px solid #F3F4F6"
+    }
+  }, /*#__PURE__*/React.createElement("button", {
+    style: {
+      width: "100%",
+      padding: "12px",
+      borderRadius: "8px",
+      background: "#F3F4F6",
+      color: "#374151",
+      border: "none",
+      fontWeight: "600",
+      cursor: "pointer"
+    }
+  }, t("EKYC_MARK_ALL_READ")))));
+};
+
+const SkeletonLoader = ({
+  type: _type = "card",
+  count: _count = 1
+}) => {
+  const renderSkeleton = () => {
+    switch (_type) {
+      case "card":
+        return /*#__PURE__*/React.createElement("div", {
+          className: "skeleton-card",
+          style: {
+            padding: "24px",
+            background: "#F3F4F6",
+            borderRadius: "12px",
+            height: "140px",
+            animation: "pulse 1.5s infinite"
+          }
+        }, /*#__PURE__*/React.createElement("div", {
+          style: {
+            height: "16px",
+            width: "40%",
+            background: "#E5E7EB",
+            marginBottom: "16px",
+            borderRadius: "4px"
+          }
+        }), /*#__PURE__*/React.createElement("div", {
+          style: {
+            height: "32px",
+            width: "70%",
+            background: "#E5E7EB",
+            marginBottom: "12px",
+            borderRadius: "4px"
+          }
+        }), /*#__PURE__*/React.createElement("div", {
+          style: {
+            height: "12px",
+            width: "30%",
+            background: "#E5E7EB",
+            borderRadius: "4px"
+          }
+        }));
+      case "chart":
+        return /*#__PURE__*/React.createElement("div", {
+          className: "skeleton-chart",
+          style: {
+            padding: "24px",
+            background: "#F3F4F6",
+            borderRadius: "12px",
+            height: "300px",
+            animation: "pulse 1.5s infinite"
+          }
+        }, /*#__PURE__*/React.createElement("div", {
+          style: {
+            height: "20px",
+            width: "30%",
+            background: "#E5E7EB",
+            marginBottom: "24px",
+            borderRadius: "4px"
+          }
+        }), /*#__PURE__*/React.createElement("div", {
+          style: {
+            height: "200px",
+            width: "100%",
+            background: "#E5E7EB",
+            borderRadius: "8px"
+          }
+        }));
+      case "table":
+        return /*#__PURE__*/React.createElement("div", {
+          className: "skeleton-table",
+          style: {
+            padding: "16px",
+            background: "#F3F4F6",
+            borderRadius: "12px",
+            animation: "pulse 1.5s infinite"
+          }
+        }, [1, 2, 3, 4, 5].map(i => /*#__PURE__*/React.createElement("div", {
+          key: i,
+          style: {
+            height: "40px",
+            width: "100%",
+            background: "#E5E7EB",
+            marginBottom: "8px",
+            borderRadius: "4px"
+          }
+        })));
+      default:
+        return null;
+    }
+  };
+  return /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement("style", null, `
+        @keyframes pulse {
+          0% { opacity: 1; }
+          50% { opacity: 0.5; }
+          100% { opacity: 1; }
+        }
+      `), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "grid",
+      gap: "16px",
+      gridTemplateColumns: _type === "card" ? "repeat(auto-fill, minmax(240px, 1fr))" : "1fr"
+    }
+  }, Array(_count).fill(0).map((_, i) => /*#__PURE__*/React.createElement(React.Fragment, {
+    key: i
+  }, renderSkeleton()))));
+};
+
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      hasError: false
+    };
+  }
+  static getDerivedStateFromError(error) {
+    return {
+      hasError: true
+    };
+  }
+  render() {
+    if (this.state.hasError) {
+      return /*#__PURE__*/React.createElement("div", {
+        style: {
+          padding: "20px",
+          background: "#FEF2F2",
+          border: "1px solid #FECACA",
+          borderRadius: "8px",
+          textAlign: "center"
+        }
+      }, /*#__PURE__*/React.createElement("h4", {
+        style: {
+          color: "#991B1B",
+          marginBottom: "8px"
+        }
+      }, "Widget Error"), /*#__PURE__*/React.createElement("p", {
+        style: {
+          color: "#B91C1C",
+          fontSize: "12px"
+        }
+      }, "Failed to render this component."));
+    }
+    return this.props.children;
+  }
+}
+
+const EmptyState = ({
+  message: _message = "EKYC_NO_DATA_FOUND"
+}) => {
+  const {
+    t
+  } = useTranslation();
+  return /*#__PURE__*/React.createElement("div", {
+    className: "empty-state-container",
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center",
+      padding: "60px 20px",
+      background: "#F9FAFB",
+      borderRadius: "12px",
+      border: "1px dashed #D1D5DB"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: "48px",
+      marginBottom: "16px"
+    }
+  }, "\uD83D\uDD0D"), /*#__PURE__*/React.createElement("h3", {
+    style: {
+      fontSize: "18px",
+      fontWeight: "600",
+      color: "#374151",
+      marginBottom: "8px"
+    }
+  }, t("EKYC_EMPTY_STATE_TITLE") || "No Results Found"), /*#__PURE__*/React.createElement("p", {
+    style: {
+      color: "#6B7280",
+      textAlign: "center",
+      maxWidth: "300px"
+    }
+  }, t(_message) || "Try adjusting your filters or check back later for updated metrics."));
+};
+
+const CeoDashboard = () => {
+  var _config$widgets, _config$widgets$summa;
+  const {
+    t
+  } = useTranslation();
+  const {
+    routeToInbox
+  } = Digit.Hooks.ekyc.useInboxRouting();
+  const [activeRole, setActiveRole] = useState("CEO");
+  const [isNotificationOpen, setIsNotificationOpen] = useState(false);
+  const [filters, setFilters] = useState({
+    financialYear: "2025-26",
+    clusterId: "ALL",
+    agencyId: "ALL"
+  });
+  const {
+    config,
+    tenantId
+  } = Digit.Hooks.ekyc.useEkycDashboardConfigs(activeRole);
+  const {
+    summary: kpiData,
+    agencies: agencyData,
+    heatmap: clusterData,
+    workflow: workflowData,
+    isLoading,
+    isError
+  } = Digit.Hooks.ekyc.useEkycDashboardData(activeRole, filters);
+  const handleFilterChange = (id, value) => {
+    setFilters(prev => ({
+      ...prev,
+      [id]: value
+    }));
+  };
+  const handleReset = () => {
+    setFilters({
+      financialYear: "2025-26",
+      clusterId: "ALL",
+      agencyId: "ALL"
+    });
+  };
+  const handleKpiClick = kpi => {
+    routeToInbox(kpi.targetRoute, {
+      ...filters,
+      status: kpi.status
+    });
+  };
+  const notifications = [{
+    title: "EKYC_SLA_BREACH_ALERT",
+    message: "EKYC_ALERT_DESC_1",
+    priority: "HIGH",
+    time: "10m ago"
+  }, {
+    title: "EKYC_SYSTEM_UPDATE",
+    message: "EKYC_ALERT_DESC_3",
+    priority: "NORMAL",
+    time: "5h ago"
+  }];
+  if (isError) return /*#__PURE__*/React.createElement(EmptyState, {
+    message: "EKYC_ERROR_FETCHING_DATA"
+  });
+  return /*#__PURE__*/React.createElement(DashboardLayout, {
+    header: config.title,
+    activeRole: activeRole,
+    onRoleChange: role => {
+      setActiveRole(role);
+      handleReset();
+    },
+    onNotificationClick: () => setIsNotificationOpen(true),
+    filters: /*#__PURE__*/React.createElement(FilterBar, {
+      filters: filters,
+      config: config.globalFilters,
+      onFilterChange: handleFilterChange,
+      onReset: handleReset
+    })
+  }, /*#__PURE__*/React.createElement(NotificationPanel, {
+    isOpen: isNotificationOpen,
+    onClose: () => setIsNotificationOpen(false),
+    notifications: notifications
+  }), /*#__PURE__*/React.createElement("section", {
+    style: {
+      marginBottom: "32px"
+    }
+  }, isLoading ? /*#__PURE__*/React.createElement(SkeletonLoader, {
+    type: "card",
+    count: 4
+  }) : /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "grid",
+      gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))",
+      gap: "24px"
+    }
+  }, config === null || config === void 0 ? void 0 : (_config$widgets = config.widgets) === null || _config$widgets === void 0 ? void 0 : (_config$widgets$summa = _config$widgets.summary) === null || _config$widgets$summa === void 0 ? void 0 : _config$widgets$summa.map((kpiKey, idx) => {
+    var _config$kpis;
+    const kpiMeta = config === null || config === void 0 ? void 0 : (_config$kpis = config.kpis) === null || _config$kpis === void 0 ? void 0 : _config$kpis[kpiKey];
+    if (!kpiMeta) return null;
+    const value = (kpiData === null || kpiData === void 0 ? void 0 : kpiData[kpiKey]) || 0;
+    return /*#__PURE__*/React.createElement(ErrorBoundary, {
+      key: kpiKey
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "animate-fade-in",
+      style: {
+        animationDelay: `${idx * 0.1}s`
+      }
+    }, /*#__PURE__*/React.createElement(SummaryCard, {
+      label: kpiMeta.label,
+      value: value,
+      color: kpiMeta.color,
+      icon: kpiMeta.icon,
+      trend: kpiData === null || kpiData === void 0 ? void 0 : kpiData[`${kpiKey}Trend`],
+      onClick: () => handleKpiClick(kpiMeta)
+    })));
+  }))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "grid",
+      gridTemplateColumns: "repeat(12, 1fr)",
+      gap: "24px"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      gridColumn: "span 12",
+      background: "#FFF",
+      padding: "24px",
+      borderRadius: "16px",
+      boxShadow: "0 1px 3px rgba(0,0,0,0.1)"
+    }
+  }, isLoading ? /*#__PURE__*/React.createElement(SkeletonLoader, {
+    type: "chart"
+  }) : /*#__PURE__*/React.createElement(ErrorBoundary, null, /*#__PURE__*/React.createElement(TaskStatusChart, {
+    title: "EKYC_APPLICATION_STATUS",
+    data: (workflowData === null || workflowData === void 0 ? void 0 : workflowData.stageBreakdown) || []
+  }))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      gridColumn: "span 4"
+    }
+  }, isLoading ? /*#__PURE__*/React.createElement(SkeletonLoader, {
+    type: "chart"
+  }) : /*#__PURE__*/React.createElement(ErrorBoundary, null, /*#__PURE__*/React.createElement(SLAWidget, {
+    slaPercentage: (workflowData === null || workflowData === void 0 ? void 0 : workflowData.slaCompliance) || 0,
+    avgTime: (workflowData === null || workflowData === void 0 ? void 0 : workflowData.avgProcessingTimeHours) || 0,
+    breachedCount: (workflowData === null || workflowData === void 0 ? void 0 : workflowData.breachCount) || 0
+  }))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      gridColumn: "span 8"
+    }
+  }, isLoading ? /*#__PURE__*/React.createElement(SkeletonLoader, {
+    type: "chart"
+  }) : /*#__PURE__*/React.createElement(ErrorBoundary, null, /*#__PURE__*/React.createElement(WorkflowTimeline, {
+    stages: (workflowData === null || workflowData === void 0 ? void 0 : workflowData.stageBreakdown) || []
+  }))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      gridColumn: "span 12",
+      background: "#FFF",
+      padding: "24px",
+      borderRadius: "16px",
+      boxShadow: "0 1px 3px rgba(0,0,0,0.1)"
+    }
+  }, isLoading ? /*#__PURE__*/React.createElement(SkeletonLoader, {
+    type: "chart"
+  }) : /*#__PURE__*/React.createElement(ErrorBoundary, null, /*#__PURE__*/React.createElement(ClusterHeatmap, {
+    title: "EKYC_CLUSTER_WORKLOAD_HEATMAP",
+    data: clusterData || [],
+    onDrillDown: cluster => handleFilterChange("clusterId", cluster.clusterId)
+  }))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      gridColumn: "span 12"
+    }
+  }, isLoading ? /*#__PURE__*/React.createElement(SkeletonLoader, {
+    type: "table"
+  }) : /*#__PURE__*/React.createElement(ErrorBoundary, null, /*#__PURE__*/React.createElement(AnalyticsTable, {
+    title: "EKYC_AGENCY_PERFORMANCE_METRICS",
+    filename: "agency_performance_report.csv",
+    data: agencyData || [],
+    columns: [{
+      id: "agencyName",
+      label: "EKYC_AGENCY_NAME"
+    }, {
+      id: "totalAssigned",
+      label: "EKYC_TOTAL_ASSIGNED"
+    }, {
+      id: "totalCompleted",
+      label: "EKYC_TOTAL_COMPLETED"
+    }, {
+      id: "pendingCount",
+      label: "EKYC_PENDING"
+    }, {
+      id: "slaCompliance",
+      label: "EKYC_SLA_COMPLIANCE",
+      isPercentage: true
+    }]
+  })))));
+};
+
 const EkycModule = ({
   stateCode,
   userType,
@@ -5292,7 +6746,8 @@ const componentsToRegister = {
   AadhaarVerification,
   AddressDetails,
   PropertyInfo,
-  MeterDetails
+  MeterDetails,
+  CeoDashboard
 };
 const initEkycComponents = () => {
   Object.entries(componentsToRegister).forEach(([key, value]) => {