Split Tickets.tsx (631 lines) into focused sub-components
Extracted TicketFilters, BulkActions, and TicketListItem into client/src/pages/tickets/. The main Tickets.tsx remains as the page orchestrator with state management and pagination. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
+1
-1
@@ -4,7 +4,7 @@ import PrivateRoute from './components/PrivateRoute';
|
||||
import AdminRoute from './components/AdminRoute';
|
||||
import Login from './pages/Login';
|
||||
import Dashboard from './pages/Dashboard';
|
||||
import Tickets from './pages/Tickets';
|
||||
import Tickets from './pages/tickets';
|
||||
import MyTickets from './pages/MyTickets';
|
||||
import TicketDetail from './pages/ticket-detail';
|
||||
import Notifications from './pages/Notifications';
|
||||
|
||||
@@ -1,630 +0,0 @@
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { Link, useNavigate, useSearchParams } from 'react-router-dom';
|
||||
import { useShortcut } from '../hooks/useShortcuts';
|
||||
import { ChevronLeft, ChevronRight, Trash2, Save } from 'lucide-react';
|
||||
import { SEVERITY_BG } from '../lib/severityColors';
|
||||
import { formatDistanceToNow } from 'date-fns';
|
||||
import { toast } from 'sonner';
|
||||
import Layout from '../components/Layout';
|
||||
import SeverityBadge from '../components/SeverityBadge';
|
||||
import StatusBadge from '../components/StatusBadge';
|
||||
import Avatar from '../components/Avatar';
|
||||
import CTISelect from '../components/CTISelect';
|
||||
import { TicketStatus } from '../types';
|
||||
import { useAuth } from '../contexts/AuthContext';
|
||||
import {
|
||||
useTicketsPaged,
|
||||
useBulkTickets,
|
||||
useSavedViews,
|
||||
useCreateSavedView,
|
||||
useDeleteSavedView,
|
||||
useUsers,
|
||||
} from '../api/queries';
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog';
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from '@/components/ui/alert-dialog';
|
||||
|
||||
const STATUS_TABS: { value: TicketStatus | ''; label: string }[] = [
|
||||
{ value: '', label: 'All' },
|
||||
{ value: 'OPEN', label: 'Open' },
|
||||
{ value: 'IN_PROGRESS', label: 'In progress' },
|
||||
{ value: 'RESOLVED', label: 'Resolved' },
|
||||
{ value: 'CLOSED', label: 'Closed' },
|
||||
];
|
||||
|
||||
const PAGE_SIZE = 25;
|
||||
const BULK_LIMIT = 500;
|
||||
|
||||
export default function Tickets() {
|
||||
const [params, setParams] = useSearchParams();
|
||||
const navigate = useNavigate();
|
||||
const { user: authUser } = useAuth();
|
||||
const { data: users = [] } = useUsers();
|
||||
|
||||
const status = (params.get('status') ?? '') as TicketStatus | '';
|
||||
const severity = params.get('severity') ?? '';
|
||||
const assigneeId = params.get('assigneeId') ?? '';
|
||||
const categoryId = params.get('categoryId') ?? '';
|
||||
const typeId = params.get('typeId') ?? '';
|
||||
const itemId = params.get('itemId') ?? '';
|
||||
const search = params.get('search') ?? '';
|
||||
const page = Math.max(1, Number(params.get('page') ?? '1'));
|
||||
|
||||
const [searchInput, setSearchInput] = useState(search);
|
||||
const [selected, setSelected] = useState<Set<string>>(new Set());
|
||||
const [cursor, setCursor] = useState<number>(-1);
|
||||
const [saveOpen, setSaveOpen] = useState(false);
|
||||
const [newViewName, setNewViewName] = useState('');
|
||||
const [confirmBulk, setConfirmBulk] = useState<
|
||||
| { kind: 'close' | 'setSeverity' | 'reassign'; value?: unknown; label: string }
|
||||
| null
|
||||
>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const t = setTimeout(() => {
|
||||
if (search !== searchInput) {
|
||||
updateParam('search', searchInput);
|
||||
updateParam('page', '1');
|
||||
}
|
||||
}, 250);
|
||||
return () => clearTimeout(t);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [searchInput]);
|
||||
|
||||
const updateParam = (key: string, value: string | null) => {
|
||||
setParams(
|
||||
(prev) => {
|
||||
const next = new URLSearchParams(prev);
|
||||
if (value === null || value === '') next.delete(key);
|
||||
else next.set(key, value);
|
||||
if (key !== 'page') next.delete('page'); // reset page on filter change
|
||||
return next;
|
||||
},
|
||||
{ replace: true },
|
||||
);
|
||||
};
|
||||
|
||||
const queryParams = {
|
||||
status: status || undefined,
|
||||
severity: severity ? Number(severity) : undefined,
|
||||
assigneeId: assigneeId || undefined,
|
||||
categoryId: categoryId || undefined,
|
||||
typeId: typeId || undefined,
|
||||
itemId: itemId || undefined,
|
||||
search: search || undefined,
|
||||
page,
|
||||
pageSize: PAGE_SIZE,
|
||||
};
|
||||
|
||||
const { data, isLoading, isFetching } = useTicketsPaged(queryParams);
|
||||
const tickets = data?.data ?? [];
|
||||
const total = data?.total ?? 0;
|
||||
const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE));
|
||||
|
||||
const savedViewsQ = useSavedViews();
|
||||
const createView = useCreateSavedView();
|
||||
const deleteView = useDeleteSavedView();
|
||||
const bulk = useBulkTickets();
|
||||
|
||||
const allVisible = tickets.length > 0 && tickets.every((t) => selected.has(t.id));
|
||||
const someVisible = tickets.some((t) => selected.has(t.id));
|
||||
|
||||
const toggleAll = () => {
|
||||
setSelected((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (allVisible) tickets.forEach((t) => next.delete(t.id));
|
||||
else tickets.forEach((t) => next.add(t.id));
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
const toggleOne = (id: string) => {
|
||||
setSelected((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(id)) next.delete(id);
|
||||
else next.add(id);
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
const clearSelected = () => setSelected(new Set());
|
||||
|
||||
const currentFilters = useMemo(
|
||||
() => ({
|
||||
status: status || undefined,
|
||||
severity: severity ? Number(severity) : undefined,
|
||||
assigneeId: assigneeId || undefined,
|
||||
categoryId: categoryId || undefined,
|
||||
typeId: typeId || undefined,
|
||||
itemId: itemId || undefined,
|
||||
search: search || undefined,
|
||||
}),
|
||||
[status, severity, assigneeId, categoryId, typeId, itemId, search],
|
||||
);
|
||||
|
||||
const runBulk = async (payload: { action: string; value?: unknown }) => {
|
||||
const ids = Array.from(selected).slice(0, BULK_LIMIT);
|
||||
try {
|
||||
const res = (await bulk.mutateAsync({ ids, ...payload })) as { updated?: number };
|
||||
toast.success(`Updated ${res.updated ?? ids.length} ticket${ids.length === 1 ? '' : 's'}`);
|
||||
clearSelected();
|
||||
} catch (e) {
|
||||
toast.error((e as Error).message || 'Bulk action failed');
|
||||
} finally {
|
||||
setConfirmBulk(null);
|
||||
}
|
||||
};
|
||||
|
||||
const activeCount = Object.values(currentFilters).filter(Boolean).length;
|
||||
|
||||
const handleSaveView = async () => {
|
||||
if (!newViewName.trim()) return;
|
||||
try {
|
||||
await createView.mutateAsync({
|
||||
name: newViewName.trim(),
|
||||
filters: currentFilters,
|
||||
});
|
||||
toast.success('Saved view');
|
||||
setNewViewName('');
|
||||
setSaveOpen(false);
|
||||
} catch (e) {
|
||||
toast.error((e as Error).message || 'Failed to save view');
|
||||
}
|
||||
};
|
||||
|
||||
const applyView = (filters: Record<string, unknown>) => {
|
||||
const next = new URLSearchParams();
|
||||
Object.entries(filters).forEach(([k, v]) => {
|
||||
if (v !== undefined && v !== null && v !== '') next.set(k, String(v));
|
||||
});
|
||||
setParams(next, { replace: true });
|
||||
setSearchInput(String(filters.search ?? ''));
|
||||
};
|
||||
|
||||
const agentUsers = users;
|
||||
|
||||
// Keyboard navigation
|
||||
useEffect(() => {
|
||||
setCursor((c) => (c >= tickets.length ? tickets.length - 1 : c));
|
||||
}, [tickets.length]);
|
||||
|
||||
useShortcut('j', (e) => {
|
||||
if (tickets.length === 0) return;
|
||||
e.preventDefault();
|
||||
setCursor((c) => Math.min(tickets.length - 1, c < 0 ? 0 : c + 1));
|
||||
}, [tickets.length]);
|
||||
|
||||
useShortcut('k', (e) => {
|
||||
if (tickets.length === 0) return;
|
||||
e.preventDefault();
|
||||
setCursor((c) => Math.max(0, c < 0 ? 0 : c - 1));
|
||||
}, [tickets.length]);
|
||||
|
||||
useShortcut('enter', (e) => {
|
||||
if (cursor < 0 || cursor >= tickets.length) return;
|
||||
e.preventDefault();
|
||||
navigate(`/${tickets[cursor].displayId}`);
|
||||
}, [cursor, tickets]);
|
||||
|
||||
useShortcut('x', (e) => {
|
||||
if (cursor < 0 || cursor >= tickets.length) return;
|
||||
e.preventDefault();
|
||||
toggleOne(tickets[cursor].id);
|
||||
}, [cursor, tickets]);
|
||||
|
||||
return (
|
||||
<Layout wide>
|
||||
{/* Status tabs */}
|
||||
<div className="flex items-center border-b border-border mb-4 -mx-4 px-4 overflow-x-auto">
|
||||
{STATUS_TABS.map((tab) => (
|
||||
<button
|
||||
key={tab.value}
|
||||
onClick={() => updateParam('status', tab.value || null)}
|
||||
className={`px-3 py-2 text-sm whitespace-nowrap border-b-2 -mb-px transition-colors ${
|
||||
status === tab.value
|
||||
? 'border-primary text-foreground font-medium'
|
||||
: 'border-transparent text-muted-foreground hover:text-foreground'
|
||||
}`}
|
||||
>
|
||||
{tab.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Filter bar */}
|
||||
<div className="flex gap-2 mb-4 flex-wrap items-center">
|
||||
<input
|
||||
type="search"
|
||||
value={searchInput}
|
||||
onChange={(e) => setSearchInput(e.target.value)}
|
||||
placeholder="Search title, overview, ID…"
|
||||
className="flex-1 min-w-48 max-w-xs px-3 py-1.5 rounded-md border border-input bg-background text-foreground text-sm focus:outline-none focus:ring-2 focus:ring-ring"
|
||||
/>
|
||||
|
||||
<select
|
||||
value={severity}
|
||||
onChange={(e) => updateParam('severity', e.target.value || null)}
|
||||
className="px-3 py-1.5 rounded-md border border-input bg-background text-foreground text-sm focus:outline-none focus:ring-2 focus:ring-ring"
|
||||
>
|
||||
<option value="">All severities</option>
|
||||
{[1, 2, 3, 4, 5].map((s) => (
|
||||
<option key={s} value={s}>
|
||||
SEV {s}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
<select
|
||||
value={assigneeId}
|
||||
onChange={(e) => updateParam('assigneeId', e.target.value || null)}
|
||||
className="px-3 py-1.5 rounded-md border border-input bg-background text-foreground text-sm focus:outline-none focus:ring-2 focus:ring-ring"
|
||||
>
|
||||
<option value="">All assignees</option>
|
||||
{authUser && (
|
||||
<option value={authUser.id}>Me ({authUser.displayName})</option>
|
||||
)}
|
||||
{agentUsers
|
||||
.filter((u) => u.id !== authUser?.id)
|
||||
.map((u) => (
|
||||
<option key={u.id} value={u.id}>
|
||||
{u.displayName}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
<div className="min-w-56">
|
||||
<CTISelect
|
||||
value={{ categoryId, typeId, itemId }}
|
||||
onChange={(cti) => {
|
||||
setParams(
|
||||
(prev) => {
|
||||
const next = new URLSearchParams(prev);
|
||||
next.delete('page');
|
||||
if (cti.categoryId) next.set('categoryId', cti.categoryId);
|
||||
else next.delete('categoryId');
|
||||
if (cti.typeId) next.set('typeId', cti.typeId);
|
||||
else next.delete('typeId');
|
||||
if (cti.itemId) next.set('itemId', cti.itemId);
|
||||
else next.delete('itemId');
|
||||
return next;
|
||||
},
|
||||
{ replace: true },
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Saved views */}
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<button className="px-3 py-1.5 rounded-md border border-input bg-background text-sm hover:bg-accent">
|
||||
Saved views
|
||||
</button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="w-64">
|
||||
<DropdownMenuLabel>Saved views</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
{savedViewsQ.data && savedViewsQ.data.length > 0 ? (
|
||||
savedViewsQ.data.map((v) => (
|
||||
<div
|
||||
key={v.id}
|
||||
className="flex items-center gap-1 px-2 py-1 hover:bg-accent rounded-sm"
|
||||
>
|
||||
<button
|
||||
onClick={() => applyView(v.filters)}
|
||||
className="flex-1 text-left text-sm truncate"
|
||||
>
|
||||
{v.name}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => deleteView.mutate(v.id)}
|
||||
aria-label="Delete view"
|
||||
className="text-muted-foreground hover:text-destructive"
|
||||
>
|
||||
<Trash2 size={13} />
|
||||
</button>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<p className="px-2 py-1 text-xs text-muted-foreground">No saved views yet</p>
|
||||
)}
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem
|
||||
disabled={activeCount === 0}
|
||||
onSelect={() => setSaveOpen(true)}
|
||||
className="gap-2"
|
||||
>
|
||||
<Save size={13} />
|
||||
Save current filters
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
|
||||
<div className="ml-auto text-xs text-muted-foreground">
|
||||
{isFetching ? 'Loading…' : `${total} result${total === 1 ? '' : 's'}`}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bulk bar */}
|
||||
{selected.size > 0 && (
|
||||
<div className="flex items-center gap-3 mb-3 px-3 py-2 rounded-md bg-accent border border-border">
|
||||
<span className="text-sm font-medium">
|
||||
{selected.size} selected
|
||||
</span>
|
||||
<button
|
||||
onClick={clearSelected}
|
||||
className="text-xs text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
Clear
|
||||
</button>
|
||||
<div className="h-4 w-px bg-border mx-1" />
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<button className="px-2 py-1 rounded-md text-sm hover:bg-background">
|
||||
Reassign
|
||||
</button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="start">
|
||||
<DropdownMenuItem
|
||||
onSelect={() =>
|
||||
setConfirmBulk({
|
||||
kind: 'reassign',
|
||||
value: null,
|
||||
label: 'Unassign',
|
||||
})
|
||||
}
|
||||
>
|
||||
Unassigned
|
||||
</DropdownMenuItem>
|
||||
{agentUsers.map((u) => (
|
||||
<DropdownMenuItem
|
||||
key={u.id}
|
||||
onSelect={() =>
|
||||
setConfirmBulk({
|
||||
kind: 'reassign',
|
||||
value: u.id,
|
||||
label: `Assign to ${u.displayName}`,
|
||||
})
|
||||
}
|
||||
>
|
||||
{u.displayName}
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<button className="px-2 py-1 rounded-md text-sm hover:bg-background">
|
||||
Severity
|
||||
</button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="start">
|
||||
{[1, 2, 3, 4, 5].map((s) => (
|
||||
<DropdownMenuItem
|
||||
key={s}
|
||||
onSelect={() =>
|
||||
setConfirmBulk({
|
||||
kind: 'setSeverity',
|
||||
value: s,
|
||||
label: `Set severity SEV ${s}`,
|
||||
})
|
||||
}
|
||||
>
|
||||
SEV {s}
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
|
||||
<button
|
||||
onClick={() =>
|
||||
setConfirmBulk({ kind: 'close', label: 'Close selected tickets' })
|
||||
}
|
||||
className="px-2 py-1 rounded-md text-sm hover:bg-background"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Ticket list */}
|
||||
{isLoading ? (
|
||||
<div className="text-center py-16 text-muted-foreground text-sm">Loading…</div>
|
||||
) : tickets.length === 0 ? (
|
||||
<div className="text-center py-16 text-muted-foreground text-sm">No tickets found</div>
|
||||
) : (
|
||||
<div className="rounded-md border border-border overflow-hidden">
|
||||
<div className="flex items-center gap-3 px-4 py-2 bg-card text-xs text-muted-foreground border-b border-border">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={allVisible}
|
||||
aria-label="Select all on page"
|
||||
ref={(el) => {
|
||||
if (el) el.indeterminate = !allVisible && someVisible;
|
||||
}}
|
||||
onChange={toggleAll}
|
||||
className="cursor-pointer"
|
||||
/>
|
||||
<span>
|
||||
{tickets.length} of {total}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<ul className="divide-y divide-border">
|
||||
{tickets.map((ticket, idx) => (
|
||||
<li
|
||||
key={ticket.id}
|
||||
className={`flex items-center gap-3 px-4 py-3 transition-colors ${
|
||||
idx === cursor
|
||||
? 'bg-accent/50 ring-1 ring-inset ring-primary'
|
||||
: 'hover:bg-accent/30'
|
||||
}`}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selected.has(ticket.id)}
|
||||
onChange={() => toggleOne(ticket.id)}
|
||||
aria-label={`Select ${ticket.displayId}`}
|
||||
className="cursor-pointer flex-shrink-0"
|
||||
/>
|
||||
<div
|
||||
className={`w-1 self-stretch rounded-full flex-shrink-0 ${SEVERITY_BG[ticket.severity] ?? 'bg-gray-600'}`}
|
||||
/>
|
||||
<Link
|
||||
to={`/${ticket.displayId}`}
|
||||
className="flex-1 min-w-0 flex items-center gap-3 group"
|
||||
>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-0.5 flex-wrap">
|
||||
<span className="text-sm font-medium text-foreground group-hover:text-primary truncate">
|
||||
{ticket.title}
|
||||
</span>
|
||||
<span className="text-xs font-mono text-muted-foreground">
|
||||
{ticket.displayId}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-xs text-muted-foreground flex-wrap">
|
||||
<SeverityBadge severity={ticket.severity} />
|
||||
<StatusBadge status={ticket.status} />
|
||||
<span>
|
||||
opened {formatDistanceToNow(new Date(ticket.createdAt), {
|
||||
addSuffix: true,
|
||||
})}{' '}
|
||||
by {ticket.createdBy.displayName}
|
||||
</span>
|
||||
<span className="hidden md:inline">
|
||||
· {ticket.category.name} › {ticket.type.name} › {ticket.item.name}
|
||||
</span>
|
||||
{ticket.assignee && (
|
||||
<span className="hidden md:inline">· assigned {ticket.assignee.displayName}</span>
|
||||
)}
|
||||
<span>· {ticket._count?.comments ?? 0} comments</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="hidden sm:flex items-center flex-shrink-0">
|
||||
{ticket.assignee ? (
|
||||
<Avatar name={ticket.assignee.displayName} size="sm" />
|
||||
) : null}
|
||||
</div>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Pagination */}
|
||||
{totalPages > 1 && (
|
||||
<div className="flex items-center justify-between mt-4 text-sm">
|
||||
<div className="text-muted-foreground">
|
||||
Page {page} of {totalPages}
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<button
|
||||
disabled={page <= 1}
|
||||
onClick={() => updateParam('page', String(page - 1))}
|
||||
className="p-1.5 rounded-md hover:bg-accent disabled:opacity-40 disabled:cursor-not-allowed"
|
||||
>
|
||||
<ChevronLeft size={16} />
|
||||
</button>
|
||||
<button
|
||||
disabled={page >= totalPages}
|
||||
onClick={() => updateParam('page', String(page + 1))}
|
||||
className="p-1.5 rounded-md hover:bg-accent disabled:opacity-40 disabled:cursor-not-allowed"
|
||||
>
|
||||
<ChevronRight size={16} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Save view dialog */}
|
||||
<Dialog open={saveOpen} onOpenChange={setSaveOpen}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Save current filters</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="py-2">
|
||||
<input
|
||||
autoFocus
|
||||
type="text"
|
||||
value={newViewName}
|
||||
onChange={(e) => setNewViewName(e.target.value)}
|
||||
placeholder="View name"
|
||||
className="w-full px-3 py-2 rounded-md border border-input bg-background text-sm focus:outline-none focus:ring-2 focus:ring-ring"
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') handleSaveView();
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<button
|
||||
onClick={() => setSaveOpen(false)}
|
||||
className="px-3 py-1.5 rounded-md border border-input text-sm hover:bg-accent"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSaveView}
|
||||
disabled={!newViewName.trim() || createView.isPending}
|
||||
className="px-3 py-1.5 rounded-md bg-primary text-primary-foreground text-sm disabled:opacity-50"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* Confirm bulk action */}
|
||||
<AlertDialog open={!!confirmBulk} onOpenChange={(o) => !o && setConfirmBulk(null)}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>{confirmBulk?.label}</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
This will affect {selected.size} ticket{selected.size === 1 ? '' : 's'}.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
onClick={() => {
|
||||
if (!confirmBulk) return;
|
||||
if (confirmBulk.kind === 'close') runBulk({ action: 'close' });
|
||||
else
|
||||
runBulk({
|
||||
action: confirmBulk.kind,
|
||||
value: confirmBulk.value,
|
||||
});
|
||||
}}
|
||||
>
|
||||
Confirm
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
import type { User } from '../../types';
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu';
|
||||
|
||||
interface BulkActionsProps {
|
||||
selectedCount: number;
|
||||
users: User[];
|
||||
onClear: () => void;
|
||||
onConfirm: (bulk: { kind: 'close' | 'setSeverity' | 'reassign'; value?: unknown; label: string }) => void;
|
||||
}
|
||||
|
||||
export default function BulkActions({ selectedCount, users, onClear, onConfirm }: BulkActionsProps) {
|
||||
return (
|
||||
<div className="flex items-center gap-3 mb-3 px-3 py-2 rounded-md bg-accent border border-border">
|
||||
<span className="text-sm font-medium">
|
||||
{selectedCount} selected
|
||||
</span>
|
||||
<button
|
||||
onClick={onClear}
|
||||
className="text-xs text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
Clear
|
||||
</button>
|
||||
<div className="h-4 w-px bg-border mx-1" />
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<button className="px-2 py-1 rounded-md text-sm hover:bg-background">
|
||||
Reassign
|
||||
</button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="start">
|
||||
<DropdownMenuItem
|
||||
onSelect={() => onConfirm({ kind: 'reassign', value: null, label: 'Unassign' })}
|
||||
>
|
||||
Unassigned
|
||||
</DropdownMenuItem>
|
||||
{users.map((u) => (
|
||||
<DropdownMenuItem
|
||||
key={u.id}
|
||||
onSelect={() => onConfirm({ kind: 'reassign', value: u.id, label: `Assign to ${u.displayName}` })}
|
||||
>
|
||||
{u.displayName}
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<button className="px-2 py-1 rounded-md text-sm hover:bg-background">
|
||||
Severity
|
||||
</button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="start">
|
||||
{[1, 2, 3, 4, 5].map((s) => (
|
||||
<DropdownMenuItem
|
||||
key={s}
|
||||
onSelect={() => onConfirm({ kind: 'setSeverity', value: s, label: `Set severity SEV ${s}` })}
|
||||
>
|
||||
SEV {s}
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
|
||||
<button
|
||||
onClick={() => onConfirm({ kind: 'close', label: 'Close selected tickets' })}
|
||||
className="px-2 py-1 rounded-md text-sm hover:bg-background"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,196 @@
|
||||
import { Trash2, Save } from 'lucide-react';
|
||||
import CTISelect from '../../components/CTISelect';
|
||||
import type { TicketStatus, User } from '../../types';
|
||||
import type { SavedView } from '../../../../shared/types';
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu';
|
||||
|
||||
const STATUS_TABS: { value: TicketStatus | ''; label: string }[] = [
|
||||
{ value: '', label: 'All' },
|
||||
{ value: 'OPEN', label: 'Open' },
|
||||
{ value: 'IN_PROGRESS', label: 'In progress' },
|
||||
{ value: 'RESOLVED', label: 'Resolved' },
|
||||
{ value: 'CLOSED', label: 'Closed' },
|
||||
];
|
||||
|
||||
interface TicketFiltersProps {
|
||||
status: TicketStatus | '';
|
||||
severity: string;
|
||||
assigneeId: string;
|
||||
categoryId: string;
|
||||
typeId: string;
|
||||
itemId: string;
|
||||
searchInput: string;
|
||||
onSearchChange: (v: string) => void;
|
||||
onUpdateParam: (key: string, value: string | null) => void;
|
||||
onSetParams: (fn: (prev: URLSearchParams) => URLSearchParams) => void;
|
||||
authUser: { id: string; displayName: string } | null;
|
||||
users: User[];
|
||||
savedViews: SavedView[];
|
||||
onDeleteView: (id: string) => void;
|
||||
onApplyView: (filters: Record<string, unknown>) => void;
|
||||
onSaveView: () => void;
|
||||
activeFilterCount: number;
|
||||
total: number;
|
||||
isFetching: boolean;
|
||||
}
|
||||
|
||||
export default function TicketFilters({
|
||||
status,
|
||||
severity,
|
||||
assigneeId,
|
||||
categoryId,
|
||||
typeId,
|
||||
itemId,
|
||||
searchInput,
|
||||
onSearchChange,
|
||||
onUpdateParam,
|
||||
onSetParams,
|
||||
authUser,
|
||||
users,
|
||||
savedViews,
|
||||
onDeleteView,
|
||||
onApplyView,
|
||||
onSaveView,
|
||||
activeFilterCount,
|
||||
total,
|
||||
isFetching,
|
||||
}: TicketFiltersProps) {
|
||||
return (
|
||||
<>
|
||||
{/* Status tabs */}
|
||||
<div className="flex items-center border-b border-border mb-4 -mx-4 px-4 overflow-x-auto">
|
||||
{STATUS_TABS.map((tab) => (
|
||||
<button
|
||||
key={tab.value}
|
||||
onClick={() => onUpdateParam('status', tab.value || null)}
|
||||
className={`px-3 py-2 text-sm whitespace-nowrap border-b-2 -mb-px transition-colors ${
|
||||
status === tab.value
|
||||
? 'border-primary text-foreground font-medium'
|
||||
: 'border-transparent text-muted-foreground hover:text-foreground'
|
||||
}`}
|
||||
>
|
||||
{tab.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Filter bar */}
|
||||
<div className="flex gap-2 mb-4 flex-wrap items-center">
|
||||
<input
|
||||
type="search"
|
||||
value={searchInput}
|
||||
onChange={(e) => onSearchChange(e.target.value)}
|
||||
placeholder="Search title, overview, ID…"
|
||||
className="flex-1 min-w-48 max-w-xs px-3 py-1.5 rounded-md border border-input bg-background text-foreground text-sm focus:outline-none focus:ring-2 focus:ring-ring"
|
||||
/>
|
||||
|
||||
<select
|
||||
value={severity}
|
||||
onChange={(e) => onUpdateParam('severity', e.target.value || null)}
|
||||
className="px-3 py-1.5 rounded-md border border-input bg-background text-foreground text-sm focus:outline-none focus:ring-2 focus:ring-ring"
|
||||
>
|
||||
<option value="">All severities</option>
|
||||
{[1, 2, 3, 4, 5].map((s) => (
|
||||
<option key={s} value={s}>
|
||||
SEV {s}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
<select
|
||||
value={assigneeId}
|
||||
onChange={(e) => onUpdateParam('assigneeId', e.target.value || null)}
|
||||
className="px-3 py-1.5 rounded-md border border-input bg-background text-foreground text-sm focus:outline-none focus:ring-2 focus:ring-ring"
|
||||
>
|
||||
<option value="">All assignees</option>
|
||||
{authUser && (
|
||||
<option value={authUser.id}>Me ({authUser.displayName})</option>
|
||||
)}
|
||||
{users
|
||||
.filter((u) => u.id !== authUser?.id)
|
||||
.map((u) => (
|
||||
<option key={u.id} value={u.id}>
|
||||
{u.displayName}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
<div className="min-w-56">
|
||||
<CTISelect
|
||||
value={{ categoryId, typeId, itemId }}
|
||||
onChange={(cti) => {
|
||||
onSetParams((prev) => {
|
||||
const next = new URLSearchParams(prev);
|
||||
next.delete('page');
|
||||
if (cti.categoryId) next.set('categoryId', cti.categoryId);
|
||||
else next.delete('categoryId');
|
||||
if (cti.typeId) next.set('typeId', cti.typeId);
|
||||
else next.delete('typeId');
|
||||
if (cti.itemId) next.set('itemId', cti.itemId);
|
||||
else next.delete('itemId');
|
||||
return next;
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Saved views */}
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<button className="px-3 py-1.5 rounded-md border border-input bg-background text-sm hover:bg-accent">
|
||||
Saved views
|
||||
</button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="w-64">
|
||||
<DropdownMenuLabel>Saved views</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
{savedViews.length > 0 ? (
|
||||
savedViews.map((v) => (
|
||||
<div
|
||||
key={v.id}
|
||||
className="flex items-center gap-1 px-2 py-1 hover:bg-accent rounded-sm"
|
||||
>
|
||||
<button
|
||||
onClick={() => onApplyView(v.filters)}
|
||||
className="flex-1 text-left text-sm truncate"
|
||||
>
|
||||
{v.name}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => onDeleteView(v.id)}
|
||||
aria-label="Delete view"
|
||||
className="text-muted-foreground hover:text-destructive"
|
||||
>
|
||||
<Trash2 size={13} />
|
||||
</button>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<p className="px-2 py-1 text-xs text-muted-foreground">No saved views yet</p>
|
||||
)}
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem
|
||||
disabled={activeFilterCount === 0}
|
||||
onSelect={onSaveView}
|
||||
className="gap-2"
|
||||
>
|
||||
<Save size={13} />
|
||||
Save current filters
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
|
||||
<div className="ml-auto text-xs text-muted-foreground">
|
||||
{isFetching ? 'Loading…' : `${total} result${total === 1 ? '' : 's'}`}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
import { Link } from 'react-router-dom';
|
||||
import { formatDistanceToNow } from 'date-fns';
|
||||
import { SEVERITY_BG } from '../../lib/severityColors';
|
||||
import SeverityBadge from '../../components/SeverityBadge';
|
||||
import StatusBadge from '../../components/StatusBadge';
|
||||
import Avatar from '../../components/Avatar';
|
||||
import type { Ticket } from '../../types';
|
||||
|
||||
interface TicketListItemProps {
|
||||
ticket: Ticket;
|
||||
selected: boolean;
|
||||
focused: boolean;
|
||||
onToggle: () => void;
|
||||
}
|
||||
|
||||
export default function TicketListItem({ ticket, selected, focused, onToggle }: TicketListItemProps) {
|
||||
return (
|
||||
<li
|
||||
className={`flex items-center gap-3 px-4 py-3 transition-colors ${
|
||||
focused
|
||||
? 'bg-accent/50 ring-1 ring-inset ring-primary'
|
||||
: 'hover:bg-accent/30'
|
||||
}`}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selected}
|
||||
onChange={onToggle}
|
||||
aria-label={`Select ${ticket.displayId}`}
|
||||
className="cursor-pointer flex-shrink-0"
|
||||
/>
|
||||
<div
|
||||
className={`w-1 self-stretch rounded-full flex-shrink-0 ${SEVERITY_BG[ticket.severity] ?? 'bg-gray-600'}`}
|
||||
/>
|
||||
<Link
|
||||
to={`/${ticket.displayId}`}
|
||||
className="flex-1 min-w-0 flex items-center gap-3 group"
|
||||
>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-0.5 flex-wrap">
|
||||
<span className="text-sm font-medium text-foreground group-hover:text-primary truncate">
|
||||
{ticket.title}
|
||||
</span>
|
||||
<span className="text-xs font-mono text-muted-foreground">
|
||||
{ticket.displayId}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-xs text-muted-foreground flex-wrap">
|
||||
<SeverityBadge severity={ticket.severity} />
|
||||
<StatusBadge status={ticket.status} />
|
||||
<span>
|
||||
opened {formatDistanceToNow(new Date(ticket.createdAt), {
|
||||
addSuffix: true,
|
||||
})}{' '}
|
||||
by {ticket.createdBy.displayName}
|
||||
</span>
|
||||
<span className="hidden md:inline">
|
||||
· {ticket.category.name} › {ticket.type.name} › {ticket.item.name}
|
||||
</span>
|
||||
{ticket.assignee && (
|
||||
<span className="hidden md:inline">· assigned {ticket.assignee.displayName}</span>
|
||||
)}
|
||||
<span>· {ticket._count?.comments ?? 0} comments</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="hidden sm:flex items-center flex-shrink-0">
|
||||
{ticket.assignee ? (
|
||||
<Avatar name={ticket.assignee.displayName} size="sm" />
|
||||
) : null}
|
||||
</div>
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,377 @@
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { useNavigate, useSearchParams } from 'react-router-dom';
|
||||
import { useShortcut } from '../../hooks/useShortcuts';
|
||||
import { ChevronLeft, ChevronRight } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
import Layout from '../../components/Layout';
|
||||
import { TicketStatus } from '../../types';
|
||||
import { useAuth } from '../../contexts/AuthContext';
|
||||
import {
|
||||
useTicketsPaged,
|
||||
useBulkTickets,
|
||||
useSavedViews,
|
||||
useCreateSavedView,
|
||||
useDeleteSavedView,
|
||||
useUsers,
|
||||
} from '../../api/queries';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog';
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from '@/components/ui/alert-dialog';
|
||||
import TicketFilters from './TicketFilters';
|
||||
import BulkActions from './BulkActions';
|
||||
import TicketListItem from './TicketListItem';
|
||||
|
||||
const PAGE_SIZE = 25;
|
||||
const BULK_LIMIT = 500;
|
||||
|
||||
export default function Tickets() {
|
||||
const [params, setParams] = useSearchParams();
|
||||
const navigate = useNavigate();
|
||||
const { user: authUser } = useAuth();
|
||||
const { data: users = [] } = useUsers();
|
||||
|
||||
const status = (params.get('status') ?? '') as TicketStatus | '';
|
||||
const severity = params.get('severity') ?? '';
|
||||
const assigneeId = params.get('assigneeId') ?? '';
|
||||
const categoryId = params.get('categoryId') ?? '';
|
||||
const typeId = params.get('typeId') ?? '';
|
||||
const itemId = params.get('itemId') ?? '';
|
||||
const search = params.get('search') ?? '';
|
||||
const page = Math.max(1, Number(params.get('page') ?? '1'));
|
||||
|
||||
const [searchInput, setSearchInput] = useState(search);
|
||||
const [selected, setSelected] = useState<Set<string>>(new Set());
|
||||
const [cursor, setCursor] = useState<number>(-1);
|
||||
const [saveOpen, setSaveOpen] = useState(false);
|
||||
const [newViewName, setNewViewName] = useState('');
|
||||
const [confirmBulk, setConfirmBulk] = useState<
|
||||
| { kind: 'close' | 'setSeverity' | 'reassign'; value?: unknown; label: string }
|
||||
| null
|
||||
>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const t = setTimeout(() => {
|
||||
if (search !== searchInput) {
|
||||
updateParam('search', searchInput);
|
||||
updateParam('page', '1');
|
||||
}
|
||||
}, 250);
|
||||
return () => clearTimeout(t);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [searchInput]);
|
||||
|
||||
const updateParam = (key: string, value: string | null) => {
|
||||
setParams(
|
||||
(prev) => {
|
||||
const next = new URLSearchParams(prev);
|
||||
if (value === null || value === '') next.delete(key);
|
||||
else next.set(key, value);
|
||||
if (key !== 'page') next.delete('page');
|
||||
return next;
|
||||
},
|
||||
{ replace: true },
|
||||
);
|
||||
};
|
||||
|
||||
const queryParams = {
|
||||
status: status || undefined,
|
||||
severity: severity ? Number(severity) : undefined,
|
||||
assigneeId: assigneeId || undefined,
|
||||
categoryId: categoryId || undefined,
|
||||
typeId: typeId || undefined,
|
||||
itemId: itemId || undefined,
|
||||
search: search || undefined,
|
||||
page,
|
||||
pageSize: PAGE_SIZE,
|
||||
};
|
||||
|
||||
const { data, isLoading, isFetching } = useTicketsPaged(queryParams);
|
||||
const tickets = data?.data ?? [];
|
||||
const total = data?.total ?? 0;
|
||||
const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE));
|
||||
|
||||
const savedViewsQ = useSavedViews();
|
||||
const createView = useCreateSavedView();
|
||||
const deleteView = useDeleteSavedView();
|
||||
const bulk = useBulkTickets();
|
||||
|
||||
const allVisible = tickets.length > 0 && tickets.every((t) => selected.has(t.id));
|
||||
const someVisible = tickets.some((t) => selected.has(t.id));
|
||||
|
||||
const toggleAll = () => {
|
||||
setSelected((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (allVisible) tickets.forEach((t) => next.delete(t.id));
|
||||
else tickets.forEach((t) => next.add(t.id));
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
const toggleOne = (id: string) => {
|
||||
setSelected((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(id)) next.delete(id);
|
||||
else next.add(id);
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
const clearSelected = () => setSelected(new Set());
|
||||
|
||||
const currentFilters = useMemo(
|
||||
() => ({
|
||||
status: status || undefined,
|
||||
severity: severity ? Number(severity) : undefined,
|
||||
assigneeId: assigneeId || undefined,
|
||||
categoryId: categoryId || undefined,
|
||||
typeId: typeId || undefined,
|
||||
itemId: itemId || undefined,
|
||||
search: search || undefined,
|
||||
}),
|
||||
[status, severity, assigneeId, categoryId, typeId, itemId, search],
|
||||
);
|
||||
|
||||
const runBulk = async (payload: { action: string; value?: unknown }) => {
|
||||
const ids = Array.from(selected).slice(0, BULK_LIMIT);
|
||||
try {
|
||||
const res = (await bulk.mutateAsync({ ids, ...payload })) as { updated?: number };
|
||||
toast.success(`Updated ${res.updated ?? ids.length} ticket${ids.length === 1 ? '' : 's'}`);
|
||||
clearSelected();
|
||||
} catch (e) {
|
||||
toast.error((e as Error).message || 'Bulk action failed');
|
||||
} finally {
|
||||
setConfirmBulk(null);
|
||||
}
|
||||
};
|
||||
|
||||
const activeCount = Object.values(currentFilters).filter(Boolean).length;
|
||||
|
||||
const handleSaveView = async () => {
|
||||
if (!newViewName.trim()) return;
|
||||
try {
|
||||
await createView.mutateAsync({
|
||||
name: newViewName.trim(),
|
||||
filters: currentFilters,
|
||||
});
|
||||
toast.success('Saved view');
|
||||
setNewViewName('');
|
||||
setSaveOpen(false);
|
||||
} catch (e) {
|
||||
toast.error((e as Error).message || 'Failed to save view');
|
||||
}
|
||||
};
|
||||
|
||||
const applyView = (filters: Record<string, unknown>) => {
|
||||
const next = new URLSearchParams();
|
||||
Object.entries(filters).forEach(([k, v]) => {
|
||||
if (v !== undefined && v !== null && v !== '') next.set(k, String(v));
|
||||
});
|
||||
setParams(next, { replace: true });
|
||||
setSearchInput(String(filters.search ?? ''));
|
||||
};
|
||||
|
||||
// Keyboard navigation
|
||||
useEffect(() => {
|
||||
setCursor((c) => (c >= tickets.length ? tickets.length - 1 : c));
|
||||
}, [tickets.length]);
|
||||
|
||||
useShortcut('j', (e) => {
|
||||
if (tickets.length === 0) return;
|
||||
e.preventDefault();
|
||||
setCursor((c) => Math.min(tickets.length - 1, c < 0 ? 0 : c + 1));
|
||||
}, [tickets.length]);
|
||||
|
||||
useShortcut('k', (e) => {
|
||||
if (tickets.length === 0) return;
|
||||
e.preventDefault();
|
||||
setCursor((c) => Math.max(0, c < 0 ? 0 : c - 1));
|
||||
}, [tickets.length]);
|
||||
|
||||
useShortcut('enter', (e) => {
|
||||
if (cursor < 0 || cursor >= tickets.length) return;
|
||||
e.preventDefault();
|
||||
navigate(`/${tickets[cursor].displayId}`);
|
||||
}, [cursor, tickets]);
|
||||
|
||||
useShortcut('x', (e) => {
|
||||
if (cursor < 0 || cursor >= tickets.length) return;
|
||||
e.preventDefault();
|
||||
toggleOne(tickets[cursor].id);
|
||||
}, [cursor, tickets]);
|
||||
|
||||
return (
|
||||
<Layout wide>
|
||||
<TicketFilters
|
||||
status={status}
|
||||
severity={severity}
|
||||
assigneeId={assigneeId}
|
||||
categoryId={categoryId}
|
||||
typeId={typeId}
|
||||
itemId={itemId}
|
||||
searchInput={searchInput}
|
||||
onSearchChange={setSearchInput}
|
||||
onUpdateParam={updateParam}
|
||||
onSetParams={(fn) => setParams(fn, { replace: true })}
|
||||
authUser={authUser}
|
||||
users={users}
|
||||
savedViews={savedViewsQ.data ?? []}
|
||||
onDeleteView={(id) => deleteView.mutate(id)}
|
||||
onApplyView={applyView}
|
||||
onSaveView={() => setSaveOpen(true)}
|
||||
activeFilterCount={activeCount}
|
||||
total={total}
|
||||
isFetching={isFetching}
|
||||
/>
|
||||
|
||||
{selected.size > 0 && (
|
||||
<BulkActions
|
||||
selectedCount={selected.size}
|
||||
users={users}
|
||||
onClear={clearSelected}
|
||||
onConfirm={setConfirmBulk}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Ticket list */}
|
||||
{isLoading ? (
|
||||
<div className="text-center py-16 text-muted-foreground text-sm">Loading…</div>
|
||||
) : tickets.length === 0 ? (
|
||||
<div className="text-center py-16 text-muted-foreground text-sm">No tickets found</div>
|
||||
) : (
|
||||
<div className="rounded-md border border-border overflow-hidden">
|
||||
<div className="flex items-center gap-3 px-4 py-2 bg-card text-xs text-muted-foreground border-b border-border">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={allVisible}
|
||||
aria-label="Select all on page"
|
||||
ref={(el) => {
|
||||
if (el) el.indeterminate = !allVisible && someVisible;
|
||||
}}
|
||||
onChange={toggleAll}
|
||||
className="cursor-pointer"
|
||||
/>
|
||||
<span>
|
||||
{tickets.length} of {total}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<ul className="divide-y divide-border">
|
||||
{tickets.map((ticket, idx) => (
|
||||
<TicketListItem
|
||||
key={ticket.id}
|
||||
ticket={ticket}
|
||||
selected={selected.has(ticket.id)}
|
||||
focused={idx === cursor}
|
||||
onToggle={() => toggleOne(ticket.id)}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Pagination */}
|
||||
{totalPages > 1 && (
|
||||
<div className="flex items-center justify-between mt-4 text-sm">
|
||||
<div className="text-muted-foreground">
|
||||
Page {page} of {totalPages}
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<button
|
||||
disabled={page <= 1}
|
||||
onClick={() => updateParam('page', String(page - 1))}
|
||||
className="p-1.5 rounded-md hover:bg-accent disabled:opacity-40 disabled:cursor-not-allowed"
|
||||
>
|
||||
<ChevronLeft size={16} />
|
||||
</button>
|
||||
<button
|
||||
disabled={page >= totalPages}
|
||||
onClick={() => updateParam('page', String(page + 1))}
|
||||
className="p-1.5 rounded-md hover:bg-accent disabled:opacity-40 disabled:cursor-not-allowed"
|
||||
>
|
||||
<ChevronRight size={16} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Save view dialog */}
|
||||
<Dialog open={saveOpen} onOpenChange={setSaveOpen}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Save current filters</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="py-2">
|
||||
<input
|
||||
autoFocus
|
||||
type="text"
|
||||
value={newViewName}
|
||||
onChange={(e) => setNewViewName(e.target.value)}
|
||||
placeholder="View name"
|
||||
className="w-full px-3 py-2 rounded-md border border-input bg-background text-sm focus:outline-none focus:ring-2 focus:ring-ring"
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') handleSaveView();
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<button
|
||||
onClick={() => setSaveOpen(false)}
|
||||
className="px-3 py-1.5 rounded-md border border-input text-sm hover:bg-accent"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSaveView}
|
||||
disabled={!newViewName.trim() || createView.isPending}
|
||||
className="px-3 py-1.5 rounded-md bg-primary text-primary-foreground text-sm disabled:opacity-50"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* Confirm bulk action */}
|
||||
<AlertDialog open={!!confirmBulk} onOpenChange={(o) => !o && setConfirmBulk(null)}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>{confirmBulk?.label}</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
This will affect {selected.size} ticket{selected.size === 1 ? '' : 's'}.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
onClick={() => {
|
||||
if (!confirmBulk) return;
|
||||
if (confirmBulk.kind === 'close') runBulk({ action: 'close' });
|
||||
else
|
||||
runBulk({
|
||||
action: confirmBulk.kind,
|
||||
value: confirmBulk.value,
|
||||
});
|
||||
}}
|
||||
>
|
||||
Confirm
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export { default } from './Tickets';
|
||||
Reference in New Issue
Block a user