DomainTableRow.jsx

Go to the documentation of this file.

const getStatusBadge = (status) => {
    const badges = {
        active: { label: 'Active', class: 'badge-success' },
        expired: { label: 'Expired', class: 'badge-error' },
        pending: { label: 'Pending', class: 'badge-warning' },
        cancelled: { label: 'Cancelled', class: 'badge-secondary' }
    };
    const badge = badges[status] || badges.active;
    return <span className={`badge ${badge.class}`}>{badge.label}</span>;
};
 
const getDomainTypeBadge = (domainType) => {
    if (domainType === 'dns_only') {
        return <span className="badge badge-info" title="DNS management only">DNS Only</span>;
    }
    return <span className="badge badge-success" title="Full registration management">Registered</span>;
};
 
const getLockBadge = (locked) => {
    if (locked === true) {
        return (
            <span className="badge" style={{ background: '#4CAF50', color: 'white' }} title="Domain is locked (protected from transfer)">
                🔒 Locked
            </span>
        );
    } else if (locked === false) {
        return (
            <span className="badge" style={{ background: '#FF9800', color: 'white' }} title="Domain is unlocked (can be transferred)">
                🔓 Unlocked
            </span>
        );
    }
    return <span className="badge badge-secondary">-</span>;
};
 
const getRegistrarLogo = (registrar) => {
    const logos = {
        enom: '🌐',
        moniker: '🔷',
        cloudflare: '☁️',
        other: '🌍'
    };
    return logos[registrar] || logos.other;
};
 
export default function DomainTableRow({ domain, onEdit, onDelete, onManageDNS, onManage, isRootTenant }) {
    // Parse metadata if it's a string
    let metadata = domain.metadata || {};
    if (typeof metadata === 'string') {
        try {
            metadata = JSON.parse(metadata);
        } catch (e) {
            console.error(`Failed to parse metadata for ${domain.domain_name}:`, e);
            metadata = {};
        }
    }
    
    const domainType = metadata.domain_type ||  'registered'; // Default to registered for backward compatibility
    const locked = metadata.locked;
    const hasCloudflare = metadata.has_cloudflare_dns || metadata.cloudflare_zone_id;
    
    // Debug log auto_renew for troubleshooting
    if (metadata.auto_renew !== undefined) {
        console.log(`[DomainRow] ${domain.domain_name} - auto_renew:`, metadata.auto_renew, 'type:', typeof metadata.auto_renew);
    }
    
    // Calculate days until expiry (only for registered domains)
    let daysUntilExpiry = null;
    let isExpiringSoon = false;
    if (domain.expiration_date && domainType === 'registered') {
        daysUntilExpiry = Math.ceil((new Date(domain.expiration_date) - new Date()) / (1000 * 60 * 60 * 24));
        isExpiringSoon = daysUntilExpiry <= 30 && daysUntilExpiry > 0;
    }
 
    return (
        <tr>
            <td>
                <div style={{ display: 'flex', alignItems: 'center', gap: '8px', flexDirection: 'column', alignItems: 'flex-start' }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                        <span style={{ fontSize: '20px' }}>{getRegistrarLogo(domain.registrar)}</span>
                        <strong>{domain.domain_name}</strong>
                        {hasCloudflare && (
                            <span title="Using Cloudflare DNS" style={{ fontSize: '16px' }}>☁️</span>
                        )}
                    </div>
                    <div style={{ display: 'flex', gap: '4px', fontSize: '12px' }}>
                        {getDomainTypeBadge(domainType)}
                        {domainType === 'registered' && getLockBadge(locked)}
                    </div>
                </div>
            </td>
            {isRootTenant && (
                <td>
                    <span className="badge badge-info">{domain.tenant_subdomain || 'N/A'}</span>
                </td>
            )}
            <td>{domain.customer_name || 'N/A'}</td>
            <td style={{ textTransform: 'capitalize' }}>{domain.registrar}</td>
            <td>
                <div>
                    {domain.expiration_date ? (
                        <>
                            {new Date(domain.expiration_date).toLocaleDateString()}
                            {isExpiringSoon && (
                                <span className="badge badge-warning" style={{ marginLeft: '8px', fontSize: '11px' }}>
                                    {daysUntilExpiry} days
                                </span>
                            )}
                            {daysUntilExpiry < 0 && (
                                <span className="badge badge-error" style={{ marginLeft: '8px', fontSize: '11px' }}>
                                    Expired
                                </span>
                            )}
                        </>
                    ) : (
                        <span style={{ color: 'var(--text-secondary)' }}>N/A</span>
                    )}
                </div>
            </td>
            <td>{getStatusBadge(domain.status)}</td>
            <td>
                {domainType === 'registered' ? (
                    metadata.auto_renew ? (
                        <span className="badge badge-success">Yes</span>
                    ) : (
                        <span className="badge badge-secondary">No</span>
                    )
                ) : (
                    <span className="badge badge-secondary">-</span>
                )}
            </td>
            <td>{domain.contract_title || '-'}</td>
            <td>
                <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
                    {/* DNS Management - available for all */}
                    <button
                        className="btn btn-sm"
                        onClick={() => onManageDNS(domain)}
                        title="Manage DNS Records"
                        style={{ background: '#2196F3', color: 'white' }}
                    >
                        <span className="material-symbols-outlined">dns</span>
                    </button>
                    
                    {/* Domain Management - only for registered domains */}
                    {domainType === 'registered' && onManage && (
                        <button
                            className="btn btn-sm"
                            onClick={() => onManage(domain)}
                            title="Domain Management (Lock, Transfer Code, Auto-Renew)"
                            style={{ background: '#9C27B0', color: 'white' }}
                        >
                            <span className="material-symbols-outlined">settings</span>
                        </button>
                    )}
                    
                    {/* Edit */}
                    <button
                        className="btn btn-sm btn-secondary"
                        onClick={() => onEdit(domain)}
                        title="Edit domain"
                    >
                        <span className="material-symbols-outlined">edit</span>
                    </button>
                    
                    {/* Delete */}
                    <button
                        className="btn btn-sm btn-error"
                        onClick={() => onDelete(domain.domain_id)}
                        title="Delete domain"
                    >
                        <span className="material-symbols-outlined">delete</span>
                    </button>
                </div>
            </td>
        </tr>
    );
}