i want the recent issies to be pushed to the notification instead of shoing it in the table make it good and solid and beaitifull 

"""

"""

"use client";

import React, { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import dynamic from 'next/dynamic';
import { ErrorBoundary } from 'react-error-boundary';
import { 
  LayoutDashboard, Settings, LogOut, Bell, Search, Menu, 
  Command, ChevronDown, ActivitySquare, Database, Shield
} from 'lucide-react';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Input } from "@/components/ui/input";
import { Badge } from "@/components/ui/badge";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Separator } from "@/components/ui/separator";
import { Button } from "@/components/ui/button";

// Dynamically import heavy components with loading fallbacks
const AdvancedAnalyticsDashboard = dynamic(
  () => import('@/components/AdvancedAnalyticsDashboard'),
  {
    loading: () => (
      <div className="flex items-center justify-center h-full">
        <ActivitySquare className="w-8 h-8 text-primary animate-spin" />
      </div>
    ),
    ssr: false
  }
);

const SettingsComponent = dynamic(
  () => import('@/components/SettingsComponent'),
  {
    loading: () => <div className="p-4">Loading settings...</div>,
    ssr: false
  }
);

// Error fallback component
function ErrorFallback({ error, resetErrorBoundary }: any) {
  return (
    <div className="flex flex-col items-center justify-center h-full p-4">
      <Shield className="w-12 h-12 text-destructive mb-4" />
      <h2 className="text-xl font-semibold mb-2">Something went wrong</h2>
      <p className="text-muted-foreground mb-4">{error.message}</p>
      <Button onClick={resetErrorBoundary}>Try again</Button>
    </div>
  );
}

