1062 lines
46 KiB
TypeScript
1062 lines
46 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState, useEffect, useCallback } from 'react';
|
|
import {
|
|
OperationsRole,
|
|
SupportTicketSummary,
|
|
SupportTicketDetail,
|
|
SupportTicketType,
|
|
SupportTicketSeverity,
|
|
SupportTicketStatus,
|
|
SupportDiagnosticBundle,
|
|
} from './types';
|
|
import { SupportReportModal } from './support-report-modal';
|
|
|
|
interface OperationsSupportProps {
|
|
role: OperationsRole;
|
|
}
|
|
|
|
type TabFilter = 'all' | 'bug_reports' | 'contact_requests' | 'in_progress' | 'resolved';
|
|
|
|
export function OperationsSupport({ role: _role }: OperationsSupportProps) {
|
|
const [tickets, setTickets] = useState<SupportTicketSummary[]>([]);
|
|
const [totalCount, setTotalCount] = useState<number | null>(null);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const [isRefreshing, setIsRefreshing] = useState(false);
|
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
|
const [errorMessage, setErrorMessage] = useState<string | null>(null);
|
|
|
|
// Tab & Search filters
|
|
const [activeTab, setActiveTab] = useState<TabFilter>('all');
|
|
const [searchQuery, setSearchQuery] = useState('');
|
|
const [appliedSearch, setAppliedSearch] = useState('');
|
|
|
|
// Ticket Detail state
|
|
const [selectedTicketId, setSelectedTicketId] = useState<string | null>(null);
|
|
const [ticketDetail, setTicketDetail] = useState<SupportTicketDetail | null>(null);
|
|
const [isLoadingDetail, setIsLoadingDetail] = useState(false);
|
|
const [detailError, setDetailError] = useState<string | null>(null);
|
|
|
|
// Status transition state
|
|
const [isUpdatingStatus, setIsUpdatingStatus] = useState(false);
|
|
const [statusUpdateError, setStatusUpdateError] = useState<string | null>(null);
|
|
|
|
// Append-only Note form state
|
|
const [newNoteBody, setNewNoteBody] = useState('');
|
|
const [isSubmittingNote, setIsSubmittingNote] = useState(false);
|
|
const [noteError, setNoteError] = useState<string | null>(null);
|
|
|
|
// Diagnostics Inspection Modal state
|
|
const [isDiagnosticsModalOpen, setIsDiagnosticsModalOpen] = useState(false);
|
|
const [diagnosticsReason, setDiagnosticsReason] = useState('');
|
|
const [isLoadingDiagnostics, setIsLoadingDiagnostics] = useState(false);
|
|
const [diagnosticsError, setDiagnosticsError] = useState<string | null>(null);
|
|
const [diagnosticBundle, setDiagnosticBundle] = useState<SupportDiagnosticBundle | null>(null);
|
|
|
|
// Fetch tickets list (Manual only, zero automatic polling)
|
|
const fetchTickets = useCallback(
|
|
async (isManualRefresh = false) => {
|
|
if (isManualRefresh) {
|
|
setIsRefreshing(true);
|
|
} else {
|
|
setIsLoading(true);
|
|
setErrorMessage(null);
|
|
}
|
|
|
|
const params = new URLSearchParams();
|
|
if (appliedSearch.trim()) {
|
|
params.set('q', appliedSearch.trim());
|
|
}
|
|
|
|
if (activeTab === 'bug_reports') {
|
|
params.set('type_filter', 'bug_report');
|
|
} else if (activeTab === 'contact_requests') {
|
|
params.set('type_filter', 'contact_request');
|
|
} else if (activeTab === 'in_progress') {
|
|
params.set('status_filter', 'in_progress');
|
|
} else if (activeTab === 'resolved') {
|
|
params.set('status_filter', 'resolved');
|
|
}
|
|
|
|
try {
|
|
const response = await fetch(`/api/ops/support/tickets?${params.toString()}`, {
|
|
method: 'GET',
|
|
headers: { accept: 'application/json' },
|
|
cache: 'no-store',
|
|
});
|
|
|
|
if (response.status === 401) {
|
|
setErrorMessage('Your Operations session has expired.');
|
|
return;
|
|
}
|
|
if (response.status === 403) {
|
|
setErrorMessage('You do not have authority to view support tickets.');
|
|
return;
|
|
}
|
|
if (!response.ok) {
|
|
setErrorMessage('Failed to load support tickets from platform.');
|
|
return;
|
|
}
|
|
|
|
const data = await response.json();
|
|
const items: SupportTicketSummary[] = Array.isArray(data?.items) ? data.items : [];
|
|
setTickets(items);
|
|
if (typeof data?.total === 'number') {
|
|
setTotalCount(data.total);
|
|
} else {
|
|
setTotalCount(items.length);
|
|
}
|
|
} catch {
|
|
setErrorMessage('Unable to connect to Operations platform.');
|
|
} finally {
|
|
setIsLoading(false);
|
|
setIsRefreshing(false);
|
|
}
|
|
},
|
|
[activeTab, appliedSearch]
|
|
);
|
|
|
|
// Initial fetch on tab or applied search change
|
|
useEffect(() => {
|
|
fetchTickets(false);
|
|
}, [fetchTickets]);
|
|
|
|
// Fetch individual ticket detail
|
|
const fetchTicketDetail = useCallback(async (ticketId: string) => {
|
|
setIsLoadingDetail(true);
|
|
setDetailError(null);
|
|
setDiagnosticBundle(null);
|
|
setDiagnosticsError(null);
|
|
setNoteError(null);
|
|
setStatusUpdateError(null);
|
|
|
|
try {
|
|
const response = await fetch(`/api/ops/support/tickets/${encodeURIComponent(ticketId)}`, {
|
|
method: 'GET',
|
|
headers: { accept: 'application/json' },
|
|
cache: 'no-store',
|
|
});
|
|
|
|
if (response.status === 401) {
|
|
setDetailError('Your Operations session has expired.');
|
|
return;
|
|
}
|
|
if (response.status === 403) {
|
|
setDetailError('You do not have authority to view this ticket.');
|
|
return;
|
|
}
|
|
if (response.status === 404) {
|
|
setDetailError('Support ticket not found.');
|
|
return;
|
|
}
|
|
if (!response.ok) {
|
|
setDetailError('Failed to load ticket details.');
|
|
return;
|
|
}
|
|
|
|
const data = (await response.json()) as SupportTicketDetail;
|
|
setTicketDetail(data);
|
|
if (data.diagnostic_bundle) {
|
|
setDiagnosticBundle(data.diagnostic_bundle);
|
|
}
|
|
} catch {
|
|
setDetailError('Unable to connect to Operations platform.');
|
|
} finally {
|
|
setIsLoadingDetail(false);
|
|
}
|
|
}, []);
|
|
|
|
const handleSelectTicket = (ticketId: string) => {
|
|
setSelectedTicketId(ticketId);
|
|
void fetchTicketDetail(ticketId);
|
|
};
|
|
|
|
const handleBackToList = () => {
|
|
setSelectedTicketId(null);
|
|
setTicketDetail(null);
|
|
setDiagnosticBundle(null);
|
|
setIsDiagnosticsModalOpen(false);
|
|
setDiagnosticsReason('');
|
|
};
|
|
|
|
// Status transition action
|
|
const handleUpdateStatus = async (newStatus: SupportTicketStatus) => {
|
|
if (!selectedTicketId || isUpdatingStatus) return;
|
|
setIsUpdatingStatus(true);
|
|
setStatusUpdateError(null);
|
|
|
|
try {
|
|
const response = await fetch(`/api/ops/support/tickets/${encodeURIComponent(selectedTicketId)}`, {
|
|
method: 'PATCH',
|
|
headers: {
|
|
'content-type': 'application/json',
|
|
accept: 'application/json',
|
|
},
|
|
body: JSON.stringify({ status: newStatus }),
|
|
});
|
|
|
|
if (response.status === 401) {
|
|
setStatusUpdateError('Your Operations session has expired.');
|
|
return;
|
|
}
|
|
if (response.status === 403) {
|
|
setStatusUpdateError('You do not have authority to update ticket status.');
|
|
return;
|
|
}
|
|
if (!response.ok) {
|
|
const errData = await response.json().catch(() => null);
|
|
setStatusUpdateError(errData?.detail ?? 'Failed to update ticket status.');
|
|
return;
|
|
}
|
|
|
|
const updated = (await response.json()) as SupportTicketDetail;
|
|
setTicketDetail(updated);
|
|
|
|
// Refresh list to update status badge in background
|
|
void fetchTickets(false);
|
|
} catch {
|
|
setStatusUpdateError('Network error while updating ticket status.');
|
|
} finally {
|
|
setIsUpdatingStatus(false);
|
|
}
|
|
};
|
|
|
|
// Append-only Note submission
|
|
const handleAddNote = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (!selectedTicketId || !newNoteBody.trim() || isSubmittingNote) return;
|
|
|
|
setIsSubmittingNote(true);
|
|
setNoteError(null);
|
|
|
|
try {
|
|
const response = await fetch(`/api/ops/support/tickets/${encodeURIComponent(selectedTicketId)}/notes`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'content-type': 'application/json',
|
|
accept: 'application/json',
|
|
},
|
|
body: JSON.stringify({ body: newNoteBody.trim() }),
|
|
});
|
|
|
|
if (response.status === 401) {
|
|
setNoteError('Your Operations session has expired.');
|
|
return;
|
|
}
|
|
if (response.status === 403) {
|
|
setNoteError('You do not have authority to append notes.');
|
|
return;
|
|
}
|
|
if (!response.ok) {
|
|
const errData = await response.json().catch(() => null);
|
|
setNoteError(errData?.detail ?? 'Failed to append note.');
|
|
return;
|
|
}
|
|
|
|
setNewNoteBody('');
|
|
// Re-fetch detail to get updated notes list
|
|
void fetchTicketDetail(selectedTicketId);
|
|
} catch {
|
|
setNoteError('Network error while saving note.');
|
|
} finally {
|
|
setIsSubmittingNote(false);
|
|
}
|
|
};
|
|
|
|
// Inspect diagnostics with audited reason
|
|
const handleInspectDiagnostics = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (!selectedTicketId || diagnosticsReason.trim().length < 3 || isLoadingDiagnostics) return;
|
|
|
|
setIsLoadingDiagnostics(true);
|
|
setDiagnosticsError(null);
|
|
|
|
try {
|
|
const params = new URLSearchParams({ reason: diagnosticsReason.trim() });
|
|
const response = await fetch(
|
|
`/api/ops/support/tickets/${encodeURIComponent(selectedTicketId)}/diagnostics?${params.toString()}`,
|
|
{
|
|
method: 'GET',
|
|
headers: { accept: 'application/json' },
|
|
cache: 'no-store',
|
|
}
|
|
);
|
|
|
|
if (response.status === 401) {
|
|
setDiagnosticsError('Your Operations session has expired.');
|
|
return;
|
|
}
|
|
if (response.status === 403) {
|
|
setDiagnosticsError('You do not have authority to inspect diagnostics.');
|
|
return;
|
|
}
|
|
if (response.status === 404) {
|
|
setDiagnosticsError('No diagnostic bundle found for this ticket.');
|
|
return;
|
|
}
|
|
if (response.status === 422) {
|
|
setDiagnosticsError('Operational reason must be at least 3 characters.');
|
|
return;
|
|
}
|
|
if (!response.ok) {
|
|
setDiagnosticsError('Failed to retrieve diagnostic bundle.');
|
|
return;
|
|
}
|
|
|
|
const bundle = (await response.json()) as SupportDiagnosticBundle;
|
|
setDiagnosticBundle(bundle);
|
|
setIsDiagnosticsModalOpen(false);
|
|
setDiagnosticsReason('');
|
|
} catch {
|
|
setDiagnosticsError('Network error while retrieving diagnostics.');
|
|
} finally {
|
|
setIsLoadingDiagnostics(false);
|
|
}
|
|
};
|
|
|
|
// Badge render helpers
|
|
const renderTypeBadge = (type: SupportTicketType) => {
|
|
switch (type) {
|
|
case 'bug_report':
|
|
return (
|
|
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-[11px] font-mono font-medium bg-error/15 text-error border border-error/30">
|
|
<span className="material-symbols-outlined text-[13px]">bug_report</span>
|
|
Bug Report
|
|
</span>
|
|
);
|
|
case 'contact_request':
|
|
return (
|
|
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-[11px] font-mono font-medium bg-primary-container/15 text-primary-container border border-primary-container/30">
|
|
<span className="material-symbols-outlined text-[13px]">mail</span>
|
|
Contact
|
|
</span>
|
|
);
|
|
case 'telemetry_issue':
|
|
return (
|
|
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-[11px] font-mono font-medium bg-tertiary-container/15 text-tertiary-container border border-tertiary-container/30">
|
|
<span className="material-symbols-outlined text-[13px]">sensors</span>
|
|
Telemetry
|
|
</span>
|
|
);
|
|
case 'general':
|
|
default:
|
|
return (
|
|
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-[11px] font-mono font-medium bg-surface-container-highest text-on-surface-variant border border-outline-variant/30">
|
|
<span className="material-symbols-outlined text-[13px]">help_outline</span>
|
|
General
|
|
</span>
|
|
);
|
|
}
|
|
};
|
|
|
|
const renderSeverityBadge = (sev: SupportTicketSeverity) => {
|
|
switch (sev) {
|
|
case 'critical':
|
|
return (
|
|
<span className="px-2 py-0.5 rounded text-[11px] font-mono font-semibold bg-error/20 text-error border border-error/40">
|
|
Critical
|
|
</span>
|
|
);
|
|
case 'high':
|
|
return (
|
|
<span className="px-2 py-0.5 rounded text-[11px] font-mono font-medium bg-amber-500/20 text-amber-400 border border-amber-500/30">
|
|
High
|
|
</span>
|
|
);
|
|
case 'medium':
|
|
return (
|
|
<span className="px-2 py-0.5 rounded text-[11px] font-mono font-medium bg-yellow-500/15 text-yellow-300 border border-yellow-500/30">
|
|
Medium
|
|
</span>
|
|
);
|
|
case 'low':
|
|
default:
|
|
return (
|
|
<span className="px-2 py-0.5 rounded text-[11px] font-mono font-medium bg-surface-container-highest text-outline border border-outline-variant/20">
|
|
Low
|
|
</span>
|
|
);
|
|
}
|
|
};
|
|
|
|
const renderStatusBadge = (status: SupportTicketStatus) => {
|
|
switch (status) {
|
|
case 'open':
|
|
return (
|
|
<span className="px-2 py-0.5 rounded text-[11px] font-mono font-medium bg-primary-container/15 text-primary-container border border-primary-container/30">
|
|
Open
|
|
</span>
|
|
);
|
|
case 'in_progress':
|
|
return (
|
|
<span className="px-2 py-0.5 rounded text-[11px] font-mono font-medium bg-cyan-500/15 text-cyan-300 border border-cyan-500/30">
|
|
In Progress
|
|
</span>
|
|
);
|
|
case 'resolved':
|
|
return (
|
|
<span className="px-2 py-0.5 rounded text-[11px] font-mono font-medium bg-emerald-500/15 text-emerald-400 border border-emerald-500/30">
|
|
Resolved
|
|
</span>
|
|
);
|
|
case 'closed':
|
|
default:
|
|
return (
|
|
<span className="px-2 py-0.5 rounded text-[11px] font-mono font-medium bg-surface-container-highest text-outline border border-outline-variant/30">
|
|
Closed
|
|
</span>
|
|
);
|
|
}
|
|
};
|
|
|
|
// If a ticket is selected, render Ticket Detail Pane
|
|
if (selectedTicketId) {
|
|
return (
|
|
<div className="space-y-6 animate-in fade-in duration-200">
|
|
{/* Detail Top Header */}
|
|
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 border-b border-outline-variant/20 pb-5">
|
|
<div className="flex items-center gap-3">
|
|
<button
|
|
type="button"
|
|
onClick={handleBackToList}
|
|
className="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl border border-outline-variant/30 bg-surface-container-low hover:bg-surface-container-high text-xs sm:text-sm font-semibold text-on-surface transition-colors focus-visible:ring-2 focus-visible:ring-primary-container focus-visible:outline-none"
|
|
>
|
|
<span className="material-symbols-outlined text-[18px]">arrow_back</span>
|
|
Back to Inbox
|
|
</button>
|
|
<h1 className="text-2xl sm:text-3xl font-headline-xl font-extrabold text-on-surface tracking-tight">
|
|
{ticketDetail ? ticketDetail.case_reference : 'Ticket Details'}
|
|
</h1>
|
|
</div>
|
|
|
|
{/* Action Buttons */}
|
|
{ticketDetail && (
|
|
<div className="flex flex-wrap items-center gap-2.5">
|
|
{ticketDetail.status !== 'in_progress' && (
|
|
<button
|
|
type="button"
|
|
onClick={() => handleUpdateStatus('in_progress')}
|
|
disabled={isUpdatingStatus}
|
|
className="px-4 py-2.5 rounded-xl border border-cyan-500/40 bg-cyan-500/10 hover:bg-cyan-500/20 text-cyan-300 text-xs sm:text-sm font-semibold transition-colors disabled:opacity-50"
|
|
>
|
|
Mark In Progress
|
|
</button>
|
|
)}
|
|
{ticketDetail.status !== 'resolved' && (
|
|
<button
|
|
type="button"
|
|
onClick={() => handleUpdateStatus('resolved')}
|
|
disabled={isUpdatingStatus}
|
|
className="px-4 py-2.5 rounded-xl border border-emerald-500/40 bg-emerald-500/10 hover:bg-emerald-500/20 text-emerald-400 text-xs sm:text-sm font-semibold transition-colors disabled:opacity-50"
|
|
>
|
|
Resolve
|
|
</button>
|
|
)}
|
|
{ticketDetail.status !== 'closed' && (
|
|
<button
|
|
type="button"
|
|
onClick={() => handleUpdateStatus('closed')}
|
|
disabled={isUpdatingStatus}
|
|
className="px-4 py-2.5 rounded-xl border border-outline-variant/30 bg-surface-container hover:bg-surface-container-high text-on-surface-variant text-xs sm:text-sm font-semibold transition-colors disabled:opacity-50"
|
|
>
|
|
Close
|
|
</button>
|
|
)}
|
|
{(ticketDetail.status === 'resolved' || ticketDetail.status === 'closed') && (
|
|
<button
|
|
type="button"
|
|
onClick={() => handleUpdateStatus('open')}
|
|
disabled={isUpdatingStatus}
|
|
className="px-4 py-2.5 rounded-xl border border-primary-container/40 bg-primary-container/10 hover:bg-primary-container/20 text-primary-container text-xs sm:text-sm font-semibold transition-colors disabled:opacity-50"
|
|
>
|
|
Reopen Ticket
|
|
</button>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{statusUpdateError && (
|
|
<div className="p-3 rounded-lg bg-error/15 border border-error/30 text-error text-xs">
|
|
{statusUpdateError}
|
|
</div>
|
|
)}
|
|
|
|
{isLoadingDetail && (
|
|
<div className="p-8 text-center text-sm text-outline">Loading ticket details...</div>
|
|
)}
|
|
|
|
{detailError && (
|
|
<div className="p-4 rounded-lg bg-error/15 border border-error/30 text-error text-sm">
|
|
{detailError}
|
|
</div>
|
|
)}
|
|
|
|
{ticketDetail && !isLoadingDetail && (
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
{/* Main Content Column (2 cols) */}
|
|
<div className="lg:col-span-2 space-y-6">
|
|
{/* Ticket Overview Card */}
|
|
<div className="p-5 rounded-xl bg-surface-container-low border border-outline-variant/30 space-y-4">
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
{renderTypeBadge(ticketDetail.ticket_type)}
|
|
{renderSeverityBadge(ticketDetail.severity)}
|
|
{renderStatusBadge(ticketDetail.status)}
|
|
</div>
|
|
|
|
<div>
|
|
<h2 className="text-base font-bold text-on-surface">{ticketDetail.subject}</h2>
|
|
<p className="mt-2 text-sm text-on-surface-variant whitespace-pre-wrap leading-relaxed">
|
|
{ticketDetail.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Submitted Diagnostics Section */}
|
|
<div className="p-5 rounded-xl bg-surface-container-low border border-outline-variant/30 space-y-4">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<span className="material-symbols-outlined text-primary-container text-[20px]">
|
|
terminal
|
|
</span>
|
|
<h3 className="text-sm font-bold text-on-surface">
|
|
Submitted Diagnostics
|
|
</h3>
|
|
</div>
|
|
{ticketDetail.has_diagnostics && !diagnosticBundle && (
|
|
<button
|
|
type="button"
|
|
onClick={() => setIsDiagnosticsModalOpen(true)}
|
|
className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-primary-container/40 bg-primary-container/10 hover:bg-primary-container/20 text-primary-container text-xs font-medium transition-colors"
|
|
>
|
|
<span className="material-symbols-outlined text-[15px]">visibility</span>
|
|
Inspect Submitted Diagnostics
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
{!ticketDetail.has_diagnostics ? (
|
|
<p className="text-xs text-outline italic">
|
|
No diagnostic bundle was submitted with this support ticket.
|
|
</p>
|
|
) : !diagnosticBundle ? (
|
|
<div className="p-4 rounded-lg bg-surface-container-lowest border border-outline-variant/20 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
|
|
<div className="space-y-1">
|
|
<span className="text-xs font-semibold text-on-surface">
|
|
Diagnostic environment & telemetry logs available
|
|
</span>
|
|
<p className="text-[11px] text-outline">
|
|
Inspection requires audit justification to ensure rider telemetry privacy.
|
|
</p>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={() => setIsDiagnosticsModalOpen(true)}
|
|
className="px-3 py-1 rounded bg-primary-container text-on-primary-container text-xs font-semibold hover:opacity-90 transition-opacity"
|
|
>
|
|
Inspect Diagnostics
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-4 pt-2 border-t border-outline-variant/20">
|
|
{/* Environment metadata grid */}
|
|
<div className="grid grid-cols-2 sm:grid-cols-4 gap-3 text-xs">
|
|
<div className="p-3 rounded-lg bg-surface-container-lowest border border-outline-variant/20">
|
|
<span className="text-[10px] text-outline font-mono block">App Version</span>
|
|
<span className="font-mono text-on-surface font-medium">{diagnosticBundle.app_version}</span>
|
|
</div>
|
|
<div className="p-3 rounded-lg bg-surface-container-lowest border border-outline-variant/20">
|
|
<span className="text-[10px] text-outline font-mono block">OS Version</span>
|
|
<span className="font-mono text-on-surface font-medium">{diagnosticBundle.os_version}</span>
|
|
</div>
|
|
<div className="p-3 rounded-lg bg-surface-container-lowest border border-outline-variant/20">
|
|
<span className="text-[10px] text-outline font-mono block">Device Model</span>
|
|
<span className="font-mono text-on-surface font-medium">{diagnosticBundle.device_model}</span>
|
|
</div>
|
|
<div className="p-3 rounded-lg bg-surface-container-lowest border border-outline-variant/20">
|
|
<span className="text-[10px] text-outline font-mono block">Submitted At</span>
|
|
<span className="font-mono text-on-surface font-medium">
|
|
{new Date(diagnosticBundle.submitted_at).toLocaleTimeString()}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Sensor Status */}
|
|
<div className="p-3 rounded-lg bg-surface-container-lowest border border-outline-variant/20">
|
|
<span className="text-[10px] text-outline font-mono block mb-1">
|
|
Sensor Fusion & Hardware State
|
|
</span>
|
|
<code className="text-xs font-mono text-primary-container">
|
|
{diagnosticBundle.sensor_status}
|
|
</code>
|
|
</div>
|
|
|
|
{/* Stack Trace */}
|
|
{diagnosticBundle.stack_trace && (
|
|
<div className="space-y-1">
|
|
<span className="text-[11px] font-mono text-error block">
|
|
Captured Exception Stack Trace
|
|
</span>
|
|
<pre className="p-3 rounded-lg bg-[#0d1117] text-error border border-error/30 font-mono text-[11px] overflow-x-auto whitespace-pre-wrap leading-relaxed">
|
|
{diagnosticBundle.stack_trace}
|
|
</pre>
|
|
</div>
|
|
)}
|
|
|
|
{/* Logs Snippet */}
|
|
{diagnosticBundle.logs_snippet && (
|
|
<div className="space-y-1">
|
|
<span className="text-[11px] font-mono text-on-surface-variant block">
|
|
Device Logs Snippet
|
|
</span>
|
|
<pre className="p-3 rounded-lg bg-[#0d1117] text-on-surface border border-outline-variant/30 font-mono text-[11px] overflow-x-auto whitespace-pre-wrap leading-relaxed">
|
|
{diagnosticBundle.logs_snippet}
|
|
</pre>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Append-Only Internal Notes Section */}
|
|
<div className="p-5 rounded-xl bg-surface-container-low border border-outline-variant/30 space-y-4">
|
|
<div className="flex items-center gap-2">
|
|
<span className="material-symbols-outlined text-primary-container text-[20px]">
|
|
note_stack
|
|
</span>
|
|
<h3 className="text-sm font-bold text-on-surface">
|
|
Internal Operator Notes ({ticketDetail.notes?.length ?? 0})
|
|
</h3>
|
|
</div>
|
|
|
|
{/* Notes List */}
|
|
<div className="space-y-3">
|
|
{!ticketDetail.notes || ticketDetail.notes.length === 0 ? (
|
|
<p className="text-xs text-outline italic">No operator notes appended yet.</p>
|
|
) : (
|
|
ticketDetail.notes.map((note) => (
|
|
<div
|
|
key={note.id}
|
|
className="p-3 rounded-lg bg-surface-container-lowest border border-outline-variant/20 space-y-1.5"
|
|
>
|
|
<div className="flex items-center justify-between text-[11px]">
|
|
<span className="font-mono text-primary-fixed-dim font-medium">
|
|
{note.author_identity}
|
|
</span>
|
|
<span className="text-outline font-mono">
|
|
{new Date(note.created_at).toLocaleString()}
|
|
</span>
|
|
</div>
|
|
<p className="text-xs text-on-surface whitespace-pre-wrap leading-relaxed">
|
|
{note.body}
|
|
</p>
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
|
|
{/* Add Note Form */}
|
|
<form onSubmit={handleAddNote} className="space-y-3 pt-3 border-t border-outline-variant/20">
|
|
<div>
|
|
<label htmlFor="support-note-input" className="block text-xs font-medium text-on-surface-variant mb-1">
|
|
Add Internal Note
|
|
</label>
|
|
<textarea
|
|
id="support-note-input"
|
|
value={newNoteBody}
|
|
onChange={(e) => setNewNoteBody(e.target.value)}
|
|
placeholder="Add an internal note or update for other operators..."
|
|
rows={3}
|
|
className="w-full rounded-lg bg-surface-container-lowest border border-outline-variant/30 px-3 py-2 text-xs text-on-surface placeholder:text-outline focus-visible:ring-2 focus-visible:ring-primary-container focus-visible:outline-none"
|
|
/>
|
|
</div>
|
|
|
|
{noteError && (
|
|
<div className="text-xs text-error">{noteError}</div>
|
|
)}
|
|
|
|
<div className="flex justify-end">
|
|
<button
|
|
type="submit"
|
|
disabled={!newNoteBody.trim() || isSubmittingNote}
|
|
className="px-3 py-1.5 rounded-lg bg-primary-container text-on-primary-container text-xs font-semibold hover:opacity-90 transition-opacity disabled:opacity-40"
|
|
>
|
|
{isSubmittingNote ? 'Saving...' : 'Add Note'}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Sidebar Meta Column (1 col) */}
|
|
<div className="space-y-4">
|
|
<div className="p-4 rounded-xl bg-surface-container-low border border-outline-variant/30 space-y-3">
|
|
<h4 className="text-xs font-bold text-on-surface">
|
|
Ticket Metadata
|
|
</h4>
|
|
|
|
<div className="space-y-2 text-xs">
|
|
<div>
|
|
<span className="text-outline block text-[10px] font-mono">Case Reference</span>
|
|
<span className="font-mono text-on-surface font-bold">{ticketDetail.case_reference}</span>
|
|
</div>
|
|
<div>
|
|
<span className="text-outline block text-[10px] font-mono">Reporter Email</span>
|
|
<span className="text-on-surface break-all">{ticketDetail.reporter_email}</span>
|
|
</div>
|
|
<div>
|
|
<span className="text-outline block text-[10px] font-mono">Submitted Date</span>
|
|
<span className="text-on-surface">
|
|
{new Date(ticketDetail.created_at).toLocaleString()}
|
|
</span>
|
|
</div>
|
|
<div>
|
|
<span className="text-outline block text-[10px] font-mono">Last Updated</span>
|
|
<span className="text-on-surface">
|
|
{new Date(ticketDetail.updated_at).toLocaleString()}
|
|
</span>
|
|
</div>
|
|
{ticketDetail.resolved_at && (
|
|
<div>
|
|
<span className="text-outline block text-[10px] font-mono">Resolved Date</span>
|
|
<span className="text-emerald-400">
|
|
{new Date(ticketDetail.resolved_at).toLocaleString()}
|
|
</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Diagnostics Reason Confirmation Modal */}
|
|
{isDiagnosticsModalOpen && (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6 bg-black/75 backdrop-blur-sm animate-in fade-in duration-150">
|
|
<div className="w-full max-w-2xl lg:max-w-3xl rounded-2xl bg-surface-container-low border border-outline-variant/40 p-6 sm:p-8 shadow-2xl space-y-6">
|
|
<div className="flex items-center gap-3 text-primary-container">
|
|
<span className="material-symbols-outlined text-[28px]">shield</span>
|
|
<h3 className="text-lg sm:text-xl font-bold font-headline-sm text-on-surface">
|
|
Operational Justification Required
|
|
</h3>
|
|
</div>
|
|
|
|
<div className="p-4 sm:p-5 rounded-xl bg-surface-container-lowest border border-outline-variant/20 text-xs sm:text-sm text-on-surface-variant leading-relaxed">
|
|
<p className="font-semibold text-on-surface mb-1.5 text-sm">Privacy & Telemetry Boundary</p>
|
|
Rider diagnostics and telemetry logs contain sensitive hardware and environment data.
|
|
Viewing this bundle requires an operational justification (minimum 3 characters).
|
|
Your operator identity and stated reason will be immutably recorded in the security audit log.
|
|
</div>
|
|
|
|
<form onSubmit={handleInspectDiagnostics} className="space-y-5">
|
|
<div>
|
|
<label htmlFor="diagnostic-reason" className="block text-xs sm:text-sm font-medium text-on-surface-variant mb-1.5">
|
|
Audit Reason (min 3 characters)
|
|
</label>
|
|
<input
|
|
id="diagnostic-reason"
|
|
type="text"
|
|
value={diagnosticsReason}
|
|
onChange={(e) => setDiagnosticsReason(e.target.value)}
|
|
placeholder="e.g. Investigating sensor failure report from rider"
|
|
className="w-full rounded-xl bg-surface-container-lowest border border-outline-variant/30 px-4 py-3 text-xs sm:text-sm text-on-surface placeholder:text-outline focus-visible:ring-2 focus-visible:ring-primary-container focus-visible:outline-none"
|
|
autoFocus
|
|
/>
|
|
</div>
|
|
|
|
{diagnosticsError && (
|
|
<div className="p-3 rounded-xl bg-error/15 border border-error/30 text-xs sm:text-sm text-error">
|
|
{diagnosticsError}
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex justify-end gap-3 pt-2">
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setIsDiagnosticsModalOpen(false);
|
|
setDiagnosticsReason('');
|
|
setDiagnosticsError(null);
|
|
}}
|
|
disabled={isLoadingDiagnostics}
|
|
className="px-4 py-2.5 rounded-xl border border-outline-variant/30 bg-surface-container text-xs sm:text-sm font-semibold text-on-surface hover:bg-surface-container-high transition-colors"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
disabled={diagnosticsReason.trim().length < 3 || isLoadingDiagnostics}
|
|
className="px-5 py-2.5 rounded-xl bg-primary-container text-on-primary-container text-xs sm:text-sm font-bold hover:brightness-110 transition-all shadow-[0_0_12px_rgba(0,242,254,0.25)] disabled:opacity-40"
|
|
>
|
|
{isLoadingDiagnostics ? 'Inspecting...' : 'Confirm & Inspect'}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Otherwise, render Ticket Inbox (List view)
|
|
return (
|
|
<div className="space-y-6">
|
|
<SupportReportModal
|
|
isOpen={isModalOpen}
|
|
onClose={() => setIsModalOpen(false)}
|
|
onSuccess={(ticket: SupportTicketSummary) => {
|
|
fetchTickets(true);
|
|
handleSelectTicket(ticket.id);
|
|
}}
|
|
/>
|
|
{/* Top Title Bar */}
|
|
<div className="flex flex-col sm:flex-row sm:items-end justify-between gap-4 pb-4 border-b border-outline-variant/30">
|
|
<div>
|
|
<span className="text-[11px] font-mono text-primary-fixed-dim block font-semibold">
|
|
Customer Service & Triage
|
|
</span>
|
|
<h1 className="font-headline-xl text-2xl sm:text-3xl lg:text-4xl font-extrabold text-on-surface tracking-tight mt-1">
|
|
Support Center & Diagnostics
|
|
</h1>
|
|
<p className="text-xs sm:text-sm text-outline mt-1.5 max-w-2xl">
|
|
Customer inquiries, reported bugs, and diagnostic telemetry triage.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Manual Refresh Only */}
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={() => setIsModalOpen(true)}
|
|
className="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl border border-primary/50 bg-primary/10 hover:bg-primary/20 text-xs sm:text-sm font-semibold text-primary transition-colors shadow-sm"
|
|
>
|
|
<span className="material-symbols-outlined text-[18px]">add</span>
|
|
New Support Report
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => fetchTickets(true)}
|
|
disabled={isRefreshing || isLoading}
|
|
className="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl border border-outline-variant/30 bg-surface-container-low hover:bg-surface-container-high text-xs sm:text-sm font-semibold text-on-surface transition-colors disabled:opacity-50 focus-visible:ring-2 focus-visible:ring-primary-container focus-visible:outline-none self-start sm:self-auto shrink-0 shadow-sm"
|
|
>
|
|
<span
|
|
className={`material-symbols-outlined text-[18px] ${
|
|
isRefreshing ? 'animate-spin' : ''
|
|
}`}
|
|
>
|
|
refresh
|
|
</span>
|
|
<span>{isRefreshing ? 'Refreshing...' : 'Refresh'}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Filter Tabs & Search Bar */}
|
|
<div className="p-4 sm:p-5 rounded-2xl bg-surface-container-low border border-outline-variant/30 flex flex-col md:flex-row md:items-center justify-between gap-4 shadow-sm">
|
|
{/* Filter Tabs */}
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={() => setActiveTab('all')}
|
|
className={`px-3.5 py-2 rounded-xl text-xs sm:text-sm font-semibold transition-colors ${
|
|
activeTab === 'all'
|
|
? 'bg-surface-container-high text-primary-container shadow-sm'
|
|
: 'text-outline hover:text-on-surface hover:bg-surface-container-highest/50'
|
|
}`}
|
|
>
|
|
All
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setActiveTab('bug_reports')}
|
|
className={`px-3.5 py-2 rounded-xl text-xs sm:text-sm font-semibold transition-colors ${
|
|
activeTab === 'bug_reports'
|
|
? 'bg-surface-container-high text-primary-container shadow-sm'
|
|
: 'text-outline hover:text-on-surface hover:bg-surface-container-highest/50'
|
|
}`}
|
|
>
|
|
Bug Reports
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setActiveTab('contact_requests')}
|
|
className={`px-3.5 py-2 rounded-xl text-xs sm:text-sm font-semibold transition-colors ${
|
|
activeTab === 'contact_requests'
|
|
? 'bg-surface-container-high text-primary-container shadow-sm'
|
|
: 'text-outline hover:text-on-surface hover:bg-surface-container-highest/50'
|
|
}`}
|
|
>
|
|
Contact Requests
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setActiveTab('in_progress')}
|
|
className={`px-3.5 py-2 rounded-xl text-xs sm:text-sm font-semibold transition-colors ${
|
|
activeTab === 'in_progress'
|
|
? 'bg-surface-container-high text-primary-container shadow-sm'
|
|
: 'text-outline hover:text-on-surface hover:bg-surface-container-highest/50'
|
|
}`}
|
|
>
|
|
In Progress
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setActiveTab('resolved')}
|
|
className={`px-3.5 py-2 rounded-xl text-xs sm:text-sm font-semibold transition-colors ${
|
|
activeTab === 'resolved'
|
|
? 'bg-surface-container-high text-primary-container shadow-sm'
|
|
: 'text-outline hover:text-on-surface hover:bg-surface-container-highest/50'
|
|
}`}
|
|
>
|
|
Resolved
|
|
</button>
|
|
</div>
|
|
|
|
{/* Search Bar */}
|
|
<form
|
|
onSubmit={(e) => {
|
|
e.preventDefault();
|
|
setAppliedSearch(searchQuery);
|
|
}}
|
|
className="relative max-w-md w-full"
|
|
>
|
|
<span className="material-symbols-outlined absolute left-3.5 top-1/2 -translate-y-1/2 text-outline text-[18px]">
|
|
search
|
|
</span>
|
|
<input
|
|
type="text"
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
placeholder="Search tickets by case ref, email, subject..."
|
|
className="w-full pl-10 pr-4 py-2.5 rounded-xl bg-surface-container-lowest border border-outline-variant/30 text-xs sm:text-sm text-on-surface placeholder:text-outline focus-visible:ring-2 focus-visible:ring-primary-container focus-visible:outline-none"
|
|
/>
|
|
</form>
|
|
</div>
|
|
|
|
{/* Error Message */}
|
|
{errorMessage && (
|
|
<div className="p-4 rounded-xl bg-error/15 border border-error/30 text-error text-xs sm:text-sm">
|
|
{errorMessage}
|
|
</div>
|
|
)}
|
|
|
|
{/* Total count badge */}
|
|
<div className="text-xs sm:text-sm text-outline px-1">
|
|
Showing <span className="text-on-surface font-semibold">{tickets.length}</span>
|
|
{totalCount !== null && ` of ${totalCount}`} tickets
|
|
</div>
|
|
|
|
{/* Desktop Table View */}
|
|
<div className="hidden md:block overflow-x-auto rounded-2xl border border-outline-variant/30 bg-surface-container-lowest shadow-sm">
|
|
<table className="w-full text-left border-collapse text-xs sm:text-sm">
|
|
<thead>
|
|
<tr className="border-b border-outline-variant/30 bg-surface-container-low text-[11px] font-mono text-outline">
|
|
<th className="py-4 px-5 sm:px-6 font-semibold">Case Ref</th>
|
|
<th className="py-4 px-5 sm:px-6 font-semibold">Type</th>
|
|
<th className="py-4 px-5 sm:px-6 font-semibold">Reporter</th>
|
|
<th className="py-4 px-5 sm:px-6 font-semibold">Subject</th>
|
|
<th className="py-4 px-5 sm:px-6 font-semibold">Severity</th>
|
|
<th className="py-4 px-5 sm:px-6 font-semibold">Status</th>
|
|
<th className="py-4 px-5 sm:px-6 font-semibold">Diagnostics</th>
|
|
<th className="py-4 px-5 sm:px-6 font-semibold">Notes</th>
|
|
<th className="py-4 px-5 sm:px-6 font-semibold">Submitted</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-outline-variant/20">
|
|
{isLoading ? (
|
|
<tr>
|
|
<td colSpan={9} className="py-12 text-center text-outline">
|
|
Loading tickets...
|
|
</td>
|
|
</tr>
|
|
) : tickets.length === 0 ? (
|
|
<tr>
|
|
<td colSpan={9} className="py-12 text-center text-outline">
|
|
No support tickets found matching current filters.
|
|
</td>
|
|
</tr>
|
|
) : (
|
|
tickets.map((t) => (
|
|
<tr
|
|
key={t.id}
|
|
onClick={() => handleSelectTicket(t.id)}
|
|
className="hover:bg-surface-container-high/40 cursor-pointer transition-colors"
|
|
>
|
|
<td className="py-4 px-5 sm:px-6 font-mono font-bold text-primary-container">
|
|
{t.case_reference}
|
|
</td>
|
|
<td className="py-4 px-5 sm:px-6">{renderTypeBadge(t.ticket_type)}</td>
|
|
<td className="py-4 px-5 sm:px-6 text-on-surface-variant font-mono">{t.reporter_email}</td>
|
|
<td className="py-4 px-5 sm:px-6 font-medium text-on-surface max-w-md lg:max-w-xl truncate">
|
|
{t.subject}
|
|
</td>
|
|
<td className="py-4 px-5 sm:px-6">{renderSeverityBadge(t.severity)}</td>
|
|
<td className="py-4 px-5 sm:px-6">{renderStatusBadge(t.status)}</td>
|
|
<td className="py-4 px-5 sm:px-6">
|
|
{t.has_diagnostics ? (
|
|
<span className="inline-flex items-center gap-1.5 text-xs font-mono text-cyan-300">
|
|
<span className="material-symbols-outlined text-[16px]">terminal</span>
|
|
Bundle
|
|
</span>
|
|
) : (
|
|
<span className="text-outline font-mono text-xs">—</span>
|
|
)}
|
|
</td>
|
|
<td className="py-4 px-5 sm:px-6 font-mono text-outline">{t.notes_count ?? 0}</td>
|
|
<td className="py-4 px-5 sm:px-6 text-outline whitespace-nowrap">
|
|
{new Date(t.created_at).toLocaleDateString()}
|
|
</td>
|
|
</tr>
|
|
))
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{/* Mobile Stacked Cards View */}
|
|
<div className="md:hidden space-y-3">
|
|
{isLoading ? (
|
|
<div className="p-6 text-center text-xs text-outline">Loading tickets...</div>
|
|
) : tickets.length === 0 ? (
|
|
<div className="p-6 text-center text-xs text-outline">
|
|
No support tickets found matching current filters.
|
|
</div>
|
|
) : (
|
|
tickets.map((t) => (
|
|
<div
|
|
key={t.id}
|
|
onClick={() => handleSelectTicket(t.id)}
|
|
className="p-4 rounded-xl bg-surface-container-lowest border border-outline-variant/30 space-y-2.5 active:bg-surface-container-low transition-colors"
|
|
>
|
|
<div className="flex items-center justify-between">
|
|
<span className="font-mono text-xs font-bold text-primary-container">
|
|
{t.case_reference}
|
|
</span>
|
|
<div className="flex items-center gap-1.5">
|
|
{renderSeverityBadge(t.severity)}
|
|
{renderStatusBadge(t.status)}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<span className="text-xs font-semibold text-on-surface block truncate">
|
|
{t.subject}
|
|
</span>
|
|
<span className="text-[11px] text-outline font-mono block truncate">
|
|
{t.reporter_email}
|
|
</span>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between text-[10px] text-outline pt-1 border-t border-outline-variant/10 font-mono">
|
|
<span>{renderTypeBadge(t.ticket_type)}</span>
|
|
<span>{new Date(t.created_at).toLocaleDateString()}</span>
|
|
</div>
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|