feat: three-column ticket list layout (list + detail as peers, no Sheet)
- Replace Sheet slide-over with persistent right-column detail panel - Ticket list shrinks to w-80 when ticket selected, detail takes flex-1 - Animated transition (300ms ease-out) when selecting/deselecting - Kept existing conversation thread, properties sidebar, reply box inline
This commit is contained in:
Gjermund Høsøien Wiggen
@@ -16,12 +16,6 @@ import {
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
} from "@/components/ui/dialog";
|
||||
import {
|
||||
Sheet,
|
||||
SheetContent,
|
||||
SheetHeader,
|
||||
SheetTitle,
|
||||
} from "@/components/ui/sheet";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
@@ -66,7 +60,7 @@ function getInitialColor(name: string): string {
|
||||
return colors[Math.abs(hash) % colors.length];
|
||||
}
|
||||
|
||||
function TicketRow({ ticket, onClick }: { ticket: Ticket; onClick: () => void }) {
|
||||
function TicketRow({ ticket, selected, onClick }: { ticket: Ticket; selected: boolean; onClick: () => void }) {
|
||||
const statusColor = STATUS_COLORS[ticket.status] || STATUS_COLORS.new;
|
||||
const shortId = ticket.id.slice(0, 8);
|
||||
const timeAgo = formatDistanceToNow(new Date(ticket.updated_at), { addSuffix: true });
|
||||
@@ -74,7 +68,12 @@ function TicketRow({ ticket, onClick }: { ticket: Ticket; onClick: () => void })
|
||||
return (
|
||||
<button
|
||||
onClick={onClick}
|
||||
className="w-full flex items-center gap-3 py-3 px-4 text-left hover:bg-accent transition-all duration-150 border-l-2 border-transparent hover:border-primary border-b border-border"
|
||||
className={cn(
|
||||
"w-full flex items-center gap-3 py-3 px-4 text-left transition-all duration-150 border-l-2 border-b border-border",
|
||||
selected
|
||||
? "bg-accent border-l-primary"
|
||||
: "border-l-transparent hover:bg-accent hover:border-l-primary"
|
||||
)}
|
||||
>
|
||||
<span
|
||||
className="w-2 h-2 rounded-full flex-shrink-0"
|
||||
@@ -120,236 +119,240 @@ function SkeletonRow() {
|
||||
);
|
||||
}
|
||||
|
||||
function TicketDetailSheet({
|
||||
function TicketDetailPanel({
|
||||
ticketId,
|
||||
open,
|
||||
onOpenChange,
|
||||
onBack,
|
||||
}: {
|
||||
ticketId: string | null;
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
ticketId: string;
|
||||
onBack: () => void;
|
||||
}) {
|
||||
const [ticket, setTicket] = useState<Ticket | null>(null);
|
||||
const [transactions, setTransactions] = useState<Transaction[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [replyText, setReplyText] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
if (open && ticketId) {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
Promise.all([
|
||||
getTicket(ticketId),
|
||||
getTicketTransactions(ticketId),
|
||||
]).then(([ticketRes, txRes]) => {
|
||||
if (ticketRes.error) {
|
||||
setError(ticketRes.error);
|
||||
} else {
|
||||
setTicket(ticketRes.data);
|
||||
}
|
||||
if (txRes.data) {
|
||||
setTransactions(txRes.data);
|
||||
}
|
||||
setLoading(false);
|
||||
});
|
||||
}
|
||||
}, [open, ticketId]);
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
setTicket(null);
|
||||
setTransactions([]);
|
||||
setReplyText("");
|
||||
Promise.all([
|
||||
getTicket(ticketId),
|
||||
getTicketTransactions(ticketId),
|
||||
]).then(([ticketRes, txRes]) => {
|
||||
if (ticketRes.error) {
|
||||
setError(ticketRes.error);
|
||||
} else {
|
||||
setTicket(ticketRes.data);
|
||||
}
|
||||
if (txRes.data) {
|
||||
setTransactions(txRes.data);
|
||||
}
|
||||
setLoading(false);
|
||||
});
|
||||
}, [ticketId]);
|
||||
|
||||
return (
|
||||
<Sheet open={open} onOpenChange={onOpenChange}>
|
||||
<SheetContent
|
||||
side="right"
|
||||
className="w-full sm:max-w-lg flex flex-col p-0"
|
||||
showCloseButton={true}
|
||||
>
|
||||
{loading && (
|
||||
<div className="flex-1 p-4 space-y-4">
|
||||
{Array.from({ length: 6 }).map((_, i) => (
|
||||
<div key={i} className="flex gap-3">
|
||||
<div className="w-6 h-6 rounded-full bg-muted animate-pulse" />
|
||||
<div className="flex-1 space-y-2">
|
||||
<div className="h-3 bg-muted rounded animate-pulse w-3/4" />
|
||||
<div className="h-3 bg-muted rounded animate-pulse w-1/2" />
|
||||
</div>
|
||||
<div className="flex flex-col h-full">
|
||||
{/* Header */}
|
||||
<div className="flex items-center gap-3 px-4 py-2.5 border-b border-border shrink-0">
|
||||
<button
|
||||
onClick={onBack}
|
||||
className="flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-all duration-150 flex-shrink-0"
|
||||
>
|
||||
<ArrowLeftIcon className="w-3.5 h-3.5" />
|
||||
Back
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{loading && (
|
||||
<div className="flex-1 p-4 space-y-4 overflow-y-auto">
|
||||
{Array.from({ length: 6 }).map((_, i) => (
|
||||
<div key={i} className="flex gap-3">
|
||||
<div className="w-6 h-6 rounded-full bg-muted animate-pulse" />
|
||||
<div className="flex-1 space-y-2">
|
||||
<div className="h-3 bg-muted rounded animate-pulse w-3/4" />
|
||||
<div className="h-3 bg-muted rounded animate-pulse w-1/2" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<div className="flex flex-col items-center justify-center flex-1">
|
||||
<p className="text-sm text-destructive">{error}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!loading && !error && ticket && (
|
||||
<>
|
||||
{/* Title */}
|
||||
<div className="px-4 py-3 border-b border-border shrink-0">
|
||||
<h2 className="text-sm font-semibold truncate">
|
||||
{ticket.subject}
|
||||
</h2>
|
||||
<p className="text-xs text-muted-foreground mt-0.5">
|
||||
<span className="font-mono">{ticket.id.slice(0, 8)}</span>
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<div className="flex flex-col items-center justify-center flex-1">
|
||||
<p className="text-sm text-destructive">{error}</p>
|
||||
</div>
|
||||
)}
|
||||
{/* Conversation */}
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
{transactions.length === 0 && (
|
||||
<div className="flex flex-col items-center justify-center py-20">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
No activity yet
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
{transactions.map((tx) => {
|
||||
const isSystem =
|
||||
tx.transaction_type === "status_change" ||
|
||||
tx.transaction_type === "assignment" ||
|
||||
tx.transaction_type === "create";
|
||||
const isAgent =
|
||||
tx.transaction_type === "agent_reply" ||
|
||||
tx.transaction_type === "internal_note";
|
||||
|
||||
{!loading && !error && ticket && (
|
||||
<div className="flex flex-col h-full">
|
||||
{/* Header */}
|
||||
<SheetHeader className="border-b border-border shrink-0">
|
||||
<SheetTitle className="text-sm font-semibold truncate">
|
||||
{ticket.subject}
|
||||
</SheetTitle>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
<span className="font-mono">{ticket.id.slice(0, 8)}</span>
|
||||
</p>
|
||||
</SheetHeader>
|
||||
|
||||
{/* Conversation */}
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
{transactions.length === 0 && (
|
||||
<div className="flex flex-col items-center justify-center py-20">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
No activity yet
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
{transactions.map((tx) => {
|
||||
const isSystem =
|
||||
tx.transaction_type === "status_change" ||
|
||||
tx.transaction_type === "assignment" ||
|
||||
tx.transaction_type === "create";
|
||||
const isAgent =
|
||||
tx.transaction_type === "agent_reply" ||
|
||||
tx.transaction_type === "internal_note";
|
||||
|
||||
if (isSystem) {
|
||||
const txTimeAgo = formatDistanceToNow(
|
||||
new Date(tx.created_at),
|
||||
{ addSuffix: true }
|
||||
);
|
||||
let message = "";
|
||||
if (tx.transaction_type === "create") {
|
||||
message = "Ticket created";
|
||||
} else if (tx.transaction_type === "status_change") {
|
||||
const oldLabel = tx.old_value
|
||||
? STATUS_LABELS[tx.old_value] || tx.old_value
|
||||
: "?";
|
||||
const newLabel = tx.new_value
|
||||
? STATUS_LABELS[tx.new_value] || tx.new_value
|
||||
: "?";
|
||||
message = `${getInitial(tx.creator_id)} changed status from ${oldLabel} to ${newLabel}`;
|
||||
} else if (tx.transaction_type === "assignment") {
|
||||
message = tx.new_value
|
||||
? `${getInitial(tx.creator_id)} assigned to ${tx.new_value}`
|
||||
: `${getInitial(tx.creator_id)} unassigned`;
|
||||
} else {
|
||||
message = tx.transaction_type;
|
||||
}
|
||||
return (
|
||||
<div
|
||||
key={tx.id}
|
||||
className="flex justify-center py-2"
|
||||
>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{message} · {txTimeAgo}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const isInternal =
|
||||
tx.transaction_type === "internal_note";
|
||||
if (isSystem) {
|
||||
const txTimeAgo = formatDistanceToNow(
|
||||
new Date(tx.created_at),
|
||||
{ addSuffix: true }
|
||||
);
|
||||
|
||||
let message = "";
|
||||
if (tx.transaction_type === "create") {
|
||||
message = "Ticket created";
|
||||
} else if (tx.transaction_type === "status_change") {
|
||||
const oldLabel = tx.old_value
|
||||
? STATUS_LABELS[tx.old_value] || tx.old_value
|
||||
: "?";
|
||||
const newLabel = tx.new_value
|
||||
? STATUS_LABELS[tx.new_value] || tx.new_value
|
||||
: "?";
|
||||
message = `${getInitial(tx.creator_id)} changed status from ${oldLabel} to ${newLabel}`;
|
||||
} else if (tx.transaction_type === "assignment") {
|
||||
message = tx.new_value
|
||||
? `${getInitial(tx.creator_id)} assigned to ${tx.new_value}`
|
||||
: `${getInitial(tx.creator_id)} unassigned`;
|
||||
} else {
|
||||
message = tx.transaction_type;
|
||||
}
|
||||
return (
|
||||
<div
|
||||
key={tx.id}
|
||||
className={cn(
|
||||
"flex gap-3 py-3 px-4",
|
||||
isAgent ? "flex-row-reverse" : ""
|
||||
)}
|
||||
className="flex justify-center py-2"
|
||||
>
|
||||
<div
|
||||
className="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0"
|
||||
style={{
|
||||
backgroundColor: isAgent
|
||||
? getInitialColor(tx.creator_id)
|
||||
: "var(--muted)",
|
||||
}}
|
||||
>
|
||||
<span
|
||||
className="text-[11px] font-semibold"
|
||||
style={{
|
||||
color: isAgent
|
||||
? "#f7f8f8"
|
||||
: "var(--muted-foreground)",
|
||||
}}
|
||||
>
|
||||
{getInitial(tx.creator_id)}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className={cn(
|
||||
"max-w-[75%] rounded-lg px-3 py-2",
|
||||
isAgent
|
||||
? "bg-primary/15 text-foreground"
|
||||
: isInternal
|
||||
? "bg-muted border border-border text-foreground"
|
||||
: "bg-muted text-foreground"
|
||||
)}
|
||||
>
|
||||
{isInternal && (
|
||||
<div className="text-[10px] font-semibold text-chart-3 mb-0.5 uppercase tracking-wider">
|
||||
Internal note
|
||||
</div>
|
||||
)}
|
||||
<p className="text-sm whitespace-pre-wrap">
|
||||
{typeof tx.data === "object" &&
|
||||
tx.data !== null &&
|
||||
"body" in (tx.data as Record<string, unknown>)
|
||||
? String(
|
||||
(tx.data as Record<string, unknown>).body
|
||||
)
|
||||
: tx.transaction_type}
|
||||
</p>
|
||||
<p className="text-[10px] text-muted-foreground mt-1">
|
||||
{txTimeAgo}
|
||||
</p>
|
||||
</div>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{message} · {txTimeAgo}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
}
|
||||
|
||||
{/* Reply box */}
|
||||
<div className="border-t border-border bg-sidebar p-3 shrink-0">
|
||||
<div className="flex items-end gap-2">
|
||||
<textarea
|
||||
value={replyText}
|
||||
onChange={(e) => setReplyText(e.target.value)}
|
||||
placeholder="Reply to this ticket..."
|
||||
rows={2}
|
||||
className="flex-1 px-3 py-2 rounded-lg bg-background border border-border text-sm text-foreground placeholder:text-muted-foreground outline-none focus:border-primary focus:ring-1 focus:ring-primary resize-none transition-all duration-150"
|
||||
/>
|
||||
<div className="flex items-center gap-1">
|
||||
<button
|
||||
className="w-8 h-8 flex items-center justify-center rounded-lg text-muted-foreground hover:text-foreground hover:bg-accent transition-all duration-150"
|
||||
title="Attach file (coming soon)"
|
||||
const isInternal =
|
||||
tx.transaction_type === "internal_note";
|
||||
const txTimeAgo = formatDistanceToNow(
|
||||
new Date(tx.created_at),
|
||||
{ addSuffix: true }
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={tx.id}
|
||||
className={cn(
|
||||
"flex gap-3 py-3 px-4",
|
||||
isAgent ? "flex-row-reverse" : ""
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0"
|
||||
style={{
|
||||
backgroundColor: isAgent
|
||||
? getInitialColor(tx.creator_id)
|
||||
: "var(--muted)",
|
||||
}}
|
||||
>
|
||||
<PaperclipIcon className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
disabled={!replyText.trim()}
|
||||
<span
|
||||
className="text-[11px] font-semibold"
|
||||
style={{
|
||||
color: isAgent
|
||||
? "#f7f8f8"
|
||||
: "var(--muted-foreground)",
|
||||
}}
|
||||
>
|
||||
{getInitial(tx.creator_id)}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className={cn(
|
||||
"w-8 h-8 flex items-center justify-center rounded-lg transition-all duration-150",
|
||||
replyText.trim()
|
||||
? "bg-primary text-primary-foreground hover:bg-primary/80"
|
||||
: "bg-muted text-muted-foreground cursor-not-allowed"
|
||||
"max-w-[75%] rounded-lg px-3 py-2",
|
||||
isAgent
|
||||
? "bg-primary/15 text-foreground"
|
||||
: isInternal
|
||||
? "bg-muted border border-border text-foreground"
|
||||
: "bg-muted text-foreground"
|
||||
)}
|
||||
>
|
||||
<SendIcon className="w-4 h-4" />
|
||||
</button>
|
||||
{isInternal && (
|
||||
<div className="text-[10px] font-semibold text-chart-3 mb-0.5 uppercase tracking-wider">
|
||||
Internal note
|
||||
</div>
|
||||
)}
|
||||
<p className="text-sm whitespace-pre-wrap">
|
||||
{typeof tx.data === "object" &&
|
||||
tx.data !== null &&
|
||||
"body" in (tx.data as Record<string, unknown>)
|
||||
? String(
|
||||
(tx.data as Record<string, unknown>).body
|
||||
)
|
||||
: tx.transaction_type}
|
||||
</p>
|
||||
<p className="text-[10px] text-muted-foreground mt-1">
|
||||
{txTimeAgo}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Reply box */}
|
||||
<div className="border-t border-border bg-sidebar p-3 shrink-0">
|
||||
<div className="flex items-end gap-2">
|
||||
<textarea
|
||||
value={replyText}
|
||||
onChange={(e) => setReplyText(e.target.value)}
|
||||
placeholder="Reply to this ticket..."
|
||||
rows={2}
|
||||
className="flex-1 px-3 py-2 rounded-lg bg-background border border-border text-sm text-foreground placeholder:text-muted-foreground outline-none focus:border-primary focus:ring-1 focus:ring-primary resize-none transition-all duration-150"
|
||||
/>
|
||||
<div className="flex items-center gap-1">
|
||||
<button
|
||||
className="w-8 h-8 flex items-center justify-center rounded-lg text-muted-foreground hover:text-foreground hover:bg-accent transition-all duration-150"
|
||||
title="Attach file (coming soon)"
|
||||
>
|
||||
<PaperclipIcon className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
disabled={!replyText.trim()}
|
||||
className={cn(
|
||||
"w-8 h-8 flex items-center justify-center rounded-lg transition-all duration-150",
|
||||
replyText.trim()
|
||||
? "bg-primary text-primary-foreground hover:bg-primary/80"
|
||||
: "bg-muted text-muted-foreground cursor-not-allowed"
|
||||
)}
|
||||
>
|
||||
<SendIcon className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -373,9 +376,8 @@ function TicketListPageContent() {
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [createError, setCreateError] = useState<string | null>(null);
|
||||
|
||||
// Sheet
|
||||
const [sheetTicketId, setSheetTicketId] = useState<string | null>(null);
|
||||
const [sheetOpen, setSheetOpen] = useState(false);
|
||||
// Selected ticket
|
||||
const [selectedTicketId, setSelectedTicketId] = useState<string | null>(null);
|
||||
|
||||
const initialQueueId = searchParams.get("queue") || "";
|
||||
|
||||
@@ -456,106 +458,133 @@ function TicketListPageContent() {
|
||||
setNewSubject("");
|
||||
setNewQueueId("");
|
||||
setNewDescription("");
|
||||
// Open in sheet
|
||||
setSheetTicketId(data.id);
|
||||
setSheetOpen(true);
|
||||
setSelectedTicketId(data.id);
|
||||
// Refresh the list to show the new ticket
|
||||
fetchData();
|
||||
}
|
||||
};
|
||||
|
||||
const handleSelectTicket = (ticketId: string) => {
|
||||
setSelectedTicketId(ticketId);
|
||||
};
|
||||
|
||||
const handleDeselectTicket = () => {
|
||||
setSelectedTicketId(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
{/* Top bar */}
|
||||
<div className="flex items-center gap-3 px-4 py-3 border-b border-border">
|
||||
<div className="relative flex-1">
|
||||
<SearchIcon className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
|
||||
<input
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
placeholder="Search tickets..."
|
||||
className="w-full h-8 pl-9 pr-3 rounded-lg bg-background border border-border text-sm text-foreground placeholder:text-muted-foreground outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all duration-150"
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
onClick={() => setDialogOpen(true)}
|
||||
className="h-8 px-3 rounded-lg text-sm font-medium bg-gradient-to-r from-primary to-primary/80 hover:from-primary/90 hover:to-primary/70 text-primary-foreground border-0 transition-all duration-150"
|
||||
>
|
||||
<PlusIcon className="w-4 h-4 mr-1.5" />
|
||||
New ticket
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Filter chips */}
|
||||
<div className="flex items-center gap-1.5 px-4 py-2 border-b border-border">
|
||||
{FILTERS.map((filter) => (
|
||||
<button
|
||||
key={filter.key ?? "all"}
|
||||
onClick={() => setActiveFilter(filter.key)}
|
||||
className={cn(
|
||||
"px-2.5 py-1 rounded-md text-xs font-medium transition-all duration-150",
|
||||
activeFilter === filter.key
|
||||
? "bg-primary text-primary-foreground"
|
||||
: "text-muted-foreground hover:text-foreground hover:bg-accent"
|
||||
)}
|
||||
>
|
||||
{filter.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Ticket list */}
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
{error && (
|
||||
<div className="px-4 py-3 text-sm text-destructive bg-destructive/5 border-b border-destructive/10">
|
||||
{error}{" "}
|
||||
<button
|
||||
onClick={fetchData}
|
||||
className="underline hover:text-destructive/80"
|
||||
>
|
||||
Retry
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex h-full">
|
||||
{/* Ticket list column */}
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-col h-full overflow-hidden transition-all duration-300 ease-out",
|
||||
selectedTicketId ? "w-80 min-w-80 flex-shrink-0" : "flex-1 min-w-0"
|
||||
)}
|
||||
>
|
||||
{/* Top bar */}
|
||||
<div className="flex items-center gap-3 px-4 py-3 border-b border-border shrink-0">
|
||||
<div className="relative flex-1">
|
||||
<SearchIcon className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
|
||||
<input
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
placeholder="Search tickets..."
|
||||
className="w-full h-8 pl-9 pr-3 rounded-lg bg-background border border-border text-sm text-foreground placeholder:text-muted-foreground outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all duration-150"
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
onClick={() => setDialogOpen(true)}
|
||||
className="h-8 px-3 rounded-lg text-sm font-medium bg-gradient-to-r from-primary to-primary/80 hover:from-primary/90 hover:to-primary/70 text-primary-foreground border-0 transition-all duration-150"
|
||||
>
|
||||
<PlusIcon className="w-4 h-4 mr-1.5" />
|
||||
New ticket
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{loading &&
|
||||
Array.from({ length: 12 }).map((_, i) => <SkeletonRow key={i} />)}
|
||||
{/* Filter chips */}
|
||||
<div className="flex items-center gap-1.5 px-4 py-2 border-b border-border shrink-0">
|
||||
{FILTERS.map((filter) => (
|
||||
<button
|
||||
key={filter.key ?? "all"}
|
||||
onClick={() => setActiveFilter(filter.key)}
|
||||
className={cn(
|
||||
"px-2.5 py-1 rounded-md text-xs font-medium transition-all duration-150",
|
||||
activeFilter === filter.key
|
||||
? "bg-primary text-primary-foreground"
|
||||
: "text-muted-foreground hover:text-foreground hover:bg-accent"
|
||||
)}
|
||||
>
|
||||
{filter.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{!loading &&
|
||||
!error &&
|
||||
tickets.length === 0 && (
|
||||
<div className="flex flex-col items-center justify-center py-20 px-4">
|
||||
<div className="w-12 h-12 rounded-full bg-muted flex items-center justify-center mb-4">
|
||||
<SearchIcon className="w-5 h-5 text-muted-foreground" />
|
||||
</div>
|
||||
<p className="text-sm text-foreground font-medium">
|
||||
No tickets match your filters
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
Try adjusting your search or filter criteria
|
||||
</p>
|
||||
<Button
|
||||
onClick={() => setDialogOpen(true)}
|
||||
className="mt-4 h-8 px-3 rounded-lg text-sm font-medium bg-gradient-to-r from-primary to-primary/80 hover:from-primary/90 hover:to-primary/70 text-primary-foreground border-0 transition-all duration-150"
|
||||
{/* Ticket list */}
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
{error && (
|
||||
<div className="px-4 py-3 text-sm text-destructive bg-destructive/5 border-b border-destructive/10">
|
||||
{error}{" "}
|
||||
<button
|
||||
onClick={fetchData}
|
||||
className="underline hover:text-destructive/80"
|
||||
>
|
||||
<PlusIcon className="w-4 h-4 mr-1.5" />
|
||||
Create a ticket
|
||||
</Button>
|
||||
Retry
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!loading &&
|
||||
!error &&
|
||||
tickets.map((ticket) => (
|
||||
<TicketRow
|
||||
key={ticket.id}
|
||||
ticket={ticket}
|
||||
onClick={() => {
|
||||
setSheetTicketId(ticket.id);
|
||||
setSheetOpen(true);
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
{loading &&
|
||||
Array.from({ length: 12 }).map((_, i) => <SkeletonRow key={i} />)}
|
||||
|
||||
{!loading &&
|
||||
!error &&
|
||||
tickets.length === 0 && (
|
||||
<div className="flex flex-col items-center justify-center py-20 px-4">
|
||||
<div className="w-12 h-12 rounded-full bg-muted flex items-center justify-center mb-4">
|
||||
<SearchIcon className="w-5 h-5 text-muted-foreground" />
|
||||
</div>
|
||||
<p className="text-sm text-foreground font-medium">
|
||||
No tickets match your filters
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
Try adjusting your search or filter criteria
|
||||
</p>
|
||||
<Button
|
||||
onClick={() => setDialogOpen(true)}
|
||||
className="mt-4 h-8 px-3 rounded-lg text-sm font-medium bg-gradient-to-r from-primary to-primary/80 hover:from-primary/90 hover:to-primary/70 text-primary-foreground border-0 transition-all duration-150"
|
||||
>
|
||||
<PlusIcon className="w-4 h-4 mr-1.5" />
|
||||
Create a ticket
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!loading &&
|
||||
!error &&
|
||||
tickets.map((ticket) => (
|
||||
<TicketRow
|
||||
key={ticket.id}
|
||||
ticket={ticket}
|
||||
selected={ticket.id === selectedTicketId}
|
||||
onClick={() => handleSelectTicket(ticket.id)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Ticket detail column */}
|
||||
{selectedTicketId && (
|
||||
<div
|
||||
className="flex-1 min-w-0 border-l overflow-hidden"
|
||||
style={{ animation: "slide-in-right 300ms ease-out" }}
|
||||
>
|
||||
<TicketDetailPanel
|
||||
ticketId={selectedTicketId}
|
||||
onBack={handleDeselectTicket}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Create ticket dialog */}
|
||||
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
|
||||
<DialogContent
|
||||
@@ -654,13 +683,6 @@ function TicketListPageContent() {
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* Ticket detail sheet */}
|
||||
<TicketDetailSheet
|
||||
ticketId={sheetTicketId}
|
||||
open={sheetOpen}
|
||||
onOpenChange={setSheetOpen}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user