initial: standalone repo from monorepo split
This commit is contained in:
kevin-asprec
355
src/app/(dashboard)/dashboard/support/[id]/page.tsx
Normal file
355
src/app/(dashboard)/dashboard/support/[id]/page.tsx
Normal file
@@ -0,0 +1,355 @@
|
||||
'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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user