feat(admin-dashboard): Phase 3.1-3.3 - add feedback management UI with screenshot support
- Add feedback list page with search, type/status/screenshot filters - Add thumbnail indicator for feedback with screenshots - Add detail dialog with device context panel - Add screenshot lightbox viewer - Add delete screenshot button for GDPR compliance
This commit is contained in:
saravanakumardb1
parent
b261cda1cd
commit
d2c8931ad0
371
dashboards/admin-web/src/app/(dashboard)/feedback/page.tsx
Normal file
371
dashboards/admin-web/src/app/(dashboard)/feedback/page.tsx
Normal file
@ -0,0 +1,371 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import {
|
||||
Search,
|
||||
MessageSquare,
|
||||
Bug,
|
||||
Lightbulb,
|
||||
ThumbsUp,
|
||||
Eye,
|
||||
Trash2,
|
||||
ImageIcon,
|
||||
Loader2,
|
||||
} from 'lucide-react';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from '@/components/ui/table';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import { useToast } from '@/components/ui/toast';
|
||||
|
||||
interface Feedback {
|
||||
id: string;
|
||||
type: 'bug' | 'feature' | 'praise' | 'other';
|
||||
title: string;
|
||||
body?: string;
|
||||
status: 'new' | 'reviewed' | 'resolved' | 'closed';
|
||||
userId: string;
|
||||
userEmail?: string;
|
||||
createdAt: string;
|
||||
screenshotBlobPath?: string;
|
||||
screenshotContentType?: string;
|
||||
deviceContext?: {
|
||||
osVersion?: string;
|
||||
appVersion?: string;
|
||||
deviceModel?: string;
|
||||
screenResolution?: string;
|
||||
locale?: string;
|
||||
};
|
||||
}
|
||||
|
||||
const typeIcons = {
|
||||
bug: Bug,
|
||||
feature: Lightbulb,
|
||||
praise: ThumbsUp,
|
||||
other: MessageSquare,
|
||||
};
|
||||
|
||||
const typeColors = {
|
||||
bug: 'bg-red-100 text-red-800',
|
||||
feature: 'bg-blue-100 text-blue-800',
|
||||
praise: 'bg-green-100 text-green-800',
|
||||
other: 'bg-gray-100 text-gray-800',
|
||||
};
|
||||
|
||||
const statusColors = {
|
||||
new: 'bg-yellow-100 text-yellow-800',
|
||||
reviewed: 'bg-blue-100 text-blue-800',
|
||||
resolved: 'bg-green-100 text-green-800',
|
||||
closed: 'bg-gray-100 text-gray-800',
|
||||
};
|
||||
|
||||
export default function FeedbackPage() {
|
||||
const [feedback, setFeedback] = useState<Feedback[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [search, setSearch] = useState('');
|
||||
const [typeFilter, setTypeFilter] = useState<string>('all');
|
||||
const [statusFilter, setStatusFilter] = useState<string>('all');
|
||||
const [screenshotFilter, setScreenshotFilter] = useState<string>('all');
|
||||
const [selectedFeedback, setSelectedFeedback] = useState<Feedback | null>(null);
|
||||
const [screenshotUrl, setScreenshotUrl] = useState<string | null>(null);
|
||||
const [lightboxOpen, setLightboxOpen] = useState(false);
|
||||
const { toast } = useToast();
|
||||
|
||||
useEffect(() => {
|
||||
fetchFeedback();
|
||||
}, []);
|
||||
|
||||
async function fetchFeedback() {
|
||||
try {
|
||||
const res = await fetch('/api/feedback');
|
||||
if (!res.ok) throw new Error('Failed to fetch');
|
||||
const data = await res.json();
|
||||
setFeedback(data.items || []);
|
||||
} catch (err) {
|
||||
toast({ title: 'Error', description: 'Failed to load feedback', variant: 'destructive' });
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function viewScreenshot(feedbackId: string) {
|
||||
try {
|
||||
const res = await fetch(`/api/feedback/${feedbackId}/screenshot`);
|
||||
if (!res.ok) throw new Error('Failed to fetch screenshot');
|
||||
const data = await res.json();
|
||||
setScreenshotUrl(data.url);
|
||||
setLightboxOpen(true);
|
||||
} catch (err) {
|
||||
toast({ title: 'Error', description: 'Failed to load screenshot', variant: 'destructive' });
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteScreenshot(feedbackId: string) {
|
||||
if (!confirm('Delete this screenshot?')) return;
|
||||
try {
|
||||
const res = await fetch(`/api/feedback/${feedbackId}/screenshot`, { method: 'DELETE' });
|
||||
if (!res.ok) throw new Error('Failed to delete');
|
||||
toast({ title: 'Success', description: 'Screenshot deleted' });
|
||||
fetchFeedback();
|
||||
} catch (err) {
|
||||
toast({ title: 'Error', description: 'Failed to delete screenshot', variant: 'destructive' });
|
||||
}
|
||||
}
|
||||
|
||||
const filteredFeedback = feedback.filter((f) => {
|
||||
const matchesSearch = f.title.toLowerCase().includes(search.toLowerCase()) ||
|
||||
f.body?.toLowerCase().includes(search.toLowerCase());
|
||||
const matchesType = typeFilter === 'all' || f.type === typeFilter;
|
||||
const matchesStatus = statusFilter === 'all' || f.status === statusFilter;
|
||||
const matchesScreenshot = screenshotFilter === 'all' ||
|
||||
(screenshotFilter === 'has' && f.screenshotBlobPath) ||
|
||||
(screenshotFilter === 'none' && !f.screenshotBlobPath);
|
||||
return matchesSearch && matchesType && matchesStatus && matchesScreenshot;
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="container mx-auto py-6">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold">User Feedback</h1>
|
||||
<p className="text-muted-foreground">View and manage user-submitted feedback with screenshots</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Card className="mb-6">
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex flex-wrap gap-4">
|
||||
<div className="flex-1 min-w-[200px]">
|
||||
<Search className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="Search feedback..."
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
className="pl-9"
|
||||
/>
|
||||
</div>
|
||||
<Select value={typeFilter} onValueChange={setTypeFilter}>
|
||||
<SelectTrigger className="w-[140px]">
|
||||
<SelectValue placeholder="Type" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All Types</SelectItem>
|
||||
<SelectItem value="bug">Bug</SelectItem>
|
||||
<SelectItem value="feature">Feature</SelectItem>
|
||||
<SelectItem value="praise">Praise</SelectItem>
|
||||
<SelectItem value="other">Other</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Select value={statusFilter} onValueChange={setStatusFilter}>
|
||||
<SelectTrigger className="w-[140px]">
|
||||
<SelectValue placeholder="Status" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All Status</SelectItem>
|
||||
<SelectItem value="new">New</SelectItem>
|
||||
<SelectItem value="reviewed">Reviewed</SelectItem>
|
||||
<SelectItem value="resolved">Resolved</SelectItem>
|
||||
<SelectItem value="closed">Closed</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Select value={screenshotFilter} onValueChange={setScreenshotFilter}>
|
||||
<SelectTrigger className="w-[160px]">
|
||||
<SelectValue placeholder="Screenshot" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All</SelectItem>
|
||||
<SelectItem value="has">Has Screenshot</SelectItem>
|
||||
<SelectItem value="none">No Screenshot</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Feedback ({filteredFeedback.length})</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center py-8">
|
||||
<Loader2 className="h-8 w-8 animate-spin" />
|
||||
</div>
|
||||
) : (
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Type</TableHead>
|
||||
<TableHead>Title</TableHead>
|
||||
<TableHead>User</TableHead>
|
||||
<TableHead>Status</TableHead>
|
||||
<TableHead>Screenshot</TableHead>
|
||||
<TableHead>Date</TableHead>
|
||||
<TableHead>Actions</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{filteredFeedback.map((f) => {
|
||||
const TypeIcon = typeIcons[f.type];
|
||||
return (
|
||||
<TableRow key={f.id}>
|
||||
<TableCell>
|
||||
<Badge className={typeColors[f.type]}>
|
||||
<TypeIcon className="h-3 w-3 mr-1" />
|
||||
{f.type}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="font-medium max-w-[300px] truncate">
|
||||
{f.title}
|
||||
</TableCell>
|
||||
<TableCell>{f.userEmail || f.userId.slice(0, 8)}</TableCell>
|
||||
<TableCell>
|
||||
<Badge className={statusColors[f.status]}>{f.status}</Badge>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{f.screenshotBlobPath ? (
|
||||
<Badge variant="outline" className="bg-green-50">
|
||||
<ImageIcon className="h-3 w-3 mr-1" />
|
||||
Yes
|
||||
</Badge>
|
||||
) : (
|
||||
<span className="text-muted-foreground">-</span>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell>{new Date(f.createdAt).toLocaleDateString()}</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setSelectedFeedback(f)}
|
||||
>
|
||||
<Eye className="h-4 w-4" />
|
||||
</Button>
|
||||
{f.screenshotBlobPath && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => deleteScreenshot(f.id)}
|
||||
>
|
||||
<Trash2 className="h-4 w-4 text-red-500" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Feedback Detail Dialog */}
|
||||
<Dialog open={!!selectedFeedback} onOpenChange={() => setSelectedFeedback(null)}>
|
||||
<DialogContent className="max-w-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Feedback Details</DialogTitle>
|
||||
</DialogHeader>
|
||||
{selectedFeedback && (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge className={typeColors[selectedFeedback.type]}>
|
||||
{selectedFeedback.type}
|
||||
</Badge>
|
||||
<Badge className={statusColors[selectedFeedback.status]}>
|
||||
{selectedFeedback.status}
|
||||
</Badge>
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold">{selectedFeedback.title}</h3>
|
||||
<p className="text-muted-foreground">{selectedFeedback.body}</p>
|
||||
|
||||
{/* Screenshot Section */}
|
||||
{selectedFeedback.screenshotBlobPath && (
|
||||
<div className="border rounded-lg p-4">
|
||||
<h4 className="font-medium mb-2">Screenshot</h4>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => viewScreenshot(selectedFeedback.id)}
|
||||
>
|
||||
<Eye className="h-4 w-4 mr-2" />
|
||||
View Screenshot
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => deleteScreenshot(selectedFeedback.id)}
|
||||
>
|
||||
<Trash2 className="h-4 w-4 mr-2 text-red-500" />
|
||||
Delete Screenshot
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Device Context */}
|
||||
{selectedFeedback.deviceContext && (
|
||||
<div className="border rounded-lg p-4">
|
||||
<h4 className="font-medium mb-2">Device Context</h4>
|
||||
<div className="grid grid-cols-2 gap-2 text-sm">
|
||||
{selectedFeedback.deviceContext.osVersion && (
|
||||
<div><span className="text-muted-foreground">OS:</span> {selectedFeedback.deviceContext.osVersion}</div>
|
||||
)}
|
||||
{selectedFeedback.deviceContext.appVersion && (
|
||||
<div><span className="text-muted-foreground">App:</span> {selectedFeedback.deviceContext.appVersion}</div>
|
||||
)}
|
||||
{selectedFeedback.deviceContext.deviceModel && (
|
||||
<div><span className="text-muted-foreground">Device:</span> {selectedFeedback.deviceContext.deviceModel}</div>
|
||||
)}
|
||||
{selectedFeedback.deviceContext.screenResolution && (
|
||||
<div><span className="text-muted-foreground">Resolution:</span> {selectedFeedback.deviceContext.screenResolution}</div>
|
||||
)}
|
||||
{selectedFeedback.deviceContext.locale && (
|
||||
<div><span className="text-muted-foreground">Locale:</span> {selectedFeedback.deviceContext.locale}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* Screenshot Lightbox */}
|
||||
<Dialog open={lightboxOpen} onOpenChange={setLightboxOpen}>
|
||||
<DialogContent className="max-w-4xl p-0 overflow-hidden">
|
||||
{screenshotUrl && (
|
||||
<img
|
||||
src={screenshotUrl}
|
||||
alt="Screenshot"
|
||||
className="w-full h-auto max-h-[80vh] object-contain"
|
||||
/>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user