cna you ensire proepr syncronization across all cases like frist load after save like the omiintoring is not being syncronized and has many bugs acrros correct everything wokring perfectly and covers all cases "
"""
// src/services/userService.ts

import api from './api';
import { User, AnalyticsData } from '../types/api.types';
import { authService } from './auth.service';

interface UpdateSettingsPayload {
  listOfUrls: string[];
  timePeriod: User['timePeriod'];
  emailSend: boolean;
}

interface UpdateSettingsResponse {
  message: string;
  user: User;
}

interface MonitoringResponse {
  message: string;
}

export const userService = {
  /**
   * Fetches the current user's settings from the server.
   * @returns {Promise<User>} The user settings.
   * @throws Will throw an error if the token is missing or the request fails.
   */
  getSettings: async (): Promise<User> => {
    const token = authService.getToken();

    if (!token) {
      authService.logout();
      throw new Error('Authentication token not found. Please log in again.');
    }

    try {
      const response = await api.get<User>('/user/settings', {
        headers: {
          Authorization: `Bearer ${token}`,
        },
      });
      return response.data;
    } catch (error: any) {
      if (error.response && [401, 403].includes(error.response.status)) {
        authService.logout();
      }
      throw new Error(error.response?.data?.message || 'Failed to fetch settings.');
    }
  },

  /**
   * Updates the user's settings on the server.
   * @param {UpdateSettingsPayload} payload The settings to update.
   * @returns {Promise<UpdateSettingsResponse>} The response containing a message and the updated user.
   * @throws Will throw an error if the token is missing or the request fails.
   */
  updateSettings: async (payload: UpdateSettingsPayload): Promise<UpdateSettingsResponse> => {
    const token = authService.getToken();

    if (!token) {
      authService.logout();
      throw new Error('Authentication token not found. Please log in again.');
    }

    try {
      const response = await api.put<UpdateSettingsResponse>('/user/settings', payload, {
        headers: {
          Authorization: `Bearer ${token}`,
        },
      });
      return response.data;
    } catch (error: any) {
      if (error.response && [401, 403].includes(error.response.status)) {
        authService.logout();
      }
      throw new Error(error.response?.data?.message || 'Failed to update settings.');
    }
  },

  /**
   * Starts the website monitoring service for the user.
   * @returns {Promise<MonitoringResponse>} The response message.
   * @throws Will throw an error if the token is missing or the request fails.
   */
  startMonitoring: async (): Promise<MonitoringResponse> => {
    const token = authService.getToken();

    if (!token) {
      authService.logout();
      throw new Error('Authentication token not found. Please log in again.');
    }

    try {
      const response = await api.get<MonitoringResponse>('/user/monitor/start', {
        headers: {
          Authorization: `Bearer ${token}`,
        },
      });
      return response.data;
    } catch (error: any) {
      if (error.response && [401, 403].includes(error.response.status)) {
        authService.logout();
      }
      throw new Error(error.response?.data?.message || 'Failed to start monitoring.');
    }
  },

  /**
   * Stops the website monitoring service for the user.
   * @returns {Promise<MonitoringResponse>} The response message.
   * @throws Will throw an error if the token is missing or the request fails.
   */
  stopMonitoring: async (): Promise<MonitoringResponse> => {
    const token = authService.getToken();

    if (!token) {
      authService.logout();
      throw new Error('Authentication token not found. Please log in again.');
    }

    try {
      const response = await api.get<MonitoringResponse>('/user/monitor/stop',{
        headers: {
          Authorization: `Bearer ${token}`,
        },
      });
      return response.data;
    } catch (error: any) {
      if (error.response && [401, 403].includes(error.response.status)) {
        authService.logout();
      }
      throw new Error(error.response?.data?.message || 'Failed to stop monitoring.');
    }
  },
};
"""
"""
// src/components/SettingsPage.tsx

'use client';

import { useState, useEffect, useCallback } from 'react';
import { z } from 'zod';
import { motion, AnimatePresence } from 'framer-motion';
import { useRouter } from 'next/navigation';
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { useToast } from "../hooks/use-toast";
import { 
  AlertCircle, 
  CheckCircle2, 
  Trash2, 
  Plus, 
  Save, 
  RefreshCw, 
  Settings2, 
  Mail, 
  Globe, 
  Clock, 
  Bell 
} from 'lucide-react';
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { Progress } from "@/components/ui/progress";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import { userService } from '../app/services/user.service';
import { User } from '../app/types/api.types';


export default function SettingsComponent() {
  const [user, setUser] = useState<User | null>(null);
  const [isMonitoring, setIsMonitoring] = useState<boolean>(false);
  const [monitoringStatus, setMonitoringStatus] = useState<string>('');
  const [errors, setErrors] = useState<Partial<Record<keyof User, string>>>({});
  const [isSaving, setIsSaving] = useState<boolean>(false);
  const [showResetDialog, setShowResetDialog] = useState<boolean>(false);
  const [isLoading, setIsLoading] = useState<boolean>(true);
  const [hasUnsavedChanges, setHasUnsavedChanges] = useState<boolean>(false);
  const { toast } = useToast();
  const router = useRouter();

  // Validate and define a specific schema for updating settings
  const updateSchema = z.object({
    listOfUrls: z.array(z.string().url("Invalid URL format")).min(1, "At least one valid URL is required"),
    timePeriod: z.enum(['30s', '1m', '3m', '5m', '10m', '1h']),
    emailSend: z.boolean(),
  });

  // Fetch user settings on component mount
  useEffect(() => {
    const fetchSettings = async () => {
      try {
        setIsLoading(true);
        const userData = await userService.getSettings();
        setUser(userData);
        setIsMonitoring(userData.isMonitoring); // Correctly set monitoring status
        setHasUnsavedChanges(false);
        console.log("Fetched user settings:", userData); // Debug log
      } catch (error: any) {
        console.error('Error fetching settings:', error);
        toast({
          title: "Error Loading Settings",
          description: error.message || "Failed to load settings. Please try again.",
          variant: "destructive",
        });
      } finally {
        setIsLoading(false);
      }
    };

    fetchSettings();
  }, [toast]);

  // URL validation helper
  const validateUrl = (url: string): boolean => {
    try {
      new URL(url);
      return true;
    } catch {
      return false;
    }
  };

  // Form Validation using Zod
  const validateForm = useCallback((): boolean => {
    if (!user) return false;

    try {
      // Create a payload object with only the fields we want to validate
      const validationPayload = {
        listOfUrls: user.listOfUrls,
        timePeriod: user.timePeriod,
        emailSend: user.emailSend,
      };

      updateSchema.parse(validationPayload);
      setErrors({});
      return true;
    } catch (error: any) { // Ensure 'error' has type 'any'
      if (error instanceof z.ZodError) {
        const newErrors: Partial<Record<keyof User, string>> = {};
        error.errors.forEach((err) => {
          const field = err.path[0] as keyof User;
          if (field) {
            newErrors[field] = err.message;
          }
        });
        setErrors(newErrors);
      }
      return false;
    }
  }, [user]);

  // Warn user about unsaved changes when attempting to leave the page
  useEffect(() => {
    const handleBeforeUnload = (e: BeforeUnloadEvent) => {
      if (hasUnsavedChanges) {
        e.preventDefault();
        e.returnValue = '';
      }
    };

    window.addEventListener('beforeunload', handleBeforeUnload);
    return () => window.removeEventListener('beforeunload', handleBeforeUnload);
  }, [hasUnsavedChanges]);

  // Handle form submission for updating settings
  const handleUpdateSettings = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!user) return;

    // Validate form before proceeding
    if (!validateForm()) {
      toast({
        title: "Validation Error",
        description: "Please check the form for errors.",
        variant: "destructive",
      });
      return;
    }

    setIsSaving(true);
    try {
      // Create payload with only the fields we want to update
      const payload = {
        listOfUrls: user.listOfUrls,
        timePeriod: user.timePeriod,
        emailSend: user.emailSend,
      };

      const data = await userService.updateSettings(payload);
      console.log("Settings update response:", data); // Debug log

      if (data) {
        setUser(data.user);
        setHasUnsavedChanges(false); // Correctly reset unsaved changes
        toast({
          title: "Settings Updated",
          description: data.message || "Settings updated successfully",
        });
        // Optionally, you can refetch user data to ensure synchronization
        // const freshUserData = await userService.getSettings();
        // setUser(freshUserData);
        // setHasUnsavedChanges(false);
      }
    } catch (error: any) {
      console.error('Error updating settings:', error);
      toast({
        title: "Update Failed",
        description: error.message || 'Failed to update settings. Please try again.',
        variant: "destructive",
      });
    } finally {
      setIsSaving(false);
    }
  };

  // Handle monitoring toggle
  const handleMonitoringToggle = async () => {
    if (!user) return;

    const desiredState = !isMonitoring; // What the user is trying to set
    setIsMonitoring(desiredState); // Optimistically toggle
    setMonitoringStatus(desiredState ? 'Starting monitoring...' : 'Stopping monitoring...');
    // Do not set hasUnsavedChanges as this is a separate action

    try {
      if (desiredState) {
        await userService.startMonitoring();
        toast({
          title: "Monitoring Started",
          description: "Website monitoring has been activated.",
        });
      } else {
        await userService.stopMonitoring();
        toast({
          title: "Monitoring Stopped",
          description: "Website monitoring has been deactivated.",
        });
      }

      // After successful start or stop, refetch user settings to update monitoring status
      const updatedUser = await userService.getSettings();
      setUser(updatedUser);
      setIsMonitoring(updatedUser.isMonitoring);
    } catch (error: any) {
      console.error('Error toggling monitoring:', error);
      toast({
        title: "Error",
        description: error.message || "Failed to update monitoring status.",
        variant: "destructive",
      });
      // Revert the optimistic toggle
      setIsMonitoring(!desiredState);
    } finally {
      setMonitoringStatus('');
    }
  };

  // Handle URL input changes with validation
  const handleUrlChange = useCallback((index: number, value: string) => {
    if (!user) return;
    const newUrls = [...user.listOfUrls];
    newUrls[index] = value;

    // Only show error if URL is not empty and invalid
    if (value && !validateUrl(value)) {
      setErrors(prev => ({
        ...prev,
        listOfUrls: "Please enter a valid URL",
      }));
    } else {
      setErrors(prev => {
        const newErrors = { ...prev };
        delete newErrors.listOfUrls;
        return newErrors;
      });
    }

    setUser({ ...user, listOfUrls: newUrls });
    setHasUnsavedChanges(true);
  }, [user]);

  // Add a new URL field
  const addUrl = useCallback(() => {
    if (!user) return;
    setUser({ ...user, listOfUrls: [...user.listOfUrls, ''] });
    setHasUnsavedChanges(true);
  }, [user]);

  // Remove a URL field
  const removeUrl = useCallback((index: number) => {
    if (!user) return;
    const newUrls = user.listOfUrls.filter((_, i) => i !== index);
    setUser({ ...user, listOfUrls: newUrls });
    setHasUnsavedChanges(true);
  }, [user]);

  // Reset settings to default values
  const resetSettings = useCallback(() => {
    if (!user?.id) return;
    setUser({
      id: user.id,
      username: user.username,
      email: user.email,
      listOfUrls: [],
      timePeriod: '5m',
      emailSend: false,
      isMonitoring: false, // Ensure monitoring is reset
      verified: user.verified, // Keep verified as-is
    });
    setShowResetDialog(false);
    setHasUnsavedChanges(true);
    toast({
      title: "Settings Reset",
      description: "All settings have been reset to default values. Don't forget to save your changes.",
    });
    console.log("Settings reset to default values"); // Debug log
  }, [user, toast]);

  // Loading state
  if (isLoading) {
    return (
      <div className="flex justify-center items-center h-screen">
        <Progress className="w-1/2" />
      </div>
    );
  }

  // Error state
  if (!user) {
    return (
      <div className="flex flex-col items-center justify-center h-screen">
        <AlertCircle className="h-12 w-12 text-destructive mb-4" />
        <h2 className="text-2xl font-bold mb-2">Failed to Load Settings</h2>
        <p className="text-muted-foreground mb-4">Please refresh the page to try again.</p>
        <Button onClick={() => window.location.reload()}>
          <RefreshCw className="mr-2 h-4 w-4" />
          Refresh Page
        </Button>
      </div>
    );
  }

  return (
    <TooltipProvider>
      <div className="container mx-auto py-8 px-4 md:px-0 max-w-4xl">
        {/* Header */}
        <motion.div
          initial={{ opacity: 0, y: -20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5 }}
          className="flex items-center justify-between mb-8"
        >
          <h1 className="text-4xl font-bold">Account Settings</h1>
          <Settings2 className="h-8 w-8 text-primary" />
        </motion.div>

        {/* Settings Form */}
        <Tabs defaultValue="monitoring" className="space-y-8">
          <TabsList className="grid w-full grid-cols-3">
            <TabsTrigger value="monitoring">Monitoring</TabsTrigger>
            <TabsTrigger value="account">Account</TabsTrigger>
            <TabsTrigger value="notifications">Notifications</TabsTrigger>
          </TabsList>

          <form onSubmit={handleUpdateSettings}>
            {/* Monitoring Tab */}
            <TabsContent value="monitoring" className="space-y-8">
              <Card>
                <CardHeader className="bg-gradient-to-r from-primary to-primary-foreground text-primary-foreground">
                  <CardTitle className="text-2xl flex items-center">
                    <Globe className="mr-2" /> Monitoring Settings
                  </CardTitle>
                  <CardDescription className="text-primary-foreground/90">
                    Configure your website monitoring preferences.
                  </CardDescription>
                </CardHeader>
                <CardContent className="p-6">
                  <div className="space-y-6">
                    {/* Check Interval */}
                    <div>
                      <Label htmlFor="timePeriod" className="text-lg font-semibold mb-2 block">
                        Check Interval
                      </Label>
                      <Select
                        value={user.timePeriod}
                        onValueChange={(value: string) => {
                          setUser(prev => prev ? { ...prev, timePeriod: value as User['timePeriod'] } : prev);
                          setHasUnsavedChanges(true);
                        }}
                      >
                        <SelectTrigger id="timePeriod" className="w-full">
                          <SelectValue placeholder="Select interval" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="30s">Every 30 seconds</SelectItem>
                          <SelectItem value="1m">Every 1 minute</SelectItem>
                          <SelectItem value="3m">Every 3 minutes</SelectItem>
                          <SelectItem value="5m">Every 5 minutes</SelectItem>
                          <SelectItem value="10m">Every 10 minutes</SelectItem>
                          <SelectItem value="1h">Every 1 hour</SelectItem>
                        </SelectContent>
                      </Select>
                      {errors.timePeriod && (
                        <p className="text-destructive text-sm mt-1">{errors.timePeriod}</p>
                      )}
                    </div>

                    {/* URLs to Monitor */}
                    <div>
                      <Label className="text-lg font-semibold mb-2 block">URLs to Monitor</Label>
                      <AnimatePresence>
                        {user.listOfUrls.map((url, index) => (
                          <motion.div
                            key={index}
                            initial={{ opacity: 0, height: 0 }}
                            animate={{ opacity: 1, height: 'auto' }}
                            exit={{ opacity: 0, height: 0 }}
                            transition={{ duration: 0.2 }}
                            className="flex items-center space-x-2 mb-2"
                          >
                            <Input
                              value={url}
                              onChange={(e) => handleUrlChange(index, e.target.value)}
                              placeholder="https://example.com"
                              className={errors.listOfUrls ? 'border-destructive' : ''}
                            />
                            <Tooltip>
                              <TooltipTrigger asChild>
                                <Button
                                  type="button"
                                  variant="destructive"
                                  size="icon"
                                  onClick={() => removeUrl(index)}
                                  disabled={user.listOfUrls.length === 1}
                                  aria-label="Remove URL"
                                >
                                  <Trash2 className="h-4 w-4" />
                                </Button>
                              </TooltipTrigger>
                              <TooltipContent>
                                {user.listOfUrls.length === 1 
                                  ? "At least one URL is required" 
                                  : "Remove URL"
                                }
                              </TooltipContent>
                            </Tooltip>
                          </motion.div>
                        ))}
                      </AnimatePresence>
                      {errors.listOfUrls && (
                        <p className="text-destructive text-sm mt-1">{errors.listOfUrls}</p>
                      )}
                      <Button
                        type="button"
                        variant="outline"
                        size="sm"
                        onClick={addUrl}
                        className="mt-2"
                      >
                        <Plus className="mr-2 h-4 w-4" />
                        Add URL
                      </Button>
                    </div>
                  </div>
                </CardContent>
              </Card>

              {/* Monitoring Status */}
              <Card>
                <CardHeader>
                  <CardTitle className="text-2xl flex items-center">
                    <Clock className="mr-2" /> Monitoring Status
                  </CardTitle>
                  <CardDescription>Manage your website monitoring status.</CardDescription>
                </CardHeader>
                <CardContent className="p-6">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center space-x-4">
                      <Switch
                        id="monitoring-toggle"
                        checked={isMonitoring}
                        onCheckedChange={handleMonitoringToggle}
                        disabled={user.listOfUrls.length === 0}
                      />
                      <Label htmlFor="monitoring-toggle" className="text-lg select-none">
                        {isMonitoring ? 'Monitoring is Active' : 'Monitoring is Inactive'}
                      </Label>
                    </div>
                    {isMonitoring ? (
                      <CheckCircle2 className="h-6 w-6 text-green-500" />
                    ) : (
                      <AlertCircle className="h-6 w-6 text-yellow-500" />
                    )}
                  </div>
                  {monitoringStatus && (
                    <p className="text-blue-500 text-sm mt-2">{monitoringStatus}</p>
                  )}
                  {user.listOfUrls.length === 0 && (
                    <p className="text-destructive text-sm mt-2">
                      Add at least one URL to enable monitoring.
                    </p>
                  )}
                </CardContent>
              </Card>
            </TabsContent>

            {/* Account Tab */}
            <TabsContent value="account" className="space-y-8">
              <Card>
                <CardHeader>
                  <CardTitle className="text-2xl flex items-center">
                    <Mail className="mr-2" /> Account Information
                  </CardTitle>
                  <CardDescription>Manage your account details.</CardDescription>
                </CardHeader>
                <CardContent className="p-6 space-y-4">
                  {/* Username */}
                  <div>
                    <Label className="text-lg font-semibold mb-2 block">Username</Label>
                    <Tooltip>
                      <TooltipTrigger asChild>
                        <Input
                          value={user.username}
                          disabled
                          className="bg-muted cursor-not-allowed"
                        />
                      </TooltipTrigger>
                      <TooltipContent>
                        Username cannot be changed.
                      </TooltipContent>
                    </Tooltip>
                  </div>

                  {/* Email */}
                  <div>
                    <Label className="text-lg font-semibold mb-2 block">Email</Label>
                    <Tooltip>
                      <TooltipTrigger asChild>
                        <Input
                          value={user.email}
                          disabled
                          className="bg-muted cursor-not-allowed"
                        />
                      </TooltipTrigger>
                      <TooltipContent>
                        Contact support to change your email address.
                      </TooltipContent>
                    </Tooltip>
                  </div>
                </CardContent>
              </Card>
            </TabsContent>

            {/* Notifications Tab */}
            <TabsContent value="notifications" className="space-y-8">
              <Card>
                <CardHeader>
                  <CardTitle className="text-2xl flex items-center">
                    <Bell className="mr-2" /> Notification Preferences
                  </CardTitle>
                  <CardDescription>Manage how you receive notifications.</CardDescription>
                </CardHeader>
                <CardContent className="p-6">
                  <div className="flex items-center space-x-4">
                    <Switch
                      id="email-notifications"
                      checked={user.emailSend}
                      onCheckedChange={(checked) => {
                        setUser(prev => prev ? { ...prev, emailSend: checked } : prev);
                        setHasUnsavedChanges(true);
                      }}
                    />
                    <Label htmlFor="email-notifications" className="text-lg select-none">
                      Receive email notifications
                    </Label>
                  </div>
                  {errors.emailSend && (
                    <p className="text-destructive text-sm mt-1">{errors.emailSend}</p>
                  )}
                  <p className="text-sm text-muted-foreground mt-2">
                    You will receive email notifications when your monitored websites experience downtime or issues.
                  </p>
                </CardContent>
              </Card>
            </TabsContent>

            {/* Footer with Actions */}
            <div className="flex justify-between items-center mt-8">
              {/* Reset to Defaults */}
              <Tooltip>
                <TooltipTrigger asChild>
                  <Button
                    type="button"
                    variant="outline"
                    onClick={() => setShowResetDialog(true)}
                    className="border-destructive text-destructive hover:bg-destructive/10"
                  >
                    Reset to Defaults
                  </Button>
                </TooltipTrigger>
                <TooltipContent>Reset all settings to default values.</TooltipContent>
              </Tooltip>

              {/* Save Changes */}
              <div className="flex items-center gap-4">
                {hasUnsavedChanges && (
                  <span className="text-sm text-muted-foreground">
                    You have unsaved changes.
                  </span>
                )}
                <Tooltip>
                  <TooltipTrigger asChild>
                    <Button 
                      type="submit" 
                      disabled={isSaving || !hasUnsavedChanges} 
                      className="px-8"
                    >
                      {isSaving ? (
                        <>
                          <RefreshCw className="animate-spin mr-2 h-4 w-4" />
                          Saving...
                        </>
                      ) : (
                        <>
                          <Save className="mr-2 h-4 w-4" />
                          Save Changes
                        </>
                      )}
                    </Button>
                  </TooltipTrigger>
                  <TooltipContent>
                    {!hasUnsavedChanges ? 'No changes to save.' : 'Save all changes.'}
                  </TooltipContent>
                </Tooltip>
              </div>
            </div>
          </form>
        </Tabs>

        {/* Reset Confirmation Dialog */}
        <Dialog open={showResetDialog} onOpenChange={setShowResetDialog}>
          <DialogContent>
            <DialogHeader>
              <DialogTitle>Are you sure you want to reset?</DialogTitle>
              <DialogDescription>
                This action will reset all your settings to their default values. This cannot be undone.
              </DialogDescription>
            </DialogHeader>
            <DialogFooter>
              <Button variant="outline" onClick={() => setShowResetDialog(false)}>
                Cancel
              </Button>
              <Button variant="destructive" onClick={resetSettings}>
                Reset
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      </div>
    </TooltipProvider>
  );
}
"""
"""
import { z } from 'zod';

export const userSchema = z.object({
  id: z.string(),
  username: z.string().min(3).max(30),
  email: z.string().email().max(100),
  listOfUrls: z.array(z.string().url()).min(1, "At least one URL is required"),
  timePeriod: z.enum(['30s', '1m', '3m', '5m', '10m', '1h']).default('5m'),
  emailSend: z.boolean().default(false),
  verified: z.boolean().default(false),
  isMonitoring: z.boolean().default(false),
});

export type User = z.infer<typeof userSchema>;

export interface ApiError {
    message: string;
    errors?: Array<{
      field: string;
      message: string;
    }>;
  }
  
  export interface VerificationState {
    status: 'loading' | 'success' | 'error';
    message: string;
  }
  
  export interface PageProps {
    params: Promise<{ token: string }>;
  }
  
// src/types/analytics.types.ts

export interface StatusCodeDistribution {
  statusCode: number;
  count: number;
  percentage: number; // Now a number instead of a string
}

export interface UptimePerUrl {
  url: string;
  successCount: number;
  totalCount: number;
  uptimePercentage: number; // Now a number instead of a string
}

export interface ChecksOverTime {
  period: string;
  count: number;
  averageResponseTime: number; // Now a number representing milliseconds
}

export interface ResponseTimeDistribution {
  range: string;
  count: number;
  averageResponseTime: number; // Now a number representing milliseconds
}

export interface TopSlowestUrl {
  url: string;
  averageResponseTime: number; // Now a number representing milliseconds
  totalChecks: number;
}

export interface RecentIssue {
  url: string;
  statusCode: number;
  checkedAt: string; // ISO date string
  screenshotUrl?: string;
  responseTime: number; // Now a number representing milliseconds
}

export interface AnalyticsData {
  totalChecks: number;
  successfulChecks: number;
  successPercentage: number;
  failedChecks: number;
  failurePercentage: number;
  statusCodeDistribution: StatusCodeDistribution[];
  uptimePerUrl: UptimePerUrl[];
  checksOverTime: ChecksOverTime[];
  responseTimeDistribution: ResponseTimeDistribution[];
  topSlowestUrls: TopSlowestUrl[];
  recentIssues: RecentIssue[];
}
  export interface DateRange {
    from: Date;
    to: Date;
  }
  
"""
mamke it perfectly wokring across everythign and give me whole compelte code