import ClientLayout from '@/Layouts/ClientLayout'; import { Head, Link, usePage } from '@inertiajs/react'; import { CheckCircle, Clock, LifeBuoy, MessageSquare, Plus, Tag, XCircle } from 'lucide-react'; import { useTranslation } from 'react-i18next'; import { formatDateTz } from '@/Utils/datetime'; const STATUS_STYLE_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' }, }; function StatCard({ icon: Icon, label, value, iconCls }) { return (

{value}

{label}

); } export default function SupportIndex({ tickets, stats }) { const { flash, timezone } = usePage().props; const userTz = timezone || 'Asia/Dhaka'; const { data = [] } = tickets; const { t } = useTranslation(); return (
{/* Header */}

{t('support_tickets.title')}

{t('support_tickets.subtitle')}

{t('support_tickets.new_ticket')}
{/* Flash */} {flash?.success && (
{flash.success}
)} {/* Stats */} {stats && (
)} {/* Table */}
{data.length > 0 ? ( <> {data.map(ticket => { const stCls = STATUS_STYLE_CLS[ticket.status] ?? STATUS_STYLE_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_priority')} {t('support_tickets.col_status')} {t('support_tickets.col_replies')} {t('support_tickets.col_date')}
#{ticket.id}
{ticket.subject}

{formatDateTz(ticket.created_at, userTz)}

{ticket.priority}
{stLabel}
{ticket.replies_count}
{formatDateTz(ticket.created_at, userTz)}
{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_yet')}

{t('support_tickets.no_tickets_desc')}

{t('support_tickets.create_first')}
)}
); }