Update Dashboard: Rename DNS Management to Domains and add domain list UI

frontend/src/pages/Dashboard.jsx

@@ -1,7 +1,7 @@
 /**
  * Customer Dashboard - Main dashboard with sidebar navigation
  */
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useAuth } from '../context/AuthContext';
 import {
@@ -12,7 +12,143 @@ import {
   ShieldCheckIcon,
   Cog6ToothIcon,
   ArrowRightOnRectangleIcon,
+  PlusIcon,
+  CheckCircleIcon,
+  XCircleIcon,
+  ClockIcon,
 } from '@heroicons/react/24/outline';
+import api from '../services/api';
+
+// Domains Content Component
+const DomainsContent = ({ customer }) => {
+  const [domains, setDomains] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [showAddModal, setShowAddModal] = useState(false);
+
+  useEffect(() => {
+    fetchDomains();
+  }, []);
+
+  const fetchDomains = async () => {
+    try {
+      const response = await api.get('/api/customer/domains');
+      setDomains(response.data.domains || []);
+    } catch (error) {
+      console.error('Failed to fetch domains:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const getStatusBadge = (status) => {
+    const badges = {
+      active: { color: 'bg-green-100 text-green-800', icon: CheckCircleIcon, text: 'Active' },
+      pending: { color: 'bg-yellow-100 text-yellow-800', icon: ClockIcon, text: 'Pending' },
+      failed: { color: 'bg-red-100 text-red-800', icon: XCircleIcon, text: 'Failed' },
+    };
+    const badge = badges[status] || badges.pending;
+    const Icon = badge.icon;
+
+    return (
+      <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${badge.color}`}>
+        <Icon className="w-4 h-4 mr-1" />
+        {badge.text}
+      </span>
+    );
+  };
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center py-12">
+        <div className="text-center">
+          <div className="w-16 h-16 border-4 border-primary-500 border-t-transparent rounded-full animate-spin mx-auto"></div>
+          <p className="mt-4 text-gray-600">Loading domains...</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Header with Add Button */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h2 className="text-2xl font-bold text-gray-900">Your Domains</h2>
+          <p className="text-sm text-gray-600 mt-1">
+            {domains.length} of {customer?.max_domains} domains used
+          </p>
+        </div>
+        <button
+          onClick={() => setShowAddModal(true)}
+          disabled={domains.length >= customer?.max_domains}
+          className="btn-primary inline-flex items-center disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          <PlusIcon className="w-5 h-5 mr-2" />
+          Add Domain
+        </button>
+      </div>
+
+      {/* Domain List */}
+      {domains.length === 0 ? (
+        <div className="card text-center py-12">
+          <GlobeAltIcon className="w-16 h-16 text-gray-400 mx-auto mb-4" />
+          <h3 className="text-lg font-medium text-gray-900 mb-2">No domains yet</h3>
+          <p className="text-gray-600 mb-6">
+            Get started by adding your first domain
+          </p>
+          <button
+            onClick={() => setShowAddModal(true)}
+            className="btn-primary inline-flex items-center"
+          >
+            <PlusIcon className="w-5 h-5 mr-2" />
+            Add Your First Domain
+          </button>
+        </div>
+      ) : (
+        <div className="grid gap-4">
+          {domains.map((domain) => (
+            <div key={domain.id} className="card hover:shadow-lg transition-shadow">
+              <div className="flex items-center justify-between">
+                <div className="flex-1">
+                  <div className="flex items-center gap-3">
+                    <h3 className="text-lg font-semibold text-gray-900">
+                      {domain.domain_name}
+                    </h3>
+                    {getStatusBadge(domain.status)}
+                  </div>
+                  <div className="mt-2 flex items-center gap-4 text-sm text-gray-600">
+                    <span>DNS: {domain.dns_configured ? '✓ Configured' : '✗ Not configured'}</span>
+                    <span>SSL: {domain.ssl_configured ? '✓ Active' : '✗ Pending'}</span>
+                    {domain.lb_ip && <span>IP: {domain.lb_ip}</span>}
+                  </div>
+                </div>
+                <button className="btn-secondary">
+                  Manage
+                </button>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Add Domain Modal - Placeholder */}
+      {showAddModal && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <div className="bg-white rounded-lg p-6 max-w-2xl w-full mx-4">
+            <h3 className="text-xl font-bold mb-4">Add New Domain</h3>
+            <p className="text-gray-600 mb-4">Domain wizard coming soon...</p>
+            <button
+              onClick={() => setShowAddModal(false)}
+              className="btn-secondary"
+            >
+              Close
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
 
 const Dashboard = () => {
   const { user, customer, logout } = useAuth();
@@ -26,7 +162,7 @@ const Dashboard = () => {
 
   const menuItems = [
     { id: 'overview', name: 'Overview', icon: HomeIcon },
-    { id: 'dns', name: 'DNS Management', icon: GlobeAltIcon },
+    { id: 'domains', name: 'Domains', icon: GlobeAltIcon },
     { id: 'containers', name: 'Containers', icon: ServerIcon },
     { id: 'network', name: 'Network', icon: WifiIcon },
     { id: 'security', name: 'Security', icon: ShieldCheckIcon },
@@ -157,10 +293,8 @@ const Dashboard = () => {
             </div>
           )}
 
-          {activeTab === 'dns' && (
+          {activeTab === 'domains' && (
-            <div className="card">
+            <DomainsContent customer={customer} />
-              <p className="text-gray-600">DNS Management module coming soon...</p>
-            </div>
           )}
 
           {activeTab === 'containers' && (