pelase fix nothing is wokring in this setting page 
"""
'use client'

import { useState, useEffect } from 'react'
import { z } from 'zod'
import { motion, AnimatePresence } from 'framer-motion'
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, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { toast } from "../hooks/use-toast"
import { AlertCircle, CheckCircle2, Trash2, Plus, Save, RefreshCw, Settings2 } from 'lucide-react'
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
import { Progress } from "@/components/ui/progress"
import { userService } from '../app/services/user.service'
import { User, userSchema } from '../app/types/api.types'

export default function Component() {
  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)

  useEffect(() => {
    const fetchSettings = async () => {
      try {
        const userData = await userService.getSettings()
        setUser(userData)
        setIsMonitoring(userData.verified)
      } catch (error: any) {
        toast({
          title: "Error",
          description: error.message || "Failed to load settings.",
          variant: "destructive",
          duration: 5000,
        })
      } finally {
        setIsLoading(false)
      }
    }

    fetchSettings()
  }, [])

  const validateForm = (): boolean => {
    try {
      userSchema.parse(user)
      setErrors({})
      return true
    } catch (error) {
      if (error instanceof z.ZodError) {
        const newErrors: Partial<Record<keyof User, string>> = {}
        error.errors.forEach((err) => {
          if (err.path[0]) {
            newErrors[err.path[0] as keyof User] = err.message
          }
        })
        setErrors(newErrors)
      }
      return false
    }
  }

  const handleUpdateSettings = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!user) return
    if (!validateForm()) return

    setIsSaving(true)
    try {
      const payload = {
        listOfUrls: user.listOfUrls,
        timePeriod: user.timePeriod,
        emailSend: user.emailSend,
      }
      const data = await userService.updateSettings(payload)
      setUser(data.user)
      toast({
        title: "Success",
        description: data.message,
        duration: 3000,
      })
    } catch (error: any) {
      toast({
        title: "Error",
        description: error.message || 'An error occurred while updating settings',
        variant: "destructive",
        duration: 5000,
      })
    } finally {
      setIsSaving(false)
    }
  }

  const handleMonitoringToggle = async () => {
    if (!user) return
    try {
      setMonitoringStatus('Updating...')
      if (isMonitoring) {
        await userService.stopMonitoring()
        setIsMonitoring(false)
        toast({
          title: "Monitoring Stopped",
          description: "Your monitoring has been stopped.",
          duration: 3000,
        })
      } else {
        await userService.startMonitoring()
        setIsMonitoring(true)
        toast({
          title: "Monitoring Started",
          description: "Your monitoring has been started.",
          duration: 3000,
        })
      }
    } catch (error: any) {
      toast({
        title: "Error",
        description: error.message || "An error occurred while updating monitoring status",
        variant: "destructive",
        duration: 5000,
      })
    } finally {
      setMonitoringStatus('')
    }
  }

  const handleUrlChange = (index: number, value: string) => {
    if (!user) return
    const newUrls = [...user.listOfUrls]
    newUrls[index] = value
    setUser({ ...user, listOfUrls: newUrls })
  }

  const addUrl = () => {
    if (!user) return
    setUser({ ...user, listOfUrls: [...user.listOfUrls, ''] })
  }

  const removeUrl = (index: number) => {
    if (!user) return
    const newUrls = user.listOfUrls.filter((_, i) => i !== index)
    setUser({ ...user, listOfUrls: newUrls })
  }

  const resetSettings = () => {
    setUser({
      id: '',
      username: '',
      email: '',
      listOfUrls: [],
      timePeriod: '5m',
      emailSend: false,
      verified: false,
    })
    setShowResetDialog(false)
    toast({
      title: "Settings Reset",
      description: "Your settings have been reset to default values.",
      duration: 3000,
    })
  }

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

  return (
    <div className="container mx-auto py-8 px-4 md:px-0">
      <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-gray-500" />
      </motion.div>

      <form onSubmit={handleUpdateSettings} className="space-y-8">
        <Card className="overflow-hidden">
          <CardHeader className="bg-gradient-to-r from-blue-500 to-purple-600 text-white">
            <CardTitle className="text-2xl">Monitoring Settings</CardTitle>
            <CardDescription className="text-gray-100">Configure your website monitoring preferences.</CardDescription>
          </CardHeader>
          <CardContent className="p-6">
            <div className="space-y-6">
              <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)
                  }
                >
                  <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-red-500 text-sm mt-1">{errors.timePeriod}</p>
                )}
              </div>

              <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={`flex-grow ${errors.listOfUrls ? 'border-red-500' : ''}`}
                      />
                      <Button
                        type="button"
                        variant="destructive"
                        size="icon"
                        onClick={() => removeUrl(index)}
                      >
                        <Trash2 className="h-4 w-4" />
                      </Button>
                    </motion.div>
                  ))}
                </AnimatePresence>
                {errors.listOfUrls && (
                  <p className="text-red-500 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>

        <Card>
          <CardHeader>
            <CardTitle className="text-2xl">Account Information</CardTitle>
            <CardDescription>Manage your account details and preferences.</CardDescription>
          </CardHeader>
          <CardContent className="p-6 space-y-4">
            <div>
              <Label className="text-lg font-semibold mb-2 block">Username</Label>
              <Input
                value={user?.username}
                disabled
                className="bg-gray-100"
              />
            </div>

            <div>
              <Label className="text-lg font-semibold mb-2 block">Email</Label>
              <Input
                value={user?.email}
                disabled
                className="bg-gray-100"
              />
            </div>

            <div className="flex items-center space-x-4">
              <Switch
                id="email-notifications"
                checked={user?.emailSend || false}
                onCheckedChange={(checked) =>
                  setUser(prev => prev ? { ...prev, emailSend: checked } : prev)
                }
              />
              <Label htmlFor="email-notifications" className="text-lg select-none">
                Receive email notifications
              </Label>
            </div>
            {errors.emailSend && (
              <p className="text-red-500 text-sm mt-1">{errors.emailSend}</p>
            )}
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle className="text-2xl">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}
                />
                <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>
            )}
          </CardContent>
        </Card>

        <div className="flex justify-between items-center">
          <Button
            type="button"
            variant="outline"
            onClick={() => setShowResetDialog(true)}
            className="border-red-500 text-red-500 hover:bg-red-50"
          >
            Reset to Defaults
          </Button>

          <Button type="submit" disabled={isSaving} 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>
        </div>
      </form>

      <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>
  )
}
"""
"""
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),
});

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;
  }
  
"""
"""
// app/settings/page.tsx

import SettingsComponent from '@/components/SettingsComponent';

export default function SettingsPage() {
  return (
    <div className="container mx-auto p-4">
      <SettingsComponent />
    </div>
  );
}

"""
"""
// services/user.service.ts

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

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

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

interface MonitoringResponse {
  message: string;
}

export const userService = {
  getSettings: async (): Promise<User> => {
    const response = await api.get<User>('/user/settings');
    return response.data;
  },

  updateSettings: async (payload: UpdateSettingsPayload): Promise<UpdateSettingsResponse> => {
    const response = await api.put<UpdateSettingsResponse>('/user/settings', payload);
    return response.data;
  },

  startMonitoring: async (): Promise<MonitoringResponse> => {
    const response = await api.post<MonitoringResponse>('/user/monitor/start');
    return response.data;
  },

  stopMonitoring: async (): Promise<MonitoringResponse> => {
    const response = await api.post<MonitoringResponse>('/user/monitor/stop');
    return response.data;
  },
};