Fix email signature preview

src/App.tsx

@@ -54,6 +54,7 @@ const AdminUsers = lazy(() => import("./pages/AdminUsers"));
 const AdminBlog = lazy(() => import("./pages/AdminBlog"));
 const AdminSettings = lazy(() => import("./pages/AdminSettings"));
 const AdminContact = lazy(() => import("./pages/admin/AdminContact"));
+const AdminEmailSettings = lazy(() => import("./pages/admin/AdminEmailSettings"));
 
 // User routes (lazy-loaded)
 const Profile = lazy(() => import("./pages/Profile"));
@@ -136,6 +137,7 @@ function AppContent() {
                 <Route path="/admin/blog" element={<AdminBlog />} />
                 <Route path="/admin/settings" element={<AdminSettings />} />
                 <Route path="/admin/contact" element={<AdminContact />} />
+                <Route path="/admin/email-settings" element={<AdminEmailSettings />} />
                 
                 {/* Utility routes - lazy loaded */}
                 <Route path="/force-logout" element={<ForceLogout />} />

src/components/layout/AdminSidebar.tsx

@@ -1,4 +1,4 @@
-import { LayoutDashboard, FileText, Flag, Users, Settings, ArrowLeft, ScrollText, BookOpen, Inbox } from 'lucide-react';
+import { LayoutDashboard, FileText, Flag, Users, Settings, ArrowLeft, ScrollText, BookOpen, Inbox, Mail } from 'lucide-react';
 import { NavLink } from 'react-router-dom';
 import { useUserRole } from '@/hooks/useUserRole';
 import { useSidebar } from '@/hooks/useSidebar';
@@ -62,6 +62,10 @@ export function AdminSidebar() {
       title: 'Settings',
       url: '/admin/settings',
       icon: Settings,
+    }, {
+      title: 'Email Settings',
+      url: '/admin/email-settings',
+      icon: Mail,
     }] : []),
   ];
 

src/integrations/supabase/types.ts

@@ -498,6 +498,13 @@ export type Database = {
             referencedRelation: "contact_submissions"
             referencedColumns: ["id"]
           },
+          {
+            foreignKeyName: "fk_submission_cascade"
+            columns: ["submission_id"]
+            isOneToOne: false
+            referencedRelation: "contact_submissions"
+            referencedColumns: ["id"]
+          },
         ]
       }
       contact_rate_limits: {
@@ -524,6 +531,8 @@ export type Database = {
       contact_submissions: {
         Row: {
           admin_notes: string | null
+          archived_at: string | null
+          archived_by: string | null
           assigned_to: string | null
           category: string
           created_at: string
@@ -549,6 +558,8 @@ export type Database = {
         }
         Insert: {
           admin_notes?: string | null
+          archived_at?: string | null
+          archived_by?: string | null
           assigned_to?: string | null
           category: string
           created_at?: string
@@ -574,6 +585,8 @@ export type Database = {
         }
         Update: {
           admin_notes?: string | null
+          archived_at?: string | null
+          archived_by?: string | null
           assigned_to?: string | null
           category?: string
           created_at?: string

src/pages/admin/AdminContact.tsx

@@ -21,6 +21,10 @@ import {
   User,
   Award,
   TrendingUp,
+  Archive,
+  ArchiveRestore,
+  Trash2,
+  AlertTriangle,
 } from 'lucide-react';
 import { supabase } from '@/integrations/supabase/client';
 import { Button } from '@/components/ui/button';
@@ -48,6 +52,17 @@ import {
   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';
@@ -93,6 +108,8 @@ interface ContactSubmission {
   last_admin_response_at: string | null;
   response_count: number;
   ticket_number: string;
+  archived_at: string | null;
+  archived_by: string | null;
 }
 
 interface EmailThread {
@@ -123,16 +140,24 @@ export default function AdminContact() {
   const [copiedTicket, setCopiedTicket] = useState<string | null>(null);
   const [activeTab, setActiveTab] = useState<string>('details');
   const [replyStatus, setReplyStatus] = useState<string>('');
+  const [showArchived, setShowArchived] = useState(false);
 
   // Fetch contact submissions
   const { data: submissions, isLoading } = useQuery({
-    queryKey: ['admin-contact-submissions', statusFilter, categoryFilter, searchQuery],
+    queryKey: ['admin-contact-submissions', statusFilter, categoryFilter, searchQuery, showArchived],
     queryFn: async () => {
       let query = supabase
         .from('contact_submissions')
         .select('*')
         .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);
       }
@@ -290,6 +315,73 @@ export default function AdminContact() {
     },
   });
 
+  // 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;
 
@@ -426,9 +518,10 @@ export default function AdminContact() {
   }
 
   const stats = {
-    pending: submissions?.filter((s) => s.status === 'pending').length || 0,
+    pending: submissions?.filter((s) => s.status === 'pending' && !s.archived_at).length || 0,
-    inProgress: submissions?.filter((s) => s.status === 'in_progress').length || 0,
+    inProgress: submissions?.filter((s) => s.status === 'in_progress' && !s.archived_at).length || 0,
-    resolved: submissions?.filter((s) => s.status === 'resolved').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,
   };
 
@@ -442,19 +535,28 @@ export default function AdminContact() {
             Manage and respond to user contact form submissions
           </p>
         </div>
-        <Button
+        <div className="flex items-center gap-2">
-          variant="outline"
+          <Button
-          size="icon"
+            variant={showArchived ? "default" : "outline"}
-          onClick={handleRefreshSubmissions}
+            onClick={() => setShowArchived(!showArchived)}
-          disabled={isLoading}
+          >
-          title="Refresh submissions"
+            {showArchived ? <ArchiveRestore className="h-4 w-4 mr-2" /> : <Archive className="h-4 w-4 mr-2" />}
-        >
+            {showArchived ? 'View Active' : 'View Archived'}
-          <RefreshCw className={`h-4 w-4 ${isLoading ? 'animate-spin' : ''}`} />
+          </Button>
-        </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-4 gap-4 mb-8">
+      <div className="grid grid-cols-1 md:grid-cols-5 gap-4 mb-8">
         <Card>
           <CardHeader className="pb-3">
             <CardDescription>Pending</CardDescription>
@@ -473,6 +575,12 @@ export default function AdminContact() {
             <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>
@@ -574,6 +682,12 @@ export default function AdminContact() {
                       </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.response_count > 0 && (
                         <Badge variant="secondary" className="text-xs">
                           📧 {submission.response_count} {submission.response_count === 1 ? 'reply' : 'replies'}
@@ -815,6 +929,71 @@ export default function AdminContact() {
                         Save Notes & Status
                       </Button>
                     </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>
 

src/pages/admin/AdminEmailSettings.tsx

@@ -0,0 +1,199 @@
+import { useState, useEffect } from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { Save, Loader2, Mail } from 'lucide-react';
+import { supabase } from '@/integrations/supabase/client';
+import { Button } from '@/components/ui/button';
+import { Textarea } from '@/components/ui/textarea';
+import { Label } from '@/components/ui/label';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { AdminLayout } from '@/components/layout/AdminLayout';
+import { useUserRole } from '@/hooks/useUserRole';
+import { handleError, handleSuccess } from '@/lib/errorHandler';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+
+export default function AdminEmailSettings() {
+  const queryClient = useQueryClient();
+  const { isSuperuser, loading: rolesLoading } = useUserRole();
+  const [signature, setSignature] = useState('');
+
+  // Fetch email signature
+  const { data: signatureSetting, isLoading } = useQuery({
+    queryKey: ['admin-email-signature'],
+    queryFn: async () => {
+      const { data, error } = await supabase
+        .from('admin_settings')
+        .select('setting_value')
+        .eq('setting_key', 'email.signature')
+        .single();
+
+      if (error && error.code !== 'PGRST116') { // PGRST116 = no rows returned
+        throw error;
+      }
+
+      // Type guard for the setting value
+      const settingValue = data?.setting_value as { signature?: string } | null;
+      return settingValue?.signature || '';
+    },
+  });
+
+  useEffect(() => {
+    if (signatureSetting !== undefined) {
+      setSignature(signatureSetting);
+    }
+  }, [signatureSetting]);
+
+  // Update email signature mutation
+  const updateSignatureMutation = useMutation({
+    mutationFn: async (newSignature: string) => {
+      const { data: existing } = await supabase
+        .from('admin_settings')
+        .select('id')
+        .eq('setting_key', 'email.signature')
+        .single();
+
+      if (existing) {
+        // Update existing
+        const { error } = await supabase
+          .from('admin_settings')
+          .update({
+            setting_value: { signature: newSignature },
+            updated_at: new Date().toISOString(),
+          })
+          .eq('setting_key', 'email.signature');
+
+        if (error) throw error;
+      } else {
+        // Insert new
+        const { error } = await supabase
+          .from('admin_settings')
+          .insert({
+            setting_key: 'email.signature',
+            setting_value: { signature: newSignature },
+            category: 'email',
+            description: 'Email signature automatically appended to all contact submission replies',
+          });
+
+        if (error) throw error;
+      }
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['admin-email-signature'] });
+      handleSuccess('Saved', 'Email signature has been updated successfully');
+    },
+    onError: (error) => {
+      handleError(error, { action: 'update_email_signature' });
+    },
+  });
+
+  const handleSave = () => {
+    updateSignatureMutation.mutate(signature);
+  };
+
+  // Show loading state while roles are being fetched
+  if (rolesLoading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  // Superuser-only access check
+  if (!isSuperuser()) {
+    return (
+      <AdminLayout>
+        <div className="flex items-center justify-center min-h-[60vh]">
+          <Card className="max-w-md">
+            <CardContent className="pt-6 text-center">
+              <Mail 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 settings can only be managed by superusers.
+              </p>
+            </CardContent>
+          </Card>
+        </div>
+      </AdminLayout>
+    );
+  }
+
+  return (
+    <AdminLayout>
+      <div className="mb-8">
+        <h1 className="text-4xl font-bold mb-2">Email Settings</h1>
+        <p className="text-muted-foreground">
+          Configure automatic email signature for contact submission replies
+        </p>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Mail className="h-5 w-5" />
+            Email Signature
+          </CardTitle>
+          <CardDescription>
+            This signature will be automatically appended to all email replies sent to users from the Contact Submissions page.
+            The signature will be added after a separator line.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <Alert>
+            <AlertDescription>
+              <strong>Preview:</strong> The signature will appear as:
+              <div className="mt-2 p-3 bg-muted rounded-md text-sm font-mono whitespace-pre-wrap">
+                [Your reply message]
+                {'\n\n'}---
+                {'\n'}[Admin Display Name]
+                {signature ? `\n${signature}` : '\n[No signature set]'}
+              </div>
+            </AlertDescription>
+          </Alert>
+
+          <div className="space-y-2">
+            <Label htmlFor="signature">Signature Text</Label>
+            <Textarea
+              id="signature"
+              value={signature}
+              onChange={(e) => setSignature(e.target.value)}
+              placeholder="Best regards,&#10;The ThrillWiki Team&#10;&#10;Need help? Reply to this email or visit https://thrillwiki.com/contact"
+              rows={8}
+              disabled={isLoading}
+            />
+            <p className="text-xs text-muted-foreground">
+              Use plain text. Line breaks will be preserved. You can include team name, contact info, or helpful links.
+            </p>
+          </div>
+
+          <div className="flex items-center gap-3 pt-4">
+            <Button
+              onClick={handleSave}
+              disabled={updateSignatureMutation.isPending || isLoading}
+            >
+              {updateSignatureMutation.isPending && (
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              )}
+              <Save className="mr-2 h-4 w-4" />
+              Save Signature
+            </Button>
+            {signature !== signatureSetting && (
+              <Button
+                variant="outline"
+                onClick={() => setSignature(signatureSetting || '')}
+                disabled={updateSignatureMutation.isPending}
+              >
+                Reset Changes
+              </Button>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+    </AdminLayout>
+  );
+}

supabase/functions/send-admin-email-reply/index.ts

@@ -67,6 +67,15 @@ const handler = async (req: Request): Promise<Response> => {
       }, 400, corsHeaders);
     }
 
+    // Fetch admin's profile for signature
+    const { data: adminProfile } = await supabase
+      .from('profiles')
+      .select('display_name, username')
+      .eq('user_id', user.id)
+      .single();
+
+    const adminName = adminProfile?.display_name || adminProfile?.username || 'ThrillWiki Team';
+
     // Fetch submission
     const { data: submission, error: fetchError } = await supabase
       .from('contact_submissions')
@@ -78,6 +87,20 @@ const handler = async (req: Request): Promise<Response> => {
       return createErrorResponse({ message: 'Submission not found' }, 404, corsHeaders);
     }
 
+    // Fetch email signature from admin settings
+    const { data: signatureSetting } = await supabase
+      .from('admin_settings')
+      .select('setting_value')
+      .eq('setting_key', 'email.signature')
+      .single();
+
+    const emailSignature = signatureSetting?.setting_value?.signature || '';
+    
+    // Build signature with admin name + global signature
+    const finalReplyBody = emailSignature 
+      ? `${replyBody}\n\n---\n${adminName}\n${emailSignature}`
+      : `${replyBody}\n\n---\n${adminName}`;
+
     // Rate limiting: max 10 replies per hour
     const oneHourAgo = new Date(Date.now() - 60 * 60 * 1000).toISOString();
     const { count } = await supabase
@@ -124,7 +147,7 @@ const handler = async (req: Request): Promise<Response> => {
         from: 'ThrillWiki Admin <admin@thrillwiki.com>',
         to: `${submission.name} <${submission.email}>`,
         subject: finalSubject,
-        text: replyBody,
+        text: finalReplyBody,
         headers: {
           'Message-ID': messageId,
           'In-Reply-To': inReplyTo,
@@ -156,7 +179,7 @@ const handler = async (req: Request): Promise<Response> => {
         from_email: 'admin@thrillwiki.com',
         to_email: submission.email,
         subject: finalSubject,
-        body_text: replyBody,
+        body_text: finalReplyBody,
         direction: 'outbound',
         sent_by: user.id,
         metadata: {

supabase/migrations/20251028193251_0c37046b-3d85-4d8a-a6a4-b24d79ce5b3b.sql

@@ -0,0 +1,31 @@
+-- Add archive support columns to contact_submissions
+ALTER TABLE contact_submissions
+  ADD COLUMN archived_at timestamp with time zone,
+  ADD COLUMN archived_by uuid REFERENCES auth.users(id);
+
+-- Add comments for clarity
+COMMENT ON COLUMN contact_submissions.archived_at IS 'Timestamp when submission was archived (soft deleted)';
+COMMENT ON COLUMN contact_submissions.archived_by IS 'User who archived this submission';
+
+-- Index for performance on archived queries
+CREATE INDEX idx_contact_submissions_archived ON contact_submissions(archived_at) 
+  WHERE archived_at IS NOT NULL;
+
+-- Add FK constraint to ensure email threads are deleted with submission (cascade)
+ALTER TABLE contact_email_threads
+  ADD CONSTRAINT fk_submission_cascade
+  FOREIGN KEY (submission_id)
+  REFERENCES contact_submissions(id)
+  ON DELETE CASCADE;
+
+-- Add comment on constraint
+COMMENT ON CONSTRAINT fk_submission_cascade ON contact_email_threads IS 
+  'Cascade delete email threads when parent submission is deleted';
+
+-- Allow moderators to DELETE contact submissions (hard delete with MFA)
+CREATE POLICY "Moderators can delete contact submissions" ON contact_submissions
+  FOR DELETE
+  TO authenticated
+  USING (
+    is_moderator(auth.uid()) AND has_aal2()
+  );