Tenants.jsx

Go to the documentation of this file.

import { useEffect, useState } from 'react';
// import removed: TenantSelector
import { useNavigate } from 'react-router-dom';
import MainLayout from '../components/Layout/MainLayout';
import './Tickets.css';
import { apiFetch } from '../lib/api';
 
function Tenants() {
  // Use tenantId from JWT
  const token = localStorage.getItem('token');
  let tenantId = '';
  if (token) {
    try {
      const payload = token.split('.')[1];
      const decoded = JSON.parse(atob(payload.replace(/-/g, '+').replace(/_/g, '/')));
      tenantId = decoded.tenant_id || decoded.tenantId || '';
    } catch { }
  }
  const navigate = useNavigate();
  const [tenants, setTenants] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
  const [total, setTotal] = useState(0);
 
  // Pagination
  const [page, setPage] = useState(1);
  const [limit] = useState(10);
 
  // Filters
  const [search, setSearch] = useState('');
  const [statusFilter, setStatusFilter] = useState('');
 
  // Delete confirmation modal
  const [showDeleteModal, setShowDeleteModal] = useState(false);
  const [tenantToDelete, setTenantToDelete] = useState(null);
  const [deleteRelatedData, setDeleteRelatedData] = useState(null);
  const [forceDelete, setForceDelete] = useState(false);
  const [deleting, setDeleting] = useState(false);
 
  useEffect(() => {
    fetchTenants();
  }, [page, search, statusFilter, tenantId]);
 
  async function fetchTenants() {
    setLoading(true);
    setError('');
    try {
      const token = localStorage.getItem('token');
      const params = new URLSearchParams({
        page,
        limit
      });
      if (search) params.append('search', search);
      if (statusFilter) params.append('status', statusFilter);
      // Only send tenant_id if not root tenant
      if (tenantId && tenantId !== '00000000-0000-0000-0000-000000000001') {
        params.append('tenant_id', tenantId);
      }
 
      const res = await apiFetch(`/tenants?${params}`, {
        headers: {
          Authorization: `Bearer ${token}`,
          'X-Tenant-Subdomain': 'admin'
        }
      });
 
      if (!res.ok) {
        if (res.status === 403) {
          throw new Error('Access denied. Root tenant privileges required.');
        }
        throw new Error('Failed to load tenants');
      }
 
      const data = await res.json();
      setTenants(data.tenants || []);
      setTotal(data.total || data.tenants?.length || 0);
    } catch (err) {
      console.error(err);
      setError(err.message || 'Load error');
    } finally {
      setLoading(false);
    }
  }
 
  async function handleDelete(tenantId, tenantName) {
    // First, check what data exists for this tenant
    setTenantToDelete({ id: tenantId, name: tenantName });
    setDeleting(true);
 
    try {
      const token = localStorage.getItem('token');
      const res = await apiFetch(`/tenants/${tenantId}`, {
        headers: {
          Authorization: `Bearer ${token}`,
          'X-Tenant-Subdomain': 'admin'
        }
      });
 
      if (res.ok) {
        const data = await res.json();
        setDeleteRelatedData(data.stats);
        setShowDeleteModal(true);
      }
    } catch (err) {
      console.error(err);
      alert('Failed to check tenant data');
    } finally {
      setDeleting(false);
    }
  }
 
  async function confirmDelete() {
    if (!tenantToDelete) return;
 
    setDeleting(true);
    try {
      const token = localStorage.getItem('token');
      const url = forceDelete
        ? `/tenants/${tenantToDelete.id}?force=true`
        : `/tenants/${tenantToDelete.id}`;
 
      const res = await apiFetch(url, {
        method: 'DELETE',
        headers: {
          Authorization: `Bearer ${token}`,
          'X-Tenant-Subdomain': 'admin'
        }
      });
 
      if (!res.ok) {
        const data = await res.json();
 
        // If there are related records preventing deletion, show detailed message
        if (data.details) {
          const counts = [];
          if (parseInt(data.details.user_count) > 0) counts.push(`${data.details.user_count} users`);
          if (parseInt(data.details.customer_count) > 0) counts.push(`${data.details.customer_count} customers`);
          if (parseInt(data.details.ticket_count) > 0) counts.push(`${data.details.ticket_count} tickets`);
          if (parseInt(data.details.invoice_count) > 0) counts.push(`${data.details.invoice_count} invoices`);
          if (parseInt(data.details.contract_count) > 0) counts.push(`${data.details.contract_count} contracts`);
          if (parseInt(data.details.agent_count) > 0) counts.push(`${data.details.agent_count} agents`);
          if (parseInt(data.details.domain_count) > 0) counts.push(`${data.details.domain_count} domains`);
          if (parseInt(data.details.purchase_order_count) > 0) counts.push(`${data.details.purchase_order_count} purchase orders`);
 
          const message = counts.length > 0
            ? `Cannot delete tenant.\n\nThis tenant has:\n• ${counts.join('\n• ')}\n\n${data.message || 'Please delete these resources first or use force delete.'}`
            : data.message || data.error || 'Failed to delete tenant';
 
          alert(message);
        } else {
          alert(data.message || data.error || 'Failed to delete tenant');
        }
        return;
      }
 
      const data = await res.json();
      alert(`✓ Tenant "${tenantToDelete.name}" deleted successfully${data.cascade_deleted ? ' (including all related data)' : ''}`);
 
      setShowDeleteModal(false);
      setTenantToDelete(null);
      setDeleteRelatedData(null);
      setForceDelete(false);
      fetchTenants();
    } catch (err) {
      console.error(err);
      alert(err.message || 'Failed to delete tenant');
    } finally {
      setDeleting(false);
    }
  }
 
  function cancelDelete() {
    setShowDeleteModal(false);
    setTenantToDelete(null);
    setDeleteRelatedData(null);
    setForceDelete(false);
  }
 
  const totalPages = Math.ceil(total / limit);
 
  return (
    <MainLayout>
      <div className="page-content">
        <div className="page-header">
          <h2>Tenant Management</h2>
          <button className="btn" onClick={() => navigate('/tenants/new')}>
            <span className="material-symbols-outlined">add</span> Create Tenant
          </button>
        </div>
 
        {error && <div className="error-message">{error}</div>}
 
        {/* Filters */}
        <div className="filters-container">
          <div className="filter-group">
            <input
              type="text"
              placeholder="Search tenants..."
              value={search}
              onChange={(e) => {
                setSearch(e.target.value);
                setPage(1);
              }}
              className="filter-input"
            />
          </div>
 
          <div className="filter-group">
            <select
              value={statusFilter}
              onChange={(e) => {
                setStatusFilter(e.target.value);
                setPage(1);
              }}
              className="filter-select"
            >
              <option value="">All Statuses</option>
              <option value="active">Active</option>
              <option value="suspended">Suspended</option>
              <option value="inactive">Inactive</option>
            </select>
          </div>
 
          <button className="btn" onClick={fetchTenants}>
            <span className="material-symbols-outlined">refresh</span> Refresh
          </button>
        </div>
 
        {/* Tenants Table */}
        {loading ? (
          <div className="loading">Loading tenants...</div>
        ) : tenants.length === 0 ? (
          <div className="empty-state">
            <span className="material-symbols-outlined">domain</span>
            <p>No tenants found</p>
          </div>
        ) : (
          <>
            <div className="table-container">
              <table className="data-table">
                <thead>
                  <tr>
                    <th>Tenant Name</th>
                    <th>Subdomain</th>
                    <th>Status</th>
                    <th>Type</th>
                    <th>Users</th>
                    <th>Customers</th>
                    <th>Tickets</th>
                    <th>Created</th>
                    <th>Actions</th>
                  </tr>
                </thead>
                <tbody>
                  {tenants.map((tenant) => (
                    <tr key={tenant.tenant_id}>
                      <td>
                        <strong>{tenant.name}</strong>
                      </td>
                      <td>
                        <code>{tenant.subdomain}</code>
                      </td>
                      <td>
                        <span className={`status-badge status-${tenant.status?.toLowerCase()}`}>
                          {tenant.status}
                        </span>
                      </td>
                      <td>
                        {tenant.is_msp ? (
                          <span style={{
                            padding: '4px 8px',
                            borderRadius: '4px',
                            backgroundColor: 'var(--primary)',
                            color: 'white',
                            fontSize: '0.85em',
                            fontWeight: 'bold'
                          }}>
                            ROOT TENANT
                          </span>
                        ) : (
                          <span style={{
                            padding: '4px 8px',
                            borderRadius: '4px',
                            backgroundColor: 'var(--bg-secondary)',
                            color: 'var(--text-muted)',
                            fontSize: '0.85em'
                          }}>
                            Client
                          </span>
                        )}
                      </td>
                      <td>{tenant.user_count || 0}</td>
                      <td>{tenant.customer_count || 0}</td>
                      <td>{tenant.ticket_count || 0}</td>
                      <td>{new Date(tenant.created_at).toLocaleDateString()}</td>
                      <td>
                        <div style={{ display: 'flex', gap: '8px' }}>
                          <button
                            className="btn btn-sm"
                            onClick={() => navigate(`/tenants/${tenant.tenant_id}`)}
                            title="View Details"
                          >
                            <span className="material-symbols-outlined">visibility</span>
                          </button>
                          <button
                            className="btn btn-sm"
                            onClick={() => navigate(`/tenants/${tenant.tenant_id}/edit`)}
                            title="Edit"
                          >
                            <span className="material-symbols-outlined">edit</span>
                          </button>
                          <button
                            className="btn btn-sm"
                            onClick={() => handleDelete(tenant.tenant_id, tenant.name)}
                            title="Delete"
                            style={{ color: 'var(--danger)' }}
                            disabled={tenant.is_msp}
                          >
                            <span className="material-symbols-outlined">delete</span>
                          </button>
                        </div>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
 
            {/* Pagination */}
            {totalPages > 1 && (
              <div className="pagination">
                <button
                  className="btn"
                  onClick={() => setPage(p => Math.max(1, p - 1))}
                  disabled={page === 1}
                >
                  Previous
                </button>
                <span className="pagination-info">
                  Page {page} of {totalPages} ({total} total)
                </span>
                <button
                  className="btn"
                  onClick={() => setPage(p => Math.min(totalPages, p + 1))}
                  disabled={page === totalPages}
                >
                  Next
                </button>
              </div>
            )}
          </>
        )}
 
        {/* Delete Confirmation Modal */}
        {showDeleteModal && tenantToDelete && (
          <div className="modal-overlay" onClick={cancelDelete}>
            <div className="modal-content" onClick={(e) => e.stopPropagation()} style={{ maxWidth: '600px' }}>
              <div className="modal-header">
                <h2>
                  <span className="material-symbols-outlined" style={{ color: 'var(--danger)', verticalAlign: 'middle' }}>
                    warning
                  </span>
                  {' '}Delete Tenant
                </h2>
                <button className="modal-close" onClick={cancelDelete}>
                  <span className="material-symbols-outlined">close</span>
                </button>
              </div>
 
              <div className="modal-body">
                <div style={{ marginBottom: '20px' }}>
                  <p style={{ fontSize: '1.1em', marginBottom: '10px' }}>
                    Are you sure you want to delete tenant <strong>"{tenantToDelete.name}"</strong>?
                  </p>
                  <p style={{ color: 'var(--text-muted)', marginBottom: '20px' }}>
                    This action cannot be undone.
                  </p>
                </div>
 
                {deleteRelatedData && (
                  <div style={{
                    backgroundColor: 'var(--bg-secondary)',
                    padding: '15px',
                    borderRadius: '8px',
                    marginBottom: '20px'
                  }}>
                    <h3 style={{ marginBottom: '10px', fontSize: '1em' }}>
                      <span className="material-symbols-outlined" style={{ verticalAlign: 'middle', fontSize: '1.2em' }}>
                        info
                      </span>
                      {' '}Tenant Data Summary
                    </h3>
 
                    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '8px', fontSize: '0.95em' }}>
                      <div>👥 Users: <strong>{deleteRelatedData.user_count || 0}</strong></div>
                      <div>🏢 Customers: <strong>{deleteRelatedData.customer_count || 0}</strong></div>
                      <div>🎫 Tickets: <strong>{deleteRelatedData.ticket_count || 0}</strong></div>
                      <div>📄 Invoices: <strong>{deleteRelatedData.invoice_count || 0}</strong></div>
                      <div>📋 Contracts: <strong>{deleteRelatedData.contract_count || 0}</strong></div>
                      <div>🖥️ Agents: <strong>{deleteRelatedData.agent_count || 0}</strong></div>
                    </div>
 
                    {(parseInt(deleteRelatedData.user_count) > 0 ||
                      parseInt(deleteRelatedData.customer_count) > 0 ||
                      parseInt(deleteRelatedData.ticket_count) > 0 ||
                      parseInt(deleteRelatedData.invoice_count) > 0 ||
                      parseInt(deleteRelatedData.contract_count) > 0 ||
                      parseInt(deleteRelatedData.agent_count) > 0) && (
                        <>
                          <div style={{
                            marginTop: '15px',
                            padding: '12px',
                            backgroundColor: 'var(--warning-bg, #fff3e0)',
                            border: '1px solid var(--warning, #ff9800)',
                            borderRadius: '4px',
                            color: 'var(--warning-text, #e65100)'
                          }}>
                            <strong>⚠️ Warning:</strong> This tenant has data that will be affected.
                          </div>
 
                          <label style={{
                            display: 'flex',
                            alignItems: 'center',
                            marginTop: '15px',
                            padding: '10px',
                            backgroundColor: 'var(--danger-bg, #ffebee)',
                            border: '1px solid var(--danger, #f44336)',
                            borderRadius: '4px',
                            cursor: 'pointer'
                          }}>
                            <input
                              type="checkbox"
                              checked={forceDelete}
                              onChange={(e) => setForceDelete(e.target.checked)}
                              style={{ marginRight: '10px' }}
                            />
                            <span style={{ fontSize: '0.95em' }}>
                              <strong>Force delete</strong> - Permanently delete all related data (users, customers, tickets, invoices, contracts, agents, domains, etc.)
                            </span>
                          </label>
                        </>
                      )}
                  </div>
                )}
              </div>
 
              <div className="modal-footer">
                <button
                  className="btn"
                  onClick={cancelDelete}
                  disabled={deleting}
                >
                  Cancel
                </button>
                <button
                  className="btn btn-danger"
                  onClick={confirmDelete}
                  disabled={deleting || (deleteRelatedData &&
                    (parseInt(deleteRelatedData.user_count) > 0 ||
                      parseInt(deleteRelatedData.customer_count) > 0 ||
                      parseInt(deleteRelatedData.ticket_count) > 0 ||
                      parseInt(deleteRelatedData.invoice_count) > 0 ||
                      parseInt(deleteRelatedData.contract_count) > 0 ||
                      parseInt(deleteRelatedData.agent_count) > 0) && !forceDelete)}
                >
                  {deleting ? (
                    <>
                      <span className="material-symbols-outlined spinning">progress_activity</span>
                      Deleting...
                    </>
                  ) : (
                    <>
                      <span className="material-symbols-outlined">delete_forever</span>
                      {forceDelete ? 'Force Delete Tenant' : 'Delete Tenant'}
                    </>
                  )}
                </button>
              </div>
            </div>
          </div>
        )}
      </div>
    </MainLayout>
  );
}
 
export default Tenants;