mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-22 13:31:22 -05:00
1385 lines
54 KiB
TypeScript
1385 lines
54 KiB
TypeScript
import { useState, useEffect } from 'react';
|
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
|
import { format } from 'date-fns';
|
|
import {
|
|
Mail,
|
|
Clock,
|
|
CheckCircle2,
|
|
XCircle,
|
|
Filter,
|
|
Search,
|
|
ChevronDown,
|
|
AlertCircle,
|
|
Send,
|
|
ArrowUpRight,
|
|
ArrowDownLeft,
|
|
Loader2,
|
|
RefreshCw,
|
|
Reply,
|
|
Copy,
|
|
Check,
|
|
User,
|
|
Award,
|
|
TrendingUp,
|
|
Archive,
|
|
ArchiveRestore,
|
|
Trash2,
|
|
AlertTriangle,
|
|
Merge,
|
|
} from 'lucide-react';
|
|
import { supabase } from '@/lib/supabaseClient';
|
|
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 {
|
|
AlertDialog,
|
|
AlertDialogAction,
|
|
AlertDialogCancel,
|
|
AlertDialogContent,
|
|
AlertDialogDescription,
|
|
AlertDialogFooter,
|
|
AlertDialogHeader,
|
|
AlertDialogTitle,
|
|
AlertDialogTrigger,
|
|
} from '@/components/ui/alert-dialog';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
|
import { ScrollArea } from '@/components/ui/scroll-area';
|
|
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
|
|
import { Checkbox } from '@/components/ui/checkbox';
|
|
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
|
|
import { Alert, AlertDescription } from '@/components/ui/alert';
|
|
import { DialogFooter } from '@/components/ui/dialog';
|
|
import { useTheme } from '@/components/theme/ThemeProvider';
|
|
import { useUserRole } from '@/hooks/useUserRole';
|
|
import { useDocumentTitle } from '@/hooks/useDocumentTitle';
|
|
import { handleError, handleSuccess, handleNonCriticalError } from '@/lib/errorHandler';
|
|
import { contactCategories } from '@/lib/contactValidation';
|
|
import { invokeWithTracking } from '@/lib/edgeFunctionTracking';
|
|
import { AdminLayout } from '@/components/layout/AdminLayout';
|
|
|
|
interface ContactSubmission {
|
|
id: string;
|
|
created_at: string;
|
|
updated_at: string;
|
|
user_id: string | null;
|
|
submitter_username: string | null;
|
|
submitter_reputation: number | null;
|
|
submitter_profile: {
|
|
display_name?: string;
|
|
created_at?: string;
|
|
coaster_count?: number;
|
|
ride_count?: number;
|
|
park_count?: number;
|
|
review_count?: number;
|
|
avatar_url?: 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;
|
|
thread_id: string;
|
|
last_admin_response_at: string | null;
|
|
response_count: number;
|
|
ticket_number: string;
|
|
archived_at: string | null;
|
|
archived_by: string | null;
|
|
merged_ticket_numbers: string[] | null;
|
|
}
|
|
|
|
interface EmailThread {
|
|
id: string;
|
|
created_at: string;
|
|
message_id: string;
|
|
from_email: string;
|
|
to_email: string;
|
|
subject: string;
|
|
body_text: string;
|
|
direction: 'inbound' | 'outbound';
|
|
sent_by: string | null;
|
|
}
|
|
|
|
export default function AdminContact() {
|
|
useDocumentTitle('Contact Submissions - Admin');
|
|
const queryClient = useQueryClient();
|
|
const { theme } = useTheme();
|
|
const { isAdmin, loading: rolesLoading } = useUserRole();
|
|
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('');
|
|
const [replyBody, setReplyBody] = useState('');
|
|
const [showReplyForm, setShowReplyForm] = useState(false);
|
|
const [emailThreads, setEmailThreads] = useState<EmailThread[]>([]);
|
|
const [loadingThreads, setLoadingThreads] = useState(false);
|
|
const [copiedTicket, setCopiedTicket] = useState<string | null>(null);
|
|
const [activeTab, setActiveTab] = useState<string>('details');
|
|
const [replyStatus, setReplyStatus] = useState<string>('');
|
|
const [showArchived, setShowArchived] = useState(false);
|
|
|
|
// Merge mode state
|
|
const [selectedForMerge, setSelectedForMerge] = useState<string[]>([]);
|
|
const [mergeMode, setMergeMode] = useState(false);
|
|
const [showMergeDialog, setShowMergeDialog] = useState(false);
|
|
const [primaryTicketId, setPrimaryTicketId] = useState<string | null>(null);
|
|
const [mergeReason, setMergeReason] = useState('');
|
|
|
|
// Fetch contact submissions
|
|
const { data: submissions, isLoading } = useQuery({
|
|
queryKey: ['admin-contact-submissions', statusFilter, categoryFilter, searchQuery, showArchived],
|
|
queryFn: async () => {
|
|
let query = supabase
|
|
.from('contact_submissions')
|
|
.select(`
|
|
*,
|
|
submitter_profile:profiles!submitter_profile_id(
|
|
avatar_url,
|
|
display_name,
|
|
username,
|
|
created_at,
|
|
coaster_count,
|
|
ride_count,
|
|
park_count,
|
|
review_count
|
|
)
|
|
`)
|
|
.order('created_at', { ascending: false });
|
|
|
|
// Filter archived based on toggle
|
|
if (showArchived) {
|
|
query = query.not('archived_at', 'is', null);
|
|
} else {
|
|
query = query.is('archived_at', null);
|
|
}
|
|
|
|
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) {
|
|
handleNonCriticalError(error, {
|
|
action: 'Fetch contact submissions',
|
|
metadata: { error: error.message }
|
|
});
|
|
throw error;
|
|
}
|
|
|
|
return data as ContactSubmission[];
|
|
},
|
|
});
|
|
|
|
// Fetch email threads when submission selected
|
|
useEffect(() => {
|
|
if (selectedSubmission) {
|
|
setLoadingThreads(true);
|
|
// Force fresh fetch - no caching
|
|
supabase
|
|
.from('contact_email_threads')
|
|
.select('*')
|
|
.eq('submission_id', selectedSubmission.id)
|
|
.order('created_at', { ascending: true })
|
|
.then(({ data, error }) => {
|
|
if (error) {
|
|
handleNonCriticalError(error, {
|
|
action: 'Fetch email threads',
|
|
metadata: { submissionId: selectedSubmission.id }
|
|
});
|
|
setEmailThreads([]);
|
|
} else {
|
|
setEmailThreads((data as EmailThread[]) || []);
|
|
}
|
|
setLoadingThreads(false);
|
|
});
|
|
|
|
setAdminNotes(selectedSubmission.admin_notes || '');
|
|
setReplyBody('');
|
|
setShowReplyForm(false);
|
|
setReplyStatus(selectedSubmission.status); // Initialize reply status
|
|
} else {
|
|
// Reset tab to details when dialog closes
|
|
setActiveTab('details');
|
|
}
|
|
}, [selectedSubmission]);
|
|
|
|
// Send reply mutation
|
|
const sendReplyMutation = useMutation({
|
|
mutationFn: async ({ submissionId, body, newStatus }: { submissionId: string, body: string, newStatus?: string }) => {
|
|
const { data, error } = await invokeWithTracking(
|
|
'send-admin-email-reply',
|
|
{ submissionId, replyBody: body },
|
|
undefined
|
|
);
|
|
if (error) throw error;
|
|
|
|
// Update status if changed
|
|
if (newStatus && selectedSubmission && newStatus !== selectedSubmission.status) {
|
|
const updateData: Record<string, unknown> = { status: newStatus };
|
|
|
|
if (newStatus === 'resolved' || newStatus === 'closed') {
|
|
const { data: { user } } = await supabase.auth.getUser();
|
|
updateData.resolved_at = new Date().toISOString();
|
|
updateData.resolved_by = user?.id;
|
|
}
|
|
|
|
const { error: statusError } = await supabase
|
|
.from('contact_submissions')
|
|
.update(updateData)
|
|
.eq('id', submissionId);
|
|
|
|
if (statusError) {
|
|
handleError(statusError, {
|
|
action: 'Update contact status',
|
|
metadata: { submissionId, newStatus }
|
|
});
|
|
throw statusError;
|
|
}
|
|
}
|
|
|
|
return data;
|
|
},
|
|
onSuccess: (_data, variables) => {
|
|
const submission = submissions?.find(s => s.id === variables.submissionId);
|
|
const ticketNumber = submission?.ticket_number || 'Unknown';
|
|
|
|
let message = `Your email response has been sent for ticket ${ticketNumber}`;
|
|
if (variables.newStatus && selectedSubmission && variables.newStatus !== selectedSubmission.status) {
|
|
message += ` and status updated to ${variables.newStatus.replace('_', ' ')}`;
|
|
}
|
|
|
|
handleSuccess('Reply Sent', message);
|
|
setReplyBody('');
|
|
setShowReplyForm(false);
|
|
// Refetch threads
|
|
if (selectedSubmission) {
|
|
supabase
|
|
.from('contact_email_threads')
|
|
.select('*')
|
|
.eq('submission_id', selectedSubmission.id)
|
|
.order('created_at', { ascending: true })
|
|
.then(({ data }) => setEmailThreads((data as EmailThread[]) || []));
|
|
}
|
|
queryClient.invalidateQueries({ queryKey: ['admin-contact-submissions'] });
|
|
},
|
|
onError: (error: Error) => {
|
|
handleError(error, { action: 'Send Email Reply' });
|
|
}
|
|
});
|
|
|
|
// 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' });
|
|
},
|
|
});
|
|
|
|
// Archive submission mutation
|
|
const archiveSubmissionMutation = useMutation({
|
|
mutationFn: async (id: string) => {
|
|
const { data: { user } } = await supabase.auth.getUser();
|
|
const { error } = await supabase
|
|
.from('contact_submissions')
|
|
.update({
|
|
archived_at: new Date().toISOString(),
|
|
archived_by: user?.id
|
|
})
|
|
.eq('id', id);
|
|
|
|
if (error) throw error;
|
|
},
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ['admin-contact-submissions'] });
|
|
handleSuccess('Archived', 'Contact submission has been archived');
|
|
setSelectedSubmission(null);
|
|
},
|
|
onError: (error) => {
|
|
handleError(error, { action: 'archive_contact_submission' });
|
|
}
|
|
});
|
|
|
|
// Unarchive submission mutation
|
|
const unarchiveSubmissionMutation = useMutation({
|
|
mutationFn: async (id: string) => {
|
|
const { error } = await supabase
|
|
.from('contact_submissions')
|
|
.update({
|
|
archived_at: null,
|
|
archived_by: null
|
|
})
|
|
.eq('id', id);
|
|
|
|
if (error) throw error;
|
|
},
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ['admin-contact-submissions'] });
|
|
handleSuccess('Restored', 'Contact submission has been restored from archive');
|
|
setSelectedSubmission(null);
|
|
},
|
|
onError: (error) => {
|
|
handleError(error, { action: 'unarchive_contact_submission' });
|
|
}
|
|
});
|
|
|
|
// Delete submission mutation
|
|
const deleteSubmissionMutation = useMutation({
|
|
mutationFn: async (id: string) => {
|
|
const { error } = await supabase
|
|
.from('contact_submissions')
|
|
.delete()
|
|
.eq('id', id);
|
|
|
|
if (error) throw error;
|
|
},
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ['admin-contact-submissions'] });
|
|
handleSuccess('Deleted', 'Contact submission has been permanently deleted');
|
|
setSelectedSubmission(null);
|
|
},
|
|
onError: (error) => {
|
|
handleError(error, { action: 'delete_contact_submission' });
|
|
}
|
|
});
|
|
|
|
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 handleRefreshSubmissions = () => {
|
|
queryClient.invalidateQueries({ queryKey: ['admin-contact-submissions'] });
|
|
};
|
|
|
|
const handleCopyTicket = (ticketNumber: string) => {
|
|
navigator.clipboard.writeText(ticketNumber);
|
|
setCopiedTicket(ticketNumber);
|
|
setTimeout(() => setCopiedTicket(null), 2000);
|
|
};
|
|
|
|
const handleQuickReply = (e: React.MouseEvent, submission: ContactSubmission) => {
|
|
e.stopPropagation();
|
|
setSelectedSubmission(submission);
|
|
setAdminNotes(submission.admin_notes || '');
|
|
setActiveTab('thread');
|
|
setShowReplyForm(true);
|
|
setReplyStatus(submission.status);
|
|
};
|
|
|
|
const handleRefreshThreads = () => {
|
|
if (!selectedSubmission) return;
|
|
setLoadingThreads(true);
|
|
supabase
|
|
.from('contact_email_threads')
|
|
.select('*')
|
|
.eq('submission_id', selectedSubmission.id)
|
|
.order('created_at', { ascending: true })
|
|
.then(({ data, error }) => {
|
|
if (error) {
|
|
handleError(error, {
|
|
action: 'Refresh Email Threads',
|
|
metadata: { submissionId: selectedSubmission.id }
|
|
});
|
|
} else {
|
|
setEmailThreads((data as EmailThread[]) || []);
|
|
handleSuccess('Refreshed', 'Email thread updated');
|
|
}
|
|
setLoadingThreads(false);
|
|
});
|
|
};
|
|
|
|
// Merge tickets mutation
|
|
const mergeTicketsMutation = useMutation({
|
|
mutationFn: async ({ primaryId, mergeIds, reason }: {
|
|
primaryId: string;
|
|
mergeIds: string[];
|
|
reason?: string;
|
|
}) => {
|
|
const { data, error } = await invokeWithTracking(
|
|
'merge-contact-tickets',
|
|
{
|
|
primaryTicketId: primaryId,
|
|
mergeTicketIds: mergeIds,
|
|
mergeReason: reason
|
|
},
|
|
undefined
|
|
);
|
|
if (error) throw error;
|
|
return data;
|
|
},
|
|
onSuccess: (data: any) => {
|
|
handleSuccess(
|
|
'Tickets Merged Successfully',
|
|
`Merged ${data.mergedCount} tickets into ${data.primaryTicketNumber}. ${data.threadsConsolidated} email threads consolidated.`
|
|
);
|
|
|
|
// Reset merge mode
|
|
setMergeMode(false);
|
|
setSelectedForMerge([]);
|
|
setShowMergeDialog(false);
|
|
setPrimaryTicketId(null);
|
|
setMergeReason('');
|
|
|
|
// Refresh data
|
|
queryClient.invalidateQueries({ queryKey: ['admin-contact-submissions'] });
|
|
},
|
|
onError: (error: Error) => {
|
|
handleError(error, { action: 'Merge Tickets' });
|
|
}
|
|
});
|
|
|
|
const handleConfirmMerge = () => {
|
|
if (!primaryTicketId || selectedForMerge.length < 2) return;
|
|
|
|
// Ensure primary is actually in the selected list
|
|
if (!selectedForMerge.includes(primaryTicketId)) {
|
|
handleError(
|
|
new Error('Primary ticket must be one of the selected tickets'),
|
|
{ action: 'Merge Tickets' }
|
|
);
|
|
return;
|
|
}
|
|
|
|
const mergeIds = selectedForMerge.filter(id => id !== primaryTicketId);
|
|
|
|
// Additional validation: ensure we have tickets to merge
|
|
if (mergeIds.length === 0) {
|
|
handleError(
|
|
new Error('No tickets to merge. Please select at least 2 tickets.'),
|
|
{ action: 'Merge Tickets' }
|
|
);
|
|
return;
|
|
}
|
|
|
|
mergeTicketsMutation.mutate({
|
|
primaryId: primaryTicketId,
|
|
mergeIds,
|
|
reason: mergeReason || undefined
|
|
});
|
|
};
|
|
|
|
// Show loading state while roles are being fetched
|
|
if (rolesLoading) {
|
|
return (
|
|
<div className="flex items-center justify-center min-h-screen">
|
|
<p className="text-muted-foreground">Loading...</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Admin-only access check (after loading complete)
|
|
if (!isAdmin()) {
|
|
return (
|
|
<div className="flex items-center justify-center min-h-screen">
|
|
<Card className="max-w-md">
|
|
<CardContent className="pt-6 text-center">
|
|
<AlertCircle className="h-12 w-12 text-destructive mx-auto mb-4" />
|
|
<h2 className="text-xl font-semibold mb-2">Access Denied</h2>
|
|
<p className="text-muted-foreground">
|
|
Email response features are only available to administrators.
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Theme-aware EmailThreadItem component
|
|
function EmailThreadItem({ thread }: { thread: EmailThread }) {
|
|
const isOutbound = thread.direction === 'outbound';
|
|
|
|
return (
|
|
<div
|
|
className={`
|
|
p-4 mb-3 rounded-lg border transition-all duration-200
|
|
${isOutbound
|
|
? 'bg-primary/5 border-primary/20 dark:bg-primary/10 dark:border-primary/30'
|
|
: 'bg-muted/50 border-border dark:bg-muted/30 dark:border-border/50'
|
|
}
|
|
`}
|
|
>
|
|
<div className="flex items-start justify-between mb-2">
|
|
<div className="flex items-center gap-2">
|
|
{isOutbound ? (
|
|
<ArrowUpRight className="h-4 w-4 text-primary" />
|
|
) : (
|
|
<ArrowDownLeft className="h-4 w-4 text-muted-foreground" />
|
|
)}
|
|
<span className="font-medium text-sm">
|
|
{isOutbound ? 'Admin Reply' : thread.from_email}
|
|
</span>
|
|
{isOutbound && (
|
|
<Badge variant="secondary" className="text-xs">Sent</Badge>
|
|
)}
|
|
</div>
|
|
<span className="text-xs text-muted-foreground">
|
|
{format(new Date(thread.created_at), 'MMM d, yyyy h:mm a')}
|
|
</span>
|
|
</div>
|
|
|
|
<div className="text-sm leading-relaxed whitespace-pre-wrap break-words">
|
|
{thread.body_text}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const stats = {
|
|
pending: submissions?.filter((s) => s.status === 'pending' && !s.archived_at).length || 0,
|
|
inProgress: submissions?.filter((s) => s.status === 'in_progress' && !s.archived_at).length || 0,
|
|
resolved: submissions?.filter((s) => s.status === 'resolved' && !s.archived_at).length || 0,
|
|
archived: submissions?.filter((s) => s.archived_at !== null).length || 0,
|
|
total: submissions?.length || 0,
|
|
};
|
|
|
|
return (
|
|
<AdminLayout>
|
|
{/* Header */}
|
|
<div className="mb-8 flex items-start justify-between">
|
|
<div>
|
|
<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>
|
|
<div className="flex items-center gap-2">
|
|
<Button
|
|
variant={mergeMode ? "default" : "outline"}
|
|
size="sm"
|
|
onClick={() => {
|
|
setMergeMode(!mergeMode);
|
|
setSelectedForMerge([]);
|
|
}}
|
|
>
|
|
<Merge className="h-4 w-4 mr-2" />
|
|
{mergeMode ? 'Cancel Merge' : 'Merge Tickets'}
|
|
</Button>
|
|
<Button
|
|
variant={showArchived ? "default" : "outline"}
|
|
onClick={() => setShowArchived(!showArchived)}
|
|
>
|
|
{showArchived ? <ArchiveRestore className="h-4 w-4 mr-2" /> : <Archive className="h-4 w-4 mr-2" />}
|
|
{showArchived ? 'View Active' : 'View Archived'}
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
size="icon"
|
|
onClick={handleRefreshSubmissions}
|
|
disabled={isLoading}
|
|
title="Refresh submissions"
|
|
>
|
|
<RefreshCw className={`h-4 w-4 ${isLoading ? 'animate-spin' : ''}`} />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Stats Cards */}
|
|
<div className="grid grid-cols-1 md:grid-cols-5 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>Archived</CardDescription>
|
|
<CardTitle className="text-3xl">{stats.archived}</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={() => {
|
|
if (!mergeMode) {
|
|
setSelectedSubmission(submission);
|
|
setAdminNotes(submission.admin_notes || '');
|
|
}
|
|
}}
|
|
>
|
|
<CardContent className="p-6">
|
|
<div className="flex items-start justify-between gap-4">
|
|
{mergeMode && (
|
|
<div className="pt-1">
|
|
<Checkbox
|
|
checked={selectedForMerge.includes(submission.id)}
|
|
onCheckedChange={(checked) => {
|
|
setSelectedForMerge(prev =>
|
|
checked
|
|
? [...prev, submission.id]
|
|
: prev.filter(id => id !== submission.id)
|
|
);
|
|
}}
|
|
onClick={(e) => e.stopPropagation()}
|
|
/>
|
|
</div>
|
|
)}
|
|
<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>
|
|
<Badge
|
|
variant="outline"
|
|
className="font-mono cursor-pointer hover:bg-accent transition-colors"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
handleCopyTicket(submission.ticket_number);
|
|
}}
|
|
>
|
|
{copiedTicket === submission.ticket_number ? (
|
|
<><Check className="h-3 w-3 mr-1" /> Copied!</>
|
|
) : (
|
|
<><Copy className="h-3 w-3 mr-1" /> {submission.ticket_number}</>
|
|
)}
|
|
</Badge>
|
|
{getStatusBadge(submission.status)}
|
|
<Badge variant="outline">{getCategoryLabel(submission.category)}</Badge>
|
|
{submission.archived_at && (
|
|
<Badge variant="outline" className="bg-muted">
|
|
<Archive className="h-3 w-3 mr-1" />
|
|
Archived
|
|
</Badge>
|
|
)}
|
|
{submission.merged_ticket_numbers && submission.merged_ticket_numbers.length > 0 && (
|
|
<Badge variant="secondary" className="gap-1">
|
|
<Merge className="h-3 w-3" />
|
|
Consolidated ({submission.merged_ticket_numbers.length})
|
|
</Badge>
|
|
)}
|
|
{submission.response_count > 0 && (
|
|
<Badge variant="secondary" className="text-xs">
|
|
📧 {submission.response_count} {submission.response_count === 1 ? 'reply' : 'replies'}
|
|
</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>
|
|
{submission.last_admin_response_at && (
|
|
<span className="flex items-center gap-1 text-primary">
|
|
<ArrowUpRight className="h-3 w-3" />
|
|
Last reply {format(new Date(submission.last_admin_response_at), 'MMM d')}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<p className="text-sm line-clamp-2">{submission.message}</p>
|
|
</div>
|
|
{!mergeMode && (
|
|
<div className="flex items-center gap-2">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={(e) => handleQuickReply(e, submission)}
|
|
disabled={sendReplyMutation.isPending}
|
|
className="flex items-center gap-1"
|
|
>
|
|
<Reply className="h-4 w-4" />
|
|
Reply
|
|
</Button>
|
|
<ChevronDown className="h-5 w-5 text-muted-foreground" />
|
|
</div>
|
|
)}
|
|
</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>
|
|
)}
|
|
|
|
{/* Floating Merge Button */}
|
|
{mergeMode && selectedForMerge.length >= 2 && (
|
|
<div className="fixed bottom-6 right-6 z-50">
|
|
<Button
|
|
size="lg"
|
|
onClick={() => {
|
|
setPrimaryTicketId(selectedForMerge[0]); // Default to first selected
|
|
setShowMergeDialog(true);
|
|
}}
|
|
className="shadow-lg"
|
|
>
|
|
<Merge className="h-5 w-5 mr-2" />
|
|
Merge Selected ({selectedForMerge.length})
|
|
</Button>
|
|
</div>
|
|
)}
|
|
|
|
{/* Merge Confirmation Dialog */}
|
|
<Dialog open={showMergeDialog} onOpenChange={setShowMergeDialog}>
|
|
<DialogContent className="max-w-2xl">
|
|
<DialogHeader>
|
|
<DialogTitle>Merge Contact Tickets</DialogTitle>
|
|
<DialogDescription>
|
|
Choose a primary ticket to keep. All others will be permanently deleted after their data is merged.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
{/* List selected tickets with radio buttons */}
|
|
<div className="space-y-2">
|
|
{selectedForMerge.map(ticketId => {
|
|
const ticket = submissions?.find(s => s.id === ticketId);
|
|
if (!ticket) return null;
|
|
|
|
return (
|
|
<div key={ticketId} className="flex items-start gap-3 p-3 border rounded">
|
|
<input
|
|
type="radio"
|
|
name="primary"
|
|
value={ticketId}
|
|
checked={primaryTicketId === ticketId}
|
|
onChange={() => setPrimaryTicketId(ticketId)}
|
|
className="mt-1"
|
|
/>
|
|
<div className="flex-1">
|
|
<div className="font-medium">{ticket.ticket_number}</div>
|
|
<div className="text-sm text-muted-foreground">{ticket.subject}</div>
|
|
<div className="text-xs text-muted-foreground mt-1">
|
|
{ticket.email} • {ticket.response_count} admin replies
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{/* Optional merge reason */}
|
|
<div className="space-y-2">
|
|
<Label htmlFor="merge-reason">Reason for merge (optional)</Label>
|
|
<Textarea
|
|
id="merge-reason"
|
|
placeholder="e.g., Duplicate submissions about the same issue"
|
|
value={mergeReason}
|
|
onChange={(e) => setMergeReason(e.target.value)}
|
|
rows={2}
|
|
/>
|
|
</div>
|
|
|
|
{/* Summary Alert */}
|
|
<Alert>
|
|
<AlertTriangle className="h-4 w-4" />
|
|
<AlertDescription>
|
|
<strong>This will:</strong>
|
|
<ul className="list-disc pl-5 mt-2 space-y-1">
|
|
<li>Keep <strong>{submissions?.find(s => s.id === primaryTicketId)?.ticket_number}</strong> active</li>
|
|
<li>Move all email threads to primary ticket</li>
|
|
<li>Consolidate admin notes</li>
|
|
<li><strong className="text-destructive">Permanently delete {selectedForMerge.length - 1} other ticket(s)</strong></li>
|
|
</ul>
|
|
<p className="mt-2 font-semibold">This action cannot be undone.</p>
|
|
</AlertDescription>
|
|
</Alert>
|
|
|
|
<DialogFooter>
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => {
|
|
setShowMergeDialog(false);
|
|
setMergeReason('');
|
|
}}
|
|
>
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
variant="destructive"
|
|
onClick={handleConfirmMerge}
|
|
disabled={!primaryTicketId || mergeTicketsMutation.isPending}
|
|
>
|
|
{mergeTicketsMutation.isPending ? (
|
|
<><Loader2 className="mr-2 h-4 w-4 animate-spin" /> Merging...</>
|
|
) : (
|
|
'Confirm Merge & Delete'
|
|
)}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
{/* Submission Detail Dialog */}
|
|
<Dialog
|
|
open={!!selectedSubmission}
|
|
onOpenChange={(open) => {
|
|
if (!open) {
|
|
setSelectedSubmission(null);
|
|
setAdminNotes('');
|
|
}
|
|
}}
|
|
>
|
|
<DialogContent className="max-w-4xl max-h-[90vh] overflow-hidden flex flex-col">
|
|
{selectedSubmission && (
|
|
<>
|
|
<DialogHeader>
|
|
<DialogTitle className="flex items-center gap-2 flex-wrap">
|
|
<Mail className="h-5 w-5" />
|
|
{selectedSubmission.subject}
|
|
<Badge
|
|
variant="outline"
|
|
className="font-mono cursor-pointer hover:bg-accent transition-colors"
|
|
onClick={() => handleCopyTicket(selectedSubmission.ticket_number)}
|
|
>
|
|
{copiedTicket === selectedSubmission.ticket_number ? (
|
|
<><Check className="h-3 w-3 mr-1" /> Copied!</>
|
|
) : (
|
|
<><Copy className="h-3 w-3 mr-1" /> {selectedSubmission.ticket_number}</>
|
|
)}
|
|
</Badge>
|
|
{selectedSubmission.response_count > 0 && (
|
|
<Badge variant="secondary" className="text-xs">
|
|
📧 {selectedSubmission.response_count} {selectedSubmission.response_count === 1 ? 'reply' : 'replies'}
|
|
</Badge>
|
|
)}
|
|
</DialogTitle>
|
|
<DialogDescription>
|
|
Submitted {format(new Date(selectedSubmission.created_at), 'PPpp')}
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<Tabs value={activeTab} onValueChange={setActiveTab} className="flex-1 overflow-hidden flex flex-col">
|
|
<TabsList className="w-full justify-start">
|
|
<TabsTrigger value="details" className="flex-1">
|
|
Details
|
|
</TabsTrigger>
|
|
<TabsTrigger value="thread" className="flex-1 flex items-center gap-2">
|
|
Email Thread ({emailThreads.length})
|
|
</TabsTrigger>
|
|
{activeTab === 'thread' && (
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={handleRefreshThreads}
|
|
disabled={loadingThreads}
|
|
className="ml-auto"
|
|
>
|
|
<RefreshCw className={`h-3 w-3 ${loadingThreads ? 'animate-spin' : ''}`} />
|
|
</Button>
|
|
)}
|
|
</TabsList>
|
|
|
|
<TabsContent value="details" className="flex-1 overflow-y-auto">
|
|
<div className="space-y-4 p-4">
|
|
{/* Sender Info */}
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<Label>Name</Label>
|
|
<p className="mt-1">{selectedSubmission.name}</p>
|
|
</div>
|
|
<div>
|
|
<Label>Email</Label>
|
|
<p className="mt-1">{selectedSubmission.email}</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* User Context Section */}
|
|
{selectedSubmission.submitter_profile && (
|
|
<div className="border rounded-lg p-4 bg-muted/30">
|
|
<h4 className="font-semibold mb-3 flex items-center gap-2">
|
|
<User className="h-4 w-4" />
|
|
Submitter Context
|
|
</h4>
|
|
<div className="flex items-start gap-4">
|
|
<Avatar className="h-12 w-12">
|
|
{selectedSubmission.submitter_profile.avatar_url && (
|
|
<AvatarImage src={selectedSubmission.submitter_profile.avatar_url} />
|
|
)}
|
|
<AvatarFallback>
|
|
{selectedSubmission.submitter_username?.[0]?.toUpperCase() || 'U'}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
<div className="flex-1 space-y-2">
|
|
<div className="flex items-center gap-2 flex-wrap">
|
|
<span className="font-medium">
|
|
@{selectedSubmission.submitter_username}
|
|
</span>
|
|
{selectedSubmission.submitter_profile.display_name && (
|
|
<span className="text-muted-foreground">
|
|
({selectedSubmission.submitter_profile.display_name})
|
|
</span>
|
|
)}
|
|
<Badge variant="secondary" className="gap-1">
|
|
<Award className="h-3 w-3" />
|
|
{selectedSubmission.submitter_reputation} rep
|
|
</Badge>
|
|
</div>
|
|
{selectedSubmission.submitter_profile.created_at && (
|
|
<div className="text-sm text-muted-foreground">
|
|
Member since {format(new Date(selectedSubmission.submitter_profile.created_at), 'MMM d, yyyy')}
|
|
</div>
|
|
)}
|
|
<div className="flex items-center gap-3 text-sm flex-wrap">
|
|
<span className="flex items-center gap-1">
|
|
<TrendingUp className="h-3 w-3" />
|
|
{selectedSubmission.submitter_profile.ride_count || 0} rides
|
|
</span>
|
|
<span>•</span>
|
|
<span>{selectedSubmission.submitter_profile.coaster_count || 0} coasters</span>
|
|
<span>•</span>
|
|
<span>{selectedSubmission.submitter_profile.park_count || 0} parks</span>
|
|
<span>•</span>
|
|
<span>{selectedSubmission.submitter_profile.review_count || 0} reviews</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Subject & Category */}
|
|
<div className="space-y-2">
|
|
<Label>Category</Label>
|
|
<div className="mt-1">
|
|
<Badge>{getCategoryLabel(selectedSubmission.category)}</Badge>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Message */}
|
|
<div>
|
|
<Label>Message</Label>
|
|
<ScrollArea className="h-40 mt-1 p-3 rounded-md border bg-muted/30">
|
|
<p className="whitespace-pre-wrap text-sm">{selectedSubmission.message}</p>
|
|
</ScrollArea>
|
|
</div>
|
|
|
|
{/* Admin Notes */}
|
|
<div>
|
|
<Label htmlFor="admin-notes">Admin Notes (Internal)</Label>
|
|
<Textarea
|
|
id="admin-notes"
|
|
value={adminNotes}
|
|
onChange={(e) => setAdminNotes(e.target.value)}
|
|
placeholder="Add internal notes about this submission..."
|
|
rows={4}
|
|
className="mt-1"
|
|
/>
|
|
</div>
|
|
|
|
{/* Status Update */}
|
|
<div className="flex items-center gap-4 pt-4 border-t">
|
|
<div className="flex-1">
|
|
<Label>Status</Label>
|
|
<Select
|
|
value={selectedSubmission.status}
|
|
onValueChange={(value) => {
|
|
handleUpdateStatus(value as 'pending' | 'in_progress' | 'resolved' | 'closed');
|
|
}}
|
|
>
|
|
<SelectTrigger>
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<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>
|
|
|
|
<Button
|
|
onClick={() => handleUpdateStatus(selectedSubmission.status)}
|
|
disabled={updateStatusMutation.isPending}
|
|
>
|
|
{updateStatusMutation.isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
|
Save Notes & Status
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Merge History Section */}
|
|
{selectedSubmission.merged_ticket_numbers && selectedSubmission.merged_ticket_numbers.length > 0 && (
|
|
<div className="mt-6 pt-6 border-t">
|
|
<Collapsible>
|
|
<CollapsibleTrigger className="flex items-center gap-2 text-sm font-semibold hover:text-primary transition-colors">
|
|
<Merge className="h-4 w-4" />
|
|
Merge History ({selectedSubmission.merged_ticket_numbers.length} tickets consolidated)
|
|
<ChevronDown className="h-4 w-4 ml-1" />
|
|
</CollapsibleTrigger>
|
|
<CollapsibleContent>
|
|
<div className="mt-3 space-y-1 text-sm text-muted-foreground">
|
|
<p className="mb-2">The following tickets were merged and deleted into this primary ticket:</p>
|
|
{selectedSubmission.merged_ticket_numbers.map(ticketNum => (
|
|
<div key={ticketNum} className="flex items-center gap-2 py-1">
|
|
<XCircle className="h-3 w-3 text-destructive" />
|
|
<span className="font-mono">{ticketNum}</span>
|
|
<span className="text-xs">(deleted)</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</CollapsibleContent>
|
|
</Collapsible>
|
|
</div>
|
|
)}
|
|
|
|
{/* Danger Zone - Archive/Delete */}
|
|
<div className="mt-8 pt-6 border-t border-destructive/20">
|
|
<h4 className="text-sm font-semibold mb-3 text-destructive flex items-center gap-2">
|
|
<AlertTriangle className="h-4 w-4" />
|
|
Danger Zone
|
|
</h4>
|
|
<div className="flex items-center gap-3">
|
|
{!showArchived ? (
|
|
<>
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => archiveSubmissionMutation.mutate(selectedSubmission.id)}
|
|
disabled={archiveSubmissionMutation.isPending}
|
|
className="flex-1"
|
|
>
|
|
{archiveSubmissionMutation.isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
|
<Archive className="mr-2 h-4 w-4" />
|
|
Archive Submission
|
|
</Button>
|
|
<AlertDialog>
|
|
<AlertDialogTrigger asChild>
|
|
<Button
|
|
variant="destructive"
|
|
className="flex-1"
|
|
>
|
|
<Trash2 className="mr-2 h-4 w-4" />
|
|
Permanent Delete
|
|
</Button>
|
|
</AlertDialogTrigger>
|
|
<AlertDialogContent>
|
|
<AlertDialogHeader>
|
|
<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
|
|
<AlertDialogDescription>
|
|
This will permanently delete the contact submission and all associated email threads.
|
|
This action cannot be undone. Consider archiving instead.
|
|
</AlertDialogDescription>
|
|
</AlertDialogHeader>
|
|
<AlertDialogFooter>
|
|
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
|
<AlertDialogAction
|
|
onClick={() => deleteSubmissionMutation.mutate(selectedSubmission.id)}
|
|
className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
|
|
>
|
|
{deleteSubmissionMutation.isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
|
Yes, Delete Permanently
|
|
</AlertDialogAction>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
</>
|
|
) : (
|
|
<Button
|
|
variant="default"
|
|
onClick={() => unarchiveSubmissionMutation.mutate(selectedSubmission.id)}
|
|
disabled={unarchiveSubmissionMutation.isPending}
|
|
className="flex-1"
|
|
>
|
|
{unarchiveSubmissionMutation.isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
|
<ArchiveRestore className="mr-2 h-4 w-4" />
|
|
Restore from Archive
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="thread" className="flex-1 overflow-hidden flex flex-col">
|
|
<div className="flex-1 overflow-y-auto p-4">
|
|
{loadingThreads ? (
|
|
<div className="flex items-center justify-center py-8">
|
|
<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
|
|
</div>
|
|
) : emailThreads.length === 0 ? (
|
|
<div className="text-center py-8 text-muted-foreground">
|
|
<Mail className="h-12 w-12 mx-auto mb-3 opacity-50" />
|
|
<p>No email thread yet. Send the first reply below.</p>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-2">
|
|
{emailThreads.map(thread => (
|
|
<EmailThreadItem key={thread.id} thread={thread} />
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Reply Form */}
|
|
<div className="border-t p-4 bg-background">
|
|
{!showReplyForm ? (
|
|
<Button
|
|
onClick={() => setShowReplyForm(true)}
|
|
className="w-full"
|
|
variant="default"
|
|
>
|
|
<Send className="mr-2 h-4 w-4" />
|
|
Reply via Email
|
|
</Button>
|
|
) : (
|
|
<Card className="border-primary/20">
|
|
<CardContent className="pt-4">
|
|
<div className="mb-3 flex items-center justify-between">
|
|
<Label className="text-sm font-medium">
|
|
Reply to {selectedSubmission.name} ({selectedSubmission.email})
|
|
</Label>
|
|
<Badge variant="outline" className="font-mono">
|
|
{selectedSubmission.ticket_number}
|
|
</Badge>
|
|
</div>
|
|
<div className="text-xs text-muted-foreground mb-3">
|
|
Subject: Re: [{selectedSubmission.ticket_number}] {selectedSubmission.subject}
|
|
</div>
|
|
<Textarea
|
|
value={replyBody}
|
|
onChange={(e) => setReplyBody(e.target.value)}
|
|
placeholder="Type your response here... (Min 10 characters)"
|
|
rows={6}
|
|
className="mb-3 resize-none"
|
|
/>
|
|
|
|
{/* Status Update Dropdown */}
|
|
<div className="mb-3">
|
|
<Label className="text-sm mb-2 block">Update Status (Optional)</Label>
|
|
<Select value={replyStatus} onValueChange={setReplyStatus}>
|
|
<SelectTrigger className="w-full">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="pending">Pending</SelectItem>
|
|
<SelectItem value="in_progress">In Progress</SelectItem>
|
|
<SelectItem value="resolved">Resolved</SelectItem>
|
|
<SelectItem value="closed">Closed</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
{replyStatus !== selectedSubmission.status && (
|
|
<p className="text-xs text-muted-foreground mt-1">
|
|
Status will be updated to <span className="font-medium">{replyStatus.replace('_', ' ')}</span>
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex gap-2">
|
|
<Button
|
|
onClick={() => sendReplyMutation.mutate({
|
|
submissionId: selectedSubmission.id,
|
|
body: replyBody,
|
|
newStatus: replyStatus
|
|
})}
|
|
disabled={sendReplyMutation.isPending || replyBody.length < 10}
|
|
className="flex-1"
|
|
>
|
|
{sendReplyMutation.isPending ? (
|
|
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
|
) : (
|
|
<Send className="mr-2 h-4 w-4" />
|
|
)}
|
|
Send Reply
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => {
|
|
setShowReplyForm(false);
|
|
setReplyBody('');
|
|
}}
|
|
disabled={sendReplyMutation.isPending}
|
|
>
|
|
Cancel
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
</div>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</>
|
|
)}
|
|
</DialogContent>
|
|
</Dialog>
|
|
</AdminLayout>
|
|
);
|
|
}
|