first commit
This commit is contained in:
Michaël
198
frontend/src/app/admin/contacts/page.tsx
Normal file
198
frontend/src/app/admin/contacts/page.tsx
Normal file
@@ -0,0 +1,198 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useLanguage } from '@/context/LanguageContext';
|
||||
import { contactsApi, Contact } from '@/lib/api';
|
||||
import Card from '@/components/ui/Card';
|
||||
import Button from '@/components/ui/Button';
|
||||
import { EnvelopeIcon, EnvelopeOpenIcon, CheckIcon } from '@heroicons/react/24/outline';
|
||||
import toast from 'react-hot-toast';
|
||||
|
||||
export default function AdminContactsPage() {
|
||||
const { t, locale } = useLanguage();
|
||||
const [contacts, setContacts] = useState<Contact[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [statusFilter, setStatusFilter] = useState<string>('');
|
||||
const [selectedContact, setSelectedContact] = useState<Contact | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
loadContacts();
|
||||
}, [statusFilter]);
|
||||
|
||||
const loadContacts = async () => {
|
||||
try {
|
||||
const { contacts } = await contactsApi.getAll(statusFilter || undefined);
|
||||
setContacts(contacts);
|
||||
} catch (error) {
|
||||
toast.error('Failed to load contacts');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleStatusChange = async (id: string, status: string) => {
|
||||
try {
|
||||
await contactsApi.updateStatus(id, status);
|
||||
toast.success('Status updated');
|
||||
loadContacts();
|
||||
if (selectedContact?.id === id) {
|
||||
setSelectedContact({ ...selectedContact, status: status as any });
|
||||
}
|
||||
} catch (error) {
|
||||
toast.error('Failed to update status');
|
||||
}
|
||||
};
|
||||
|
||||
const formatDate = (dateStr: string) => {
|
||||
return new Date(dateStr).toLocaleDateString(locale === 'es' ? 'es-ES' : 'en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
});
|
||||
};
|
||||
|
||||
const getStatusBadge = (status: string) => {
|
||||
const styles: Record<string, string> = {
|
||||
new: 'badge-info',
|
||||
read: 'badge-warning',
|
||||
replied: 'badge-success',
|
||||
};
|
||||
return <span className={`badge ${styles[status] || 'badge-gray'}`}>{status}</span>;
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<div className="animate-spin w-8 h-8 border-4 border-primary-yellow border-t-transparent rounded-full" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h1 className="text-2xl font-bold text-primary-dark">{t('admin.nav.contacts')}</h1>
|
||||
</div>
|
||||
|
||||
{/* Filters */}
|
||||
<Card className="p-4 mb-6">
|
||||
<div className="flex flex-wrap gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1">Status</label>
|
||||
<select
|
||||
value={statusFilter}
|
||||
onChange={(e) => setStatusFilter(e.target.value)}
|
||||
className="px-4 py-2 rounded-btn border border-secondary-light-gray min-w-[150px]"
|
||||
>
|
||||
<option value="">All</option>
|
||||
<option value="new">New</option>
|
||||
<option value="read">Read</option>
|
||||
<option value="replied">Replied</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
{/* Messages List */}
|
||||
<div className="lg:col-span-1">
|
||||
<Card className="divide-y divide-secondary-light-gray max-h-[600px] overflow-y-auto">
|
||||
{contacts.length === 0 ? (
|
||||
<div className="p-8 text-center text-gray-500">
|
||||
<EnvelopeIcon className="w-12 h-12 mx-auto mb-2 text-gray-300" />
|
||||
<p>No messages</p>
|
||||
</div>
|
||||
) : (
|
||||
contacts.map((contact) => (
|
||||
<button
|
||||
key={contact.id}
|
||||
onClick={() => {
|
||||
setSelectedContact(contact);
|
||||
if (contact.status === 'new') {
|
||||
handleStatusChange(contact.id, 'read');
|
||||
}
|
||||
}}
|
||||
className={`w-full text-left p-4 hover:bg-gray-50 transition-colors ${
|
||||
selectedContact?.id === contact.id ? 'bg-secondary-gray' : ''
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div className="flex items-center gap-2">
|
||||
{contact.status === 'new' ? (
|
||||
<EnvelopeIcon className="w-4 h-4 text-secondary-blue" />
|
||||
) : (
|
||||
<EnvelopeOpenIcon className="w-4 h-4 text-gray-400" />
|
||||
)}
|
||||
<span className={`font-medium text-sm ${contact.status === 'new' ? 'text-primary-dark' : 'text-gray-600'}`}>
|
||||
{contact.name}
|
||||
</span>
|
||||
</div>
|
||||
{getStatusBadge(contact.status)}
|
||||
</div>
|
||||
<p className="mt-1 text-xs text-gray-500">{contact.email}</p>
|
||||
<p className="mt-1 text-sm text-gray-600 truncate">{contact.message}</p>
|
||||
<p className="mt-2 text-xs text-gray-400">{formatDate(contact.createdAt)}</p>
|
||||
</button>
|
||||
))
|
||||
)}
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Message Detail */}
|
||||
<div className="lg:col-span-2">
|
||||
<Card className="p-6 min-h-[400px]">
|
||||
{selectedContact ? (
|
||||
<div>
|
||||
<div className="flex items-start justify-between mb-6">
|
||||
<div>
|
||||
<h2 className="text-xl font-bold">{selectedContact.name}</h2>
|
||||
<a
|
||||
href={`mailto:${selectedContact.email}`}
|
||||
className="text-secondary-blue hover:underline"
|
||||
>
|
||||
{selectedContact.email}
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{selectedContact.status !== 'replied' && (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => handleStatusChange(selectedContact.id, 'replied')}
|
||||
>
|
||||
<CheckIcon className="w-4 h-4 mr-1" />
|
||||
Mark as Replied
|
||||
</Button>
|
||||
)}
|
||||
<a href={`mailto:${selectedContact.email}`}>
|
||||
<Button size="sm">
|
||||
Reply
|
||||
</Button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-secondary-light-gray pt-6">
|
||||
<p className="text-sm text-gray-500 mb-2">
|
||||
Received: {formatDate(selectedContact.createdAt)}
|
||||
</p>
|
||||
<div className="prose prose-sm max-w-none">
|
||||
<p className="whitespace-pre-wrap text-gray-700">{selectedContact.message}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center justify-center h-full text-gray-500">
|
||||
<div className="text-center">
|
||||
<EnvelopeIcon className="w-16 h-16 mx-auto mb-4 text-gray-300" />
|
||||
<p>Select a message to view</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user