export default function Home() {
  const [activeView, setActiveView] = useState('dashboard');
  const [username, setUsername] = useState('');
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  const [isSidebarOpen, setIsSidebarOpen] = useState(true);
  const [isLoading, setIsLoading] = useState(true);
  const [notifications, setNotifications] = useState([
    { id: 1, text: "System update scheduled", time: "5m ago" },
    { id: 2, text: "New alert detected", time: "10m ago" },
    { id: 3, text: "Backup completed", time: "1h ago" }
  ]);
  
  const router = useRouter();

  useEffect(() => {
    try {
      const token = localStorage.getItem('token');
      if (!token) {
        router.push('/login');
        return;
      }
      
      setUsername("Durgesh Kumar");
      setIsAuthenticated(true);
    } catch (error) {
      console.error('Authentication error:', error);
      router.push('/login');
    } finally {
      setIsLoading(false);
    }
  }, [router]);

  const handleLogout = () => {
    try {
      localStorage.removeItem('token');
      setIsAuthenticated(false);
      router.push('/login');
    } catch (error) {
      console.error('Logout error:', error);
    }
  };

  const menuItems = [
    { icon: LayoutDashboard, label: 'Dashboard', id: 'dashboard' },
    { icon: Database, label: 'Analytics', id: 'analytics' },
    { icon: ActivitySquare, label: 'Monitoring', id: 'monitoring' },
    { icon: Shield, label: 'Security', id: 'security' },
    { icon: Settings, label: 'Settings', id: 'settings' },
  ];

  if (isLoading) {
    return (
      <div className="flex items-center justify-center h-screen bg-gradient-to-r from-blue-500/10 to-purple-500/10">
        <div className="p-8 rounded-lg bg-background shadow-xl">
          <ActivitySquare className="w-12 h-12 text-primary mb-4 animate-spin" />
          <h1 className="text-2xl font-bold mb-2">Loading...</h1>
          <p className="text-muted-foreground">Setting up your dashboard</p>
        </div>
      </div>
    );
  }

  if (!isAuthenticated) {
    return (
      <div className="flex items-center justify-center h-screen bg-gradient-to-r from-blue-500/10 to-purple-500/10">
        <div className="p-8 rounded-lg bg-background shadow-xl">
          <Shield className="w-12 h-12 text-destructive mb-4" />
          <h1 className="text-2xl font-bold mb-2">Access Denied</h1>
          <p className="text-muted-foreground mb-4">Please log in to continue</p>
          <Button onClick={() => router.push('/login')}>Go to Login</Button>
        </div>
      </div>
    );
  }

  return (
    <div className="flex h-screen bg-background">
      {/* Sidebar */}
      <aside className={`${isSidebarOpen ? 'w-64' : 'w-20'} bg-background border-r transition-all duration-300 flex flex-col`}>
        <div className="p-6 flex items-center gap-3">
          <Command className="h-6 w-6 text-primary" />
          {isSidebarOpen && <span className="font-bold text-xl">Not1fy</span>}
        </div>

        <ScrollArea className="flex-1 py-4">
          {menuItems.map((item) => (
            <button
              key={item.id}
              onClick={() => setActiveView(item.id)}
              className={`w-full flex items-center gap-3 px-6 py-3 transition-colors
                ${activeView === item.id ? 'bg-primary/10 text-primary' : 'hover:bg-muted'}
                ${!isSidebarOpen && 'justify-center'}`}
            >
              <item.icon className="h-5 w-5" />
              {isSidebarOpen && <span>{item.label}</span>}
            </button>
          ))}
        </ScrollArea>

        <div className="p-4 border-t">
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="ghost" className="w-full flex items-center gap-2">
                <Avatar className="h-8 w-8">
                  <AvatarImage src="/avatar.png" alt={username} />
                  <AvatarFallback>
                    {username.split(' ').map(n => n[0]).join('')}
                  </AvatarFallback>
                </Avatar>
                {isSidebarOpen && (
                  <>
                    <div className="flex-1 text-left">
                      <p className="text-sm font-medium">{username}</p>
                      <p className="text-xs text-muted-foreground">Admin</p>
                    </div>
                    <ChevronDown className="h-4 w-4 text-muted-foreground" />
                  </>
                )}
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end" className="w-56">
              <DropdownMenuLabel>My Account</DropdownMenuLabel>
              <DropdownMenuSeparator />
              <DropdownMenuItem>Profile</DropdownMenuItem>
              <DropdownMenuItem>Settings</DropdownMenuItem>
              <DropdownMenuSeparator />
              <DropdownMenuItem onClick={handleLogout} className="text-destructive">
                <LogOut className="mr-2 h-4 w-4" /> Logout
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
      </aside>

      {/* Main Content */}
      <div className="flex-1 flex flex-col overflow-hidden">
        <header className="h-16 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
          <div className="h-full flex items-center justify-between px-6">
            <div className="flex items-center gap-4">
              <Button
                variant="ghost"
                size="icon"
                onClick={() => setIsSidebarOpen(!isSidebarOpen)}
              >
                <Menu className="h-5 w-5" />
              </Button>
              <div className="w-64">
                <Input
                  placeholder="Search..."
                  className="w-full"
                  prefix={<Search className="h-4 w-4 text-muted-foreground" />}
                />
              </div>
            </div>

            <div className="flex items-center gap-4">
              <DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <Button variant="ghost" size="icon" className="relative">
                    <Bell className="h-5 w-5" />
                    {notifications.length > 0 && (
                      <Badge className="absolute -top-1 -right-1 h-5 w-5 flex items-center justify-center">
                        {notifications.length}
                      </Badge>
                    )}
                  </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent align="end" className="w-80">
                  <DropdownMenuLabel>Notifications</DropdownMenuLabel>
                  <DropdownMenuSeparator />
                  {notifications.length > 0 ? (
                    notifications.map((notif) => (
                      <DropdownMenuItem key={notif.id} className="flex flex-col items-start">
                        <p>{notif.text}</p>
                        <span className="text-xs text-muted-foreground">{notif.time}</span>
                      </DropdownMenuItem>
                    ))
                  ) : (
                    <div className="p-4 text-center text-muted-foreground">
                      No new notifications
                    </div>
                  )}
                </DropdownMenuContent>
              </DropdownMenu>

              <Separator orientation="vertical" className="h-8" />

              <Button variant="default" className="gap-2">
                <Shield className="h-4 w-4" />
                Upgrade Pro
              </Button>
            </div>
          </div>
        </header>

        <main className="flex-1 overflow-auto bg-muted/20">
          <ErrorBoundary FallbackComponent={ErrorFallback}>
            {activeView === 'dashboard' && <AdvancedAnalyticsDashboard />}
            {activeView === 'settings' && <SettingsComponent />}
            {!['dashboard', 'settings'].includes(activeView) && (
              <div className="flex items-center justify-center h-full">
                <div className="text-center">
                  <h2 className="text-xl font-semibold mb-2">Coming Soon</h2>
                  <p className="text-muted-foreground">This feature is under development</p>
                </div>
              </div>
            )}
          </ErrorBoundary>
        </main>
      </div>
    </div>
  );
}
"""
"""
// src/components/AdvancedAnalyticsDashboard.tsx

