mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-23 06:51:13 -05:00
feat: Implement contact page and backend
This commit is contained in:
gpt-engineer-app[bot]
457
src/pages/admin/AdminContact.tsx
Normal file
457
src/pages/admin/AdminContact.tsx
Normal file
@@ -0,0 +1,457 @@
|
||||
import { useState } from 'react';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { format } from 'date-fns';
|
||||
import {
|
||||
Mail,
|
||||
Clock,
|
||||
CheckCircle2,
|
||||
XCircle,
|
||||
Filter,
|
||||
Search,
|
||||
ChevronDown,
|
||||
AlertCircle,
|
||||
} from 'lucide-react';
|
||||
import { supabase } from '@/integrations/supabase/client';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/components/ui/card';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { handleError, handleSuccess } from '@/lib/errorHandler';
|
||||
import { logger } from '@/lib/logger';
|
||||
import { contactCategories } from '@/lib/contactValidation';
|
||||
|
||||
interface ContactSubmission {
|
||||
id: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
user_id: string | null;
|
||||
name: string;
|
||||
email: string;
|
||||
subject: string;
|
||||
message: string;
|
||||
category: string;
|
||||
status: 'pending' | 'in_progress' | 'resolved' | 'closed';
|
||||
assigned_to: string | null;
|
||||
admin_notes: string | null;
|
||||
resolved_at: string | null;
|
||||
resolved_by: string | null;
|
||||
}
|
||||
|
||||
export default function AdminContact() {
|
||||
const queryClient = useQueryClient();
|
||||
const [statusFilter, setStatusFilter] = useState<string>('all');
|
||||
const [categoryFilter, setCategoryFilter] = useState<string>('all');
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [selectedSubmission, setSelectedSubmission] = useState<ContactSubmission | null>(null);
|
||||
const [adminNotes, setAdminNotes] = useState('');
|
||||
|
||||
// Fetch contact submissions
|
||||
const { data: submissions, isLoading } = useQuery({
|
||||
queryKey: ['admin-contact-submissions', statusFilter, categoryFilter, searchQuery],
|
||||
queryFn: async () => {
|
||||
let query = supabase
|
||||
.from('contact_submissions')
|
||||
.select('*')
|
||||
.order('created_at', { ascending: false });
|
||||
|
||||
if (statusFilter !== 'all') {
|
||||
query = query.eq('status', statusFilter);
|
||||
}
|
||||
|
||||
if (categoryFilter !== 'all') {
|
||||
query = query.eq('category', categoryFilter);
|
||||
}
|
||||
|
||||
if (searchQuery) {
|
||||
query = query.or(
|
||||
`name.ilike.%${searchQuery}%,email.ilike.%${searchQuery}%,subject.ilike.%${searchQuery}%`
|
||||
);
|
||||
}
|
||||
|
||||
const { data, error } = await query;
|
||||
|
||||
if (error) {
|
||||
logger.error('Failed to fetch contact submissions', { error: error.message });
|
||||
throw error;
|
||||
}
|
||||
|
||||
return data as ContactSubmission[];
|
||||
},
|
||||
});
|
||||
|
||||
// Update submission status
|
||||
const updateStatusMutation = useMutation({
|
||||
mutationFn: async ({
|
||||
id,
|
||||
status,
|
||||
notes,
|
||||
}: {
|
||||
id: string;
|
||||
status: string;
|
||||
notes?: string;
|
||||
}) => {
|
||||
const updateData: Record<string, unknown> = { status };
|
||||
|
||||
if (notes) {
|
||||
updateData.admin_notes = notes;
|
||||
}
|
||||
|
||||
if (status === 'resolved' || status === 'closed') {
|
||||
const { data: { user } } = await supabase.auth.getUser();
|
||||
updateData.resolved_at = new Date().toISOString();
|
||||
updateData.resolved_by = user?.id;
|
||||
}
|
||||
|
||||
const { error } = await supabase
|
||||
.from('contact_submissions')
|
||||
.update(updateData)
|
||||
.eq('id', id);
|
||||
|
||||
if (error) throw error;
|
||||
},
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['admin-contact-submissions'] });
|
||||
handleSuccess('Status Updated', 'Contact submission status has been updated');
|
||||
setSelectedSubmission(null);
|
||||
setAdminNotes('');
|
||||
},
|
||||
onError: (error) => {
|
||||
handleError(error, { action: 'update_contact_status' });
|
||||
},
|
||||
});
|
||||
|
||||
const handleUpdateStatus = (status: string) => {
|
||||
if (!selectedSubmission) return;
|
||||
|
||||
updateStatusMutation.mutate({
|
||||
id: selectedSubmission.id,
|
||||
status,
|
||||
notes: adminNotes || undefined,
|
||||
});
|
||||
};
|
||||
|
||||
const getStatusBadge = (status: string) => {
|
||||
const variants: Record<string, 'default' | 'secondary' | 'destructive' | 'outline'> = {
|
||||
pending: 'default',
|
||||
in_progress: 'secondary',
|
||||
resolved: 'outline',
|
||||
closed: 'outline',
|
||||
};
|
||||
|
||||
return (
|
||||
<Badge variant={variants[status] || 'default'}>
|
||||
{status.replace('_', ' ').toUpperCase()}
|
||||
</Badge>
|
||||
);
|
||||
};
|
||||
|
||||
const getCategoryLabel = (category: string) => {
|
||||
const cat = contactCategories.find((c) => c.value === category);
|
||||
return cat?.label || category;
|
||||
};
|
||||
|
||||
const stats = {
|
||||
pending: submissions?.filter((s) => s.status === 'pending').length || 0,
|
||||
inProgress: submissions?.filter((s) => s.status === 'in_progress').length || 0,
|
||||
resolved: submissions?.filter((s) => s.status === 'resolved').length || 0,
|
||||
total: submissions?.length || 0,
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-8 max-w-7xl">
|
||||
{/* Header */}
|
||||
<div className="mb-8">
|
||||
<h1 className="text-4xl font-bold mb-2">Contact Submissions</h1>
|
||||
<p className="text-muted-foreground">
|
||||
Manage and respond to user contact form submissions
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Stats Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<CardDescription>Pending</CardDescription>
|
||||
<CardTitle className="text-3xl">{stats.pending}</CardTitle>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<CardDescription>In Progress</CardDescription>
|
||||
<CardTitle className="text-3xl">{stats.inProgress}</CardTitle>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<CardDescription>Resolved</CardDescription>
|
||||
<CardTitle className="text-3xl">{stats.resolved}</CardTitle>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<CardDescription>Total</CardDescription>
|
||||
<CardTitle className="text-3xl">{stats.total}</CardTitle>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Filters */}
|
||||
<Card className="mb-6">
|
||||
<CardContent className="pt-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
{/* Search */}
|
||||
<div className="space-y-2">
|
||||
<Label>Search</Label>
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="Name, email, or subject..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="pl-9"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Status Filter */}
|
||||
<div className="space-y-2">
|
||||
<Label>Status</Label>
|
||||
<Select value={statusFilter} onValueChange={setStatusFilter}>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All Statuses</SelectItem>
|
||||
<SelectItem value="pending">Pending</SelectItem>
|
||||
<SelectItem value="in_progress">In Progress</SelectItem>
|
||||
<SelectItem value="resolved">Resolved</SelectItem>
|
||||
<SelectItem value="closed">Closed</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* Category Filter */}
|
||||
<div className="space-y-2">
|
||||
<Label>Category</Label>
|
||||
<Select value={categoryFilter} onValueChange={setCategoryFilter}>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All Categories</SelectItem>
|
||||
{contactCategories.map((cat) => (
|
||||
<SelectItem key={cat.value} value={cat.value}>
|
||||
{cat.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Submissions List */}
|
||||
{isLoading ? (
|
||||
<div className="text-center py-12">
|
||||
<p className="text-muted-foreground">Loading submissions...</p>
|
||||
</div>
|
||||
) : submissions && submissions.length > 0 ? (
|
||||
<div className="space-y-4">
|
||||
{submissions.map((submission) => (
|
||||
<Card
|
||||
key={submission.id}
|
||||
className="cursor-pointer hover:border-primary transition-colors"
|
||||
onClick={() => {
|
||||
setSelectedSubmission(submission);
|
||||
setAdminNotes(submission.admin_notes || '');
|
||||
}}
|
||||
>
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="flex-1 space-y-2">
|
||||
<div className="flex items-center gap-3 flex-wrap">
|
||||
<h3 className="font-semibold text-lg">{submission.subject}</h3>
|
||||
{getStatusBadge(submission.status)}
|
||||
<Badge variant="outline">{getCategoryLabel(submission.category)}</Badge>
|
||||
</div>
|
||||
<div className="flex items-center gap-4 text-sm text-muted-foreground flex-wrap">
|
||||
<span className="flex items-center gap-1">
|
||||
<Mail className="h-3 w-3" />
|
||||
{submission.name} ({submission.email})
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<Clock className="h-3 w-3" />
|
||||
{format(new Date(submission.created_at), 'MMM d, yyyy h:mm a')}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm line-clamp-2">{submission.message}</p>
|
||||
</div>
|
||||
<ChevronDown className="h-5 w-5 text-muted-foreground" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<Card>
|
||||
<CardContent className="py-12">
|
||||
<div className="text-center">
|
||||
<Mail className="h-12 w-12 mx-auto mb-4 text-muted-foreground" />
|
||||
<p className="text-muted-foreground">No submissions found</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Submission Detail Dialog */}
|
||||
<Dialog
|
||||
open={!!selectedSubmission}
|
||||
onOpenChange={(open) => {
|
||||
if (!open) {
|
||||
setSelectedSubmission(null);
|
||||
setAdminNotes('');
|
||||
}
|
||||
}}
|
||||
>
|
||||
<DialogContent className="max-w-3xl max-h-[90vh] overflow-y-auto">
|
||||
{selectedSubmission && (
|
||||
<>
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-2xl">
|
||||
{selectedSubmission.subject}
|
||||
</DialogTitle>
|
||||
<DialogDescription>
|
||||
Submitted {format(new Date(selectedSubmission.created_at), 'PPpp')}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-6">
|
||||
{/* Sender Info */}
|
||||
<div className="space-y-2">
|
||||
<Label>From</Label>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-medium">{selectedSubmission.name}</span>
|
||||
<span className="text-muted-foreground">
|
||||
({selectedSubmission.email})
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Category & Status */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label>Category</Label>
|
||||
<div>{getCategoryLabel(selectedSubmission.category)}</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Status</Label>
|
||||
<div>{getStatusBadge(selectedSubmission.status)}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Message */}
|
||||
<div className="space-y-2">
|
||||
<Label>Message</Label>
|
||||
<div className="p-4 bg-muted rounded-lg whitespace-pre-wrap">
|
||||
{selectedSubmission.message}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Existing Admin Notes */}
|
||||
{selectedSubmission.admin_notes && (
|
||||
<div className="space-y-2">
|
||||
<Label>Previous Admin Notes</Label>
|
||||
<div className="p-4 bg-muted rounded-lg whitespace-pre-wrap">
|
||||
{selectedSubmission.admin_notes}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Admin Notes Input */}
|
||||
<div className="space-y-2">
|
||||
<Label>Add/Update Admin Notes</Label>
|
||||
<Textarea
|
||||
value={adminNotes}
|
||||
onChange={(e) => setAdminNotes(e.target.value)}
|
||||
placeholder="Add internal notes about this submission..."
|
||||
rows={4}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={() => handleUpdateStatus('in_progress')}
|
||||
disabled={
|
||||
updateStatusMutation.isPending ||
|
||||
selectedSubmission.status === 'in_progress'
|
||||
}
|
||||
>
|
||||
<Clock className="mr-2 h-4 w-4" />
|
||||
Mark In Progress
|
||||
</Button>
|
||||
<Button
|
||||
variant="default"
|
||||
onClick={() => handleUpdateStatus('resolved')}
|
||||
disabled={
|
||||
updateStatusMutation.isPending ||
|
||||
selectedSubmission.status === 'resolved'
|
||||
}
|
||||
>
|
||||
<CheckCircle2 className="mr-2 h-4 w-4" />
|
||||
Mark Resolved
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => handleUpdateStatus('closed')}
|
||||
disabled={
|
||||
updateStatusMutation.isPending ||
|
||||
selectedSubmission.status === 'closed'
|
||||
}
|
||||
>
|
||||
<XCircle className="mr-2 h-4 w-4" />
|
||||
Close
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
asChild
|
||||
className="ml-auto"
|
||||
>
|
||||
<a href={`mailto:${selectedSubmission.email}`}>
|
||||
<Mail className="mr-2 h-4 w-4" />
|
||||
Email Sender
|
||||
</a>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user