import AdminLayout from '@/Layouts/AdminLayout'; import { Head, Link, router, usePage } from '@inertiajs/react'; import { CheckCircle, Clock, LifeBuoy, MessageSquare, Plus, TrendingUp } from 'lucide-react'; import { useState } from 'react'; import { useTranslation } from 'react-i18next'; import { formatDateTz } from '@/Utils/datetime'; const STATUS_CLS = { open: 'bg-emerald-50 text-emerald-700 border border-emerald-200 dark:bg-emerald-900/20 dark:text-emerald-400 dark:border-emerald-800', in_progress: 'bg-blue-50 text-blue-700 border border-blue-200 dark:bg-blue-900/20 dark:text-blue-400 dark:border-blue-800', closed: 'bg-neutral-100 text-neutral-500 border border-neutral-200 dark:bg-neutral-700/50 dark:text-neutral-400 dark:border-neutral-600', }; const STATUS_DOT = { open: 'bg-emerald-500', in_progress: 'bg-blue-500', closed: 'bg-neutral-400', }; const PRIORITY_STYLES = { urgent: { cls: 'text-red-600 dark:text-red-400 font-semibold', dot: 'bg-red-500' }, high: { cls: 'text-orange-500 dark:text-orange-400 font-medium', dot: 'bg-orange-500' }, normal: { cls: 'text-neutral-500 dark:text-neutral-400', dot: 'bg-neutral-400' }, low: { cls: 'text-neutral-400 dark:text-neutral-500', dot: 'bg-neutral-300' }, }; const TAB_VALUES = ['all', 'open', 'in_progress', 'closed']; function StatCard({ icon: Icon, label, value, iconCls }) { return (

{value}

{label}

); } export default function AdminSupportIndex({ tickets, stats, filters }) { const { t } = useTranslation(); const adminTz = usePage().props.timezone || 'Asia/Dhaka'; const [activeTab, setActiveTab] = useState(filters?.status ?? 'all'); const TABS = TAB_VALUES.map(v => ({ value: v, label: v === 'all' ? t('support_tickets.tab_all') : t(`support_tickets.${v}`) })); const handleTab = (tab) => { setActiveTab(tab); router.get(route('admin.support.index'), tab !== 'all' ? { status: tab } : {}, { preserveState: false, replace: true }); }; return (
{/* Header */}

{t('support_tickets.admin_title')}

{t('support_tickets.admin_subtitle')}

{t('support_tickets.new_ticket')}
{/* Stats */} {stats && (
)} {/* Filter Tabs */}
{TABS.map(tab => ( ))}
{/* Table */}
{tickets.data?.length > 0 ? ( <> {tickets.data.map(ticket => { const stCls = STATUS_CLS[ticket.status] ?? STATUS_CLS.open; const stDot = STATUS_DOT[ticket.status] ?? STATUS_DOT.open; const stLabel = t(`support_tickets.${ticket.status}`) || ticket.status; const pr = PRIORITY_STYLES[ticket.priority] ?? PRIORITY_STYLES.normal; return ( ); })}
{t('support_tickets.col_ticket')} {t('support_tickets.col_customer')} {t('support_tickets.col_priority')} {t('support_tickets.col_status')} {t('support_tickets.col_replies')} {t('support_tickets.col_submitted')}
#{ticket.id}
{ticket.subject}

{ticket.name}

{ticket.name}

{ticket.email}
{ticket.priority}
{stLabel}
{ticket.replies_count}
{formatDateTz(ticket.created_at, adminTz)} {t('support_tickets.view')}
{tickets.last_page > 1 && (

{t('support_tickets.showing', { from: tickets.from, to: tickets.to, total: tickets.total })}

{tickets.links?.map((link, i) => ( link.url ? ( ) : ( ) ))}
)} ) : (

{t('support_tickets.no_tickets_found')}

{activeTab !== 'all' ? t(`support_tickets.${activeTab}`) : t('support_tickets.no_tickets_admin_desc')}

)}
); }