356 lines
16 KiB
TypeScript
356 lines
16 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useState, useRef } from 'react';
|
|
import { useParams, useRouter } from 'next/navigation';
|
|
|
|
const ADMIN_API_URL = process.env.NEXT_PUBLIC_ADMIN_API_URL || 'http://localhost:3004/api';
|
|
|
|
interface Attachment {
|
|
id: string;
|
|
fileName: string;
|
|
originalName: string;
|
|
mimeType: string;
|
|
sizeBytes: number;
|
|
createdAt: string;
|
|
}
|
|
|
|
interface Comment {
|
|
id: string;
|
|
authorName: string;
|
|
authorType: string;
|
|
content: string;
|
|
createdAt: string;
|
|
attachments: Attachment[];
|
|
}
|
|
|
|
interface Ticket {
|
|
id: string;
|
|
subject: string;
|
|
description: string;
|
|
category: string;
|
|
priority: string;
|
|
status: string;
|
|
createdByName: string;
|
|
assignee: { firstName: string; lastName: string } | null;
|
|
comments: Comment[];
|
|
attachments: Attachment[];
|
|
createdAt: string;
|
|
}
|
|
|
|
const statusColors: Record<string, string> = {
|
|
open: 'bg-yellow-50 text-yellow-700',
|
|
in_progress: 'bg-blue-50 text-blue-700',
|
|
waiting_tenant: 'bg-orange-50 text-orange-700',
|
|
resolved: 'bg-green-50 text-green-700',
|
|
closed: 'bg-surface-100 text-surface-500',
|
|
};
|
|
|
|
function formatBytes(bytes: number) {
|
|
if (bytes < 1024) return bytes + ' B';
|
|
if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
|
|
return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
|
|
}
|
|
|
|
export default function TicketDetailPage() {
|
|
const params = useParams();
|
|
const router = useRouter();
|
|
const ticketId = params.id as string;
|
|
|
|
const [ticket, setTicket] = useState<Ticket | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [comment, setComment] = useState('');
|
|
const [submitting, setSubmitting] = useState(false);
|
|
const [uploading, setUploading] = useState(false);
|
|
const fileInputRef = useRef<HTMLInputElement>(null);
|
|
const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
|
|
|
|
useEffect(() => {
|
|
loadTicket();
|
|
}, [ticketId]);
|
|
|
|
function authHeaders() {
|
|
const token = localStorage.getItem('accessToken');
|
|
return { Authorization: `Bearer ${token}` };
|
|
}
|
|
|
|
async function loadTicket() {
|
|
try {
|
|
const res = await fetch(`${ADMIN_API_URL}/public/support/tickets/${ticketId}`, {
|
|
headers: authHeaders(),
|
|
});
|
|
const data = await res.json();
|
|
setTicket(data.data || data);
|
|
} catch {
|
|
// not found
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
|
|
async function handleAddComment() {
|
|
if (!comment.trim() && selectedFiles.length === 0) return;
|
|
setSubmitting(true);
|
|
try {
|
|
// Add comment first
|
|
if (comment.trim()) {
|
|
await fetch(`${ADMIN_API_URL}/public/support/tickets/${ticketId}/comments`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json', ...authHeaders() },
|
|
body: JSON.stringify({ content: comment }),
|
|
});
|
|
}
|
|
|
|
// Upload files if any
|
|
if (selectedFiles.length > 0) {
|
|
const formData = new FormData();
|
|
selectedFiles.forEach((f) => formData.append('files', f));
|
|
await fetch(`${ADMIN_API_URL}/public/support/tickets/${ticketId}/attachments`, {
|
|
method: 'POST',
|
|
headers: authHeaders(),
|
|
body: formData,
|
|
});
|
|
}
|
|
|
|
setComment('');
|
|
setSelectedFiles([]);
|
|
loadTicket();
|
|
} catch (err) {
|
|
console.error('Failed to submit:', err);
|
|
} finally {
|
|
setSubmitting(false);
|
|
}
|
|
}
|
|
|
|
async function handleFileUpload(files: FileList) {
|
|
setUploading(true);
|
|
try {
|
|
const formData = new FormData();
|
|
Array.from(files).forEach((f) => formData.append('files', f));
|
|
await fetch(`${ADMIN_API_URL}/public/support/tickets/${ticketId}/attachments`, {
|
|
method: 'POST',
|
|
headers: authHeaders(),
|
|
body: formData,
|
|
});
|
|
loadTicket();
|
|
} catch (err) {
|
|
console.error('Failed to upload:', err);
|
|
} finally {
|
|
setUploading(false);
|
|
}
|
|
}
|
|
|
|
function handleDownload(fileName: string, originalName: string) {
|
|
const token = localStorage.getItem('accessToken');
|
|
window.open(`${ADMIN_API_URL}/public/support/uploads/${fileName}?token=${token}`, '_blank');
|
|
}
|
|
|
|
if (loading) return <div className="p-8 text-center text-surface-400">Loading...</div>;
|
|
if (!ticket) return <div className="p-8 text-center text-surface-400">Ticket not found</div>;
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<button
|
|
onClick={() => router.push('/dashboard/support')}
|
|
className="text-sm text-surface-500 dark:text-surface-400 hover:text-surface-700 dark:hover:text-surface-300"
|
|
>
|
|
← Back to support tickets
|
|
</button>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
{/* Main content */}
|
|
<div className="lg:col-span-2 space-y-6">
|
|
{/* Ticket header */}
|
|
<div className="bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 p-6">
|
|
<div className="flex items-start justify-between mb-2">
|
|
<h1 className="text-xl font-semibold text-surface-900 dark:text-surface-100">{ticket.subject}</h1>
|
|
<span className={`inline-block px-2.5 py-1 rounded-full text-xs font-medium ${statusColors[ticket.status] || ''}`}>
|
|
{ticket.status.replace(/_/g, ' ')}
|
|
</span>
|
|
</div>
|
|
<p className="text-surface-600 dark:text-surface-300 whitespace-pre-wrap">{ticket.description}</p>
|
|
<div className="mt-4 text-xs text-surface-400">
|
|
Created {new Date(ticket.createdAt).toLocaleString()} by {ticket.createdByName}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Ticket-level attachments */}
|
|
{ticket.attachments.length > 0 && (
|
|
<div className="bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 p-4">
|
|
<h3 className="text-sm font-medium text-surface-700 dark:text-surface-300 mb-3">Attachments</h3>
|
|
<div className="flex flex-wrap gap-2">
|
|
{ticket.attachments.map((a) => (
|
|
<button
|
|
key={a.id}
|
|
onClick={() => handleDownload(a.fileName, a.originalName)}
|
|
className="flex items-center gap-2 px-3 py-2 bg-surface-50 dark:bg-surface-700 border border-surface-200 dark:border-surface-600 rounded-lg text-sm hover:bg-surface-100 dark:hover:bg-surface-600 transition-colors"
|
|
>
|
|
{a.mimeType.startsWith('image/') ? (
|
|
<svg className="w-4 h-4 text-surface-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>
|
|
) : (
|
|
<svg className="w-4 h-4 text-surface-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.172 7l-4.586 4.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" /></svg>
|
|
)}
|
|
<span className="text-surface-700 dark:text-surface-300">{a.originalName}</span>
|
|
<span className="text-surface-400">({formatBytes(a.sizeBytes)})</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Comments thread */}
|
|
<div className="space-y-4">
|
|
<h3 className="text-sm font-medium text-surface-700 dark:text-surface-300">
|
|
Conversation ({ticket.comments.length})
|
|
</h3>
|
|
{ticket.comments.map((c) => (
|
|
<div
|
|
key={c.id}
|
|
className={`bg-white dark:bg-surface-800 rounded-lg border p-4 ${
|
|
c.authorType === 'super_admin' ? 'border-primary-200 bg-primary-50/30 dark:border-primary-700 dark:bg-primary-900/20' : 'border-surface-200 dark:border-surface-700'
|
|
}`}
|
|
>
|
|
<div className="flex items-center justify-between mb-2">
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-sm font-medium text-surface-700 dark:text-surface-300">{c.authorName}</span>
|
|
<span className={`text-xs px-1.5 py-0.5 rounded ${
|
|
c.authorType === 'super_admin' ? 'bg-primary-100 text-primary-700' : 'bg-surface-100 dark:bg-surface-700 text-surface-600 dark:text-surface-400'
|
|
}`}>
|
|
{c.authorType === 'super_admin' ? 'FiberOps Team' : 'You'}
|
|
</span>
|
|
</div>
|
|
<span className="text-xs text-surface-400">{new Date(c.createdAt).toLocaleString()}</span>
|
|
</div>
|
|
<p className="text-sm text-surface-700 dark:text-surface-300 whitespace-pre-wrap">{c.content}</p>
|
|
|
|
{/* Comment attachments */}
|
|
{c.attachments.length > 0 && (
|
|
<div className="flex flex-wrap gap-2 mt-3 pt-3 border-t border-surface-100 dark:border-surface-700">
|
|
{c.attachments.map((a) => (
|
|
<button
|
|
key={a.id}
|
|
onClick={() => handleDownload(a.fileName, a.originalName)}
|
|
className="flex items-center gap-1.5 px-2 py-1 bg-surface-50 dark:bg-surface-700 border border-surface-200 dark:border-surface-600 rounded text-xs hover:bg-surface-100 dark:hover:bg-surface-600"
|
|
>
|
|
<svg className="w-3 h-3 text-surface-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.172 7l-4.586 4.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" /></svg>
|
|
{a.originalName} ({formatBytes(a.sizeBytes)})
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
|
|
{/* Add comment form */}
|
|
<div className="bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 p-4 space-y-3">
|
|
<textarea
|
|
value={comment}
|
|
onChange={(e) => setComment(e.target.value)}
|
|
rows={3}
|
|
placeholder="Type your message..."
|
|
className="w-full border border-surface-300 dark:border-surface-600 rounded-lg px-3 py-2 text-sm resize-none focus:outline-none focus:ring-2 focus:ring-primary-500 bg-white dark:bg-surface-700 text-surface-900 dark:text-surface-100"
|
|
/>
|
|
|
|
{/* File selection preview */}
|
|
{selectedFiles.length > 0 && (
|
|
<div className="flex flex-wrap gap-2">
|
|
{selectedFiles.map((f, i) => (
|
|
<div key={i} className="flex items-center gap-1 px-2 py-1 bg-surface-50 dark:bg-surface-700 border border-surface-200 dark:border-surface-600 rounded text-xs">
|
|
<span className="text-surface-700 dark:text-surface-300">{f.name}</span>
|
|
<span className="text-surface-400">({formatBytes(f.size)})</span>
|
|
<button
|
|
onClick={() => setSelectedFiles(selectedFiles.filter((_, j) => j !== i))}
|
|
className="text-surface-400 hover:text-red-500 ml-1"
|
|
>
|
|
×
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<input
|
|
ref={fileInputRef}
|
|
type="file"
|
|
multiple
|
|
accept="image/*,.pdf,.txt,.doc,.docx"
|
|
className="hidden"
|
|
onChange={(e) => {
|
|
if (e.target.files) {
|
|
setSelectedFiles([...selectedFiles, ...Array.from(e.target.files!)]);
|
|
e.target.value = '';
|
|
}
|
|
}}
|
|
/>
|
|
<button
|
|
onClick={() => fileInputRef.current?.click()}
|
|
className="px-3 py-1.5 text-sm text-surface-600 dark:text-surface-300 border border-surface-300 dark:border-surface-600 rounded-lg hover:bg-surface-50 dark:hover:bg-surface-700"
|
|
>
|
|
Attach files
|
|
</button>
|
|
<span className="text-xs text-surface-400">Max 5 files, 10MB each</span>
|
|
</div>
|
|
<button
|
|
onClick={handleAddComment}
|
|
disabled={submitting || (!comment.trim() && selectedFiles.length === 0)}
|
|
className="px-4 py-2 bg-primary-600 text-white rounded-lg text-sm hover:bg-primary-700 disabled:opacity-50"
|
|
>
|
|
{submitting ? 'Sending...' : 'Send'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Sidebar */}
|
|
<div className="space-y-4">
|
|
<div className="bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 p-4 space-y-4">
|
|
<h3 className="text-sm font-medium text-surface-700 dark:text-surface-300">Ticket Info</h3>
|
|
|
|
<div>
|
|
<label className="text-xs text-surface-500 dark:text-surface-400">Category</label>
|
|
<p className="text-sm font-medium mt-1 capitalize text-surface-800 dark:text-surface-200">{ticket.category.replace(/_/g, ' ')}</p>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="text-xs text-surface-500 dark:text-surface-400">Priority</label>
|
|
<p className={`text-sm font-medium mt-1 capitalize ${
|
|
ticket.priority === 'urgent' ? 'text-red-600' :
|
|
ticket.priority === 'high' ? 'text-orange-600' :
|
|
ticket.priority === 'normal' ? 'text-surface-700 dark:text-surface-300' : 'text-surface-500 dark:text-surface-400'
|
|
}`}>{ticket.priority}</p>
|
|
</div>
|
|
|
|
{ticket.assignee && (
|
|
<div>
|
|
<label className="text-xs text-surface-500 dark:text-surface-400">Assigned To</label>
|
|
<p className="text-sm font-medium mt-1 text-surface-800 dark:text-surface-200">{ticket.assignee.firstName} {ticket.assignee.lastName}</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Upload files directly to ticket */}
|
|
<div className="bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 p-4 space-y-3">
|
|
<h3 className="text-sm font-medium text-surface-700 dark:text-surface-300">Upload Files</h3>
|
|
<p className="text-xs text-surface-500 dark:text-surface-400">Attach screenshots, documents, or other files to this ticket.</p>
|
|
<input
|
|
type="file"
|
|
multiple
|
|
accept="image/*,.pdf,.txt,.doc,.docx"
|
|
onChange={(e) => {
|
|
if (e.target.files && e.target.files.length > 0) {
|
|
handleFileUpload(e.target.files);
|
|
e.target.value = '';
|
|
}
|
|
}}
|
|
className="block w-full text-sm text-surface-500 file:mr-2 file:py-1.5 file:px-3 file:rounded-lg file:border-0 file:text-sm file:font-medium file:bg-primary-50 file:text-primary-700 hover:file:bg-primary-100"
|
|
/>
|
|
{uploading && <p className="text-xs text-surface-400">Uploading...</p>}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|