DomainStats.jsx

Go to the documentation of this file.

import { useState, useEffect } from 'react';
import { apiFetch } from '../../../lib/api';
 
function parseJwt(token) {
    try {
        const payload = token.split('.')[1];
        return JSON.parse(atob(payload.replace(/-/g, '+').replace(/_/g, '/')));
    } catch {
        return null;
    }
}
 
export default function DomainStats({ domains }) {
    const [pendingRequests, setPendingRequests] = useState(0);
    const token = localStorage.getItem('token');
    const jwtPayload = token ? parseJwt(token) : null;
    const isRootTenant = jwtPayload?.is_msp || false;
 
    const activeDomains = domains.filter(d => d.status === 'active').length;
    
    // Count registered vs DNS-only domains
    const registeredDomains = domains.filter(d => d.metadata?.domain_type === 'registered').length;
    const dnsOnlyDomains = domains.filter(d => d.metadata?.domain_type === 'dns_only').length;
    
    // Count domains with Cloudflare enrichment
    const cloudflareEnrichedDomains = domains.filter(d => 
        d.metadata?.has_cloudflare_dns || d.metadata?.cloudflare_zone_id
    ).length;
    
    // Count locked domains
    const lockedDomains = domains.filter(d => d.metadata?.locked === true).length;
    
    const expiringSoon = domains.filter(d => {
        if (!d.expiration_date || d.metadata?.domain_type === 'dns_only') return false;
        const days = Math.ceil((new Date(d.expiration_date) - new Date()) / (1000 * 60 * 60 * 24));
        return days <= 30 && days > 0;
    }).length;
 
    // Find most recent update time
    const lastSync = domains.length > 0
        ? domains.reduce((latest, d) => {
            const updated = new Date(d.updated_at);
            return updated > latest ? updated : latest;
        }, new Date(0))
        : null;
 
    // Load pending requests count for root tenant
    useEffect(() => {
        if (isRootTenant) {
            loadPendingCount();
        }
    }, [isRootTenant]);
 
    const loadPendingCount = async () => {
        try {
            const res = await apiFetch('/domain-requests?status=pending');
            if (!res.ok) return;
            const data = await res.json();
            const count = data.total || (Array.isArray(data) ? data.length : data.requests?.length || 0);
            setPendingRequests(count);
        } catch (err) {
            console.error('Error loading pending requests:', err);
        }
    };
 
    return (
        <div className="tab-stats">
            <div className="stat-card">
                <span className="stat-label">Total Domains</span>
                <span className="stat-value">{domains.length}</span>
                {lastSync && (
                    <small style={{ fontSize: '0.75em', color: '#666', marginTop: '4px', display: 'block' }}>
                        Last synced: {lastSync.toLocaleTimeString()}
                    </small>
                )}
            </div>
            <div className="stat-card">
                <span className="stat-label">Registered</span>
                <span className="stat-value">{registeredDomains}</span>
                <small style={{ fontSize: '0.75em', color: '#666', marginTop: '4px', display: 'block' }}>
                    Full management
                </small>
            </div>
            <div className="stat-card">
                <span className="stat-label">DNS Only</span>
                <span className="stat-value">{dnsOnlyDomains}</span>
                <small style={{ fontSize: '0.75em', color: '#666', marginTop: '4px', display: 'block' }}>
                    DNS management only
                </small>
            </div>
            <div className="stat-card" style={{ background: cloudflareEnrichedDomains > 0 ? '#e3f2fd' : undefined }}>
                <span className="stat-label">☁️ Cloudflare DNS</span>
                <span className="stat-value" style={{ color: cloudflareEnrichedDomains > 0 ? '#1976d2' : undefined }}>
                    {cloudflareEnrichedDomains}
                </span>
                <small style={{ fontSize: '0.75em', color: '#666', marginTop: '4px', display: 'block' }}>
                    Using Cloudflare
                </small>
            </div>
            <div className="stat-card" style={{ background: lockedDomains > 0 ? '#e8f5e9' : undefined }}>
                <span className="stat-label">🔒 Locked</span>
                <span className="stat-value" style={{ color: lockedDomains > 0 ? '#388e3c' : undefined }}>
                    {lockedDomains}
                </span>
                <small style={{ fontSize: '0.75em', color: '#666', marginTop: '4px', display: 'block' }}>
                    Transfer protected
                </small>
            </div>
            <div className="stat-card" style={{ background: expiringSoon > 0 ? '#fff3e0' : undefined }}>
                <span className="stat-label">⚠️ Expiring Soon</span>
                <span className="stat-value" style={{ color: expiringSoon > 0 ? '#e65100' : undefined }}>
                    {expiringSoon}
                </span>
                <small style={{ fontSize: '0.75em', color: '#666', marginTop: '4px', display: 'block' }}>
                    Within 30 days
                </small>
            </div>
            {isRootTenant && (
                <div className="stat-card" style={{ background: pendingRequests > 0 ? '#fff3e0' : undefined }}>
                    <span className="stat-label">Pending Requests</span>
                    <span className="stat-value" style={{ color: pendingRequests > 0 ? '#e65100' : undefined }}>
                        {pendingRequests}
                    </span>
                    {pendingRequests > 0 && (
                        <small style={{ fontSize: '0.75em', color: '#e65100', marginTop: '4px', display: 'block' }}>
                            Requires approval
                        </small>
                    )}
                </div>
            )}
        </div>
    );
}