TabDomains.jsx

Go to the documentation of this file.

import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { apiFetch } from '../../lib/api';
import { notifySuccess, notifyError } from '../../utils/notifications';
import DomainStats from './domains/DomainStats';
import DomainTable from './domains/DomainTable';
import DomainFormModal from './domains/DomainFormModal';
import DomainRegistrationModal from './domains/DomainRegistrationModal';
import DomainDNSModal from './domains/DomainDNSModal';
import DomainManagementModal from './domains/DomainManagementModal';
import './TabDomains.css';
 
const initialFormData = {
    customer_id: '',
    domain_name: '',
    registrar: 'enom',
    registration_date: '',
    expiry_date: '',
    auto_renew: true,
    status: 'active',
    contract_id: '',
    nameservers: '',
    dns_provider: '',
    privacy_protection: false,
    notes: ''
};
 
const initialRegistrationData = {
    customer_id: '',
    contract_id: '',
    domain_name: '',
    domain_type: 'registration',
    years: 1,
    price: null,
    currency: 'USD',
    nameservers: '',
    registrant_firstName: '',
    registrant_lastName: '',
    registrant_organization: '',
    registrant_email: '',
    registrant_phone: '',
    registrant_address: '',
    registrant_city: '',
    registrant_state: '',
    registrant_postalCode: '',
    registrant_country: ''
};
 
