import ClientLayout from '@/Layouts/ClientLayout'; import { Head, Link, useForm, usePage } from '@inertiajs/react'; import { ArrowLeft, CheckCircle, Clock, Lock, MessageSquare, Send, Shield } from 'lucide-react'; import { useTranslation } from 'react-i18next'; import { formatInTz } from '@/Utils/datetime'; const STATUS_CLS = { open: 'bg-emerald-50 text-emerald-700 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-blue-200 dark:bg-blue-900/20 dark:text-blue-400 dark:border-blue-800', closed: 'bg-neutral-100 text-neutral-500 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: 'text-red-600 dark:text-red-400', high: 'text-orange-500 dark:text-orange-400', normal: 'text-neutral-500 dark:text-neutral-400', low: 'text-neutral-400 dark:text-neutral-500', }; function Avatar({ name, staff = false }) { const initials = name?.split(' ').map(n => n[0]).join('').slice(0, 2).toUpperCase() ?? '?'; return (
{staff ? : initials}
); } export default function SupportShow({ ticket }) { const { flash, timezone } = usePage().props; const userTz = timezone || 'Asia/Dhaka'; const formatTime = (iso) => formatInTz(iso, userTz, { year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit', timeZoneName: undefined }); const { t } = useTranslation(); const { data, setData, post, processing, errors, reset } = useForm({ message: '' }); const isClosed = ticket.status === 'closed'; 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 submit = (e) => { e.preventDefault(); post(route('client.support.reply', ticket.id), { onSuccess: () => reset() }); }; return (
{/* Header */}

{ticket.subject}

{stLabel} {ticket.priority} {t('support_tickets.priority_suffix')} #{ticket.id}
{/* Flash */} {flash?.success && (
{flash.success}
)} {/* Conversation */}
{/* Original message */}
{ticket.name} {t('support_tickets.you_label')}
{formatTime(ticket.created_at)}

{ticket.message}

{/* Replies */} {ticket.replies?.map(reply => (
{reply.author_name} {reply.is_staff && ( {t('support_tickets.support_label')} )}
{formatTime(reply.created_at)}

{reply.message}

))}
{/* Reply or closed notice */} {isClosed ? (

{t('support_tickets.ticket_closed')}

{t('support_tickets.need_more_help')}{' '} {t('support_tickets.open_new_ticket')}

) : (
{t('support_tickets.add_reply')}