feat: settings pages — users table, areas/zones cards
This commit is contained in:
Forge
@@ -2,16 +2,11 @@
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { api } from '@/lib/api';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Skeleton } from '@/components/ui/skeleton';
|
||||
import {
|
||||
Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
|
||||
} from '@/components/ui/table';
|
||||
import { Search, Plus } from 'lucide-react';
|
||||
import { api } from '@/lib/api';
|
||||
import { useDebounce } from '@/lib/hooks';
|
||||
import { Search, Plus, ChevronRight } from 'lucide-react';
|
||||
import { format } from 'date-fns';
|
||||
|
||||
interface Ticket {
|
||||
@@ -25,141 +20,147 @@ interface Ticket {
|
||||
assignedTo?: { firstName: string; lastName: string };
|
||||
}
|
||||
|
||||
const STATUS_COLORS: Record<string, string> = {
|
||||
const statusColors: Record<string, string> = {
|
||||
OPEN: 'bg-blue-100 text-blue-700',
|
||||
IN_PROGRESS: 'bg-yellow-100 text-yellow-700',
|
||||
RESOLVED: 'bg-emerald-100 text-emerald-700',
|
||||
RESOLVED: 'bg-green-100 text-green-700',
|
||||
CLOSED: 'bg-gray-100 text-gray-500',
|
||||
};
|
||||
const TYPE_COLORS: Record<string, string> = {
|
||||
INSTALLATION: 'bg-purple-100 text-purple-700',
|
||||
SUPPORT: 'bg-orange-100 text-orange-700',
|
||||
BILLING: 'bg-cyan-100 text-cyan-700',
|
||||
};
|
||||
const PRIORITY_COLORS: Record<string, string> = {
|
||||
NORMAL: 'bg-gray-100 text-gray-600',
|
||||
|
||||
const priorityColors: Record<string, string> = {
|
||||
HIGH: 'bg-red-100 text-red-700',
|
||||
NORMAL: 'bg-slate-100 text-slate-600',
|
||||
};
|
||||
|
||||
const STATUSES = ['', 'OPEN', 'IN_PROGRESS', 'RESOLVED', 'CLOSED'];
|
||||
const TYPES = ['', 'INSTALLATION', 'SUPPORT', 'BILLING'];
|
||||
const typeColors: Record<string, string> = {
|
||||
INSTALLATION: 'bg-cyan-100 text-cyan-700',
|
||||
SUPPORT: 'bg-purple-100 text-purple-700',
|
||||
BILLING: 'bg-orange-100 text-orange-700',
|
||||
};
|
||||
|
||||
export default function TicketsPage() {
|
||||
const [search, setSearch] = useState('');
|
||||
const [status, setStatus] = useState('');
|
||||
const [type, setType] = useState('');
|
||||
const [statusFilter, setStatusFilter] = useState('');
|
||||
const [typeFilter, setTypeFilter] = useState('');
|
||||
const [page, setPage] = useState(1);
|
||||
const debouncedSearch = useDebounce(search, 400);
|
||||
const limit = 20;
|
||||
|
||||
const { data, isLoading } = useQuery({
|
||||
queryKey: ['tickets', debouncedSearch, status, type, page],
|
||||
const { data, isLoading } = useQuery<{ data: Ticket[]; total: number }>({
|
||||
queryKey: ['tickets', search, statusFilter, typeFilter, page],
|
||||
queryFn: async () => {
|
||||
const params = new URLSearchParams({ page: String(page), limit: String(limit) });
|
||||
if (status) params.set('status', status);
|
||||
if (type) params.set('type', type);
|
||||
if (debouncedSearch) params.set('search', debouncedSearch);
|
||||
const params = new URLSearchParams({ page: String(page), limit: '20' });
|
||||
if (statusFilter) params.set('status', statusFilter);
|
||||
if (typeFilter) params.set('type', typeFilter);
|
||||
const res = await api.get(`/api/v1/tickets?${params}`);
|
||||
return res.data;
|
||||
},
|
||||
staleTime: 30_000,
|
||||
});
|
||||
|
||||
const tickets: Ticket[] = Array.isArray(data) ? data : (data?.data ?? data?.items ?? []);
|
||||
const total = (data as any)?.meta?.total ?? (data as any)?.total ?? tickets.length;
|
||||
const tickets = data?.data ?? [];
|
||||
const total = data?.total ?? 0;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="mb-6 flex items-center justify-between">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-slate-800">Tickets</h1>
|
||||
<p className="text-slate-500 text-sm mt-1">Support, installation, and billing issues</p>
|
||||
<p className="text-slate-500 text-sm mt-1">{total} tickets</p>
|
||||
</div>
|
||||
<Button style={{ backgroundColor: '#0891B2', color: 'white' }}>
|
||||
<Plus size={16} className="mr-2" />New Ticket
|
||||
</Button>
|
||||
<button
|
||||
className="flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium text-white"
|
||||
style={{ backgroundColor: '#0891B2' }}
|
||||
>
|
||||
<Plus size={16} />
|
||||
New Ticket
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Filters */}
|
||||
<div className="mb-4 flex flex-wrap gap-3">
|
||||
<div className="relative flex-1 min-w-[200px] max-w-sm">
|
||||
<div className="flex gap-3 mb-4 flex-wrap">
|
||||
<div className="relative flex-1 min-w-[200px]">
|
||||
<Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
|
||||
<Input placeholder="Search tickets..." className="pl-9" value={search}
|
||||
onChange={(e) => { setSearch(e.target.value); setPage(1); }} />
|
||||
</div>
|
||||
<div className="flex gap-1 flex-wrap">
|
||||
{STATUSES.map(s => (
|
||||
<button key={s} onClick={() => { setStatus(s); setPage(1); }}
|
||||
className={`px-3 py-1.5 rounded-lg text-xs font-medium border transition-colors ${
|
||||
status === s ? 'bg-cyan-600 text-white border-cyan-600' : 'bg-white text-slate-600 border-slate-200 hover:border-slate-300'
|
||||
}`}>{s || 'All Status'}</button>
|
||||
<select className="border rounded-md px-3 py-2 text-sm bg-white"
|
||||
value={typeFilter} onChange={(e) => { setTypeFilter(e.target.value); setPage(1); }}>
|
||||
<option value="">All Types</option>
|
||||
{['INSTALLATION', 'SUPPORT', 'BILLING'].map(t => (
|
||||
<option key={t} value={t}>{t}</option>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex gap-1 flex-wrap">
|
||||
{TYPES.map(t => (
|
||||
<button key={t} onClick={() => { setType(t); setPage(1); }}
|
||||
className={`px-3 py-1.5 rounded-lg text-xs font-medium border transition-colors ${
|
||||
type === t ? 'bg-slate-700 text-white border-slate-700' : 'bg-white text-slate-600 border-slate-200 hover:border-slate-300'
|
||||
}`}>{t || 'All Type'}</button>
|
||||
</select>
|
||||
<select className="border rounded-md px-3 py-2 text-sm bg-white"
|
||||
value={statusFilter} onChange={(e) => { setStatusFilter(e.target.value); setPage(1); }}>
|
||||
<option value="">All Statuses</option>
|
||||
{['OPEN', 'IN_PROGRESS', 'RESOLVED', 'CLOSED'].map(s => (
|
||||
<option key={s} value={s}>{s.replace('_', ' ')}</option>
|
||||
))}
|
||||
</div>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<Card className="border shadow-sm">
|
||||
<CardContent className="p-0">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Subject</TableHead>
|
||||
<TableHead>Type</TableHead>
|
||||
<TableHead>Status</TableHead>
|
||||
<TableHead>Priority</TableHead>
|
||||
<TableHead>Client</TableHead>
|
||||
<TableHead>Assigned To</TableHead>
|
||||
<TableHead>Created</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{isLoading ? (
|
||||
Array.from({ length: 8 }).map((_, i) => (
|
||||
<TableRow key={i}>{Array.from({ length: 7 }).map((_, j) => (
|
||||
<TableCell key={j}><Skeleton className="h-4 w-full" /></TableCell>
|
||||
))}</TableRow>
|
||||
))
|
||||
) : tickets.length === 0 ? (
|
||||
<TableRow><TableCell colSpan={7} className="text-center py-12 text-slate-400">No tickets found</TableCell></TableRow>
|
||||
) : (
|
||||
tickets.map((t) => (
|
||||
<TableRow key={t.id} className="hover:bg-slate-50">
|
||||
<TableCell className="font-medium max-w-[200px] truncate">{t.subject}</TableCell>
|
||||
<TableCell>
|
||||
<span className={`inline-flex px-2 py-0.5 rounded-full text-xs font-medium ${TYPE_COLORS[t.type] ?? 'bg-gray-100 text-gray-600'}`}>
|
||||
{t.type}
|
||||
</span>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<span className={`inline-flex px-2 py-0.5 rounded-full text-xs font-medium ${STATUS_COLORS[t.status] ?? 'bg-gray-100 text-gray-600'}`}>
|
||||
{t.status.replace('_', ' ')}
|
||||
</span>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<span className={`inline-flex px-2 py-0.5 rounded-full text-xs font-medium ${PRIORITY_COLORS[t.priority] ?? 'bg-gray-100'}`}>
|
||||
{t.priority}
|
||||
</span>
|
||||
</TableCell>
|
||||
<TableCell className="text-sm">
|
||||
{t.client ? `${t.client.firstName} ${t.client.lastName}` : '—'}
|
||||
</TableCell>
|
||||
<TableCell className="text-sm text-slate-500">
|
||||
{t.assignedTo ? `${t.assignedTo.firstName} ${t.assignedTo.lastName}` : 'Unassigned'}
|
||||
</TableCell>
|
||||
<TableCell className="text-xs text-slate-400">
|
||||
{format(new Date(t.createdAt), 'MMM d, yyyy')}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b bg-slate-50">
|
||||
<th className="text-left px-4 py-3 font-medium text-slate-500">Subject</th>
|
||||
<th className="text-left px-4 py-3 font-medium text-slate-500 hidden md:table-cell">Client</th>
|
||||
<th className="text-left px-4 py-3 font-medium text-slate-500">Type</th>
|
||||
<th className="text-left px-4 py-3 font-medium text-slate-500">Priority</th>
|
||||
<th className="text-left px-4 py-3 font-medium text-slate-500">Status</th>
|
||||
<th className="text-left px-4 py-3 font-medium text-slate-500 hidden lg:table-cell">Assigned</th>
|
||||
<th className="text-left px-4 py-3 font-medium text-slate-500 hidden xl:table-cell">Created</th>
|
||||
<th className="px-4 py-3"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{isLoading
|
||||
? Array.from({ length: 8 }).map((_, i) => (
|
||||
<tr key={i} className="border-b">
|
||||
{Array.from({ length: 8 }).map((_, j) => (
|
||||
<td key={j} className="px-4 py-3"><Skeleton className="h-4 w-16" /></td>
|
||||
))}
|
||||
</tr>
|
||||
))
|
||||
: tickets.map((t) => (
|
||||
<tr key={t.id} className="border-b hover:bg-slate-50 cursor-pointer transition-colors">
|
||||
<td className="px-4 py-3 text-slate-800 font-medium max-w-[200px] truncate">
|
||||
{t.subject}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-slate-600 hidden md:table-cell">
|
||||
{t.client ? `${t.client.firstName} ${t.client.lastName}` : '—'}
|
||||
<div className="text-xs text-slate-400">{t.client?.accountNumber}</div>
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<span className={`px-2 py-0.5 rounded-full text-xs font-medium ${typeColors[t.type] ?? 'bg-gray-100 text-gray-500'}`}>
|
||||
{t.type}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<span className={`px-2 py-0.5 rounded-full text-xs font-medium ${priorityColors[t.priority] ?? 'bg-gray-100 text-gray-500'}`}>
|
||||
{t.priority}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<span className={`px-2 py-0.5 rounded-full text-xs font-medium ${statusColors[t.status] ?? 'bg-gray-100 text-gray-500'}`}>
|
||||
{t.status?.replace('_', ' ')}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-slate-600 hidden lg:table-cell">
|
||||
{t.assignedTo ? `${t.assignedTo.firstName} ${t.assignedTo.lastName}` : 'Unassigned'}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-slate-500 hidden xl:table-cell">
|
||||
{t.createdAt ? format(new Date(t.createdAt), 'MMM d') : '—'}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-slate-400"><ChevronRight size={16} /></td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{!isLoading && tickets.length === 0 && (
|
||||
<div className="text-center py-12 text-slate-400">No tickets found</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user