TenantForm.jsx

Go to the documentation of this file.

import { useState, useEffect } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import MainLayout from '../components/Layout/MainLayout';
import '../styles/forms.css';
import { apiFetch } from '../lib/api';
 
function TenantForm() {
  const navigate = useNavigate();
  const { id } = useParams();
  const [form, setForm] = useState({
    name: '',
    subdomain: '',
    status: 'active'
  });
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
 
  useEffect(() => {
    if (id) {
      fetchTenant();
    }
  }, [id]);
 
  async function fetchTenant() {
    setLoading(true);
    setError('');
    try {
      const token = localStorage.getItem('token');
      const res = await apiFetch(`/tenants/${id}`, {
        headers: { 
          Authorization: `Bearer ${token}`
        }
      });
 
      if (!res.ok) throw new Error('Failed to load tenant');
 
      const data = await res.json();
      setForm({
        name: data.tenant.name || '',
        subdomain: data.tenant.subdomain || '',
        status: data.tenant.status || 'active'
      });
    } catch (err) {
      console.error(err);
      setError(err.message || 'Failed to load tenant');
    } finally {
      setLoading(false);
    }
  }
 
  async function handleSubmit(e) {
    e.preventDefault();
    setLoading(true);
    setError('');
 
    if (!form.name?.trim()) {
      setError('Tenant name is required');
      setLoading(false);
      return;
    }
 
    if (!id && !form.subdomain?.trim()) {
      setError('Subdomain is required');
      setLoading(false);
      return;
    }
 
    try {
      const token = localStorage.getItem('token');
      const url = id 
        ? `/tenants/${id}`
        : '/tenants';
      
      const body = id 
        ? { name: form.name, status: form.status }
        : { name: form.name, subdomain: form.subdomain };
 
      const res = await apiFetch(url, {
        method: id ? 'PUT' : 'POST',
        headers: {
          'Content-Type': 'application/json',
          Authorization: `Bearer ${token}`
        },
        body: JSON.stringify(body)
      });
 
      const data = await res.json();
 
      if (!res.ok) {
        throw new Error(data.error || 'Failed to save tenant');
      }
 
      // After creation or update, go back to tenants list
      navigate('/tenants');
    } catch (err) {
      console.error(err);
      setError(err.message || 'Failed to save tenant');
    } finally {
      setLoading(false);
    }
  }
 
  return (
    <MainLayout>
      <div className="page-content">
        <div className="page-header">
          <h2>{id ? 'Edit Tenant' : 'Create Tenant'}</h2>
        </div>
 
        {error && <div className="error-message">{error}</div>}
 
        <form onSubmit={handleSubmit} className="form-container">
          <div className="form-grid">
            <div className="form-section">
              <h3>Tenant Information</h3>
              
              <div className="form-row">
                <div className="form-field">
                  <label>Tenant Name<span className="required">*</span></label>
                  <input
                    id="tenant-name"
                    name="tenant-name"
                    type="text"
                    value={form.name}
                    onChange={(e) => setForm({ ...form, name: e.target.value })}
                    required
                    placeholder="e.g., Acme Corporation"
                  />
                  <span className="field-hint">The name of the organization/company</span>
                </div>
              </div>
 
              <div className="form-row">
                <div className="form-field">
                    <label>
                      Tenant Code<span className="required">*</span>
                      {id && <span style={{ color: 'var(--text-muted)', fontWeight: 'normal' }}> (Cannot be changed)</span>}
                    </label>
                    <input
                      id="tenant-code"
                      name="tenant-code"
                      type="text"
                      value={form.subdomain}
                      onChange={(e) => setForm({ ...form, subdomain: e.target.value.toLowerCase() })}
                      required={!id}
                      disabled={!!id}
                      placeholder="e.g., acme"
                      pattern="[a-z0-9][a-z0-9-]*[a-z0-9]"
                    />
                    <span className="field-hint">
                      Lowercase letters, numbers, and hyphens only. 
                      {!id && ' This will be used as a unique tenant code.'}
                    </span>
                </div>
              </div>
 
              <div className="form-row">
                <div className="form-field">
                  <label>Status</label>
                  <select 
                    value={form.status} 
                    onChange={(e) => setForm({ ...form, status: e.target.value })}
                  >
                    <option value="active">Active</option>
                    <option value="suspended">Suspended</option>
                    <option value="inactive">Inactive</option>
                  </select>
                  <span className="field-hint">
                    Active: Tenant can access the system. 
                    Suspended: Temporary block. 
                    Inactive: Permanently disabled.
                  </span>
                </div>
              </div>
 
              {!id && (
                <div className="info-box" style={{
                  padding: '16px',
                  borderRadius: '8px',
                  backgroundColor: 'var(--bg-secondary)',
                  border: '1px solid var(--border)',
                  marginTop: '16px'
                }}>
                  <h4 style={{ marginTop: 0, display: 'flex', alignItems: 'center', gap: '8px' }}>
                    <span className="material-symbols-outlined">info</span>
                    Next Steps After Creation
                  </h4>
                  <ul style={{ marginBottom: 0, paddingLeft: '20px' }}>
                    <li>Create an owner user for this tenant</li>
                    <li>Configure tenant-specific settings</li>
                    <li>Send invitation to the tenant admin</li>
                  </ul>
                </div>
              )}
            </div>
          </div>
 
          <div className="form-actions">
            <button type="submit" disabled={loading} className="btn">
              {loading ? 'Saving...' : (
                <>
                  <span className="material-symbols-outlined">save</span> 
                  {id ? 'Update' : 'Create'} Tenant
                </>
              )}
            </button>
            <button type="button" className="btn" onClick={() => navigate('/tenants')}>
              <span className="material-symbols-outlined">close</span> Cancel
            </button>
          </div>
        </form>
      </div>
    </MainLayout>
  );
}
 
export default TenantForm;