website refactor

apps/website/components/errors/ErrorAnalyticsDashboard.tsx

@@ -29,6 +29,12 @@ import {
 } from 'lucide-react';
 import { useEffect, useState } from 'react';
 
+import { DateDisplay } from '@/lib/display-objects/DateDisplay';
+import { DurationDisplay } from '@/lib/display-objects/DurationDisplay';
+import { MemoryDisplay } from '@/lib/display-objects/MemoryDisplay';
+import { PercentDisplay } from '@/lib/display-objects/PercentDisplay';
+import { TimeDisplay } from '@/lib/display-objects/TimeDisplay';
+
 interface ErrorAnalyticsDashboardProps {
   /**
    * Auto-refresh interval in milliseconds
@@ -41,16 +47,16 @@ interface ErrorAnalyticsDashboardProps {
 }
 
 function formatDuration(duration: number): string {
-  return duration.toFixed(2) + 'ms';
+  return DurationDisplay.formatMs(duration);
 }
 
 function formatPercentage(value: number, total: number): string {
   if (total === 0) return '0%';
-  return ((value / total) * 100).toFixed(1) + '%';
+  return PercentDisplay.format(value / total);
 }
 
 function formatMemory(bytes: number): string {
-  return (bytes / 1024 / 1024).toFixed(1) + 'MB';
+  return MemoryDisplay.formatMB(bytes);
 }
 
 interface PerformanceWithMemory extends Performance {
@@ -321,7 +327,7 @@ export function ErrorAnalyticsDashboard({
                         <Stack display="flex" justifyContent="between" alignItems="start" gap={2} mb={1}>
                           <Text size="xs" font="mono" weight="bold" color="text-red-400" truncate>{error.type}</Text>
                           <Text size="xs" color="text-gray-500" fontSize="10px">
-                            {new Date(error.timestamp).toLocaleTimeString()}
+                            {DateDisplay.formatTime(error.timestamp)}
                           </Text>
                         </Stack>
                         <Text size="xs" color="text-gray-300" block mb={1}>{error.message}</Text>