diff --git a/frontend/src/components/dashboard/TicketQueue.tsx b/frontend/src/components/dashboard/TicketQueue.tsx index 829537be..5437dedf 100644 --- a/frontend/src/components/dashboard/TicketQueue.tsx +++ b/frontend/src/components/dashboard/TicketQueue.tsx @@ -1,11 +1,11 @@ import { useState, useEffect, useRef, useCallback } from 'react' -import { useNavigate } from 'react-router-dom' +import { useNavigate, Link } from 'react-router-dom' import { Ticket, ChevronDown, Check, Loader2, AlertCircle } from 'lucide-react' import { integrationsApi } from '@/api/integrations' import type { PSABoard, PSATicketSearchResult } from '@/types/integrations' import { cn } from '@/lib/utils' -const PAGE_SIZE = 10 +const PAGE_SIZE = 5 type Tab = 'mine' | 'unassigned' @@ -188,6 +188,7 @@ function TicketRow({ ticket, isLast, onStartSession }: TicketRowProps) { export function TicketQueue() { const navigate = useNavigate() const [hasConnection, setHasConnection] = useState(null) + const [hasMemberMapping, setHasMemberMapping] = useState(null) // null = loading const [boards, setBoards] = useState([]) const [selectedBoardIds, setSelectedBoardIds] = useState([]) const [activeTab, setActiveTab] = useState('mine') @@ -208,6 +209,15 @@ export function TicketQueue() { .catch(() => setHasConnection(false)) }, []) + // Detect member mapping on mount + useEffect(() => { + integrationsApi.getMemberMappings() + .then(mappings => { + setHasMemberMapping(mappings.length > 0) + }) + .catch(() => setHasMemberMapping(false)) + }, []) + // Fetch boards once connection confirmed useEffect(() => { if (!hasConnection) return @@ -250,12 +260,13 @@ export function TicketQueue() { // Initial + reset fetch when tab or board selection changes useEffect(() => { if (!hasConnection) return + if (activeTab === 'mine' && hasMemberMapping !== true) return setPage(1) setTickets([]) setHasMore(false) setLoading(true) fetchTickets(activeTab, selectedBoardIds, 1, false).finally(() => setLoading(false)) - }, [activeTab, selectedBoardIds, hasConnection, fetchTickets]) + }, [activeTab, selectedBoardIds, hasConnection, hasMemberMapping, fetchTickets]) const handleLoadMore = async () => { const nextPage = page + 1 @@ -327,6 +338,18 @@ export function TicketQueue() { {/* Content */}
+ {/* Mapping prompt for "mine" tab when no member mapping configured */} + {activeTab === 'mine' && hasMemberMapping === false && ( +
+

+ + Map your PSA member + {' '} + to see your ticket queue. +

+
+ )} + {/* Error */} {error && (
@@ -352,6 +375,18 @@ export function TicketQueue() { )} + {/* View all tickets link */} + {tickets.length > 0 && ( +
+ + View all tickets → + +
+ )} + {/* Empty states */} {!error && !loading && tickets.length === 0 && (