TabHosting.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 { useToast } from '../../hooks/useToast';
import Toast from '../../components/Toast';
 
export default function TabHosting() {
    const navigate = useNavigate();
    const [wordpressSites, setWordPressSites] = useState([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState('');
    const [customers, setCustomers] = useState([]);
    const [lastUpdate, setLastUpdate] = useState(null);
    const [editingSite, setEditingSite] = useState(null);
    const [assignmentData, setAssignmentData] = useState({
        customerId: '',
        notes: ''
    });
    const { toasts, showToast, hideToast } = useToast();
 
    useEffect(() => {
        fetchWordPressSites();
        fetchCustomers();
        
        // Auto-refresh every 5 minutes
        const interval = setInterval(fetchWordPressSites, 5 * 60 * 1000);
        return () => clearInterval(interval);
    }, []);
 
    const fetchWordPressSites = async () => {
        setLoading(true);
        setError('');
        try {
            const monitoringRes = await apiFetch('/wordpress/monitoring/latest');
            if (monitoringRes.ok) {
                const monitoringData = await monitoringRes.json();
                if (monitoringData.reports && monitoringData.reports.length > 0) {
                    const latestReport = monitoringData.reports[0];
                    if (latestReport && latestReport.sites) {
                        const sites = latestReport.sites.map(site => ({
                            ...site,
                            name: site.domain,
                            server_ip: latestReport.server_ip,
                            server_hostname: latestReport.server_hostname,
                            last_checked: latestReport.timestamp,
                            last_scan: latestReport.last_scan
                        }));
                        setWordPressSites(sites);
                        setLastUpdate(latestReport.received_at || latestReport.timestamp);
                    }
                } else {
                    setWordPressSites([]);
                }
            } else {
                setError('Failed to fetch WordPress sites');
            }
        } catch (err) {
            console.error('Error fetching WordPress sites:', err);
            setError(err.message || 'Failed to load WordPress sites');
        } finally {
            setLoading(false);
        }
    };
 
    const fetchCustomers = async () => {
        try {
            const res = await apiFetch('/customers');
            if (res.ok) {
                const data = await res.json();
                setCustomers(data.customers || []);
            }
        } catch (err) {
            console.error('Error fetching customers:', err);
        }
    };
 
    const handleAssignSite = (site) => {
        setEditingSite(site);
        setAssignmentData({
            customerId: site.customer_id || '',
            notes: site.notes || ''
        });
    };
 
    const handleSaveAssignment = async () => {
        if (!editingSite) return;
 
        try {
            const res = await apiFetch(`/wordpress/sites/${editingSite.domain}/assign`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(assignmentData)
            });
 
            if (res.ok) {
                showToast('Site assignment updated successfully', 'success', 3000);
                setEditingSite(null);
                fetchWordPressSites();
            } else {
                const errorData = await res.json();
                showToast(errorData.error || 'Failed to update assignment', 'error', 5000);
            }
        } catch (err) {
            console.error('Error saving assignment:', err);
            showToast(err.message || 'Failed to save assignment', 'error', 5000);
        }
    };
 
    const getStatusColor = (status) => {
        const statusMap = {
            'online': 'success',
            'error': 'danger',
            'timeout': 'warning',
            'offline': 'danger',
            'unknown': 'secondary'
        };
        return statusMap[status?.toLowerCase()] || 'secondary';
    };
 
    const handleRefresh = () => {
        fetchWordPressSites();
        showToast('Refreshing WordPress sites...', 'info', 2000);
    };
 
    const formatTime = (date) => {
        if (!date) return '';
        const now = new Date();
        const then = new Date(date);
        const diff = Math.floor((now - then) / 1000);
 
        if (diff < 60) return `${diff} seconds ago`;
        if (diff < 3600) return `${Math.floor(diff / 60)} minutes ago`;
        if (diff < 86400) return `${Math.floor(diff / 3600)} hours ago`;
        return `${Math.floor(diff / 86400)} days ago`;
    };
 
    const getCustomerName = (customerId) => {
        const customer = customers.find(c => c.customer_id === customerId);
        return customer ? customer.company_name || customer.name : '';
    };
 
    if (loading && wordpressSites.length === 0) {
        return (
            <div style={{ padding: '40px', textAlign: 'center' }}>
                <div className="spinner"></div>
                <p style={{ marginTop: '16px', color: 'var(--text-secondary)' }}>Loading LAMP WordPress sites...</p>
            </div>
        );
    }
 
    return (
        <>
            <Toast toasts={toasts} hideToast={hideToast} />
            
            <div style={{ padding: '20px' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '20px' }}>
                    <div>
                        <h2>LAMP WordPress Management</h2>
                        <p style={{ color: 'var(--text-secondary)', marginTop: '8px' }}>
                            Manage self-hosted WordPress sites on LAMP servers
                        </p>
                    </div>
                    <div style={{ display: 'flex', gap: '12px' }}>
                        <button
                            onClick={handleRefresh}
                            disabled={loading}
                            className="btn btn-primary"
                            style={{ display: 'flex', alignItems: 'center', gap: '8px' }}
                        >
                            <span className="material-symbols-outlined" style={{ animation: loading ? 'spin 1s linear infinite' : 'none' }}>
                                refresh
                            </span>
                            {loading ? 'Refreshing...' : 'Refresh'}
                        </button>
                    </div>
                </div>
 
                {/* Server Status Card */}
                <div className="card" style={{ padding: '16px', marginBottom: '20px', background: 'var(--info-bg)', border: '1px solid var(--info-border)' }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
                        <span className="material-symbols-outlined" style={{ color: 'var(--info-text)', fontSize: '24px' }}>
                            dns
                        </span>
                        <div>
                            <div style={{ fontSize: '14px', color: 'var(--info-text)', fontWeight: '500' }}>
                                {wordpressSites.length > 0 && wordpressSites[0].server_ip ? 
                                    `LAMP Server: ${wordpressSites[0].server_hostname || wordpressSites[0].server_ip}` :
                                    'No monitoring data available'}
                            </div>
                            {lastUpdate && (
                                <div style={{ fontSize: '12px', color: 'var(--info-text)', opacity: 0.8, marginTop: '4px' }}>
                                    Last updated {formatTime(lastUpdate)} • {wordpressSites.length} sites monitored
                                </div>
                            )}
                        </div>
                    </div>
                </div>
 
                {error && (
                    <div className="card" style={{ padding: '16px', marginBottom: '20px', background: 'var(--error-bg)', border: '1px solid var(--error-border)' }}>
                        <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
                            <span className="material-symbols-outlined" style={{ color: 'var(--error-text)' }}>
                                error
                            </span>
                            <div style={{ fontSize: '14px', color: 'var(--error-text)' }}>
                                {error}
                            </div>
                        </div>
                    </div>
                )}
 
                {/* WordPress Sites Grid */}
                {wordpressSites.length === 0 ? (
                    <div className="card" style={{ padding: '40px', textAlign: 'center' }}>
                        <span className="material-symbols-outlined" style={{ fontSize: '48px', color: 'var(--text-secondary)', opacity: 0.5 }}>
                            web_asset_off
                        </span>
                        <h3 style={{ marginTop: '16px', color: 'var(--text-secondary)' }}>No WordPress Sites Found</h3>
                        <p style={{ color: 'var(--text-secondary)', marginTop: '8px' }}>
                            Waiting for monitoring data from LAMP servers
                        </p>
                    </div>
                ) : (
                    <div style={{ display: 'grid', gap: '24px', gridTemplateColumns: 'repeat(auto-fill, minmax(380px, 1fr))' }}>
                        {wordpressSites.map((site, index) => (
                            <div 
                                key={site.domain || index} 
                                className="card" 
                                style={{ 
                                    overflow: 'hidden',
                                    transition: 'transform 0.2s, box-shadow 0.2s',
                                    border: site.malware_issues > 0 ? '1px solid var(--danger-border)' : '1px solid var(--border)'
                                }}
                                onMouseEnter={(e) => {
                                    e.currentTarget.style.transform = 'translateY(-2px)';
                                    e.currentTarget.style.boxShadow = '0 4px 12px rgba(0,0,0,0.15)';
                                }}
                                onMouseLeave={(e) => {
                                    e.currentTarget.style.transform = 'translateY(0)';
                                    e.currentTarget.style.boxShadow = '';
                                }}
                            >
                                <div style={{ 
                                    padding: '20px', 
                                    borderBottom: '1px solid var(--border)',
                                    background: site.malware_issues > 0 ? 'var(--danger-bg)' : 'transparent'
                                }}>
                                    <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: '12px' }}>
                                        <div style={{ flex: 1 }}>
                                            <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '6px' }}>
                                                <span className="material-symbols-outlined" style={{ 
                                                    fontSize: '24px', 
                                                    color: 'var(--primary)',
                                                    opacity: 0.9
                                                }}>
                                                    web
                                                </span>
                                                <h3 style={{ 
                                                    margin: 0, 
                                                    fontSize: '17px',
                                                    fontWeight: '600',
                                                    color: 'var(--text-primary)'
                                                }}>{site.domain}</h3>
                                            </div>
                                            {site.customer_id && (
                                                <p style={{ fontSize: '13px', color: 'var(--text-secondary)', margin: '4px 0 0 34px' }}>
                                                    {getCustomerName(site.customer_id)}
                                                </p>
                                            )}
                                        </div>
                                        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: '6px' }}>
                                            <span className={`badge badge-${getStatusColor(site.status)}`}>
                                                {site.status || 'unknown'}
                                            </span>
                                            {site.malware_issues > 0 && (
                                                <span className="badge badge-danger" style={{ fontSize: '11px' }}>
                                                    <span className="material-symbols-outlined" style={{ fontSize: '12px', marginRight: '2px' }}>warning</span>
                                                    {site.malware_issues} issue{site.malware_issues !== 1 ? 's' : ''}
                                                </span>
                                            )}
                                        </div>
                                    </div>
 
                                    <a
                                        href={`https://${site.domain}`}
                                        target="_blank"
                                        rel="noopener noreferrer"
                                        style={{
                                            fontSize: '13px',
                                            color: 'var(--primary)',
                                            textDecoration: 'none',
                                            display: 'inline-flex',
                                            alignItems: 'center',
                                            gap: '4px',
                                            padding: '4px 0',
                                            transition: 'opacity 0.2s'
                                        }}
                                        onMouseEnter={(e) => e.currentTarget.style.opacity = '0.7'}
                                        onMouseLeave={(e) => e.currentTarget.style.opacity = '1'}
                                    >
                                        <span className="material-symbols-outlined" style={{ fontSize: '14px' }}>
                                            open_in_new
                                        </span>
                                        <span>Visit Site</span>
                                    </a>
                                </div>
 
                                <div style={{ padding: '20px' }}>
                                    <div style={{ display: 'grid', gap: '10px', fontSize: '13px', marginBottom: '20px' }}>
                                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                                            <span style={{ color: 'var(--text-secondary)', fontWeight: '500' }}>WordPress</span>
                                            <span style={{ fontFamily: 'monospace', fontSize: '12px' }}>{site.wp_version?.trim().replace(/.*\$wp_version\s+/, '') || 'Unknown'}</span>
                                        </div>
                                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                                            <span style={{ color: 'var(--text-secondary)', fontWeight: '500' }}>Plugins</span>
                                            <span>{site.plugin_count || 0}</span>
                                        </div>
                                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                                            <span style={{ color: 'var(--text-secondary)', fontWeight: '500' }}>Disk Usage</span>
                                            <span style={{ fontFamily: 'monospace', fontSize: '12px' }}>{site.disk_usage || 'N/A'}</span>
                                        </div>
                                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                                            <span style={{ color: 'var(--text-secondary)', fontWeight: '500' }}>Database</span>
                                            <span style={{ fontFamily: 'monospace', fontSize: '11px', color: 'var(--text-secondary)' }}>{site.database || 'N/A'}</span>
                                        </div>
                                        {site.last_checked && (
                                            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingTop: '6px', borderTop: '1px solid var(--border)' }}>
                                                <span style={{ color: 'var(--text-secondary)', fontWeight: '500', fontSize: '12px' }}>Last Checked</span>
                                                <span style={{ fontSize: '12px', color: 'var(--text-secondary)' }}>
                                                    {formatTime(site.last_checked)}
                                                </span>
                                            </div>
                                        )}
                                    </div>
 
                                    <button
                                        className="btn btn-primary"
                                        onClick={() => navigate(`/wordpress/${encodeURIComponent(site.domain)}`)}
                                        style={{ 
                                            width: '100%',
                                            display: 'flex',
                                            alignItems: 'center',
                                            justifyContent: 'center',
                                            gap: '8px',
                                            padding: '12px'
                                        }}
                                    >
                                        <span className="material-symbols-outlined" style={{ fontSize: '18px' }}>
                                            settings
                                        </span>
                                        Manage Site
                                    </button>
                                </div>
                            </div>
                        ))}
                    </div>
                )}
            </div>
 
            {/* Assignment Modal */}
            {editingSite && (
                <div style={{
                    position: 'fixed',
                    top: 0,
                    left: 0,
                    right: 0,
                    bottom: 0,
                    background: 'rgba(0,0,0,0.5)',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    zIndex: 1000
                }} onClick={() => setEditingSite(null)}>
                    <div className="card" style={{ width: '500px', maxWidth: '90vw', padding: 0 }} onClick={e => e.stopPropagation()}>
                        <div style={{ padding: '20px', borderBottom: '1px solid var(--border)' }}>
                            <h3 style={{ margin: 0 }}>Assign Site to Customer</h3>
                            <p style={{ margin: '4px 0 0 0', fontSize: '14px', color: 'var(--text-secondary)' }}>
                                {editingSite.domain}
                            </p>
                        </div>
                        <div style={{ padding: '20px' }}>
                            <div style={{ marginBottom: '16px' }}>
                                <label style={{ display: 'block', marginBottom: '8px', fontSize: '14px', fontWeight: '500' }}>
                                    Customer
                                </label>
                                <select
                                    value={assignmentData.customerId}
                                    onChange={e => setAssignmentData({ ...assignmentData, customerId: e.target.value })}
                                    style={{
                                        width: '100%',
                                        padding: '8px 12px',
                                        border: '1px solid var(--border)',
                                        borderRadius: '4px',
                                        fontSize: '14px'
                                    }}
                                >
                                    <option value="">-- Select Customer --</option>
                                    {customers.map(customer => (
                                        <option key={customer.customer_id} value={customer.customer_id}>
                                            {customer.company_name || customer.name}
                                        </option>
                                    ))}
                                </select>
                            </div>
                            <div style={{ marginBottom: '16px' }}>
                                <label style={{ display: 'block', marginBottom: '8px', fontSize: '14px', fontWeight: '500' }}>
                                    Notes (optional)
                                </label>
                                <textarea
                                    value={assignmentData.notes}
                                    onChange={e => setAssignmentData({ ...assignmentData, notes: e.target.value })}
                                    placeholder="Add any notes about this site..."
                                    rows={3}
                                    style={{
                                        width: '100%',
                                        padding: '8px 12px',
                                        border: '1px solid var(--border)',
                                        borderRadius: '4px',
                                        fontSize: '14px',
                                        resize: 'vertical'
                                    }}
                                />
                            </div>
                        </div>
                        <div style={{ padding: '16px 20px', borderTop: '1px solid var(--border)', display: 'flex', gap: '12px', justifyContent: 'flex-end' }}>
                            <button
                                onClick={() => setEditingSite(null)}
                                className="btn"
                            >
                                Cancel
                            </button>
                            <button
                                onClick={handleSaveAssignment}
                                className="btn btn-primary"
                            >
                                Save Assignment
                            </button>
                        </div>
                    </div>
                </div>
            )}
        </>
    );
}