@payez/next-mvp 4.8.1 → 4.8.2

package/src/logging/api/audit-log.ts

@@ -1,53 +1,53 @@
-import { AuditLogEntry, AuditLogQuery, AuditLogResponse } from '../types';
-
-const API_BASE = process.env.NEXT_PUBLIC_VIBE_API_URL || 'http://localhost:32786';
-
-/**
- * Get admin token from app's auth implementation
- */
-function getAdminToken(): string {
-  if (typeof window !== 'undefined' && window.localStorage) {
-    return localStorage.getItem('admin_token') || '';
-  }
-  return '';
-}
-
-export async function writeAuditLog(entry: Omit<AuditLogEntry, 'id' | 'timestamp'>) {
-  const res = await fetch(`${API_BASE}/v1/audit`, {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-      Authorization: `Bearer ${getAdminToken()}`
-    },
-    body: JSON.stringify(entry)
-  });
-
-  if (!res.ok) {
-    throw new Error(`Failed to write audit log: ${res.statusText}`);
-  }
-
-  return res.json();
-}
-
-export async function queryAuditLog(query: AuditLogQuery): Promise<AuditLogResponse> {
-  const params = new URLSearchParams();
-
-  if (query.category) params.append('category', query.category);
-  if (query.userId) params.append('userId', query.userId.toString());
-  if (query.startDate) params.append('startDate', query.startDate);
-  if (query.endDate) params.append('endDate', query.endDate);
-  if (query.page) params.append('page', query.page.toString());
-  if (query.pageSize) params.append('pageSize', query.pageSize.toString());
-
-  const res = await fetch(`${API_BASE}/v1/audit?${params.toString()}`, {
-    headers: {
-      Authorization: `Bearer ${getAdminToken()}`
-    }
-  });
-
-  if (!res.ok) {
-    throw new Error(`Failed to query audit log: ${res.statusText}`);
-  }
-
-  return res.json();
-}
+import { AuditLogEntry, AuditLogQuery, AuditLogResponse } from '../types';
+
+const API_BASE = process.env.NEXT_PUBLIC_VIBE_API_URL || 'http://localhost:32786';
+
+/**
+ * Get admin token from app's auth implementation
+ */
+function getAdminToken(): string {
+  if (typeof window !== 'undefined' && window.localStorage) {
+    return localStorage.getItem('admin_token') || '';
+  }
+  return '';
+}
+
+export async function writeAuditLog(entry: Omit<AuditLogEntry, 'id' | 'timestamp'>) {
+  const res = await fetch(`${API_BASE}/v1/audit`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${getAdminToken()}`
+    },
+    body: JSON.stringify(entry)
+  });
+
+  if (!res.ok) {
+    throw new Error(`Failed to write audit log: ${res.statusText}`);
+  }
+
+  return res.json();
+}
+
+export async function queryAuditLog(query: AuditLogQuery): Promise<AuditLogResponse> {
+  const params = new URLSearchParams();
+
+  if (query.category) params.append('category', query.category);
+  if (query.userId) params.append('userId', query.userId.toString());
+  if (query.startDate) params.append('startDate', query.startDate);
+  if (query.endDate) params.append('endDate', query.endDate);
+  if (query.page) params.append('page', query.page.toString());
+  if (query.pageSize) params.append('pageSize', query.pageSize.toString());
+
+  const res = await fetch(`${API_BASE}/v1/audit?${params.toString()}`, {
+    headers: {
+      Authorization: `Bearer ${getAdminToken()}`
+    }
+  });
+
+  if (!res.ok) {
+    throw new Error(`Failed to query audit log: ${res.statusText}`);
+  }
+
+  return res.json();
+}

package/src/logging/components/AdminAnalyticsLayout.tsx

@@ -1,49 +1,49 @@
-'use client';
-
-import { ReactNode } from 'react';
-import { TimeRange } from '../types';
-
-interface AdminAnalyticsLayoutProps {
-  title: string;
-  timeRange: TimeRange;
-  onTimeRangeChange: (range: TimeRange) => void;
-  children: ReactNode;
-}
-
-export function AdminAnalyticsLayout({
-  title,
-  timeRange,
-  onTimeRangeChange,
-  children,
-}: AdminAnalyticsLayoutProps) {
-  const timeRanges: TimeRange[] = ['1h', '24h', '7d', '30d'];
-
-  return (
-    <div className="p-6">
-      {/* Header */}
-      <div className="flex justify-between items-center mb-6">
-        <h1 className="text-2xl font-bold">{title}</h1>
-
-        {/* Time range selector */}
-        <div className="flex gap-2">
-          {timeRanges.map(range => (
-            <button
-              key={range}
-              onClick={() => onTimeRangeChange(range)}
-              className={`px-3 py-1 rounded text-sm font-medium transition-colors ${
-                timeRange === range
-                  ? 'bg-blue-600 text-white'
-                  : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
-              }`}
-            >
-              {range}
-            </button>
-          ))}
-        </div>
-      </div>
-
-      {/* Content */}
-      <div>{children}</div>
-    </div>
-  );
-}
+'use client';
+
+import { ReactNode } from 'react';
+import { TimeRange } from '../types';
+
+interface AdminAnalyticsLayoutProps {
+  title: string;
+  timeRange: TimeRange;
+  onTimeRangeChange: (range: TimeRange) => void;
+  children: ReactNode;
+}
+
+export function AdminAnalyticsLayout({
+  title,
+  timeRange,
+  onTimeRangeChange,
+  children,
+}: AdminAnalyticsLayoutProps) {
+  const timeRanges: TimeRange[] = ['1h', '24h', '7d', '30d'];
+
+  return (
+    <div className="p-6">
+      {/* Header */}
+      <div className="flex justify-between items-center mb-6">
+        <h1 className="text-2xl font-bold">{title}</h1>
+
+        {/* Time range selector */}
+        <div className="flex gap-2">
+          {timeRanges.map(range => (
+            <button
+              key={range}
+              onClick={() => onTimeRangeChange(range)}
+              className={`px-3 py-1 rounded text-sm font-medium transition-colors ${
+                timeRange === range
+                  ? 'bg-blue-600 text-white'
+                  : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
+              }`}
+            >
+              {range}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Content */}
+      <div>{children}</div>
+    </div>
+  );
+}

package/src/logging/components/AuditLogViewer.tsx

@@ -1,125 +1,125 @@
-'use client';
-
-import { useState, useEffect } from 'react';
-import { AuditLogEntry, AuditLogQuery } from '../types';
-import { queryAuditLog } from '../api/audit-log';
-
-interface AuditLogViewerProps {
-  query?: Partial<AuditLogQuery>;
-  className?: string;
-}
-
-export function AuditLogViewer({ query = {}, className }: AuditLogViewerProps) {
-  const [logs, setLogs] = useState<AuditLogEntry[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [page, setPage] = useState(1);
-  const [totalPages, setTotalPages] = useState(1);
-
-  useEffect(() => {
-    let mounted = true;
-
-    async function fetchLogs() {
-      try {
-        setLoading(true);
-        const result = await queryAuditLog({
-          ...query,
-          page,
-          pageSize: 20,
-        });
-
-        if (mounted) {
-          setLogs(result.data);
-          setTotalPages(result.pagination?.totalPages || 1);
-          setError(null);
-        }
-      } catch (err) {
-        if (mounted) {
-          setError(err instanceof Error ? err.message : 'Failed to fetch audit logs');
-        }
-      } finally {
-        if (mounted) {
-          setLoading(false);
-        }
-      }
-    }
-
-    fetchLogs();
-
-    return () => {
-      mounted = false;
-    };
-  }, [query, page]);
-
-  if (loading) return <div className={className}>Loading audit logs...</div>;
-  if (error) return <div className={className}>Error: {error}</div>;
-
-  return (
-    <div className={className}>
-      <h3 className="text-lg font-semibold mb-4">Audit Log</h3>
-
-      {/* Logs table */}
-      <div className="overflow-x-auto">
-        <table className="min-w-full divide-y divide-gray-200">
-          <thead className="bg-gray-50">
-            <tr>
-              <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">
-                Timestamp
-              </th>
-              <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">
-                Category
-              </th>
-              <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">
-                Action
-              </th>
-              <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">
-                User ID
-              </th>
-              <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">
-                Details
-              </th>
-            </tr>
-          </thead>
-          <tbody className="bg-white divide-y divide-gray-200">
-            {logs.map(log => (
-              <tr key={log.id} className="hover:bg-gray-50">
-                <td className="px-4 py-2 text-sm text-gray-900 font-mono">
-                  {log.timestamp ? new Date(log.timestamp).toLocaleString() : '-'}
-                </td>
-                <td className="px-4 py-2 text-sm text-gray-900">{log.category}</td>
-                <td className="px-4 py-2 text-sm text-gray-900 font-mono">{log.action}</td>
-                <td className="px-4 py-2 text-sm text-gray-900">{log.userId || '-'}</td>
-                <td className="px-4 py-2 text-sm text-gray-500">
-                  {log.details ? JSON.stringify(log.details).slice(0, 50) : '-'}
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-
-      {/* Pagination */}
-      {totalPages > 1 && (
-        <div className="flex justify-center gap-2 mt-4">
-          <button
-            onClick={() => setPage(p => Math.max(1, p - 1))}
-            disabled={page === 1}
-            className="px-3 py-1 rounded bg-gray-200 text-gray-700 disabled:opacity-50"
-          >
-            Previous
-          </button>
-          <span className="px-3 py-1">
-            Page {page} of {totalPages}
-          </span>
-          <button
-            onClick={() => setPage(p => Math.min(totalPages, p + 1))}
-            disabled={page === totalPages}
-            className="px-3 py-1 rounded bg-gray-200 text-gray-700 disabled:opacity-50"
-          >
-            Next
-          </button>
-        </div>
-      )}
-    </div>
-  );
-}
+'use client';
+
+import { useState, useEffect } from 'react';
+import { AuditLogEntry, AuditLogQuery } from '../types';
+import { queryAuditLog } from '../api/audit-log';
+
+interface AuditLogViewerProps {
+  query?: Partial<AuditLogQuery>;
+  className?: string;
+}
+
+export function AuditLogViewer({ query = {}, className }: AuditLogViewerProps) {
+  const [logs, setLogs] = useState<AuditLogEntry[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [page, setPage] = useState(1);
+  const [totalPages, setTotalPages] = useState(1);
+
+  useEffect(() => {
+    let mounted = true;
+
+    async function fetchLogs() {
+      try {
+        setLoading(true);
+        const result = await queryAuditLog({
+          ...query,
+          page,
+          pageSize: 20,
+        });
+
+        if (mounted) {
+          setLogs(result.data);
+          setTotalPages(result.pagination?.totalPages || 1);
+          setError(null);
+        }
+      } catch (err) {
+        if (mounted) {
+          setError(err instanceof Error ? err.message : 'Failed to fetch audit logs');
+        }
+      } finally {
+        if (mounted) {
+          setLoading(false);
+        }
+      }
+    }
+
+    fetchLogs();
+
+    return () => {
+      mounted = false;
+    };
+  }, [query, page]);
+
+  if (loading) return <div className={className}>Loading audit logs...</div>;
+  if (error) return <div className={className}>Error: {error}</div>;
+
+  return (
+    <div className={className}>
+      <h3 className="text-lg font-semibold mb-4">Audit Log</h3>
+
+      {/* Logs table */}
+      <div className="overflow-x-auto">
+        <table className="min-w-full divide-y divide-gray-200">
+          <thead className="bg-gray-50">
+            <tr>
+              <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">
+                Timestamp
+              </th>
+              <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">
+                Category
+              </th>
+              <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">
+                Action
+              </th>
+              <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">
+                User ID
+              </th>
+              <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">
+                Details
+              </th>
+            </tr>
+          </thead>
+          <tbody className="bg-white divide-y divide-gray-200">
+            {logs.map(log => (
+              <tr key={log.id} className="hover:bg-gray-50">
+                <td className="px-4 py-2 text-sm text-gray-900 font-mono">
+                  {log.timestamp ? new Date(log.timestamp).toLocaleString() : '-'}
+                </td>
+                <td className="px-4 py-2 text-sm text-gray-900">{log.category}</td>
+                <td className="px-4 py-2 text-sm text-gray-900 font-mono">{log.action}</td>
+                <td className="px-4 py-2 text-sm text-gray-900">{log.userId || '-'}</td>
+                <td className="px-4 py-2 text-sm text-gray-500">
+                  {log.details ? JSON.stringify(log.details).slice(0, 50) : '-'}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      {/* Pagination */}
+      {totalPages > 1 && (
+        <div className="flex justify-center gap-2 mt-4">
+          <button
+            onClick={() => setPage(p => Math.max(1, p - 1))}
+            disabled={page === 1}
+            className="px-3 py-1 rounded bg-gray-200 text-gray-700 disabled:opacity-50"
+          >
+            Previous
+          </button>
+          <span className="px-3 py-1">
+            Page {page} of {totalPages}
+          </span>
+          <button
+            onClick={() => setPage(p => Math.min(totalPages, p + 1))}
+            disabled={page === totalPages}
+            className="px-3 py-1 rounded bg-gray-200 text-gray-700 disabled:opacity-50"
+          >
+            Next
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}

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>
+  );
+}