From 1e390ed0903cd8c1fea69bffa93e8dbdc72f0fcc Mon Sep 17 00:00:00 2001
From: Akshay <akshay.allen26200@gmail.com>
Date: Fri, 7 Nov 2025 10:35:09 +0530
Subject: [PATCH 1/2] feat(admin): Add comprehensive support ticket management
 system

- Implement new support ticket detail page with dynamic routing
- Add support ticket API routes for fetching and updating tickets
- Enhance admin sidebar with new Support Tickets navigation item
- Create detailed ticket view with status tracking and user information
- Implement loading skeletons and error handling for ticket management
- Add internal notes section for admin communication
- Support different ticket types (bug report and contact request)
- Integrate toast notifications for ticket status updates
---
 app/admin/layout.tsx                        |   6 +
 app/admin/support/[id]/page.tsx             | 314 +++++++++++++++++
 app/admin/support/page.tsx                  | 371 ++++++++++++++++++++
 app/api/admin/support/tickets/[id]/route.ts | 109 ++++++
 app/api/admin/support/tickets/route.ts      |  54 +++
 5 files changed, 854 insertions(+)
 create mode 100644 app/admin/support/[id]/page.tsx
 create mode 100644 app/admin/support/page.tsx
 create mode 100644 app/api/admin/support/tickets/[id]/route.ts
 create mode 100644 app/api/admin/support/tickets/route.ts

diff --git a/app/admin/layout.tsx b/app/admin/layout.tsx
index f0069334..b142e5a6 100644
--- a/app/admin/layout.tsx
+++ b/app/admin/layout.tsx
@@ -23,6 +23,7 @@ import {
   ClipboardCheck,
   Award,
   Crown,
+  LifeBuoy,
 } from "lucide-react"
 import { useAuth } from "@/lib/hooks/useAuth"
 
@@ -165,6 +166,11 @@ const sidebarItems: SidebarGroupType[] = [
   {
     title: "Support",
     items: [
+      {
+        title: "Support Tickets",
+        url: "/admin/support",
+        icon: LifeBuoy,
+      },
       {
         title: "Messages",
         url: "/admin/messages",
diff --git a/app/admin/support/[id]/page.tsx b/app/admin/support/[id]/page.tsx
new file mode 100644
index 00000000..103d1b4e
--- /dev/null
+++ b/app/admin/support/[id]/page.tsx
@@ -0,0 +1,314 @@
+'use client'
+
+import React, { useState, useEffect } from 'react'
+import { useParams, useRouter } from 'next/navigation'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import { Skeleton } from '@/components/ui/skeleton'
+import { Textarea } from '@/components/ui/textarea'
+import { 
+  ArrowLeft, 
+  Mail, 
+  Bug, 
+  Clock, 
+  User,
+  Calendar,
+  MessageSquare,
+  Save
+} from 'lucide-react'
+import { toast } from 'sonner'
+import Link from 'next/link'
+
+interface SupportTicket {
+  id: string
+  user_id: string
+  type: 'contact' | 'bug'
+  subject: string
+  message: string
+  status: 'open' | 'in_progress' | 'resolved' | 'closed'
+  created_at: string
+  updated_at: string
+  user?: {
+    id: string
+    email: string
+    first_name?: string
+    last_name?: string
+    avatar_url?: string
+  }
+}
+
+export default function TicketDetailPage() {
+  const params = useParams()
+  const router = useRouter()
+  const ticketId = params.id as string
+
+  const [ticket, setTicket] = useState<SupportTicket | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [updating, setUpdating] = useState(false)
+  const [notes, setNotes] = useState('')
+
+  useEffect(() => {
+    fetchTicket()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ticketId])
+
+  const fetchTicket = async () => {
+    try {
+      const response = await fetch(`/api/admin/support/tickets/${ticketId}`)
+      if (response.ok) {
+        const data = await response.json()
+        setTicket(data.ticket)
+      } else {
+        toast.error('Failed to load ticket')
+        router.push('/admin/support')
+      }
+    } catch (error) {
+      console.error('Error fetching ticket:', error)
+      toast.error('Failed to load ticket')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const updateStatus = async (newStatus: string) => {
+    setUpdating(true)
+    try {
+      const response = await fetch(`/api/admin/support/tickets/${ticketId}`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ status: newStatus }),
+      })
+
+      if (response.ok) {
+        toast.success('Status updated successfully')
+        fetchTicket()
+      } else {
+        toast.error('Failed to update status')
+      }
+    } catch (error) {
+      console.error('Error updating status:', error)
+      toast.error('Failed to update status')
+    } finally {
+      setUpdating(false)
+    }
+  }
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case 'open': return 'bg-red-500/10 text-red-400 border-red-500/20'
+      case 'in_progress': return 'bg-yellow-500/10 text-yellow-400 border-yellow-500/20'
+      case 'resolved': return 'bg-green-500/10 text-green-400 border-green-500/20'
+      case 'closed': return 'bg-zinc-500/10 text-zinc-400 border-zinc-500/20'
+      default: return 'bg-zinc-500/10 text-zinc-400 border-zinc-500/20'
+    }
+  }
+
+  if (loading) {
+    return (
+      <div className="p-6 space-y-6">
+        <Skeleton className="h-10 w-64" />
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+          <div className="lg:col-span-2 space-y-6">
+            <Skeleton className="h-96" />
+          </div>
+          <div className="space-y-6">
+            <Skeleton className="h-64" />
+            <Skeleton className="h-48" />
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  if (!ticket) {
+    return (
+      <div className="p-6">
+        <Card>
+          <CardContent className="py-12 text-center">
+            <p className="text-muted-foreground">Ticket not found</p>
+            <Button asChild className="mt-4">
+              <Link href="/admin/support">Back to Tickets</Link>
+            </Button>
+          </CardContent>
+        </Card>
+      </div>
+    )
+  }
+
+  return (
+    <div className="p-6 space-y-6">
+      {/* Header */}
+      <div className="flex items-center gap-4">
+        <Button variant="outline" size="icon" asChild>
+          <Link href="/admin/support">
+            <ArrowLeft className="h-4 w-4" />
+          </Link>
+        </Button>
+        <div className="flex-1">
+          <h1 className="text-2xl font-bold">Ticket Details</h1>
+          <p className="text-sm text-muted-foreground">ID: {ticket.id}</p>
+        </div>
+        <Badge className={getStatusColor(ticket.status)}>
+          {ticket.status.replace('_', ' ')}
+        </Badge>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        {/* Main Content */}
+        <div className="lg:col-span-2 space-y-6">
+          {/* Ticket Info */}
+          <Card>
+            <CardHeader>
+              <div className="flex items-center gap-2">
+                {ticket.type === 'bug' ? (
+                  <Bug className="h-5 w-5 text-red-500" />
+                ) : (
+                  <Mail className="h-5 w-5 text-blue-500" />
+                )}
+                <CardTitle>{ticket.subject}</CardTitle>
+              </div>
+              <CardDescription>
+                {ticket.type === 'bug' ? 'Bug Report' : 'Support Request'}
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="prose prose-sm max-w-none">
+                <p className="whitespace-pre-wrap">{ticket.message}</p>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Internal Notes */}
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <MessageSquare className="h-5 w-5" />
+                Internal Notes
+              </CardTitle>
+              <CardDescription>
+                Add notes visible only to admins
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <Textarea
+                placeholder="Add internal notes about this ticket..."
+                value={notes}
+                onChange={(e) => setNotes(e.target.value)}
+                rows={4}
+                className="resize-none"
+              />
+              <Button 
+                onClick={() => {
+                  toast.info('Internal notes feature coming soon')
+                  setNotes('')
+                }}
+                disabled={!notes.trim()}
+              >
+                <Save className="h-4 w-4 mr-2" />
+                Save Note
+              </Button>
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* Sidebar */}
+        <div className="space-y-6">
+          {/* User Info */}
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-base">User Information</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-3">
+              <div className="flex items-center gap-3">
+                <div className="h-10 w-10 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-white font-semibold">
+                  {ticket.user?.first_name?.[0] || ticket.user?.email[0].toUpperCase()}
+                </div>
+                <div className="flex-1 min-w-0">
+                  <p className="font-medium truncate">
+                    {ticket.user?.first_name && ticket.user?.last_name
+                      ? `${ticket.user.first_name} ${ticket.user.last_name}`
+                      : 'Unknown User'}
+                  </p>
+                  <p className="text-sm text-muted-foreground truncate">
+                    {ticket.user?.email || 'No email'}
+                  </p>
+                </div>
+              </div>
+              <Button variant="outline" className="w-full" asChild>
+                <Link href={`/admin/users?search=${ticket.user?.email}`}>
+                  <User className="h-4 w-4 mr-2" />
+                  View User Profile
+                </Link>
+              </Button>
+            </CardContent>
+          </Card>
+
+          {/* Ticket Metadata */}
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-base">Ticket Details</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-3 text-sm">
+              <div className="flex items-center gap-2 text-muted-foreground">
+                <Calendar className="h-4 w-4" />
+                <div>
+                  <p className="font-medium text-foreground">Created</p>
+                  <p>{new Date(ticket.created_at).toLocaleString()}</p>
+                </div>
+              </div>
+              <div className="flex items-center gap-2 text-muted-foreground">
+                <Clock className="h-4 w-4" />
+                <div>
+                  <p className="font-medium text-foreground">Last Updated</p>
+                  <p>{new Date(ticket.updated_at).toLocaleString()}</p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Status Actions */}
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-base">Update Status</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-2">
+              <Button
+                variant={ticket.status === 'open' ? 'default' : 'outline'}
+                className="w-full justify-start"
+                onClick={() => updateStatus('open')}
+                disabled={updating || ticket.status === 'open'}
+              >
+                Open
+              </Button>
+              <Button
+                variant={ticket.status === 'in_progress' ? 'default' : 'outline'}
+                className="w-full justify-start"
+                onClick={() => updateStatus('in_progress')}
+                disabled={updating || ticket.status === 'in_progress'}
+              >
+                In Progress
+              </Button>
+              <Button
+                variant={ticket.status === 'resolved' ? 'default' : 'outline'}
+                className="w-full justify-start"
+                onClick={() => updateStatus('resolved')}
+                disabled={updating || ticket.status === 'resolved'}
+              >
+                Resolved
+              </Button>
+              <Button
+                variant={ticket.status === 'closed' ? 'default' : 'outline'}
+                className="w-full justify-start"
+                onClick={() => updateStatus('closed')}
+                disabled={updating || ticket.status === 'closed'}
+              >
+                Closed
+              </Button>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/app/admin/support/page.tsx b/app/admin/support/page.tsx
new file mode 100644
index 00000000..4c77d105
--- /dev/null
+++ b/app/admin/support/page.tsx
@@ -0,0 +1,371 @@
+'use client'
+
+import React, { useState, useEffect } from 'react'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Badge } from '@/components/ui/badge'
+import { Skeleton } from '@/components/ui/skeleton'
+import { 
+  Search, 
+  Mail, 
+  Bug, 
+  Clock, 
+  CheckCircle, 
+  AlertCircle,
+  Users,
+  MessageSquare,
+  ChevronRight
+} from 'lucide-react'
+import { toast } from 'sonner'
+import Link from 'next/link'
+
+interface SupportTicket {
+  id: string
+  user_id: string
+  type: 'contact' | 'bug'
+  subject: string
+  message: string
+  status: 'open' | 'in_progress' | 'resolved' | 'closed'
+  created_at: string
+  updated_at: string
+  user?: {
+    email: string
+    first_name?: string
+    last_name?: string
+  }
+}
+
+interface Stats {
+  total: number
+  open: number
+  in_progress: number
+  resolved: number
+  closed: number
+  contact: number
+  bug: number
+}
+
+export default function AdminSupportPage() {
+  const [tickets, setTickets] = useState<SupportTicket[]>([])
+  const [filteredTickets, setFilteredTickets] = useState<SupportTicket[]>([])
+  const [stats, setStats] = useState<Stats>({
+    total: 0,
+    open: 0,
+    in_progress: 0,
+    resolved: 0,
+    closed: 0,
+    contact: 0,
+    bug: 0
+  })
+  const [loading, setLoading] = useState(true)
+  const [searchQuery, setSearchQuery] = useState('')
+  const [filterType, setFilterType] = useState<'all' | 'contact' | 'bug'>('all')
+  const [filterStatus, setFilterStatus] = useState<'all' | 'open' | 'in_progress' | 'resolved' | 'closed'>('all')
+
+  useEffect(() => {
+    fetchTickets()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  useEffect(() => {
+    filterTickets()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [tickets, searchQuery, filterType, filterStatus])
+
+  const fetchTickets = async () => {
+    try {
+      const response = await fetch('/api/admin/support/tickets')
+      if (response.ok) {
+        const data = await response.json()
+        setTickets(data.tickets)
+        calculateStats(data.tickets)
+      } else {
+        toast.error('Failed to load tickets')
+      }
+    } catch (error) {
+      console.error('Error fetching tickets:', error)
+      toast.error('Failed to load tickets')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const calculateStats = (ticketList: SupportTicket[]) => {
+    const newStats = {
+      total: ticketList.length,
+      open: ticketList.filter(t => t.status === 'open').length,
+      in_progress: ticketList.filter(t => t.status === 'in_progress').length,
+      resolved: ticketList.filter(t => t.status === 'resolved').length,
+      closed: ticketList.filter(t => t.status === 'closed').length,
+      contact: ticketList.filter(t => t.type === 'contact').length,
+      bug: ticketList.filter(t => t.type === 'bug').length,
+    }
+    setStats(newStats)
+  }
+
+  const filterTickets = () => {
+    let filtered = tickets
+
+    // Filter by type
+    if (filterType !== 'all') {
+      filtered = filtered.filter(t => t.type === filterType)
+    }
+
+    // Filter by status
+    if (filterStatus !== 'all') {
+      filtered = filtered.filter(t => t.status === filterStatus)
+    }
+
+    // Search
+    if (searchQuery.trim()) {
+      const query = searchQuery.toLowerCase()
+      filtered = filtered.filter(t => 
+        t.subject.toLowerCase().includes(query) ||
+        t.message.toLowerCase().includes(query) ||
+        t.user?.email.toLowerCase().includes(query)
+      )
+    }
+
+    setFilteredTickets(filtered)
+  }
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case 'open': return 'bg-red-500/10 text-red-400 border-red-500/20'
+      case 'in_progress': return 'bg-yellow-500/10 text-yellow-400 border-yellow-500/20'
+      case 'resolved': return 'bg-green-500/10 text-green-400 border-green-500/20'
+      case 'closed': return 'bg-zinc-500/10 text-zinc-400 border-zinc-500/20'
+      default: return 'bg-zinc-500/10 text-zinc-400 border-zinc-500/20'
+    }
+  }
+
+  const getTypeIcon = (type: string) => {
+    return type === 'bug' ? <Bug className="h-4 w-4" /> : <Mail className="h-4 w-4" />
+  }
+
+  if (loading) {
+    return (
+      <div className="p-6 space-y-6">
+        <Skeleton className="h-10 w-64" />
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+          {[1, 2, 3, 4].map(i => <Skeleton key={i} className="h-32" />)}
+        </div>
+        <Skeleton className="h-96" />
+      </div>
+    )
+  }
+
+  return (
+    <div className="p-6 space-y-6">
+      {/* Header */}
+      <div>
+        <h1 className="text-3xl font-bold mb-2">Support Tickets</h1>
+        <p className="text-muted-foreground">Manage support requests and bug reports</p>
+      </div>
+
+      {/* Stats Cards */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+        <Card>
+          <CardHeader className="pb-3">
+            <div className="flex items-center justify-between">
+              <CardTitle className="text-sm font-medium">Total Tickets</CardTitle>
+              <MessageSquare className="h-4 w-4 text-muted-foreground" />
+            </div>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{stats.total}</div>
+            <p className="text-xs text-muted-foreground mt-1">
+              {stats.contact} contact, {stats.bug} bugs
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="pb-3">
+            <div className="flex items-center justify-between">
+              <CardTitle className="text-sm font-medium">Open Tickets</CardTitle>
+              <AlertCircle className="h-4 w-4 text-red-500" />
+            </div>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold text-red-500">{stats.open}</div>
+            <p className="text-xs text-muted-foreground mt-1">
+              Requires attention
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="pb-3">
+            <div className="flex items-center justify-between">
+              <CardTitle className="text-sm font-medium">In Progress</CardTitle>
+              <Clock className="h-4 w-4 text-yellow-500" />
+            </div>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold text-yellow-500">{stats.in_progress}</div>
+            <p className="text-xs text-muted-foreground mt-1">
+              Being worked on
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="pb-3">
+            <div className="flex items-center justify-between">
+              <CardTitle className="text-sm font-medium">Resolved</CardTitle>
+              <CheckCircle className="h-4 w-4 text-green-500" />
+            </div>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold text-green-500">{stats.resolved}</div>
+            <p className="text-xs text-muted-foreground mt-1">
+              {stats.closed} closed
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Filters */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Filters</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="flex flex-col md:flex-row gap-4">
+            {/* Search */}
+            <div className="flex-1 relative">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+              <Input
+                placeholder="Search tickets..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="pl-9"
+              />
+            </div>
+
+            {/* Type Filter */}
+            <div className="flex gap-2">
+              <Button
+                variant={filterType === 'all' ? 'default' : 'outline'}
+                size="sm"
+                onClick={() => setFilterType('all')}
+              >
+                All
+              </Button>
+              <Button
+                variant={filterType === 'contact' ? 'default' : 'outline'}
+                size="sm"
+                onClick={() => setFilterType('contact')}
+              >
+                <Mail className="h-4 w-4 mr-1" />
+                Contact
+              </Button>
+              <Button
+                variant={filterType === 'bug' ? 'default' : 'outline'}
+                size="sm"
+                onClick={() => setFilterType('bug')}
+              >
+                <Bug className="h-4 w-4 mr-1" />
+                Bugs
+              </Button>
+            </div>
+
+            {/* Status Filter */}
+            <div className="flex gap-2">
+              <Button
+                variant={filterStatus === 'all' ? 'default' : 'outline'}
+                size="sm"
+                onClick={() => setFilterStatus('all')}
+              >
+                All Status
+              </Button>
+              <Button
+                variant={filterStatus === 'open' ? 'default' : 'outline'}
+                size="sm"
+                onClick={() => setFilterStatus('open')}
+              >
+                Open
+              </Button>
+              <Button
+                variant={filterStatus === 'in_progress' ? 'default' : 'outline'}
+                size="sm"
+                onClick={() => setFilterStatus('in_progress')}
+              >
+                In Progress
+              </Button>
+              <Button
+                variant={filterStatus === 'resolved' ? 'default' : 'outline'}
+                size="sm"
+                onClick={() => setFilterStatus('resolved')}
+              >
+                Resolved
+              </Button>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Tickets List */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Tickets ({filteredTickets.length})</CardTitle>
+          <CardDescription>
+            {filterStatus !== 'all' && `Showing ${filterStatus} tickets`}
+            {filterType !== 'all' && ` of type ${filterType}`}
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          {filteredTickets.length === 0 ? (
+            <div className="text-center py-12">
+              <MessageSquare className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
+              <p className="text-muted-foreground">No tickets found</p>
+            </div>
+          ) : (
+            <div className="space-y-3">
+              {filteredTickets.map((ticket) => (
+                <Link
+                  key={ticket.id}
+                  href={`/admin/support/${ticket.id}`}
+                  className="block"
+                >
+                  <div className="p-4 rounded-lg border hover:border-primary transition-colors cursor-pointer">
+                    <div className="flex items-start justify-between gap-4">
+                      <div className="flex-1 min-w-0">
+                        <div className="flex items-center gap-2 mb-2">
+                          <Badge variant="outline" className="gap-1">
+                            {getTypeIcon(ticket.type)}
+                            {ticket.type}
+                          </Badge>
+                          <Badge className={getStatusColor(ticket.status)}>
+                            {ticket.status.replace('_', ' ')}
+                          </Badge>
+                        </div>
+                        <h3 className="font-semibold mb-1 truncate">{ticket.subject}</h3>
+                        <p className="text-sm text-muted-foreground line-clamp-2 mb-2">
+                          {ticket.message}
+                        </p>
+                        <div className="flex items-center gap-4 text-xs text-muted-foreground">
+                          <span className="flex items-center gap-1">
+                            <Users className="h-3 w-3" />
+                            {ticket.user?.email || 'Unknown user'}
+                          </span>
+                          <span className="flex items-center gap-1">
+                            <Clock className="h-3 w-3" />
+                            {new Date(ticket.created_at).toLocaleDateString()}
+                          </span>
+                        </div>
+                      </div>
+                      <ChevronRight className="h-5 w-5 text-muted-foreground flex-shrink-0" />
+                    </div>
+                  </div>
+                </Link>
+              ))}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
diff --git a/app/api/admin/support/tickets/[id]/route.ts b/app/api/admin/support/tickets/[id]/route.ts
new file mode 100644
index 00000000..75c253d0
--- /dev/null
+++ b/app/api/admin/support/tickets/[id]/route.ts
@@ -0,0 +1,109 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { createClient } from '@/lib/supabase/server'
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  const { id } = await params
+  try {
+    const supabase = await createClient()
+    
+    // Check if user is admin
+    const { data: { user }, error: authError } = await supabase.auth.getUser()
+    
+    if (authError || !user) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+    }
+
+    const { data: profile } = await supabase
+      .from('profiles')
+      .select('is_admin')
+      .eq('id', user.id)
+      .single()
+
+    if (!profile?.is_admin) {
+      return NextResponse.json({ error: 'Forbidden' }, { status: 403 })
+    }
+
+    // Fetch ticket
+    const { data: ticket, error } = await supabase
+      .from('support_tickets')
+      .select('*')
+      .eq('id', id)
+      .single()
+
+    if (error) {
+      console.error('Error fetching ticket:', error)
+      return NextResponse.json({ error: 'Ticket not found' }, { status: 404 })
+    }
+
+    // Fetch user information
+    const { data: userProfile } = await supabase
+      .from('profiles')
+      .select('id, email, first_name, last_name, avatar_url')
+      .eq('id', ticket.user_id)
+      .single()
+
+    const ticketWithUser = {
+      ...ticket,
+      user: userProfile || null
+    }
+
+    return NextResponse.json({ ticket: ticketWithUser })
+  } catch (error) {
+    console.error('Error in ticket detail API:', error)
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 })
+  }
+}
+
+export async function PATCH(
+  request: NextRequest,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  const { id } = await params
+  try {
+    const supabase = await createClient()
+    
+    // Check if user is admin
+    const { data: { user }, error: authError } = await supabase.auth.getUser()
+    
+    if (authError || !user) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+    }
+
+    const { data: profile } = await supabase
+      .from('profiles')
+      .select('is_admin')
+      .eq('id', user.id)
+      .single()
+
+    if (!profile?.is_admin) {
+      return NextResponse.json({ error: 'Forbidden' }, { status: 403 })
+    }
+
+    const { status } = await request.json()
+
+    if (!['open', 'in_progress', 'resolved', 'closed'].includes(status)) {
+      return NextResponse.json({ error: 'Invalid status' }, { status: 400 })
+    }
+
+    // Update ticket status
+    const { data: ticket, error } = await supabase
+      .from('support_tickets')
+      .update({ status })
+      .eq('id', id)
+      .select()
+      .single()
+
+    if (error) {
+      console.error('Error updating ticket:', error)
+      return NextResponse.json({ error: 'Failed to update ticket' }, { status: 500 })
+    }
+
+    return NextResponse.json({ ticket })
+  } catch (error) {
+    console.error('Error in ticket update API:', error)
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 })
+  }
+}
diff --git a/app/api/admin/support/tickets/route.ts b/app/api/admin/support/tickets/route.ts
new file mode 100644
index 00000000..f82c32e3
--- /dev/null
+++ b/app/api/admin/support/tickets/route.ts
@@ -0,0 +1,54 @@
+import { NextResponse } from 'next/server'
+import { createClient } from '@/lib/supabase/server'
+
+export async function GET() {
+  try {
+    const supabase = await createClient()
+    
+    // Check if user is admin
+    const { data: { user }, error: authError } = await supabase.auth.getUser()
+    
+    if (authError || !user) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+    }
+
+    const { data: profile } = await supabase
+      .from('profiles')
+      .select('is_admin')
+      .eq('id', user.id)
+      .single()
+
+    if (!profile?.is_admin) {
+      return NextResponse.json({ error: 'Forbidden' }, { status: 403 })
+    }
+
+    // Fetch all support tickets
+    const { data: tickets, error } = await supabase
+      .from('support_tickets')
+      .select('*')
+      .order('created_at', { ascending: false })
+
+    if (error) {
+      console.error('Error fetching tickets:', error)
+      return NextResponse.json({ error: 'Failed to fetch tickets' }, { status: 500 })
+    }
+
+    // Fetch user information for each ticket
+    const userIds = [...new Set(tickets.map(t => t.user_id))]
+    const { data: profiles } = await supabase
+      .from('profiles')
+      .select('id, email, first_name, last_name, avatar_url')
+      .in('id', userIds)
+
+    // Map user data to tickets
+    const ticketsWithUsers = tickets.map(ticket => ({
+      ...ticket,
+      user: profiles?.find(p => p.id === ticket.user_id) || null
+    }))
+
+    return NextResponse.json({ tickets: ticketsWithUsers })
+  } catch (error) {
+    console.error('Error in tickets API:', error)
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 })
+  }
+}

From 33e6c02bfa6a6d34a5d245f6599c1d43066f3bcf Mon Sep 17 00:00:00 2001
From: Akshay <akshay.allen26200@gmail.com>
Date: Fri, 7 Nov 2025 10:40:39 +0530
Subject: [PATCH 2/2] feat(admin): Enhance support tickets page with responsive
 design and improved UX

- Refactor page layout with responsive padding and spacing
- Update header and title styles for better readability on different screen sizes
- Simplify and improve filter section layout with more compact design
- Add responsive adjustments to buttons and text sizes
- Optimize ticket list display with more compact and mobile-friendly elements
- Improve visual hierarchy and spacing across the support tickets page
- Enhance filter buttons with flex-wrap and size-adaptive labels
---
 app/admin/support/page.tsx | 105 ++++++++++++++++++++-----------------
 1 file changed, 58 insertions(+), 47 deletions(-)

diff --git a/app/admin/support/page.tsx b/app/admin/support/page.tsx
index 4c77d105..48363f3c 100644
--- a/app/admin/support/page.tsx
+++ b/app/admin/support/page.tsx
@@ -157,11 +157,11 @@ export default function AdminSupportPage() {
   }
 
   return (
-    <div className="p-6 space-y-6">
+    <div className="p-4 md:p-6 space-y-4 md:space-y-6">
       {/* Header */}
       <div>
-        <h1 className="text-3xl font-bold mb-2">Support Tickets</h1>
-        <p className="text-muted-foreground">Manage support requests and bug reports</p>
+        <h1 className="text-2xl md:text-3xl font-bold mb-2">Support Tickets</h1>
+        <p className="text-sm md:text-base text-muted-foreground">Manage support requests and bug reports</p>
       </div>
 
       {/* Stats Cards */}
@@ -229,28 +229,30 @@ export default function AdminSupportPage() {
 
       {/* Filters */}
       <Card>
-        <CardHeader>
-          <CardTitle>Filters</CardTitle>
+        <CardHeader className="pb-3">
+          <CardTitle className="text-base md:text-lg">Filters</CardTitle>
         </CardHeader>
-        <CardContent className="space-y-4">
-          <div className="flex flex-col md:flex-row gap-4">
-            {/* Search */}
-            <div className="flex-1 relative">
-              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-              <Input
-                placeholder="Search tickets..."
-                value={searchQuery}
-                onChange={(e) => setSearchQuery(e.target.value)}
-                className="pl-9"
-              />
-            </div>
+        <CardContent className="space-y-3">
+          {/* Search */}
+          <div className="relative">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+            <Input
+              placeholder="Search tickets..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="pl-9"
+            />
+          </div>
 
-            {/* Type Filter */}
-            <div className="flex gap-2">
+          {/* Type Filter */}
+          <div>
+            <p className="text-xs font-medium text-muted-foreground mb-2">Type</p>
+            <div className="flex flex-wrap gap-2">
               <Button
                 variant={filterType === 'all' ? 'default' : 'outline'}
                 size="sm"
                 onClick={() => setFilterType('all')}
+                className="flex-1 sm:flex-none"
               >
                 All
               </Button>
@@ -258,33 +260,40 @@ export default function AdminSupportPage() {
                 variant={filterType === 'contact' ? 'default' : 'outline'}
                 size="sm"
                 onClick={() => setFilterType('contact')}
+                className="flex-1 sm:flex-none"
               >
-                <Mail className="h-4 w-4 mr-1" />
-                Contact
+                <Mail className="h-4 w-4 sm:mr-1" />
+                <span className="hidden sm:inline">Contact</span>
               </Button>
               <Button
                 variant={filterType === 'bug' ? 'default' : 'outline'}
                 size="sm"
                 onClick={() => setFilterType('bug')}
+                className="flex-1 sm:flex-none"
               >
-                <Bug className="h-4 w-4 mr-1" />
-                Bugs
+                <Bug className="h-4 w-4 sm:mr-1" />
+                <span className="hidden sm:inline">Bugs</span>
               </Button>
             </div>
+          </div>
 
-            {/* Status Filter */}
-            <div className="flex gap-2">
+          {/* Status Filter */}
+          <div>
+            <p className="text-xs font-medium text-muted-foreground mb-2">Status</p>
+            <div className="flex flex-wrap gap-2">
               <Button
                 variant={filterStatus === 'all' ? 'default' : 'outline'}
                 size="sm"
                 onClick={() => setFilterStatus('all')}
+                className="text-xs"
               >
-                All Status
+                All
               </Button>
               <Button
                 variant={filterStatus === 'open' ? 'default' : 'outline'}
                 size="sm"
                 onClick={() => setFilterStatus('open')}
+                className="text-xs"
               >
                 Open
               </Button>
@@ -292,6 +301,7 @@ export default function AdminSupportPage() {
                 variant={filterStatus === 'in_progress' ? 'default' : 'outline'}
                 size="sm"
                 onClick={() => setFilterStatus('in_progress')}
+                className="text-xs"
               >
                 In Progress
               </Button>
@@ -299,6 +309,7 @@ export default function AdminSupportPage() {
                 variant={filterStatus === 'resolved' ? 'default' : 'outline'}
                 size="sm"
                 onClick={() => setFilterStatus('resolved')}
+                className="text-xs"
               >
                 Resolved
               </Button>
@@ -309,55 +320,55 @@ export default function AdminSupportPage() {
 
       {/* Tickets List */}
       <Card>
-        <CardHeader>
-          <CardTitle>Tickets ({filteredTickets.length})</CardTitle>
-          <CardDescription>
+        <CardHeader className="pb-3">
+          <CardTitle className="text-base md:text-lg">Tickets ({filteredTickets.length})</CardTitle>
+          <CardDescription className="text-xs md:text-sm">
             {filterStatus !== 'all' && `Showing ${filterStatus} tickets`}
             {filterType !== 'all' && ` of type ${filterType}`}
           </CardDescription>
         </CardHeader>
         <CardContent>
           {filteredTickets.length === 0 ? (
-            <div className="text-center py-12">
-              <MessageSquare className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
-              <p className="text-muted-foreground">No tickets found</p>
+            <div className="text-center py-8 md:py-12">
+              <MessageSquare className="h-10 w-10 md:h-12 md:w-12 text-muted-foreground mx-auto mb-4" />
+              <p className="text-sm md:text-base text-muted-foreground">No tickets found</p>
             </div>
           ) : (
-            <div className="space-y-3">
+            <div className="space-y-2 md:space-y-3">
               {filteredTickets.map((ticket) => (
                 <Link
                   key={ticket.id}
                   href={`/admin/support/${ticket.id}`}
                   className="block"
                 >
-                  <div className="p-4 rounded-lg border hover:border-primary transition-colors cursor-pointer">
-                    <div className="flex items-start justify-between gap-4">
+                  <div className="p-3 md:p-4 rounded-lg border hover:border-primary transition-colors cursor-pointer">
+                    <div className="flex items-start justify-between gap-2 md:gap-4">
                       <div className="flex-1 min-w-0">
-                        <div className="flex items-center gap-2 mb-2">
-                          <Badge variant="outline" className="gap-1">
+                        <div className="flex items-center gap-2 mb-2 flex-wrap">
+                          <Badge variant="outline" className="gap-1 text-xs">
                             {getTypeIcon(ticket.type)}
-                            {ticket.type}
+                            <span className="hidden sm:inline">{ticket.type}</span>
                           </Badge>
-                          <Badge className={getStatusColor(ticket.status)}>
+                          <Badge className={`${getStatusColor(ticket.status)} text-xs`}>
                             {ticket.status.replace('_', ' ')}
                           </Badge>
                         </div>
-                        <h3 className="font-semibold mb-1 truncate">{ticket.subject}</h3>
-                        <p className="text-sm text-muted-foreground line-clamp-2 mb-2">
+                        <h3 className="font-semibold mb-1 truncate text-sm md:text-base">{ticket.subject}</h3>
+                        <p className="text-xs md:text-sm text-muted-foreground line-clamp-2 mb-2">
                           {ticket.message}
                         </p>
-                        <div className="flex items-center gap-4 text-xs text-muted-foreground">
-                          <span className="flex items-center gap-1">
-                            <Users className="h-3 w-3" />
-                            {ticket.user?.email || 'Unknown user'}
+                        <div className="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-4 text-xs text-muted-foreground">
+                          <span className="flex items-center gap-1 truncate">
+                            <Users className="h-3 w-3 flex-shrink-0" />
+                            <span className="truncate">{ticket.user?.email || 'Unknown user'}</span>
                           </span>
                           <span className="flex items-center gap-1">
-                            <Clock className="h-3 w-3" />
+                            <Clock className="h-3 w-3 flex-shrink-0" />
                             {new Date(ticket.created_at).toLocaleDateString()}
                           </span>
                         </div>
                       </div>
-                      <ChevronRight className="h-5 w-5 text-muted-foreground flex-shrink-0" />
+                      <ChevronRight className="h-4 w-4 md:h-5 md:w-5 text-muted-foreground flex-shrink-0 mt-1" />
                     </div>
                   </div>
                 </Link>