How to Build a Support Ticket System with Lovable

1Create a helpdesk support ticket system with Supabase. Set up these tables:
2
3- tickets: id, org_id, subject, status (open|pending|resolved|closed), priority (urgent|high|normal|low), category_id, customer_email, customer_name, assigned_to (references auth.users), created_at, updated_at, resolved_at
4- ticket_messages: id, ticket_id, author_id, author_type (agent|customer), body, is_internal (bool), created_at
5- categories: id, org_id, name, color
6- canned_responses: id, org_id, title, body, category_id
7
8Enable RLS. Agents can read tickets where assigned_to = auth.uid() OR assigned_to IS NULL OR org_id matches their profile. Admins (role = 'admin' in profiles) can read all tickets in their org. All agents can INSERT ticket_messages on tickets they can read.

1Build a ticket queue page at src/pages/Tickets.tsx.
2
3Requirements:
4- Use shadcn/ui Tabs with values: all, open, pending, resolved, closed
5- Each tab filters the Supabase query by status
6- DataTable columns: subject (clickable), customer_name, priority Badge (urgent=red, high=orange, normal=blue, low=gray), status Badge (open=green, pending=yellow, resolved=gray, closed=slate), assigned_to agent name (or 'Unassigned' with a Claim button), category name, time elapsed since created_at
7- Sort by created_at descending by default
8- Add a search input above the table that filters by subject or customer_name
9- Clicking a row opens a Sheet component with the full ticket detail (build the Sheet as a separate TicketSheet component)
10- Show total ticket count per tab as a Badge next to each tab label

1import { useEffect, useRef, useState } from 'react'
2import { supabase } from '@/integrations/supabase/client'
3import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet'
4import { Badge } from '@/components/ui/badge'
5import { Button } from '@/components/ui/button'
6import { Textarea } from '@/components/ui/textarea'
7import { ScrollArea } from '@/components/ui/scroll-area'
8import { Separator } from '@/components/ui/separator'
9import { Switch } from '@/components/ui/switch'
10
11type Message = {
12  id: string
13  author_type: 'agent' | 'customer'
14  body: string
15  is_internal: boolean
16  created_at: string
17  author_id: string
18}
19
20type Ticket = {
21  id: string
22  subject: string
23  priority: string
24  status: string
25  customer_name: string
26  customer_email: string
27}
28
29interface TicketSheetProps {
30  ticket: Ticket | null
31  onClose: () => void
32}
33
34export function TicketSheet({ ticket, onClose }: TicketSheetProps) {
35  const [messages, setMessages] = useState<Message[]>([])
36  const [reply, setReply] = useState('')
37  const [isInternal, setIsInternal] = useState(false)
38  const bottomRef = useRef<HTMLDivElement>(null)
39
40  useEffect(() => {
41    if (!ticket) return
42    supabase
43      .from('ticket_messages')
44      .select('*')
45      .eq('ticket_id', ticket.id)
46      .order('created_at', { ascending: true })
47      .then(({ data }) => setMessages(data ?? []))
48
49    const channel = supabase
50      .channel(`ticket-${ticket.id}`)
51      .on('postgres_changes', {
52        event: 'INSERT',
53        schema: 'public',
54        table: 'ticket_messages',
55        filter: `ticket_id=eq.${ticket.id}`,
56      }, (payload) => {
57        setMessages((prev) => [...prev, payload.new as Message])
58      })
59      .subscribe()
60
61    return () => { supabase.removeChannel(channel) }
62  }, [ticket])
63
64  useEffect(() => {
65    bottomRef.current?.scrollIntoView({ behavior: 'smooth' })
66  }, [messages])
67
68  async function sendReply() {
69    if (!reply.trim() || !ticket) return
70    await supabase.from('ticket_messages').insert({
71      ticket_id: ticket.id,
72      body: reply,
73      is_internal: isInternal,
74      author_type: 'agent',
75    })
76    setReply('')
77  }
78
79  return (
80    <Sheet open={!!ticket} onOpenChange={onClose}>
81      <SheetContent className="w-[520px] flex flex-col">
82        <SheetHeader>
83          <SheetTitle className="text-base">{ticket?.subject}</SheetTitle>
84          <div className="flex gap-2">
85            <Badge variant="outline">{ticket?.priority}</Badge>
86            <Badge>{ticket?.status}</Badge>
87          </div>
88        </SheetHeader>
89        <Separator />
90        <ScrollArea className="flex-1 pr-2">
91          <div className="space-y-3 py-2">
92            {messages.map((m) => (
93              <div key={m.id} className={`rounded-lg p-3 text-sm ${
94                m.is_internal ? 'bg-yellow-50 border border-yellow-200' :
95                m.author_type === 'agent' ? 'bg-muted' : 'bg-primary/5'
96              }`}>
97                <p>{m.body}</p>
98              </div>
99            ))}
100            <div ref={bottomRef} />
101          </div>
102        </ScrollArea>
103        <Separator />
104        <div className="space-y-2 pt-2">
105          <Textarea value={reply} onChange={(e) => setReply(e.target.value)} placeholder="Write a reply..." className="min-h-[80px]" />
106          <div className="flex items-center justify-between">
107            <div className="flex items-center gap-2 text-sm">
108              <Switch checked={isInternal} onCheckedChange={setIsInternal} id="internal" />
109              <label htmlFor="internal">Internal note</label>
110            </div>
111            <Button onClick={sendReply} disabled={!reply.trim()}>Send Reply</Button>
112          </div>
113        </div>
114      </SheetContent>
115    </Sheet>
116  )
117}

1Add claim and reassign functionality to the ticket queue and TicketSheet.
2
3Requirements:
4- In the DataTable, rows where assigned_to IS NULL show a 'Claim' Button. Clicking it sets assigned_to = auth.uid() and status = 'open' via supabase.from('tickets').update().
5- In the TicketSheet header, add a DropdownMenu with the label showing the assigned agent's name or 'Unassigned'.
6- The DropdownMenu lists all agents in the org (query profiles where role = 'agent' or 'admin').
7- Selecting an agent updates assigned_to on the ticket.
8- After any assignment change, insert an internal ticket_messages row with body = 'Ticket assigned to [agent name]' and is_internal = true.
9- Show a Sonner toast: 'Ticket assigned to [name]' after each successful reassignment.

1Add a canned responses feature to the TicketSheet reply area.
2
3Requirements:
4- Add a 'Canned Responses' button next to the Send button (use a MessageSquare icon)
5- Clicking it opens a shadcn/ui Command dialog
6- The Command input searches canned_responses by title in real time using Supabase .ilike('title', '%query%')
7- Results are grouped by category name using CommandGroup
8- Each item shows the response title and a preview of the first 60 characters of the body
9- Selecting an item closes the Command and sets the reply Textarea value to the canned response body
10- If the Textarea already has text, append the canned response after a newline