737e8942f6
- Replace Sheet slide-over with inline peer detail column - List column: 40% width (min 360px) when ticket selected, flex-1 otherwise - Detail column: 60% width (min 480px), slides in from right (300ms) - Mobile: list hidden when ticket selected, detail becomes full-width - Subtle border-r divider on list column - Taller ticket rows (py-4) with smooth hover transitions - width transition on list column resize
701 lines
25 KiB
TypeScript
701 lines
25 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect, useCallback } from "react";
|
|
import { useRouter, useSearchParams } from "next/navigation";
|
|
import { PlusIcon, SearchIcon, ArrowLeftIcon, SendIcon, PaperclipIcon } from "lucide-react";
|
|
import { formatDistanceToNow } from "date-fns";
|
|
import { getTickets, getTicket, getTicketTransactions, getQueues, createTicket } from "@/lib/api";
|
|
import type { Ticket, Queue, Transaction } from "@/lib/types";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
} from "@/components/ui/dialog";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const STATUS_COLORS: Record<string, string> = {
|
|
new: "#8a8f98",
|
|
open: "#7170ff",
|
|
in_progress: "#f59e0b",
|
|
resolved: "#22c55e",
|
|
closed: "#6b7280",
|
|
};
|
|
|
|
const STATUS_LABELS: Record<string, string> = {
|
|
new: "New",
|
|
open: "Open",
|
|
in_progress: "In progress",
|
|
resolved: "Resolved",
|
|
closed: "Closed",
|
|
};
|
|
|
|
const FILTERS = [
|
|
{ key: null, label: "All" },
|
|
{ key: "open", label: "Open" },
|
|
{ key: "in_progress", label: "In progress" },
|
|
{ key: "resolved", label: "Resolved" },
|
|
{ key: "my", label: "My tickets" },
|
|
{ key: "unassigned", label: "Unassigned" },
|
|
] as const;
|
|
|
|
type FilterKey = (typeof FILTERS)[number]["key"];
|
|
|
|
function getInitial(name: string): string {
|
|
if (!name) return "?";
|
|
return name.charAt(0).toUpperCase();
|
|
}
|
|
|
|
function getInitialColor(name: string): string {
|
|
const colors = ["#5e6ad2", "#7170ff", "#828fff", "#f59e0b", "#22c55e"];
|
|
let hash = 0;
|
|
for (let i = 0; i < name.length; i++) {
|
|
hash = name.charCodeAt(i) + ((hash << 5) - hash);
|
|
}
|
|
return colors[Math.abs(hash) % colors.length];
|
|
}
|
|
|
|
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 });
|
|
|
|
return (
|
|
<button
|
|
onClick={onClick}
|
|
className={cn(
|
|
"w-full flex items-center gap-3 py-4 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"
|
|
style={{ backgroundColor: statusColor }}
|
|
/>
|
|
<span className="font-mono text-xs text-muted-foreground w-16 flex-shrink-0">
|
|
{shortId}
|
|
</span>
|
|
<span className="text-sm text-foreground flex-1 truncate font-medium">
|
|
{ticket.subject}
|
|
</span>
|
|
<span className="text-xs text-muted-foreground bg-muted px-1.5 py-0.5 rounded font-medium flex-shrink-0">
|
|
{ticket.queue_id.slice(0, 8)}
|
|
</span>
|
|
{ticket.owner_id ? (
|
|
<span className="w-5 h-5 rounded-full bg-primary flex items-center justify-center flex-shrink-0">
|
|
<span className="text-primary-foreground text-[10px] font-semibold leading-none">
|
|
{ticket.owner_id.charAt(0).toUpperCase()}
|
|
</span>
|
|
</span>
|
|
) : (
|
|
<span className="w-5 h-5 rounded-full border border-border flex items-center justify-center flex-shrink-0">
|
|
<span className="text-muted-foreground text-[10px]">?</span>
|
|
</span>
|
|
)}
|
|
<span className="text-xs text-muted-foreground w-24 text-right flex-shrink-0 tabular-nums">
|
|
{timeAgo}
|
|
</span>
|
|
</button>
|
|
);
|
|
}
|
|
|
|
function SkeletonRow() {
|
|
return (
|
|
<div className="flex items-center gap-3 py-4 px-4 border-b border-border">
|
|
<div className="w-2 h-2 rounded-full bg-muted animate-pulse" />
|
|
<div className="w-16 h-3 bg-muted rounded animate-pulse" />
|
|
<div className="flex-1 h-3 bg-muted rounded animate-pulse" />
|
|
<div className="w-12 h-4 bg-muted rounded animate-pulse" />
|
|
<div className="w-5 h-5 rounded-full bg-muted animate-pulse" />
|
|
<div className="w-20 h-3 bg-muted rounded animate-pulse" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function TicketDetailPanel({
|
|
ticketId,
|
|
onBack,
|
|
}: {
|
|
ticketId: string;
|
|
onBack: () => void;
|
|
}) {
|
|
const [ticket, setTicket] = useState<Ticket | null>(null);
|
|
const [transactions, setTransactions] = useState<Transaction[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [replyText, setReplyText] = useState("");
|
|
|
|
useEffect(() => {
|
|
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 (
|
|
<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>
|
|
|
|
{/* 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";
|
|
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)",
|
|
}}
|
|
>
|
|
<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>
|
|
</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>
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function TicketListPageContent() {
|
|
const router = useRouter();
|
|
const searchParams = useSearchParams();
|
|
|
|
const [tickets, setTickets] = useState<Ticket[]>([]);
|
|
const [queues, setQueues] = useState<Queue[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
const [activeFilter, setActiveFilter] = useState<FilterKey>(null);
|
|
const [searchQuery, setSearchQuery] = useState("");
|
|
|
|
// New ticket dialog
|
|
const [dialogOpen, setDialogOpen] = useState(false);
|
|
const [newSubject, setNewSubject] = useState("");
|
|
const [newQueueId, setNewQueueId] = useState("");
|
|
const [newDescription, setNewDescription] = useState("");
|
|
const [submitting, setSubmitting] = useState(false);
|
|
const [createError, setCreateError] = useState<string | null>(null);
|
|
|
|
// Selected ticket
|
|
const [selectedTicketId, setSelectedTicketId] = useState<string | null>(null);
|
|
|
|
const initialQueueId = searchParams.get("queue") || "";
|
|
|
|
const fetchData = useCallback(async () => {
|
|
setLoading(true);
|
|
setError(null);
|
|
|
|
const statusParam = activeFilter && activeFilter !== "my" && activeFilter !== "unassigned"
|
|
? activeFilter
|
|
: undefined;
|
|
|
|
const [ticketsRes, queuesRes] = await Promise.all([
|
|
getTickets(statusParam ? { status: statusParam } : undefined),
|
|
getQueues(),
|
|
]);
|
|
|
|
if (ticketsRes.error) {
|
|
setError(ticketsRes.error);
|
|
setTickets([]);
|
|
} else {
|
|
let result = ticketsRes.data ?? [];
|
|
|
|
if (activeFilter === "my") {
|
|
result = result.filter((t) => t.owner_id);
|
|
} else if (activeFilter === "unassigned") {
|
|
result = result.filter((t) => !t.owner_id);
|
|
}
|
|
|
|
if (initialQueueId && !activeFilter) {
|
|
result = result.filter((t) => t.queue_id === initialQueueId);
|
|
}
|
|
|
|
if (searchQuery) {
|
|
const q = searchQuery.toLowerCase();
|
|
result = result.filter((t) => t.subject.toLowerCase().includes(q));
|
|
}
|
|
|
|
setTickets(result);
|
|
}
|
|
|
|
if (queuesRes.data) {
|
|
setQueues(queuesRes.data);
|
|
}
|
|
|
|
setLoading(false);
|
|
}, [activeFilter, searchQuery, initialQueueId]);
|
|
|
|
useEffect(() => {
|
|
fetchData();
|
|
}, [fetchData]);
|
|
|
|
// Check for "new" query param to open dialog
|
|
useEffect(() => {
|
|
if (searchParams.get("new") === "true") {
|
|
setDialogOpen(true);
|
|
const url = new URL(window.location.href);
|
|
url.searchParams.delete("new");
|
|
window.history.replaceState({}, "", url.toString());
|
|
}
|
|
}, [searchParams]);
|
|
|
|
const handleCreate = async () => {
|
|
if (!newSubject.trim() || !newQueueId) return;
|
|
setSubmitting(true);
|
|
setCreateError(null);
|
|
|
|
const { data, error } = await createTicket({
|
|
subject: newSubject.trim(),
|
|
queue_id: newQueueId,
|
|
});
|
|
|
|
setSubmitting(false);
|
|
|
|
if (error) {
|
|
setCreateError(error);
|
|
} else if (data) {
|
|
setDialogOpen(false);
|
|
setNewSubject("");
|
|
setNewQueueId("");
|
|
setNewDescription("");
|
|
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 h-full">
|
|
{/* Ticket list column */}
|
|
<div
|
|
className={cn(
|
|
"flex flex-col h-full overflow-hidden transition-[width] duration-300 ease-out",
|
|
selectedTicketId
|
|
? "w-full flex-shrink-0 border-r border-border max-lg:hidden lg:w-[40%] lg:min-w-[360px]"
|
|
: "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>
|
|
|
|
{/* 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>
|
|
|
|
{/* 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>
|
|
)}
|
|
|
|
{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 lg:min-w-[480px] 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
|
|
className="sm:max-w-md"
|
|
showCloseButton={true}
|
|
>
|
|
<DialogHeader>
|
|
<DialogTitle>New ticket</DialogTitle>
|
|
<DialogDescription>
|
|
Create a new ticket to track an issue or request.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<div className="flex flex-col gap-3">
|
|
<div>
|
|
<label className="block text-xs font-medium text-foreground mb-1">
|
|
Subject
|
|
</label>
|
|
<input
|
|
value={newSubject}
|
|
onChange={(e) => setNewSubject(e.target.value)}
|
|
placeholder="Ticket subject"
|
|
className="w-full h-8 px-2.5 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"
|
|
autoFocus
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-medium text-foreground mb-1">
|
|
Queue
|
|
</label>
|
|
<div className="relative">
|
|
<select
|
|
value={newQueueId}
|
|
onChange={(e) => setNewQueueId(e.target.value)}
|
|
className="w-full h-8 px-2.5 rounded-lg bg-background border border-border text-sm text-foreground outline-none focus:border-primary focus:ring-1 focus:ring-primary appearance-none transition-all duration-150"
|
|
>
|
|
<option value="" disabled>
|
|
Select a queue...
|
|
</option>
|
|
{queues.map((q) => (
|
|
<option key={q.id} value={q.id}>
|
|
{q.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
<svg
|
|
className="absolute right-2.5 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground pointer-events-none"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M19 9l-7 7-7-7"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-medium text-foreground mb-1">
|
|
Description{" "}
|
|
<span className="text-muted-foreground font-normal">
|
|
(optional)
|
|
</span>
|
|
</label>
|
|
<textarea
|
|
value={newDescription}
|
|
onChange={(e) => setNewDescription(e.target.value)}
|
|
placeholder="Add a description..."
|
|
rows={3}
|
|
className="w-full px-2.5 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>
|
|
</div>
|
|
|
|
{createError && (
|
|
<p className="text-xs text-destructive">{createError}</p>
|
|
)}
|
|
|
|
<DialogFooter showCloseButton={false}>
|
|
<button
|
|
onClick={handleCreate}
|
|
disabled={!newSubject.trim() || !newQueueId || submitting}
|
|
className={cn(
|
|
"h-8 px-4 rounded-lg text-sm font-medium transition-all duration-150",
|
|
"bg-primary hover:bg-primary/80 text-primary-foreground",
|
|
"disabled:opacity-40 disabled:cursor-not-allowed"
|
|
)}
|
|
>
|
|
{submitting ? "Creating..." : "Create ticket"}
|
|
</button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
import { Suspense } from "react";
|
|
|
|
export default function TicketListPage() {
|
|
return (
|
|
<Suspense fallback={<div className="flex items-center justify-center h-64 text-muted-foreground">Loading tickets...</div>}>
|
|
<TicketListPageContent />
|
|
</Suspense>
|
|
);
|
|
}
|