import { Head, Link, usePage } from '@inertiajs/react'; import { AlertCircle, CheckCircle2, Clock, Pause, Ticket, TrendingUp, Wrench, } from 'lucide-react'; import { StatsCard } from '@/components/stats-card'; import { TicketPriorityBadge } from '@/components/ticket-priority-badge'; import { TicketStatusBadge } from '@/components/ticket-status-badge'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import AppLayout from '@/layouts/app-layout'; import type { BreadcrumbItem, DashboardStats, Ticket as TicketType, User, CategoryMap, } from '@/types'; const breadcrumbs: BreadcrumbItem[] = [ { title: 'Dashboard', href: '/dashboard' }, ]; const categoryLabels: Record = { hardware_repair: 'Hardware Repair', software_issue: 'Software Issue', network: 'Network', printer: 'Printer', account_access: 'Account Access', other: 'Other', }; const categoryColors: Record = { hardware_repair: 'bg-orange-500', software_issue: 'bg-blue-500', network: 'bg-purple-500', printer: 'bg-teal-500', account_access: 'bg-amber-500', other: 'bg-gray-500', }; type DashboardProps = { stats: DashboardStats; byCategory: Record; recentTickets: TicketType[]; myAssigned: TicketType[]; }; export default function Dashboard({ stats, byCategory, recentTickets, myAssigned }: DashboardProps) { const { auth } = usePage<{ auth: { user: User } }>().props; const isStaff = auth.user.role === 'admin' || auth.user.role === 'technician'; return (
{/* Welcome Header */}

Welcome back, {auth.user.name}!

{isStaff ? "Here's an overview of all ICT support tickets." : "Here's the status of your ICT support requests."}

{/* Stats Cards */}
{stats.critical > 0 && ( )} {stats.critical === 0 && ( )}
{/* Recent Tickets */}
Recent Tickets Latest ICT support requests
View all →
{recentTickets.length === 0 ? (

No tickets yet

{auth.user.role !== 'admin' && ( Create your first ticket )}
) : ( recentTickets.slice(0, 7).map((ticket) => (
{ticket.ticket_number}

{ticket.title}

by {ticket.requester?.name} · {new Date(ticket.created_at).toLocaleDateString()}

)) )}
{/* Category Breakdown */} By Category Ticket distribution
{Object.entries(categoryLabels).map(([key, label]) => { const count = byCategory[key] || 0; const total = stats.total || 1; const percentage = Math.round((count / total) * 100); return (
{label} {count}
); })}
{/* Assigned to me - only for staff */} {isStaff && myAssigned.length > 0 && ( Assigned to Me Tickets you're currently working on
{myAssigned.map((ticket) => (
{ticket.ticket_number}

{ticket.title}

from {ticket.requester?.name}

))}
)}
); }