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: () => (




),
ssr: false
}
);
const SettingsComponent = dynamic(
() => import('@/components/SettingsComponent'),
{
loading: () =>

Loading settings...
,
ssr: false
}
);
// Error fallback component
function ErrorFallback({ error, resetErrorBoundary }: any) {
return (



Something went wrong

{error.message}


Try again

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




Loading...

Setting up your dashboard




);
}
if (!isAuthenticated) {
return (




Access Denied

Please log in to continue


<Button onClick={() => router.push('/login')}>Go to Login


);
}
return (


{/* Sidebar */}
<aside className={${isSidebarOpen ? 'w-64' : 'w-20'} bg-background border-r transition-all duration-300 flex flex-col}>


{isSidebarOpen && Not1fy}

    <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('day');
const [isLoading, setIsLoading] = useState(true);
const [isRealtime, setIsRealtime] = useState(false);
const [urlFilter, setUrlFilter] = useState('');
const [statusCodeFilter, setStatusCodeFilter] = useState('');
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 ;
}

return (


{/* Header */}

Advanced Analytics Dashboard




  {/* 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 = ({ data }) => (




URL
Status Code
Checked At
Response Time



{data.map((issue, index) => (

{issue.url}

= 500 ? "destructive" : "secondary"}>
{issue.statusCode}


{new Date(issue.checkedAt).toLocaleString()}
{issue.responseTime}

))}




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



i am using nextjs ts tailwind app routing