183 lines
8.3 KiB
TypeScript
183 lines
8.3 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import { useRouter } from 'next/navigation'
|
|
import { useQuery } from '@tanstack/react-query'
|
|
import { monitorAPI } from '@/lib/api'
|
|
import { toast } from 'sonner'
|
|
import { DashboardLayout } from '@/components/layout/dashboard-layout'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Card, CardContent } from '@/components/ui/card'
|
|
import { Badge } from '@/components/ui/badge'
|
|
|
|
export default function DashboardPage() {
|
|
const router = useRouter()
|
|
|
|
const { data, isLoading } = useQuery({
|
|
queryKey: ['monitors'],
|
|
queryFn: async () => {
|
|
const response = await monitorAPI.list()
|
|
return response.monitors
|
|
},
|
|
})
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<DashboardLayout title="Dashboard" description="Overview of your monitors">
|
|
<div className="flex items-center justify-center py-12">
|
|
<div className="flex flex-col items-center gap-3">
|
|
<div className="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent" />
|
|
<p className="text-muted-foreground">Loading...</p>
|
|
</div>
|
|
</div>
|
|
</DashboardLayout>
|
|
)
|
|
}
|
|
|
|
const monitors = data || []
|
|
const activeMonitors = monitors.filter((m: any) => m.status === 'active').length
|
|
const errorMonitors = monitors.filter((m: any) => m.status === 'error').length
|
|
const recentChanges = monitors.filter((m: any) => m.last_change_at).length
|
|
|
|
return (
|
|
<DashboardLayout title="Dashboard" description="Overview of your monitoring activity">
|
|
{/* Stats Grid */}
|
|
<div className="mb-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
|
<Card>
|
|
<CardContent className="p-6">
|
|
<div className="flex items-center gap-4">
|
|
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-primary/10">
|
|
<svg className="h-6 w-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<p className="text-sm text-muted-foreground">Total Monitors</p>
|
|
<p className="text-2xl font-bold">{monitors.length}</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardContent className="p-6">
|
|
<div className="flex items-center gap-4">
|
|
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-green-100">
|
|
<svg className="h-6 w-6 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<p className="text-sm text-muted-foreground">Active</p>
|
|
<p className="text-2xl font-bold">{activeMonitors}</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardContent className="p-6">
|
|
<div className="flex items-center gap-4">
|
|
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-red-100">
|
|
<svg className="h-6 w-6 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<p className="text-sm text-muted-foreground">Errors</p>
|
|
<p className="text-2xl font-bold">{errorMonitors}</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardContent className="p-6">
|
|
<div className="flex items-center gap-4">
|
|
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-blue-100">
|
|
<svg className="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<p className="text-sm text-muted-foreground">Recent Changes</p>
|
|
<p className="text-2xl font-bold">{recentChanges}</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Quick Actions */}
|
|
<div className="mb-8">
|
|
<h2 className="mb-4 text-lg font-semibold">Quick Actions</h2>
|
|
<div className="flex flex-wrap gap-3">
|
|
<Button onClick={() => router.push('/monitors')}>
|
|
<svg className="mr-2 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
|
|
</svg>
|
|
Add Monitor
|
|
</Button>
|
|
<Button variant="outline" onClick={() => router.push('/incidents')}>
|
|
View Incidents
|
|
</Button>
|
|
<Button variant="outline" onClick={() => router.push('/analytics')}>
|
|
View Analytics
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Recent Monitors */}
|
|
<div>
|
|
<div className="mb-4 flex items-center justify-between">
|
|
<h2 className="text-lg font-semibold">Recent Monitors</h2>
|
|
<Button variant="ghost" size="sm" onClick={() => router.push('/monitors')}>
|
|
View All →
|
|
</Button>
|
|
</div>
|
|
|
|
{monitors.length === 0 ? (
|
|
<Card className="text-center">
|
|
<CardContent className="py-12">
|
|
<div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-primary/10">
|
|
<svg className="h-8 w-8 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
|
|
</svg>
|
|
</div>
|
|
<h3 className="mb-2 text-lg font-semibold">No monitors yet</h3>
|
|
<p className="mb-6 text-muted-foreground">
|
|
Start monitoring your first website
|
|
</p>
|
|
<Button onClick={() => router.push('/monitors')}>
|
|
Create Your First Monitor
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
) : (
|
|
<div className="space-y-3">
|
|
{monitors.slice(0, 5).map((monitor: any) => (
|
|
<Card key={monitor.id} hover onClick={() => router.push(`/monitors/${monitor.id}`)}>
|
|
<CardContent className="p-4">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<div className={`status-dot ${monitor.status === 'active' ? 'status-dot-success' : monitor.status === 'error' ? 'status-dot-error' : 'status-dot-neutral'}`} />
|
|
<div>
|
|
<h3 className="font-medium">{monitor.name || monitor.url}</h3>
|
|
<p className="text-sm text-muted-foreground truncate max-w-md">{monitor.url}</p>
|
|
</div>
|
|
</div>
|
|
<Badge variant={monitor.status === 'active' ? 'success' : monitor.status === 'error' ? 'destructive' : 'secondary'}>
|
|
{monitor.status}
|
|
</Badge>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</DashboardLayout>
|
|
)
|
|
}
|