'use client';

import React, { useState, useEffect, useMemo, useCallback } from 'react';
import StatisticsCards from './StatisticsCards';
import Filters from './Filters';
import ChecksOverTimeChart from './Charts/ChecksOverTimeChart';
import StatusCodeDistributionChart from './Charts/StatusCodeDistributionChart';
import UptimePerUrlChart from './Charts/UptimePerUrlChart';
import ResponseTimeDistributionChart from './Charts/ResponseTimeDistributionChart';
import TopSlowestUrlsTable from './Tables/TopSlowestUrlsTable';
import RecentIssuesTable from './Tables/RecentIssuesTable';
import LoadingIndicator from './LoadingIndicator';
import { useToast } from "../hooks/use-toast";
import { Button } from "@/components/ui/button";
import { RefreshCw, Loader2 } from 'lucide-react';
import { DateRange } from 'react-day-picker';
import { analyticsService } from '../app/services/analytics.service';
import { AnalyticsData } from '../app/types/api.types';
import { Switch } from "@/components/ui/switch";
import { Label } from "@/components/ui/label";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

const AdvancedAnalyticsDashboard: React.FC = () => {
  // State
  const [analytics, setAnalytics] = useState<AnalyticsData | null>(null);
  const [dateRange, setDateRange] = useState<DateRange | undefined>({
    from: new Date(new Date().setDate(new Date().getDate() - 30)),
    to: new Date(),
  });
  const [groupBy, setGroupBy] = useState<string>('day');
  const [isLoading, setIsLoading] = useState<boolean>(true);
  const [isRealtime, setIsRealtime] = useState<boolean>(false);
  const [urlFilter, setUrlFilter] = useState<string>('');
  const [statusCodeFilter, setStatusCodeFilter] = useState<string>('');
  const [responseTimeRange, setResponseTimeRange] = useState<number[]>([0, 5000]);
  const { toast } = useToast();

  const mapDateRange = (
    range: DateRange | undefined
  ): import('../app/types/api.types').DateRange | undefined => {
    if (!range) return undefined;
    return {
      from: range.from || new Date(), // Default date if undefined
      to: range.to || new Date(),
    };
  };

  // Fetch Analytics Data
  const loadAnalytics = useCallback(async () => {
    setIsLoading(true);
    try {
      const params: Record<string, any> = {};

      if (dateRange) {
        if (dateRange.from) params.startDate = dateRange.from.toISOString();
        if (dateRange.to) params.endDate = dateRange.to.toISOString();
      }

      if (urlFilter) params.urls = urlFilter;
      if (statusCodeFilter) params.statusCodes = statusCodeFilter;
      if (responseTimeRange) {
        params.minResponseTime = responseTimeRange[0];
        params.maxResponseTime = responseTimeRange[1];
      }

      params.groupBy = groupBy;

      const data = await analyticsService.getAnalytics(params);
      setAnalytics(data);
    } catch (error: any) {
      console.error('Failed to fetch analytics:', error);
      // Display a toast notification for errors other than unauthorized access
      if (error.response && error.response.status !== 401 && error.response.status !== 403) {
        toast({
          title: "Error",
          description: "Failed to fetch analytics data. Please try again.",
          variant: "destructive",
        });
      }
      // Unauthorized access is handled within the service by redirecting to login
    } finally {
      setIsLoading(false);
    }
  }, [toast, dateRange, urlFilter, statusCodeFilter, responseTimeRange, groupBy]);

  // Initial Load
  useEffect(() => {
    loadAnalytics();
  }, [loadAnalytics]);

  // Realtime Updates
  useEffect(() => {
    if (isRealtime) {
      const interval = setInterval(() => {
        loadAnalytics();
      }, 5000); // Refresh every 5 seconds in realtime mode
      return () => clearInterval(interval);
    }
  }, [isRealtime, loadAnalytics]);

  if (isLoading && !analytics) {
    return <LoadingIndicator />;
  }

  return (
    <div className="container mx-auto p-4 space-y-8">
      {/* Header */}
      <div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
        <h1 className="text-4xl font-bold">Advanced Analytics Dashboard</h1>
        <div className="flex items-center space-x-4">
          <Switch
            checked={isRealtime}
            onCheckedChange={setIsRealtime}
            id="realtime-mode"
          />
          <Label htmlFor="realtime-mode">Realtime Updates</Label>
          <Button onClick={loadAnalytics} disabled={isLoading} variant="secondary">
            {isLoading ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <RefreshCw className="mr-2 h-4 w-4" />}
            Refresh Data
          </Button>
        </div>
      </div>

      {/* Statistics Cards */}
      {analytics && <StatisticsCards analytics={analytics} />}

      {/* Filters */}
      <Filters
        dateRange={mapDateRange(dateRange)} // Apply mapping here
        setDateRange={(range) => setDateRange(range)}
        groupBy={groupBy}
        setGroupBy={setGroupBy}
        urlFilter={urlFilter}
        setUrlFilter={setUrlFilter}
        statusCodeFilter={statusCodeFilter}
        setStatusCodeFilter={setStatusCodeFilter}
        responseTimeRange={responseTimeRange}
        setResponseTimeRange={setResponseTimeRange}
      />

      {/* Charts and Tables */}
      <div className="space-y-8">
        {/* Checks Over Time */}
        <Card>
          <CardHeader>
            <CardTitle>Checks Over Time</CardTitle>
          </CardHeader>
          <CardContent className="h-[400px]">
            {analytics && <ChecksOverTimeChart data={analytics.checksOverTime} />}
          </CardContent>
        </Card>

        {/* Status Code Distribution and Uptime Per URL */}
        <div className="grid gap-4 md:grid-cols-2">
          <Card>
            <CardHeader>
              <CardTitle>Status Code Distribution</CardTitle>
            </CardHeader>
            <CardContent className="h-[300px]">
              {analytics && <StatusCodeDistributionChart data={analytics.statusCodeDistribution} />}
            </CardContent>
          </Card>
          <Card>
            <CardHeader>
              <CardTitle>Uptime Per URL</CardTitle>
            </CardHeader>
            <CardContent className="h-[300px]">
              {analytics && <UptimePerUrlChart data={analytics.uptimePerUrl} />}
            </CardContent>
          </Card>
        </div>

        {/* Response Time Distribution */}
        <Card>
          <CardHeader>
            <CardTitle>Response Time Distribution</CardTitle>
          </CardHeader>
          <CardContent className="h-[400px]">
            {analytics && <ResponseTimeDistributionChart data={analytics.responseTimeDistribution} />}
          </CardContent>
        </Card>

        {/* Top Slowest URLs */}
        <Card>
          <CardHeader>
            <CardTitle>Top Slowest URLs</CardTitle>
          </CardHeader>
          <CardContent>
            {analytics && <TopSlowestUrlsTable data={analytics.topSlowestUrls} />}
          </CardContent>
        </Card>

        {/* Recent Issues */}
        <Card>
          <CardHeader>
            <CardTitle>Recent Issues</CardTitle>
          </CardHeader>
          <CardContent>
            {analytics && <RecentIssuesTable data={analytics.recentIssues} />}
          </CardContent>
        </Card>
      </div>
    </div>
  );
};

