feat: add admin interface for viewing and managing contact messages, including a new service and sidebar navigation.

src/app/dashboard/contact-messages/page.tsx

@@ -0,0 +1,193 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { contactService, type ContactMessage, type ContactCounts } from '@/services/contact.service';
+
+export default function ContactMessagesPage() {
+  const [messages, setMessages] = useState<ContactMessage[]>([]);
+  const [counts, setCounts] = useState<ContactCounts | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [filter, setFilter] = useState<'all' | 'unread' | 'read'>('all');
+  const [selectedMessage, setSelectedMessage] = useState<ContactMessage | null>(null);
+
+  const fetchData = async () => {
+    try {
+      setLoading(true);
+      const isRead = filter === 'unread' ? false : filter === 'read' ? true : undefined;
+      const [msgs, cnts] = await Promise.all([
+        contactService.getAllMessages(isRead),
+        contactService.getCounts(),
+      ]);
+      setMessages(msgs);
+      setCounts(cnts);
+    } catch (err) {
+      console.error('Failed to fetch contact messages:', err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => { fetchData(); }, [filter]);
+
+  const handleMarkAsRead = async (id: string) => {
+    try {
+      await contactService.markAsRead(id);
+      setMessages(prev => prev.map(m => m.id === id ? { ...m, isRead: true } : m));
+      setCounts(prev => prev ? { ...prev, unread: Math.max(0, prev.unread - 1) } : prev);
+      if (selectedMessage?.id === id) setSelectedMessage(prev => prev ? { ...prev, isRead: true } : prev);
+    } catch (err) {
+      console.error('Failed to mark as read:', err);
+    }
+  };
+
+  const handleDelete = async (id: string) => {
+    if (!confirm('Delete this message?')) return;
+    try {
+      await contactService.deleteMessage(id);
+      setMessages(prev => prev.filter(m => m.id !== id));
+      if (selectedMessage?.id === id) setSelectedMessage(null);
+      const cnts = await contactService.getCounts();
+      setCounts(cnts);
+    } catch (err) {
+      console.error('Failed to delete:', err);
+    }
+  };
+
+  const formatDate = (dateStr: string) => {
+    return new Date(dateStr).toLocaleDateString('en-US', {
+      month: 'short', day: 'numeric', year: 'numeric', hour: '2-digit', minute: '2-digit',
+    });
+  };
+
+  return (
+    <div>
+      <h1 className="text-2xl font-bold text-gray-900 mb-6">Contact Messages</h1>
+
+      {/* Counts */}
+      {counts && (
+        <div className="grid grid-cols-2 gap-4 mb-6">
+          <div className="bg-gray-50 rounded-lg p-4 border border-gray-200">
+            <p className="text-sm text-gray-600">Total</p>
+            <p className="text-2xl font-bold text-gray-900">{counts.total}</p>
+          </div>
+          <div className="bg-yellow-50 rounded-lg p-4 border border-gray-200">
+            <p className="text-sm text-gray-600">Unread</p>
+            <p className="text-2xl font-bold text-gray-900">{counts.unread}</p>
+          </div>
+        </div>
+      )}
+
+      {/* Filter */}
+      <div className="mb-4 flex gap-2">
+        {(['all', 'unread', 'read'] as const).map(f => (
+          <button
+            key={f}
+            onClick={() => setFilter(f)}
+            className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+              filter === f ? 'bg-[#00293d] text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+            }`}
+          >
+            {f.charAt(0).toUpperCase() + f.slice(1)}
+          </button>
+        ))}
+      </div>
+
+      {loading ? (
+        <div className="flex justify-center py-12">
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
+        </div>
+      ) : messages.length === 0 ? (
+        <div className="text-center py-12 bg-white rounded-lg border border-gray-200">
+          <p className="text-gray-500">No contact messages found</p>
+        </div>
+      ) : (
+        <div className="bg-white rounded-lg shadow overflow-hidden">
+          <table className="min-w-full divide-y divide-gray-200">
+            <thead className="bg-gray-50">
+              <tr>
+                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Name</th>
+                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Email</th>
+                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Message</th>
+                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Date</th>
+                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Actions</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-gray-200">
+              {messages.map(msg => (
+                <tr key={msg.id} className={`hover:bg-gray-50 ${!msg.isRead ? 'bg-yellow-50/50' : ''}`}>
+                  <td className="px-4 py-3">
+                    <div className="flex items-center gap-2">
+                      {!msg.isRead && <span className="w-2 h-2 bg-[#e58625] rounded-full flex-shrink-0" />}
+                      <span className="text-sm font-medium text-gray-900">{msg.name}</span>
+                    </div>
+                  </td>
+                  <td className="px-4 py-3 text-sm text-gray-500">{msg.email}</td>
+                  <td className="px-4 py-3 text-sm text-gray-700 max-w-[250px] truncate">{msg.message}</td>
+                  <td className="px-4 py-3 text-sm text-gray-500 whitespace-nowrap">{formatDate(msg.createdAt)}</td>
+                  <td className="px-4 py-3">
+                    <div className="flex items-center gap-2">
+                      <button onClick={() => setSelectedMessage(msg)} className="text-sm text-blue-600 hover:text-blue-800">View</button>
+                      {!msg.isRead && (
+                        <button onClick={() => handleMarkAsRead(msg.id)} className="text-sm text-green-600 hover:text-green-800">Read</button>
+                      )}
+                      <button onClick={() => handleDelete(msg.id)} className="text-sm text-red-600 hover:text-red-800">Delete</button>
+                    </div>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+
+      {/* View Modal */}
+      {selectedMessage && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <div className="bg-white rounded-lg shadow-xl max-w-lg w-full mx-4">
+            <div className="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
+              <h3 className="text-lg font-semibold text-gray-900">Contact Message</h3>
+              <button onClick={() => setSelectedMessage(null)} className="text-gray-400 hover:text-gray-600 text-xl">&times;</button>
+            </div>
+            <div className="px-6 py-4 space-y-3">
+              <div>
+                <p className="text-sm font-medium text-gray-700">Name</p>
+                <p className="text-sm text-gray-900">{selectedMessage.name}</p>
+              </div>
+              <div>
+                <p className="text-sm font-medium text-gray-700">Email</p>
+                <p className="text-sm text-gray-900">{selectedMessage.email}</p>
+              </div>
+              {selectedMessage.phone && (
+                <div>
+                  <p className="text-sm font-medium text-gray-700">Phone</p>
+                  <p className="text-sm text-gray-900">{selectedMessage.phone}</p>
+                </div>
+              )}
+              <div>
+                <p className="text-sm font-medium text-gray-700">Message</p>
+                <p className="text-sm text-gray-900 whitespace-pre-wrap">{selectedMessage.message}</p>
+              </div>
+              <div>
+                <p className="text-sm font-medium text-gray-700">Received</p>
+                <p className="text-sm text-gray-900">{formatDate(selectedMessage.createdAt)}</p>
+              </div>
+            </div>
+            <div className="px-6 py-4 border-t border-gray-200 flex justify-end gap-2">
+              {!selectedMessage.isRead && (
+                <button
+                  onClick={() => handleMarkAsRead(selectedMessage.id)}
+                  className="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 text-sm"
+                >
+                  Mark as Read
+                </button>
+              )}
+              <button onClick={() => setSelectedMessage(null)} className="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 text-sm">
+                Close
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

src/components/Sidebar.tsx

@@ -91,6 +91,20 @@ const menuItems = [
       </svg>
     ),
   },
+  {
+    name: 'Contact Messages',
+    href: '/dashboard/contact-messages',
+    icon: (
+      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+        />
+      </svg>
+    ),
+  },
   {
     name: 'User Reports',
     href: '/dashboard/reports',

src/services/contact.service.ts

@@ -0,0 +1,41 @@
+import api, { ApiResponse } from './api';
+
+export interface ContactMessage {
+  id: string;
+  name: string;
+  email: string;
+  phone: string | null;
+  message: string;
+  isRead: boolean;
+  createdAt: string;
+}
+
+export interface ContactCounts {
+  total: number;
+  unread: number;
+}
+
+class ContactService {
+  async getAllMessages(isRead?: boolean): Promise<ContactMessage[]> {
+    const params: Record<string, string> = {};
+    if (isRead !== undefined) params.isRead = String(isRead);
+    const response = await api.get<ApiResponse<ContactMessage[]>>('/contact/admin/all', { params });
+    return response.data.data;
+  }
+
+  async getCounts(): Promise<ContactCounts> {
+    const response = await api.get<ApiResponse<ContactCounts>>('/contact/admin/counts');
+    return response.data.data;
+  }
+
+  async markAsRead(id: string): Promise<ContactMessage> {
+    const response = await api.patch<ApiResponse<ContactMessage>>(`/contact/admin/${id}/read`);
+    return response.data.data;
+  }
+
+  async deleteMessage(id: string): Promise<void> {
+    await api.delete(`/contact/admin/${id}`);
+  }
+}
+
+export const contactService = new ContactService();