Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 | 'use client'; /** * SupportDashboard - Admin support overview page */ import React from 'react'; import Link from 'next/link'; import { SupportStats } from '@/types/support'; import StatsCards from './StatsCards'; import { Icon } from '@/components/ui/icons'; export interface SupportDashboardProps { /** Support statistics */ stats: SupportStats; /** Recent tickets */ recentTickets?: Array<{ id: string; ticketNumber: string; subject: string; status: string; priority: string; createdAt: Date; }>; } export default function SupportDashboard({ stats, recentTickets = [] }: SupportDashboardProps) { return ( <div className="max-w-[1170px] mx-auto px-4 sm:px-7.5 xl:px-0 space-y-6"> {/* Header */} <div className="flex items-center justify-between"> <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">Support Dashboard</h1> <Link href="/admin/support/tickets" className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors" > View All Tickets </Link> </div> {/* Stats Cards */} <StatsCards stats={stats} /> {/* Quick Actions & Recent Tickets */} <div className="grid grid-cols-1 lg:grid-cols-2 gap-6"> {/* Quick Actions */} <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-6"> <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">Quick Actions</h2> <div className="space-y-3"> <Link href="/admin/support/tickets?status=OPEN" className="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors" > <span className="font-medium text-gray-700 dark:text-gray-300">Open Tickets</span> <span className="bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 px-2 py-1 rounded text-sm font-medium"> {stats.ticketsByStatus.OPEN || 0} </span> </Link> <Link href="/admin/support/tickets?priority=URGENT" className="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors" > <span className="font-medium text-gray-700 dark:text-gray-300">Urgent Tickets</span> <span className="bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-300 px-2 py-1 rounded text-sm font-medium"> {stats.ticketsByPriority.URGENT || 0} </span> </Link> <Link href="/admin/support/tickets?assignedToId=null" className="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors" > <span className="font-medium text-gray-700 dark:text-gray-300">Unassigned Tickets</span> <span className="bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-300 px-2 py-1 rounded text-sm font-medium"> View </span> </Link> <Link href="/admin/support/articles" className="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors" > <span className="font-medium text-gray-700 dark:text-gray-300">Manage Articles</span> <Icon name="chevron-right" size={20} className="text-gray-400" /> </Link> <Link href="/admin/support/canned-responses" className="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors" > <span className="font-medium text-gray-700 dark:text-gray-300">Canned Responses</span> <Icon name="chevron-right" size={20} className="text-gray-400" /> </Link> </div> </div> {/* Recent Tickets */} <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-6"> <div className="flex items-center justify-between mb-4"> <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">Recent Tickets</h2> <Link href="/admin/support/tickets" className="text-sm text-blue-600 hover:text-blue-700"> View all </Link> </div> {recentTickets.length === 0 ? ( <p className="text-gray-500 dark:text-gray-400 text-center py-8">No tickets yet</p> ) : ( <div className="space-y-3"> {recentTickets.slice(0, 5).map((ticket) => ( <Link key={ticket.id} href={`/admin/support/tickets/${ticket.id}`} className="block p-3 bg-gray-50 dark:bg-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors" > <div className="flex items-center justify-between mb-1"> <span className="text-sm font-medium text-gray-500 dark:text-gray-400">{ticket.ticketNumber}</span> <span className={`text-xs px-2 py-0.5 rounded-full ${ ticket.priority === 'URGENT' ? 'bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-300' : ticket.priority === 'HIGH' ? 'bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-300' : 'bg-gray-100 dark:bg-gray-600 text-gray-600 dark:text-gray-300' }`}> {ticket.priority} </span> </div> <p className="text-gray-900 dark:text-gray-100 font-medium truncate">{ticket.subject}</p> <p className="text-xs text-gray-500 dark:text-gray-400 mt-1"> {new Date(ticket.createdAt).toLocaleDateString()} </p> </Link> ))} </div> )} </div> </div> </div> ); } |