@payez/next-mvp 4.1.9 → 4.1.11

package/src/logging/components/ErrorMetricsCard.tsx

@@ -1,98 +1,98 @@
-'use client';
-
-import { useErrorMetrics } from '../hooks/useErrorMetrics';
-import { TimeRange } from '../types';
-
-interface ErrorMetricsCardProps {
-  timeRange?: TimeRange;
-  className?: string;
-}
-
-export function ErrorMetricsCard({ timeRange = '24h', className }: ErrorMetricsCardProps) {
-  const { data, loading, error } = useErrorMetrics(timeRange);
-
-  if (loading) return <div className={className}>Loading error metrics...</div>;
-  if (error) return <div className={className}>Error: {error}</div>;
-  if (!data) return null;
-
-  return (
-    <div className={className}>
-      <h3 className="text-lg font-semibold mb-4">
-        Error Metrics
-        <span className="text-sm text-gray-500 ml-2">
-          ({new Date(data.periodStart).toLocaleDateString()} - {new Date(data.periodEnd).toLocaleDateString()})
-        </span>
-      </h3>
-
-      {/* Total errors */}
-      <div className="mb-4">
-        <span className="text-3xl font-bold">{data.totalErrors}</span>
-        <span className="text-gray-600 ml-2">total errors</span>
-      </div>
-
-      {/* Top failing routes */}
-      {data.topFailingRoutes && data.topFailingRoutes.length > 0 && (
-        <div className="mb-4">
-          <h4 className="font-medium mb-2">Top Failing Routes</h4>
-          <ul className="space-y-1">
-            {data.topFailingRoutes.slice(0, 5).map((route, idx) => (
-              <li key={idx} className="flex justify-between text-sm">
-                <span className="font-mono">{route.route}</span>
-                <span className="text-red-600">{route.count} errors</span>
-              </li>
-            ))}
-          </ul>
-        </div>
-      )}
-
-      {/* Errors by level */}
-      <div className="mb-4">
-        <h4 className="font-medium mb-2">By Severity</h4>
-        <div className="flex gap-4">
-          <div className="text-sm">
-            <span className="font-medium">Error:</span>
-            <span className="ml-1">{data.errorCount}</span>
-          </div>
-          <div className="text-sm">
-            <span className="font-medium">Warn:</span>
-            <span className="ml-1">{data.warnCount}</span>
-          </div>
-          <div className="text-sm">
-            <span className="font-medium">Fatal:</span>
-            <span className="ml-1">{data.fatalCount}</span>
-          </div>
-        </div>
-      </div>
-
-      {/* By category */}
-      {data.byCategory && data.byCategory.length > 0 && (
-        <div className="mb-4">
-          <h4 className="font-medium mb-2">By Category</h4>
-          <div className="flex flex-wrap gap-2">
-            {data.byCategory.map((cat, idx) => (
-              <div key={idx} className="text-sm bg-gray-100 px-2 py-1 rounded">
-                <span className="font-medium">{cat.category}:</span>
-                <span className="ml-1">{cat.count}</span>
-              </div>
-            ))}
-          </div>
-        </div>
-      )}
-
-      {/* Top error codes */}
-      {data.topErrorCodes && data.topErrorCodes.length > 0 && (
-        <div>
-          <h4 className="font-medium mb-2">Top Error Codes</h4>
-          <ul className="space-y-1">
-            {data.topErrorCodes.slice(0, 5).map((code, idx) => (
-              <li key={idx} className="flex justify-between text-sm">
-                <span className="font-mono">{code.errorCode}</span>
-                <span className="text-orange-600">{code.count}</span>
-              </li>
-            ))}
-          </ul>
-        </div>
-      )}
-    </div>
-  );
-}
+'use client';
+
+import { useErrorMetrics } from '../hooks/useErrorMetrics';
+import { TimeRange } from '../types';
+
+interface ErrorMetricsCardProps {
+  timeRange?: TimeRange;
+  className?: string;
+}
+
+export function ErrorMetricsCard({ timeRange = '24h', className }: ErrorMetricsCardProps) {
+  const { data, loading, error } = useErrorMetrics(timeRange);
+
+  if (loading) return <div className={className}>Loading error metrics...</div>;
+  if (error) return <div className={className}>Error: {error}</div>;
+  if (!data) return null;
+
+  return (
+    <div className={className}>
+      <h3 className="text-lg font-semibold mb-4">
+        Error Metrics
+        <span className="text-sm text-gray-500 ml-2">
+          ({new Date(data.periodStart).toLocaleDateString()} - {new Date(data.periodEnd).toLocaleDateString()})
+        </span>
+      </h3>
+
+      {/* Total errors */}
+      <div className="mb-4">
+        <span className="text-3xl font-bold">{data.totalErrors}</span>
+        <span className="text-gray-600 ml-2">total errors</span>
+      </div>
+
+      {/* Top failing routes */}
+      {data.topFailingRoutes && data.topFailingRoutes.length > 0 && (
+        <div className="mb-4">
+          <h4 className="font-medium mb-2">Top Failing Routes</h4>
+          <ul className="space-y-1">
+            {data.topFailingRoutes.slice(0, 5).map((route, idx) => (
+              <li key={idx} className="flex justify-between text-sm">
+                <span className="font-mono">{route.route}</span>
+                <span className="text-red-600">{route.count} errors</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+
+      {/* Errors by level */}
+      <div className="mb-4">
+        <h4 className="font-medium mb-2">By Severity</h4>
+        <div className="flex gap-4">
+          <div className="text-sm">
+            <span className="font-medium">Error:</span>
+            <span className="ml-1">{data.errorCount}</span>
+          </div>
+          <div className="text-sm">
+            <span className="font-medium">Warn:</span>
+            <span className="ml-1">{data.warnCount}</span>
+          </div>
+          <div className="text-sm">
+            <span className="font-medium">Fatal:</span>
+            <span className="ml-1">{data.fatalCount}</span>
+          </div>
+        </div>
+      </div>
+
+      {/* By category */}
+      {data.byCategory && data.byCategory.length > 0 && (
+        <div className="mb-4">
+          <h4 className="font-medium mb-2">By Category</h4>
+          <div className="flex flex-wrap gap-2">
+            {data.byCategory.map((cat, idx) => (
+              <div key={idx} className="text-sm bg-gray-100 px-2 py-1 rounded">
+                <span className="font-medium">{cat.category}:</span>
+                <span className="ml-1">{cat.count}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Top error codes */}
+      {data.topErrorCodes && data.topErrorCodes.length > 0 && (
+        <div>
+          <h4 className="font-medium mb-2">Top Error Codes</h4>
+          <ul className="space-y-1">
+            {data.topErrorCodes.slice(0, 5).map((code, idx) => (
+              <li key={idx} className="flex justify-between text-sm">
+                <span className="font-mono">{code.errorCode}</span>
+                <span className="text-orange-600">{code.count}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/logging/components/HealthMetricsCard.tsx

@@ -1,70 +1,70 @@
-'use client';
-
-import { useHealthMetrics } from '../hooks/useHealthMetrics';
-import { TimeRange } from '../types';
-
-interface HealthMetricsCardProps {
-  timeRange?: TimeRange;
-  className?: string;
-}
-
-export function HealthMetricsCard({ timeRange = '1h', className }: HealthMetricsCardProps) {
-  const { data, loading, error } = useHealthMetrics(timeRange);
-
-  if (loading) return <div className={className}>Loading health metrics...</div>;
-  if (error) return <div className={className}>Error: {error}</div>;
-  if (!data) return null;
-
-  return (
-    <div className={className}>
-      <h3 className="text-lg font-semibold mb-4">System Health ({data.timeRange})</h3>
-
-      {/* API health overview */}
-      <div className="grid grid-cols-2 gap-4 mb-4">
-        <div>
-          <div className="text-2xl font-bold">{data.apiHealth.avgResponseTimeMs}ms</div>
-          <div className="text-sm text-gray-600">Avg Response Time</div>
-        </div>
-        <div>
-          <div className="text-2xl font-bold">{data.apiHealth.requestCount}</div>
-          <div className="text-sm text-gray-600">Total Requests</div>
-        </div>
-        <div>
-          <div className="text-2xl font-bold">{data.apiHealth.p95ResponseTimeMs}ms</div>
-          <div className="text-sm text-gray-600">P95 Response Time</div>
-        </div>
-        <div>
-          <div className="text-2xl font-bold">
-            {(data.apiHealth.errorRate * 100).toFixed(2)}%
-          </div>
-          <div className="text-sm text-gray-600">Error Rate</div>
-        </div>
-      </div>
-
-      {/* Slowest endpoints */}
-      {data.endpointBreakdown.length > 0 && (
-        <div className="mb-4">
-          <h4 className="font-medium mb-2">Slowest Endpoints</h4>
-          <ul className="space-y-1">
-            {data.endpointBreakdown
-              .sort((a, b) => b.avgDurationMs - a.avgDurationMs)
-              .slice(0, 5)
-              .map((ep, i) => (
-                <li key={i} className="flex justify-between text-sm">
-                  <span className="font-mono">{ep.endpoint}</span>
-                  <span className="text-orange-600">{ep.avgDurationMs}ms</span>
-                </li>
-              ))}
-          </ul>
-        </div>
-      )}
-
-      {/* Rate limit hits */}
-      {data.rateLimitHits > 0 && (
-        <div className="text-sm text-yellow-600">
-          ⚠️ {data.rateLimitHits} rate limit hits
-        </div>
-      )}
-    </div>
-  );
-}
+'use client';
+
+import { useHealthMetrics } from '../hooks/useHealthMetrics';
+import { TimeRange } from '../types';
+
+interface HealthMetricsCardProps {
+  timeRange?: TimeRange;
+  className?: string;
+}
+
+export function HealthMetricsCard({ timeRange = '1h', className }: HealthMetricsCardProps) {
+  const { data, loading, error } = useHealthMetrics(timeRange);
+
+  if (loading) return <div className={className}>Loading health metrics...</div>;
+  if (error) return <div className={className}>Error: {error}</div>;
+  if (!data) return null;
+
+  return (
+    <div className={className}>
+      <h3 className="text-lg font-semibold mb-4">System Health ({data.timeRange})</h3>
+
+      {/* API health overview */}
+      <div className="grid grid-cols-2 gap-4 mb-4">
+        <div>
+          <div className="text-2xl font-bold">{data.apiHealth.avgResponseTimeMs}ms</div>
+          <div className="text-sm text-gray-600">Avg Response Time</div>
+        </div>
+        <div>
+          <div className="text-2xl font-bold">{data.apiHealth.requestCount}</div>
+          <div className="text-sm text-gray-600">Total Requests</div>
+        </div>
+        <div>
+          <div className="text-2xl font-bold">{data.apiHealth.p95ResponseTimeMs}ms</div>
+          <div className="text-sm text-gray-600">P95 Response Time</div>
+        </div>
+        <div>
+          <div className="text-2xl font-bold">
+            {(data.apiHealth.errorRate * 100).toFixed(2)}%
+          </div>
+          <div className="text-sm text-gray-600">Error Rate</div>
+        </div>
+      </div>
+
+      {/* Slowest endpoints */}
+      {data.endpointBreakdown.length > 0 && (
+        <div className="mb-4">
+          <h4 className="font-medium mb-2">Slowest Endpoints</h4>
+          <ul className="space-y-1">
+            {data.endpointBreakdown
+              .sort((a, b) => b.avgDurationMs - a.avgDurationMs)
+              .slice(0, 5)
+              .map((ep, i) => (
+                <li key={i} className="flex justify-between text-sm">
+                  <span className="font-mono">{ep.endpoint}</span>
+                  <span className="text-orange-600">{ep.avgDurationMs}ms</span>
+                </li>
+              ))}
+          </ul>
+        </div>
+      )}
+
+      {/* Rate limit hits */}
+      {data.rateLimitHits > 0 && (
+        <div className="text-sm text-yellow-600">
+          ⚠️ {data.rateLimitHits} rate limit hits
+        </div>
+      )}
+    </div>
+  );
+}

package/src/logging/hooks/useAdminAnalytics.ts

@@ -1,22 +1,22 @@
-import { TimeRange } from '../types';
-import { useErrorMetrics } from './useErrorMetrics';
-import { useHealthMetrics } from './useHealthMetrics';
-import { useAuditLog } from './useAuditLog';
-
-/**
- * Combined hook for admin analytics
- * Fetches both error and health metrics
- */
-export function useAdminAnalytics(timeRange: TimeRange = '24h') {
-  const errorMetrics = useErrorMetrics(timeRange);
-  const healthMetrics = useHealthMetrics(timeRange);
-  const auditLog = useAuditLog();
-
-  return {
-    errorMetrics,
-    healthMetrics,
-    auditLog,
-    loading: errorMetrics.loading || healthMetrics.loading,
-    error: errorMetrics.error || healthMetrics.error,
-  };
-}
+import { TimeRange } from '../types';
+import { useErrorMetrics } from './useErrorMetrics';
+import { useHealthMetrics } from './useHealthMetrics';
+import { useAuditLog } from './useAuditLog';
+
+/**
+ * Combined hook for admin analytics
+ * Fetches both error and health metrics
+ */
+export function useAdminAnalytics(timeRange: TimeRange = '24h') {
+  const errorMetrics = useErrorMetrics(timeRange);
+  const healthMetrics = useHealthMetrics(timeRange);
+  const auditLog = useAuditLog();
+
+  return {
+    errorMetrics,
+    healthMetrics,
+    auditLog,
+    loading: errorMetrics.loading || healthMetrics.loading,
+    error: errorMetrics.error || healthMetrics.error,
+  };
+}

package/src/logging/hooks/useAuditLog.ts

@@ -1,24 +1,24 @@
-import { useState } from 'react';
-import { AuditLogEntry } from '../types';
-import { writeAuditLog } from '../api/audit-log';
-
-export function useAuditLog() {
-  const [writing, setWriting] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  async function log(entry: Omit<AuditLogEntry, 'id' | 'timestamp'>) {
-    try {
-      setWriting(true);
-      setError(null);
-      await writeAuditLog(entry);
-    } catch (err) {
-      const errMessage = err instanceof Error ? err.message : 'Failed to write audit log';
-      setError(errMessage);
-      throw err;
-    } finally {
-      setWriting(false);
-    }
-  }
-
-  return { log, writing, error };
-}
+import { useState } from 'react';
+import { AuditLogEntry } from '../types';
+import { writeAuditLog } from '../api/audit-log';
+
+export function useAuditLog() {
+  const [writing, setWriting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  async function log(entry: Omit<AuditLogEntry, 'id' | 'timestamp'>) {
+    try {
+      setWriting(true);
+      setError(null);
+      await writeAuditLog(entry);
+    } catch (err) {
+      const errMessage = err instanceof Error ? err.message : 'Failed to write audit log';
+      setError(errMessage);
+      throw err;
+    } finally {
+      setWriting(false);
+    }
+  }
+
+  return { log, writing, error };
+}

package/src/logging/hooks/useErrorMetrics.ts

@@ -1,40 +1,40 @@
-import { useState, useEffect } from 'react';
-import { ErrorMetrics, TimeRange } from '../types';
-import { getErrorMetrics } from '../api/admin-analytics';
-
-export function useErrorMetrics(timeRange: TimeRange = '24h') {
-  const [data, setData] = useState<ErrorMetrics | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    let mounted = true;
-
-    async function fetchData() {
-      try {
-        setLoading(true);
-        const result = await getErrorMetrics(timeRange);
-        if (mounted) {
-          setData(result.data);
-          setError(null);
-        }
-      } catch (err) {
-        if (mounted) {
-          setError(err instanceof Error ? err.message : 'Failed to fetch error metrics');
-        }
-      } finally {
-        if (mounted) {
-          setLoading(false);
-        }
-      }
-    }
-
-    fetchData();
-
-    return () => {
-      mounted = false;
-    };
-  }, [timeRange]);
-
-  return { data, loading, error };
-}
+import { useState, useEffect } from 'react';
+import { ErrorMetrics, TimeRange } from '../types';
+import { getErrorMetrics } from '../api/admin-analytics';
+
+export function useErrorMetrics(timeRange: TimeRange = '24h') {
+  const [data, setData] = useState<ErrorMetrics | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let mounted = true;
+
+    async function fetchData() {
+      try {
+        setLoading(true);
+        const result = await getErrorMetrics(timeRange);
+        if (mounted) {
+          setData(result.data);
+          setError(null);
+        }
+      } catch (err) {
+        if (mounted) {
+          setError(err instanceof Error ? err.message : 'Failed to fetch error metrics');
+        }
+      } finally {
+        if (mounted) {
+          setLoading(false);
+        }
+      }
+    }
+
+    fetchData();
+
+    return () => {
+      mounted = false;
+    };
+  }, [timeRange]);
+
+  return { data, loading, error };
+}

package/src/logging/hooks/useHealthMetrics.ts

@@ -1,44 +1,44 @@
-import { useState, useEffect } from 'react';
-import { HealthMetrics, TimeRange } from '../types';
-import { getHealthMetrics } from '../api/admin-analytics';
-
-export function useHealthMetrics(timeRange: TimeRange = '1h') {
-  const [data, setData] = useState<HealthMetrics | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    let mounted = true;
-
-    async function fetchData() {
-      try {
-        setLoading(true);
-        const result = await getHealthMetrics(timeRange);
-        if (mounted) {
-          setData(result.data);
-          setError(null);
-        }
-      } catch (err) {
-        if (mounted) {
-          setError(err instanceof Error ? err.message : 'Failed to fetch health metrics');
-        }
-      } finally {
-        if (mounted) {
-          setLoading(false);
-        }
-      }
-    }
-
-    fetchData();
-
-    // Auto-refresh health metrics every minute
-    const interval = setInterval(fetchData, 60000);
-
-    return () => {
-      mounted = false;
-      clearInterval(interval);
-    };
-  }, [timeRange]);
-
-  return { data, loading, error };
-}
+import { useState, useEffect } from 'react';
+import { HealthMetrics, TimeRange } from '../types';
+import { getHealthMetrics } from '../api/admin-analytics';
+
+export function useHealthMetrics(timeRange: TimeRange = '1h') {
+  const [data, setData] = useState<HealthMetrics | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let mounted = true;
+
+    async function fetchData() {
+      try {
+        setLoading(true);
+        const result = await getHealthMetrics(timeRange);
+        if (mounted) {
+          setData(result.data);
+          setError(null);
+        }
+      } catch (err) {
+        if (mounted) {
+          setError(err instanceof Error ? err.message : 'Failed to fetch health metrics');
+        }
+      } finally {
+        if (mounted) {
+          setLoading(false);
+        }
+      }
+    }
+
+    fetchData();
+
+    // Auto-refresh health metrics every minute
+    const interval = setInterval(fetchData, 60000);
+
+    return () => {
+      mounted = false;
+      clearInterval(interval);
+    };
+  }, [timeRange]);
+
+  return { data, loading, error };
+}

package/src/logging/index.ts

@@ -1,18 +1,18 @@
-// Components
-export { ErrorMetricsCard } from './components/ErrorMetricsCard';
-export { HealthMetricsCard } from './components/HealthMetricsCard';
-export { AuditLogViewer } from './components/AuditLogViewer';
-export { AdminAnalyticsLayout } from './components/AdminAnalyticsLayout';
-
-// Hooks
-export { useErrorMetrics } from './hooks/useErrorMetrics';
-export { useHealthMetrics } from './hooks/useHealthMetrics';
-export { useAuditLog } from './hooks/useAuditLog';
-export { useAdminAnalytics } from './hooks/useAdminAnalytics';
-
-// Types
-export * from './types';
-
-// API (for advanced use cases)
-export * from './api/admin-analytics';
-export * from './api/audit-log';
+// Components
+export { ErrorMetricsCard } from './components/ErrorMetricsCard';
+export { HealthMetricsCard } from './components/HealthMetricsCard';
+export { AuditLogViewer } from './components/AuditLogViewer';
+export { AdminAnalyticsLayout } from './components/AdminAnalyticsLayout';
+
+// Hooks
+export { useErrorMetrics } from './hooks/useErrorMetrics';
+export { useHealthMetrics } from './hooks/useHealthMetrics';
+export { useAuditLog } from './hooks/useAuditLog';
+export { useAdminAnalytics } from './hooks/useAdminAnalytics';
+
+// Types
+export * from './types';
+
+// API (for advanced use cases)
+export * from './api/admin-analytics';
+export * from './api/audit-log';