export default function TabDomains() {
    const navigate = useNavigate();
    const [domains, setDomains] = useState([]);
    const [customers, setCustomers] = useState([]);
    const [contracts, setContracts] = useState([]);
    const [loading, setLoading] = useState(true);
    const [showModal, setShowModal] = useState(false);
    const [showRegistrationModal, setShowRegistrationModal] = useState(false);
    const [editingDomain, setEditingDomain] = useState(null);
    const [formData, setFormData] = useState(initialFormData);
    const [registrationData, setRegistrationData] = useState(initialRegistrationData);
    const [searchQuery, setSearchQuery] = useState('');
    const [searchResult, setSearchResult] = useState(null);
    const [searching, setSearching] = useState(false);
    const [showDNSModal, setShowDNSModal] = useState(false);
    const [dnsEditingDomain, setDnsEditingDomain] = useState(null);
    const [showManagementModal, setShowManagementModal] = useState(false);
    const [managingDomain, setManagingDomain] = useState(null);
    const [syncing, setSyncing] = useState(false);
    const [activeTab, setActiveTab] = useState('all');
 
    // Check if user is root tenant
    const token = localStorage.getItem('token');
    const parseJwt = (token) => {
        try {
            const payload = token.split('.')[1];
            return JSON.parse(atob(payload.replace(/-/g, '+').replace(/_/g, '/')));
        } catch {
            return null;
        }
    };
    const jwtPayload = token ? parseJwt(token) : null;
    const isRootTenant = jwtPayload?.is_msp || false;
 
    useEffect(() => {
        loadDomains();
        loadCustomers();
        loadContracts();
    }, []);
 
    const loadDomains = async () => {
        try {
            setLoading(true);
            console.log('[Domains] Fetching domains from database...');
            const res = await apiFetch('/domains');
            if (!res.ok) throw new Error(`HTTP ${res.status}`);
            const data = await res.json();
            console.log('[Domains] Received data:', data);
            const domainsList = Array.isArray(data) ? data : data.domains || [];
            console.log('[Domains] Loaded', domainsList.length, 'domains from database');
            setDomains(domainsList);
        } catch (err) {
            console.error('[Domains] Error loading domains:', err);
            await notifyError('Load Failed', 'Failed to load domains from database');
            setDomains([]);
        } finally {
            setLoading(false);
        }
    };
 
    const loadCustomers = async () => {
        try {
            const res = await apiFetch('/customers?limit=1000&status=active');
            if (!res.ok) return;
            const data = await res.json();
            setCustomers(Array.isArray(data) ? data : data.customers || []);
        } catch (err) {
            console.error('Error loading customers:', err);
        }
    };
 
    const loadContracts = async () => {
        try {
            const res = await apiFetch('/contracts?limit=1000&status=active');
            if (!res.ok) return;
            const data = await res.json();
            setContracts(Array.isArray(data) ? data : data.contracts || []);
        } catch (err) {
            console.error('Error loading contracts:', err);
        }
    };
 
    const openModal = (domain = null) => {
        if (domain) {
            setEditingDomain(domain);
            setFormData({
                customer_id: domain.customer_id || '',
                domain_name: domain.domain_name || '',
                registrar: domain.registrar || 'enom',
                registration_date: domain.registration_date?.split('T')[0] || '',
                expiry_date: domain.expiry_date?.split('T')[0] || '',
                auto_renew: domain.auto_renew !== false,
                status: domain.status || 'active',
                contract_id: domain.contract_id || '',
                nameservers: domain.nameservers || '',
                dns_provider: domain.dns_provider || '',
                privacy_protection: domain.privacy_protection || false,
                notes: domain.notes || ''
            });
        } else {
            setEditingDomain(null);
            setFormData(initialFormData);
        }
        setShowModal(true);
    };
 
    const closeModal = () => {
        setShowModal(false);
        setShowRegistrationModal(false);
        setEditingDomain(null);
        setSearchResult(null);
        setSearchQuery('');
    };
 
    const openRegistrationModal = (domainType = 'registration') => {
        // Pre-fill from search result if available
        if (searchResult && searchResult.available && !searchResult.alreadyOwned) {
            setRegistrationData({
                ...initialRegistrationData,
                domain_name: searchResult.domain,
                domain_type: domainType,
                price: searchResult.price || null,
                currency: searchResult.currency || 'USD'
            });
        } else {
            setRegistrationData({
                ...initialRegistrationData,
                domain_type: domainType
            });
        }
        setShowRegistrationModal(true);
    };
 
    const handleDomainSearch = async () => {
        if (!searchQuery.trim()) return;
 
        setSearching(true);
        try {
            const result = await apiFetch('/domains/search', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ domain: searchQuery.trim() })
            });
 
            setSearchResult(result);
 
            // If available, pre-fill form with search result
            if (result.available && !result.alreadyOwned) {
                const expiryDate = new Date();
                expiryDate.setFullYear(expiryDate.getFullYear() + 1);
 
                setFormData({
                    ...formData,
                    domain_name: result.domain,
                    registrar: result.registrar || 'cloudflare',
                    registration_date: new Date().toISOString().split('T')[0],
                    expiry_date: expiryDate.toISOString().split('T')[0],
                    auto_renew: true,
                    privacy_protection: true
                });
            }
        } catch (err) {
            await notifyError('Search Failed', err.message || 'Failed to search domain');
            setSearchResult(null);
        } finally {
            setSearching(false);
        }
    };
 
    const handleSubmit = async (data, editing) => {
        try {
            const payload = {
                ...data,
                register_now: !editing && data.registrar === 'cloudflare'
            };
 
            if (editing) {
                await apiFetch(`/domains/${editing.domain_id}`, {
                    method: 'PUT',
                    body: JSON.stringify(payload)
                });
                await notifySuccess('Domain Updated', 'Domain has been updated successfully');
            } else {
                await apiFetch('/domains', {
                    method: 'POST',
                    body: JSON.stringify(payload)
                });
 
                if (data.registrar === 'cloudflare') {
                    await notifySuccess('Domain Registered', `Domain ${data.domain_name} has been registered with Cloudflare`);
                } else {
                    await notifySuccess('Domain Created', 'Domain has been created successfully');
                }
            }
            closeModal();
            loadDomains();
        } catch (err) {
            const errorMsg = err.message || 'Error saving domain';
            await notifyError('Save Failed', errorMsg);
        }
    };
 
    const handleRegistrationRequest = async (data) => {
        try {
            // Convert form data to API format
            const nameserversArray = data.nameservers
                ? data.nameservers.split('\n').map(ns => ns.trim()).filter(ns => ns)
                : [];
 
            const payload = {
                customer_id: parseInt(data.customer_id),
                contract_id: data.contract_id ? parseInt(data.contract_id) : null,
                domain_name: data.domain_name,
                years: data.years,
                price: data.price,
                currency: data.currency,
                nameservers: nameserversArray,
                registrant_contact: {
                    firstName: data.registrant_firstName,
                    lastName: data.registrant_lastName,
                    organization: data.registrant_organization || '',
                    email: data.registrant_email,
                    phone: data.registrant_phone,
                    address: data.registrant_address,
                    city: data.registrant_city,
                    state: data.registrant_state,
                    postalCode: data.registrant_postalCode,
                    country: data.registrant_country
                }
            };
 
            await apiFetch('/domain-requests', {
                method: 'POST',
                body: JSON.stringify(payload)
            });
 
            await notifySuccess(
                'Registration Request Submitted',
                `Your domain registration request for ${data.domain_name} has been submitted for admin approval`
            );
 
            closeModal();
            // Optionally reload domains to show pending request
        } catch (err) {
            const errorMsg = err.message || 'Error submitting registration request';
            await notifyError('Request Failed', errorMsg);
        }
    };
 
    const handleDelete = async (domainId) => {
        if (!confirm('Delete this domain? This cannot be undone.')) return;
        try {
            await apiFetch(`/domains/${domainId}`, { method: 'DELETE' });
            await notifySuccess('Domain Deleted', 'Domain has been deleted successfully');
            loadDomains();
        } catch (err) {
            const errorMsg = err.message || 'Error deleting domain';
            await notifyError('Delete Failed', errorMsg);
        }
    };
 
    const handleManageDNS = (domain) => {
        // Navigate to the new DNS management page
        navigate(`/dns-management/${domain.domain_name}`);
    };
 
    const closeDNSModal = () => {
        setShowDNSModal(false);
        setDnsEditingDomain(null);
    };
 
    const handleManageDomain = (domain) => {
        setManagingDomain(domain);
        setShowManagementModal(true);
    };
 
    const closeManagementModal = () => {
        setShowManagementModal(false);
        setManagingDomain(null);
    };
 
    const handleSyncDomains = async () => {
        if (!isRootTenant) return;
 
        setSyncing(true);
        try {
            await apiFetch('/domains/sync', { method: 'POST' });
            await notifySuccess('Sync Started', 'Domain sync has been started. This may take a few minutes.');
            // Reload domains after a short delay
            setTimeout(() => {
                loadDomains();
            }, 3000);
        } catch (err) {
            await notifyError('Sync Failed', err.message || 'Failed to start domain sync');
        } finally {
            setSyncing(false);
        }
    };
 
    // Filter domains by metadata/configuration based on active tab
    const getFilteredDomains = () => {
        const now = new Date();
        const thirtyDaysFromNow = new Date(now.getTime() + 30 * 24 * 60 * 60 * 1000);
 
        switch (activeTab) {
            case 'all':
                return domains;
            case 'registered':
                return domains.filter(d => {
                    const metadata = typeof d.metadata === 'string' ? JSON.parse(d.metadata) : d.metadata || {};
                    return metadata.domain_type === 'registered';
                });
            case 'dns_only':
                return domains.filter(d => {
                    const metadata = typeof d.metadata === 'string' ? JSON.parse(d.metadata) : d.metadata || {};
                    return metadata.domain_type === 'dns_only';
                });
            case 'cloudflare':
                return domains.filter(d => {
                    const metadata = typeof d.metadata === 'string' ? JSON.parse(d.metadata) : d.metadata || {};
                    return metadata.has_cloudflare_dns || metadata.cloudflare_zone_id;
                });
            case 'locked':
                return domains.filter(d => {
                    const metadata = typeof d.metadata === 'string' ? JSON.parse(d.metadata) : d.metadata || {};
                    return metadata.locked === true;
                });
            case 'expiring':
                return domains.filter(d => {
                    const metadata = typeof d.metadata === 'string' ? JSON.parse(d.metadata) : d.metadata || {};
                    if (metadata.domain_type === 'dns_only') return false;
                    if (!d.expiration_date) return false;
                    const expiryDate = new Date(d.expiration_date);
                    return expiryDate <= thirtyDaysFromNow && expiryDate >= now;
                });
            case 'pending':
                return domains.filter(d => d.status === 'pending');
            default:
                return domains;
        }
    };
 
    const filteredDomains = getFilteredDomains();
 
    if (loading) {
        return <div>Loading domains...</div>;
    }
 
    return (
        <div className="tab-domains">
            <div className="tab-header">
                <DomainStats domains={domains} />
                <div style={{ display: 'flex', gap: '8px', alignItems: 'center', flexWrap: 'wrap' }}>
                    <div style={{ display: 'flex', gap: '4px' }}>
                        <input
                            type="text"
                            placeholder="Search domain (e.g., example.com)"
                            value={searchQuery}
                            onChange={(e) => setSearchQuery(e.target.value)}
                            onKeyPress={(e) => e.key === 'Enter' && handleDomainSearch()}
                            style={{ padding: '8px 12px', minWidth: '280px' }}
                        />
                        <button
                            className="btn"
                            onClick={handleDomainSearch}
                            disabled={searching || !searchQuery.trim()}
                        >
                            {searching ? 'Searching...' : 'Search'}
                        </button>
                    </div>
                    {isRootTenant && (
                        <button
                            className="btn"
                            onClick={handleSyncDomains}
                            disabled={syncing}
                            title="Sync all Cloudflare domains and DNS records"
                            style={{ background: '#2196F3', color: 'white' }}
                        >
                            <span className="material-symbols-outlined">sync</span>
                            {syncing ? 'Syncing...' : 'Sync Domains'}
                        </button>
                    )}
                    <button 
                        className="btn" 
                        onClick={() => openRegistrationModal('dns-only')} 
                        style={{ background: '#00BCD4', color: 'white' }}
                        title="Add DNS management for a domain registered elsewhere (free)"
                    >
                        <span className="material-symbols-outlined">dns</span>
                        Add Existing Domain
                    </button>
                    <button className="btn btn-primary" onClick={() => openRegistrationModal('registration')}>
                        <span className="material-symbols-outlined">add</span>
                        Register Domain
                    </button>
                </div>
            </div>
 
            {/* Domain Filter Tabs */}
            <div style={{
                borderBottom: '2px solid #e0e0e0',
                marginBottom: '16px',
                display: 'flex',
                gap: '4px',
                flexWrap: 'wrap'
            }}>
                <button
                    onClick={() => setActiveTab('all')}
                    style={{
                        padding: '12px 20px',
                        background: activeTab === 'all' ? '#2196F3' : 'transparent',
                        color: activeTab === 'all' ? 'white' : '#666',
                        border: 'none',
                        borderBottom: activeTab === 'all' ? '3px solid #2196F3' : '3px solid transparent',
                        cursor: 'pointer',
                        fontWeight: activeTab === 'all' ? 'bold' : 'normal',
                        transition: 'all 0.2s'
                    }}
                >
                    All ({domains.length})
                </button>
                <button
                    onClick={() => setActiveTab('registered')}
                    style={{
                        padding: '12px 20px',
                        background: activeTab === 'registered' ? '#4caf50' : 'transparent',
                        color: activeTab === 'registered' ? 'white' : '#666',
                        border: 'none',
                        borderBottom: activeTab === 'registered' ? '3px solid #4caf50' : '3px solid transparent',
                        cursor: 'pointer',
                        fontWeight: activeTab === 'registered' ? 'bold' : 'normal',
                        transition: 'all 0.2s'
                    }}
                    title="Domains with full registration management"
                >
                    Registered ({domains.filter(d => {
                        const metadata = typeof d.metadata === 'string' ? JSON.parse(d.metadata) : d.metadata || {};
                        return metadata.domain_type === 'registered';
                    }).length})
                </button>
                <button
                    onClick={() => setActiveTab('dns_only')}
                    style={{
                        padding: '12px 20px',
                        background: activeTab === 'dns_only' ? '#00BCD4' : 'transparent',
                        color: activeTab === 'dns_only' ? 'white' : '#666',
                        border: 'none',
                        borderBottom: activeTab === 'dns_only' ? '3px solid #00BCD4' : '3px solid transparent',
                        cursor: 'pointer',
                        fontWeight: activeTab === 'dns_only' ? 'bold' : 'normal',
                        transition: 'all 0.2s'
                    }}
                    title="DNS management only (registered elsewhere)"
                >
                    DNS Only ({domains.filter(d => {
                        const metadata = typeof d.metadata === 'string' ? JSON.parse(d.metadata) : d.metadata || {};
                        return metadata.domain_type === 'dns_only';
                    }).length})
                </button>
                <button
                    onClick={() => setActiveTab('cloudflare')}
                    style={{
                        padding: '12px 20px',
                        background: activeTab === 'cloudflare' ? '#2196F3' : 'transparent',
                        color: activeTab === 'cloudflare' ? 'white' : '#666',
                        border: 'none',
                        borderBottom: activeTab === 'cloudflare' ? '3px solid #2196F3' : '3px solid transparent',
                        cursor: 'pointer',
                        fontWeight: activeTab === 'cloudflare' ? 'bold' : 'normal',
                        transition: 'all 0.2s'
                    }}
                    title="Using Cloudflare DNS"
                >
                    ☁️ Cloudflare ({domains.filter(d => {
                        const metadata = typeof d.metadata === 'string' ? JSON.parse(d.metadata) : d.metadata || {};
                        return metadata.has_cloudflare_dns || metadata.cloudflare_zone_id;
                    }).length})
                </button>
                <button
                    onClick={() => setActiveTab('locked')}
                    style={{
                        padding: '12px 20px',
                        background: activeTab === 'locked' ? '#4caf50' : 'transparent',
                        color: activeTab === 'locked' ? 'white' : '#666',
                        border: 'none',
                        borderBottom: activeTab === 'locked' ? '3px solid #4caf50' : '3px solid transparent',
                        cursor: 'pointer',
                        fontWeight: activeTab === 'locked' ? 'bold' : 'normal',
                        transition: 'all 0.2s'
                    }}
                    title="Transfer protected domains"
                >
                    🔒 Locked ({domains.filter(d => {
                        const metadata = typeof d.metadata === 'string' ? JSON.parse(d.metadata) : d.metadata || {};
                        return metadata.locked === true;
                    }).length})
                </button>
                <button
                    onClick={() => setActiveTab('expiring')}
                    style={{
                        padding: '12px 20px',
                        background: activeTab === 'expiring' ? '#ff9800' : 'transparent',
                        color: activeTab === 'expiring' ? 'white' : '#666',
                        border: 'none',
                        borderBottom: activeTab === 'expiring' ? '3px solid #ff9800' : '3px solid transparent',
                        cursor: 'pointer',
                        fontWeight: activeTab === 'expiring' ? 'bold' : 'normal',
                        transition: 'all 0.2s'
                    }}
                    title="Expiring within 30 days"
                >
                    ⚠️ Expiring ({(() => {
                        const now = new Date();
                        const thirtyDaysFromNow = new Date(now.getTime() + 30 * 24 * 60 * 60 * 1000);
                        return domains.filter(d => {
                            const metadata = typeof d.metadata === 'string' ? JSON.parse(d.metadata) : d.metadata || {};
                            if (metadata.domain_type === 'dns_only') return false;
                            if (!d.expiration_date) return false;
                            const expiryDate = new Date(d.expiration_date);
                            return expiryDate <= thirtyDaysFromNow && expiryDate >= now;
                        }).length;
                    })()})
                </button>
                {isRootTenant && (
                    <button
                        onClick={() => setActiveTab('pending')}
                        style={{
                            padding: '12px 20px',
                            background: activeTab === 'pending' ? '#ff9800' : 'transparent',
                            color: activeTab === 'pending' ? 'white' : '#666',
                            border: 'none',
                            borderBottom: activeTab === 'pending' ? '3px solid #ff9800' : '3px solid transparent',
                            cursor: 'pointer',
                            fontWeight: activeTab === 'pending' ? 'bold' : 'normal',
                            transition: 'all 0.2s'
                        }}
                        title="Pending registration requests"
                    >
                        Pending ({domains.filter(d => d.status === 'pending').length})
                    </button>
                )}
            </div>
 
            {searchResult && (
                <div style={{
                    padding: '16px',
                    marginBottom: '16px',
                    background: searchResult.available && !searchResult.alreadyOwned ? '#e8f5e9' : '#fff3e0',
                    border: `1px solid ${searchResult.available && !searchResult.alreadyOwned ? '#4caf50' : '#ff9800'}`,
                    borderRadius: '8px'
                }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                        <div>
                            <h3 style={{ margin: '0 0 8px 0' }}>{searchResult.domain}</h3>
                            <p style={{ margin: 0 }}>
                                {searchResult.alreadyOwned ? (
                                    <strong>Already registered in your account</strong>
                                ) : searchResult.available ? (
                                    <>
                                        <strong style={{ color: '#4caf50' }}>Available!</strong>
                                        {searchResult.price && ` - $${searchResult.price} ${searchResult.currency}/year`}
                                        {searchResult.note && <span style={{ fontSize: '0.9em', color: '#666', display: 'block', marginTop: '4px' }}>{searchResult.note}</span>}
                                    </>
                                ) : (
                                    <strong style={{ color: '#ff5722' }}>Not Available</strong>
                                )}
                            </p>
                        </div>
                        {searchResult.available && !searchResult.alreadyOwned && (
                            <button
                                className="btn btn-primary"
                                onClick={openRegistrationModal}
                            >
                                Register Now
                            </button>
                        )}
                    </div>
                </div>
            )}
 
            <DomainTable
                domains={filteredDomains}
                onEdit={openModal}
                onDelete={handleDelete}
                onManageDNS={handleManageDNS}
                onManage={handleManageDomain}
            />
 
            <DomainFormModal
                showModal={showModal}
                editingDomain={editingDomain}
                formData={formData}
                setFormData={setFormData}
                customers={customers}
                contracts={contracts}
                onSubmit={handleSubmit}
                onClose={closeModal}
            />
 
            <DomainRegistrationModal
                showModal={showRegistrationModal}
                formData={registrationData}
                setFormData={setRegistrationData}
                customers={customers}
                contracts={contracts}
                onSubmit={handleRegistrationRequest}
                onClose={closeModal}
            />
 
            <DomainDNSModal
                showModal={showDNSModal}
                domain={dnsEditingDomain}
                onClose={closeDNSModal}
                onUpdate={loadDomains}
            />
 
            {showManagementModal && managingDomain && (
                <DomainManagementModal
                    domain={managingDomain}
                    onClose={closeManagementModal}
                    onUpdate={loadDomains}
                />
            )}
        </div>
    );
}