{isMobile && sidebarOpen && (
setSidebarOpen(false)} style={{
position: 'fixed', inset: 0, background: 'rgba(15,37,64,0.5)', zIndex: 150,
}} />
)}
setSidebarOpen(false)}
/>
{React.cloneElement(topBar, { isMobile, onToggleSidebar: () => setSidebarOpen(o => !o) })}
{children}
);
}
// ── Change Password Modal ─────────────────────────────────────────────────────
const CPW_FIELD = {
width: '100%', padding: '10px 40px 10px 14px', borderRadius: 8,
border: '1.5px solid #E2E8F0', fontSize: 14, fontFamily: 'inherit',
color: '#1E293B', background: '#FAFBFF', outline: 'none', boxSizing: 'border-box',
};
const CPW_LBL = {
display: 'block', fontSize: 11, fontWeight: 700, color: '#374151',
textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 6,
};
function ChangePasswordModal({ forced = false, onClose }) {
const [form, setForm] = React.useState({ current: '', next: '', confirm: '' });
const [show, setShow] = React.useState({ current: false, next: false, confirm: false });
const [error, setError] = React.useState(null);
const [saving, setSaving] = React.useState(false);
const [done, setDone] = React.useState(false);
function toggleShow(field) { setShow(s => ({ ...s, [field]: !s[field] })); }
async function handleSubmit(e) {
e.preventDefault();
setError(null);
if (form.next.length < 8) { setError('New password must be at least 8 characters.'); return; }
if (form.next !== form.confirm) { setError('Passwords do not match.'); return; }
if (form.next === form.current) { setError('New password must be different from the current one.'); return; }
setSaving(true);
try {
const res = await fetch('/api/auth/change-password', {
method: 'PUT',
headers: { 'Content-Type': 'application/json', Authorization: 'Bearer ' + localStorage.getItem('hub_token') },
body: JSON.stringify({ currentPassword: form.current, newPassword: form.next }),
});
const data = await res.json();
if (!res.ok) throw new Error(data.error || 'Failed');
const stored = JSON.parse(localStorage.getItem('hub_user') || '{}');
stored.force_password_change = false;
localStorage.setItem('hub_user', JSON.stringify(stored));
window._synUser = stored;
setDone(true);
} catch (e) { setError(e.message); }
finally { setSaving(false); }
}
const eyeBtn = (field) => (
);
return (
{/* Header */}
{forced ? 'Set Your Password' : 'Change Password'}
{forced ? 'You must set a new password before continuing' : 'Update your account password'}
{!forced && (
)}
{done ? (
Password Updated!
Your new password is active. Use it next time you log in.
Continue
) : (
)}
);
}
// ── Excel Export Utility ─────────────────────────────────────────────────────
async function exportTicketsToExcel(tickets, filenameBase) {
if (!window.ExcelJS) {
alert('Export library is still loading — please try again in a moment.');
return;
}
if (!tickets || tickets.length === 0) {
alert('No concerns to export.');
return;
}
const wb = new window.ExcelJS.Workbook();
wb.creator = 'K-IT Services Support Hub';
wb.created = new Date();
// ── Pre-sort: most actionable tickets first ─────────────────────────────────
const _SR = { 'Open': 0, 'In Progress': 1, 'Resolved': 2, 'Closed': 3 };
const _PR = { 'Urgent': 0, 'High': 1, 'Medium': 2, 'Low': 3 };
const sortedTickets = [...tickets].sort((a, b) => {
const s = (_SR[a.status] ?? 99) - (_SR[b.status] ?? 99); if (s) return s;
const p = (_PR[a.priority] ?? 99) - (_PR[b.priority] ?? 99); if (p) return p;
return String(b.createdAt || '').localeCompare(String(a.createdAt || ''));
});
const ws = wb.addWorksheet('Concerns', {
// Freeze header row (ySplit:1) AND Ticket ID column (xSplit:1)
// so both stay visible while scrolling in any direction
views: [{ state: 'frozen', xSplit: 1, ySplit: 1 }],
pageSetup: { orientation: 'landscape', fitToPage: true, fitToWidth: 1 },
});
// Column order: ID & Title first (no filter), then the filterable group (C–G),
// then people/description at the end (no filter needed)
ws.columns = [
{ header: 'Ticket ID', key: 'ticketId', width: 14 }, // col 1
{ header: 'Title', key: 'title', width: 42 }, // col 2
{ header: 'Type', key: 'category', width: 22 }, // col 3 ← filter start
{ header: 'Client', key: 'team', width: 18 }, // col 4
{ header: 'Status', key: 'status', width: 15 }, // col 5
{ header: 'Priority', key: 'priority', width: 12 }, // col 6
{ header: 'Date', key: 'date', width: 18 }, // col 7 ← filter end
{ header: 'Submitted By', key: 'submittedBy', width: 24 }, // col 8
{ header: 'Assigned To', key: 'assignedTo', width: 24 }, // col 9
{ header: 'Description', key: 'description', width: 70 }, // col 10
];
// AutoFilter only on the meaningful columns: Type, Client, Status, Priority, Date
ws.autoFilter = 'C1:F1';
// Style header row
const headerRow = ws.getRow(1);
headerRow.height = 30;
headerRow.eachCell(cell => {
cell.font = { bold: true, color: { argb: 'FFFFFFFF' }, size: 11, name: 'Calibri' };
cell.fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FF1A5090' } };
cell.alignment = { vertical: 'middle', horizontal: 'center', wrapText: false };
cell.border = {
top: { style: 'thin', color: { argb: 'FF0F3460' } },
bottom: { style: 'medium', color: { argb: 'FF0F3460' } },
left: { style: 'thin', color: { argb: 'FF0F3460' } },
right: { style: 'thin', color: { argb: 'FF0F3460' } },
};
});
const STATUS_FILL = {
'Open': 'FFDBEAFE',
'In Progress': 'FFFEF3C7',
'Resolved': 'FFD1FAE5',
'Closed': 'FFF1F5F9',
};
const STATUS_FONT_COLOR = {
'Open': 'FF1D4ED8',
'In Progress': 'FFB45309',
'Resolved': 'FF065F46',
'Closed': 'FF475569',
};
const PRIORITY_FILL = {
'Urgent': 'FFFEE2E2',
'High': 'FFFFEDD5',
'Medium': 'FFFEF9C3',
'Low': 'FFF0FDF4',
};
const PRIORITY_FONT_COLOR = {
'Urgent': 'FFB91C1C',
'High': 'FFEA580C',
'Medium': 'FFCA8A04',
'Low': 'FF15803D',
};
const CELL_BORDER = {
top: { style: 'thin', color: { argb: 'FFE2E8F0' } },
bottom: { style: 'thin', color: { argb: 'FFE2E8F0' } },
left: { style: 'thin', color: { argb: 'FFE2E8F0' } },
right: { style: 'thin', color: { argb: 'FFE2E8F0' } },
};
sortedTickets.forEach((t, i) => {
const cat = (window.MOCK?.categories || []).find(c => c.id === t.categoryId);
const rowBg = i % 2 === 0 ? 'FFFFFFFF' : 'FFF8FAFC';
const desc = t.description || '';
const isLongDesc = desc.length > 80;
const row = ws.addRow({
ticketId: t.id || '',
title: t.title || '',
category: cat?.label || t.categoryId || '',
team: t.clientName || '',
status: t.status || '',
priority: t.priority || '',
submittedBy: t.submittedBy?.name || '',
assignedTo: t.assignedTo?.name || '—',
description: desc,
date: t.createdAt || '',
});
// Only set a fixed height for short-description rows; long ones auto-expand via wrapText
if (!isLongDesc) row.height = 22;
row.eachCell((cell, col) => {
cell.border = CELL_BORDER;
cell.alignment = { vertical: 'middle', wrapText: false };
if (col === 1) {
// Ticket ID — monospace, branded blue
cell.font = { bold: true, color: { argb: 'FF1A5090' }, size: 10, name: 'Courier New' };
cell.fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: rowBg } };
cell.alignment = { vertical: 'middle', horizontal: 'center' };
} else if (col === 5 && STATUS_FILL[t.status]) {
// Status — colored badge
cell.fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: STATUS_FILL[t.status] } };
cell.font = { bold: true, color: { argb: STATUS_FONT_COLOR[t.status] }, size: 10, name: 'Calibri' };
cell.alignment = { vertical: 'middle', horizontal: 'center' };
} else if (col === 6 && PRIORITY_FILL[t.priority]) {
// Priority — colored badge
cell.fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: PRIORITY_FILL[t.priority] } };
cell.font = { bold: true, color: { argb: PRIORITY_FONT_COLOR[t.priority] }, size: 10, name: 'Calibri' };
cell.alignment = { vertical: 'middle', horizontal: 'center' };
} else if (col === 10) {
// Description — wrap long text, top-align so it reads naturally
cell.fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: rowBg } };
cell.font = { color: { argb: 'FF64748B' }, size: 10, name: 'Calibri' };
cell.alignment = { vertical: 'top', wrapText: true };
} else {
cell.fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: rowBg } };
cell.font = { size: 10, name: 'Calibri' };
}
});
});
// Summary footer row
ws.addRow([]);
const footerRowNum = tickets.length + 3;
const summaryRow = ws.addRow([
`K-IT Services Support Hub · ${tickets.length} concern${tickets.length !== 1 ? 's' : ''} exported · ${new Date().toLocaleDateString('en-US', { weekday: 'short', month: 'long', day: 'numeric', year: 'numeric' })}`,
]);
summaryRow.height = 18;
const summaryCell = summaryRow.getCell(1);
summaryCell.font = { italic: true, color: { argb: 'FF94A3B8' }, size: 9, name: 'Calibri' };
summaryCell.alignment = { vertical: 'middle' };
ws.mergeCells(`A${summaryRow.number}:J${summaryRow.number}`);
// ── "How to Use" tips sheet ─────────────────────────────────────────────────
const tips = wb.addWorksheet('How to Use', { tabColor: { argb: 'FF1A5090' } });
tips.columns = [{ width: 6 }, { width: 62 }];
function addTipRow(label, text, isSectionHeader) {
const row = tips.addRow(['', isSectionHeader ? label : `${label} ${text}`]);
row.height = isSectionHeader ? 22 : 18;
const cell = row.getCell(2);
if (isSectionHeader) {
cell.font = { bold: true, color: { argb: 'FFFFFFFF' }, size: 11, name: 'Calibri' };
cell.fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FF1A5090' } };
cell.alignment = { vertical: 'middle', indent: 1 };
} else {
cell.font = { size: 10, name: 'Calibri', color: { argb: 'FF1E293B' } };
cell.alignment = { vertical: 'middle', indent: 2 };
}
}
tips.addRow([]);
addTipRow('K-IT Services Support Hub — Concerns Export Guide', '', true);
tips.addRow([]);
addTipRow('SORTING & FILTERING', '', true);
addTipRow('▼ Filter arrow', 'Click the ▼ arrow in Type, Client, Status, or Priority headers to filter or sort.');
addTipRow('Sort A→Z / Z→A', 'Click the ▼ arrow → "Sort A to Z" or "Sort Z to A" to reorder any column.');
addTipRow('Filter by value', 'Click the ▼ arrow → uncheck "Select All" → tick only the values you want to see.');
addTipRow('Clear a filter', 'Click the ▼ arrow → "Clear Filter From…" to show all rows again.');
addTipRow('Multi-column sort', 'Data → Sort → Add Level to sort by Status first, then Priority, then Date.');
tips.addRow([]);
addTipRow('COLOUR CODES', '', true);
addTipRow('Status — Blue', 'Open (needs action)');
addTipRow('Status — Amber', 'In Progress (being worked on)');
addTipRow('Status — Green', 'Resolved (completed)');
addTipRow('Status — Grey', 'Closed (archived)');
addTipRow('Priority — Red', 'Urgent');
addTipRow('Priority — Orange', 'High');
addTipRow('Priority — Yellow', 'Medium');
addTipRow('Priority — Green', 'Low');
tips.addRow([]);
addTipRow('NAVIGATION', '', true);
addTipRow('Frozen panes', 'The header row and Ticket ID column stay visible while scrolling.');
addTipRow('Switch sheet', 'Click the "Concerns" tab at the bottom to go back to the data.');
// Generate & download
const buf = await wb.xlsx.writeBuffer();
const blob = new Blob([buf], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `${filenameBase || 'concerns'}-${new Date().toISOString().slice(0, 10)}.xlsx`;
document.body.appendChild(a);
a.click();
setTimeout(() => { document.body.removeChild(a); URL.revokeObjectURL(url); }, 300);
}
Object.assign(window, { IC, Avatar, StatusBadge, PriorityBadge, Btn, AppShell, TopBar, ChangePasswordModal, BRAND_ORANGE, BRAND_NAVY, exportTicketsToExcel, useIsMobile });
);
}
// ── Shared primitives ────────────────────────────────────────────────────────
// Everyone's avatar: coloured initials worked out from their name, so it is the same on every screen
// and follows a rename straight away. (initials and color props are accepted but no longer used.)
function Avatar({ name, size = 32 }) {
const [bg, fg] = window.monogramFor(name);
return (
);
}
function StatusBadge({ status }) {
const map = {
'Open': { bg: '#EFF6FF', color: '#2563EB', dot: '#3B82F6' },
'In Progress': { bg: '#FFFBEB', color: '#B45309', dot: '#F59E0B' },
'Resolved': { bg: '#ECFDF5', color: '#065F46', dot: '#10B981' },
'Closed': { bg: '#F1F5F9', color: '#475569', dot: '#94A3B8' },
};
const c = map[status] || map['Open'];
return (
{status}
);
}
function PriorityBadge({ priority }) {
const map = {
'Low': { bg: '#F1F5F9', color: '#64748B' },
'Medium': { bg: '#FFFBEB', color: '#92400E' },
'High': { bg: '#FEF2F2', color: '#B91C1C' },
'Urgent': { bg: '#DC2626', color: '#ffffff' },
};
const c = map[priority] || map['Low'];
return (
{priority}
);
}
function Btn({ children, variant = 'primary', onClick, size = 'md', icon, type, style: extraStyle, disabled }) {
const base = {
display: 'inline-flex', alignItems: 'center', gap: 6,
border: 'none', cursor: disabled ? 'not-allowed' : 'pointer', fontFamily: 'inherit',
fontWeight: 600, borderRadius: 8, transition: 'opacity 0.15s',
whiteSpace: 'nowrap', opacity: disabled ? 0.5 : 1,
};
const p = size === 'sm' ? '6px 14px' : '10px 20px';
const fs = size === 'sm' ? 13 : 14;
const variants = {
primary: { background: BRAND_ORANGE, color: '#fff', padding: p, fontSize: fs },
navy: { background: BRAND_NAVY, color: '#fff', padding: p, fontSize: fs },
ghost: { background: 'transparent', color: '#475569', padding: p, fontSize: fs, border: '1.5px solid #E2E8F0' },
danger: { background: '#FEF2F2', color: '#B91C1C', padding: p, fontSize: fs },
};
return (
);
}
// ── Sidebar ──────────────────────────────────────────────────────────────────
const NAV_ITEMS = [
{ id: 'dashboard', label: 'Dashboard', icon: 'dashboard', section: null },
{ id: 'my_tickets', label: 'Concerns', icon: 'inbox', section: null },
{ id: 'admin_clients', label: 'Clients', icon: 'users', section: 'Admin', adminOnly: true },
{ id: 'admin_users', label: 'Users', icon: 'settings', section: 'Admin', adminOnly: true },
{ id: 'admin_types', label: 'Ticket Types', icon: 'lock', section: 'Admin', adminOnly: true },
{ id: 'admin_audit', label: 'Audit Log', icon: 'list', section: 'Admin', adminOnly: true },
{ id: 'admin_mail', label: 'Email', icon: 'send', section: 'Admin', adminOnly: true },
];
function Sidebar({ page, onNav, isAdmin, tickets, user, onChangePassword, isMobile, isOpen, onClose }) {
const [hovered, setHovered] = React.useState(null);
function handleLogout() {
localStorage.removeItem('hub_token');
localStorage.removeItem('hub_user');
window.location.replace('/login.html');
}
function getBadge(id) {
if (id === 'my_tickets') return tickets.filter(t => t.status === 'Open').length;
const count = tickets.filter(t => t.categoryId === id && (t.status === 'Open' || t.status === 'In Progress')).length;
return count || null;
}
const visibleItems = NAV_ITEMS
.filter(i => !i.adminOnly || isAdmin)
;
const sectionLabel = 'Admin';
const sections = isAdmin ? [{ key: 'Admin', label: sectionLabel }] : [];
return (