initial: standalone repo from monorepo split
This commit is contained in:
kevin-asprec
187
src/app/(admin)/support/page.tsx
Normal file
187
src/app/(admin)/support/page.tsx
Normal file
@@ -0,0 +1,187 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
import api from '@/lib/api';
|
||||
import CreateTicketModal from '@/components/create-ticket-modal';
|
||||
|
||||
interface Ticket {
|
||||
id: string;
|
||||
tenantName: string;
|
||||
subject: string;
|
||||
category: string;
|
||||
priority: string;
|
||||
status: string;
|
||||
createdAt: string;
|
||||
assignee: { id: string; firstName: string; lastName: string } | null;
|
||||
_count: { comments: number };
|
||||
}
|
||||
|
||||
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',
|
||||
};
|
||||
|
||||
const priorityColors: Record<string, string> = {
|
||||
low: 'bg-surface-100 text-surface-600',
|
||||
normal: 'bg-blue-50 text-blue-600',
|
||||
high: 'bg-orange-50 text-orange-600',
|
||||
urgent: 'bg-red-50 text-red-600',
|
||||
};
|
||||
|
||||
interface TenantOption {
|
||||
id: string;
|
||||
name: string;
|
||||
slug: string;
|
||||
}
|
||||
|
||||
export default function SupportPage() {
|
||||
const [tickets, setTickets] = useState<Ticket[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [status, setStatus] = useState('');
|
||||
const [priority, setPriority] = useState('');
|
||||
const [search, setSearch] = useState('');
|
||||
const [page, setPage] = useState(1);
|
||||
const [total, setTotal] = useState(0);
|
||||
const [showCreate, setShowCreate] = useState(false);
|
||||
const [tenants, setTenants] = useState<TenantOption[]>([]);
|
||||
const limit = 20;
|
||||
|
||||
useEffect(() => {
|
||||
api.get('/tenants?limit=100').then((res) => setTenants(res.data.data.items || [])).catch(() => {});
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
loadTickets();
|
||||
}, [status, priority, search, page]);
|
||||
|
||||
async function loadTickets() {
|
||||
setLoading(true);
|
||||
try {
|
||||
const params = new URLSearchParams({ page: String(page), limit: String(limit) });
|
||||
if (status) params.set('status', status);
|
||||
if (priority) params.set('priority', priority);
|
||||
if (search) params.set('search', search);
|
||||
|
||||
const res = await api.get(`/support/tickets?${params}`);
|
||||
setTickets(res.data.data.items);
|
||||
setTotal(res.data.data.total);
|
||||
} catch (err) {
|
||||
console.error('Failed to load tickets:', err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold text-surface-900">Support Tickets</h2>
|
||||
<p className="text-sm text-surface-500">{total} total tickets</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setShowCreate(true)}
|
||||
className="px-4 py-2 bg-primary-600 text-white rounded-lg text-sm hover:bg-primary-700"
|
||||
>
|
||||
Create Ticket
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3 flex-wrap">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search tickets or tenants..."
|
||||
value={search}
|
||||
onChange={(e) => { setSearch(e.target.value); setPage(1); }}
|
||||
className="px-3 py-2 border border-surface-300 rounded-lg text-sm flex-1 min-w-[200px] max-w-xs"
|
||||
/>
|
||||
<select
|
||||
value={status}
|
||||
onChange={(e) => { setStatus(e.target.value); setPage(1); }}
|
||||
className="px-3 py-2 border border-surface-300 rounded-lg text-sm"
|
||||
>
|
||||
<option value="">All Status</option>
|
||||
<option value="open">Open</option>
|
||||
<option value="in_progress">In Progress</option>
|
||||
<option value="waiting_tenant">Waiting Tenant</option>
|
||||
<option value="resolved">Resolved</option>
|
||||
<option value="closed">Closed</option>
|
||||
</select>
|
||||
<select
|
||||
value={priority}
|
||||
onChange={(e) => { setPriority(e.target.value); setPage(1); }}
|
||||
className="px-3 py-2 border border-surface-300 rounded-lg text-sm"
|
||||
>
|
||||
<option value="">All Priority</option>
|
||||
<option value="urgent">Urgent</option>
|
||||
<option value="high">High</option>
|
||||
<option value="normal">Normal</option>
|
||||
<option value="low">Low</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-xl border border-surface-200">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b border-surface-200 bg-surface-50">
|
||||
<th className="text-left px-4 py-3 font-medium text-surface-600">Subject</th>
|
||||
<th className="text-left px-4 py-3 font-medium text-surface-600">Tenant</th>
|
||||
<th className="text-center px-4 py-3 font-medium text-surface-600">Priority</th>
|
||||
<th className="text-center px-4 py-3 font-medium text-surface-600">Status</th>
|
||||
<th className="text-left px-4 py-3 font-medium text-surface-600">Assignee</th>
|
||||
<th className="text-center px-4 py-3 font-medium text-surface-600">Comments</th>
|
||||
<th className="text-left px-4 py-3 font-medium text-surface-600">Created</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{loading ? (
|
||||
<tr><td colSpan={7} className="text-center py-8 text-surface-400">Loading...</td></tr>
|
||||
) : tickets.length === 0 ? (
|
||||
<tr><td colSpan={7} className="text-center py-8 text-surface-400">No tickets found</td></tr>
|
||||
) : (
|
||||
tickets.map((t) => (
|
||||
<tr key={t.id} className="border-b border-surface-100 hover:bg-surface-50">
|
||||
<td className="px-4 py-3">
|
||||
<Link href={`/support/${t.id}`} className="text-primary-600 hover:underline font-medium">
|
||||
{t.subject}
|
||||
</Link>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-surface-500">{t.tenantName}</td>
|
||||
<td className="px-4 py-3 text-center">
|
||||
<span className={`inline-block px-2 py-0.5 rounded-full text-xs font-medium ${priorityColors[t.priority] || ''}`}>
|
||||
{t.priority}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-center">
|
||||
<span className={`inline-block px-2 py-0.5 rounded-full text-xs font-medium ${statusColors[t.status] || ''}`}>
|
||||
{t.status.replace(/_/g, ' ')}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-surface-500">
|
||||
{t.assignee ? `${t.assignee.firstName} ${t.assignee.lastName}` : 'Unassigned'}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-center">{t._count.comments}</td>
|
||||
<td className="px-4 py-3 text-surface-500">
|
||||
{new Date(t.createdAt).toLocaleDateString()}
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{showCreate && (
|
||||
<CreateTicketModal
|
||||
tenants={tenants}
|
||||
onClose={() => setShowCreate(false)}
|
||||
onSuccess={() => loadTickets()}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user