// 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 ( ); } 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.category_id, teamId: t.team_id || null, teamName: t.team_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), }, 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), 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 ────────────────────────────────────────────────────── const CATEGORY_FAQ = [ { id: 'technical_support', color: '#60A5FA', bg: '#EFF6FF', label: 'IT Support', team: 'IT Support Team', desc: 'Any technical issue you are facing — laptop, software, VPN, network, email, access, hardware or anything tech-related' }, { id: 'marketing', color: '#A78BFA', bg: '#F5F3FF', label: 'Marketing', team: 'Asura / Laura / Deepthi / Wade', desc: 'Campaigns, assets, brand guidelines, social media, web copy' }, { id: 'onboarding_issues', color: '#34D399', bg: '#ECFDF5', label: 'Onboarding Issues', team: 'HR Team', desc: 'New hire setup, equipment, accounts, orientation, ID cards' }, { id: 'training_issues', color: '#FBBF24', bg: '#FEF3C7', label: 'Training Issues', team: 'Training Team', desc: 'LMS access, course completion, certificates, compliance training' }, { id: 'payroll', color: '#FB7185', bg: '#FFF1F2', label: 'Payroll', team: 'HR Team', desc: 'Salary slips, reimbursements, TDS, Form 16, expense claims' }, { id: 'others', color: '#94A3B8', bg: '#F1F5F9', label: 'People Related Issues', team: 'Admin (Confidential)', desc: 'Any personal or sensitive issue faced within the organisation. Your name and details will NOT be shared — only the core admin team handles this privately' }, ]; function SubmitTicketModal({ onClose, initialCategoryId, onSubmit }) { const { categories } = window.MOCK; const userCats = categories.filter(c => !c.adminOnly); const [showFaq, setShowFaq] = React.useState(!initialCategoryId); const [form, setForm] = React.useState({ categoryId: initialCategoryId || userCats[0].id, title: '', description: '', priority: 'Medium', attachment: null, teamId: null, }); const [submitted, setSubmitted] = React.useState(false); const [submitting, setSubmitting] = React.useState(false); const [submitError, setSubmitError] = React.useState(null); const [dragOver, setDragOver] = React.useState(false); const [fileName, setFileName] = React.useState(null); const [mktTeams, setMktTeams] = React.useState([]); const fileRef = React.useRef(null); // Load marketing teams once React.useEffect(() => { fetch('/api/marketing-teams', { headers: { Authorization: 'Bearer ' + (localStorage.getItem('syn_token') || '') }, }) .then(r => r.ok ? r.json() : []) .then(setMktTeams) .catch(() => {}); }, []); function set(key, val) { setForm(f => ({ ...f, [key]: val })); } function handleFile(file) { if (!file) return; setFileName(file.name); set('attachment', file); } async function handleSubmit(e) { e.preventDefault(); if (!form.title.trim() || !form.description.trim()) return; setSubmitting(true); setSubmitError(null); try { const res = await fetch('/api/tickets', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + (localStorage.getItem('syn_token') || ''), }, body: JSON.stringify({ category_id: form.categoryId, title: form.title.trim(), description: form.description.trim(), priority: form.priority, team_id: form.teamId || null, }), }); 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); } } const selectedCat = userCats.find(c => c.id === form.categoryId); const selectedTeam = form.teamId ? mktTeams.find(t => t.id === form.teamId) : null; return (
e.target === e.currentTarget && onClose()}>
{/* Header */}
{showFaq ? 'Which concern do you have?' : 'Submit New Concern'}
{showFaq ? 'Select the right type so it reaches the correct team' : "We'll get back to you as soon as possible"}
{!showFaq && !submitted && ( )}
{/* FAQ screen */} {showFaq && !submitted && (
{CATEGORY_FAQ.map(f => (
{ setShowFaq(false); set('categoryId', f.id); if (f.id !== 'marketing') set('teamId', null); }} style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '12px 16px', border: `1.5px solid ${f.bg === '#F1F5F9' ? '#E2E8F0' : f.color}22`, borderRadius: 10, cursor: 'pointer', background: f.bg, transition: 'all 0.12s', }} onMouseEnter={e => e.currentTarget.style.boxShadow = `0 0 0 2px ${f.color}55`} onMouseLeave={e => e.currentTarget.style.boxShadow = 'none'}>
{f.label}
{f.desc}
→ {f.team}
))}
)} {submitted ? (
Concern Raised!
Your concern has been raised and will be reviewed shortly.
Close
) : (!showFaq && (
{/* Category */}
{userCats.map(cat => ( ))}
{/* Marketing team selector — only when Marketing is selected */} {form.categoryId === 'marketing' && (
Marketing Team
{/* Team dropdown */}
)} {/* Title */}
set('title', e.target.value)} placeholder="Brief summary of the issue..." required style={inputStyle} />
{/* Priority — admin only; non-admins always submit as Medium */} {window._synUser?.role === 'admin' && (
{['Low', 'Medium', 'High', 'Urgent'].map(p => { const colors = { Low: '#64748B', Medium: '#B45309', High: '#B91C1C', Urgent: '#fff' }; const bgs = { Low: '#F1F5F9', Medium: '#FFFBEB', High: '#FEF2F2', Urgent: '#DC2626' }; const active = form.priority === p; return ( ); })}
)} {/* Description */}