TenantDetail.jsx

Go to the documentation of this file.

import { useEffect, useState } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import MainLayout from '../components/Layout/MainLayout';
import { apiFetch } from '../lib/api';
import { notifySuccess, notifyError } from '../utils/notifications';
import './Customers.css';
import './Settings.css';
 
 
function TenantDetail() {
  const { id } = useParams();
  const navigate = useNavigate();
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
 
  // Create user modal state
  const [showCreateUserModal, setShowCreateUserModal] = useState(false);
  const [newUser, setNewUser] = useState({
    name: '',
    email: '',
    role: 'staff',
    password: ''
  });
  const [creatingUser, setCreatingUser] = useState(false);
 
  // Users list and editing state
  const [users, setUsers] = useState([]);
  const [usersLoading, setUsersLoading] = useState(false);
  const [editingUser, setEditingUser] = useState(null);
  const [editUserData, setEditUserData] = useState({
    name: '',
    email: '',
    role: ''
  });
  const [updatingUser, setUpdatingUser] = useState(false);
 
  useEffect(() => {
    fetchDetail();
    fetchUsers();
  }, [id]);
 
  async function fetchDetail() {
    setLoading(true);
    setError('');
    try {
      const token = localStorage.getItem('token');
      const res = await apiFetch(`/tenants/${id}`, {
        headers: {
          Authorization: `Bearer ${token}`,
          'X-Tenant-Subdomain': 'admin'
        }
      });
 
      if (!res.ok) throw new Error('Failed to load tenant');
      const json = await res.json();
      setData(json);
    } catch (err) {
      console.error(err);
      setError(err.message || 'Load error');
    } finally {
      setLoading(false);
    }
  }
 
  async function fetchUsers() {
    setUsersLoading(true);
    try {
      const token = localStorage.getItem('token');
      const res = await apiFetch(`/users?tenant_id=${id}`, {
        headers: {
          Authorization: `Bearer ${token}`
        }
      });
 
      if (!res.ok) throw new Error('Failed to load users');
      const usersData = await res.json();
      // Filter to only show users from this tenant
      setUsers(usersData.filter(u => u.tenant_id === id));
    } catch (err) {
      console.error('Error fetching users:', err);
      setUsers([]);
    } finally {
      setUsersLoading(false);
    }
  }
 
  const handleCreateUser = async () => {
    if (!newUser.name || !newUser.email || !newUser.password) {
      notifyError('Please fill in all required fields');
      return;
    }
 
    setCreatingUser(true);
    try {
      const token = localStorage.getItem('token');
      const res = await apiFetch('/users', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          Authorization: `Bearer ${token}`
        },
        body: JSON.stringify({
          ...newUser,
          tenant_id: id // Use the current tenant ID
        })
      });
 
      if (!res.ok) {
        const errData = await res.json();
        throw new Error(errData.error || 'Failed to create user');
      }
 
      notifySuccess('User created successfully');
      setShowCreateUserModal(false);
      setNewUser({ name: '', email: '', role: 'staff', password: '' });
      
      // Refresh users and tenant stats
      fetchUsers();
      fetchDetail();
    } catch (err) {
      console.error(err);
      notifyError(err.message || 'Failed to create user');
    } finally {
      setCreatingUser(false);
    }
  };
 
  const startEditUser = (user) => {
    setEditingUser(user);
    setEditUserData({
      name: user.name,
      email: user.email,
      role: user.role
    });
  };
 
  const cancelEditUser = () => {
    setEditingUser(null);
    setEditUserData({ name: '', email: '', role: '' });
  };
 
  const updateUser = async () => {
    if (!editingUser || !editUserData.name || !editUserData.email) {
      notifyError('Please fill in all required fields');
      return;
    }
 
    setUpdatingUser(true);
    try {
      const token = localStorage.getItem('token');
      const res = await apiFetch(`/users/${editingUser.user_id}`, {
        method: 'PUT',
        headers: {
          'Content-Type': 'application/json',
          Authorization: `Bearer ${token}`
        },
        body: JSON.stringify({
          name: editUserData.name,
          email: editUserData.email,
          role: editUserData.role
        })
      });
 
      if (!res.ok) {
        const errorData = await res.json();
        throw new Error(errorData.error || 'Update failed');
      }
 
      notifySuccess('User updated successfully');
      setEditingUser(null);
      setEditUserData({ name: '', email: '', role: '' });
      
      // Refresh users list
      fetchUsers();
    } catch (err) {
      console.error(err);
      notifyError(err.message || 'Failed to update user');
    } finally {
      setUpdatingUser(false);
    }
  };
 
  const deleteUser = async (user) => {
    if (!window.confirm(`Are you sure you want to delete user "${user.name}"?`)) return;
 
    try {
      const token = localStorage.getItem('token');
      const res = await apiFetch(`/users/${user.user_id}`, {
        method: 'DELETE',
        headers: {
          Authorization: `Bearer ${token}`
        }
      });
 
      if (!res.ok) throw new Error('Delete failed');
 
      notifySuccess('User deleted successfully');
      
      // Refresh users and stats
      fetchUsers();
      fetchDetail();
    } catch (err) {
      console.error(err);
      notifyError(err.message || 'Failed to delete user');
    }
  };
 
  if (loading) return (
    <MainLayout>
      <div className="page-content"><div className="loading">Loading tenant...</div></div>
    </MainLayout>
  );
 
  if (error) return (
    <MainLayout>
      <div className="page-content"><div className="error-message">{error}</div></div>
    </MainLayout>
  );
 
  if (!data) return null;
 
  const { tenant, stats } = data;
 
  return (
    <MainLayout>
      <div className="page-content">
        <div className="page-header">
          <h2>{tenant.name}</h2>
          <div style={{ display: 'flex', gap: '8px' }}>
            <button className="btn" onClick={() => navigate(`/tenants/${id}/edit`)}>
              <span className="material-symbols-outlined">edit</span> Edit
            </button>
          </div>
        </div>
 
        <section className="dashboard-grid">
          {/* Tenant Information Card */}
          <div className="dashboard-card">
            <h3>Tenant Information</h3>
            <div style={{ display: 'grid', gap: '12px' }}>
              <div>
                <strong>Status:</strong>{' '}
                <span className={`status-badge status-${tenant.status?.toLowerCase() || 'active'}`}>
                  {tenant.status || 'Active'}
                </span>
              </div>
              <div>
                <strong>Type:</strong>{' '}
                {tenant.is_msp ? (
                  <span style={{
                    padding: '4px 8px',
                    borderRadius: '4px',
                    backgroundColor: 'var(--primary)',
                    color: 'white',
                    fontSize: '0.9em',
                    fontWeight: 'bold'
                  }}>
                    ROOT TENANT
                  </span>
                ) : (
                  <span style={{
                    padding: '4px 8px',
                    borderRadius: '4px',
                    backgroundColor: 'var(--bg-secondary)',
                    color: 'var(--text-muted)',
                    fontSize: '0.9em'
                  }}>
                    Client Tenant
                  </span>
                )}
              </div>
              <div>
                <strong>Subdomain:</strong> <code>{tenant.subdomain}</code>
              </div>
              <div>
                <strong>Tenant ID:</strong> <code style={{ fontSize: '0.85em' }}>{tenant.tenant_id}</code>
              </div>
              <div>
                <strong>Created:</strong> {new Date(tenant.created_at).toLocaleString()}
              </div>
              <div>
                <strong>Last Updated:</strong> {new Date(tenant.updated_at).toLocaleString()}
              </div>
            </div>
          </div>
 
          {/* Statistics Card */}
          <div className="dashboard-card">
            <h3>Statistics</h3>
            <div style={{ display: 'grid', gap: '16px' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                  <span className="material-symbols-outlined" style={{ color: 'var(--primary)' }}>group</span>
                  <span>Users</span>
                </div>
                <strong style={{ fontSize: '1.2em' }}>{stats.user_count || 0}</strong>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                  <span className="material-symbols-outlined" style={{ color: 'var(--success)' }}>business</span>
                  <span>Customers</span>
                </div>
                <strong style={{ fontSize: '1.2em' }}>{stats.customer_count || 0}</strong>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                  <span className="material-symbols-outlined" style={{ color: 'var(--warning)' }}>confirmation_number</span>
                  <span>Tickets</span>
                </div>
                <strong style={{ fontSize: '1.2em' }}>{stats.ticket_count || 0}</strong>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                  <span className="material-symbols-outlined" style={{ color: 'var(--info)' }}>receipt</span>
                  <span>Invoices</span>
                </div>
                <strong style={{ fontSize: '1.2em' }}>{stats.invoice_count || 0}</strong>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                  <span className="material-symbols-outlined" style={{ color: 'var(--secondary)' }}>description</span>
                  <span>Contracts</span>
                </div>
                <strong style={{ fontSize: '1.2em' }}>{stats.contract_count || 0}</strong>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                  <span className="material-symbols-outlined" style={{ color: 'var(--text-muted)' }}>computer</span>
                  <span>Agents</span>
                </div>
                <strong style={{ fontSize: '1.2em' }}>{stats.agent_count || 0}</strong>
              </div>
            </div>
          </div>
 
          {/* Access Information Card */}
          <div className="dashboard-card">
            <h3>Access Information</h3>
            <div style={{ display: 'grid', gap: '12px' }}>
              <div>
                <strong>Portal URL:</strong>
                <div style={{
                  marginTop: '4px',
                  padding: '8px 12px',
                  backgroundColor: 'var(--bg-secondary)',
                  borderRadius: '4px',
                  fontFamily: 'monospace'
                }}>
                  https://{tenant.subdomain}.yourdomain.com
                </div>
              </div>
              <div style={{
                padding: '12px',
                borderRadius: '4px',
                backgroundColor: 'var(--bg-secondary)',
                border: '1px solid var(--border)'
              }}>
                <div style={{ fontSize: '0.9em', color: 'var(--text-muted)' }}>
                  <strong>Development Access:</strong>
                  <div style={{ marginTop: '8px' }}>
                    Add header to requests:
                    <code style={{
                      display: 'block',
                      marginTop: '4px',
                      padding: '4px 8px',
                      backgroundColor: 'var(--bg-primary)',
                      borderRadius: '2px'
                    }}>
                      X-Tenant-Subdomain: {tenant.subdomain}
                    </code>
                  </div>
                </div>
              </div>
            </div>
          </div>
 
          {/* Quick Actions Card */}
          <div className="dashboard-card">
            <h3>Quick Actions</h3>
            <div style={{ display: 'grid', gap: '8px' }}>
              <button
                className="btn"
                onClick={() => setShowCreateUserModal(true)}
                style={{ justifyContent: 'flex-start' }}
              >
                <span className="material-symbols-outlined">person_add</span>
                Create User for This Tenant
              </button>
              <button
                className="btn"
                onClick={() => navigate(`/tenants/${id}/audit`)}
                style={{ justifyContent: 'flex-start' }}
              >
                <span className="material-symbols-outlined">history</span>
                View Audit Log
              </button>
              <button
                className="btn"
                onClick={() => navigate('/tenants')}
                style={{ justifyContent: 'flex-start' }}
              >
                <span className="material-symbols-outlined">arrow_back</span>
                Back to Tenants List
              </button>
            </div>
          </div>
        </section>
 
        {/* Users Section */}
        <section style={{ marginTop: '2rem' }}>
          <div className="dashboard-card">
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1rem' }}>
              <h3 style={{ margin: 0 }}>Users ({users.length})</h3>
              <button
                className="btn primary"
                onClick={() => setShowCreateUserModal(true)}
                style={{ display: 'flex', alignItems: 'center', gap: '6px' }}
              >
                <span className="material-symbols-outlined" style={{ fontSize: '18px' }}>add</span>
                Add User
              </button>
            </div>
 
            {usersLoading ? (
              <div className="loading">Loading users...</div>
            ) : users.length === 0 ? (
              <div style={{ padding: '2rem', textAlign: 'center', color: 'var(--text-muted)' }}>
                <span className="material-symbols-outlined" style={{ fontSize: '48px', opacity: 0.3 }}>group_off</span>
                <p>No users found for this tenant.</p>
                <button className="btn primary" onClick={() => setShowCreateUserModal(true)}>
                  Create First User
                </button>
              </div>
            ) : (
              <div style={{ overflowX: 'auto' }}>
                <table className="data-table">
                  <thead>
                    <tr>
                      <th>Name</th>
                      <th>Email</th>
                      <th>Role</th>
                      <th>Actions</th>
                    </tr>
                  </thead>
                  <tbody>
                    {users.map(u => (
                      <tr key={u.user_id}>
                        <td>{u.name}</td>
                        <td>{u.email}</td>
                        <td>
                          <span className={`status-badge status-${u.role}`}>
                            {u.role}
                          </span>
                        </td>
                        <td>
                          <div className="action-buttons">
                            <button
                              className="btn primary"
                              onClick={() => startEditUser(u)}
                              style={{ fontSize: '0.9rem', padding: '0.4rem 0.8rem' }}
                            >
                              Edit
                            </button>
                            <button
                              className="btn"
                              onClick={() => deleteUser(u)}
                              style={{ fontSize: '0.9rem', padding: '0.4rem 0.8rem' }}
                            >
                              Delete
                            </button>
                          </div>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            )}
          </div>
        </section>
 
        {/* Edit User Modal */}
        {editingUser && (
          <div className="edit-user-modal">
            <div className="edit-user-modal-content">
              <h3>Edit User: {editingUser.name}</h3>
 
              <div className="form-group">
                <label>Name *</label>
                <input
                  type="text"
                  value={editUserData.name}
                  onChange={(e) => setEditUserData({ ...editUserData, name: e.target.value })}
                  placeholder="Full name"
                />
              </div>
 
              <div className="form-group">
                <label>Email *</label>
                <input
                  type="email"
                  value={editUserData.email}
                  onChange={(e) => setEditUserData({ ...editUserData, email: e.target.value })}
                  placeholder="user@example.com"
                />
              </div>
 
              <div className="form-group">
                <label>Role</label>
                <select
                  value={editUserData.role}
                  onChange={(e) => setEditUserData({ ...editUserData, role: e.target.value })}
                >
                  <option value="staff">Staff</option>
                  <option value="admin">Admin</option>
                  <option value="msp">MSP</option>
                </select>
              </div>
 
              <div style={{ display: 'flex', gap: '8px', marginTop: '16px' }}>
                <button
                  className="btn primary"
                  onClick={updateUser}
                  disabled={updatingUser}
                >
                  {updatingUser ? 'Updating...' : 'Save Changes'}
                </button>
                <button
                  className="btn"
                  onClick={cancelEditUser}
                  disabled={updatingUser}
                >
                  Cancel
                </button>
              </div>
            </div>
          </div>
        )}
 
        {/* Create User Modal */}
        {showCreateUserModal && (
          <div className="edit-user-modal">
            <div className="edit-user-modal-content">
              <h3>Create User for {tenant.name}</h3>
 
              <div className="form-group">
                <label>Name *</label>
                <input
                  type="text"
                  value={newUser.name}
                  onChange={(e) => setNewUser({ ...newUser, name: e.target.value })}
                  placeholder="Full name"
                />
              </div>
 
              <div className="form-group">
                <label>Email *</label>
                <input
                  type="email"
                  value={newUser.email}
                  onChange={(e) => setNewUser({ ...newUser, email: e.target.value })}
                  placeholder="user@example.com"
                />
              </div>
 
              <div className="form-group">
                <label>Password *</label>
                <input
                  type="password"
                  value={newUser.password}
                  onChange={(e) => setNewUser({ ...newUser, password: e.target.value })}
                  placeholder="Enter password"
                />
              </div>
 
              <div className="form-group">
                <label>Role</label>
                <select
                  value={newUser.role}
                  onChange={(e) => setNewUser({ ...newUser, role: e.target.value })}
                >
                  <option value="staff">Staff</option>
                  <option value="admin">Admin</option>
                </select>
              </div>
 
              <div style={{ display: 'flex', gap: '8px', marginTop: '16px' }}>
                <button
                  className="btn primary"
                  onClick={handleCreateUser}
                  disabled={creatingUser}
                >
                  {creatingUser ? 'Creating...' : 'Create User'}
                </button>
                <button
                  className="btn"
                  onClick={() => {
                    setShowCreateUserModal(false);
                    setNewUser({ name: '', email: '', role: 'staff', password: '' });
                  }}
                  disabled={creatingUser}
                >
                  Cancel
                </button>
              </div>
            </div>
          </div>
        )}
      </div>
    </MainLayout>
  );
}
 
export default TenantDetail;