import { Head, Link } from '@inertiajs/react'; import { Badge } from '@/components/ui/badge'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { dashboard } from '@/routes'; import type { DashboardStats, SlaPerformance, Ticket } from '@/types'; type Props = { stats: DashboardStats; ticketsByStatus: Record; ticketsByPriority: Record; ticketsByCompany: Record; ticketsBySystem: Record; recentTickets: Ticket[]; slaPerformance: SlaPerformance; }; const priorityColor: Record = { low: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200', medium: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200', high: 'bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200', critical: 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200', }; const statusColor: Record = { open: 'default', in_progress: 'secondary', pending: 'outline', resolved: 'default', closed: 'secondary', }; export default function Dashboard({ stats, ticketsByStatus, ticketsByPriority, ticketsByCompany, ticketsBySystem, recentTickets, slaPerformance, }: Props) { const slaRate = slaPerformance.total > 0 ? Math.round((slaPerformance.met / slaPerformance.total) * 100) : 0; return ( <>
{/* Stat Cards */}
Total Tickets

{stats.totalTickets}

Open

{stats.openTickets}

In Progress

{stats.inProgressTickets}

Resolved

{stats.resolvedTickets}

Overdue

{stats.overdueTickets}

{/* By Status */} By Status {Object.entries(ticketsByStatus).map( ([status, count]) => (
{status.replace('_', ' ')} {count}
), )} {Object.keys(ticketsByStatus).length === 0 && (

No data

)} {/* By Priority */} By Priority {Object.entries(ticketsByPriority).map( ([priority, count]) => (
{priority} {count}
), )} {Object.keys(ticketsByPriority).length === 0 && (

No data

)} {/* SLA Performance */} SLA Performance

{slaRate}%

compliance rate

Met {slaPerformance.met}
Breached {slaPerformance.breached}
Total tracked {slaPerformance.total}
{/* By Company */} By Company {Object.entries(ticketsByCompany).length > 0 ? (
{Object.entries(ticketsByCompany).map( ([name, count]) => (
{name} {count}
), )}
) : (

No data

)} {/* By System */} By System {Object.entries(ticketsBySystem).length > 0 ? (
{Object.entries(ticketsBySystem).map( ([name, count]) => (
{name} {count}
), )}
) : (

No data

)}
{/* Recent Tickets */} Recent Tickets
{recentTickets.map((ticket) => ( ))} {recentTickets.length === 0 && ( )}
Ticket # Title Priority Status Assignee Date
{ticket.ticket_no} {ticket.title} {ticket.priority} {ticket.status.replace( '_', ' ', )} {ticket.assignee?.name ?? '—'} {new Date( ticket.created_at, ).toLocaleDateString()}
No tickets yet.
); } Dashboard.layout = { breadcrumbs: [ { title: 'Dashboard', href: dashboard(), }, ], };