Add comprehensive admin features and multi-system integration
- Add admin dashboard with sync controls and data browser - Implement RMM, Auvik, and Addigy organization mappings - Add chunked ticket sync with progress tracking - Implement entity sync service with rate limiting - Add analytics engine and performance optimizer - Create data browser for all PSA entities - Add navigation components and UI improvements - Implement background processing and sync services - Add comprehensive documentation and migration scripts - Update configuration items with multi-system support - Enhance contact management and purchase history - Add issue type assignment and LLM analyzer - Improve error handling and logging utilities
This commit is contained in:
root
parent
e8462ef301
commit
6eee14f8af
171 changed files with 32671 additions and 621 deletions
374
app/dashboard/page.tsx
Normal file
374
app/dashboard/page.tsx
Normal file
|
|
@ -0,0 +1,374 @@
|
|||
'use client';
|
||||
|
||||
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 { Badge } from '@/components/ui/badge';
|
||||
import { Progress } from '@/components/ui/progress';
|
||||
import {
|
||||
Server,
|
||||
Building2,
|
||||
Network,
|
||||
Globe,
|
||||
Smartphone,
|
||||
Database,
|
||||
RefreshCw,
|
||||
ArrowRight,
|
||||
Activity,
|
||||
TrendingUp,
|
||||
AlertCircle,
|
||||
CheckCircle,
|
||||
XCircle,
|
||||
Users,
|
||||
HardDrive,
|
||||
Wifi
|
||||
} 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;
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
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 }
|
||||
}
|
||||
});
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
fetchStats();
|
||||
}, []);
|
||||
|
||||
const fetchStats = async () => {
|
||||
try {
|
||||
// Fetch companies
|
||||
const companiesRes = await fetch('/api/companies');
|
||||
const companiesData = await companiesRes.json();
|
||||
|
||||
// Fetch Auvik mappings
|
||||
const auvikRes = await fetch('/api/auvik/tenant-mappings?includeUnmapped=true');
|
||||
const auvikData = await auvikRes.json();
|
||||
|
||||
// Fetch RMM mappings
|
||||
const rmmRes = await fetch('/api/rmm/site-mappings?includeUnmapped=true');
|
||||
const rmmData = await rmmRes.json();
|
||||
|
||||
setStats({
|
||||
companies: {
|
||||
total: companiesData.companies?.length || 0,
|
||||
active: companiesData.companies?.filter((c: any) => c.isActive).length || 0
|
||||
},
|
||||
configurationItems: {
|
||||
total: 0, // Would need to fetch this
|
||||
active: 0
|
||||
},
|
||||
mappings: {
|
||||
auvik: {
|
||||
mapped: auvikData.stats?.mapped || 0,
|
||||
unmapped: auvikData.stats?.unmapped || 0
|
||||
},
|
||||
rmm: {
|
||||
mapped: rmmData.stats?.mapped || 0,
|
||||
unmapped: rmmData.stats?.unmapped || 0
|
||||
}
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Error fetching dashboard stats:', 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: '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;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="container mx-auto py-8 space-y-8">
|
||||
{/* Header */}
|
||||
<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' : ''}`} />
|
||||
Refresh
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Stats Overview */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 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>
|
||||
|
||||
<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>
|
||||
|
||||
{/* 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>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 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>
|
||||
</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>
|
||||
<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 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>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue