112 lines
3.9 KiB
TypeScript
112 lines
3.9 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
|
|
interface ContactMessage {
|
|
id: string;
|
|
name: string;
|
|
email: string;
|
|
subject: string;
|
|
message: string;
|
|
status: string;
|
|
createdAt: string;
|
|
}
|
|
|
|
export default function AdminContactMessagesPage() {
|
|
const [messages, setMessages] = useState<ContactMessage[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [selectedMessage, setSelectedMessage] = useState<ContactMessage | null>(null);
|
|
|
|
useEffect(() => {
|
|
fetchMessages();
|
|
}, []);
|
|
|
|
const fetchMessages = async () => {
|
|
try {
|
|
const response = await fetch("/api/admin/contact-messages");
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
setMessages(data.messages || []);
|
|
}
|
|
} catch (error) {
|
|
console.error("Failed to fetch messages:", error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<main className="max-w-7xl mx-auto px-6 py-16">
|
|
<div className="mb-8">
|
|
<h1 className="text-4xl font-bold mb-4 bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
|
|
Contact Messages
|
|
</h1>
|
|
<p className="text-lg text-gray-600 dark:text-gray-400">
|
|
Review and respond to customer inquiries
|
|
</p>
|
|
</div>
|
|
|
|
{loading ? (
|
|
<div className="text-center py-12">
|
|
<div className="inline-block w-8 h-8 border-4 border-primary border-r-transparent rounded-full animate-spin"></div>
|
|
<p className="mt-4 text-gray-600 dark:text-gray-400">Loading messages...</p>
|
|
</div>
|
|
) : messages.length === 0 ? (
|
|
<div className="card p-12 text-center">
|
|
<div className="text-6xl mb-4">📧</div>
|
|
<p className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
|
|
No messages yet
|
|
</p>
|
|
<p className="text-gray-600 dark:text-gray-400">
|
|
Customer inquiries will appear here
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<div className="grid gap-6">
|
|
{messages.map((message) => (
|
|
<div key={message.id} className="card p-6 hover:shadow-elevation-2 transition-all">
|
|
<div className="flex justify-between items-start mb-4">
|
|
<div>
|
|
<h3 className="text-xl font-bold text-gray-900 dark:text-white mb-1">
|
|
{message.subject}
|
|
</h3>
|
|
<p className="text-sm text-gray-600 dark:text-gray-400">
|
|
From: {message.name} ({message.email})
|
|
</p>
|
|
<p className="text-xs text-gray-500 dark:text-gray-500 mt-1">
|
|
{new Date(message.createdAt).toLocaleString()}
|
|
</p>
|
|
</div>
|
|
<span
|
|
className={`px-3 py-1 rounded-full text-xs font-semibold ${
|
|
message.status === "NEW"
|
|
? "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200"
|
|
: message.status === "READ"
|
|
? "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200"
|
|
: "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200"
|
|
}`}
|
|
>
|
|
{message.status}
|
|
</span>
|
|
</div>
|
|
<div className="bg-gray-50 dark:bg-slate-800 rounded-lg p-4 mb-4">
|
|
<p className="text-gray-700 dark:text-gray-300 whitespace-pre-wrap">
|
|
{message.message}
|
|
</p>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<a
|
|
href={`mailto:${message.email}?subject=Re: ${message.subject}`}
|
|
className="btn-primary text-sm"
|
|
>
|
|
📧 Reply via Email
|
|
</a>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</main>
|
|
);
|
|
}
|