hwy i need to do these changes in my old code the new changes are 
"""
'use client';

import { useState, useEffect, useCallback } from 'react';
import { z } from 'zod';
// ... other imports remain the same ...

export default function SettingsComponent() {
  // ... other state declarations remain the same ...

  // 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,
      };

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

      updateSchema.parse(validationPayload);
      setErrors({});
      return true;
    } catch (error) {
      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]);

  // 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);
      
      if (data) {
        setUser(data.user);
        setHasUnsavedChanges(false);
        toast({
          title: "Settings Updated",
          description: data.message || "Settings updated successfully",
        });
        router.push('/');
      }
    } 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);
    }
  };

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

  // 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]);

  // ... rest of the component remains the same ...

  return (
    // ... existing JSX remains the same ...
    // Make sure the form tag is properly closing and has onSubmit handler
    <form onSubmit={handleUpdateSettings}>
      {/* ... existing form content ... */}
    </form>
    // ... rest of the JSX ...
  );
}
""
the old code is 
"""
// 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, userSchema } from '../app/types/api.types';

const DEBOUNCE_DELAY = 500; // ms

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();

  // Fetch user settings on component mount
  useEffect(() => {
    const fetchSettings = async () => {
      try {
        setIsLoading(true);
        const userData = await userService.getSettings();
        setUser(userData);
        setIsMonitoring(userData.verified);
        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]);

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

    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) => {
          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;

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

    setIsSaving(true);
    try {
      const payload = {
        listOfUrls: user.listOfUrls,
        timePeriod: user.timePeriod,
        emailSend: user.emailSend,
      };
      console.log("Updating settings with payload:", payload); // Debug log
      const data = await userService.updateSettings(payload);
      console.log("Settings update response:", data); // Debug log
      setUser(data.user);
      setHasUnsavedChanges(false);
      toast({
        title: "Settings Updated",
        description: data.message,
      });
      // Navigate to / after successful save
      router.push('/'); // Adjusted route
      console.log("Navigated to /"); // Debug log
    } 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;

    setIsMonitoring((prev) => !prev); // Optimistically toggle
    setHasUnsavedChanges(true); // Mark as having unsaved changes

    try {
      setMonitoringStatus('Updating monitoring status...');
      if (isMonitoring) {
        const response = await userService.stopMonitoring();
        toast({
          title: "Monitoring Stopped",
          description: response.message,
        });
      } else {
        const response = await userService.startMonitoring();
        toast({
          title: "Monitoring Started",
          description: response.message,
        });
      }
      console.log("Monitoring status updated"); // Debug log
    } catch (error: any) {
      console.error('Error toggling monitoring:', error);
      toast({
        title: "Error",
        description: error.message || "Failed to update monitoring status.",
        variant: "destructive",
      });
      setIsMonitoring((prev) => !prev); // Revert toggle on error
    } finally {
      setMonitoringStatus('');
    }
  };

  // Handle URL input changes
  const handleUrlChange = useCallback((index: number, value: string) => {
    if (!user) return;
    const newUrls = [...user.listOfUrls];
    newUrls[index] = value;
    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,
      verified: false,
    });
    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>
  );
}
"""
please make it complete qnda dupadated and working and give me whoel