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

package/src/components/analytics/charts/ClusterHeatmap.js

@@ -0,0 +1,88 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+/**
+ * Custom SVG-based Heatmap component for Cluster Workload monitoring.
+ */
+const ClusterHeatmap = ({ data, title, onDrillDown }) => {
+  const { t } = useTranslation();
+
+  if (!data || data.length === 0) return null;
+
+  const getIntensityColor = (score) => {
+    if (score > 80) return "#EF4444"; // High - Red
+    if (score > 50) return "#F59E0B"; // Medium - Amber
+    return "#10B981"; // Low - Emerald
+  };
+
+  return (
+    <div className="cluster-heatmap-container glass-card" style={{ padding: "28px" }}>
+      {title && <h3 className="chart-title" style={{ marginBottom: "28px", fontSize: "18px", fontWeight: "800", color: "#111827", letterSpacing: "-0.025em" }}>{t(title)}</h3>}
+      <div className="heatmap-grid" style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(240px, 1fr))", gap: "20px" }}>
+        {data.map((cluster) => (
+          <div 
+            key={cluster.clusterId} 
+            className="heatmap-card glass-card" 
+            onClick={() => onDrillDown?.(cluster)}
+            style={{
+              padding: "20px",
+              background: "#FFFFFF",
+              border: `1px solid ${getIntensityColor(cluster.intensityScore)}40`,
+              cursor: "pointer",
+              position: "relative",
+              overflow: "hidden"
+            }}
+          >
+            <div className="intensity-bar" style={{ 
+              position: "absolute", 
+              top: 0, 
+              left: 0, 
+              height: "4px", 
+              width: "100%", 
+              background: getIntensityColor(cluster.intensityScore) 
+            }} />
+            
+            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: "12px" }}>
+              <span style={{ fontWeight: "600", fontSize: "14px", color: "#374151" }}>{cluster.clusterName}</span>
+              <span style={{ 
+                fontSize: "12px", 
+                fontWeight: "700", 
+                padding: "2px 8px", 
+                borderRadius: "12px", 
+                background: `${getIntensityColor(cluster.intensityScore)}20`, 
+                color: getIntensityColor(cluster.intensityScore) 
+              }}>
+                {cluster.intensityScore}%
+              </span>
+            </div>
+
+            <div className="cluster-stats" style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
+              <div style={{ display: "flex", justifyContent: "space-between", fontSize: "12px" }}>
+                <span style={{ color: "#6B7280" }}>{t("EKYC_PENDING_WORKLOAD")}</span>
+                <span style={{ fontWeight: "600", color: "#1F2937" }}>{cluster.pendingWorkload}</span>
+              </div>
+              <div style={{ display: "flex", justifyContent: "space-between", fontSize: "12px" }}>
+                <span style={{ color: "#6B7280" }}>{t("EKYC_ACTIVE_AGENCIES")}</span>
+                <span style={{ fontWeight: "600", color: "#1F2937" }}>{cluster.activeAgencies}</span>
+              </div>
+            </div>
+
+            <div className="mini-spark" style={{ marginTop: "12px", display: "flex", gap: "2px", alignItems: "flex-end", height: "20px" }}>
+              {cluster.wards.map((ward, idx) => (
+                <div key={idx} style={{ 
+                  flex: 1, 
+                  height: `${Math.min(100, (ward.pendingCount / cluster.pendingWorkload) * 100)}%`, 
+                  background: getIntensityColor(cluster.intensityScore),
+                  opacity: 0.6,
+                  borderRadius: "1px"
+                }} />
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default ClusterHeatmap;

package/src/components/analytics/charts/TaskStatusChart.js

@@ -0,0 +1,92 @@
+import React, { useEffect, useRef } from "react";
+import { useTranslation } from "react-i18next";
+import { Chart, registerables } from "chart.js";
+
+Chart.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");
+      
+      // Create vibrant gradients
+      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.Chart || Chart;
+      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 (
+    <div className="task-status-chart-container glass-card" style={{ height: "320px", width: "100%", padding: "24px" }}>
+      {title && <h3 className="chart-title" style={{ marginBottom: "24px", fontSize: "18px", fontWeight: "700", color: "#111827" }}>{t(title)}</h3>}
+      <div style={{ height: "220px" }}>
+        <canvas ref={chartRef} />
+      </div>
+    </div>
+  );
+};
+
+export default TaskStatusChart;

package/src/components/analytics/components/AnalyticsTable.js

@@ -0,0 +1,106 @@
+import React, { useState, useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import ExportUtils from "../utils/exportUtils";
+
+/**
+ * Enterprise data grid for detailed analytics.
+ */
+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 || [])];
+    
+    // Filter
+    if (searchTerm) {
+      items = items.filter(item => 
+        Object.values(item).some(val => 
+          String(val).toLowerCase().includes(searchTerm.toLowerCase())
+        )
+      );
+    }
+
+    // Sort
+    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 (
+    <div className="analytics-table-card glass-card" style={{ padding: "0", overflow: "hidden" }}>
+      <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" }}>
+        <h3 style={{ fontSize: "18px", fontWeight: "800", color: "#111827", letterSpacing: "-0.025em" }}>{t(title)}</h3>
+        <div style={{ display: "flex", gap: "12px", alignItems: "center" }}>
+          <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" }}
+          />
+          <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")}
+          </button>
+        </div>
+      </div>
+
+      <div className="table-body" style={{ overflowX: "auto" }}>
+        <table style={{ width: "100%", borderCollapse: "collapse", textAlign: "left" }}>
+          <thead>
+            <tr style={{ background: "#F9FAFB" }}>
+              {columns.map(col => (
+                <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" }}
+                >
+                  <div style={{ display: "flex", alignItems: "center", gap: "4px" }}>
+                    {t(col.label)}
+                    {sortConfig.key === col.id && (<span>{sortConfig.direction === 'asc' ? '↑' : '↓'}</span>)}
+                  </div>
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {sortedData.map((row, idx) => (
+              <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 => (
+                  <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]}
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
+
+export default AnalyticsTable;

package/src/components/analytics/components/DashboardLayout.js

@@ -0,0 +1,72 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+/**
+ * Main structural shell for the Enterprise Dashboard.
+ */
+const DashboardLayout = ({ header, filters, children, onNotificationClick, activeRole, onRoleChange }) => {
+  const { t } = useTranslation();
+
+  const roles = ["CEO", "CLUSTER_MANAGER", "AGENCY_SUPERVISOR"];
+
+  return (
+    <div className="enterprise-dashboard-layout" style={{ background: "linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%)", minHeight: "100vh" }}>
+      {/* Top Navigation / Header */}
+      <div className="glass-card" style={{ padding: "24px 32px", display: "flex", justifyContent: "space-between", alignItems: "center", borderRadius: "0", borderTop: "none", borderLeft: "none", borderRight: "none" }}>
+        <div>
+          <h1 style={{ fontSize: "28px", fontWeight: "900", color: "#1E293B", letterSpacing: "-0.05em" }}>{t(header)}</h1>
+          <p style={{ fontSize: "14px", color: "#64748B", marginTop: "4px", fontWeight: "500" }}>{t("EKYC_DASHBOARD_SUBTITLE_ALT") || "Operational analytics & performance monitoring."}</p>
+        </div>
+        
+        <div style={{ display: "flex", alignItems: "center", gap: "20px" }}>
+          {/* Role Switcher for Simulation */}
+          <div style={{ display: "flex", background: "#F3F4F6", padding: "4px", borderRadius: "8px", gap: "4px" }}>
+            {roles.map(role => (
+              <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)}
+              </button>
+            ))}
+          </div>
+
+          <button 
+            onClick={onNotificationClick}
+            style={{ position: "relative", background: "#F3F4F6", border: "none", padding: "10px", borderRadius: "50%", cursor: "pointer" }}
+          >
+            <span style={{ fontSize: "20px" }}>🔔</span>
+            <span style={{ position: "absolute", top: "0", right: "0", width: "10px", height: "10px", background: "#EF4444", borderRadius: "50%", border: "2px solid #FFF" }} />
+          </button>
+        </div>
+      </div>
+
+      {/* Filter Bar Position */}
+      {filters}
+
+      {/* Main Content Area */}
+      <div style={{ padding: "24px", maxWidth: "1600px", margin: "0 auto" }}>
+        {children}
+      </div>
+
+      {/* Footer Branding */}
+      <div style={{ padding: "40px 24px", textAlign: "center", color: "#9CA3AF", fontSize: "12px" }}>
+        {t("EKYC_POWERED_BY_UPYOG")} | {new Date().getFullYear()} © {t("EKYC_GOVT_DJB")}
+      </div>
+    </div>
+  );
+};
+
+export default DashboardLayout;

package/src/components/analytics/components/EmptyState.js

@@ -0,0 +1,27 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+const EmptyState = ({ message = "EKYC_NO_DATA_FOUND" }) => {
+  const { t } = useTranslation();
+  
+  return (
+    <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"
+    }}>
+      <div style={{ fontSize: "48px", marginBottom: "16px" }}>🔍</div>
+      <h3 style={{ fontSize: "18px", fontWeight: "600", color: "#374151", marginBottom: "8px" }}>{t("EKYC_EMPTY_STATE_TITLE") || "No Results Found"}</h3>
+      <p style={{ color: "#6B7280", textAlign: "center", maxWidth: "300px" }}>
+        {t(message) || "Try adjusting your filters or check back later for updated metrics."}
+      </p>
+    </div>
+  );
+};
+
+export default EmptyState;

package/src/components/analytics/components/ErrorBoundary.js

@@ -0,0 +1,27 @@
+import React from "react";
+
+
+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 (
+        <div style={{ padding: "20px", background: "#FEF2F2", border: "1px solid #FECACA", borderRadius: "8px", textAlign: "center" }}>
+          <h4 style={{ color: "#991B1B", marginBottom: "8px" }}>Widget Error</h4>
+          <p style={{ color: "#B91C1C", fontSize: "12px" }}>Failed to render this component.</p>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;

package/src/components/analytics/components/FilterBar.js

@@ -0,0 +1,73 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+/**
+ * Sticky global filter bar for dashboard parameters.
+ */
+const FilterBar = ({ filters, config, onFilterChange, onReset }) => {
+  const { t } = useTranslation();
+
+  return (
+    <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"
+    }}>
+      <div style={{ display: "flex", alignItems: "center", gap: "8px", borderRight: "1px solid #E5E7EB", paddingRight: "16px" }}>
+         <span style={{ fontSize: "14px", fontWeight: "700", color: "#374151" }}>{t("EKYC_GLOBAL_FILTERS")}</span>
+      </div>
+
+      <div style={{ display: "flex", gap: "12px", flex: 1, flexWrap: "wrap" }}>
+        {config.map((filter) => (
+          <div key={filter.id} style={{ display: "flex", flexDirection: "column", gap: "4px" }}>
+            <label style={{ fontSize: "11px", fontWeight: "600", color: "#6B7280", textTransform: "uppercase" }}>{t(filter.label)}</label>
+            <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 => (
+                <option key={opt} value={opt}>{opt}</option>
+              ))}
+            </select>
+          </div>
+        ))}
+      </div>
+
+      <div style={{ display: "flex", gap: "12px" }}>
+        <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")}
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default FilterBar;

package/src/components/analytics/components/NotificationPanel.js

@@ -0,0 +1,77 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+/**
+ * Drawer-style notification panel for SLA alerts and escalations.
+ */
+const NotificationPanel = ({ notifications, isOpen, onClose }) => {
+  const { t } = useTranslation();
+
+  if (!isOpen) return null;
+
+  return (
+    <>
+      <div 
+        onClick={onClose}
+        style={{ position: "fixed", top: 0, left: 0, width: "100%", height: "100%", background: "rgba(0,0,0,0.3)", zIndex: 999 }} 
+      />
+      <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"
+      }}>
+        <div style={{ padding: "20px", borderBottom: "1px solid #F3F4F6", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+          <h3 style={{ fontSize: "18px", fontWeight: "700", color: "#111827" }}>{t("EKYC_ALERTS_CENTER")}</h3>
+          <button onClick={onClose} style={{ background: "none", border: "none", fontSize: "24px", cursor: "pointer", color: "#9CA3AF" }}>×</button>
+        </div>
+
+        <div style={{ flex: 1, overflowY: "auto", padding: "16px" }}>
+          {notifications.length === 0 ? (
+            <div style={{ textAlign: "center", color: "#9CA3AF", marginTop: "40px" }}>{t("EKYC_NO_NEW_ALERTS")}</div>
+          ) : (
+            notifications.map((alert, idx) => (
+              <div key={idx} style={{ 
+                padding: "16px", 
+                borderRadius: "12px", 
+                background: alert.priority === "HIGH" ? "#FEF2F2" : "#F9FAFB", 
+                border: `1px solid ${alert.priority === "HIGH" ? "#FECACA" : "#E5E7EB"}`,
+                marginBottom: "12px"
+              }}>
+                <div style={{ display: "flex", justifyContent: "space-between", marginBottom: "4px" }}>
+                  <span style={{ 
+                    fontSize: "10px", 
+                    fontWeight: "800", 
+                    padding: "2px 6px", 
+                    borderRadius: "4px", 
+                    background: alert.priority === "HIGH" ? "#EF4444" : "#3B82F6",
+                    color: "#FFFFFF"
+                  }}>
+                    {alert.priority}
+                  </span>
+                  <span style={{ fontSize: "11px", color: "#9CA3AF" }}>{alert.time}</span>
+                </div>
+                <h4 style={{ fontSize: "14px", fontWeight: "600", color: "#374151", marginBottom: "4px" }}>{t(alert.title)}</h4>
+                <p style={{ fontSize: "13px", color: "#6B7280" }}>{t(alert.message)}</p>
+              </div>
+            ))
+          )}
+        </div>
+        
+        <div style={{ padding: "16px", borderTop: "1px solid #F3F4F6" }}>
+           <button style={{ width: "100%", padding: "12px", borderRadius: "8px", background: "#F3F4F6", color: "#374151", border: "none", fontWeight: "600", cursor: "pointer" }}>
+             {t("EKYC_MARK_ALL_READ")}
+           </button>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default NotificationPanel;

package/src/components/analytics/components/SLAWidget.js

@@ -0,0 +1,56 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+/**
+ * Visual widget for SLA and processing performance tracking.
+ */
+const SLAWidget = ({ slaPercentage, avgTime, breachedCount }) => {
+  const { t } = useTranslation();
+
+  const getStatusColor = (pct) => {
+    if (pct > 90) return "#10B981";
+    if (pct > 75) return "#F59E0B";
+    return "#EF4444";
+  };
+
+  return (
+    <div className="sla-widget-card glass-card" style={{ padding: "28px" }}>
+      <h3 style={{ fontSize: "18px", fontWeight: "800", color: "#111827", marginBottom: "28px", letterSpacing: "-0.025em" }}>{t("EKYC_SLA_PERFORMANCE")}</h3>
+      
+      <div style={{ display: "flex", alignItems: "center", gap: "24px", marginBottom: "24px" }}>
+        <div style={{ position: "relative", width: "100px", height: "100px", display: "flex", alignItems: "center", justifyContent: "center" }}>
+           <svg width="100" height="100" viewBox="0 0 100 100">
+             <circle cx="50" cy="50" r="40" stroke="#F3F4F6" strokeWidth="8" fill="none" />
+             <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"
+             />
+             <text x="50" y="55" textAnchor="middle" fontSize="18" fontWeight="700" fill="#111827">{slaPercentage}%</text>
+           </svg>
+        </div>
+        <div>
+          <div style={{ fontSize: "14px", color: "#6B7280" }}>{t("EKYC_SLA_COMPLIANCE")}</div>
+          <div style={{ fontSize: "20px", fontWeight: "700", color: "#111827" }}>{t("EKYC_OPTIMAL_PERFORMANCE")}</div>
+        </div>
+      </div>
+
+      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "16px", borderTop: "1px solid #F3F4F6", paddingTop: "20px" }}>
+        <div>
+          <div style={{ fontSize: "12px", color: "#6B7280", marginBottom: "4px" }}>{t("EKYC_AVG_LATENCY")}</div>
+          <div style={{ fontSize: "18px", fontWeight: "700", color: "#111827" }}>{avgTime}h</div>
+        </div>
+        <div>
+          <div style={{ fontSize: "12px", color: "#6B7280", marginBottom: "4px" }}>{t("EKYC_BREACH_COUNT")}</div>
+          <div style={{ fontSize: "18px", fontWeight: "700", color: "#EF4444" }}>{breachedCount}</div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SLAWidget;