feat: add executive kiosk dashboard for TV display
- Created /kiosk route with full-screen display - Added API endpoints for stats and activity feed - Built cycling KPI display with 12 metrics - Added scrolling ticker for ticket activity - Implemented UI-configurable cycle interval (3-15s, default 7s) - Focus on critical tickets and business metrics - Added navigation link from dashboard - Dark theme optimized for TV viewing
This commit is contained in:
root
parent
4d531b2f2d
commit
20a0785ec3
9 changed files with 692 additions and 0 deletions
167
components/kiosk/cycling-display.tsx
Normal file
167
components/kiosk/cycling-display.tsx
Normal file
|
|
@ -0,0 +1,167 @@
|
|||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { KpiCard } from './kpi-card';
|
||||
import {
|
||||
AlertTriangle,
|
||||
Clock,
|
||||
Timer,
|
||||
AlertCircle,
|
||||
TicketCheck,
|
||||
CheckCircle2,
|
||||
TrendingUp,
|
||||
Briefcase,
|
||||
FileText,
|
||||
Building2,
|
||||
Network,
|
||||
Server
|
||||
} from 'lucide-react';
|
||||
|
||||
interface KpiStats {
|
||||
criticalTickets: number;
|
||||
waitingTickets: number;
|
||||
staleTickets: number;
|
||||
overdueTickets: number;
|
||||
openTickets: number;
|
||||
closedToday: number;
|
||||
avgResolutionHours: number;
|
||||
hoursThisWeek: number;
|
||||
activeCompanies: number;
|
||||
openQuotes: number;
|
||||
nmsCoverage: number;
|
||||
rmmCoverage: number;
|
||||
}
|
||||
|
||||
interface CyclingDisplayProps {
|
||||
stats: KpiStats;
|
||||
cycleInterval: number;
|
||||
}
|
||||
|
||||
export function CyclingDisplay({ stats, cycleInterval }: CyclingDisplayProps) {
|
||||
const [currentIndex, setCurrentIndex] = useState(0);
|
||||
const [isTransitioning, setIsTransitioning] = useState(false);
|
||||
|
||||
const kpis = [
|
||||
{
|
||||
title: 'Critical Tickets',
|
||||
value: stats.criticalTickets,
|
||||
icon: AlertTriangle,
|
||||
color: stats.criticalTickets > 10 ? 'red' : stats.criticalTickets > 5 ? 'yellow' : 'green',
|
||||
trend: 'Priority 1-3',
|
||||
},
|
||||
{
|
||||
title: 'Tickets Waiting Engagement',
|
||||
value: stats.waitingTickets,
|
||||
icon: Clock,
|
||||
color: stats.waitingTickets > 20 ? 'yellow' : 'blue',
|
||||
trend: 'Awaiting Response',
|
||||
},
|
||||
{
|
||||
title: 'Stale Tickets',
|
||||
value: stats.staleTickets,
|
||||
icon: Timer,
|
||||
color: stats.staleTickets > 15 ? 'yellow' : 'blue',
|
||||
trend: '7+ Days No Activity',
|
||||
},
|
||||
{
|
||||
title: 'Overdue Tickets',
|
||||
value: stats.overdueTickets,
|
||||
icon: AlertCircle,
|
||||
color: stats.overdueTickets > 10 ? 'red' : stats.overdueTickets > 5 ? 'yellow' : 'green',
|
||||
trend: 'Past Due Date',
|
||||
},
|
||||
{
|
||||
title: 'Total Open Tickets',
|
||||
value: stats.openTickets,
|
||||
icon: TicketCheck,
|
||||
color: 'blue',
|
||||
trend: 'Currently Open',
|
||||
},
|
||||
{
|
||||
title: 'Tickets Closed Today',
|
||||
value: stats.closedToday,
|
||||
icon: CheckCircle2,
|
||||
color: 'green',
|
||||
trend: 'Last 24 Hours',
|
||||
},
|
||||
{
|
||||
title: 'Avg Resolution Time',
|
||||
value: Math.round(stats.avgResolutionHours),
|
||||
icon: TrendingUp,
|
||||
color: 'purple',
|
||||
suffix: 'h',
|
||||
trend: 'Last 30 Days',
|
||||
},
|
||||
{
|
||||
title: 'Hours Logged This Week',
|
||||
value: Math.round(stats.hoursThisWeek),
|
||||
icon: Briefcase,
|
||||
color: 'blue',
|
||||
suffix: 'h',
|
||||
trend: 'Billable Hours',
|
||||
},
|
||||
{
|
||||
title: 'Open Quotes',
|
||||
value: stats.openQuotes,
|
||||
icon: FileText,
|
||||
color: 'yellow',
|
||||
trend: 'Pending Approval',
|
||||
},
|
||||
{
|
||||
title: 'Active Companies',
|
||||
value: stats.activeCompanies,
|
||||
icon: Building2,
|
||||
color: 'blue',
|
||||
trend: 'Total Customers',
|
||||
},
|
||||
{
|
||||
title: 'NMS Coverage',
|
||||
value: stats.nmsCoverage,
|
||||
icon: Network,
|
||||
color: stats.nmsCoverage >= 90 ? 'green' : stats.nmsCoverage >= 70 ? 'yellow' : 'red',
|
||||
suffix: '%',
|
||||
trend: 'Auvik Tenants',
|
||||
},
|
||||
{
|
||||
title: 'RMM Coverage',
|
||||
value: stats.rmmCoverage,
|
||||
icon: Server,
|
||||
color: stats.rmmCoverage >= 90 ? 'green' : stats.rmmCoverage >= 70 ? 'yellow' : 'red',
|
||||
suffix: '%',
|
||||
trend: 'Datto Sites',
|
||||
},
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
setIsTransitioning(true);
|
||||
setTimeout(() => {
|
||||
setCurrentIndex((prev) => (prev + 1) % kpis.length);
|
||||
setIsTransitioning(false);
|
||||
}, 300);
|
||||
}, cycleInterval * 1000);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, [cycleInterval, kpis.length]);
|
||||
|
||||
const currentKpi = kpis[currentIndex];
|
||||
|
||||
return (
|
||||
<div className="flex-1 flex items-center justify-center p-16">
|
||||
<div
|
||||
className={`w-full max-w-6xl transition-opacity duration-300 ${
|
||||
isTransitioning ? 'opacity-0' : 'opacity-100'
|
||||
}`}
|
||||
>
|
||||
<KpiCard
|
||||
title={currentKpi.title}
|
||||
value={currentKpi.value}
|
||||
icon={currentKpi.icon}
|
||||
color={currentKpi.color as any}
|
||||
trend={currentKpi.trend}
|
||||
suffix={currentKpi.suffix}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
47
components/kiosk/kpi-card.tsx
Normal file
47
components/kiosk/kpi-card.tsx
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
'use client';
|
||||
|
||||
import { LucideIcon } from 'lucide-react';
|
||||
|
||||
interface KpiCardProps {
|
||||
title: string;
|
||||
value: number | string;
|
||||
icon: LucideIcon;
|
||||
trend?: string;
|
||||
color?: 'red' | 'yellow' | 'green' | 'blue' | 'purple';
|
||||
suffix?: string;
|
||||
}
|
||||
|
||||
export function KpiCard({ title, value, icon: Icon, trend, color = 'blue', suffix = '' }: KpiCardProps) {
|
||||
const colorClasses = {
|
||||
red: 'text-red-500 border-red-500',
|
||||
yellow: 'text-yellow-500 border-yellow-500',
|
||||
green: 'text-green-500 border-green-500',
|
||||
blue: 'text-blue-500 border-blue-500',
|
||||
purple: 'text-purple-500 border-purple-500',
|
||||
};
|
||||
|
||||
const bgClasses = {
|
||||
red: 'bg-red-500/10',
|
||||
yellow: 'bg-yellow-500/10',
|
||||
green: 'bg-green-500/10',
|
||||
blue: 'bg-blue-500/10',
|
||||
purple: 'bg-purple-500/10',
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`flex flex-col items-center justify-center h-full w-full p-12 ${bgClasses[color]} border-4 ${colorClasses[color]} rounded-3xl`}>
|
||||
<Icon className={`w-32 h-32 mb-8 ${colorClasses[color]}`} />
|
||||
<div className={`text-9xl font-bold mb-4 ${colorClasses[color]}`}>
|
||||
{value}{suffix}
|
||||
</div>
|
||||
<div className="text-4xl text-gray-300 text-center font-semibold mb-2">
|
||||
{title}
|
||||
</div>
|
||||
{trend && (
|
||||
<div className="text-2xl text-gray-500 mt-4">
|
||||
{trend}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
77
components/kiosk/settings-panel.tsx
Normal file
77
components/kiosk/settings-panel.tsx
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Settings, X } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Slider } from '@/components/ui/slider';
|
||||
|
||||
interface SettingsPanelProps {
|
||||
cycleInterval: number;
|
||||
onIntervalChange: (interval: number) => void;
|
||||
}
|
||||
|
||||
export function SettingsPanel({ cycleInterval, onIntervalChange }: SettingsPanelProps) {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [localInterval, setLocalInterval] = useState(cycleInterval);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isOpen) {
|
||||
const timer = setTimeout(() => {
|
||||
// Auto-hide after 3 seconds of inactivity
|
||||
}, 3000);
|
||||
return () => clearTimeout(timer);
|
||||
}
|
||||
}, [isOpen]);
|
||||
|
||||
const handleSave = () => {
|
||||
onIntervalChange(localInterval);
|
||||
localStorage.setItem('kiosk-cycle-interval', localInterval.toString());
|
||||
setIsOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="fixed top-4 right-4 z-50 text-gray-400 hover:text-white"
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
>
|
||||
{isOpen ? <X className="w-8 h-8" /> : <Settings className="w-8 h-8" />}
|
||||
</Button>
|
||||
|
||||
{isOpen && (
|
||||
<div className="fixed top-20 right-4 z-50 bg-gray-900 border-2 border-gray-700 rounded-lg p-6 w-96 shadow-2xl">
|
||||
<h3 className="text-2xl font-bold text-white mb-4">Display Settings</h3>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="text-gray-300 text-lg mb-2 block">
|
||||
Cycle Interval: {localInterval} seconds
|
||||
</label>
|
||||
<Slider
|
||||
value={[localInterval]}
|
||||
onValueChange={(value: number[]) => setLocalInterval(value[0])}
|
||||
min={3}
|
||||
max={15}
|
||||
step={1}
|
||||
className="w-full"
|
||||
/>
|
||||
<div className="flex justify-between text-sm text-gray-500 mt-1">
|
||||
<span>3s</span>
|
||||
<span>15s</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
onClick={handleSave}
|
||||
className="w-full bg-blue-600 hover:bg-blue-700 text-white text-lg py-6"
|
||||
>
|
||||
Save Settings
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
61
components/kiosk/ticker.tsx
Normal file
61
components/kiosk/ticker.tsx
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
'use client';
|
||||
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
|
||||
interface TickerActivity {
|
||||
ticketNumber: string;
|
||||
title: string;
|
||||
priority: number;
|
||||
statusLabel: string;
|
||||
companyName: string;
|
||||
}
|
||||
|
||||
interface TickerProps {
|
||||
activities: TickerActivity[];
|
||||
}
|
||||
|
||||
export function Ticker({ activities }: TickerProps) {
|
||||
const tickerRef = useRef<HTMLDivElement>(null);
|
||||
const [isPaused, setIsPaused] = useState(false);
|
||||
|
||||
const getPriorityColor = (priority: number) => {
|
||||
if (priority <= 3) return 'text-red-500';
|
||||
if (priority <= 5) return 'text-orange-500';
|
||||
return 'text-blue-500';
|
||||
};
|
||||
|
||||
const getPriorityIcon = (priority: number) => {
|
||||
if (priority <= 3) return '🔴';
|
||||
if (priority <= 5) return '🟠';
|
||||
return '🔵';
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed bottom-0 left-0 right-0 bg-black border-t-4 border-blue-600 h-24 overflow-hidden">
|
||||
<div
|
||||
ref={tickerRef}
|
||||
className={`flex items-center h-full whitespace-nowrap ${isPaused ? '' : 'animate-ticker'}`}
|
||||
onMouseEnter={() => setIsPaused(true)}
|
||||
onMouseLeave={() => setIsPaused(false)}
|
||||
>
|
||||
{/* Duplicate activities for seamless loop */}
|
||||
{[...activities, ...activities].map((activity, index) => (
|
||||
<div
|
||||
key={`${activity.ticketNumber}-${index}`}
|
||||
className="inline-flex items-center mx-8 text-2xl"
|
||||
>
|
||||
<span className="mr-3">{getPriorityIcon(activity.priority)}</span>
|
||||
<span className={`font-bold mr-2 ${getPriorityColor(activity.priority)}`}>
|
||||
#{activity.ticketNumber}
|
||||
</span>
|
||||
<span className="text-white mr-2">-</span>
|
||||
<span className="text-gray-300 mr-2">{activity.companyName}</span>
|
||||
<span className="text-white mr-2">-</span>
|
||||
<span className="text-gray-400 mr-2">{activity.title.substring(0, 60)}</span>
|
||||
<span className="text-gray-500 text-xl">({activity.statusLabel})</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue