Skip to content

Commit 33e6c02

Browse files
akshay0611akshay0611
committed
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
1 parent 1e390ed commit 33e6c02

1 file changed

Lines changed: 58 additions & 47 deletions

File tree

‎app/admin/support/page.tsx‎

Lines changed: 58 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -157,11 +157,11 @@ export default function AdminSupportPage() {
157157
}
158158

159159
return (
160-
<div className="p-6 space-y-6">
160+
<div className="p-4 md:p-6 space-y-4 md:space-y-6">
161161
{/* Header */}
162162
<div>
163-
<h1 className="text-3xl font-bold mb-2">Support Tickets</h1>
164-
<p className="text-muted-foreground">Manage support requests and bug reports</p>
163+
<h1 className="text-2xl md:text-3xl font-bold mb-2">Support Tickets</h1>
164+
<p className="text-sm md:text-base text-muted-foreground">Manage support requests and bug reports</p>
165165
</div>
166166

167167
{/* Stats Cards */}
@@ -229,76 +229,87 @@ export default function AdminSupportPage() {
229229

230230
{/* Filters */}
231231
<Card>
232-
<CardHeader>
233-
<CardTitle>Filters</CardTitle>
232+
<CardHeader className="pb-3">
233+
<CardTitle className="text-base md:text-lg">Filters</CardTitle>
234234
</CardHeader>
235-
<CardContent className="space-y-4">
236-
<div className="flex flex-col md:flex-row gap-4">
237-
{/* Search */}
238-
<div className="flex-1 relative">
239-
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
240-
<Input
241-
placeholder="Search tickets..."
242-
value={searchQuery}
243-
onChange={(e) => setSearchQuery(e.target.value)}
244-
className="pl-9"
245-
/>
246-
</div>
235+
<CardContent className="space-y-3">
236+
{/* Search */}
237+
<div className="relative">
238+
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
239+
<Input
240+
placeholder="Search tickets..."
241+
value={searchQuery}
242+
onChange={(e) => setSearchQuery(e.target.value)}
243+
className="pl-9"
244+
/>
245+
</div>
247246

248-
{/* Type Filter */}
249-
<div className="flex gap-2">
247+
{/* Type Filter */}
248+
<div>
249+
<p className="text-xs font-medium text-muted-foreground mb-2">Type</p>
250+
<div className="flex flex-wrap gap-2">
250251
<Button
251252
variant={filterType === 'all' ? 'default' : 'outline'}
252253
size="sm"
253254
onClick={() => setFilterType('all')}
255+
className="flex-1 sm:flex-none"
254256
>
255257
All
256258
</Button>
257259
<Button
258260
variant={filterType === 'contact' ? 'default' : 'outline'}
259261
size="sm"
260262
onClick={() => setFilterType('contact')}
263+
className="flex-1 sm:flex-none"
261264
>
262-
<Mail className="h-4 w-4 mr-1" />
263-
Contact
265+
<Mail className="h-4 w-4 sm:mr-1" />
266+
<span className="hidden sm:inline">Contact</span>
264267
</Button>
265268
<Button
266269
variant={filterType === 'bug' ? 'default' : 'outline'}
267270
size="sm"
268271
onClick={() => setFilterType('bug')}
272+
className="flex-1 sm:flex-none"
269273
>
270-
<Bug className="h-4 w-4 mr-1" />
271-
Bugs
274+
<Bug className="h-4 w-4 sm:mr-1" />
275+
<span className="hidden sm:inline">Bugs</span>
272276
</Button>
273277
</div>
278+
</div>
274279

275-
{/* Status Filter */}
276-
<div className="flex gap-2">
280+
{/* Status Filter */}
281+
<div>
282+
<p className="text-xs font-medium text-muted-foreground mb-2">Status</p>
283+
<div className="flex flex-wrap gap-2">
277284
<Button
278285
variant={filterStatus === 'all' ? 'default' : 'outline'}
279286
size="sm"
280287
onClick={() => setFilterStatus('all')}
288+
className="text-xs"
281289
>
282-
All Status
290+
All
283291
</Button>
284292
<Button
285293
variant={filterStatus === 'open' ? 'default' : 'outline'}
286294
size="sm"
287295
onClick={() => setFilterStatus('open')}
296+
className="text-xs"
288297
>
289298
Open
290299
</Button>
291300
<Button
292301
variant={filterStatus === 'in_progress' ? 'default' : 'outline'}
293302
size="sm"
294303
onClick={() => setFilterStatus('in_progress')}
304+
className="text-xs"
295305
>
296306
In Progress
297307
</Button>
298308
<Button
299309
variant={filterStatus === 'resolved' ? 'default' : 'outline'}
300310
size="sm"
301311
onClick={() => setFilterStatus('resolved')}
312+
className="text-xs"
302313
>
303314
Resolved
304315
</Button>
@@ -309,55 +320,55 @@ export default function AdminSupportPage() {
309320

310321
{/* Tickets List */}
311322
<Card>
312-
<CardHeader>
313-
<CardTitle>Tickets ({filteredTickets.length})</CardTitle>
314-
<CardDescription>
323+
<CardHeader className="pb-3">
324+
<CardTitle className="text-base md:text-lg">Tickets ({filteredTickets.length})</CardTitle>
325+
<CardDescription className="text-xs md:text-sm">
315326
{filterStatus !== 'all' && `Showing ${filterStatus} tickets`}
316327
{filterType !== 'all' && ` of type ${filterType}`}
317328
</CardDescription>
318329
</CardHeader>
319330
<CardContent>
320331
{filteredTickets.length === 0 ? (
321-
<div className="text-center py-12">
322-
<MessageSquare className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
323-
<p className="text-muted-foreground">No tickets found</p>
332+
<div className="text-center py-8 md:py-12">
333+
<MessageSquare className="h-10 w-10 md:h-12 md:w-12 text-muted-foreground mx-auto mb-4" />
334+
<p className="text-sm md:text-base text-muted-foreground">No tickets found</p>
324335
</div>
325336
) : (
326-
<div className="space-y-3">
337+
<div className="space-y-2 md:space-y-3">
327338
{filteredTickets.map((ticket) => (
328339
<Link
329340
key={ticket.id}
330341
href={`/admin/support/${ticket.id}`}
331342
className="block"
332343
>
333-
<div className="p-4 rounded-lg border hover:border-primary transition-colors cursor-pointer">
334-
<div className="flex items-start justify-between gap-4">
344+
<div className="p-3 md:p-4 rounded-lg border hover:border-primary transition-colors cursor-pointer">
345+
<div className="flex items-start justify-between gap-2 md:gap-4">
335346
<div className="flex-1 min-w-0">
336-
<div className="flex items-center gap-2 mb-2">
337-
<Badge variant="outline" className="gap-1">
347+
<div className="flex items-center gap-2 mb-2 flex-wrap">
348+
<Badge variant="outline" className="gap-1 text-xs">
338349
{getTypeIcon(ticket.type)}
339-
{ticket.type}
350+
<span className="hidden sm:inline">{ticket.type}</span>
340351
</Badge>
341-
<Badge className={getStatusColor(ticket.status)}>
352+
<Badge className={`${getStatusColor(ticket.status)} text-xs`}>
342353
{ticket.status.replace('_', ' ')}
343354
</Badge>
344355
</div>
345-
<h3 className="font-semibold mb-1 truncate">{ticket.subject}</h3>
346-
<p className="text-sm text-muted-foreground line-clamp-2 mb-2">
356+
<h3 className="font-semibold mb-1 truncate text-sm md:text-base">{ticket.subject}</h3>
357+
<p className="text-xs md:text-sm text-muted-foreground line-clamp-2 mb-2">
347358
{ticket.message}
348359
</p>
349-
<div className="flex items-center gap-4 text-xs text-muted-foreground">
350-
<span className="flex items-center gap-1">
351-
<Users className="h-3 w-3" />
352-
{ticket.user?.email || 'Unknown user'}
360+
<div className="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-4 text-xs text-muted-foreground">
361+
<span className="flex items-center gap-1 truncate">
362+
<Users className="h-3 w-3 flex-shrink-0" />
363+
<span className="truncate">{ticket.user?.email || 'Unknown user'}</span>
353364
</span>
354365
<span className="flex items-center gap-1">
355-
<Clock className="h-3 w-3" />
366+
<Clock className="h-3 w-3 flex-shrink-0" />
356367
{new Date(ticket.created_at).toLocaleDateString()}
357368
</span>
358369
</div>
359370
</div>
360-
<ChevronRight className="h-5 w-5 text-muted-foreground flex-shrink-0" />
371+
<ChevronRight className="h-4 w-4 md:h-5 md:w-5 text-muted-foreground flex-shrink-0 mt-1" />
361372
</div>
362373
</div>
363374
</Link>

0 commit comments

Comments
 (0)