"use client" import { useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { Ticket, Plus, ChevronDown, ChevronUp, MessageSquare, Clock } from "lucide-react" import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Input } from "@/components/ui/input" import { Separator } from "@/components/ui/separator" import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs" import { cn } from "@/lib/utils" import { DotPattern } from "@/components/backgrounds/dot-pattern" import { stagger, staggerItem } from "@/lib/animations" const initialTickets = [ { id: "TKT-1024", subject: "Login issue on mobile app", status: "Open", priority: "High", date: "Jun 10, 2026", category: "Technical", replies: 3 }, { id: "TKT-1023", subject: "Billing discrepancy on invoice", status: "In Progress", priority: "Medium", date: "Jun 8, 2026", category: "Billing", replies: 5 }, { id: "TKT-1022", subject: "Feature request: dark mode toggle", status: "Open", priority: "Low", date: "Jun 6, 2026", category: "Feature", replies: 1 }, { id: "TKT-1021", subject: "Account deletion request", status: "Closed", priority: "Medium", date: "Jun 1, 2026", category: "Account", replies: 4 }, { id: "TKT-1020", subject: "Shipping delay on order ORD-8760", status: "Closed", priority: "High", date: "May 28, 2026", category: "Orders", replies: 6 }, { id: "TKT-1019", subject: "Refund not processed", status: "Closed", priority: "High", date: "May 25, 2026", category: "Billing", replies: 8 }, ] const priorityStyles: Record = { High: "bg-red-500/10 text-red-600 border-red-200 dark:border-red-800", Medium: "bg-amber-500/10 text-amber-600 border-amber-200 dark:border-amber-800", Low: "bg-blue-500/10 text-blue-600 border-blue-200 dark:border-blue-800", } const statusStyles: Record = { Open: "bg-emerald-500/10 text-emerald-600 border-emerald-200 dark:border-emerald-800", "In Progress": "bg-blue-500/10 text-blue-600 border-blue-200 dark:border-blue-800", Closed: "bg-muted text-muted-foreground border-border", } export default function SupportTickets() { const [tickets, setTickets] = useState(initialTickets) const [expandedId, setExpandedId] = useState(null) const [showCreate, setShowCreate] = useState(false) return (

Support Tickets

Manage your support requests.

{showCreate && ( Create Support Ticket Describe your issue and we will get back to you.

Subject

Category

Description

</div>
                  <div className="flex gap-2">
                    <Button size="sm">Submit Ticket</Button>
                    <Button size="sm" variant="outline" onClick={() => setShowCreate(false)}>Cancel</Button>
                  </div>
                </CardContent>
              </Card>
            </motion.div>
          )}
        </AnimatePresence>

<motion.div variants={staggerItem}>
          <Tabs defaultValue="open">
            <TabsList>
              <TabsTrigger value="open">
                Open ({tickets.filter((t) => t.status !== "Closed").length})
              </TabsTrigger>
              <TabsTrigger value="closed">
                Closed ({tickets.filter((t) => t.status === "Closed").length})
              </TabsTrigger>
              <TabsTrigger value="all">All</TabsTrigger>
            </TabsList>

{["open", "closed", "all"].map((tab) => (
              <TabsContent key={tab} value={tab} className="mt-4 space-y-3">
                <motion.div variants={stagger} initial="hidden" animate="visible">
                  {tickets
                    .filter((t) => {
                      if (tab === "open") return t.status !== "Closed"
                      if (tab === "closed") return t.status === "Closed"
                      return true
                    })
                    .map((ticket) => {
                      const isExpanded = expandedId === ticket.id
                      return (
                        <motion.div key={ticket.id} variants={staggerItem}>
                          <Card size="sm">
                            <button
                              type="button"
                              onClick={() => setExpandedId(isExpanded ? null : ticket.id)}
                              className="flex w-full items-center justify-between px-(--card-spacing) pt-(--card-spacing) text-left"
                            >
                              <div className="flex flex-1 items-center gap-3">
                                <div className="flex size-9 items-center justify-center rounded-full bg-muted">
                                  <Ticket className="size-4" />
                                </div>
                                <div className="flex-1 min-w-0">
                                  <div className="flex items-center gap-2">
                                    <p className="text-sm font-medium">{ticket.subject}</p>
                                    <Badge variant="outline" className={cn("text-[10px]", statusStyles[ticket.status])}>
                                      {ticket.status}
                                    </Badge>
                                  </div>
                                  <p className="text-xs text-muted-foreground">{ticket.id} · {ticket.date}</p>
                                </div>
                              </div>
                              <div className="flex items-center gap-2">
                                <Badge variant="outline" className={cn("text-[10px]", priorityStyles[ticket.priority])}>
                                  {ticket.priority}
                                </Badge>
                                <Badge variant="secondary" className="text-[10px] gap-1">
                                  <MessageSquare className="size-3" />
                                  {ticket.replies}
                                </Badge>
                                {isExpanded ? <ChevronUp className="size-4 shrink-0" /> : <ChevronDown className="size-4 shrink-0" />}
                              </div>
                            </button>
                            <AnimatePresence initial={false}>
                              {isExpanded && (
                                <motion.div
                                  initial={{ height: 0, opacity: 0 }}
                                  animate={{ height: "auto", opacity: 1 }}
                                  exit={{ height: 0, opacity: 0 }}
                                  transition={{ duration: 0.3, ease: "easeInOut" }}
                                  className="overflow-hidden"
                                >
                                  <CardContent className="space-y-3 pt-3">
                                    <Separator />
                                    <div className="flex items-center gap-2 text-sm text-muted-foreground">
                                      <Clock className="size-3.5" />
                                      <span>Last updated: {ticket.date}</span>
                                    </div>
                                    <p className="text-sm text-muted-foreground">
                                      Our team is looking into your issue. We will update you within 24 hours.
                                    </p>
                                    <div className="flex gap-2">
                                      <Button size="sm" variant="outline">View Conversation</Button>
                                      {ticket.status !== "Closed" && (
                                        <Button size="sm" variant="destructive">Close Ticket</Button>
                                      )}
                                    </div>
                                  </CardContent>
                                </motion.div>
                              )}
                            </AnimatePresence>
                          </Card>
                        </motion.div>
                      )
                    })}
                </motion.div>
              </TabsContent>
            ))}
          </Tabs>
        </motion.div>
      </motion.div>
    </div>
  )
}
</article></body></html>