export default AdvancedAnalyticsDashboard;
"""
"""
// components/Tables/RecentIssuesTable.tsx

import React from 'react';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Badge } from "@/components/ui/badge";
import { ScrollArea } from "@/components/ui/scroll-area";
import { RecentIssue } from '../../app/types/api.types';

interface RecentIssuesTableProps {
  data: RecentIssue[];
}

const RecentIssuesTable: React.FC<RecentIssuesTableProps> = ({ data }) => (
  <ScrollArea className="h-96">
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>URL</TableHead>
          <TableHead>Status Code</TableHead>
          <TableHead>Checked At</TableHead>
          <TableHead>Response Time</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {data.map((issue, index) => (
          <TableRow key={index}>
            <TableCell className="font-medium">{issue.url}</TableCell>
            <TableCell>
            <Badge variant={issue.statusCode >= 500 ? "destructive" : "secondary"}>
                {issue.statusCode}
            </Badge>
            </TableCell>
            <TableCell>{new Date(issue.checkedAt).toLocaleString()}</TableCell>
            <TableCell>{issue.responseTime}</TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  </ScrollArea>
);

export default React.memo(RecentIssuesTable);

"""
make it good and nice remoe the recent isisue tabel and push the recent issues to the notifcation and porpely functioning wiht number s and stuff