feat: RMM Overshell, IT Glue audit/write-back, LogLift, link-aware bundles, dashboard overhaul
- RMM Overshell (migration 077): admin page, dispatch UI, executor/worker, target resolver, script registry (AD/DHCP/DNS/event-log/services/software/network/loglift) - LogLift evidence pipeline (migration 078): upload webhook, B2 storage client, receiver/matcher, EventLogCollector PowerShell script - IT Glue audit + write-back (migrations 075, 076): asset-audit runner, ticket xrefs, applications/configurations browse pages + apply/revert/audit endpoints - Link-aware analyzer bundles (migration 073) + provider toggle (migration 074): link-discovery service, OpenRouter LLM provider, related-tickets/itglue-suggestion panels, analyze-bundle endpoint - Endpoint data model + device-link reconciliation (migrations 079, 080): conflicts admin page, reconciler service, resolve endpoints - Dashboard overhaul: integration-health service + alerts, overview/health endpoints - Permissions: add itglue + rmm scopes; middleware: public /api/rmm/loglift route Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
378e68ad8a
commit
1112a06afe
132 changed files with 21352 additions and 743 deletions
|
|
@ -2,386 +2,453 @@
|
|||
|
||||
import { useEffect, useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Progress } from '@/components/ui/progress';
|
||||
import {
|
||||
Server,
|
||||
Building2,
|
||||
Network,
|
||||
Globe,
|
||||
Smartphone,
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Skeleton } from '@/components/ui/skeleton';
|
||||
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
|
||||
import {
|
||||
AlertTriangle,
|
||||
Database,
|
||||
Shield,
|
||||
CalendarClock,
|
||||
RefreshCw,
|
||||
ArrowRight,
|
||||
Activity,
|
||||
TrendingUp,
|
||||
AlertCircle,
|
||||
CheckCircle,
|
||||
CheckCircle2,
|
||||
XCircle,
|
||||
Users,
|
||||
HardDrive,
|
||||
Wifi,
|
||||
FileText
|
||||
Clock,
|
||||
Activity,
|
||||
Sparkles,
|
||||
Plug,
|
||||
KeyRound,
|
||||
} from 'lucide-react';
|
||||
|
||||
interface DashboardStats {
|
||||
companies: {
|
||||
total: number;
|
||||
active: number;
|
||||
};
|
||||
configurationItems: {
|
||||
total: number;
|
||||
active: number;
|
||||
};
|
||||
mappings: {
|
||||
auvik: {
|
||||
mapped: number;
|
||||
unmapped: number;
|
||||
};
|
||||
rmm: {
|
||||
mapped: number;
|
||||
unmapped: number;
|
||||
};
|
||||
};
|
||||
quotes: {
|
||||
open: number;
|
||||
interface IntegrationHealthItem {
|
||||
key: string;
|
||||
name: string;
|
||||
category: string;
|
||||
status: 'ok' | 'auth_failed' | 'unreachable' | 'not_configured' | 'unknown';
|
||||
configured: boolean;
|
||||
latencyMs?: number;
|
||||
error?: string | null;
|
||||
tokenExpiry?: {
|
||||
envVar: string;
|
||||
expiresAt: string;
|
||||
daysRemaining: number;
|
||||
subject?: string | null;
|
||||
} | null;
|
||||
checkedAt: string;
|
||||
}
|
||||
|
||||
interface IntegrationHealthResponse {
|
||||
items: IntegrationHealthItem[];
|
||||
summary: {
|
||||
total: number;
|
||||
ok: number;
|
||||
failed: number;
|
||||
notConfigured: number;
|
||||
expiringWithin14Days: number;
|
||||
expired: number;
|
||||
hasIssues: boolean;
|
||||
};
|
||||
}
|
||||
|
||||
interface Overview {
|
||||
attention: {
|
||||
linkConflicts: number;
|
||||
itglueUnlinked: number;
|
||||
s1Unmapped: number;
|
||||
schedules: { enabled: number; total: number };
|
||||
};
|
||||
observations: Array<{
|
||||
id: string;
|
||||
kind: string;
|
||||
source: string;
|
||||
collectedAt: string;
|
||||
hostname: string | null;
|
||||
companyName: string | null;
|
||||
runId: string | null;
|
||||
}>;
|
||||
audits: Array<{
|
||||
id: string;
|
||||
generatedAt: string;
|
||||
hostname: string | null;
|
||||
companyName: string | null;
|
||||
overallScore: number | null;
|
||||
fieldGapsCount: number;
|
||||
status: string;
|
||||
}>;
|
||||
syncHealth: Array<{
|
||||
id: string;
|
||||
name: string;
|
||||
syncType: string;
|
||||
isEnabled: boolean;
|
||||
lastRun: string | null;
|
||||
lastStatus: string | null;
|
||||
lastError: string | null;
|
||||
nextRun: string | null;
|
||||
}>;
|
||||
stats: {
|
||||
activeCompanies: number;
|
||||
configurationItems: number;
|
||||
xref: { total: number; linked: number };
|
||||
};
|
||||
}
|
||||
|
||||
const STALE_HOURS = 24;
|
||||
|
||||
function relTime(iso: string | null): string {
|
||||
if (!iso) return 'never';
|
||||
const ms = Date.now() - new Date(iso).getTime();
|
||||
if (ms < 0) return 'in the future';
|
||||
const min = Math.floor(ms / 60000);
|
||||
if (min < 1) return 'just now';
|
||||
if (min < 60) return `${min} min ago`;
|
||||
const hr = Math.floor(min / 60);
|
||||
if (hr < 48) return `${hr} h ago`;
|
||||
const day = Math.floor(hr / 24);
|
||||
return `${day} d ago`;
|
||||
}
|
||||
|
||||
function isStale(iso: string | null): boolean {
|
||||
if (!iso) return true;
|
||||
return Date.now() - new Date(iso).getTime() > STALE_HOURS * 3600_000;
|
||||
}
|
||||
|
||||
function syncStatusIcon(s: { lastStatus: string | null; lastRun: string | null; isEnabled: boolean }) {
|
||||
if (!s.isEnabled) return <span className="text-muted-foreground text-xs">off</span>;
|
||||
if (s.lastStatus === 'failed')
|
||||
return <XCircle className="size-4 text-destructive" aria-label="failed" />;
|
||||
if (isStale(s.lastRun))
|
||||
return <Clock className="size-4 text-amber-500" aria-label="stale" />;
|
||||
if (s.lastStatus === 'success')
|
||||
return <CheckCircle2 className="size-4 text-emerald-500" aria-label="ok" />;
|
||||
return <Clock className="size-4 text-muted-foreground" aria-label="never run" />;
|
||||
}
|
||||
|
||||
export default function DashboardPage() {
|
||||
const [stats, setStats] = useState<DashboardStats>({
|
||||
companies: { total: 0, active: 0 },
|
||||
configurationItems: { total: 0, active: 0 },
|
||||
mappings: {
|
||||
auvik: { mapped: 0, unmapped: 0 },
|
||||
rmm: { mapped: 0, unmapped: 0 }
|
||||
},
|
||||
quotes: { open: 0, total: 0 }
|
||||
});
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [data, setData] = useState<Overview | null>(null);
|
||||
const [health, setHealth] = useState<IntegrationHealthResponse | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
fetchStats();
|
||||
}, []);
|
||||
|
||||
const fetchStats = async () => {
|
||||
async function load(): Promise<void> {
|
||||
setLoading(true);
|
||||
try {
|
||||
// Fetch cached stats from database (fast, no external API calls)
|
||||
const statsRes = await fetch('/api/dashboard/stats');
|
||||
const statsData = await statsRes.json();
|
||||
|
||||
setStats({
|
||||
companies: statsData.companies || { total: 0, active: 0 },
|
||||
configurationItems: {
|
||||
total: 0,
|
||||
active: 0
|
||||
},
|
||||
mappings: statsData.mappings || {
|
||||
auvik: { mapped: 0, unmapped: 0 },
|
||||
rmm: { mapped: 0, unmapped: 0 }
|
||||
},
|
||||
quotes: statsData.quotes || { open: 0, total: 0 }
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Error fetching dashboard stats:', error);
|
||||
const [overviewRes, healthRes] = await Promise.all([
|
||||
fetch('/api/dashboard/overview'),
|
||||
fetch('/api/dashboard/integration-health'),
|
||||
]);
|
||||
if (!overviewRes.ok) {
|
||||
const body = (await overviewRes.json().catch(() => ({}))) as { error?: string };
|
||||
throw new Error(body.error ?? `HTTP ${overviewRes.status}`);
|
||||
}
|
||||
setData((await overviewRes.json()) as Overview);
|
||||
if (healthRes.ok) {
|
||||
setHealth((await healthRes.json()) as IntegrationHealthResponse);
|
||||
}
|
||||
setError(null);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Unknown error');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const quickLinks = [
|
||||
{
|
||||
title: 'Configuration Items',
|
||||
description: 'View and manage IT assets and devices',
|
||||
href: '/configuration-items',
|
||||
icon: Server,
|
||||
color: 'blue',
|
||||
stats: `${stats.configurationItems.active} active items`
|
||||
},
|
||||
{
|
||||
title: 'Kiosk Display',
|
||||
description: 'Configure and view executive dashboard for TV',
|
||||
href: '/kiosk/settings',
|
||||
icon: Activity,
|
||||
color: 'blue',
|
||||
stats: 'Settings & display'
|
||||
},
|
||||
{
|
||||
title: 'Sync Management',
|
||||
description: 'Synchronize data from external systems',
|
||||
href: '/admin/sync',
|
||||
icon: RefreshCw,
|
||||
color: 'green',
|
||||
stats: 'Run data synchronization'
|
||||
},
|
||||
{
|
||||
title: 'Data Browser',
|
||||
description: 'Browse and query system data',
|
||||
href: '/admin/data-browser',
|
||||
icon: Database,
|
||||
color: 'purple',
|
||||
stats: 'Explore database tables'
|
||||
}
|
||||
];
|
||||
|
||||
const mappingCards = [
|
||||
{
|
||||
title: 'NMS Mapping (Auvik)',
|
||||
description: 'Network Management System integration',
|
||||
href: '/auvik-mappings',
|
||||
icon: Network,
|
||||
color: 'blue',
|
||||
mapped: stats.mappings.auvik.mapped,
|
||||
unmapped: stats.mappings.auvik.unmapped,
|
||||
total: stats.mappings.auvik.mapped + stats.mappings.auvik.unmapped
|
||||
},
|
||||
{
|
||||
title: 'RMM Mapping (Datto)',
|
||||
description: 'Remote Monitoring & Management',
|
||||
href: '/rmm-mappings',
|
||||
icon: Globe,
|
||||
color: 'purple',
|
||||
mapped: stats.mappings.rmm.mapped,
|
||||
unmapped: stats.mappings.rmm.unmapped,
|
||||
total: stats.mappings.rmm.mapped + stats.mappings.rmm.unmapped
|
||||
},
|
||||
{
|
||||
title: 'Apple RMM (Addigy)',
|
||||
description: 'Apple device management',
|
||||
href: '/addigy-mappings',
|
||||
icon: Smartphone,
|
||||
color: 'orange',
|
||||
mapped: 0,
|
||||
unmapped: 0,
|
||||
total: 0,
|
||||
comingSoon: true
|
||||
}
|
||||
];
|
||||
|
||||
const getMappingProgress = (mapped: number, total: number) => {
|
||||
if (total === 0) return 0;
|
||||
return (mapped / total) * 100;
|
||||
};
|
||||
useEffect(() => {
|
||||
void load();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="container mx-auto py-8 space-y-8">
|
||||
{/* Header */}
|
||||
<div className="container mx-auto px-6 py-6 space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-4xl font-bold">Dashboard</h1>
|
||||
<p className="text-muted-foreground mt-2">
|
||||
Welcome to Pulse - Your PSA Management System
|
||||
</p>
|
||||
</div>
|
||||
<Button onClick={fetchStats} variant="outline" size="sm" disabled={loading}>
|
||||
<RefreshCw className={`w-4 h-4 mr-2 ${loading ? 'animate-spin' : ''}`} />
|
||||
<h1 className="text-2xl font-bold tracking-tight">Dashboard</h1>
|
||||
<Button onClick={load} variant="outline" size="sm" disabled={loading}>
|
||||
<RefreshCw className={`size-4 mr-2 ${loading ? 'animate-spin' : ''}`} />
|
||||
Refresh
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Stats Overview */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-5 gap-6">
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Total Companies</CardTitle>
|
||||
<Building2 className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">{stats.companies.total}</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{stats.companies.active} active
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">NMS Coverage</CardTitle>
|
||||
<Wifi className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">
|
||||
{stats.mappings.auvik.mapped + stats.mappings.auvik.unmapped > 0
|
||||
? Math.round(getMappingProgress(stats.mappings.auvik.mapped, stats.mappings.auvik.mapped + stats.mappings.auvik.unmapped))
|
||||
: 0}%
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{stats.mappings.auvik.mapped} of {stats.mappings.auvik.mapped + stats.mappings.auvik.unmapped} tenants
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">RMM Coverage</CardTitle>
|
||||
<HardDrive className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">
|
||||
{stats.mappings.rmm.mapped + stats.mappings.rmm.unmapped > 0
|
||||
? Math.round(getMappingProgress(stats.mappings.rmm.mapped, stats.mappings.rmm.mapped + stats.mappings.rmm.unmapped))
|
||||
: 0}%
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{stats.mappings.rmm.mapped} of {stats.mappings.rmm.mapped + stats.mappings.rmm.unmapped} sites
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Link href="/quotes">
|
||||
<Card className="hover:shadow-lg transition-shadow cursor-pointer">
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Open Quotes</CardTitle>
|
||||
<FileText className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">{stats.quotes.open}</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Pending approval
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Link>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">System Status</CardTitle>
|
||||
<Activity className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold flex items-center gap-2">
|
||||
<CheckCircle className="h-5 w-5 text-green-600" />
|
||||
Online
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
All systems operational
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
{error && (
|
||||
<Alert variant="destructive">
|
||||
<AlertTitle>Failed to load</AlertTitle>
|
||||
<AlertDescription>{error}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{/* Quick Links */}
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold mb-4">Quick Access</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
{quickLinks.map((link) => (
|
||||
<Link key={link.href} href={link.href}>
|
||||
<Card className="hover:shadow-lg transition-shadow cursor-pointer h-full">
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<link.icon className={`h-8 w-8 text-${link.color}-600`} />
|
||||
<ArrowRight className="h-4 w-4 text-muted-foreground" />
|
||||
</div>
|
||||
<CardTitle className="mt-4">{link.title}</CardTitle>
|
||||
<CardDescription>{link.description}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-muted-foreground">{link.stats}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Link>
|
||||
))}
|
||||
{/* NEEDS ATTENTION ----------------------------------------------------- */}
|
||||
<section>
|
||||
<h2 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-3">
|
||||
Needs attention
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<AttentionCard
|
||||
icon={AlertTriangle}
|
||||
value={data?.attention.linkConflicts}
|
||||
label="Device-link conflicts"
|
||||
href="/admin/device-link-conflicts"
|
||||
tone={data && data.attention.linkConflicts > 0 ? 'warn' : 'ok'}
|
||||
/>
|
||||
<AttentionCard
|
||||
icon={Database}
|
||||
value={data?.attention.itglueUnlinked}
|
||||
label="IT Glue ↛ Autotask"
|
||||
sub="unlinked configurations"
|
||||
href="/admin/device-link-conflicts"
|
||||
tone="info"
|
||||
/>
|
||||
<AttentionCard
|
||||
icon={Shield}
|
||||
value={data?.attention.s1Unmapped}
|
||||
label="S1 unmapped"
|
||||
sub="missing site → company mapping"
|
||||
href="/sentinelone/mappings"
|
||||
tone="info"
|
||||
/>
|
||||
<AttentionCard
|
||||
icon={CalendarClock}
|
||||
value={data?.attention.schedules.enabled}
|
||||
label={`Schedules on / ${data?.attention.schedules.total ?? '—'}`}
|
||||
href="/admin/sync/autotask"
|
||||
tone="info"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Mapping Status */}
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold mb-4">Integration Mappings</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
{mappingCards.map((mapping) => (
|
||||
<Card key={mapping.href} className="relative">
|
||||
{mapping.comingSoon && (
|
||||
<Badge className="absolute top-4 right-4" variant="secondary">
|
||||
Coming Soon
|
||||
</Badge>
|
||||
)}
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<mapping.icon className={`h-8 w-8 text-${mapping.color}-600`} />
|
||||
{!mapping.comingSoon && mapping.unmapped > 0 && (
|
||||
<Badge variant="outline" className="bg-orange-50 border-orange-200 text-orange-700">
|
||||
<AlertCircle className="h-3 w-3 mr-1" />
|
||||
{mapping.unmapped} unmapped
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
<CardTitle className="mt-4">{mapping.title}</CardTitle>
|
||||
<CardDescription>{mapping.description}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{!mapping.comingSoon ? (
|
||||
<>
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-muted-foreground">Coverage</span>
|
||||
<span className="font-medium">
|
||||
{Math.round(getMappingProgress(mapping.mapped, mapping.total))}%
|
||||
</span>
|
||||
{/* RECENT OBSERVATIONS + AUDITS ---------------------------------------- */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-base flex items-center gap-2">
|
||||
<Activity className="size-4" />
|
||||
Recent device observations
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{data === null && !error ? (
|
||||
<RowSkeletons />
|
||||
) : data?.observations.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">No observations recorded yet.</p>
|
||||
) : (
|
||||
<div className="space-y-1">
|
||||
{data?.observations.map((o) => (
|
||||
<div
|
||||
key={o.id}
|
||||
className="flex items-center justify-between py-1.5 text-sm border-b last:border-0"
|
||||
>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="font-medium truncate">{o.hostname ?? '(unanchored)'}</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
<span className="font-mono">{o.kind}</span>
|
||||
{o.companyName && <span> · {o.companyName}</span>}
|
||||
</div>
|
||||
<Progress value={getMappingProgress(mapping.mapped, mapping.total)} />
|
||||
</div>
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="flex items-center gap-1">
|
||||
<CheckCircle className="h-3 w-3 text-green-600" />
|
||||
{mapping.mapped} mapped
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<XCircle className="h-3 w-3 text-gray-400" />
|
||||
{mapping.unmapped} unmapped
|
||||
</span>
|
||||
<div className="text-xs text-muted-foreground shrink-0 ml-3">
|
||||
{relTime(o.collectedAt)}
|
||||
</div>
|
||||
<Link href={mapping.href}>
|
||||
<Button className="w-full" variant="outline" size="sm">
|
||||
Manage Mappings
|
||||
<ArrowRight className="h-4 w-4 ml-2" />
|
||||
</Button>
|
||||
</Link>
|
||||
</>
|
||||
) : (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Integration under development
|
||||
</p>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Recent Activity - Placeholder */}
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold mb-4">Recent Activity</h2>
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="h-2 w-2 bg-green-600 rounded-full" />
|
||||
<div className="flex-1">
|
||||
<p className="text-sm font-medium">Data sync completed</p>
|
||||
<p className="text-xs text-muted-foreground">Companies synchronized successfully - 5 minutes ago</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="h-2 w-2 bg-blue-600 rounded-full" />
|
||||
<div className="flex-1">
|
||||
<p className="text-sm font-medium">New RMM site mapped</p>
|
||||
<p className="text-xs text-muted-foreground">Site "Acme Corp - Dallas" mapped to Acme Corp - 2 hours ago</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="h-2 w-2 bg-purple-600 rounded-full" />
|
||||
<div className="flex-1">
|
||||
<p className="text-sm font-medium">Configuration items updated</p>
|
||||
<p className="text-xs text-muted-foreground">247 devices synchronized from RMM - 1 day ago</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-base flex items-center gap-2">
|
||||
<Sparkles className="size-4" />
|
||||
Recent audits
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{data === null && !error ? (
|
||||
<RowSkeletons />
|
||||
) : data?.audits.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">No endpoint audits yet.</p>
|
||||
) : (
|
||||
<div className="space-y-1">
|
||||
{data?.audits.map((a) => (
|
||||
<div
|
||||
key={a.id}
|
||||
className="flex items-center justify-between py-1.5 text-sm border-b last:border-0"
|
||||
>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="font-medium truncate">{a.hostname ?? '(unanchored)'}</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
score {a.overallScore?.toFixed(2) ?? '—'} · {a.fieldGapsCount} gaps
|
||||
{a.companyName && <span> · {a.companyName}</span>}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground shrink-0 ml-3">
|
||||
{relTime(a.generatedAt)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* INTEGRATION HEALTH -------------------------------------------------- */}
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-base flex items-center gap-2">
|
||||
<Plug className="size-4" />
|
||||
Integration health
|
||||
{health?.summary.hasIssues && (
|
||||
<Badge variant="destructive" className="text-[10px]">issues</Badge>
|
||||
)}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{!health ? (
|
||||
<RowSkeletons />
|
||||
) : (
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-x-6 gap-y-1">
|
||||
{health.items
|
||||
.slice()
|
||||
.sort((a, b) => statusOrder(a.status) - statusOrder(b.status))
|
||||
.map((i) => (
|
||||
<IntegrationRow key={i.key} item={i} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* SYNC HEALTH --------------------------------------------------------- */}
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-base">Sync health</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{data === null && !error ? (
|
||||
<RowSkeletons />
|
||||
) : (
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-x-6 gap-y-1">
|
||||
{data?.syncHealth.map((s) => (
|
||||
<div key={s.id} className="flex items-center justify-between py-1.5 text-sm border-b last:border-0">
|
||||
<div className="min-w-0 flex-1 truncate">{s.name}</div>
|
||||
<div className="flex items-center gap-2 text-xs text-muted-foreground shrink-0 ml-3">
|
||||
<span>{relTime(s.lastRun)}</span>
|
||||
{syncStatusIcon(s)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* STATS FOOTER -------------------------------------------------------- */}
|
||||
{data && (
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{data.stats.activeCompanies} companies · {data.stats.configurationItems.toLocaleString()} CIs ·{' '}
|
||||
{data.stats.xref.total.toLocaleString()} xref rows (
|
||||
{data.stats.xref.total > 0
|
||||
? Math.round((data.stats.xref.linked / data.stats.xref.total) * 100)
|
||||
: 0}
|
||||
% linked)
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function AttentionCard(props: {
|
||||
icon: React.ElementType;
|
||||
value: number | undefined;
|
||||
label: string;
|
||||
sub?: string;
|
||||
href: string;
|
||||
tone: 'ok' | 'warn' | 'info';
|
||||
}) {
|
||||
const { icon: Icon, value, label, sub, href, tone } = props;
|
||||
const valueColor =
|
||||
tone === 'warn' && value && value > 0
|
||||
? 'text-amber-600 dark:text-amber-500'
|
||||
: tone === 'ok'
|
||||
? 'text-foreground'
|
||||
: 'text-foreground';
|
||||
return (
|
||||
<Link href={href} className="block">
|
||||
<Card className="hover:shadow-md transition-shadow h-full">
|
||||
<CardContent className="pt-4 pb-3 flex flex-col gap-1">
|
||||
<div className="flex items-center justify-between">
|
||||
<Icon className="size-4 text-muted-foreground" />
|
||||
<ArrowRight className="size-3.5 text-muted-foreground" />
|
||||
</div>
|
||||
<div className={`text-2xl font-semibold tabular-nums ${valueColor}`}>
|
||||
{value === undefined ? '—' : value.toLocaleString()}
|
||||
</div>
|
||||
<div className="text-sm font-medium leading-tight">{label}</div>
|
||||
{sub && <div className="text-xs text-muted-foreground">{sub}</div>}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
function statusOrder(s: IntegrationHealthItem['status']): number {
|
||||
switch (s) {
|
||||
case 'auth_failed': return 0;
|
||||
case 'unreachable': return 1;
|
||||
case 'unknown': return 2;
|
||||
case 'ok': return 3;
|
||||
case 'not_configured': return 4;
|
||||
default: return 5;
|
||||
}
|
||||
}
|
||||
|
||||
function statusBadge(item: IntegrationHealthItem) {
|
||||
const expiringSoon =
|
||||
item.tokenExpiry && item.tokenExpiry.daysRemaining > 0 && item.tokenExpiry.daysRemaining <= 14;
|
||||
const expired = item.tokenExpiry && item.tokenExpiry.daysRemaining <= 0;
|
||||
if (item.status === 'auth_failed' || item.status === 'unreachable')
|
||||
return <XCircle className="size-4 text-destructive" aria-label={item.status} />;
|
||||
if (expired)
|
||||
return <KeyRound className="size-4 text-destructive" aria-label="token expired" />;
|
||||
if (expiringSoon)
|
||||
return <KeyRound className="size-4 text-amber-500" aria-label="token expires soon" />;
|
||||
if (item.status === 'ok')
|
||||
return <CheckCircle2 className="size-4 text-emerald-500" aria-label="ok" />;
|
||||
if (item.status === 'unknown')
|
||||
return <CheckCircle2 className="size-4 text-muted-foreground" aria-label="configured" />;
|
||||
return <span className="text-xs text-muted-foreground">off</span>;
|
||||
}
|
||||
|
||||
function IntegrationRow({ item }: { item: IntegrationHealthItem }) {
|
||||
const expired = item.tokenExpiry && item.tokenExpiry.daysRemaining <= 0;
|
||||
const expiringSoon =
|
||||
item.tokenExpiry && item.tokenExpiry.daysRemaining > 0 && item.tokenExpiry.daysRemaining <= 14;
|
||||
const detail =
|
||||
item.status === 'auth_failed' || item.status === 'unreachable'
|
||||
? item.error?.slice(0, 80)
|
||||
: expired
|
||||
? `token expired ${Math.abs(item.tokenExpiry!.daysRemaining).toFixed(0)} d ago`
|
||||
: expiringSoon
|
||||
? `token expires in ${item.tokenExpiry!.daysRemaining.toFixed(0)} d`
|
||||
: item.latencyMs !== undefined
|
||||
? `${item.latencyMs} ms`
|
||||
: null;
|
||||
return (
|
||||
<div className="flex items-center justify-between py-1.5 text-sm border-b last:border-0">
|
||||
<div className="min-w-0 flex-1 truncate">{item.name}</div>
|
||||
<div className="flex items-center gap-2 text-xs text-muted-foreground shrink-0 ml-3">
|
||||
{detail && <span className="truncate max-w-[20ch]">{detail}</span>}
|
||||
{statusBadge(item)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function RowSkeletons() {
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-4 w-full" />
|
||||
<Skeleton className="h-4 w-full" />
|
||||
<Skeleton className="h-4 w-3/4" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue