Update Dashboard: Rename DNS Management to Domains and add domain list UI
This commit is contained in:
oguz ozturk
parent
fe9819de58
commit
801db4616b
|
|
@ -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' && (
|
||||
<div className="card">
|
||||
<p className="text-gray-600">DNS Management module coming soon...</p>
|
||||
</div>
|
||||
{activeTab === 'domains' && (
|
||||
<DomainsContent customer={customer} />
|
||||
)}
|
||||
|
||||
{activeTab === 'containers' && (
|
||||
|
|
|
|||
Loading…
Reference in New Issue