Initial commit

app/admin/contact-messages/page.tsx

@@ -0,0 +1,111 @@
+"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>
+  );
+}