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
230
components/navigation/app-navigation.tsx
Normal file
230
components/navigation/app-navigation.tsx
Normal file
|
|
@ -0,0 +1,230 @@
|
|||
'use client';
|
||||
|
||||
import { usePathname } from 'next/navigation';
|
||||
import Link from 'next/link';
|
||||
import { cn } from '@/lib/utils';
|
||||
import {
|
||||
LayoutDashboard,
|
||||
Server,
|
||||
Network,
|
||||
Globe,
|
||||
Smartphone,
|
||||
Database,
|
||||
RefreshCw,
|
||||
ChevronDown,
|
||||
Activity
|
||||
} from 'lucide-react';
|
||||
import {
|
||||
NavigationMenu,
|
||||
NavigationMenuContent,
|
||||
NavigationMenuItem,
|
||||
NavigationMenuLink,
|
||||
NavigationMenuList,
|
||||
NavigationMenuTrigger,
|
||||
navigationMenuTriggerStyle,
|
||||
} from '@/components/ui/navigation-menu';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { ThemeToggle } from '@/components/theme-toggle';
|
||||
|
||||
interface NavItem {
|
||||
title: string;
|
||||
href?: string;
|
||||
icon?: React.ElementType;
|
||||
description?: string;
|
||||
children?: NavItem[];
|
||||
}
|
||||
|
||||
const navigationItems: NavItem[] = [
|
||||
{
|
||||
title: 'Dashboard',
|
||||
href: '/',
|
||||
icon: LayoutDashboard,
|
||||
description: 'Overview and quick access'
|
||||
},
|
||||
{
|
||||
title: 'Configuration Items',
|
||||
href: '/configuration-items',
|
||||
icon: Server,
|
||||
description: 'Manage IT assets and devices'
|
||||
},
|
||||
{
|
||||
title: 'Admin',
|
||||
icon: Activity,
|
||||
children: [
|
||||
{
|
||||
title: 'Sync Management',
|
||||
href: '/admin/sync',
|
||||
icon: RefreshCw,
|
||||
description: 'Sync data from external systems'
|
||||
},
|
||||
{
|
||||
title: 'NMS Mapping (Auvik)',
|
||||
href: '/auvik-mappings',
|
||||
icon: Network,
|
||||
description: 'Map Auvik tenants to companies'
|
||||
},
|
||||
{
|
||||
title: 'RMM Mapping (Datto)',
|
||||
href: '/rmm-mappings',
|
||||
icon: Globe,
|
||||
description: 'Map RMM sites to companies'
|
||||
},
|
||||
{
|
||||
title: 'Apple RMM Mapping (Addigy)',
|
||||
href: '/addigy-mappings',
|
||||
icon: Smartphone,
|
||||
description: 'Map Addigy devices to companies'
|
||||
},
|
||||
{
|
||||
title: 'Data Browser',
|
||||
href: '/admin/data-browser',
|
||||
icon: Database,
|
||||
description: 'Browse and query system data'
|
||||
},
|
||||
]
|
||||
},
|
||||
];
|
||||
|
||||
export function AppNavigation() {
|
||||
const pathname = usePathname();
|
||||
|
||||
const isActive = (href?: string) => {
|
||||
if (!href) return false;
|
||||
return pathname === href || pathname.startsWith(href + '/');
|
||||
};
|
||||
|
||||
return (
|
||||
<header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
|
||||
<div className="container flex h-16 items-center">
|
||||
<div className="flex flex-1 items-center justify-between">
|
||||
{/* Logo and App Name */}
|
||||
<Link href="/" className="flex items-center space-x-3 mr-6">
|
||||
<div className="flex h-9 w-9 items-center justify-center rounded-lg bg-gradient-to-br from-blue-600 to-blue-700 text-white shadow-lg">
|
||||
<Activity className="h-5 w-5" />
|
||||
</div>
|
||||
<div className="hidden sm:block">
|
||||
<h1 className="text-xl font-semibold tracking-tight">
|
||||
Pulse
|
||||
</h1>
|
||||
<p className="text-xs text-muted-foreground">PSA Management System</p>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
{/* Main Navigation */}
|
||||
<NavigationMenu className="mx-6">
|
||||
<NavigationMenuList>
|
||||
{navigationItems.map((item) => (
|
||||
<NavigationMenuItem key={item.title}>
|
||||
{item.children ? (
|
||||
<>
|
||||
<NavigationMenuTrigger className={cn(
|
||||
"h-9 px-4 py-2",
|
||||
item.children.some(child => isActive(child.href)) && "bg-accent"
|
||||
)}>
|
||||
{item.icon && <item.icon className="w-4 h-4 mr-2" />}
|
||||
{item.title}
|
||||
</NavigationMenuTrigger>
|
||||
<NavigationMenuContent>
|
||||
<ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px]">
|
||||
{item.children.map((child) => (
|
||||
<li key={child.title}>
|
||||
<NavigationMenuLink asChild>
|
||||
<Link
|
||||
href={child.href || '#'}
|
||||
className={cn(
|
||||
"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
|
||||
isActive(child.href) && "bg-accent"
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center text-sm font-medium leading-none">
|
||||
{child.icon && <child.icon className="w-4 h-4 mr-2" />}
|
||||
{child.title}
|
||||
</div>
|
||||
{child.description && (
|
||||
<p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
|
||||
{child.description}
|
||||
</p>
|
||||
)}
|
||||
</Link>
|
||||
</NavigationMenuLink>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</NavigationMenuContent>
|
||||
</>
|
||||
) : (
|
||||
<Link href={item.href || '#'} legacyBehavior passHref>
|
||||
<NavigationMenuLink className={cn(
|
||||
navigationMenuTriggerStyle(),
|
||||
"h-9",
|
||||
isActive(item.href) && "bg-accent"
|
||||
)}>
|
||||
{item.icon && <item.icon className="w-4 h-4 mr-2" />}
|
||||
{item.title}
|
||||
</NavigationMenuLink>
|
||||
</Link>
|
||||
)}
|
||||
</NavigationMenuItem>
|
||||
))}
|
||||
</NavigationMenuList>
|
||||
</NavigationMenu>
|
||||
|
||||
{/* Right Side Actions */}
|
||||
<div className="flex items-center gap-2">
|
||||
<ThemeToggle />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
// Breadcrumb component for secondary navigation
|
||||
export interface BreadcrumbItem {
|
||||
label: string;
|
||||
href?: string;
|
||||
}
|
||||
|
||||
interface PageHeaderProps {
|
||||
title: string;
|
||||
description?: string;
|
||||
breadcrumbs?: BreadcrumbItem[];
|
||||
actions?: React.ReactNode;
|
||||
}
|
||||
|
||||
export function PageHeader({ title, description, breadcrumbs, actions }: PageHeaderProps) {
|
||||
return (
|
||||
<div className="border-b">
|
||||
<div className="container py-4">
|
||||
{/* Breadcrumbs */}
|
||||
{breadcrumbs && breadcrumbs.length > 0 && (
|
||||
<nav className="flex items-center space-x-2 text-sm text-muted-foreground mb-2">
|
||||
{breadcrumbs.map((crumb, index) => (
|
||||
<div key={index} className="flex items-center">
|
||||
{index > 0 && <span className="mx-2">/</span>}
|
||||
{crumb.href ? (
|
||||
<Link href={crumb.href} className="hover:text-foreground transition-colors">
|
||||
{crumb.label}
|
||||
</Link>
|
||||
) : (
|
||||
<span className="text-foreground">{crumb.label}</span>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</nav>
|
||||
)}
|
||||
|
||||
{/* Title and Actions */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold tracking-tight">{title}</h1>
|
||||
{description && (
|
||||
<p className="text-muted-foreground mt-1">{description}</p>
|
||||
)}
|
||||
</div>
|
||||
{actions && <div className="flex items-center gap-2">{actions}</div>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue