DomainRequestsTable.jsx

Go to the documentation of this file.

import { useState, useEffect } from 'react';
import { apiFetch } from '../../../lib/api';
import { notifySuccess, notifyError } from '../../../utils/notifications';
import DomainRequestDetailModal from './DomainRequestDetailModal';
import './DomainRequests.css';
 
export default function DomainRequestsTable() {
    const [requests, setRequests] = useState([]);
    const [loading, setLoading] = useState(true);
    const [selectedRequest, setSelectedRequest] = useState(null);
    const [showDetailModal, setShowDetailModal] = useState(false);
    const [statusFilter, setStatusFilter] = useState('pending');
 
    useEffect(() => {
        loadRequests();
    }, [statusFilter]);
 
    const loadRequests = async () => {
        try {
            setLoading(true);
            const params = new URLSearchParams();
            if (statusFilter) params.append('status', statusFilter);
 
            console.log('[DomainRequests] Fetching with status filter:', statusFilter);
            const res = await apiFetch(`/domain-requests?${params.toString()}`);
            if (!res.ok) {
                throw new Error(`HTTP ${res.status}: ${res.statusText}`);
            }
            const data = await res.json();
            console.log('[DomainRequests] Received data:', data);
            const requestsList = Array.isArray(data) ? data : data.requests || [];
            console.log('[DomainRequests] Parsed requests list:', requestsList, 'Length:', requestsList.length);
            setRequests(requestsList);
        } catch (err) {
            console.error('Error loading domain requests:', err);
            await notifyError('Load Failed', 'Failed to load domain registration requests');
            setRequests([]);
        } finally {
            setLoading(false);
        }
    };
 
    const openDetailModal = (request) => {
        setSelectedRequest(request);
        setShowDetailModal(true);
    };
 
    const closeDetailModal = () => {
        setShowDetailModal(false);
        setSelectedRequest(null);
    };
 
    const handleRequestProcessed = () => {
        loadRequests(); // Reload list after approval/denial
        closeDetailModal();
    };
 
    const getStatusBadge = (status) => {
        const statusColors = {
            pending: { bg: '#fff3e0', text: '#e65100', label: 'Pending' },
            approved: { bg: '#e8f5e9', text: '#2e7d32', label: 'Approved' },
            denied: { bg: '#ffebee', text: '#c62828', label: 'Denied' },
            registered: { bg: '#e3f2fd', text: '#1565c0', label: 'Registered' },
            failed: { bg: '#fce4ec', text: '#ad1457', label: 'Failed' }
        };
 
        const style = statusColors[status] || statusColors.pending;
 
        return (
            <span style={{
                padding: '4px 10px',
                borderRadius: '12px',
                fontSize: '12px',
                fontWeight: '500',
                background: style.bg,
                color: style.text
            }}>
                {style.label}
            </span>
        );
    };
 
    const formatDate = (dateString) => {
        if (!dateString) return '-';
        return new Date(dateString).toLocaleDateString('en-US', {
            year: 'numeric',
            month: 'short',
            day: 'numeric'
        });
    };
 
    if (loading) {
        return <div>Loading domain registration requests...</div>;
    }
 
    console.log('[DomainRequests] Rendering with', requests.length, 'requests');
 
    return (
        <div className="domain-requests-container">
            <div className="requests-header">
                <h2>Domain Registration Requests</h2>
                <div className="filter-controls">
                    <label>Status:</label>
                    <select
                        value={statusFilter}
                        onChange={(e) => setStatusFilter(e.target.value)}
                        style={{ padding: '6px 12px', borderRadius: '4px' }}
                    >
                        <option value="">All</option>
                        <option value="pending">Pending</option>
                        <option value="approved">Approved</option>
                        <option value="denied">Denied</option>
                        <option value="registered">Registered</option>
                        <option value="failed">Failed</option>
                    </select>
                </div>
            </div>
 
            {requests.length === 0 ? (
                <div className="no-requests">
                    <span className="material-symbols-outlined">inbox</span>
                    <p>No domain registration requests found</p>
                </div>
            ) : (
                <div className="table-container">
                    <table className="data-table">
                        <thead>
                            <tr>
                                <th>Domain</th>
                                <th>Type</th>
                                <th>Customer</th>
                                <th>Years</th>
                                <th>Price</th>
                                <th>Requested</th>
                                <th>Status</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {requests.map((request) => (
                                <tr key={request.request_id}>
                                    <td>
                                        <strong>{request.domain_name}</strong>
                                    </td>
                                    <td>
                                        <span className={`badge ${request.domain_type === 'dns-only' ? 'badge-info' : 'badge-primary'}`}>
                                            {request.domain_type === 'dns-only' ? 'DNS Only' : 'Registration'}
                                        </span>
                                    </td>
                                    <td>{request.customer_name || '-'}</td>
                                    <td>
                                        {request.domain_type === 'dns-only' ? '-' : `${request.years} year${request.years !== 1 ? 's' : ''}`}
                                    </td>
                                    <td>
                                        {request.domain_type === 'dns-only' ? 'Free' : (request.price ? `$${request.price} ${request.currency}` : '-')}
                                    </td>
                                    <td>
                                        <div style={{ fontSize: '0.9em' }}>
                                            {formatDate(request.requested_at)}
                                            {request.requested_by_name && (
                                                <div style={{ color: '#666', fontSize: '0.9em' }}>
                                                    by {request.requested_by_name}
                                                </div>
                                            )}
                                        </div>
                                    </td>
                                    <td>{getStatusBadge(request.status)}</td>
                                    <td>
                                        <button
                                            className="btn btn-sm"
                                            onClick={() => openDetailModal(request)}
                                        >
                                            Review
                                        </button>
                                    </td>
                                </tr>
                            ))}
                        </tbody>
                    </table>
                </div>
            )}
 
            {showDetailModal && selectedRequest && (
                <DomainRequestDetailModal
                    request={selectedRequest}
                    onClose={closeDetailModal}
                    onRequestProcessed={handleRequestProcessed}
                />
            )}
        </div>
    );
}