Persistance stats tracker

src/components/PluginCard.tsx

@@ -37,7 +37,7 @@ export function PluginCard({ plugin }: PluginCardProps) {
 
   const handleExecute = async () => {
     setLoading(true);
-    
+
     try {
       let url = "/api" + plugin.endpoint;
       let fullUrl = getApiUrl(plugin.endpoint);
@@ -57,14 +57,12 @@ export function PluginCard({ plugin }: PluginCardProps) {
         }
       }
 
-      // Store the request URL for display
       setRequestUrl(fullUrl);
 
       const fetchOptions: RequestInit = {
         method: plugin.method,
       };
 
-      // Add body for POST/PUT/PATCH
       if (["POST", "PUT", "PATCH"].includes(plugin.method) && plugin.parameters?.body) {
         const bodyData: Record<string, any> = {};
         plugin.parameters.body.forEach((param) => {
@@ -82,7 +80,6 @@ export function PluginCard({ plugin }: PluginCardProps) {
       const res = await fetch(url, fetchOptions);
       const data = await res.json();
 
-      // Capture response headers
       const headers: Record<string, string> = {};
       res.headers.forEach((value, key) => {
         headers[key] = value;
@@ -118,24 +115,24 @@ export function PluginCard({ plugin }: PluginCardProps) {
     setCopiedRequestUrl(true);
     setTimeout(() => setCopiedRequestUrl(false), 2000);
   };
-  
+
   const hasQueryParams = plugin.parameters?.query && plugin.parameters.query.length > 0;
   const hasBodyParams = plugin.parameters?.body && plugin.parameters.body.length > 0;
   const hasPathParams = plugin.parameters?.path && plugin.parameters.path.length > 0;
   const hasAnyParams = hasQueryParams || hasBodyParams || hasPathParams;
-  
+
   const generateCurlExample = () => {
     let curl = `curl -X ${plugin.method} "${getApiUrl(plugin.endpoint)}`;
-    
+
     if (hasQueryParams) {
       const exampleParams = plugin.parameters!.query!
         .map((p) => `${p.name}=${p.example || 'value'}`)
         .join('&');
       curl += `?${exampleParams}`;
     }
-    
+
     curl += '"';
-    
+
     if (hasBodyParams) {
       curl += ' \\\n  -H "Content-Type: application/json" \\\n  -d \'';
       const bodyExample: Record<string, any> = {};
@@ -145,22 +142,22 @@ export function PluginCard({ plugin }: PluginCardProps) {
       curl += JSON.stringify(bodyExample, null, 2);
       curl += "'";
     }
-    
+
     return curl;
   };
 
   const generateNodeExample = () => {
     let code = `const response = await fetch("${getApiUrl(plugin.endpoint)}`;
-    
+
     if (hasQueryParams) {
       const exampleParams = plugin.parameters!.query!
         .map((p) => `${p.name}=${p.example || 'value'}`)
         .join('&');
       code += `?${exampleParams}`;
     }
-    
+
     code += '", {\n  method: "' + plugin.method + '"';
-    
+
     if (hasBodyParams) {
       code += ',\n  headers: {\n    "Content-Type": "application/json"\n  },\n  body: JSON.stringify(';
       const bodyExample: Record<string, any> = {};
@@ -170,76 +167,77 @@ export function PluginCard({ plugin }: PluginCardProps) {
       code += JSON.stringify(bodyExample, null, 2);
       code += ')';
     }
-    
+
     code += '\n});\n\nconst data = await response.json();\nconsole.log(data);';
     return code;
   };
 
   return (
-    <Card className="bg-white/[0.02] border-white/10 overflow-hidden">
+    <Card className="bg-white/[0.02] border-white/10 overflow-hidden w-full">
       {/* Collapsible Header */}
-      <div 
-        className="p-6 border-b border-white/10 cursor-pointer hover:bg-white/[0.02] transition-colors"
+      <div
+        className="p-4 border-b border-white/10 cursor-pointer hover:bg-white/[0.02] transition-colors"
         onClick={() => setIsExpanded(!isExpanded)}
       >
-        <div className="flex items-start justify-between gap-4">
-          <div className="flex-1 min-w-0">
-            <div className="flex items-center gap-3 mb-3 flex-wrap">
-              <Badge className={`${methodColors[plugin.method]} border font-bold px-3 py-1 flex-shrink-0`}>
-                {plugin.method}
-              </Badge>
-              <code className="text-sm text-purple-400 font-mono break-all">{plugin.endpoint}</code>
-              <button
-                onClick={(e) => {
-                  e.stopPropagation();
-                  copyApiUrl();
-                }}
-                className="text-gray-400 hover:text-white transition-colors p-1 flex-shrink-0"
-                title="Copy API URL"
-              >
-                {copiedUrl ? (
-                  <Check className="w-4 h-4 text-green-400" />
-                ) : (
-                  <Copy className="w-4 h-4" />
-                )}
-              </button>
-            </div>
-            <h3 className="text-xl font-bold text-white mb-2 break-words">{plugin.name}</h3>
-            <p className="text-gray-400 text-sm break-words">{plugin.description}</p>
-            
-            {/* Tags */}
-            {plugin.tags && plugin.tags.length > 0 && (
-              <div className="flex flex-wrap gap-2 mt-3">
-                {plugin.tags.map((tag) => (
-                  <Badge key={tag} variant="outline" className="bg-white/5 text-gray-400 border-white/10 text-xs">
-                    {tag}
-                  </Badge>
-                ))}
-              </div>
-            )}
+        <div className="flex items-center gap-2 mb-3 flex-wrap">
+          <Badge className={`${methodColors[plugin.method]} border font-bold px-3 py-1 flex-shrink-0`}>
+            {plugin.method}
+          </Badge>
+          <code className="text-sm text-purple-400 font-mono flex-1 min-w-0 break-all">{plugin.endpoint}</code>
+          <div className="flex items-center gap-1 flex-shrink-0">
+            <button
+              onClick={(e) => {
+                e.stopPropagation();
+                copyApiUrl();
+              }}
+              className="text-gray-400 hover:text-white transition-colors p-1.5"
+              title="Copy API URL"
+            >
+              {copiedUrl ? (
+                <Check className="w-4 h-4 text-green-400" />
+              ) : (
+                <Copy className="w-4 h-4" />
+              )}
+            </button>
 
-            {/* API URL Display */}
-            <div className="mt-3 flex items-start gap-2">
-              <span className="text-xs text-gray-500 flex-shrink-0">API URL:</span>
-              <code className="text-xs text-gray-300 bg-black/30 px-2 py-1 rounded break-all">
-                {getApiUrl(plugin.endpoint)}
-              </code>
-            </div>
+            <button
+              className="text-gray-400 hover:text-white transition-colors p-1.5"
+              onClick={(e) => {
+                e.stopPropagation();
+                setIsExpanded(!isExpanded);
+              }}
+            >
+              {isExpanded ? (
+                <ChevronUp className="w-5 h-5" />
+              ) : (
+                <ChevronDown className="w-5 h-5" />
+              )}
+            </button>
           </div>
+        </div>
 
-          <button 
-            className="text-gray-400 hover:text-white transition-colors flex-shrink-0 p-2 hover:bg-white/5 rounded-lg"
-            onClick={(e) => {
-              e.stopPropagation();
-              setIsExpanded(!isExpanded);
-            }}
-          >
-            {isExpanded ? (
-              <ChevronUp className="w-6 h-6" />
-            ) : (
-              <ChevronDown className="w-6 h-6" />
-            )}
-          </button>
+        <div className="w-full">
+          <h3 className="text-xl font-bold text-white mb-2">{plugin.name}</h3>
+          <p className="text-gray-400 text-sm leading-relaxed">{plugin.description}</p>
+
+          {/* Tags */}
+          {plugin.tags && plugin.tags.length > 0 && (
+            <div className="flex flex-wrap gap-2 mt-3">
+              {plugin.tags.map((tag) => (
+                <Badge key={tag} variant="outline" className="bg-white/5 text-gray-400 border-white/10 text-xs">
+                  {tag}
+                </Badge>
+              ))}
+            </div>
+          )}
+
+          {/* API URL Display */}
+          <div className="mt-3 flex items-start gap-2">
+            <span className="text-xs text-gray-500 flex-shrink-0">API URL:</span>
+            <code className="text-xs text-gray-300 bg-black/30 px-2 py-1 rounded break-all flex-1">
+              {getApiUrl(plugin.endpoint)}
+            </code>
+          </div>
         </div>
       </div>
 
@@ -330,21 +328,19 @@ export function PluginCard({ plugin }: PluginCardProps) {
                 <div className="space-y-3">
                   {Object.entries(plugin.responses).map(([status, response]) => (
                     <div key={status} className="border border-white/10 rounded-lg overflow-hidden">
-                      <div className={`px-4 py-2 flex items-center gap-3 ${
-                        parseInt(status) >= 200 && parseInt(status) < 300
-                          ? "bg-green-500/10"
-                          : parseInt(status) >= 400 && parseInt(status) < 500
+                      <div className={`px-4 py-2 flex items-center gap-3 ${parseInt(status) >= 200 && parseInt(status) < 300
+                        ? "bg-green-500/10"
+                        : parseInt(status) >= 400 && parseInt(status) < 500
                           ? "bg-yellow-500/10"
                           : "bg-red-500/10"
-                      }`}>
+                        }`}>
                         <Badge
-                          className={`${
-                            parseInt(status) >= 200 && parseInt(status) < 300
-                              ? "bg-green-500/20 text-green-400 border-green-500/50"
-                              : parseInt(status) >= 400 && parseInt(status) < 500
+                          className={`${parseInt(status) >= 200 && parseInt(status) < 300
+                            ? "bg-green-500/20 text-green-400 border-green-500/50"
+                            : parseInt(status) >= 400 && parseInt(status) < 500
                               ? "bg-yellow-500/20 text-yellow-400 border-yellow-500/50"
                               : "bg-red-500/20 text-red-400 border-red-500/50"
-                          } border font-bold`}
+                            } border font-bold`}
                         >
                           {status}
                         </Badge>
@@ -369,7 +365,7 @@ export function PluginCard({ plugin }: PluginCardProps) {
                   </div>
                   <CodeBlock code={generateCurlExample()} language="bash" />
                 </div>
-                
+
                 <div>
                   <div className="mb-2">
                     <span className="text-xs text-gray-400">Node.js (fetch)</span>
@@ -403,7 +399,7 @@ export function PluginCard({ plugin }: PluginCardProps) {
                     <p className="text-xs text-gray-500 mt-1">{param.description}</p>
                   </div>
                 ))}
-                
+
                 {/* Body Parameters */}
                 {plugin.parameters?.body?.map((param) => (
                   <div key={param.name}>
@@ -464,11 +460,10 @@ export function PluginCard({ plugin }: PluginCardProps) {
                 {/* Response Status */}
                 <div className="flex items-center justify-between">
                   <span className="text-sm text-gray-400">Response Status</span>
-                  <Badge className={`${
-                    response.status >= 200 && response.status < 300
-                      ? "bg-green-500/20 text-green-400"
-                      : "bg-red-500/20 text-red-400"
-                  }`}>
+                  <Badge className={`${response.status >= 200 && response.status < 300
+                    ? "bg-green-500/20 text-green-400"
+                    : "bg-red-500/20 text-red-400"
+                    }`}>
                     {response.status} {response.statusText}
                   </Badge>
                 </div>
@@ -491,8 +486,8 @@ export function PluginCard({ plugin }: PluginCardProps) {
                 {/* Response Body with Syntax Highlighting */}
                 <div>
                   <h5 className="text-sm text-gray-400 mb-2">Response Body</h5>
-                  <CodeBlock 
-                    code={JSON.stringify(response.data, null, 2)} 
+                  <CodeBlock
+                    code={JSON.stringify(response.data, null, 2)}
                     language="json"
                   />
                 </div>
@@ -503,4 +498,4 @@ export function PluginCard({ plugin }: PluginCardProps) {
       )}
     </Card>
   );
-}
+}

src/components/VisitorChart.tsx

@@ -11,16 +11,17 @@ interface VisitorData {
 export function VisitorChart() {
   const [data, setData] = useState<VisitorData[]>([]);
   const [loading, setLoading] = useState(true);
+  const [days, setDays] = useState(30);
 
   useEffect(() => {
     fetchVisitorData();
     const interval = setInterval(fetchVisitorData, 5 * 60 * 1000);
     return () => clearInterval(interval);
-  }, []);
+  }, [days]);
 
   const fetchVisitorData = async () => {
     try {
-      const res = await fetch("/api/stats/visitors");
+      const res = await fetch(`/api/stats/visitors?days=${days}`);
       const json = await res.json();
       if (json.success) {
         setData(json.data);
@@ -34,23 +35,29 @@ export function VisitorChart() {
 
   const formatXAxis = (timestamp: number) => {
     const date = new Date(timestamp);
-    return date.getHours().toString().padStart(2, '0') + ':00';
+    if (days <= 7) {
+      return date.toLocaleDateString('id-ID', { month: 'short', day: 'numeric' });
+    } else if (days <= 30) {
+      return date.toLocaleDateString('id-ID', { month: 'short', day: 'numeric' });
+    } else {
+      return date.toLocaleDateString('id-ID', { month: 'short', day: 'numeric' });
+    }
   };
 
   const CustomTooltip = ({ active, payload }: any) => {
     if (active && payload && payload.length) {
       const data = payload[0].payload;
       const date = new Date(data.timestamp);
-      const timeStr = date.toLocaleString('en-US', {
+      const dateStr = date.toLocaleDateString('id-ID', {
+        weekday: 'short',
         month: 'short',
         day: 'numeric',
-        hour: '2-digit',
-        minute: '2-digit',
+        year: 'numeric',
       });
 
       return (
         <div className="bg-black/90 border border-white/20 rounded-lg p-3 backdrop-blur-sm">
-          <p className="text-xs text-gray-400 mb-1">{timeStr}</p>
+          <p className="text-xs text-gray-400 mb-1">{dateStr}</p>
           <p className="text-sm font-semibold text-purple-400">
             {data.count} visitor{data.count !== 1 ? 's' : ''}
           </p>
@@ -60,11 +67,53 @@ export function VisitorChart() {
     return null;
   };
 
+  const totalVisitors = data.reduce((sum, d) => sum + d.count, 0);
+
   return (
     <Card className="p-6 bg-white/[0.02] border-white/10">
-      <div className="flex items-center gap-2 mb-4">
-        <Users className="w-5 h-5 text-purple-400" />
-        <h3 className="text-lg font-semibold text-white">Visitor Activity (Last 24 Hours)</h3>
+      <div className="flex items-center justify-between mb-4">
+        <div className="flex items-center gap-2">
+          <Users className="w-5 h-5 text-purple-400" />
+          <h3 className="text-lg font-semibold text-white">Visitor Activity</h3>
+        </div>
+        
+        <div className="flex gap-2">
+          <button
+            onClick={() => setDays(7)}
+            className={`px-3 py-1 rounded text-sm transition-colors ${
+              days === 7
+                ? 'bg-purple-500 text-white'
+                : 'bg-white/5 text-gray-400 hover:bg-white/10'
+            }`}
+          >
+            7D
+          </button>
+          <button
+            onClick={() => setDays(30)}
+            className={`px-3 py-1 rounded text-sm transition-colors ${
+              days === 30
+                ? 'bg-purple-500 text-white'
+                : 'bg-white/5 text-gray-400 hover:bg-white/10'
+            }`}
+          >
+            30D
+          </button>
+          <button
+            onClick={() => setDays(90)}
+            className={`px-3 py-1 rounded text-sm transition-colors ${
+              days === 90
+                ? 'bg-purple-500 text-white'
+                : 'bg-white/5 text-gray-400 hover:bg-white/10'
+            }`}
+          >
+            90D
+          </button>
+        </div>
+      </div>
+
+      <div className="mb-4">
+        <p className="text-2xl font-bold text-white">{totalVisitors}</p>
+        <p className="text-sm text-gray-400">Total visitors in last {days} days</p>
       </div>
 
       {loading ? (

src/server/index.ts

@@ -25,7 +25,7 @@ app.use(
 app.use(express.urlencoded({ extended: false }));
 
 export function log(message: string, source = "express") {
-  const formattedTime = new Date().toLocaleTimeString("en-US", {
+  const formattedTime = new Date().toLocaleTimeString("id-ID", {
     hour: "numeric",
     minute: "2-digit",
     second: "2-digit",
@@ -140,8 +140,9 @@ app.use((req, res, next) => {
 });
 
 (async () => {
-  initStatsTracker();
-  log("Stats tracker initialized");
+  const statsFilePath = join(process.cwd(), "stats-data.json");
+  await initStatsTracker(statsFilePath);
+  log("Stats tracker initialized with persistence");
 
   const pluginsDir = join(process.cwd(), "src/server/plugins");
   const pluginLoader = initPluginLoader(pluginsDir);
@@ -186,8 +187,9 @@ app.use((req, res, next) => {
     });
   });
 
-  app.get("/api/stats/visitors", (_req, res) => {
-    const chartData = getStatsTracker().getVisitorChartData();
+  app.get("/api/stats/visitors", (req, res) => {
+    const days = parseInt(req.query.days as string) || 30;
+    const chartData = getStatsTracker().getVisitorChartData(days);
 
     res.json({
       success: true,
@@ -253,13 +255,27 @@ app.use((req, res, next) => {
     },
   );
 
-  process.on('uncaughtException', (error: Error) => {
+  process.on('SIGTERM', async () => {
+    log('SIGTERM received, saving stats...', 'shutdown');
+    await getStatsTracker().shutdown();
+    process.exit(0);
+  });
+
+  process.on('SIGINT', async () => {
+    log('SIGINT received, saving stats...', 'shutdown');
+    await getStatsTracker().shutdown();
+    process.exit(0);
+  });
+
+  process.on('uncaughtException', async (error: Error) => {
     log(`Uncaught Exception: ${error.message}`, 'error');
     console.error(error.stack);
+    await getStatsTracker().shutdown();
   });
 
-  process.on('unhandledRejection', (reason: any, promise: Promise<any>) => {
+  process.on('unhandledRejection', async (reason: any, promise: Promise<any>) => {
     log(`Unhandled Rejection at: ${promise}, reason: ${reason}`, 'error');
     console.error(reason);
+    await getStatsTracker().shutdown();
   });
-})();
+})();

src/server/lib/stats-tracker.ts

@@ -1,3 +1,6 @@
+import { promises as fs } from 'fs';
+import { join } from 'path';
+
 interface EndpointStats {
   totalRequests: number;
   successRequests: number;
@@ -15,6 +18,10 @@ interface IPFailureTracking {
   resetTime: number;
 }
 
+interface DailyVisitors {
+  [date: string]: Set<string>;
+}
+
 interface GlobalStats {
   totalRequests: number;
   totalSuccess: number;
@@ -22,7 +29,17 @@ interface GlobalStats {
   uniqueVisitors: Set<string>;
   endpoints: Map<string, EndpointStats>;
   startTime: number;
-  visitorsByHour: Map<number, Set<string>>;
+  visitorsByDay: Map<string, Set<string>>;
+}
+
+interface SerializedStats {
+  totalRequests: number;
+  totalSuccess: number;
+  totalFailed: number;
+  uniqueVisitors: string[];
+  endpoints: Record<string, EndpointStats>;
+  startTime: number;
+  visitorsByDay: Record<string, string[]>;
 }
 
 class StatsTracker {
@@ -30,8 +47,11 @@ class StatsTracker {
   private ipFailures: Map<string, IPFailureTracking>;
   private readonly MAX_FAILS_PER_IP = 1;
   private readonly FAIL_WINDOW_MS = 12 * 60 * 60 * 1000;
+  private readonly STATS_FILE_PATH: string;
+  private saveTimeout: NodeJS.Timeout | null = null;
 
-  constructor() {
+  constructor(statsFilePath?: string) {
+    this.STATS_FILE_PATH = statsFilePath || join(process.cwd(), 'stats-data.json');
     this.stats = {
       totalRequests: 0,
       totalSuccess: 0,
@@ -39,7 +59,7 @@ class StatsTracker {
       uniqueVisitors: new Set(),
       endpoints: new Map(),
       startTime: Date.now(),
-      visitorsByHour: new Map(),
+      visitorsByDay: new Map(),
     };
     this.ipFailures = new Map();
     
@@ -53,6 +73,81 @@ class StatsTracker {
     }, 5 * 60 * 1000);
   }
 
+  async loadStats(): Promise<void> {
+    try {
+      const data = await fs.readFile(this.STATS_FILE_PATH, 'utf-8');
+      const parsed: SerializedStats = JSON.parse(data);
+
+      this.stats.totalRequests = parsed.totalRequests || 0;
+      this.stats.totalSuccess = parsed.totalSuccess || 0;
+      this.stats.totalFailed = parsed.totalFailed || 0;
+      this.stats.uniqueVisitors = new Set(parsed.uniqueVisitors || []);
+      this.stats.startTime = parsed.startTime || Date.now();
+      this.stats.endpoints = new Map();
+      
+      if (parsed.endpoints) {
+        Object.entries(parsed.endpoints).forEach(([endpoint, stats]) => {
+          this.stats.endpoints.set(endpoint, stats);
+        });
+      }
+
+      this.stats.visitorsByDay = new Map();
+      if (parsed.visitorsByDay) {
+        Object.entries(parsed.visitorsByDay).forEach(([date, ips]) => {
+          this.stats.visitorsByDay.set(date, new Set(ips));
+        });
+      }
+
+      console.log('Stats loaded successfully from', this.STATS_FILE_PATH);
+    } catch (error: any) {
+      if (error.code === 'ENOENT') {
+        console.log('No existing stats file found, starting fresh');
+      } else {
+        console.error('Error loading stats:', error);
+      }
+    }
+  }
+
+  private async saveStats(): Promise<void> {
+    try {
+      const serialized: SerializedStats = {
+        totalRequests: this.stats.totalRequests,
+        totalSuccess: this.stats.totalSuccess,
+        totalFailed: this.stats.totalFailed,
+        uniqueVisitors: Array.from(this.stats.uniqueVisitors),
+        startTime: this.stats.startTime,
+        endpoints: {},
+        visitorsByDay: {},
+      };
+
+      this.stats.endpoints.forEach((stats, endpoint) => {
+        serialized.endpoints[endpoint] = stats;
+      });
+
+      this.stats.visitorsByDay.forEach((ips, date) => {
+        serialized.visitorsByDay[date] = Array.from(ips);
+      });
+
+      await fs.writeFile(
+        this.STATS_FILE_PATH,
+        JSON.stringify(serialized, null, 2),
+        'utf-8'
+      );
+    } catch (error) {
+      console.error('Error saving stats:', error);
+    }
+  }
+
+  private scheduleSave(): void {
+    if (this.saveTimeout) {
+      clearTimeout(this.saveTimeout);
+    }
+
+    this.saveTimeout = setTimeout(() => {
+      this.saveStats();
+    }, 5000);
+  }
+
   trackRequest(endpoint: string, statusCode: number, clientIp: string): boolean {
     const now = Date.now();
     
@@ -87,18 +182,11 @@ class StatsTracker {
     this.stats.totalRequests++;
     this.stats.uniqueVisitors.add(clientIp);
 
-    const currentHour = Math.floor(now / (1000 * 60 * 60));
-    if (!this.stats.visitorsByHour.has(currentHour)) {
-      this.stats.visitorsByHour.set(currentHour, new Set());
+    const dateKey = new Date(now).toISOString().split('T')[0];
+    if (!this.stats.visitorsByDay.has(dateKey)) {
+      this.stats.visitorsByDay.set(dateKey, new Set());
     }
-    this.stats.visitorsByHour.get(currentHour)!.add(clientIp);
-
-    const cutoffHour = currentHour - 24;
-    Array.from(this.stats.visitorsByHour.keys()).forEach(hour => {
-      if (hour < cutoffHour) {
-        this.stats.visitorsByHour.delete(hour);
-      }
-    });
+    this.stats.visitorsByDay.get(dateKey)!.add(clientIp);
 
     if (statusCode >= 200 && statusCode < 400) {
       this.stats.totalSuccess++;
@@ -125,6 +213,8 @@ class StatsTracker {
       endpointStats.failedRequests++;
     }
     
+    this.scheduleSave();
+    
     return true;
   }
 
@@ -152,14 +242,17 @@ class StatsTracker {
     };
   }
 
-  getVisitorChartData(): VisitorData[] {
-    const currentHour = Math.floor(Date.now() / (1000 * 60 * 60));
+  getVisitorChartData(days: number = 30): VisitorData[] {
+    const now = new Date();
     const data: VisitorData[] = [];
 
-    for (let i = 23; i >= 0; i--) {
-      const hour = currentHour - i;
-      const visitors = this.stats.visitorsByHour.get(hour);
-      const timestamp = hour * 1000 * 60 * 60;
+    for (let i = days - 1; i >= 0; i--) {
+      const date = new Date(now);
+      date.setDate(date.getDate() - i);
+      const dateKey = date.toISOString().split('T')[0];
+      
+      const visitors = this.stats.visitorsByDay.get(dateKey);
+      const timestamp = date.getTime();
       
       data.push({
         timestamp,
@@ -189,7 +282,7 @@ class StatsTracker {
       .slice(0, limit);
   }
 
-  reset() {
+  async reset() {
     this.stats = {
       totalRequests: 0,
       totalSuccess: 0,
@@ -197,16 +290,25 @@ class StatsTracker {
       uniqueVisitors: new Set(),
       endpoints: new Map(),
       startTime: Date.now(),
-      visitorsByHour: new Map(),
+      visitorsByDay: new Map(),
     };
     this.ipFailures.clear();
+    await this.saveStats();
+  }
+
+  async shutdown(): Promise<void> {
+    if (this.saveTimeout) {
+      clearTimeout(this.saveTimeout);
+    }
+    await this.saveStats();
   }
 }
 
 let statsTracker: StatsTracker;
 
-export function initStatsTracker() {
-  statsTracker = new StatsTracker();
+export async function initStatsTracker(statsFilePath?: string) {
+  statsTracker = new StatsTracker(statsFilePath);
+  await statsTracker.loadStats();
   return statsTracker;
 }