// TicketViews — TicketList, TicketDetail, SubmitTicketModal, normalizeTicket, DeleteConfirmModal // Exports: TicketList, TicketDetail, SubmitTicketModal, normalizeTicket, DeleteConfirmModal function ListExportBtn({ tickets, filename }) { const [exporting, setExporting] = React.useState(false); async function handleExport() { setExporting(true); try { await window.exportTicketsToExcel(tickets, filename); } catch (e) { console.error('Export failed:', e); alert('Export failed — please try again.'); } finally { setExporting(false); } } return ( ); } // 2h 14m, 45m 10s, 30s. Time worked runs from In Progress until Resolved. function fmtDuration(sec) { sec = Math.max(0, Math.floor(Number(sec) || 0)); const d = Math.floor(sec / 86400), h = Math.floor((sec % 86400) / 3600), m = Math.floor((sec % 3600) / 60), s = sec % 60; if (d) return d + 'd ' + h + 'h'; if (h) return h + 'h ' + String(m).padStart(2, '0') + 'm'; if (m) return m + 'm ' + String(s).padStart(2, '0') + 's'; return s + 's'; } // Total time worked on a concern; keeps counting every second while it is In Progress function useWorked(ticket) { const [, tick] = React.useState(0); React.useEffect(() => { if (!ticket.workRunning) return; const t = setInterval(() => tick(n => n + 1), 1000); return () => clearInterval(t); }, [ticket.workRunning, ticket.fetchedAt]); return ticket.workSeconds + (ticket.workRunning ? (Date.now() - (ticket.fetchedAt || Date.now())) / 1000 : 0); } function WorkedTime({ ticket, style }) { const sec = useWorked(ticket); if (!ticket.workRunning && ticket.workSeconds === 0) return —; return {ticket.workRunning && ; } function normalizeTicket(t) { function mkInitials(name) { return (name || '?').split(' ').filter(Boolean).map(n => n[0]).join('').toUpperCase().slice(0, 2); } function fmtDate(val) { if (!val) return '—'; try { return new Date(val).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }); } catch { return String(val); } } return { dbId: t.id, id: t.ticket_no || `TKT-${String(t.id).padStart(4, '0')}`, categoryId: t.type_id != null ? String(t.type_id) : null, // ticket type (kept under the old field name) clientId: t.client_id || null, clientName: t.client_name || null, title: t.title, description: t.description || '', status: t.status, priority: t.priority, submittedBy: { id: t.submitted_by, name: t.submitted_by_name || 'Unknown', initials: mkInitials(t.submitted_by_name), role: t.submitted_by_role || null, }, workSeconds: Number(t.work_total) || 0, workRunning: !!Number(t.work_running), fetchedAt: Date.now(), assignedTo: t.assigned_to ? { id: t.assigned_to, name: t.assigned_to_name || 'Unknown', initials: mkInitials(t.assigned_to_name), } : null, createdAt: fmtDate(t.created_at), createdRaw: t.created_at, clientHasLogo: !!t.client_has_logo, clientLogoVer: t.client_logo_version || 0, updatedAt: fmtDate(t.updated_at), comments: (t.comments || []).map(c => ({ author: { name: c.author_name || 'Unknown', initials: mkInitials(c.author_name) }, text: c.comment, time: fmtDate(c.created_at), })), }; } // ── Submit Ticket Modal ────────────────────────────────────────────────────── function SubmitTicketModal({ onClose, initialCategoryId, onSubmit }) { const types = window.MOCK.categories; // admin-managed ticket types, loaded at start-up const isAdmin = window._synUser?.role === 'admin'; const isAgent = window._synUser?.role === 'agent'; const picksClient = isAdmin || isAgent; // admins pick any client, developers one of theirs const [clients, setClients] = React.useState([]); const [form, setForm] = React.useState({ typeId: initialCategoryId || types[0]?.id || '', clientId: '', title: '', description: '', priority: 'Medium', }); const [submitted, setSubmitted] = React.useState(false); const [submitting, setSubmitting] = React.useState(false); const [submitError, setSubmitError] = React.useState(null); const authH = () => ({ 'Content-Type': 'application/json', Authorization: 'Bearer ' + (localStorage.getItem('hub_token') || '') }); const set = (key, val) => setForm(f => ({ ...f, [key]: val })); React.useEffect(() => { if (!picksClient) return; fetch(isAdmin ? '/api/clients' : '/api/clients/mine', { headers: authH() }) .then(r => r.ok ? r.json() : []) .then(setClients) .catch(() => {}); }, []); async function handleSubmit(e) { e.preventDefault(); if (!form.title.trim() || !form.description.trim()) return; if (picksClient && !form.clientId) { setSubmitError('Please choose the client this concern is for'); return; } setSubmitting(true); setSubmitError(null); try { const res = await fetch('/api/tickets', { method: 'POST', headers: authH(), body: JSON.stringify({ type_id: Number(form.typeId), client_id: picksClient ? Number(form.clientId) : undefined, title: form.title.trim(), description: form.description.trim(), priority: isAdmin ? form.priority : undefined, }), }); if (!res.ok) { const err = await res.json(); throw new Error(err.error || 'Failed to submit concern'); } onSubmit(); setSubmitted(true); } catch (err) { setSubmitError(err.message); } finally { setSubmitting(false); } } return (
e.target === e.currentTarget && onClose()}>
Submit New Concern
We'll get back to you as soon as possible
{submitted ? (
Concern Raised!
Your concern has been raised and will be reviewed shortly.
Close
) : (
{picksClient && (
)}
{types.length === 0 &&
No ticket types exist yet. Ask an admin to add some.
}
{types.map(t => ( ))}
set('title', e.target.value)} required />
{isAdmin && (
{['Low', 'Medium', 'High', 'Urgent'].map(p => ( ))}
)}